{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-157",
  "type": "registry:component",
  "dependencies": [
    "@remixicon/react"
  ],
  "registryDependencies": [
    "https://coss.com/origin/r/label.json",
    "https://coss.com/origin/r/radio-group.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-157.tsx",
      "content": "import { RiStarFill } from \"@remixicon/react\";\nimport { useId } from \"react\";\n\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <RadioGroup defaultValue=\"all\">\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-1`} value=\"all\" />\n        <Label htmlFor={`${id}-1`}>\n          All reviews{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (12,921)\n          </span>\n        </Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-2`} value=\"5-stars\" />\n        <Label className=\"inline-flex items-center gap-1\" htmlFor={`${id}-2`}>\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex items-center text-amber-500\"\n          >\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n          </span>\n          <span className=\"sr-only\">5 stars</span>{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (5,168)\n          </span>\n        </Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-3`} value=\"4-stars\" />\n        <Label className=\"inline-flex items-center gap-1\" htmlFor={`${id}-3`}>\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex items-center text-amber-500\"\n          >\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n          </span>\n          <span className=\"sr-only\">4 stars</span>{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (4,726)\n          </span>\n        </Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-4`} value=\"3-stars\" />\n        <Label className=\"inline-flex items-center gap-1\" htmlFor={`${id}-4`}>\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex items-center text-amber-500\"\n          >\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n          </span>\n          <span className=\"sr-only\">3 stars</span>{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (3,234)\n          </span>\n        </Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-5`} value=\"2-stars\" />\n        <Label className=\"inline-flex items-center gap-1\" htmlFor={`${id}-5`}>\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex items-center text-amber-500\"\n          >\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n          </span>\n          <span className=\"sr-only\">2 stars</span>{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (1,842)\n          </span>\n        </Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-6`} value=\"1-star\" />\n        <Label className=\"inline-flex items-center gap-1\" htmlFor={`${id}-6`}>\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex items-center text-amber-500\"\n          >\n            <RiStarFill size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n          </span>\n          <span className=\"sr-only\">1 star</span>{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (452)\n          </span>\n        </Label>\n      </div>\n    </RadioGroup>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "radio",
      "label",
      "rating",
      "radix"
    ]
  }
}