{
  "name": "color-swatch",
  "type": "registry:ui",
  "dependencies": [
    "cn",
    "radix-ui"
  ],
  "files": [
    {
      "path": "ui/color-swatch.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"cn\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nconst colorSwatchVariants = cva(\n  \"box-border rounded-sm border bg-clip-padding shadow-sm data-disabled:pointer-events-none data-disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        default: \"size-8\",\n        sm: \"size-6\",\n        lg: \"size-12\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n\nfunction getIsCssColor(v: string): boolean {\n  try {\n    return typeof CSS !== \"undefined\" && typeof CSS.supports === \"function\"\n      ? CSS.supports(\"color\", v)\n      : true;\n  } catch {\n    return false;\n  }\n}\n\nfunction getHasAlpha(v: string): boolean {\n  const s = v.trim().toLowerCase();\n\n  if (s === \"transparent\") return true;\n\n  if (/^#(?:[0-9a-f]{4}|[0-9a-f]{8})$/i.test(s)) return true;\n\n  if (/\\b(?:rgba|hsla)\\s*\\(/i.test(s)) return true;\n\n  if (\n    /\\b(?:rgb|hsl|lab|lch|oklab|oklch|color)\\s*\\([^)]*\\/\\s*[\\d.]+%?\\s*\\)/i.test(\n      s,\n    )\n  ) {\n    return true;\n  }\n\n  return false;\n}\n\ninterface ColorSwatchProps\n  extends\n    Omit<React.ComponentProps<\"div\">, \"children\">,\n    VariantProps<typeof colorSwatchVariants> {\n  color?: string;\n  asChild?: boolean;\n  disabled?: boolean;\n  withoutTransparency?: boolean;\n}\n\nfunction ColorSwatch({\n  color,\n  size = \"default\",\n  asChild = false,\n  disabled = false,\n  withoutTransparency = false,\n  className,\n  style,\n  ...props\n}: ColorSwatchProps) {\n  const colorValue = color?.trim();\n\n  const backgroundStyle = React.useMemo<React.CSSProperties>(() => {\n    if (!colorValue) {\n      return {\n        background:\n          \"linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(var(--destructive)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat\",\n      };\n    }\n\n    if (!getIsCssColor(colorValue)) {\n      return { backgroundColor: \"transparent\" };\n    }\n\n    if (!withoutTransparency && getHasAlpha(colorValue)) {\n      return {\n        background: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0% 50% / 10px 10px`,\n      };\n    }\n\n    return { backgroundColor: colorValue };\n  }, [colorValue, withoutTransparency]);\n\n  const ariaLabel = !colorValue\n    ? \"No color selected\"\n    : `Color swatch: ${colorValue}`;\n\n  const Primitive = asChild ? SlotPrimitive.Slot : \"div\";\n\n  return (\n    <Primitive\n      role=\"img\"\n      aria-label={ariaLabel}\n      aria-disabled={disabled || undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      data-slot=\"color-swatch\"\n      {...props}\n      className={cn(colorSwatchVariants({ size }), className)}\n      style={{\n        ...backgroundStyle,\n        forcedColorAdjust: \"none\",\n        ...style,\n      }}\n    />\n  );\n}\n\nexport { ColorSwatch };\n",
      "target": ""
    }
  ]
}