{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stars",
  "type": "registry:ui",
  "title": "Stars",
  "description": "Fractional star rating with count, filled by a clipped overlay.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "ui"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "ui/stars.tsx",
      "content": "import { useId } from \"react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* Fractional star rating. Each star clips its own fill to the fraction it\n   earns, so 4.6 reads as four full stars and a 60% fifth. */\n\nconst PATH = \"M12 2.5l2.9 6.1 6.7.8-4.9 4.6 1.3 6.6L12 17.3l-6 3.3 1.3-6.6L2.4 9.4l6.7-.8L12 2.5z\"\n\nexport function Stars({\n  value,\n  count,\n  size = 14,\n  className,\n  showValue = false,\n}: {\n  value: number\n  count?: number\n  size?: number\n  className?: string\n  showValue?: boolean\n}) {\n  const id = useId()\n  return (\n    <span className={cn(\"inline-flex items-center gap-2\", className)} aria-label={`${value.toFixed(1)} out of 5`}>\n      <span className=\"flex gap-0.5\" aria-hidden>\n        {Array.from({ length: 5 }).map((_, i) => {\n          const frac = Math.max(0, Math.min(1, value - i))\n          const clip = `${id}-${i}`\n          return (\n            <svg key={i} width={size} height={size} viewBox=\"0 0 24 24\">\n              <defs>\n                <clipPath id={clip}>\n                  <rect x=\"0\" y=\"0\" width={24 * frac} height=\"24\" />\n                </clipPath>\n              </defs>\n              <path d={PATH} className=\"fill-sk-ink/15\" />\n              {frac > 0 ? <path d={PATH} className=\"fill-sk-accent\" clipPath={`url(#${clip})`} /> : null}\n            </svg>\n          )\n        })}\n      </span>\n      {showValue ? <span className=\"text-sm font-medium tabular-nums text-sk-ink\">{value.toFixed(1)}</span> : null}\n      {typeof count === \"number\" ? <span className=\"text-sm tabular-nums text-sk-muted\">({count.toLocaleString()})</span> : null}\n    </span>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/storekit/ui/stars.tsx"
    }
  ],
  "meta": {
    "section": "ui",
    "previewHeight": 160
  }
}