{
  "name": "variant-selector-images",
  "type": "registry:component",
  "dependencies": [
    "lucide-react",
    "@radix-ui/react-radio-group"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { Circle } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport Image from \"next/image\";\n\nexport interface VariantItem {\n  id: string;\n  value: string;\n  label: string;\n  url: string;\n  disabled?: boolean;\n}\n\ninterface VariantSelectorImagesProps {\n  value: string;\n  onValueChange: (value: string) => void;\n  variants: VariantItem[];\n  className?: string;\n}\n\nconst VariantSelectorImages = ({\n  className,\n  onValueChange,\n  value,\n  variants,\n}: VariantSelectorImagesProps) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid grid-cols-2 gap-2 sm:grid-cols-3\", className)}\n      value={value}\n      onValueChange={onValueChange}\n    >\n      {variants.map((variant) => (\n        <label\n          key={variant.id}\n          className=\"border-input has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-focus-visible:outline-ring/70 relative flex cursor-pointer flex-col items-center gap-3 rounded-lg border px-2 py-3 text-center shadow-xs shadow-black/5 outline-offset-2 transition-colors has-focus-visible:outline has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50\"\n        >\n          <RadioGroupPrimitive.Item\n            value={variant.value}\n            disabled={variant.disabled}\n            className=\"sr-only after:absolute after:inset-0\"\n          >\n            <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n              <Circle className=\"h-2.5 w-2.5 fill-current text-current\" />\n            </RadioGroupPrimitive.Indicator>\n          </RadioGroupPrimitive.Item>\n          <Image\n            alt={variant.label}\n            src={variant.url}\n            width={150}\n            height={150}\n            unoptimized\n          />\n          <p className=\"text-muted-foreground text-xs\">{variant.label}</p>\n        </label>\n      ))}\n    </RadioGroupPrimitive.Root>\n  );\n};\n\nexport default VariantSelectorImages;\n",
      "path": "/components/commerce-ui/components/variant-selector/images/variant-selector-images.tsx",
      "target": "components/commerce-ui/variant-selector-images.tsx"
    }
  ]
}