{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-swatch",
  "type": "registry:component",
  "title": "ColorSwatch",
  "description": "A primitive component for displaying a single color swatch with an optional hover label.",
  "files": [
    {
      "path": "registry/components/color-swatch.tsx",
      "content": "\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype ColorSwatchProps = HTMLAttributes<HTMLDivElement> & {\n  /** Color value (hex, rgb, hsl, etc.) */\n  value: string;\n  /** Optional name/label for the color */\n  name?: string;\n};\n\nconst ColorSwatchContext = React.createContext<{\n  value: string;\n  name?: string;\n} | null>(null);\n\nfunction useColorSwatch() {\n  return React.useContext(ColorSwatchContext);\n}\n\nconst ColorSwatch = React.forwardRef<HTMLDivElement, ColorSwatchProps>(\n  ({ value, name, className, children, ...props }, forwardedRef) => {\n    return (\n      <div\n        ref={forwardedRef}\n        className={cn(\n          \"group relative flex-1 transition-all duration-200 ease-out\",\n          className,\n        )}\n        style={{ backgroundColor: value }}\n        title={name || value}\n        {...props}\n      >\n        <ColorSwatchContext.Provider value={{ value, name }}>\n          {children}\n        </ColorSwatchContext.Provider>\n      </div>\n    );\n  },\n);\n\nColorSwatch.displayName = \"ColorSwatch\";\n\ntype ColorSwatchLabelProps = HTMLAttributes<HTMLDivElement>;\n\nconst ColorSwatchLabel = React.forwardRef<\n  HTMLDivElement,\n  ColorSwatchLabelProps\n>(({ className, children, ...props }, forwardedRef) => {\n  return (\n    <div\n      ref={forwardedRef}\n      className={cn(\n        \"pointer-events-none absolute inset-0 flex items-center justify-center\",\n        \"opacity-0 transition-opacity group-hover:opacity-100\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"rounded bg-black/70 px-2 py-1 font-mono text-xs text-white shadow-sm\">\n        {children}\n      </div>\n    </div>\n  );\n});\n\nColorSwatchLabel.displayName = \"ColorSwatchLabel\";\n\ntype ColorSwatchPartPosition =\n  | \"top-left\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"center\";\n\ntype ColorSwatchPartProps = HTMLAttributes<HTMLDivElement> & {\n  position?: ColorSwatchPartPosition;\n};\n\nconst positionVariants: Record<ColorSwatchPartPosition, string> = {\n  \"top-left\": \"top-2 left-2 text-left\",\n  \"top-right\": \"top-2 right-2 text-right\",\n  \"bottom-left\": \"bottom-2 left-2 text-left\",\n  \"bottom-right\": \"bottom-2 right-2 text-right\",\n  center: \"top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center\",\n};\n\nconst ColorSwatchPart = React.forwardRef<HTMLDivElement, ColorSwatchPartProps>(\n  (\n    { className, position = \"bottom-right\", children, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <div\n        ref={forwardedRef}\n        className={cn(\n          \"absolute flex flex-col p-1 text-sm font-medium\",\n          positionVariants[position],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nColorSwatchPart.displayName = \"ColorSwatchPart\";\n\nexport {\n  ColorSwatch,\n  useColorSwatch,\n  ColorSwatchLabel,\n  ColorSwatchPart,\n  type ColorSwatchProps,\n  type ColorSwatchLabelProps,\n  type ColorSwatchPartProps,\n};\n",
      "type": "registry:component"
    }
  ]
}