{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-grid",
  "type": "registry:block",
  "title": "Stats Grid",
  "description": "Responsive metric grid with custom icons, comparison labels and trends.",
  "dependencies": [
    "@mantine/core@^9",
    "@tabler/icons-react@^3"
  ],
  "docs": "Adapted from Mantine UI StatsGrid at ffbf61c559f374a7ea28fcf00355e84dcbe9a908; metrics and icons are supplied by the consumer.",
  "registryDependencies": [
    "@house/mantine-ui-license"
  ],
  "files": [
    {
      "path": "registry/mantine-ui/stats-grid/stats-grid.tsx",
      "type": "registry:ui",
      "content": "/**\n * Adapted from Mantine UI's StatsGrid at\n * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see\n * LICENSES/MANTINE-UI.txt after installation.\n */\n\nimport { Group, Paper, SimpleGrid, Text } from \"@mantine/core\";\nimport { IconArrowDownRight, IconArrowUpRight } from \"@tabler/icons-react\";\nimport type { ReactNode } from \"react\";\n\nimport classes from \"./stats-grid.module.css\";\n\nexport interface StatsGridItem {\n  title: string;\n  value: ReactNode;\n  diff: number;\n  icon?: ReactNode;\n  comparisonLabel?: string;\n}\n\nexport interface StatsGridProps {\n  items: StatsGridItem[];\n}\n\nexport function StatsGrid({ items }: StatsGridProps) {\n  const desktopColumns = Math.max(1, Math.min(items.length, 4));\n  const stats = items.map((stat) => {\n    const DiffIcon = stat.diff >= 0 ? IconArrowUpRight : IconArrowDownRight;\n\n    return (\n      <Paper withBorder p=\"md\" radius=\"md\" key={stat.title}>\n        <Group justify=\"space-between\">\n          <Text size=\"xs\" className={classes.title}>\n            {stat.title}\n          </Text>\n          {stat.icon && <span className={classes.icon}>{stat.icon}</span>}\n        </Group>\n\n        <Group align=\"flex-end\" gap=\"xs\" mt={25}>\n          <Text className={classes.value}>{stat.value}</Text>\n          <Text\n            c={\n              stat.diff >= 0\n                ? \"light-dark(var(--mantine-color-teal-9), var(--mantine-color-teal-4))\"\n                : \"light-dark(var(--mantine-color-red-9), var(--mantine-color-red-4))\"\n            }\n            fz=\"sm\"\n            fw={500}\n            className={classes.diff}\n          >\n            <span>{stat.diff}%</span>\n            <DiffIcon size={16} stroke={1.5} />\n          </Text>\n        </Group>\n\n        <Text fz=\"xs\" mt={7} className={classes.comparison}>\n          {stat.comparisonLabel ?? \"Compared to previous period\"}\n        </Text>\n      </Paper>\n    );\n  });\n\n  return (\n    <div className={classes.root}>\n      <SimpleGrid cols={{ base: 1, xs: 2, md: desktopColumns }}>{stats}</SimpleGrid>\n    </div>\n  );\n}\n"
    },
    {
      "path": "registry/mantine-ui/stats-grid/stats-grid.module.css",
      "type": "registry:file",
      "target": "@ui/stats-grid.module.css",
      "content": "/*\n * Adapted from Mantine UI's StatsGrid at\n * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see\n * LICENSES/MANTINE-UI.txt after installation.\n */\n.root {\n  padding: calc(var(--mantine-spacing-xl) * 1.5);\n}\n\n.value {\n  font-size: 24px;\n  font-weight: 700;\n  line-height: 1;\n}\n\n.diff {\n  display: flex;\n  align-items: center;\n  line-height: 1;\n}\n\n.icon {\n  display: inline-flex;\n  color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));\n}\n\n.title {\n  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-4));\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.comparison {\n  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-4));\n}\n"
    }
  ],
  "meta": {
    "mantine": {
      "requires": ">=9",
      "provider": "MantineProvider",
      "props": {
        "StatsGrid": [
          {
            "name": "items",
            "type": "StatsGridItem[]",
            "required": true,
            "description": "Renders one stat card per item, laying them out in a responsive grid that scales up to four columns on desktop based on the item count."
          }
        ]
      },
      "usage": {
        "path": "registry/mantine-ui/stats-grid/stats-grid.usage.tsx",
        "content": "import { IconCoin, IconDiscount2, IconReceipt2, IconUserPlus } from \"@tabler/icons-react\";\nimport { StatsGrid } from \"@/components/ui/stats-grid\";\n\nexport function QuarterlyStats() {\n  return (\n    <StatsGrid\n      items={[\n        {\n          title: \"Revenue\",\n          value: \"$48,392\",\n          diff: 12,\n          icon: <IconCoin size={22} stroke={1.5} />,\n        },\n        {\n          title: \"New customers\",\n          value: \"1,204\",\n          diff: 8,\n          icon: <IconUserPlus size={22} stroke={1.5} />,\n        },\n        {\n          title: \"Discount volume\",\n          value: \"$3,120\",\n          diff: -4,\n          icon: <IconDiscount2 size={22} stroke={1.5} />,\n          comparisonLabel: \"Compared to last quarter\",\n        },\n        {\n          title: \"Refunds\",\n          value: \"312\",\n          diff: -2,\n          icon: <IconReceipt2 size={22} stroke={1.5} />,\n        },\n      ]}\n    />\n  );\n}\n"
      }
    }
  }
}