{
  "name": "variant-selector-basic-ex-02",
  "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_02() {\n  const [selectedVariant1, setSelectedVariant1] = React.useState(\"variant-m\");\n  const [selectedVariant2, setSelectedVariant2] = React.useState(\"variant-m\");\n\n  return (\n    <div className=\"flex items-center gap-6 space-y-8\">\n      <fieldset className=\"max-w-sm\">\n        <legend className=\"mb-2 text-sm font-medium\">Select Size:</legend>\n        <VariantSelectorBasic\n          value={selectedVariant1}\n          onValueChange={setSelectedVariant1}\n          variants={variants}\n          className=\"max-w-[100px] grid-cols-1 sm:grid-cols-1\"\n        />\n      </fieldset>\n      <fieldset className=\"max-w-sm\">\n        <legend className=\"mb-2 text-sm font-medium\">Select Size:</legend>\n        <VariantSelectorBasic\n          value={selectedVariant2}\n          onValueChange={setSelectedVariant2}\n          variants={variants}\n          className=\"grid-cols-7 sm:grid-cols-7\"\n        />\n      </fieldset>\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/components/variant-selector/basic/variant-selector-basic-ex-02.tsx",
      "target": "components/commerce-ui/variant-selector-basic-ex-02.tsx"
    }
  ]
}