{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-strip",
  "title": "Stat Strip",
  "author": "Alex Chih (https://alexchih.com)",
  "description": "Three-up stat band with tri-colored numerals on a glass surface.",
  "registryDependencies": [
    "https://washiveil.alexchih.com/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/washiveil/ui/stat-strip.tsx",
      "content": "import { cn } from '@/lib/utils';\n\nexport interface StatStripItem {\n  value: string;\n  label: string;\n}\n\nexport interface StatStripProps extends React.ComponentProps<'div'> {\n  /** Designed for exactly three items — the grid is three columns and the\n   *  numeral hues cycle ruri / korozen / sumire. */\n  items: StatStripItem[];\n}\n\n// Tri-color numeral cycle: ruri / korozen / sumire — homage order\n// (three numbers, three characters). Keep in sync with the palette.\nconst numeralHues = [\n  'text-ruri dark:text-ruri-soft',\n  'text-korozen dark:text-korozen-soft',\n  'text-sumire dark:text-sumire-soft',\n];\n\nexport function StatStrip({ items, className, ...props }: StatStripProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-3 gap-0 divide-x divide-glass-border rounded-2xl border border-glass-border bg-glass py-5 shadow-[0_8px_32px_rgba(28,25,20,0.06)] backdrop-blur-xl',\n        className,\n      )}\n      {...props}\n    >\n      {items.map((item, i) => (\n        <div key={i} className=\"px-4 sm:px-5\">\n          <p className={cn('font-display text-3xl font-medium', numeralHues[i % 3])}>{item.value}</p>\n          <p className=\"mt-1 font-mono text-[0.75rem] tracking-[0.2em] text-muted-foreground uppercase\">{item.label}</p>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}