{
  "name": "variant-selector-basic-ex-01",
  "type": "registry:example",
  "dependencies": [
    "lucide-react",
    "@radix-ui/react-radio-group"
  ],
  "registryDependencies": [
    "https://ui.stackzero.co/r/variant-selector-basic.json"
  ],
  "files": [
    {
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport VariantSelectorBasic, {\n  VariantItem,\n} from \"@/components/commerce-ui/variant-selector-basic\";\n\nconst variants: VariantItem[] = [\n  { id: \"variant-xxs\", label: \"XXS\", value: \"variant-xxs\" },\n  { id: \"variant-xs\", label: \"XS\", value: \"variant-xs\" },\n  { id: \"variant-s\", label: \"S\", value: \"variant-s\" },\n  { id: \"variant-m\", label: \"M\", value: \"variant-m\" },\n  { id: \"variant-l\", label: \"L\", value: \"variant-l\" },\n  { id: \"variant-xl\", label: \"XL\", value: \"variant-xl\" },\n  { id: \"variant-xxl\", label: \"XXL\", value: \"variant-xxl\" },\n];\n\nexport default function VariantSelector_Basic_Ex_01() {\n  const [selectedVariant, setSelectedVariant] = React.useState(\"variant-m\");\n\n  return (\n    <div className=\"space-y-8\">\n      <fieldset className=\"space-y-4\">\n        <legend className=\"mb-2 text-sm font-medium\">Select Size:</legend>\n        <VariantSelectorBasic\n          value={selectedVariant}\n          onValueChange={setSelectedVariant}\n          variants={variants}\n        />\n      </fieldset>\n\n      <button\n        onClick={() => setSelectedVariant(\"variant-m\")}\n        className=\"bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium\"\n      >\n        Reset to Medium\n      </button>\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/components/variant-selector/basic/variant-selector-basic-ex-01.tsx",
      "target": "components/commerce-ui/variant-selector-basic-ex-01.tsx"
    }
  ]
}