{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-bento",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://usva.build/r/bento-grid.json"
  ],
  "files": [
    {
      "path": "stat-bento.tsx",
      "target": "components/ui/stat-bento.tsx",
      "type": "registry:ui",
      "content": "import type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { BentoMetric } from \"./bento-grid\";\n\nexport interface StatBentoItem {\n  value: React.ReactNode;\n  label: React.ReactNode;\n  /** Trailing unit on the value, keyed to the alternate accent. */\n  suffix?: React.ReactNode;\n  icon?: React.ReactNode;\n}\n\ninterface StatBentoOwnProps<T extends React.ElementType> {\n  stats: StatBentoItem[];\n  /** Count each numeric value up from zero on mount. */\n  animate?: boolean;\n  /**\n   * Element rendered as the grid. Pass `RevealGroup` to stagger the cells: it\n   * animates its direct children, so it has to be the grid rather than wrap it.\n   */\n  as?: T;\n}\n\nexport type StatBentoProps<T extends React.ElementType = \"div\"> =\n  StatBentoOwnProps<T> &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof StatBentoOwnProps<T>>;\n\n/**\n * A standalone strip of headline numbers, not a bento of mixed cells: every child is\n * a display-weight metric. It stays motion-free so the copied registry source has no\n * import to resolve. Polymorphic rather than a forwardRef so `as` can carry the props\n * of whatever element renders the grid.\n *\n * Cells take a translucent ink fill rather than `bg-surface`, which would vanish the\n * moment the strip sits inside a Card that already paints that surface.\n */\nexport function StatBento<T extends React.ElementType = \"div\">({\n  className,\n  stats,\n  animate,\n  as,\n  ...props\n}: StatBentoProps<T>) {\n  const Comp = (as ?? \"div\") as React.ElementType;\n  return (\n    <Comp\n      className={cn(\"grid grid-cols-1 gap-4 sm:grid-cols-3\", className)}\n      {...props}\n    >\n      {stats.map((stat, index) => (\n        <BentoMetric\n          key={typeof stat.label === \"string\" ? stat.label : index}\n          size=\"lg\"\n          animate={animate}\n          value={stat.value}\n          suffix={stat.suffix}\n          label={stat.label}\n          icon={stat.icon}\n          className=\"rounded-2xl bg-ink/[0.04] sm:p-8\"\n        />\n      ))}\n    </Comp>\n  );\n}\nStatBento.displayName = \"StatBento\";\n"
    }
  ]
}