{
  "name": "rating-controlled-demo",
  "type": "registry:example",
  "registryDependencies": [
    "rating",
    "button"
  ],
  "files": [
    {
      "path": "examples/rating-controlled-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { Rating, RatingItem } from \"@/registry/bases/radix/ui/rating\";\n\nexport default function RatingControlledDemo() {\n  const [rating, setRating] = React.useState(3);\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex flex-col gap-2\">\n        <h4 className=\"text-sm font-medium\">Controlled Rating</h4>\n        <Rating value={rating} onValueChange={setRating}>\n          {Array.from({ length: 5 }, (_, i) => (\n            <RatingItem key={i} />\n          ))}\n        </Rating>\n        <p className=\"text-sm text-muted-foreground\">\n          Current rating: {rating}\n        </p>\n      </div>\n      <div className=\"flex gap-2\">\n        <Button variant=\"outline\" size=\"sm\" onClick={() => setRating(0)}>\n          Clear\n        </Button>\n        <Button variant=\"outline\" size=\"sm\" onClick={() => setRating(5)}>\n          Set to 5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\" onClick={() => setRating(2.5)}>\n          Set to 2.5\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}