{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "color-picker",
  "title": "Color Picker",
  "type": "registry:primitives",
  "description": "Hex color input paired with preset brand swatches for workspace customization and chart series coloring.",
  "dependencies": [],
  "usage": "import { ColorPicker } from \"@etherealui/react\"\n\nexport function ColorPickerDemo() {\n  return <ColorPicker />\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/date-picker.tsx",
      "target": "components/ui/color-picker.tsx",
      "type": "registry:primitives",
      "content": "import * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport {\n  Calendar as CalendarIcon,\n  UploadCloud,\n  FileText,\n  CheckCircle2,\n  Trash2,\n  ChevronLeft,\n  ChevronRight,\n} from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\nimport { Progress } from \"./progress\"\n\nexport interface DateRangePreset {\n  label: string\n  value: string\n  rangeText: string\n}\n\nconst defaultPresets: DateRangePreset[] = [\n  { label: \"Last 7 days\", value: \"7d\", rangeText: \"Oct 31 – Nov 06, 2026\" },\n  { label: \"Last 30 days\", value: \"30d\", rangeText: \"Oct 08 – Nov 06, 2026\" },\n  { label: \"Last 90 days\", value: \"90d\", rangeText: \"Aug 09 – Nov 06, 2026\" },\n  { label: \"Year to date\", value: \"ytd\", rangeText: \"Jan 01 – Nov 06, 2026\" },\n]\n\nexport interface DateRangePickerProps {\n  value?: string\n  onValueChange?: (preset: DateRangePreset) => void\n  className?: string\n}\n\nexport const DateRangePicker: React.FC<DateRangePickerProps> = ({\n  value = \"30d\",\n  onValueChange,\n  className,\n}) => {\n  const [selected, setSelected] = React.useState(value)\n  const activePreset =\n    defaultPresets.find((p) => p.value === selected) || defaultPresets[1]\n\n  return (\n    <PopoverPrimitive.Root>\n      <PopoverPrimitive.Trigger asChild>\n        <button\n          type=\"button\"\n          className={cn(\n            \"inline-flex h-9 items-center gap-2.5 rounded-lg border border-zinc-200 bg-white px-3 text-xs font-medium text-zinc-700 transition-colors hover:bg-zinc-50 focus:outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800 cursor-pointer\",\n            className\n          )}\n        >\n          <CalendarIcon className=\"h-3.5 w-3.5 text-zinc-400\" />\n          <span>{activePreset.label}</span>\n          <span className=\"hidden sm:inline border-l border-zinc-200 pl-2 text-[11px] text-zinc-400 dark:border-zinc-800\">\n            {activePreset.rangeText}\n          </span>\n        </button>\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          align=\"end\"\n          sideOffset={6}\n          className=\"z-50 w-72 rounded-xl border border-zinc-200 bg-white p-2 text-zinc-900 shadow-lg focus:outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100\"\n        >\n          <div className=\"px-2 py-1.5 text-[11px] font-medium text-zinc-400\">\n            Date range\n          </div>\n          <div className=\"space-y-0.5\">\n            {defaultPresets.map((preset) => {\n              const isSelected = preset.value === selected\n              return (\n                <button\n                  key={preset.value}\n                  type=\"button\"\n                  onClick={() => {\n                    setSelected(preset.value)\n                    onValueChange?.(preset)\n                  }}\n                  className={cn(\n                    \"flex w-full items-center justify-between rounded-lg px-2.5 py-2 text-xs transition-colors cursor-pointer\",\n                    isSelected\n                      ? \"bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300\"\n                      : \"text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800\"\n                  )}\n                >\n                  <span className=\"font-medium\">{preset.label}</span>\n                  <span className=\"text-[11px] text-zinc-400\">\n                    {preset.rangeText}\n                  </span>\n                </button>\n              )\n            })}\n          </div>\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  )\n}\n\n// Standalone DateCalendar Primitive\nexport const DateCalendar: React.FC<{ className?: string }> = ({ className }) => {\n  const [selectedDay, setSelectedDay] = React.useState(14)\n  const days = Array.from({ length: 30 }, (_, i) => i + 1)\n\n  return (\n    <div\n      className={cn(\n        \"w-64 rounded-2xl border border-zinc-200 bg-white p-4 shadow-2xs dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"mb-3 flex items-center justify-between\">\n        <span className=\"text-xs font-semibold text-zinc-900 dark:text-zinc-100\">\n          November 2026\n        </span>\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            className=\"rounded-md p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer\"\n          >\n            <ChevronLeft className=\"h-3.5 w-3.5\" />\n          </button>\n          <button\n            type=\"button\"\n            className=\"rounded-md p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer\"\n          >\n            <ChevronRight className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-7 gap-1 text-center text-[10px] font-medium text-zinc-400 mb-1.5\">\n        <span>Su</span>\n        <span>Mo</span>\n        <span>Tu</span>\n        <span>We</span>\n        <span>Th</span>\n        <span>Fr</span>\n        <span>Sa</span>\n      </div>\n      <div className=\"grid grid-cols-7 gap-1\">\n        {days.map((d) => {\n          const active = d === selectedDay\n          return (\n            <button\n              key={d}\n              type=\"button\"\n              onClick={() => setSelectedDay(d)}\n              className={cn(\n                \"flex h-7 w-7 items-center justify-center rounded-lg text-xs transition-colors cursor-pointer\",\n                active\n                  ? \"bg-blue-600 font-semibold text-white\"\n                  : \"text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800\"\n              )}\n            >\n              {d}\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n// ColorPicker Primitive\nexport const ColorPicker: React.FC<{ className?: string }> = ({ className }) => {\n  const swatches = [\n    \"#2563eb\",\n    \"#0ea5e9\",\n    \"#10b981\",\n    \"#f59e0b\",\n    \"#f43f5e\",\n    \"#8b5cf6\",\n    \"#18181b\",\n  ]\n  const [color, setColor] = React.useState(swatches[0])\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex flex-col gap-3 rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-2.5\">\n        <span\n          className=\"h-6 w-6 rounded-lg border border-black/10 shrink-0\"\n          style={{ backgroundColor: color }}\n        />\n        <input\n          type=\"text\"\n          value={color}\n          onChange={(e) => setColor(e.target.value)}\n          className=\"w-28 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 py-1 font-mono text-xs text-zinc-800 focus:outline-none dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-200\"\n        />\n      </div>\n      <div className=\"flex items-center gap-1.5\">\n        {swatches.map((sw) => (\n          <button\n            key={sw}\n            type=\"button\"\n            onClick={() => setColor(sw)}\n            style={{ backgroundColor: sw }}\n            className={cn(\n              \"h-6 w-6 rounded-full transition-transform cursor-pointer\",\n              color === sw && \"scale-110 ring-2 ring-offset-2 ring-blue-500 dark:ring-offset-zinc-900\"\n            )}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n\n// Carousel Primitive\nexport const Carousel: React.FC<{\n  slides?: Array<{ title: string; subtitle: string; metric: string }>\n  className?: string\n}> = ({\n  slides = [\n    {\n      title: \"Q4 Revenue Velocity\",\n      subtitle: \"Net dollar retention across enterprise accounts\",\n      metric: \"128.4%\",\n    },\n    {\n      title: \"Global Checkout Conversion\",\n      subtitle: \"30-day rolling average across 14 currencies\",\n      metric: \"4.82%\",\n    },\n    {\n      title: \"Customer Support SLA\",\n      subtitle: \"Median first response time for priority tickets\",\n      metric: \"3m 12s\",\n    },\n  ],\n  className,\n}) => {\n  const [idx, setIdx] = React.useState(0)\n  const current = slides[idx]\n\n  return (\n    <div\n      className={cn(\n        \"w-full max-w-md rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-[11px] font-medium text-zinc-400\">\n          Slide {idx + 1} of {slides.length}\n        </span>\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            onClick={() => setIdx((p) => (p - 1 + slides.length) % slides.length)}\n            className=\"rounded-lg border border-zinc-200 p-1 text-zinc-500 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800 cursor-pointer\"\n          >\n            <ChevronLeft className=\"h-3.5 w-3.5\" />\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setIdx((p) => (p + 1) % slides.length)}\n            className=\"rounded-lg border border-zinc-200 p-1 text-zinc-500 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800 cursor-pointer\"\n          >\n            <ChevronRight className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n      </div>\n      <div className=\"mt-4 space-y-1\">\n        <div className=\"text-2xl font-semibold text-zinc-900 dark:text-zinc-100\">\n          {current.metric}\n        </div>\n        <div className=\"text-xs font-medium text-zinc-800 dark:text-zinc-200\">\n          {current.title}\n        </div>\n        <p className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n          {current.subtitle}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nexport interface UploadedFileItem {\n  name: string\n  size: string\n  progress: number\n}\n\nexport interface FileDropzoneProps {\n  className?: string\n  initialFiles?: UploadedFileItem[]\n}\n\nexport const FileDropzone: React.FC<FileDropzoneProps> = ({\n  className,\n  initialFiles = [\n    { name: \"quarterly-report-2026.csv\", size: \"1.4 MB\", progress: 100 },\n    { name: \"customer-invoices.pdf\", size: \"420 KB\", progress: 76 },\n  ],\n}) => {\n  const [files, setFiles] = React.useState<UploadedFileItem[]>(initialFiles)\n  const [isDragging, setIsDragging] = React.useState(false)\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div\n        onDragOver={(e) => {\n          e.preventDefault()\n          setIsDragging(true)\n        }}\n        onDragLeave={() => setIsDragging(false)}\n        onDrop={(e) => {\n          e.preventDefault()\n          setIsDragging(false)\n          const dropped = Array.from(e.dataTransfer.files)\n          if (dropped.length > 0) {\n            setFiles((prev) => [\n              ...prev,\n              ...dropped.map((f) => ({\n                name: f.name,\n                size: `${Math.max(1, Math.round(f.size / 1024))} KB`,\n                progress: 100,\n              })),\n            ])\n          }\n        }}\n        onClick={() => {\n          setFiles((prev) => [\n            ...prev,\n            {\n              name: `attachment-${prev.length + 1}.pdf`,\n              size: \"310 KB\",\n              progress: 100,\n            },\n          ])\n        }}\n        className={cn(\n          \"flex flex-col items-center justify-center rounded-xl border border-dashed p-6 text-center transition-colors cursor-pointer\",\n          isDragging\n            ? \"border-blue-500 bg-blue-50/50 dark:bg-blue-500/10\"\n            : \"border-zinc-300 bg-zinc-50/50 hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900/40 dark:hover:border-zinc-700\"\n        )}\n      >\n        <div className=\"mb-2.5 flex h-9 w-9 items-center justify-center rounded-full bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300\">\n          <UploadCloud className=\"h-4 w-4\" />\n        </div>\n        <p className=\"text-xs font-medium text-zinc-800 dark:text-zinc-200\">\n          Click to upload or drag and drop\n        </p>\n        <p className=\"mt-1 text-[11px] text-zinc-400\">\n          CSV, PDF, JSON, or PNG up to 25MB\n        </p>\n      </div>\n\n      {files.length > 0 && (\n        <div className=\"space-y-2\">\n          {files.map((file, idx) => (\n            <div\n              key={`${file.name}-${idx}`}\n              className=\"rounded-xl border border-zinc-200 bg-white p-3 space-y-2 dark:border-zinc-800 dark:bg-zinc-900\"\n            >\n              <div className=\"flex items-center justify-between gap-2\">\n                <div className=\"flex items-center gap-2.5 min-w-0\">\n                  <FileText className=\"h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0\" />\n                  <div className=\"min-w-0\">\n                    <p className=\"truncate text-xs font-medium text-zinc-800 dark:text-zinc-200\">\n                      {file.name}\n                    </p>\n                    <p className=\"text-[11px] text-zinc-400\">{file.size}</p>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  {file.progress >= 100 && (\n                    <CheckCircle2 className=\"h-4 w-4 text-emerald-500\" />\n                  )}\n                  <button\n                    type=\"button\"\n                    onClick={() =>\n                      setFiles((prev) => prev.filter((_, i) => i !== idx))\n                    }\n                    className=\"rounded-md p-1 text-zinc-400 hover:bg-zinc-100 hover:text-rose-500 dark:hover:bg-zinc-800 cursor-pointer\"\n                  >\n                    <Trash2 className=\"h-3.5 w-3.5\" />\n                  </button>\n                </div>\n              </div>\n              <Progress\n                value={file.progress}\n                size=\"sm\"\n                variant={file.progress >= 100 ? \"emerald\" : \"blue\"}\n              />\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"
    }
  ]
}