{
  "name": "rating-themes-demo",
  "type": "registry:example",
  "registryDependencies": [
    "rating"
  ],
  "files": [
    {
      "path": "examples/rating-themes-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { cn } from \"cn\";\nimport { Heart, Star, Zap } from \"lucide-react\";\n\nimport { Rating, RatingItem } from \"@/registry/bases/radix/ui/rating\";\n\nconst themes = [\n  {\n    label: \"Default\",\n    description: \"Classic star rating\",\n    value: 4,\n    icon: Star,\n    className: \"text-primary\",\n  },\n  {\n    label: \"Gold\",\n    description: \"Premium gold stars\",\n    value: 5,\n    icon: Star,\n    className: \"text-yellow-500\",\n  },\n\n  {\n    label: \"Heart\",\n    description: \"Love & favorites\",\n    value: 5,\n    icon: Heart,\n    className: \"text-pink-500\",\n  },\n  {\n    label: \"Energy\",\n    description: \"Performance rating\",\n    value: 4,\n    icon: Zap,\n    className: \"text-orange-500\",\n  },\n];\n\nexport default function RatingThemesDemo() {\n  return (\n    <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n      {themes.map((theme) => (\n        <div\n          key={theme.label}\n          className=\"flex flex-col items-center gap-3 rounded-lg border p-4\"\n        >\n          <h4 className=\"text-sm font-medium\">{theme.label}</h4>\n\n          <Rating\n            defaultValue={theme.value}\n            className={cn(\"gap-1\", theme.className)}\n          >\n            {Array.from({ length: 5 }, (_, i) => (\n              <RatingItem key={i}>\n                <theme.icon />\n              </RatingItem>\n            ))}\n          </Rating>\n          <p className=\"text-xs text-muted-foreground\">{theme.description}</p>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "target": ""
    }
  ],
  "dependencies": [
    "cn"
  ]
}