{
  "name": "variant-color-selector-basic",
  "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\";\n\nexport interface ColorVariantItem {\n  id: string;\n  value: string;\n  color: string;\n  label: string;\n}\n\ninterface VariantColorSelectorBasicProps {\n  value: string;\n  onValueChange: (value: string) => void;\n  variants: ColorVariantItem[];\n  className?: string;\n}\n\nconst VariantColorSelectorBasic = ({\n  className,\n  onValueChange,\n  value,\n  variants,\n}: VariantColorSelectorBasicProps) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      value={value}\n      onValueChange={onValueChange}\n    >\n      {variants.map((variant) => (\n        <label\n          key={variant.id}\n          className=\"relative flex cursor-pointer flex-col items-center gap-2\"\n        >\n          <RadioGroupPrimitive.Item\n            value={variant.value}\n            className={cn(\n              \"ring-offset-background focus-visible:ring-ring aspect-square size-6 rounded-full border-2 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n              \"has-data-[state=checked]:ring-4\",\n              \"has-data-[state=checked]:border-0\"\n            )}\n            style={{\n              backgroundColor: variant.color,\n              color: getContrastYIQ(variant.color),\n            }}\n          >\n            <RadioGroupPrimitive.Indicator className=\"flex h-full items-center justify-center\">\n              <Circle className=\"h-2.5 w-2.5 fill-current text-current\" />\n            </RadioGroupPrimitive.Indicator>\n          </RadioGroupPrimitive.Item>\n          <span className=\"text-foreground text-sm leading-none font-medium\">\n            {variant.label}\n          </span>\n        </label>\n      ))}\n    </RadioGroupPrimitive.Root>\n  );\n};\n\nexport default VariantColorSelectorBasic;\n\n/**\n * Choose the best color for text based on the background color\n * Supports HEX and RGB colors\n * @param color\n * @returns\n */\nfunction getContrastYIQ(color: string) {\n  let r, g, b;\n\n  if (color.startsWith(\"#\")) {\n    // HEX color\n    color = color.replace(\"#\", \"\");\n    r = parseInt(color.substring(0, 2), 16);\n    g = parseInt(color.substring(2, 4), 16);\n    b = parseInt(color.substring(4, 6), 16);\n  } else if (color.startsWith(\"rgb\")) {\n    // RGB color\n    const rgbValues = color.match(/\\d+/g);\n    if (!rgbValues || rgbValues.length < 3) {\n      throw new Error(\"Invalid RGB color format\");\n    }\n    r = parseInt(rgbValues[0], 10);\n    g = parseInt(rgbValues[1], 10);\n    b = parseInt(rgbValues[2], 10);\n  } else {\n    throw new Error(\"Invalid color format\");\n  }\n\n  const yiq = (r * 299 + g * 587 + b * 114) / 1000;\n  return yiq >= 128 ? \"black\" : \"white\";\n}\n",
      "path": "/components/commerce-ui/components/variant-color-selector/basic/variant-color-selector-basic.tsx",
      "target": "components/commerce-ui/variant-color-selector-basic.tsx"
    }
  ]
}