{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "color-picker",
  "title": "Color Picker",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/color-picker/ColorPicker.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string\n    disabled?: boolean\n    /** Override the swatches shown below the color input. Pass [] to hide entirely. */\n    presets?: string[]\n    /** Hide the hex text field next to the color trigger. */\n    hideHexInput?: boolean\n    class?: HTMLAttributes['class']\n  }>(),\n  {\n    presets: () => [\n      '#ef4444',\n      '#f97316',\n      '#eab308',\n      '#22c55e',\n      '#14b8a6',\n      '#3b82f6',\n      '#8b5cf6',\n      '#ec4899',\n      '#ffffff',\n      '#d4d4d4',\n      '#737373',\n      '#171717',\n    ],\n    hideHexInput: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst swatches = computed(() => props.presets ?? [])\n</script>\n\n<template>\n  <div :class=\"cn('space-y-3', props.class)\" v-bind=\"$attrs\">\n    <!-- Color trigger + hex field -->\n    <div class=\"flex items-center gap-2\">\n      <div\n        class=\"border-input relative h-10 w-10 shrink-0 overflow-hidden rounded-md border shadow-xs\"\n        :style=\"{ backgroundColor: modelValue || '#ffffff' }\"\n      >\n        <input\n          type=\"color\"\n          :value=\"modelValue || '#ffffff'\"\n          :disabled=\"disabled\"\n          aria-label=\"Pick color\"\n          class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n          @input=\"emit('update:modelValue', ($event.target as HTMLInputElement).value)\"\n        />\n      </div>\n      <input\n        v-if=\"!hideHexInput\"\n        type=\"text\"\n        :value=\"modelValue || ''\"\n        placeholder=\"#000000\"\n        :disabled=\"disabled\"\n        class=\"bg-background border-input text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-10 flex-1 rounded-md border px-3 text-sm uppercase shadow-xs outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        @input=\"emit('update:modelValue', ($event.target as HTMLInputElement).value)\"\n      />\n    </div>\n\n    <!-- Preset swatches -->\n    <div v-if=\"swatches.length\" class=\"flex flex-wrap gap-1.5\">\n      <button\n        type=\"button\"\n        v-for=\"color in swatches\"\n        :key=\"color\"\n        :disabled=\"disabled\"\n        :aria-label=\"`Select ${color}`\"\n        :style=\"{ backgroundColor: color }\"\n        :class=\"\n          cn(\n            'ring-offset-background focus-visible:ring-ring/40 size-6 shrink-0 rounded-md shadow-sm transition-transform outline-none hover:scale-110 focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100',\n            modelValue?.toLowerCase() === color.toLowerCase()\n              ? 'ring-foreground ring-2 ring-offset-2'\n              : 'ring-border/50 ring-1',\n            color.toLowerCase() === '#ffffff' && 'ring-border',\n          )\n        \"\n        @click=\"emit('update:modelValue', color)\"\n      />\n    </div>\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/color-picker/ColorPicker.vue"
    },
    {
      "path": "packages/registry-vue/components/color-picker/index.ts",
      "content": "export { default as ColorPicker } from './ColorPicker.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/color-picker/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Hex / RGB color input with a popover swatch grid. Supports controlled and uncontrolled modes, alpha channel, and a recent-colors row.",
  "categories": [
    "form"
  ]
}