{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-group",
  "type": "registry:ui",
  "title": "Stat Group",
  "description": "Horizontal row (or grid) of StatCards. The pattern stat pages reach for: 3-5 hero KPIs at the top of a page, each a labelled big number. Server component.",
  "author": "ofri-peretz <https://github.com/ofri-peretz>",
  "categories": [
    "data",
    "pattern"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://ds.interlace.tools/r/theme.json",
    "https://ds.interlace.tools/r/cn.json",
    "https://ds.interlace.tools/r/grid.json",
    "https://ds.interlace.tools/r/skeleton.json",
    "https://ds.interlace.tools/r/stat-card.json"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/patterns/stat-group.tsx",
      "target": "components/ui/patterns/stat-group.tsx",
      "type": "registry:ui",
      "content": "import * as React from 'react';\n\n// @interlace/stat-group v1.1.0 — Interlace design system.\n// Docs, props and live preview: https://ds.interlace.tools/c/stat-group\n// What changed since: https://ds.interlace.tools/c/stat-group#history\n// Generated banner — keep it, the upgrade diff reads this version.\n\n/**\n * @interlace/ui — StatGroup\n *\n * Horizontal row (or grid) of StatCards. The pattern stat pages reach\n * for: 3-5 hero KPIs at the top of a page, each a labelled big number.\n * Server component.\n *\n * | Rule | Concept                          | Where in this file                                          |\n * | ---- | -------------------------------- | ----------------------------------------------------------- |\n * | R4   | Extends native el                | `React.ComponentProps<'section'>`                           |\n * | R6   | data-slot on root                | `data-slot=\"stat-group\"`                                    |\n * | R10  | Composition seam (stats)         | `stats: StatCardProps[]`                                    |\n * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |\n * | R25  | Server component                 | No hooks                                                    |\n */\n\nimport { cn } from '@/lib/utils';\nimport { Grid } from '@/components/ui/grid';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { StatCard } from '@/components/ui/patterns/stat-card';\n\nexport const MIN_VIEWPORT = 320 as const;\n\ntype StatItem = React.ComponentProps<typeof StatCard>;\n\ninterface StatGroupProps extends React.ComponentProps<'section'> {\n  stats?: StatItem[];\n  cols?: 2 | 3 | 4;\n  loading?: boolean;\n}\n\n/**\n * Mobile-first track counts per desktop `cols`. Written out statically because\n * Tailwind cannot scan a runtime-built `sm:grid-cols-${n}`.\n */\nconst STAT_GRID_COLS: Record<2 | 3 | 4, string> = {\n  2: 'grid-cols-1 sm:grid-cols-2',\n  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',\n  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',\n};\n\nfunction StatGroup({\n  stats = [],\n  cols = 3,\n  loading,\n  className,\n  ...props\n}: StatGroupProps) {\n  return (\n    <section\n      data-slot=\"stat-group\"\n      data-min-viewport={String(MIN_VIEWPORT)}\n      className={cn('w-full', className)}\n      {...props}\n    >\n      {/* Responsive collapse: `cols` is a DESKTOP count. Handed to Grid\n          unqualified it stays 4 tracks at every width, which on a 375px phone\n          is a 68px card whose label and trend icon spill past the viewport. */}\n      <Grid cols={cols} gap=\"md\" className={STAT_GRID_COLS[cols]}>\n        {loading\n          ? Array.from({ length: cols }).map((_, i) => (\n              <Skeleton key={i} variant=\"stat-card\" label={null} />\n            ))\n          : stats.map((stat, i) => <StatCard key={i} {...stat} />)}\n      </Grid>\n    </section>\n  );\n}\nStatGroup.displayName = 'StatGroup';\n\nexport { StatGroup };\nexport type { StatGroupProps };\n"
    }
  ],
  "meta": {
    "tier": "pattern",
    "client": false,
    "minViewport": 320,
    "loading": true,
    "version": "1.1.0",
    "since": "1.0.0"
  },
  "docs": "## @interlace/stat-group\n\nInstalled to `components/ui/patterns/stat-group.tsx`.\n\n```tsx\nimport { /* … */ } from '@/components/ui/patterns/stat-group';\n```\n\nProps, a11y contract, live preview and source: https://ds.interlace.tools/c/stat-group\n\nRequires the `@interlace/theme` CSS baseline (installed automatically as a registry dependency)."
}