{
  "name": "variant-selector-basic-ex-04",
  "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\n// Example size variants\nconst sizeVariants: VariantItem[] = [\n  { id: \"size-xs\", label: \"XS\", value: \"size-xs\" },\n  { id: \"size-s\", label: \"S\", value: \"size-s\" },\n  { id: \"size-m\", label: \"M\", value: \"size-m\" },\n  { id: \"size-l\", label: \"L\", value: \"size-l\" },\n  { id: \"size-xl\", label: \"XL\", value: \"size-xl\" },\n];\n\nexport default function VariantSelector_Basic_Ex_04() {\n  const [selectedSize, setSelectedSize] = React.useState(\"size-m\");\n\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"space-y-4 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\">\n        <h3 className=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">\n          Pill Style\n        </h3>\n        <p className=\"text-sm text-gray-600 dark:text-gray-400\">\n          Rounded pill-shaped variant buttons with custom active state using\n          data-state\n        </p>\n\n        <div className=\"space-y-2\">\n          <label className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n            Select Size:\n          </label>\n          <VariantSelectorBasic\n            value={selectedSize}\n            onValueChange={setSelectedSize}\n            variants={sizeVariants}\n            className=\"gap-2\"\n            itemClassName=\"rounded-full min-w-[60px] bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800\n                        data-[state=checked]:bg-gray-900 data-[state=checked]:border-gray-900 data-[state=checked]:text-white \n                        dark:data-[state=checked]:bg-white dark:data-[state=checked]:border-white dark:data-[state=checked]:text-gray-900\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/components/variant-selector/basic/variant-selector-basic-ex-04.tsx",
      "target": "components/commerce-ui/variant-selector-basic-ex-04.tsx"
    }
  ]
}