{"_id":"@clypra/ui-color-picker","_rev":"4-eb57cd96d2d915ec538e9eb33d23924c","name":"@clypra/ui-color-picker","dist-tags":{"latest":"0.2.1"},"versions":{"1.1.0":{"name":"@clypra/ui-color-picker","version":"1.1.0","keywords":["color-picker","clypra","react","react-19","typescript","dark-theme","video-editor","ui-component","hsva","accessible","shadcn"],"author":{"name":"Clypra Contributors"},"license":"MIT","_id":"@clypra/ui-color-picker@1.1.0","maintainers":[{"name":"abdulkabir-musa","email":"musaabdulkabeer19@gmail.com"}],"homepage":"https://github.com/AIEraDev/clypra#readme","bugs":{"url":"https://github.com/AIEraDev/clypra/issues"},"dist":{"shasum":"b5315700d729dc024769aa8ec8852d047c178497","tarball":"https://registry.npmjs.org/@clypra/ui-color-picker/-/ui-color-picker-1.1.0.tgz","fileCount":38,"integrity":"sha512-ihXtTQtp2t9MpRPxh3wahzyA6+cvR9Mv8pmbFeuxFBkV2dqUCDXlEfXfPA6Sx3Oh/eOeueUzeg2rldlu4hTX+Q==","signatures":[{"sig":"MEQCIDI7NVWV/Z04gfPmbbD/xSWddcALxtXskELtyn40O0c0AiA5uowXLfozIOzvKP9nQBB3yZlvYhoabrLP2WoRZ095xA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":586402},"main":"./dist/index.js","type":"module","_from":"file:clypra-ui-color-picker-1.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles.css":"./src/styles/picker.css","./package.json":"./package.json"},"scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","test":"vitest run","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"abdulkabir-musa","email":"musaabdulkabeer19@gmail.com"},"_resolved":"/private/var/folders/nn/05pjtgws13j27fsyrdggbhw80000gn/T/06af8fd1216299b18528189d727ddeed/clypra-ui-color-picker-1.1.0.tgz","_integrity":"sha512-ihXtTQtp2t9MpRPxh3wahzyA6+cvR9Mv8pmbFeuxFBkV2dqUCDXlEfXfPA6Sx3Oh/eOeueUzeg2rldlu4hTX+Q==","repository":{"url":"git+https://github.com/AIEraDev/clypra.git","type":"git","directory":"packages/ui-color-picker"},"_npmVersion":"11.4.2","description":"Professional dark-themed reusable Color Picker component for Clypra video editor and web applications","directories":{},"_nodeVersion":"24.4.1","dependencies":{"zustand":"^5.0.12"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","vite":"^6.2.0","react":"^19.0.0","vitest":"^3.2.4","happy-dom":"^20.10.6","react-dom":"^19.0.0","typescript":"~5.8.2","@types/node":"^22.14.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.0","@testing-library/react":"^16.3.2"},"peerDependencies":{"react":">=18.0.0 || >=19.0.0","react-dom":">=18.0.0 || >=19.0.0"},"peerDependenciesMeta":{"zustand":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ui-color-picker_1.1.0_1786754893782_0.996465791346242","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@clypra/ui-color-picker","version":"0.1.0","keywords":["color-picker","clypra","react","react-19","typescript","dark-theme","video-editor","ui-component","hsva","accessible","shadcn"],"author":{"name":"Clypra Contributors"},"license":"MIT","_id":"@clypra/ui-color-picker@0.1.0","maintainers":[{"name":"abdulkabir-musa","email":"musaabdulkabeer19@gmail.com"}],"homepage":"https://github.com/AIEraDev/clypra#readme","bugs":{"url":"https://github.com/AIEraDev/clypra/issues"},"dist":{"shasum":"00e6dfd9061b536d61be583f9a49c789c99d49c8","tarball":"https://registry.npmjs.org/@clypra/ui-color-picker/-/ui-color-picker-0.1.0.tgz","fileCount":38,"integrity":"sha512-7i5ua2pDFwHeoyj21I518A/gFCX6g12lipIZxu4m7U82b5Zu0vrXfE+FwrwDlE5akwXl8ebnsksR5uVrkn6elw==","signatures":[{"sig":"MEUCIQDQ/mQZTtw+zO10Yte4cCjfujysL1F5hHmh5N4Hv8DJywIgX5g8ATLJQ3z2ydb477apQAz2mtQ+oH0Rs/YEUO762V4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":586402},"main":"./dist/index.js","type":"module","_from":"file:clypra-ui-color-picker-0.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles.css":"./src/styles/picker.css","./package.json":"./package.json"},"scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","test":"vitest run","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"abdulkabir-musa","email":"musaabdulkabeer19@gmail.com"},"_resolved":"/private/var/folders/nn/05pjtgws13j27fsyrdggbhw80000gn/T/23e1fbe6167a23df91a992bedfe3edac/clypra-ui-color-picker-0.1.0.tgz","_integrity":"sha512-7i5ua2pDFwHeoyj21I518A/gFCX6g12lipIZxu4m7U82b5Zu0vrXfE+FwrwDlE5akwXl8ebnsksR5uVrkn6elw==","repository":{"url":"git+https://github.com/AIEraDev/clypra.git","type":"git","directory":"packages/ui-color-picker"},"_npmVersion":"11.4.2","description":"Professional dark-themed reusable Color Picker component for Clypra video editor and web applications","directories":{},"_nodeVersion":"24.4.1","dependencies":{"zustand":"^5.0.12"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","vite":"^6.2.0","react":"^19.0.0","vitest":"^3.2.4","happy-dom":"^20.10.6","react-dom":"^19.0.0","typescript":"~5.8.2","@types/node":"^22.14.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.0","@testing-library/react":"^16.3.2"},"peerDependencies":{"react":">=18.0.0 || >=19.0.0","react-dom":">=18.0.0 || >=19.0.0"},"peerDependenciesMeta":{"zustand":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ui-color-picker_0.1.0_1786755112892_0.7516183696903354","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@clypra/ui-color-picker","version":"0.2.0","keywords":["color-picker","clypra","react","react-19","typescript","dark-theme","video-editor","ui-component","hsva","accessible","shadcn"],"author":{"name":"Clypra Contributors"},"license":"MIT","_id":"@clypra/ui-color-picker@0.2.0","maintainers":[{"name":"abdulkabir-musa","email":"musaabdulkabeer19@gmail.com"}],"homepage":"https://github.com/AIEraDev/clypra-packages/tree/main/packages/ui-color-picker#readme","bugs":{"url":"https://github.com/AIEraDev/clypra-packages/issues"},"dist":{"shasum":"7bb7a032401c01925e48d99b891d4bf00208af4b","tarball":"https://registry.npmjs.org/@clypra/ui-color-picker/-/ui-color-picker-0.2.0.tgz","fileCount":38,"integrity":"sha512-Q5surHcaCKflCWKZ+tZp2sx1K/H6WXPsf6cIsLDdoZougKRc3Gm0lBEnybzwkyNF/fylQU4e8RWgy8XGcsoGYw==","signatures":[{"sig":"MEUCIQDuovE+bBwCqLGkolMMbftplpKcUc/M4KEGIqFc5VkfawIgFo0Gdu0OsVphVttaLSdLSLoFY7UIBsj0k+TMtB7UJmI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":592596},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles.css":"./src/styles/picker.css","./package.json":"./package.json"},"gitHead":"1874eb228330a984acf0a7af5536bd718c6078ce","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","test":"vitest run --passWithNoTests","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"abdulkabir-musa","email":"musaabdulkabeer19@gmail.com"},"repository":{"url":"git+https://github.com/AIEraDev/clypra-packages.git","type":"git","directory":"packages/ui-color-picker"},"_npmVersion":"11.4.2","description":"Professional dark-themed reusable Color Picker component for Clypra video editor and web applications","directories":{},"_nodeVersion":"24.4.1","dependencies":{"zustand":"^5.0.12","@floating-ui/react":"^0.27.20"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","vite":"^6.2.0","react":"^19.0.0","vitest":"^3.2.4","happy-dom":"^20.10.6","react-dom":"^19.0.0","typescript":"~5.8.2","@types/node":"^22.14.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.0","@testing-library/react":"^16.3.2"},"peerDependencies":{"react":">=18.0.0 || >=19.0.0","react-dom":">=18.0.0 || >=19.0.0"},"peerDependenciesMeta":{"zustand":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ui-color-picker_0.2.0_1787815159362_0.8055252281979293","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@clypra/ui-color-picker","version":"0.2.1","description":"Professional dark-themed reusable Color Picker component for Clypra video editor and web applications","author":{"name":"Clypra Contributors"},"license":"MIT","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles.css":"./src/styles/picker.css","./package.json":"./package.json"},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","lint":"tsc --noEmit","test":"vitest run --passWithNoTests","clean":"rm -rf dist"},"dependencies":{"@floating-ui/react":"^0.27.20","zustand":"^5.0.12"},"peerDependencies":{"react":">=18.0.0 || >=19.0.0","react-dom":">=18.0.0 || >=19.0.0"},"peerDependenciesMeta":{"zustand":{"optional":true}},"devDependencies":{"@testing-library/react":"^16.3.2","@types/node":"^22.14.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.0","happy-dom":"^20.10.6","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.3.5","typescript":"~5.8.2","vite":"^6.2.0","vitest":"^3.2.4"},"keywords":["color-picker","clypra","react","react-19","typescript","dark-theme","video-editor","ui-component","hsva","accessible","shadcn"],"repository":{"type":"git","url":"git+https://github.com/AIEraDev/clypra-packages.git","directory":"packages/ui-color-picker"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"homepage":"https://github.com/AIEraDev/clypra-packages/tree/main/packages/ui-color-picker#readme","bugs":{"url":"https://github.com/AIEraDev/clypra-packages/issues"},"_id":"@clypra/ui-color-picker@0.2.1","gitHead":"0b53dea735a9c8b5c9323edd69c9775beef807e9","_nodeVersion":"24.4.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-m8oftv1K7/sRHc7gauLsv7avdLhsSPKVs0DhXRlYDOuUhvLEgMWXgqiIGucrinhwTC7UfqdSejlsGWz9NDlNpQ==","shasum":"dd707c404f5f1961c3e62e700fbc75d5601b08c9","tarball":"https://registry.npmjs.org/@clypra/ui-color-picker/-/ui-color-picker-0.2.1.tgz","fileCount":38,"unpackedSize":596273,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDi29KsUsnSwbKz6WfFKAkdAA19cPvVC53f/w18Aw1XGAiEAsqKY9dIKgPksGX0+LbQH9h+1FElKGc8M6ioSGJbeJKM="}]},"_npmUser":{"name":"abdulkabir-musa","email":"musaabdulkabeer19@gmail.com"},"directories":{},"maintainers":[{"name":"abdulkabir-musa","email":"musaabdulkabeer19@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-color-picker_0.2.1_1787839397381_0.8559001002349607"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-15T00:48:13.641Z","modified":"2026-08-27T14:03:17.702Z","1.1.0":"2026-08-15T00:48:13.941Z","0.1.0":"2026-08-15T00:51:53.082Z","0.2.0":"2026-08-27T07:19:19.482Z","0.2.1":"2026-08-27T14:03:17.537Z"},"bugs":{"url":"https://github.com/AIEraDev/clypra-packages/issues"},"author":{"name":"Clypra Contributors"},"license":"MIT","homepage":"https://github.com/AIEraDev/clypra-packages/tree/main/packages/ui-color-picker#readme","keywords":["color-picker","clypra","react","react-19","typescript","dark-theme","video-editor","ui-component","hsva","accessible","shadcn"],"repository":{"type":"git","url":"git+https://github.com/AIEraDev/clypra-packages.git","directory":"packages/ui-color-picker"},"description":"Professional dark-themed reusable Color Picker component for Clypra video editor and web applications","maintainers":[{"name":"abdulkabir-musa","email":"musaabdulkabeer19@gmail.com"}],"readme":"# @clypra/ui-color-picker\n\nProfessional, accessible, high-performance Color Picker suite designed for Clypra video editor and creative web applications.\n\nBuilt with **React 19**, **TypeScript (Strict, zero `any`)**, **Tailwind CSS**, and **shadcn/ui** design principles.\n\n---\n\n## ✨ Features\n\n- 🎨 **Dark Surface Aesthetic**: Meticulously designed for professional video editing suites (`bg-zinc-950`, `border-white/10`, `shadow-2xl shadow-violet-950/30`, Violet-500 `#8B5CF6` accents).\n- 🎛️ **Multi-Format Color Engine**: Native support for **HEX**, **RGB**, **HSL**, and **HSV** with real-time bidirectional mathematical conversion.\n- ⚡ **Ultra-smooth 60fps Drag Interactions**: Powered by unified Pointer Events, `requestAnimationFrame`, and 16ms throttled callbacks.\n- 🔬 **Double-Ring Contrast Cursors**: 12px double-ring thumb cursors with white inner ring and black outer outline, ensuring crystal-clear visibility over any background color.\n- 🌈 **Rainbow Hue & Alpha Sliders**: Precision vertical gradient tracks with keyboard stepping (1% standard, 10% with Shift).\n- 💾 **Preset & Recent Swatches**: Built-in MRU recent color cache and configurable preset swatch palette with ghost \"Add to Presets\" handler.\n- 🔍 **Native EyeDropper Support**: Automatic integration with `window.EyeDropper` where available.\n- 📋 **One-Click Clipboard Copy**: Formatted string clipboard copy button with visual checkmark toast.\n- ♿ **Full Accessibility (ARIA)**: `role=\"slider\"`, `aria-valuenow`, `aria-valuetext`, `aria-valuemin/max`, keyboard arrow navigation, Tab cycling, and Escape dismiss.\n- 🎚️ **Imperative Ref Handle**: `getFormat()`, `setFormat()`, `getValue()`, `focus()` via `useImperativeHandle`.\n- 📦 **Dual Rendering Modes**: Popover trigger mode and direct inline panel mode.\n\n---\n\n## 📦 Installation\n\n```bash\n# Using pnpm (monorepo or standalone)\npnpm add @clypra/ui-color-picker\n\n# Using npm\nnpm install @clypra/ui-color-picker\n```\n\n---\n\n## 🚀 Quick Start\n\n```tsx\nimport React, { useState } from 'react';\nimport { ClypraColorPicker } from '@clypra/ui-color-picker';\nimport '@clypra/ui-color-picker/styles.css';\n\nexport function ExampleVideoInspector() {\n  const [shadowColor, setShadowColor] = useState('#8B5CF6');\n\n  return (\n    <div className=\"p-6 bg-zinc-950 text-white\">\n      <h3 className=\"text-sm font-semibold mb-3\">Drop Shadow Color</h3>\n      <ClypraColorPicker\n        value={shadowColor}\n        onChange={(color) => setShadowColor(color)}\n        onChangeComplete={(color) => console.log('Finalized color:', color)}\n        format=\"hex\"\n        showAlpha\n        presetColors={[\n          '#8B5CF6',\n          '#6366F1',\n          '#3B82F6',\n          '#06B6D4',\n          '#10B981',\n          '#F59E0B',\n          '#EF4444',\n          '#EC4899',\n          '#FFFFFF',\n          '#000000',\n        ]}\n        onSavePreset={(color) => console.log('Saved preset:', color)}\n        size=\"md\"\n      />\n    </div>\n  );\n}\n```\n\n---\n\n## 🛠️ Props & Configuration\n\n| Prop | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `value` | `string` | `undefined` | Controlled color value (hex, rgba, hsla, etc.). |\n| `defaultValue` | `string` | `'#8B5CF6'` | Default value when used in uncontrolled mode. |\n| `onChange` | `(color: string) => void` | `undefined` | Real-time color change callback (16ms throttled during drag). |\n| `onChangeComplete` | `(color: string) => void` | `undefined` | Fires on drag release (`pointerup`/`touchend`), input blur, or preset selection. |\n| `format` | `'hex' \\| 'rgb' \\| 'hsl' \\| 'hsv'` | `'hex'` | Default color output format. |\n| `showAlpha` | `boolean` | `true` | Show alpha slider & transparency in formatted outputs. |\n| `presetColors` | `string[]` | `[...]` | Array of preset color swatches. |\n| `recentColors` | `string[]` | `[...]` | Array of recent color swatches. |\n| `onSavePreset` | `(color: string) => void` | `undefined` | Callback when \"Save\" button is clicked. |\n| `disabled` | `boolean` | `false` | Disables all interactions. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | `'md'` | Size variant for trigger swatch and controls. |\n| `inline` | `boolean` | `false` | Renders the picker inline instead of inside a popover dropdown. |\n| `label` | `string` | `undefined` | Optional accessibility label / title. |\n| `showEyeDropper` | `boolean` | `true` | Show eyedropper tool if supported by browser. |\n| `showCopyButton` | `boolean` | `true` | Show copy formatted color string button. |\n\n---\n\n## 🎯 Imperative Ref Handle\n\n```tsx\nimport React, { useRef } from 'react';\nimport { ClypraColorPicker, type ClypraColorPickerHandle } from '@clypra/ui-color-picker';\n\nexport function AdvancedController() {\n  const pickerRef = useRef<ClypraColorPickerHandle>(null);\n\n  const switchToRgb = () => {\n    pickerRef.current?.setFormat('rgb');\n    console.log('Current value:', pickerRef.current?.getValue());\n    pickerRef.current?.focus();\n  };\n\n  return (\n    <div>\n      <button onClick={switchToRgb}>Switch to RGB</button>\n      <ClypraColorPicker ref={pickerRef} defaultValue=\"#EF4444\" />\n    </div>\n  );\n}\n```\n\n---\n\n## 🧮 Pure Mathematical Color Utilities\n\nThe package also exports standalone, pure, zero-dependency color mathematics:\n\n```ts\nimport {\n  hexToRgba,\n  rgbaToHex,\n  rgbaToHsva,\n  hsvaToRgba,\n  hsvaToHsla,\n  hslaToHsva,\n  parseColor,\n  formatColor,\n  isValidColor,\n  getContrastColor,\n} from '@clypra/ui-color-picker';\n\nconst hsva = parseColor('rgba(139, 92, 246, 0.85)');\n// -> { h: 258.3, s: 62.6, v: 96.5, a: 0.85 }\n\nconst hex = formatColor(hsva!, 'hex');\n// -> \"#8B5CF6D9\"\n\nconst textContrast = getContrastColor(hsva!);\n// -> \"#000000\" or \"#ffffff\"\n```\n\n---\n\n## 📄 License\n\nMIT © Clypra Contributors\n","readmeFilename":"README.md"}