{
  "name": "variant-selector-multiple",
  "type": "registry:component",
  "dependencies": [
    "lucide-react",
    "@radix-ui/react-toggle-group"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@radix-ui/react-toggle-group\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface VariantItem {\n  id: string;\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\ninterface VariantSelectorMultipleProps {\n  values: string[];\n  onValuesChange: (values: string[]) => void;\n  variants: VariantItem[];\n  className?: string;\n  itemClassName?: string;\n  labelClassName?: string;\n}\n\nconst VariantSelectorMultiple = ({\n  className,\n  itemClassName,\n  labelClassName,\n  onValuesChange,\n  values,\n  variants,\n}: VariantSelectorMultipleProps) => {\n  return (\n    <ToggleGroup\n      type=\"multiple\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      value={values}\n      onValueChange={onValuesChange}\n    >\n      {variants.map((variant) => (\n        <div key={variant.id} className=\"flex items-center\">\n          <ToggleGroupItem\n            value={variant.value}\n            disabled={variant.disabled}\n            className={cn(\n              \"relative h-10 w-full min-w-[80px] rounded-md border border-gray-300 px-3 py-2 text-center text-sm transition-all\",\n              \"dark:border-gray-600 dark:text-gray-100\",\n              \"data-[state=on]:border-2 data-[state=on]:border-black dark:data-[state=on]:border-white\",\n              \"focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-none\",\n              \"dark:focus:ring-white dark:focus:ring-offset-gray-900\",\n              \"cursor-pointer disabled:cursor-not-allowed disabled:opacity-50\",\n              itemClassName\n            )}\n          >\n            <span className={cn(\"font-medium\", labelClassName)}>\n              {variant.label}\n            </span>\n          </ToggleGroupItem>\n        </div>\n      ))}\n    </ToggleGroup>\n  );\n};\n\nexport default VariantSelectorMultiple;\n",
      "path": "/components/commerce-ui/components/variant-selector/multiple/variant-selector-multiple.tsx",
      "target": "components/commerce-ui/variant-selector-multiple.tsx"
    }
  ]
}