{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-palette",
  "type": "registry:component",
  "title": "ColorPalette",
  "description": "A component for displaying color collections including ramps, scales, and palettes",
  "registryDependencies": [
    "@tokenui/color-swatch"
  ],
  "files": [
    {
      "path": "registry/components/color-palette.tsx",
      "content": "\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Primitives for composable color palette components\n */\n\nimport {\n  ColorSwatch,\n  ColorSwatchLabel,\n  ColorSwatchPart,\n  type ColorSwatchProps,\n  type ColorSwatchLabelProps,\n  type ColorSwatchPartProps,\n} from \"./color-swatch\";\n\ntype ColorPaletteLabelProps = HTMLAttributes<HTMLDivElement>;\n\nconst ColorPaletteLabel = React.forwardRef<\n  HTMLDivElement,\n  ColorPaletteLabelProps\n>(({ className, children, ...props }, forwardedRef) => {\n  return (\n    <div\n      ref={forwardedRef}\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nColorPaletteLabel.displayName = \"ColorPaletteLabel\";\n\n// ColorPalette - Convenience wrapper\n\ntype ColorStop = {\n  name?: string;\n  value: string;\n};\n\ntype ColorPaletteProps = {\n  /** Array of colors to display */\n  colors: string[] | ColorStop[];\n  /** Orientation of the palette (default: horizontal) */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Optional label */\n  label?: string;\n  /** Additional class name for the wrapper (label + palette stack) */\n  className?: string;\n};\n\n/**\n * Mid-level color palette with labels shown by default.\n * Accepts color strings or `{ name, value }` objects.\n * Uses flex layout; switch to vertical via `orientation=\"vertical\"`.\n * Compose your own container plus `ColorSwatch`/`ColorSwatchLabel` for custom layouts.\n */\nfunction ColorPalette({\n  colors,\n  orientation = \"horizontal\",\n  label,\n  className,\n}: ColorPaletteProps) {\n  const colorStops: ColorStop[] = colors.map((color) =>\n    typeof color === \"string\" ? { value: color } : color,\n  );\n\n  const orientationClass =\n    orientation === \"vertical\" ? \"flex-col h-64\" : \"flex-row h-20\";\n\n  return (\n    <div className={cn(\"space-y-2\", className)}>\n      {label && <ColorPaletteLabel>{label}</ColorPaletteLabel>}\n      <div\n        className={cn(\n          \"flex overflow-hidden rounded-md border\",\n          orientationClass,\n        )}\n      >\n        {colorStops.map((stop, index) => (\n          <ColorSwatch\n            key={`${stop.name || stop.value}-${index}`}\n            value={stop.value}\n            name={stop.name}\n            className=\"hover:flex-[1.08] hover:opacity-95\"\n          >\n            <ColorSwatchLabel>{stop.value}</ColorSwatchLabel>\n          </ColorSwatch>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport {\n  ColorPalette,\n  ColorSwatch,\n  ColorSwatchLabel,\n  ColorSwatchPart,\n  ColorPaletteLabel,\n  type ColorPaletteProps,\n  type ColorSwatchProps,\n  type ColorSwatchLabelProps,\n  type ColorSwatchPartProps,\n  type ColorPaletteLabelProps,\n  type ColorStop,\n};\n",
      "type": "registry:component"
    }
  ]
}