npm - gdp-color-picker - Versions diffs - 1.0.0 - Mend

gdp-color-picker 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,85 @@
+# React Color Picker
+一个支持 React 16.8+ (Hooks) 的轻量级调色盘组件，仿 Ant Design 风格。支持色相、饱和度、亮度、透明度调节，以及 Hex/RGBA 输入。
+## 特性
+- 🎨 **仿 Ant Design 风格**：界面美观，交互流畅。
+- 📦 **零依赖**：核心逻辑自研，不依赖 heavy 的第三方库。
+- 📱 **响应式**：支持拖拽交互。
+- 🌈 **全功能**：支持 HSV 拖拽、色相滑块、透明度滑块、Hex/RGB/HSL 格式切换及输入、吸管取色。
+- ⚛️ **React 16.8+**：完全基于 Hooks 编写。
+## 安装
+```bash
+npm install gdp-color-picker
+# 或
+yarn add gdp-color-picker
+```
+## 使用方法
+```jsx
+import React, { useState } from 'react';
+import ColorPicker from 'gdp-color-picker';
+import 'gdp-color-picker/dist/index.css'; // 引入样式
+function App() {
+  const [color, setColor] = useState('#1677ff');
+  return (
+    <ColorPicker
+      value={color}
+      onChange={(hex, rgbObj) => {
+        // 如果需要透明度，建议使用 rgba 字符串
+        if (rgbObj.a < 1) {
+          setColor(`rgba(${rgbObj.r}, ${rgbObj.g}, ${rgbObj.b}, ${rgbObj.a.toFixed(2)})`);
+        } else {
+          setColor(hex);
+        }
+      }}
+    />
+  );
+}
+```
+## API
+### ColorPicker
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 当前颜色值，支持 Hex (`#RRGGBB`, `#RGB`) 或 RGBA (`rgba(r, g, b, a)`) | `string` | `#1677ff` |
+| defaultValue | 默认颜色值（非受控模式） | `string` | `#1677ff` |
+| onChange | 颜色变化时的回调 | `(hex: string, rgbObj: {r, g, b, a}) => void` | - |
+| className | 自定义类名 | `string` | - |
+| style | 自定义样式 | `CSSProperties` | - |
+### onChange 回调参数
+`onChange` 回调函数接收两个参数：
+1.  **hex**: `string` - 颜色的 Hex 字符串表示（例如 `#ff0000`）。注意：Hex 格式不支持透明度，如果需要处理透明度，请使用第二个参数。
+2.  **rgbObj**: `object` - 包含颜色详细信息的对象：
+    *   `r`: `number` (0-255) - 红色通道
+    *   `g`: `number` (0-255) - 绿色通道
+    *   `b`: `number` (0-255) - 蓝色通道
+    *   `a`: `number` (0-1) - Alpha 透明度
+## 开发与构建
+```bash
+# 安装依赖
+npm install
+# 启动开发服务器（包含演示 Demo）
+npm start
+# 构建库文件（输出到 dist 目录）
+npm run build
+```
+## License
+MIT

package/dist/index.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .color-picker-panel{background:#fff;border-radius:4px;box-shadow:0 2px 8px #00000026;padding:8px;-webkit-user-select:none;user-select:none;width:200px}.color-board{border-radius:2px;cursor:pointer;height:150px;overflow:hidden;position:relative;width:100%}.color-board-white{background:linear-gradient(90deg,#fff,#fff0)}.color-board-black,.color-board-white{bottom:0;left:0;position:absolute;right:0;top:0}.color-board-black{background:linear-gradient(0deg,#000,#0000)}.color-board-handler{border:2px solid #fff;border-radius:50%;box-shadow:0 0 2px #00000080;height:10px;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:10px}.color-slider{border-radius:5px;cursor:pointer;height:10px;margin-top:8px;position:relative;width:100%}.color-slider-handler{background:#fff;border:1px solid #0000001a;border-radius:50%;box-shadow:0 0 2px #00000080;height:12px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:12px}.hue-slider{background:linear-gradient(90deg,red 0,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red)}.alpha-slider-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCzekwMjDjZ1IxjJwApDkHN9Fi7xwAAAABJRU5ErkJggg==")}.color-input-container{display:flex;flex-direction:column;gap:8px;margin-top:8px}.color-input-row{align-items:center;display:flex;justify-content:space-between}.mode-selector{align-items:center;border-radius:2px;color:#333;cursor:pointer;display:flex;font-size:12px;padding:2px 4px;position:relative;-webkit-user-select:none;user-select:none}.mode-selector:hover{background-color:#f5f5f5}.mode-dropdown{background:#fff;border:1px solid #d9d9d9;border-radius:2px;box-shadow:0 2px 8px #00000026;left:0;min-width:60px;position:absolute;top:100%;z-index:10}.mode-option{cursor:pointer;padding:4px 8px}.mode-option:hover{background:#e6f7ff}.eyedropper-icon{align-items:center;border-radius:2px;color:#666;cursor:pointer;display:flex;padding:2px}.eyedropper-icon:hover{background-color:#f5f5f5;color:#333}.color-input-fields{display:flex;gap:4px}.color-input{border:1px solid #d9d9d9;border-radius:2px;box-sizing:border-box;font-size:12px;padding:4px;width:100%}.color-input::-webkit-inner-spin-button,.color-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-input[type=number]{-moz-appearance:textfield}.alpha-display{align-items:center;background-color:#f5f5f5;border:1px solid #d9d9d9;color:#666;display:flex;justify-content:center;text-align:center;width:40px}.color-picker-trigger{background:#fff;border:1px solid #d9d9d9;border-radius:4px;cursor:pointer;display:inline-block;padding:4px}.color-block{border:1px solid #0000001a;border-radius:2px;height:20px;width:20px}
2	+ /# sourceMappingURL=index.css.map /

package/dist/index.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["index.css"],"names":[],"mappings":"AACA,oBAGE,eAAgB,CAChB,iBAAkB,CAClB,8BAAyC,CAHzC,WAAY,CAIZ,wBAAiB,CAAjB,gBAAiB,CALjB,WAMF,CAGA,aAIE,iBAAkB,CAClB,cAAe,CAFf,YAAa,CAGb,eAAgB,CALhB,iBAAkB,CAClB,UAKF,CAEA,mBAME,4CACF,CAEA,sCAJE,QAAS,CAFT,MAAO,CAFP,iBAAkB,CAGlB,OAAQ,CAFR,KAcF,CAPA,mBAME,2CACF,CAEA,qBAIE,qBAAsB,CACtB,iBAAkB,CAElB,4BAAsC,CAJtC,WAAY,CAKZ,mBAAoB,CAPpB,iBAAkB,CAKlB,8BAAgC,CAJhC,UAOF,CAGA,cAKE,iBAAkB,CAClB,cAAe,CAHf,WAAY,CACZ,cAAe,CAHf,iBAAkB,CAClB,UAKF,CAEA,sBAKE,eAAgB,CAKhB,0BAAiC,CAJjC,iBAAkB,CAElB,4BAAsC,CAJtC,WAAY,CAKZ,mBAAoB,CARpB,iBAAkB,CAClB,OAAQ,CAKR,8BAAgC,CAJhC,UAQF,CAEA,YACE,wFACF,CAEA,iBACE,8JACF,CAGA,uBAEE,YAAa,CACb,qBAAsB,CACtB,OAAQ,CAHR,cAIF,CAEA,iBAGE,kBAAmB,CAFnB,YAAa,CACb,6BAEF,CAEA,eASE,kBAAmB,CAHnB,iBAAkB,CAFlB,UAAW,CAFX,cAAe,CAMf,YAAa,CALb,cAAe,CAEf,eAAgB,CAJhB,iBAAkB,CAMlB,wBAAiB,CAAjB,gBAGF,CAEA,qBACE,wBACF,CAEA,eAIE,eAAgB,CAChB,wBAAyB,CACzB,iBAAkB,CAClB,8BAAyC,CAJzC,MAAO,CAMP,cAAe,CARf,iBAAkB,CAClB,QAAS,CAMT,UAEF,CAEA,aAEE,cAAe,CADf,eAEF,CAEA,mBACE,kBACF,CAEA,iBAME,kBAAmB,CAHnB,iBAAkB,CAClB,UAAW,CAHX,cAAe,CAIf,YAAa,CAHb,WAKF,CAEA,uBACE,wBAAyB,CACzB,UACF,CAEA,oBACE,YAAa,CACb,OACF,CAEA,aAGE,wBAAyB,CACzB,iBAAkB,CAElB,qBAAsB,CADtB,cAAe,CAHf,WAAY,CADZ,UAMF,CAGA,gFAEE,uBAAwB,CACxB,QACF,CAGA,0BACE,yBACF,CAEA,eAOE,kBAAmB,CAJnB,wBAAyB,CAEzB,wBAAyB,CADzB,UAAW,CAEX,YAAa,CAEb,sBAAuB,CANvB,iBAAkB,CADlB,UAQF,CAGA,sBAME,eAAgB,CAHhB,wBAAyB,CACzB,iBAAkB,CAClB,cAAe,CAJf,oBAAqB,CACrB,WAKF,CAEA,aAIE,0BAAoC,CADpC,iBAAkB,CADlB,WAAY,CADZ,UAIF","file":"index.css","sourcesContent":["\n.color-picker-panel {\n width: 200px;\n padding: 8px;\n background: #fff;\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n user-select: none;\n}\n\n/* ColorBoard */\n.color-board {\n position: relative;\n width: 100%;\n height: 150px;\n border-radius: 2px;\n cursor: pointer;\n overflow: hidden;\n}\n\n.color-board-white {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));\n}\n\n.color-board-black {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));\n}\n\n.color-board-handler {\n position: absolute;\n width: 10px;\n height: 10px;\n border: 2px solid #fff;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);\n pointer-events: none;\n}\n\n/* Sliders */\n.color-slider {\n position: relative;\n width: 100%;\n height: 10px;\n margin-top: 8px;\n border-radius: 5px;\n cursor: pointer;\n}\n\n.color-slider-handler {\n position: absolute;\n top: 50%;\n width: 12px;\n height: 12px;\n background: #fff;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);\n pointer-events: none;\n border: 1px solid rgba(0,0,0,0.1);\n}\n\n.hue-slider {\n background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, magenta 83%, red 100%);\n}\n\n.alpha-slider-bg {\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCzekwMjDjZ1IxjJwApDkHN9Fi7xwAAAABJRU5ErkJggg==');\n}\n\n/* Inputs */\n.color-input-container {\n margin-top: 8px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.color-input-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.mode-selector {\n position: relative;\n cursor: pointer;\n font-size: 12px;\n color: #333;\n padding: 2px 4px;\n border-radius: 2px;\n user-select: none;\n display: flex;\n align-items: center;\n}\n\n.mode-selector:hover {\n background-color: #f5f5f5;\n}\n\n.mode-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n background: #fff;\n border: 1px solid #d9d9d9;\n border-radius: 2px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n z-index: 10;\n min-width: 60px;\n}\n\n.mode-option {\n padding: 4px 8px;\n cursor: pointer;\n}\n\n.mode-option:hover {\n background: #e6f7ff;\n}\n\n.eyedropper-icon {\n cursor: pointer;\n padding: 2px;\n border-radius: 2px;\n color: #666;\n display: flex;\n align-items: center;\n}\n\n.eyedropper-icon:hover {\n background-color: #f5f5f5;\n color: #333;\n}\n\n.color-input-fields {\n display: flex;\n gap: 4px;\n}\n\n.color-input {\n width: 100%;\n padding: 4px;\n border: 1px solid #d9d9d9;\n border-radius: 2px;\n font-size: 12px;\n box-sizing: border-box;\n}\n\n/* Chrome, Safari, Edge, Opera - hide spin buttons */\n.color-input::-webkit-outer-spin-button,\n.color-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n/* Firefox */\n.color-input[type=number] {\n -moz-appearance: textfield;\n}\n\n.alpha-display {\n width: 40px;\n text-align: center;\n background-color: #f5f5f5;\n color: #666;\n border: 1px solid #d9d9d9;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Trigger */\n.color-picker-trigger {\n display: inline-block;\n padding: 4px;\n border: 1px solid #d9d9d9;\n border-radius: 4px;\n cursor: pointer;\n background: #fff;\n}\n\n.color-block {\n width: 20px;\n height: 20px;\n border-radius: 2px;\n border: 1px solid rgba(0, 0, 0, 0.1);\n}\n"]}

package/dist/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=/#__PURE__/t(e);function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},n.apply(null,arguments)}function r(e,t,a){return Math.min(Math.max(e,t),a)}function l(e,t,a){let n,r,l;e=(e%360+360)%360;let o=Math.floor(e/60),s=e/60-o,c=a(1-t),u=a(1-st),i=a(1-(1-s)t);switch(o%6){case 0:n=a,r=i,l=c;break;case 1:n=u,r=a,l=c;break;case 2:n=c,r=a,l=i;break;case 3:n=c,r=u,l=a;break;case 4:n=i,r=c,l=a;break;case 5:n=a,r=c,l=u;break;default:n=0,r=0,l=0}return{r:Math.round(255n),g:Math.round(255r),b:Math.round(255l)}}function o(e,t,a){e/=255,t/=255,a/=255;let n,r,l=Math.max(e,t,a),o=Math.min(e,t,a),s=l,c=l-o;if(r=0===l?0:c/l,l===o)n=0;else{switch(l){case e:n=(t-a)/c+(t<a?6:0);break;case t:n=(a-e)/c+2;break;case a:n=(e-t)/c+4;break;default:n=0}n/=6}return{h:360n,s:r,v:s}}function s(e,t,a){const n=e=>{const t=Math.round(e).toString(16);return 1===t.length?"0"+t:t};return"#"+n(e)+n(t)+n(a)}function c(e){e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(e,t,a,n){return t+t+a+a+n+n});const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function u(e){if(!e)return{h:0,s:1,v:1,a:1};if(e.startsWith("#")){const t=c(e);if(t)return{...o(t.r,t.g,t.b),a:1}}const t=e.match(/^rgba?$(\d+),\s(\d+),\s(\d+)(?:,\s([\d.]+))?$$/);if(t){const e=parseInt(t[1],10),a=parseInt(t[2],10),n=parseInt(t[3],10),r=void 0!==t[4]?parseFloat(t[4]):1;return{...o(e,a,n),a:r}}return{h:0,s:1,v:1,a:1}}const i=t=>{let{hue:n,saturation:l,value:o,onChange:s}=t;const c=e.useRef(null),[u,i]=e.useState(!1),d=e.useCallback(e=>{if(!c.current)return;const{width:t,height:a,left:n,top:l}=c.current.getBoundingClientRect(),o=r(e.clientX-n,0,t),u=r(e.clientY-l,0,a);s(o/t,1-u/a)},[s]),m=e.useCallback(()=>{i(!1)},[]);return e.useEffect(()=>{const e=e=>{u&&d(e)};return u&&(window.addEventListener("mousemove",e),window.addEventListener("mouseup",m)),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",m)}},[u,d,m]),/#__PURE__/a.default.createElement("div",{ref:c,className:"color-board",style:{backgroundColor:"hsl("+n+", 100%, 50%)"},onMouseDown:e=>{i(!0),d(e)}},/#__PURE__/a.default.createElement("div",{className:"color-board-white"}),/#__PURE__/a.default.createElement("div",{className:"color-board-black"}),/#__PURE__/a.default.createElement("div",{className:"color-board-handler",style:{left:100l+"%",top:100(1-o)+"%"}}))},d=({value:t,max:n,onChange:l,className:o,style:s,children:c})=>{const u=e.useRef(null),[i,d]=e.useState(!1),m=e.useCallback(e=>{if(!u.current)return;const{width:t,left:a}=u.current.getBoundingClientRect(),o=r(e.clientX-a,0,t);l(o/tn)},[n,l]),f=e.useCallback(()=>{d(!1)},[]);return e.useEffect(()=>{const e=e=>{i&&m(e)};return i&&(window.addEventListener("mousemove",e),window.addEventListener("mouseup",f)),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",f)}},[i,m,f]),/#__PURE__/a.default.createElement("div",{ref:u,className:`color-slider ${o\|\|""}`,style:s,onMouseDown:e=>{d(!0),m(e)}},/#__PURE__/a.default.createElement("div",{className:"color-slider-handler",style:{left:t/n100+"%"}}),c)},m=({hue:e,onChange:t})=>/#__PURE__/a.default.createElement(d,{value:e,max:360,onChange:t,className:"hue-slider"}),f=({alpha:e,color:t,onChange:n})=>{const{r:r,g:l,b:o}=t;/#__PURE__/return a.default.createElement(d,{value:e,max:1,onChange:n,className:"alpha-slider-bg",style:{background:`linear-gradient(to right, rgba(${r},${l},${o},0) 0%, rgba(${r},${l},${o},1) 100%)`}})},h=({hue:t,saturation:n,value:r,alpha:u,onChange:i})=>{const[d,m]=e.useState("HEX"),[f,h]=e.useState({}),[p,v]=e.useState(!1),g=e.useRef(null);e.useEffect(()=>{const e=e=>{g.current&&!g.current.contains(e.target)&&v(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const E=e.useCallback(()=>l(t,n,r),[t,n,r]);e.useEffect(()=>{const e=E();if("HEX"===d)h({hex:s(e.r,e.g,e.b)});else if("RGB"===d)h({r:e.r,g:e.g,b:e.b});else if("HSL"===d){const t=function(e,t,a){e/=255,t/=255,a/=255;let n,r,l=Math.max(e,t,a),o=Math.min(e,t,a),s=(l+o)/2;if(l===o)n=r=0;else{let c=l-o;switch(r=s>.5?c/(2-l-o):c/(l+o),l){case e:n=(t-a)/c+(t<a?6:0);break;case t:n=(a-e)/c+2;break;case a:n=(e-t)/c+4}n/=6}return{h:360n,s:r,l:s}}(e.r,e.g,e.b);h({h:Math.round(t.h),s:Math.round(100t.s),l:Math.round(100t.l)})}},[t,n,r,d,E]);const b=(e,t)=>{const a={...f,[e]:t};h(a);const n=parseInt(a.r,10),r=parseInt(a.g,10),l=parseInt(a.b,10);if(!isNaN(n)&&!isNaN(r)&&!isNaN(l)){const e=o(Math.min(255,Math.max(0,n)),Math.min(255,Math.max(0,r)),Math.min(255,Math.max(0,l)));i({...e,a:u})}},N=(e,t)=>{const a={...f,[e]:t};h(a);const n=parseInt(a.h,10),r=parseInt(a.s,10),l=parseInt(a.l,10);if(!isNaN(n)&&!isNaN(r)&&!isNaN(l)){const e=function(e,t,a){let n,r,l;if(0===t)n=r=l=a;else{const o=(e,t,a)=>(a<0&&(a+=1),a>1&&(a-=1),a<1/6?e+6(t-e)a:a<.5?t:a<2/3?e+(t-e)(2/3-a)6:e),s=a<.5?a(1+t):a+t-at,c=2a-s;n=o(c,s,(e/=360)+1/3),r=o(c,s,e),l=o(c,s,e-1/3)}return{r:Math.round(255n),g:Math.round(255r),b:Math.round(255l)}}(Math.min(360,Math.max(0,n)),Math.min(100,Math.max(0,r))/100,Math.min(100,Math.max(0,l))/100),t=o(e.r,e.g,e.b);i({...t,a:u})}};/#__PURE__/return a.default.createElement("div",{className:"color-input-container"},/#__PURE__/a.default.createElement("div",{className:"color-input-row"},/#__PURE__/a.default.createElement("div",{className:"mode-selector",ref:g,onClick:()=>v(!p)},/#__PURE__/a.default.createElement("span",null,d),/#__PURE__/a.default.createElement("span",{className:"arrow",style:{fontSize:"10px",marginLeft:"4px",transform:p?"rotate(180deg)":"rotate(0deg)",display:"inline-block",transition:"transform 0.2s"}},"▼"),p&&/#__PURE__/a.default.createElement("div",{className:"mode-dropdown"},/#__PURE__/a.default.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),m("HEX"),v(!1)}},"HEX"),/#__PURE__/a.default.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),m("RGB"),v(!1)}},"RGB"),/#__PURE__/a.default.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),m("HSL"),v(!1)}},"HSL"))),window.EyeDropper&&/#__PURE__/a.default.createElement("div",{className:"eyedropper-icon",onClick:function(){try{if(!window.EyeDropper)return Promise.resolve();const e=new window.EyeDropper,t=function(){try{var t=Promise.resolve(e.open()).then(function(e){const t=c(e.sRGBHex);if(t){const e=o(t.r,t.g,t.b);i({...e,a:u})}})}catch(e){return}return t&&t.then?t.then(void 0,function(){}):t}();return Promise.resolve(t&&t.then?t.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},title:"Pick Color"},/#__PURE__/a.default.createElement("svg",{viewBox:"0 0 24 24",width:"16",height:"16"},/#__PURE__/a.default.createElement("path",{fill:"currentColor",d:"M17.5,1.5c-0.8,0-1.5,0.3-2.1,0.9l-8,8c-0.6,0.6-0.9,1.3-0.9,2.1v2.5l-4,4l1.5,1.5l4-4h2.5c0.8,0,1.5-0.3,2.1-0.9l8-8c0.6-0.6,0.9-1.3,0.9-2.1s-0.3-1.5-0.9-2.1S18.3,1.5,17.5,1.5z M17.5,10l-8-8l8,8z M6.5,12.5v2.5h-2.5L2,17l2,2l2-2v-2.5h2.5l8-8L10,5L6.5,8.5V12.5z"}),/#__PURE__/a.default.createElement("path",{d:"M19.3 8.9L15.1 4.7 17.5 2.3c.4-.4 1-.4 1.4 0l2.7 2.7c.4.4.4 1 0 1.4L19.3 8.9zM13.7 6.1L4 15.8V20h4.2l9.7-9.7-4.2-4.2z",fill:"currentColor"})))),/#__PURE__/a.default.createElement("div",{className:"color-input-fields"},"HEX"===d&&/#__PURE__/a.default.createElement("input",{className:"color-input",value:f.hex\|\|"",onChange:e=>{const t=e.target.value;if(h({...f,hex:t}),/^#?([0-9A-F]{3}\|[0-9A-F]{6})$/i.test(t)){const e=c(t);if(e){const t=o(e.r,e.g,e.b);i({...t,a:u})}}}}),"RGB"===d&&/#__PURE__/a.default.createElement(a.default.Fragment,null,/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"R",value:void 0!==f.r?f.r:"",onChange:e=>b("r",e.target.value)}),/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"G",value:void 0!==f.g?f.g:"",onChange:e=>b("g",e.target.value)}),/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"B",value:void 0!==f.b?f.b:"",onChange:e=>b("b",e.target.value)})),"HSL"===d&&/#__PURE__/a.default.createElement(a.default.Fragment,null,/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"H",value:void 0!==f.h?f.h:"",onChange:e=>N("h",e.target.value)}),/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"S",value:void 0!==f.s?f.s:"",onChange:e=>N("s",e.target.value)}),/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"L",value:void 0!==f.l?f.l:"",onChange:e=>N("l",e.target.value)})),/#__PURE__/a.default.createElement("div",{className:"color-input alpha-display"},Math.round(100u),"%")))};module.exports=t=>{let{value:r,defaultValue:o,onChange:c}=t;const[d,p]=e.useState(!1),[v,g]=e.useState(()=>u(r\|\|o\|\|"#1677ff")),E=e.useRef(null);e.useEffect(()=>{void 0!==r&&g(u(r))},[r]);const b=e=>{const t=n({},v,e);if(g(t),c){const e=l(t.h,t.s,t.v),a=s(e.r,e.g,e.b);c(a,n({},e,{a:t.a}))}};e.useEffect(()=>{const e=e=>{E.current&&!E.current.contains(e.target)&&p(!1)};return d&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[d]);const N=l(v.h,v.s,v.v);/#__PURE__/return a.default.createElement("div",{className:"color-picker-container",ref:E,style:{position:"relative",display:"inline-block"}},/#__PURE__/a.default.createElement("div",{className:"color-picker-trigger",onClick:()=>p(!d)},/#__PURE__/a.default.createElement("div",{className:"color-block",style:{backgroundColor:"rgba("+N.r+", "+N.g+", "+N.b+", "+v.a+")"}})),d&&/#__PURE__/a.default.createElement("div",{className:"color-picker-panel",style:{position:"absolute",top:"100%",left:0,zIndex:1e3,marginTop:4}},/#__PURE__/a.default.createElement(i,{hue:v.h,saturation:v.s,value:v.v,onChange:(e,t)=>b({s:e,v:t})}),/#__PURE__/a.default.createElement(m,{hue:v.h,onChange:e=>b({h:e})}),/#__PURE__/a.default.createElement(f,{alpha:v.a,color:N,onChange:e=>b({a:e})}),/#__PURE__/a.default.createElement(h,{hue:v.h,saturation:v.s,value:v.v,alpha:v.a,onChange:e=>b(e)})))};
2	+ //# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../src/lib/utils/color.js","../src/lib/ColorBoard.js","../src/lib/Sliders.js","../src/lib/ColorInput.js","../src/lib/index.js"],"sourcesContent":["\n/**\n * Clamps a value between min and max\n * @param {number} value \n * @param {number} min \n * @param {number} max \n */\nexport function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n}\n\n/**\n * Converts HSV to RGB\n * @param {number} h Hue 0-360\n * @param {number} s Saturation 0-1\n * @param {number} v Value 0-1\n * @returns {{r: number, g: number, b: number}}\n */\nexport function hsvToRgb(h, s, v) {\n h = ((h % 360) + 360) % 360; // Normalize hue\n let r, g, b;\n let i = Math.floor(h / 60);\n let f = h / 60 - i;\n let p = v * (1 - s);\n let q = v * (1 - f * s);\n let t = v * (1 - (1 - f) * s);\n\n switch (i % 6) {\n case 0: r = v; g = t; b = p; break;\n case 1: r = q; g = v; b = p; break;\n case 2: r = p; g = v; b = t; break;\n case 3: r = p; g = q; b = v; break;\n case 4: r = t; g = p; b = v; break;\n case 5: r = v; g = p; b = q; break;\n default: r = 0; g = 0; b = 0;\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n}\n\n/**\n * Converts RGB to HSV\n * @param {number} r Red 0-255\n * @param {number} g Green 0-255\n * @param {number} b Blue 0-255\n * @returns {{h: number, s: number, v: number}}\n */\nexport function rgbToHsv(r, g, b) {\n r /= 255;\n g /= 255;\n b /= 255;\n\n let max = Math.max(r, g, b);\n let min = Math.min(r, g, b);\n let h, s, v = max;\n\n let d = max - min;\n s = max === 0 ? 0 : d / max;\n\n if (max === min) {\n h = 0; // achromatic\n } else {\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n default: h = 0;\n }\n h /= 6;\n }\n\n return {\n h: h * 360,\n s: s,\n v: v\n };\n}\n\n/**\n * Converts RGB to Hex string\n * @param {number} r \n * @param {number} g \n * @param {number} b \n * @returns {string} Hex string (e.g., \"#ff0000\")\n */\nexport function rgbToHex(r, g, b) {\n const toHex = (c) => {\n const hex = Math.round(c).toString(16);\n return hex.length === 1 ? \"0\" + hex : hex;\n };\n return \"#\" + toHex(r) + toHex(g) + toHex(b);\n}\n\n/**\n * Converts Hex string to RGB\n * @param {string} hex \n * @returns {{r: number, g: number, b: number} | null}\n */\nexport function hexToRgb(hex) {\n // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function(m, r, g, b) {\n return r + r + g + g + b + b;\n });\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n}\n\n/**\n * Parses a color string to HSV\n * @param {string} color \n * @returns {{h: number, s: number, v: number, a: number}}\n */\nexport function parseColor(color) {\n if (!color) return { h: 0, s: 1, v: 1, a: 1 };\n\n // Hex\n if (color.startsWith('#')) {\n const rgb = hexToRgb(color);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n return { ...hsv, a: 1 };\n }\n }\n \n // RGB/RGBA\n const rgbaMatch = color.match(/^rgba?\$(\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*([\\d.]+))?\$$/);\n if (rgbaMatch) {\n const r = parseInt(rgbaMatch[1], 10);\n const g = parseInt(rgbaMatch[2], 10);\n const b = parseInt(rgbaMatch[3], 10);\n const a = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1;\n const hsv = rgbToHsv(r, g, b);\n return { ...hsv, a };\n }\n\n // Default fallback\n return { h: 0, s: 1, v: 1, a: 1 };\n}\n\n/**\n * Converts RGB to HSL\n * @param {number} r Red 0-255\n * @param {number} g Green 0-255\n * @param {number} b Blue 0-255\n * @returns {{h: number, s: number, l: number}}\n */\nexport function rgbToHsl(r, g, b) {\n r /= 255;\n g /= 255;\n b /= 255;\n\n let max = Math.max(r, g, b), min = Math.min(r, g, b);\n let h, s, l = (max + min) / 2;\n\n if (max === min) {\n h = s = 0; // achromatic\n } else {\n let d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n }\n h /= 6;\n }\n\n return { h: h * 360, s: s, l: l };\n}\n\n/**\n * Converts HSL to RGB\n * @param {number} h Hue 0-360\n * @param {number} s Saturation 0-1\n * @param {number} l Lightness 0-1\n * @returns {{r: number, g: number, b: number}}\n */\nexport function hslToRgb(h, s, l) {\n let r, g, b;\n\n if (s === 0) {\n r = g = b = l; // achromatic\n } else {\n const hue2rgb = (p, q, t) => {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1/6) return p + (q - p) * 6 * t;\n if (t < 1/2) return q;\n if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;\n return p;\n };\n\n const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n const p = 2 * l - q;\n h /= 360;\n r = hue2rgb(p, q, h + 1/3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1/3);\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n}\n","\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport { clamp } from './utils/color';\n\nconst ColorBoard = ({ hue, saturation, value, onChange }) => {\n const containerRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const handleChange = useCallback((e) => {\n if (!containerRef.current) return;\n const { width, height, left, top } = containerRef.current.getBoundingClientRect();\n const x = clamp(e.clientX - left, 0, width);\n const y = clamp(e.clientY - top, 0, height);\n\n const newSaturation = x / width;\n const newValue = 1 - y / height;\n\n onChange(newSaturation, newValue);\n }, [onChange]);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n handleChange(e);\n };\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n useEffect(() => {\n const handleMouseMove = (e) => {\n if (isDragging) {\n handleChange(e);\n }\n };\n\n if (isDragging) {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n }\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isDragging, handleChange, handleMouseUp]);\n\n return (\n <div\n ref={containerRef}\n className=\"color-board\"\n style={{\n backgroundColor: `hsl(${hue}, 100%, 50%)`,\n }}\n onMouseDown={handleMouseDown}\n >\n <div className=\"color-board-white\" />\n <div className=\"color-board-black\" />\n <div\n className=\"color-board-handler\"\n style={{\n left: `${saturation * 100}%`,\n top: `${(1 - value) * 100}%`,\n }}\n />\n </div>\n );\n};\n\nexport default ColorBoard;\n","\nimport React, { useRef, useState, useEffect, useCallback } from 'react';\nimport { clamp } from './utils/color';\n\nconst Slider = ({ value, max, onChange, className, style, children }) => {\n const containerRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const handleChange = useCallback((e) => {\n if (!containerRef.current) return;\n const { width, left } = containerRef.current.getBoundingClientRect();\n const x = clamp(e.clientX - left, 0, width);\n const newValue = (x / width) * max;\n onChange(newValue);\n }, [max, onChange]);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n handleChange(e);\n };\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n useEffect(() => {\n const handleMouseMove = (e) => {\n if (isDragging) {\n handleChange(e);\n }\n };\n\n if (isDragging) {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n }\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isDragging, handleChange, handleMouseUp]);\n\n return (\n <div\n ref={containerRef}\n className={`color-slider ${className || ''}`}\n style={style}\n onMouseDown={handleMouseDown}\n >\n <div\n className=\"color-slider-handler\"\n style={{\n left: `${(value / max) * 100}%`,\n }}\n />\n {children}\n </div>\n );\n};\n\nexport const HueSlider = ({ hue, onChange }) => {\n return (\n <Slider\n value={hue}\n max={360}\n onChange={onChange}\n className=\"hue-slider\"\n />\n );\n};\n\nexport const AlphaSlider = ({ alpha, color, onChange }) => {\n const { r, g, b } = color;\n return (\n <Slider\n value={alpha}\n max={1}\n onChange={onChange}\n className=\"alpha-slider-bg\"\n style={{\n background: `linear-gradient(to right, rgba(${r},${g},${b},0) 0%, rgba(${r},${g},${b},1) 100%)`\n }}\n />\n );\n};\n","import React, { useState, useEffect, useCallback, useRef } from 'react';\nimport { rgbToHex, hexToRgb, hsvToRgb, rgbToHsv, rgbToHsl, hslToRgb } from './utils/color';\n\nconst ColorInput = ({ hue, saturation, value, alpha, onChange }) => {\n const [mode, setMode] = useState('HEX');\n const [localValue, setLocalValue] = useState({});\n const [showDropdown, setShowDropdown] = useState(false);\n const dropdownRef = useRef(null);\n\n // Close dropdown when clicking outside\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setShowDropdown(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const getRgb = useCallback(() => hsvToRgb(hue, saturation, value), [hue, saturation, value]);\n\n useEffect(() => {\n const rgb = getRgb();\n if (mode === 'HEX') {\n setLocalValue({ hex: rgbToHex(rgb.r, rgb.g, rgb.b) });\n } else if (mode === 'RGB') {\n setLocalValue({ r: rgb.r, g: rgb.g, b: rgb.b });\n } else if (mode === 'HSL') {\n const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);\n setLocalValue({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });\n }\n }, [hue, saturation, value, mode, getRgb]);\n\n const handleHexChange = (e) => {\n const val = e.target.value;\n setLocalValue({ ...localValue, hex: val });\n if (/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(val)) {\n const rgb = hexToRgb(val);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n }\n };\n\n const handleRgbChange = (key, val) => {\n const newValue = { ...localValue, [key]: val };\n setLocalValue(newValue);\n const r = parseInt(newValue.r, 10);\n const g = parseInt(newValue.g, 10);\n const b = parseInt(newValue.b, 10);\n if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {\n const hsv = rgbToHsv(Math.min(255, Math.max(0, r)), Math.min(255, Math.max(0, g)), Math.min(255, Math.max(0, b)));\n onChange({ ...hsv, a: alpha });\n }\n };\n\n const handleHslChange = (key, val) => {\n const newValue = { ...localValue, [key]: val };\n setLocalValue(newValue);\n const h = parseInt(newValue.h, 10);\n const s = parseInt(newValue.s, 10);\n const l = parseInt(newValue.l, 10);\n if (!isNaN(h) && !isNaN(s) && !isNaN(l)) {\n const rgb = hslToRgb(Math.min(360, Math.max(0, h)), Math.min(100, Math.max(0, s)) / 100, Math.min(100, Math.max(0, l)) / 100);\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n };\n\n const openEyeDropper = async () => {\n if (!window.EyeDropper) return;\n const eyeDropper = new window.EyeDropper();\n try {\n const result = await eyeDropper.open();\n const rgb = hexToRgb(result.sRGBHex);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n } catch (e) {\n // User canceled\n }\n };\n\n return (\n <div className=\"color-input-container\">\n <div className=\"color-input-row\">\n <div className=\"mode-selector\" ref={dropdownRef} onClick={() => setShowDropdown(!showDropdown)}>\n <span>{mode}</span>\n <span className=\"arrow\" style={{ fontSize: '10px', marginLeft: '4px', transform: showDropdown ? 'rotate(180deg)' : 'rotate(0deg)', display: 'inline-block', transition: 'transform 0.2s' }}>▼</span>\n {showDropdown && (\n <div className=\"mode-dropdown\">\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('HEX'); setShowDropdown(false); }}>HEX</div>\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('RGB'); setShowDropdown(false); }}>RGB</div>\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('HSL'); setShowDropdown(false); }}>HSL</div>\n </div>\n )}\n </div>\n \n {window.EyeDropper && (\n <div className=\"eyedropper-icon\" onClick={openEyeDropper} title=\"Pick Color\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n <path fill=\"currentColor\" d=\"M17.5,1.5c-0.8,0-1.5,0.3-2.1,0.9l-8,8c-0.6,0.6-0.9,1.3-0.9,2.1v2.5l-4,4l1.5,1.5l4-4h2.5c0.8,0,1.5-0.3,2.1-0.9l8-8c0.6-0.6,0.9-1.3,0.9-2.1s-0.3-1.5-0.9-2.1S18.3,1.5,17.5,1.5z M17.5,10l-8-8l8,8z M6.5,12.5v2.5h-2.5L2,17l2,2l2-2v-2.5h2.5l8-8L10,5L6.5,8.5V12.5z\"/>\n <path d=\"M19.3 8.9L15.1 4.7 17.5 2.3c.4-.4 1-.4 1.4 0l2.7 2.7c.4.4.4 1 0 1.4L19.3 8.9zM13.7 6.1L4 15.8V20h4.2l9.7-9.7-4.2-4.2z\" fill=\"currentColor\"/>\n </svg>\n </div>\n )}\n </div>\n\n <div className=\"color-input-fields\">\n {mode === 'HEX' && (\n <input className=\"color-input\" value={localValue.hex || ''} onChange={handleHexChange} />\n )}\n {mode === 'RGB' && (\n <>\n <input className=\"color-input\" type=\"number\" placeholder=\"R\" value={localValue.r !== undefined ? localValue.r : ''} onChange={(e) => handleRgbChange('r', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"G\" value={localValue.g !== undefined ? localValue.g : ''} onChange={(e) => handleRgbChange('g', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"B\" value={localValue.b !== undefined ? localValue.b : ''} onChange={(e) => handleRgbChange('b', e.target.value)} />\n </>\n )}\n {mode === 'HSL' && (\n <>\n <input className=\"color-input\" type=\"number\" placeholder=\"H\" value={localValue.h !== undefined ? localValue.h : ''} onChange={(e) => handleHslChange('h', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"S\" value={localValue.s !== undefined ? localValue.s : ''} onChange={(e) => handleHslChange('s', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"L\" value={localValue.l !== undefined ? localValue.l : ''} onChange={(e) => handleHslChange('l', e.target.value)} />\n </>\n )}\n <div className=\"color-input alpha-display\">\n {Math.round(alpha * 100)}%\n </div>\n </div>\n </div>\n );\n};\n\nexport default ColorInput;\n","\nimport React, { useState, useRef, useEffect } from 'react';\nimport ColorBoard from './ColorBoard';\nimport { HueSlider, AlphaSlider } from './Sliders';\nimport ColorInput from './ColorInput';\nimport { hsvToRgb, rgbToHex, parseColor } from './utils/color';\nimport './index.css';\n\nconst ColorPicker = ({ value, defaultValue, onChange }) => {\n // Initialize state\n const [isOpen, setIsOpen] = useState(false);\n \n // Internal state for color components\n const [color, setColor] = useState(() => {\n const initColor = value || defaultValue || '#1677ff';\n return parseColor(initColor);\n });\n\n const containerRef = useRef(null);\n\n // Sync with prop value if controlled\n useEffect(() => {\n if (value !== undefined) {\n setColor(parseColor(value));\n }\n }, [value]);\n\n const handleChange = (newColor) => {\n const nextColor = { ...color, ...newColor };\n setColor(nextColor);\n \n if (onChange) {\n const rgb = hsvToRgb(nextColor.h, nextColor.s, nextColor.v);\n const hex = rgbToHex(rgb.r, rgb.g, rgb.b);\n // Return a rich object or just hex string? \n // AntD returns an object, but simple string is often easier. \n // Let's return the hex string and the object as second arg just in case.\n onChange(hex, { ...rgb, a: nextColor.a });\n }\n };\n\n // Click outside to close\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (containerRef.current && !containerRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n \n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isOpen]);\n\n const rgb = hsvToRgb(color.h, color.s, color.v);\n const displayColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${color.a})`;\n\n return (\n <div className=\"color-picker-container\" ref={containerRef} style={{ position: 'relative', display: 'inline-block' }}>\n <div \n className=\"color-picker-trigger\"\n onClick={() => setIsOpen(!isOpen)}\n >\n <div \n className=\"color-block\" \n style={{ backgroundColor: displayColor }} \n />\n </div>\n\n {isOpen && (\n <div \n className=\"color-picker-panel\" \n style={{ \n position: 'absolute', \n top: '100%', \n left: 0, \n zIndex: 1000, \n marginTop: 4 \n }}\n >\n <ColorBoard\n hue={color.h}\n saturation={color.s}\n value={color.v}\n onChange={(s, v) => handleChange({ s, v })}\n />\n <HueSlider\n hue={color.h}\n onChange={(h) => handleChange({ h })}\n />\n <AlphaSlider\n alpha={color.a}\n color={rgb}\n onChange={(a) => handleChange({ a })}\n />\n <ColorInput\n hue={color.h}\n saturation={color.s}\n value={color.v}\n alpha={color.a}\n onChange={(newHsv) => handleChange(newHsv)}\n />\n </div>\n )}\n </div>\n );\n};\n\nexport default ColorPicker;\n"],"names":["clamp","value","min","max","Math","hsvToRgb","h","s","v","r","g","b","i","floor","f","p","q","t","round","rgbToHsv","d","rgbToHex","toHex","c","hex","toString","length","hexToRgb","replace","m","result","exec","parseInt","parseColor","color","a","startsWith","rgb","rgbaMatch","match","undefined","parseFloat","ColorBoard","_ref","hue","saturation","onChange","containerRef","useRef","isDragging","setIsDragging","useState","handleChange","useCallback","e","current","width","height","left","top","getBoundingClientRect","x","clientX","y","clientY","handleMouseUp","useEffect","handleMouseMove","window","addEventListener","removeEventListener","React","createElement","ref","className","style","backgroundColor","onMouseDown","Slider","children","HueSlider","AlphaSlider","alpha","background","ColorInput","mode","setMode","localValue","setLocalValue","showDropdown","setShowDropdown","dropdownRef","handleClickOutside","event","contains","target","document","getRgb","hsl","l","rgbToHsl","handleRgbChange","key","val","newValue","isNaN","hsv","handleHslChange","hue2rgb","hslToRgb","onClick","fontSize","marginLeft","transform","display","transition","stopPropagation","EyeDropper","Promise","resolve","eyeDropper","_temp","open","then","sRGBHex","_catch","reject","title","viewBox","fill","test","Fragment","type","placeholder","defaultValue","isOpen","setIsOpen","setColor","newColor","nextColor","_extends","position","zIndex","marginTop","newHsv"],"mappings":"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"}

package/dist/index.modern.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useRef as t,useState as n,useCallback as a,useEffect as r}from"react";function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o.apply(null,arguments)}function l(e,t,n){return Math.min(Math.max(e,t),n)}function s(e,t,n){let a,r,o;e=(e%360+360)%360;let l=Math.floor(e/60),s=e/60-l,c=n(1-t),i=n(1-st),u=n(1-(1-s)t);switch(l%6){case 0:a=n,r=u,o=c;break;case 1:a=i,r=n,o=c;break;case 2:a=c,r=n,o=u;break;case 3:a=c,r=i,o=n;break;case 4:a=u,r=c,o=n;break;case 5:a=n,r=c,o=i;break;default:a=0,r=0,o=0}return{r:Math.round(255a),g:Math.round(255r),b:Math.round(255o)}}function c(e,t,n){e/=255,t/=255,n/=255;let a,r,o=Math.max(e,t,n),l=Math.min(e,t,n),s=o,c=o-l;if(r=0===o?0:c/o,o===l)a=0;else{switch(o){case e:a=(t-n)/c+(t<n?6:0);break;case t:a=(n-e)/c+2;break;case n:a=(e-t)/c+4;break;default:a=0}a/=6}return{h:360a,s:r,v:s}}function i(e,t,n){const a=e=>{const t=Math.round(e).toString(16);return 1===t.length?"0"+t:t};return"#"+a(e)+a(t)+a(n)}function u(e){e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(e,t,n,a){return t+t+n+n+a+a});const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function m(e){if(!e)return{h:0,s:1,v:1,a:1};if(e.startsWith("#")){const t=u(e);if(t)return o({},c(t.r,t.g,t.b),{a:1})}const t=e.match(/^rgba?$(\d+),\s(\d+),\s(\d+)(?:,\s([\d.]+))?$$/);if(t){const e=parseInt(t[1],10),n=parseInt(t[2],10),a=parseInt(t[3],10),r=void 0!==t[4]?parseFloat(t[4]):1;return o({},c(e,n,a),{a:r})}return{h:0,s:1,v:1,a:1}}const d=({hue:o,saturation:s,value:c,onChange:i})=>{const u=t(null),[m,d]=n(!1),h=a(e=>{if(!u.current)return;const{width:t,height:n,left:a,top:r}=u.current.getBoundingClientRect(),o=l(e.clientX-a,0,t),s=l(e.clientY-r,0,n);i(o/t,1-s/n)},[i]),p=a(()=>{d(!1)},[]);return r(()=>{const e=e=>{m&&h(e)};return m&&(window.addEventListener("mousemove",e),window.addEventListener("mouseup",p)),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",p)}},[m,h,p]),/#__PURE__/e.createElement("div",{ref:u,className:"color-board",style:{backgroundColor:`hsl(${o}, 100%, 50%)`},onMouseDown:e=>{d(!0),h(e)}},/#__PURE__/e.createElement("div",{className:"color-board-white"}),/#__PURE__/e.createElement("div",{className:"color-board-black"}),/#__PURE__/e.createElement("div",{className:"color-board-handler",style:{left:100s+"%",top:100(1-c)+"%"}}))},h=({value:o,max:s,onChange:c,className:i,style:u,children:m})=>{const d=t(null),[h,p]=n(!1),v=a(e=>{if(!d.current)return;const{width:t,left:n}=d.current.getBoundingClientRect(),a=l(e.clientX-n,0,t);c(a/ts)},[s,c]),g=a(()=>{p(!1)},[]);return r(()=>{const e=e=>{h&&v(e)};return h&&(window.addEventListener("mousemove",e),window.addEventListener("mouseup",g)),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",g)}},[h,v,g]),/#__PURE__/e.createElement("div",{ref:d,className:`color-slider ${i\|\|""}`,style:u,onMouseDown:e=>{p(!0),v(e)}},/#__PURE__/e.createElement("div",{className:"color-slider-handler",style:{left:o/s100+"%"}}),m)},p=({hue:t,onChange:n})=>/#__PURE__/e.createElement(h,{value:t,max:360,onChange:n,className:"hue-slider"}),v=({alpha:t,color:n,onChange:a})=>{const{r,g:o,b:l}=n;/#__PURE__/return e.createElement(h,{value:t,max:1,onChange:a,className:"alpha-slider-bg",style:{background:`linear-gradient(to right, rgba(${r},${o},${l},0) 0%, rgba(${r},${o},${l},1) 100%)`}})},g=({hue:l,saturation:m,value:d,alpha:h,onChange:p})=>{const[v,g]=n("HEX"),[f,E]=n({}),[b,N]=n(!1),w=t(null);r(()=>{const e=e=>{w.current&&!w.current.contains(e.target)&&N(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const M=a(()=>s(l,m,d),[l,m,d]);r(()=>{const e=M();if("HEX"===v)E({hex:i(e.r,e.g,e.b)});else if("RGB"===v)E({r:e.r,g:e.g,b:e.b});else if("HSL"===v){const t=function(e,t,n){e/=255,t/=255,n/=255;let a,r,o=Math.max(e,t,n),l=Math.min(e,t,n),s=(o+l)/2;if(o===l)a=r=0;else{let c=o-l;switch(r=s>.5?c/(2-o-l):c/(o+l),o){case e:a=(t-n)/c+(t<n?6:0);break;case t:a=(n-e)/c+2;break;case n:a=(e-t)/c+4}a/=6}return{h:360a,s:r,l:s}}(e.r,e.g,e.b);E({h:Math.round(t.h),s:Math.round(100t.s),l:Math.round(100t.l)})}},[l,m,d,v,M]);const C=(e,t)=>{const n=o({},f,{[e]:t});E(n);const a=parseInt(n.r,10),r=parseInt(n.g,10),l=parseInt(n.b,10);if(!isNaN(a)&&!isNaN(r)&&!isNaN(l)){const e=c(Math.min(255,Math.max(0,a)),Math.min(255,Math.max(0,r)),Math.min(255,Math.max(0,l)));p(o({},e,{a:h}))}},k=(e,t)=>{const n=o({},f,{[e]:t});E(n);const a=parseInt(n.h,10),r=parseInt(n.s,10),l=parseInt(n.l,10);if(!isNaN(a)&&!isNaN(r)&&!isNaN(l)){const e=function(e,t,n){let a,r,o;if(0===t)a=r=o=n;else{const l=(e,t,n)=>(n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6(t-e)n:n<.5?t:n<2/3?e+(t-e)(2/3-n)6:e),s=n<.5?n(1+t):n+t-nt,c=2n-s;a=l(c,s,(e/=360)+1/3),r=l(c,s,e),o=l(c,s,e-1/3)}return{r:Math.round(255a),g:Math.round(255r),b:Math.round(255o)}}(Math.min(360,Math.max(0,a)),Math.min(100,Math.max(0,r))/100,Math.min(100,Math.max(0,l))/100),t=c(e.r,e.g,e.b);p(o({},t,{a:h}))}};/#__PURE__/return e.createElement("div",{className:"color-input-container"},/#__PURE__/e.createElement("div",{className:"color-input-row"},/#__PURE__/e.createElement("div",{className:"mode-selector",ref:w,onClick:()=>N(!b)},/#__PURE__/e.createElement("span",null,v),/#__PURE__/e.createElement("span",{className:"arrow",style:{fontSize:"10px",marginLeft:"4px",transform:b?"rotate(180deg)":"rotate(0deg)",display:"inline-block",transition:"transform 0.2s"}},"▼"),b&&/#__PURE__/e.createElement("div",{className:"mode-dropdown"},/#__PURE__/e.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),g("HEX"),N(!1)}},"HEX"),/#__PURE__/e.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),g("RGB"),N(!1)}},"RGB"),/#__PURE__/e.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),g("HSL"),N(!1)}},"HSL"))),window.EyeDropper&&/#__PURE__/e.createElement("div",{className:"eyedropper-icon",onClick:async()=>{if(!window.EyeDropper)return;const e=new window.EyeDropper;try{const t=u((await e.open()).sRGBHex);if(t){const e=c(t.r,t.g,t.b);p(o({},e,{a:h}))}}catch(e){}},title:"Pick Color"},/#__PURE__/e.createElement("svg",{viewBox:"0 0 24 24",width:"16",height:"16"},/#__PURE__/e.createElement("path",{fill:"currentColor",d:"M17.5,1.5c-0.8,0-1.5,0.3-2.1,0.9l-8,8c-0.6,0.6-0.9,1.3-0.9,2.1v2.5l-4,4l1.5,1.5l4-4h2.5c0.8,0,1.5-0.3,2.1-0.9l8-8c0.6-0.6,0.9-1.3,0.9-2.1s-0.3-1.5-0.9-2.1S18.3,1.5,17.5,1.5z M17.5,10l-8-8l8,8z M6.5,12.5v2.5h-2.5L2,17l2,2l2-2v-2.5h2.5l8-8L10,5L6.5,8.5V12.5z"}),/#__PURE__/e.createElement("path",{d:"M19.3 8.9L15.1 4.7 17.5 2.3c.4-.4 1-.4 1.4 0l2.7 2.7c.4.4.4 1 0 1.4L19.3 8.9zM13.7 6.1L4 15.8V20h4.2l9.7-9.7-4.2-4.2z",fill:"currentColor"})))),/#__PURE__/e.createElement("div",{className:"color-input-fields"},"HEX"===v&&/#__PURE__/e.createElement("input",{className:"color-input",value:f.hex\|\|"",onChange:e=>{const t=e.target.value;if(E(o({},f,{hex:t})),/^#?([0-9A-F]{3}\|[0-9A-F]{6})$/i.test(t)){const e=u(t);if(e){const t=c(e.r,e.g,e.b);p(o({},t,{a:h}))}}}}),"RGB"===v&&/#__PURE__/e.createElement(e.Fragment,null,/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"R",value:void 0!==f.r?f.r:"",onChange:e=>C("r",e.target.value)}),/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"G",value:void 0!==f.g?f.g:"",onChange:e=>C("g",e.target.value)}),/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"B",value:void 0!==f.b?f.b:"",onChange:e=>C("b",e.target.value)})),"HSL"===v&&/#__PURE__/e.createElement(e.Fragment,null,/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"H",value:void 0!==f.h?f.h:"",onChange:e=>k("h",e.target.value)}),/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"S",value:void 0!==f.s?f.s:"",onChange:e=>k("s",e.target.value)}),/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"L",value:void 0!==f.l?f.l:"",onChange:e=>k("l",e.target.value)})),/#__PURE__/e.createElement("div",{className:"color-input alpha-display"},Math.round(100h),"%")))},f=({value:a,defaultValue:l,onChange:c})=>{const[u,h]=n(!1),[f,E]=n(()=>m(a\|\|l\|\|"#1677ff")),b=t(null);r(()=>{void 0!==a&&E(m(a))},[a]);const N=e=>{const t=o({},f,e);if(E(t),c){const e=s(t.h,t.s,t.v),n=i(e.r,e.g,e.b);c(n,o({},e,{a:t.a}))}};r(()=>{const e=e=>{b.current&&!b.current.contains(e.target)&&h(!1)};return u&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[u]);const w=s(f.h,f.s,f.v);/#__PURE__/return e.createElement("div",{className:"color-picker-container",ref:b,style:{position:"relative",display:"inline-block"}},/#__PURE__/e.createElement("div",{className:"color-picker-trigger",onClick:()=>h(!u)},/#__PURE__/e.createElement("div",{className:"color-block",style:{backgroundColor:`rgba(${w.r}, ${w.g}, ${w.b}, ${f.a})`}})),u&&/#__PURE__/e.createElement("div",{className:"color-picker-panel",style:{position:"absolute",top:"100%",left:0,zIndex:1e3,marginTop:4}},/#__PURE__/e.createElement(d,{hue:f.h,saturation:f.s,value:f.v,onChange:(e,t)=>N({s:e,v:t})}),/#__PURE__/e.createElement(p,{hue:f.h,onChange:e=>N({h:e})}),/#__PURE__/e.createElement(v,{alpha:f.a,color:w,onChange:e=>N({a:e})}),/#__PURE__/e.createElement(g,{hue:f.h,saturation:f.s,value:f.v,alpha:f.a,onChange:e=>N(e)})))};export{f as default};
2	+ //# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.modern.mjs","sources":["../src/lib/utils/color.js","../src/lib/ColorBoard.js","../src/lib/Sliders.js","../src/lib/ColorInput.js","../src/lib/index.js"],"sourcesContent":["\n/**\n * Clamps a value between min and max\n * @param {number} value \n * @param {number} min \n * @param {number} max \n */\nexport function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n}\n\n/**\n * Converts HSV to RGB\n * @param {number} h Hue 0-360\n * @param {number} s Saturation 0-1\n * @param {number} v Value 0-1\n * @returns {{r: number, g: number, b: number}}\n */\nexport function hsvToRgb(h, s, v) {\n h = ((h % 360) + 360) % 360; // Normalize hue\n let r, g, b;\n let i = Math.floor(h / 60);\n let f = h / 60 - i;\n let p = v * (1 - s);\n let q = v * (1 - f * s);\n let t = v * (1 - (1 - f) * s);\n\n switch (i % 6) {\n case 0: r = v; g = t; b = p; break;\n case 1: r = q; g = v; b = p; break;\n case 2: r = p; g = v; b = t; break;\n case 3: r = p; g = q; b = v; break;\n case 4: r = t; g = p; b = v; break;\n case 5: r = v; g = p; b = q; break;\n default: r = 0; g = 0; b = 0;\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n}\n\n/**\n * Converts RGB to HSV\n * @param {number} r Red 0-255\n * @param {number} g Green 0-255\n * @param {number} b Blue 0-255\n * @returns {{h: number, s: number, v: number}}\n */\nexport function rgbToHsv(r, g, b) {\n r /= 255;\n g /= 255;\n b /= 255;\n\n let max = Math.max(r, g, b);\n let min = Math.min(r, g, b);\n let h, s, v = max;\n\n let d = max - min;\n s = max === 0 ? 0 : d / max;\n\n if (max === min) {\n h = 0; // achromatic\n } else {\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n default: h = 0;\n }\n h /= 6;\n }\n\n return {\n h: h * 360,\n s: s,\n v: v\n };\n}\n\n/**\n * Converts RGB to Hex string\n * @param {number} r \n * @param {number} g \n * @param {number} b \n * @returns {string} Hex string (e.g., \"#ff0000\")\n */\nexport function rgbToHex(r, g, b) {\n const toHex = (c) => {\n const hex = Math.round(c).toString(16);\n return hex.length === 1 ? \"0\" + hex : hex;\n };\n return \"#\" + toHex(r) + toHex(g) + toHex(b);\n}\n\n/**\n * Converts Hex string to RGB\n * @param {string} hex \n * @returns {{r: number, g: number, b: number} | null}\n */\nexport function hexToRgb(hex) {\n // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function(m, r, g, b) {\n return r + r + g + g + b + b;\n });\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n}\n\n/**\n * Parses a color string to HSV\n * @param {string} color \n * @returns {{h: number, s: number, v: number, a: number}}\n */\nexport function parseColor(color) {\n if (!color) return { h: 0, s: 1, v: 1, a: 1 };\n\n // Hex\n if (color.startsWith('#')) {\n const rgb = hexToRgb(color);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n return { ...hsv, a: 1 };\n }\n }\n \n // RGB/RGBA\n const rgbaMatch = color.match(/^rgba?\$(\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*([\\d.]+))?\$$/);\n if (rgbaMatch) {\n const r = parseInt(rgbaMatch[1], 10);\n const g = parseInt(rgbaMatch[2], 10);\n const b = parseInt(rgbaMatch[3], 10);\n const a = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1;\n const hsv = rgbToHsv(r, g, b);\n return { ...hsv, a };\n }\n\n // Default fallback\n return { h: 0, s: 1, v: 1, a: 1 };\n}\n\n/**\n * Converts RGB to HSL\n * @param {number} r Red 0-255\n * @param {number} g Green 0-255\n * @param {number} b Blue 0-255\n * @returns {{h: number, s: number, l: number}}\n */\nexport function rgbToHsl(r, g, b) {\n r /= 255;\n g /= 255;\n b /= 255;\n\n let max = Math.max(r, g, b), min = Math.min(r, g, b);\n let h, s, l = (max + min) / 2;\n\n if (max === min) {\n h = s = 0; // achromatic\n } else {\n let d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n }\n h /= 6;\n }\n\n return { h: h * 360, s: s, l: l };\n}\n\n/**\n * Converts HSL to RGB\n * @param {number} h Hue 0-360\n * @param {number} s Saturation 0-1\n * @param {number} l Lightness 0-1\n * @returns {{r: number, g: number, b: number}}\n */\nexport function hslToRgb(h, s, l) {\n let r, g, b;\n\n if (s === 0) {\n r = g = b = l; // achromatic\n } else {\n const hue2rgb = (p, q, t) => {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1/6) return p + (q - p) * 6 * t;\n if (t < 1/2) return q;\n if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;\n return p;\n };\n\n const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n const p = 2 * l - q;\n h /= 360;\n r = hue2rgb(p, q, h + 1/3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1/3);\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n}\n","\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport { clamp } from './utils/color';\n\nconst ColorBoard = ({ hue, saturation, value, onChange }) => {\n const containerRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const handleChange = useCallback((e) => {\n if (!containerRef.current) return;\n const { width, height, left, top } = containerRef.current.getBoundingClientRect();\n const x = clamp(e.clientX - left, 0, width);\n const y = clamp(e.clientY - top, 0, height);\n\n const newSaturation = x / width;\n const newValue = 1 - y / height;\n\n onChange(newSaturation, newValue);\n }, [onChange]);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n handleChange(e);\n };\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n useEffect(() => {\n const handleMouseMove = (e) => {\n if (isDragging) {\n handleChange(e);\n }\n };\n\n if (isDragging) {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n }\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isDragging, handleChange, handleMouseUp]);\n\n return (\n <div\n ref={containerRef}\n className=\"color-board\"\n style={{\n backgroundColor: `hsl(${hue}, 100%, 50%)`,\n }}\n onMouseDown={handleMouseDown}\n >\n <div className=\"color-board-white\" />\n <div className=\"color-board-black\" />\n <div\n className=\"color-board-handler\"\n style={{\n left: `${saturation * 100}%`,\n top: `${(1 - value) * 100}%`,\n }}\n />\n </div>\n );\n};\n\nexport default ColorBoard;\n","\nimport React, { useRef, useState, useEffect, useCallback } from 'react';\nimport { clamp } from './utils/color';\n\nconst Slider = ({ value, max, onChange, className, style, children }) => {\n const containerRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const handleChange = useCallback((e) => {\n if (!containerRef.current) return;\n const { width, left } = containerRef.current.getBoundingClientRect();\n const x = clamp(e.clientX - left, 0, width);\n const newValue = (x / width) * max;\n onChange(newValue);\n }, [max, onChange]);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n handleChange(e);\n };\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n useEffect(() => {\n const handleMouseMove = (e) => {\n if (isDragging) {\n handleChange(e);\n }\n };\n\n if (isDragging) {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n }\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isDragging, handleChange, handleMouseUp]);\n\n return (\n <div\n ref={containerRef}\n className={`color-slider ${className || ''}`}\n style={style}\n onMouseDown={handleMouseDown}\n >\n <div\n className=\"color-slider-handler\"\n style={{\n left: `${(value / max) * 100}%`,\n }}\n />\n {children}\n </div>\n );\n};\n\nexport const HueSlider = ({ hue, onChange }) => {\n return (\n <Slider\n value={hue}\n max={360}\n onChange={onChange}\n className=\"hue-slider\"\n />\n );\n};\n\nexport const AlphaSlider = ({ alpha, color, onChange }) => {\n const { r, g, b } = color;\n return (\n <Slider\n value={alpha}\n max={1}\n onChange={onChange}\n className=\"alpha-slider-bg\"\n style={{\n background: `linear-gradient(to right, rgba(${r},${g},${b},0) 0%, rgba(${r},${g},${b},1) 100%)`\n }}\n />\n );\n};\n","import React, { useState, useEffect, useCallback, useRef } from 'react';\nimport { rgbToHex, hexToRgb, hsvToRgb, rgbToHsv, rgbToHsl, hslToRgb } from './utils/color';\n\nconst ColorInput = ({ hue, saturation, value, alpha, onChange }) => {\n const [mode, setMode] = useState('HEX');\n const [localValue, setLocalValue] = useState({});\n const [showDropdown, setShowDropdown] = useState(false);\n const dropdownRef = useRef(null);\n\n // Close dropdown when clicking outside\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setShowDropdown(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const getRgb = useCallback(() => hsvToRgb(hue, saturation, value), [hue, saturation, value]);\n\n useEffect(() => {\n const rgb = getRgb();\n if (mode === 'HEX') {\n setLocalValue({ hex: rgbToHex(rgb.r, rgb.g, rgb.b) });\n } else if (mode === 'RGB') {\n setLocalValue({ r: rgb.r, g: rgb.g, b: rgb.b });\n } else if (mode === 'HSL') {\n const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);\n setLocalValue({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });\n }\n }, [hue, saturation, value, mode, getRgb]);\n\n const handleHexChange = (e) => {\n const val = e.target.value;\n setLocalValue({ ...localValue, hex: val });\n if (/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(val)) {\n const rgb = hexToRgb(val);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n }\n };\n\n const handleRgbChange = (key, val) => {\n const newValue = { ...localValue, [key]: val };\n setLocalValue(newValue);\n const r = parseInt(newValue.r, 10);\n const g = parseInt(newValue.g, 10);\n const b = parseInt(newValue.b, 10);\n if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {\n const hsv = rgbToHsv(Math.min(255, Math.max(0, r)), Math.min(255, Math.max(0, g)), Math.min(255, Math.max(0, b)));\n onChange({ ...hsv, a: alpha });\n }\n };\n\n const handleHslChange = (key, val) => {\n const newValue = { ...localValue, [key]: val };\n setLocalValue(newValue);\n const h = parseInt(newValue.h, 10);\n const s = parseInt(newValue.s, 10);\n const l = parseInt(newValue.l, 10);\n if (!isNaN(h) && !isNaN(s) && !isNaN(l)) {\n const rgb = hslToRgb(Math.min(360, Math.max(0, h)), Math.min(100, Math.max(0, s)) / 100, Math.min(100, Math.max(0, l)) / 100);\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n };\n\n const openEyeDropper = async () => {\n if (!window.EyeDropper) return;\n const eyeDropper = new window.EyeDropper();\n try {\n const result = await eyeDropper.open();\n const rgb = hexToRgb(result.sRGBHex);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n } catch (e) {\n // User canceled\n }\n };\n\n return (\n <div className=\"color-input-container\">\n <div className=\"color-input-row\">\n <div className=\"mode-selector\" ref={dropdownRef} onClick={() => setShowDropdown(!showDropdown)}>\n <span>{mode}</span>\n <span className=\"arrow\" style={{ fontSize: '10px', marginLeft: '4px', transform: showDropdown ? 'rotate(180deg)' : 'rotate(0deg)', display: 'inline-block', transition: 'transform 0.2s' }}>▼</span>\n {showDropdown && (\n <div className=\"mode-dropdown\">\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('HEX'); setShowDropdown(false); }}>HEX</div>\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('RGB'); setShowDropdown(false); }}>RGB</div>\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('HSL'); setShowDropdown(false); }}>HSL</div>\n </div>\n )}\n </div>\n \n {window.EyeDropper && (\n <div className=\"eyedropper-icon\" onClick={openEyeDropper} title=\"Pick Color\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n <path fill=\"currentColor\" d=\"M17.5,1.5c-0.8,0-1.5,0.3-2.1,0.9l-8,8c-0.6,0.6-0.9,1.3-0.9,2.1v2.5l-4,4l1.5,1.5l4-4h2.5c0.8,0,1.5-0.3,2.1-0.9l8-8c0.6-0.6,0.9-1.3,0.9-2.1s-0.3-1.5-0.9-2.1S18.3,1.5,17.5,1.5z M17.5,10l-8-8l8,8z M6.5,12.5v2.5h-2.5L2,17l2,2l2-2v-2.5h2.5l8-8L10,5L6.5,8.5V12.5z\"/>\n <path d=\"M19.3 8.9L15.1 4.7 17.5 2.3c.4-.4 1-.4 1.4 0l2.7 2.7c.4.4.4 1 0 1.4L19.3 8.9zM13.7 6.1L4 15.8V20h4.2l9.7-9.7-4.2-4.2z\" fill=\"currentColor\"/>\n </svg>\n </div>\n )}\n </div>\n\n <div className=\"color-input-fields\">\n {mode === 'HEX' && (\n <input className=\"color-input\" value={localValue.hex || ''} onChange={handleHexChange} />\n )}\n {mode === 'RGB' && (\n <>\n <input className=\"color-input\" type=\"number\" placeholder=\"R\" value={localValue.r !== undefined ? localValue.r : ''} onChange={(e) => handleRgbChange('r', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"G\" value={localValue.g !== undefined ? localValue.g : ''} onChange={(e) => handleRgbChange('g', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"B\" value={localValue.b !== undefined ? localValue.b : ''} onChange={(e) => handleRgbChange('b', e.target.value)} />\n </>\n )}\n {mode === 'HSL' && (\n <>\n <input className=\"color-input\" type=\"number\" placeholder=\"H\" value={localValue.h !== undefined ? localValue.h : ''} onChange={(e) => handleHslChange('h', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"S\" value={localValue.s !== undefined ? localValue.s : ''} onChange={(e) => handleHslChange('s', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"L\" value={localValue.l !== undefined ? localValue.l : ''} onChange={(e) => handleHslChange('l', e.target.value)} />\n </>\n )}\n <div className=\"color-input alpha-display\">\n {Math.round(alpha * 100)}%\n </div>\n </div>\n </div>\n );\n};\n\nexport default ColorInput;\n","\nimport React, { useState, useRef, useEffect } from 'react';\nimport ColorBoard from './ColorBoard';\nimport { HueSlider, AlphaSlider } from './Sliders';\nimport ColorInput from './ColorInput';\nimport { hsvToRgb, rgbToHex, parseColor } from './utils/color';\nimport './index.css';\n\nconst ColorPicker = ({ value, defaultValue, onChange }) => {\n // Initialize state\n const [isOpen, setIsOpen] = useState(false);\n \n // Internal state for color components\n const [color, setColor] = useState(() => {\n const initColor = value || defaultValue || '#1677ff';\n return parseColor(initColor);\n });\n\n const containerRef = useRef(null);\n\n // Sync with prop value if controlled\n useEffect(() => {\n if (value !== undefined) {\n setColor(parseColor(value));\n }\n }, [value]);\n\n const handleChange = (newColor) => {\n const nextColor = { ...color, ...newColor };\n setColor(nextColor);\n \n if (onChange) {\n const rgb = hsvToRgb(nextColor.h, nextColor.s, nextColor.v);\n const hex = rgbToHex(rgb.r, rgb.g, rgb.b);\n // Return a rich object or just hex string? \n // AntD returns an object, but simple string is often easier. \n // Let's return the hex string and the object as second arg just in case.\n onChange(hex, { ...rgb, a: nextColor.a });\n }\n };\n\n // Click outside to close\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (containerRef.current && !containerRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n \n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isOpen]);\n\n const rgb = hsvToRgb(color.h, color.s, color.v);\n const displayColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${color.a})`;\n\n return (\n <div className=\"color-picker-container\" ref={containerRef} style={{ position: 'relative', display: 'inline-block' }}>\n <div \n className=\"color-picker-trigger\"\n onClick={() => setIsOpen(!isOpen)}\n >\n <div \n className=\"color-block\" \n style={{ backgroundColor: displayColor }} \n />\n </div>\n\n {isOpen && (\n <div \n className=\"color-picker-panel\" \n style={{ \n position: 'absolute', \n top: '100%', \n left: 0, \n zIndex: 1000, \n marginTop: 4 \n }}\n >\n <ColorBoard\n hue={color.h}\n saturation={color.s}\n value={color.v}\n onChange={(s, v) => handleChange({ s, v })}\n />\n <HueSlider\n hue={color.h}\n onChange={(h) => handleChange({ h })}\n />\n <AlphaSlider\n alpha={color.a}\n color={rgb}\n onChange={(a) => handleChange({ a })}\n />\n <ColorInput\n hue={color.h}\n saturation={color.s}\n value={color.v}\n alpha={color.a}\n onChange={(newHsv) => handleChange(newHsv)}\n />\n </div>\n )}\n </div>\n );\n};\n\nexport default ColorPicker;\n"],"names":["clamp","value","min","max","Math","hsvToRgb","h","s","v","r","g","b","i","floor","f","p","q","t","round","rgbToHsv","d","rgbToHex","toHex","c","hex","toString","length","hexToRgb","replace","m","result","exec","parseInt","parseColor","color","a","startsWith","rgb","_extends","hsv","rgbaMatch","match","undefined","parseFloat","ColorBoard","hue","saturation","onChange","containerRef","useRef","isDragging","setIsDragging","useState","handleChange","useCallback","e","current","width","height","left","top","getBoundingClientRect","x","clientX","y","clientY","handleMouseUp","useEffect","handleMouseMove","window","addEventListener","removeEventListener","React","createElement","ref","className","style","backgroundColor","onMouseDown","Slider","children","HueSlider","AlphaSlider","alpha","background","ColorInput","mode","setMode","localValue","setLocalValue","showDropdown","setShowDropdown","dropdownRef","handleClickOutside","event","contains","target","document","getRgb","hsl","l","rgbToHsl","handleRgbChange","key","val","newValue","isNaN","handleHslChange","hue2rgb","hslToRgb","onClick","fontSize","marginLeft","transform","display","transition","stopPropagation","EyeDropper","async","eyeDropper","open","sRGBHex","title","viewBox","fill","test","Fragment","type","placeholder","ColorPicker","defaultValue","isOpen","setIsOpen","setColor","newColor","nextColor","position","zIndex","marginTop","newHsv"],"mappings":"wSAOgB,SAAAA,EAAMC,EAAOC,EAAKC,GAChC,OAAOC,KAAKF,IAAIE,KAAKD,IAAIF,EAAOC,GAAMC,EACxC,CASgB,SAAAE,EAASC,EAAGC,EAAGC,GAE7B,IAAIC,EAAGC,EAAGC,EADVL,GAAMA,EAAI,IAAO,KAAO,IAExB,IAAIM,EAAIR,KAAKS,MAAMP,EAAI,IACnBQ,EAAIR,EAAI,GAAKM,EACbG,EAAIP,GAAK,EAAID,GACbS,EAAIR,GAAK,EAAIM,EAAIP,GACjBU,EAAIT,GAAK,GAAK,EAAIM,GAAKP,GAE3B,OAAQK,EAAI,GACV,KAAK,EAAGH,EAAID,EAAGE,EAAIO,EAAGN,EAAII,EAAG,MAC7B,KAAM,EAAEN,EAAIO,EAAGN,EAAIF,EAAGG,EAAII,EAAG,MAC7B,OAAQN,EAAIM,EAAGL,EAAIF,EAAGG,EAAIM,EAAG,MAC7B,KAAM,EAAER,EAAIM,EAAGL,EAAIM,EAAGL,EAAIH,EAAG,MAC7B,KAAK,EAAGC,EAAIQ,EAAGP,EAAIK,EAAGJ,EAAIH,EAAG,MAC7B,KAAK,EAAGC,EAAID,EAAGE,EAAIK,EAAGJ,EAAIK,EAAG,MAC7B,QAASP,EAAI,EAAGC,EAAI,EAAGC,EAAI,EAG7B,MAAO,CACLF,EAAGL,KAAKc,MAAU,IAAJT,GACdC,EAAGN,KAAKc,MAAU,IAAJR,GACdC,EAAGP,KAAKc,MAAU,IAAJP,GAElB,UASgBQ,EAASV,EAAGC,EAAGC,GAC7BF,GAAK,IACLC,GAAK,IACLC,GAAK,IAEL,IAEIL,EAAGC,EAFHJ,EAAMC,KAAKD,IAAIM,EAAGC,EAAGC,GACrBT,EAAME,KAAKF,IAAIO,EAAGC,EAAGC,GACfH,EAAIL,EAEViB,EAAIjB,EAAMD,EAGd,GAFAK,EAAY,IAARJ,EAAY,EAAIiB,EAAIjB,EAEpBA,IAAQD,EACVI,EAAI,MACC,CACL,OAAQH,GACN,KAAKM,EAAGH,GAAKI,EAAIC,GAAKS,GAAKV,EAAIC,EAAI,EAAI,GAAI,MAC3C,KAAKD,EAAGJ,GAAKK,EAAIF,GAAKW,EAAI,EAAG,MAC7B,KAAKT,EAAGL,GAAKG,EAAIC,GAAKU,EAAI,EAAG,MAC7B,QAASd,EAAI,EAEfA,GAAK,CACP,CAEA,MAAO,CACLA,EAAO,IAAJA,EACHC,EAAGA,EACHC,EAAGA,EAEP,CASgB,SAAAa,EAASZ,EAAGC,EAAGC,GAC7B,MAAMW,EAASC,IACb,MAAMC,EAAMpB,KAAKc,MAAMK,GAAGE,SAAS,IACnC,OAAsB,IAAfD,EAAIE,OAAe,IAAMF,EAAMA,GAExC,MAAO,IAAMF,EAAMb,GAAKa,EAAMZ,GAAKY,EAAMX,EAC3C,CAOO,SAASgB,EAASH,GAGvBA,EAAMA,EAAII,QADa,mCACW,SAASC,EAAGpB,EAAGC,EAAGC,GAClD,OAAOF,EAAIA,EAAIC,EAAIA,EAAIC,EAAIA,CAC7B,GAEA,MAAMmB,EAAS,4CAA4CC,KAAKP,GAChE,OAAOM,EAAS,CACdrB,EAAGuB,SAASF,EAAO,GAAI,IACvBpB,EAAGsB,SAASF,EAAO,GAAI,IACvBnB,EAAGqB,SAASF,EAAO,GAAI,KACrB,IACN,CAOgB,SAAAG,EAAWC,GACzB,IAAKA,EAAO,MAAO,CAAE5B,EAAG,EAAGC,EAAG,EAAGC,EAAG,EAAG2B,EAAG,GAG1C,GAAID,EAAME,WAAW,KAAM,CACzB,MAAMC,EAAMV,EAASO,GACrB,GAAIG,EAEF,OAAAC,EAAYC,GADApB,EAASkB,EAAI5B,EAAG4B,EAAI3B,EAAG2B,EAAI1B,GACtBwB,CAAAA,EAAG,GAExB,CAGA,MAAMK,EAAYN,EAAMO,MAAM,uDAC9B,GAAID,EAAW,CACb,MAAM/B,EAAIuB,SAASQ,EAAU,GAAI,IAC3B9B,EAAIsB,SAASQ,EAAU,GAAI,IAC3B7B,EAAIqB,SAASQ,EAAU,GAAI,IAC3BL,OAAqBO,IAAjBF,EAAU,GAAmBG,WAAWH,EAAU,IAAM,EAElE,OAAAF,KADYnB,EAASV,EAAGC,EAAGC,GACZ,CAAEwB,KACnB,CAGA,MAAO,CAAE7B,EAAG,EAAGC,EAAG,EAAGC,EAAG,EAAG2B,EAAG,EAChC,CC/IA,MAAMS,EAAaA,EAAGC,MAAKC,aAAY7C,QAAO8C,eAC5C,MAAMC,EAAeC,EAAO,OACrBC,EAAYC,GAAiBC,GAAS,GAEvCC,EAAeC,EAAaC,IAChC,IAAKP,EAAaQ,QAAS,OAC3B,MAAMC,MAAEA,EAAKC,OAAEA,EAAMC,KAAEA,EAAIC,IAAEA,GAAQZ,EAAaQ,QAAQK,wBACpDC,EAAI9D,EAAMuD,EAAEQ,QAAUJ,EAAM,EAAGF,GAC/BO,EAAIhE,EAAMuD,EAAEU,QAAUL,EAAK,EAAGF,GAKpCX,EAHsBe,EAAIL,EACT,EAAIO,EAAIN,IAGxB,CAACX,IAOEmB,EAAgBZ,EAAY,KAChCH,GAAc,IACb,IAoBH,OAlBAgB,EAAU,KACR,MAAMC,EAAmBb,IACnBL,GACFG,EAAaE,IASjB,OALIL,IACFmB,OAAOC,iBAAiB,YAAaF,GACrCC,OAAOC,iBAAiB,UAAWJ,IAG9B,KACLG,OAAOE,oBAAoB,YAAaH,GACxCC,OAAOE,oBAAoB,UAAWL,KAEvC,CAAChB,EAAYG,EAAca,iBAG5BM,EAAAC,cAAA,MAAA,CACEC,IAAK1B,EACL2B,UAAU,cACVC,MAAO,CACLC,gBAAiB,OAAOhC,iBAE1BiC,YAlCqBvB,IACvBJ,GAAc,GACdE,EAAaE,kBAkCXiB,EAAAC,cAAKE,MAAAA,CAAAA,UAAU,mCACfH,EAAAC,cAAA,MAAA,CAAKE,UAAU,mCACfH,EAAAC,cACEE,MAAAA,CAAAA,UAAU,sBACVC,MAAO,CACLjB,KAAsB,IAAbb,EAAH,IACNc,IAAsB,KAAb,EAAI3D,GAAR,SC1DT8E,EAASA,EAAG9E,QAAOE,MAAK4C,WAAU4B,YAAWC,QAAOI,eACxD,MAAMhC,EAAeC,EAAO,OACrBC,EAAYC,GAAiBC,GAAS,GAEvCC,EAAeC,EAAaC,IAChC,IAAKP,EAAaQ,QAAS,OAC3B,MAAMC,MAAEA,EAAKE,KAAEA,GAASX,EAAaQ,QAAQK,wBACvCC,EAAI9D,EAAMuD,EAAEQ,QAAUJ,EAAM,EAAGF,GAErCV,EADkBe,EAAIL,EAAStD,IAE9B,CAACA,EAAK4C,IAOHmB,EAAgBZ,EAAY,KAChCH,GAAc,IACb,IAoBH,OAlBAgB,EAAU,KACR,MAAMC,EAAmBb,IACnBL,GACFG,EAAaE,IASjB,OALIL,IACFmB,OAAOC,iBAAiB,YAAaF,GACrCC,OAAOC,iBAAiB,UAAWJ,IAG9B,KACLG,OAAOE,oBAAoB,YAAaH,GACxCC,OAAOE,oBAAoB,UAAWL,KAEvC,CAAChB,EAAYG,EAAca,iBAG5BM,EAAAC,qBACEC,IAAK1B,EACL2B,UAAW,gBAAgBA,GAAa,KACxCC,MAAOA,EACPE,YAhCqBvB,IACvBJ,GAAc,GACdE,EAAaE,kBAgCXiB,EAAAC,cAAA,MAAA,CACEE,UAAU,uBACVC,MAAO,CACLjB,KAAU1D,EAAQE,EAAO,IAAnB,OAGT6E,IAKMC,EAAYA,EAAGpC,MAAKE,2BAE7ByB,EAAAC,cAACM,EACC9E,CAAAA,MAAO4C,EACP1C,IAAK,IACL4C,SAAUA,EACV4B,UAAU,eAKHO,EAAcA,EAAGC,QAAOjD,QAAOa,eAC1C,MAAMtC,EAAGC,EAAEA,EAACC,EAAEA,GAAMuB,eACpB,OACEsC,EAAAC,cAACM,EAAM,CACL9E,MAAOkF,EACPhF,IAAK,EACL4C,SAAUA,EACV4B,UAAU,kBACVC,MAAO,CACLQ,WAAY,kCAAkC3E,KAAKC,KAAKC,iBAAiBF,KAAKC,KAAKC,iBC9ErF0E,EAAaA,EAAGxC,MAAKC,aAAY7C,QAAOkF,QAAOpC,eACnD,MAAOuC,EAAMC,GAAWnC,EAAS,QAC1BoC,EAAYC,GAAiBrC,EAAS,CAAE,IACxCsC,EAAcC,GAAmBvC,GAAS,GAC3CwC,EAAc3C,EAAO,MAG3BkB,EAAU,KACR,MAAM0B,EAAsBC,IACtBF,EAAYpC,UAAYoC,EAAYpC,QAAQuC,SAASD,EAAME,SAC7DL,GAAgB,IAIpB,OADAM,SAAS3B,iBAAiB,YAAauB,GAChC,KACLI,SAAS1B,oBAAoB,YAAasB,KAE3C,IAEH,MAAMK,EAAS5C,EAAY,IAAMjD,EAASwC,EAAKC,EAAY7C,GAAQ,CAAC4C,EAAKC,EAAY7C,IAErFkE,EAAU,KACR,MAAM9B,EAAM6D,IACZ,GAAa,QAATZ,EACFG,EAAc,CAAEjE,IAAKH,EAASgB,EAAI5B,EAAG4B,EAAI3B,EAAG2B,EAAI1B,aAC9B,QAAT2E,EACTG,EAAc,CAAEhF,EAAG4B,EAAI5B,EAAGC,EAAG2B,EAAI3B,EAAGC,EAAG0B,EAAI1B,SAClC2E,GAAS,QAATA,EAAgB,CACzB,MAAMa,EH6HI,SAAS1F,EAAGC,EAAGC,GAC7BF,GAAK,IACLC,GAAK,IACLC,GAAK,IAEL,IACIL,EAAGC,EADHJ,EAAMC,KAAKD,IAAIM,EAAGC,EAAGC,GAAIT,EAAME,KAAKF,IAAIO,EAAGC,EAAGC,GACxCyF,GAAKjG,EAAMD,GAAO,EAE5B,GAAIC,IAAQD,EACVI,EAAIC,EAAI,MACH,CACL,IAAIa,EAAIjB,EAAMD,EAEd,OADAK,EAAI6F,EAAI,GAAMhF,GAAK,EAAIjB,EAAMD,GAAOkB,GAAKjB,EAAMD,GACvCC,GACN,KAAKM,EAAGH,GAAKI,EAAIC,GAAKS,GAAKV,EAAIC,EAAI,EAAI,GAAI,MAC3C,KAAKD,EAAGJ,GAAKK,EAAIF,GAAKW,EAAI,EAAG,MAC7B,KAAKT,EAAGL,GAAKG,EAAIC,GAAKU,EAAI,EAE5Bd,GAAK,CACP,CAEA,MAAO,CAAEA,EAAO,IAAJA,EAASC,EAAGA,EAAG6F,EAAGA,EAChC,CGnJkBC,CAAShE,EAAI5B,EAAG4B,EAAI3B,EAAG2B,EAAI1B,GACvC8E,EAAc,CAAEnF,EAAGF,KAAKc,MAAMiF,EAAI7F,GAAIC,EAAGH,KAAKc,MAAc,IAARiF,EAAI5F,GAAU6F,EAAGhG,KAAKc,MAAc,IAARiF,EAAIC,IACtF,GACC,CAACvD,EAAKC,EAAY7C,EAAOqF,EAAMY,IAElC,MAYMI,EAAkBA,CAACC,EAAKC,KAC5B,MAAMC,EAAQnE,EAAQkD,CAAAA,EAAAA,GAAYe,CAACA,GAAMC,IACzCf,EAAcgB,GACd,MAAMhG,EAAIuB,SAASyE,EAAShG,EAAG,IACzBC,EAAIsB,SAASyE,EAAS/F,EAAG,IACzBC,EAAIqB,SAASyE,EAAS9F,EAAG,IAC/B,IAAK+F,MAAMjG,KAAOiG,MAAMhG,KAAOgG,MAAM/F,GAAI,CACtC,MAAM4B,EAAMpB,EAASf,KAAKF,IAAI,IAAKE,KAAKD,IAAI,EAAGM,IAAKL,KAAKF,IAAI,IAAKE,KAAKD,IAAI,EAAGO,IAAKN,KAAKF,IAAI,IAAKE,KAAKD,IAAI,EAAGQ,KAC7GoC,EAAQT,EAAA,CAAA,EAAMC,EAAKJ,CAAAA,EAAGgD,IACzB,GAGIwB,EAAkBA,CAACJ,EAAKC,KAC3B,MAAMC,EAAQnE,EAAA,CAAA,EAAQkD,EAAY,CAAAe,CAACA,GAAMC,IACzCf,EAAcgB,GACd,MAAMnG,EAAI0B,SAASyE,EAASnG,EAAG,IACzBC,EAAIyB,SAASyE,EAASlG,EAAG,IACzB6F,EAAIpE,SAASyE,EAASL,EAAG,IAC/B,IAAKM,MAAMpG,KAAOoG,MAAMnG,KAAOmG,MAAMN,GAAI,CACtC,MAAM/D,WHwHW/B,EAAGC,EAAG6F,GAC7B,IAAI3F,EAAGC,EAAGC,EAEV,GAAU,IAANJ,EACFE,EAAIC,EAAIC,EAAIyF,MACP,CACL,MAAMQ,EAAUA,CAAC7F,EAAGC,EAAGC,KACjBA,EAAI,IAAGA,GAAK,GACZA,EAAI,IAAGA,GAAK,GACZA,EAAI,EAAE,EAAUF,EAAc,GAATC,EAAID,GAASE,EAClCA,EAAI,GAAYD,EAChBC,EAAI,EAAE,EAAUF,GAAKC,EAAID,IAAM,EAAE,EAAIE,GAAK,EACvCF,GAGHC,EAAIoF,EAAI,GAAMA,GAAK,EAAI7F,GAAK6F,EAAI7F,EAAI6F,EAAI7F,EACxCQ,EAAI,EAAIqF,EAAIpF,EAElBP,EAAImG,EAAQ7F,EAAGC,GADfV,GAAK,KACiB,EAAE,GACxBI,EAAIkG,EAAQ7F,EAAGC,EAAGV,GAClBK,EAAIiG,EAAQ7F,EAAGC,EAAGV,EAAI,EAAE,EAC1B,CAEA,MAAO,CACLG,EAAGL,KAAKc,MAAU,IAAJT,GACdC,EAAGN,KAAKc,MAAU,IAAJR,GACdC,EAAGP,KAAKc,MAAU,IAAJP,GAElB,CGpJoBkG,CAASzG,KAAKF,IAAI,IAAKE,KAAKD,IAAI,EAAGG,IAAKF,KAAKF,IAAI,IAAKE,KAAKD,IAAI,EAAGI,IAAM,IAAKH,KAAKF,IAAI,IAAKE,KAAKD,IAAI,EAAGiG,IAAM,KACnH7D,EAAMpB,EAASkB,EAAI5B,EAAG4B,EAAI3B,EAAG2B,EAAI1B,GACvCoC,EAAQT,KAAMC,EAAG,CAAEJ,EAAGgD,IACzB,gBAkBH,OACEX,EAAAC,cAAKE,MAAAA,CAAAA,UAAU,sCACbH,EAAAC,cAAKE,MAAAA,CAAAA,UAAU,gCACZH,EAAAC,qBAAKE,UAAU,gBAAgBD,IAAKkB,EAAakB,QAASA,IAAMnB,GAAiBD,iBAC9ElB,EAAAC,cAAA,OAAA,KAAOa,gBACPd,EAAAC,sBAAME,UAAU,QAAQC,MAAO,CAAEmC,SAAU,OAAQC,WAAY,MAAOC,UAAWvB,EAAe,iBAAmB,eAAgBwB,QAAS,eAAgBC,WAAY,mBAAoB,KAC3LzB,gBACClB,EAAAC,qBAAKE,UAAU,8BACbH,EAAAC,cAAA,MAAA,CAAKE,UAAU,cAAcmC,QAAUvD,IAAQA,EAAE6D,kBAAmB7B,EAAQ,OAAQI,GAAgB,KAAW,oBAC/GnB,EAAAC,cAAKE,MAAAA,CAAAA,UAAU,cAAcmC,QAAUvD,IAAQA,EAAE6D,kBAAmB7B,EAAQ,OAAQI,GAAgB,KAAW,oBAC/GnB,EAAAC,cAAA,MAAA,CAAKE,UAAU,cAAcmC,QAAUvD,IAAQA,EAAE6D,kBAAmB7B,EAAQ,OAAQI,GAAgB,KAAW,SAKrHtB,OAAOgD,yBACN7C,EAAAC,cAAKE,MAAAA,CAAAA,UAAU,kBAAkBmC,QA/BnBQ,UACrB,IAAKjD,OAAOgD,WAAY,OACxB,MAAME,EAAa,IAAIlD,OAAOgD,WAC9B,IACE,MACMhF,EAAMV,SADS4F,EAAWC,QACJC,SAC5B,GAAIpF,EAAK,CACP,MAAME,EAAMpB,EAASkB,EAAI5B,EAAG4B,EAAI3B,EAAG2B,EAAI1B,GACvCoC,EAAQT,EAAMC,CAAAA,EAAAA,GAAKJ,EAAGgD,IACxB,CACF,CAAE,MAAO5B,MAqBwDmE,MAAM,2BAC9DlD,EAAAC,qBAAKkD,QAAQ,YAAYlE,MAAM,KAAKC,OAAO,mBACzCc,EAAAC,cAAMmD,OAAAA,CAAAA,KAAK,eAAexG,EAAE,kRAC5BoD,EAAAC,sBAAMrD,EAAE,wHAAwHwG,KAAK,iCAM9IpD,EAAAC,qBAAKE,UAAU,sBACD,QAATW,gBACEd,EAAAC,uBAAOE,UAAU,cAAc1E,MAAOuF,EAAWhE,KAAO,GAAIuB,SA/E9CQ,IACvB,MAAMiD,EAAMjD,EAAEyC,OAAO/F,MAErB,GADAwF,EAAanD,EAAA,GAAMkD,EAAYhE,CAAAA,IAAKgF,KAChC,iCAAiCqB,KAAKrB,GAAM,CAC9C,MAAMnE,EAAMV,EAAS6E,GACrB,GAAInE,EAAK,CACP,MAAME,EAAMpB,EAASkB,EAAI5B,EAAG4B,EAAI3B,EAAG2B,EAAI1B,GACvCoC,EAAQT,KAAMC,EAAG,CAAEJ,EAAGgD,IACxB,CACF,KAwEgB,QAATG,gBACEd,EAAAC,cAAAD,EAAAsD,SAAA,kBACEtD,EAAAC,uBAAOE,UAAU,cAAcoD,KAAK,SAASC,YAAY,IAAI/H,WAAwByC,IAAjB8C,EAAW/E,EAAkB+E,EAAW/E,EAAI,GAAIsC,SAAWQ,GAAM+C,EAAgB,IAAK/C,EAAEyC,OAAO/F,sBACnKuE,EAAAC,cAAOE,QAAAA,CAAAA,UAAU,cAAcoD,KAAK,SAASC,YAAY,IAAI/H,WAAwByC,IAAjB8C,EAAW9E,EAAkB8E,EAAW9E,EAAI,GAAIqC,SAAWQ,GAAM+C,EAAgB,IAAK/C,EAAEyC,OAAO/F,sBACnKuE,EAAAC,cAAA,QAAA,CAAOE,UAAU,cAAcoD,KAAK,SAASC,YAAY,IAAI/H,WAAwByC,IAAjB8C,EAAW7E,EAAkB6E,EAAW7E,EAAI,GAAIoC,SAAWQ,GAAM+C,EAAgB,IAAK/C,EAAEyC,OAAO/F,UAG9J,QAATqF,gBACEd,EAAAC,cAAAD,EAAAsD,SAAA,kBACEtD,EAAAC,uBAAOE,UAAU,cAAcoD,KAAK,SAASC,YAAY,IAAI/H,WAAwByC,IAAjB8C,EAAWlF,EAAkBkF,EAAWlF,EAAI,GAAIyC,SAAWQ,GAAMoD,EAAgB,IAAKpD,EAAEyC,OAAO/F,sBACnKuE,EAAAC,cAAOE,QAAAA,CAAAA,UAAU,cAAcoD,KAAK,SAASC,YAAY,IAAI/H,WAAwByC,IAAjB8C,EAAWjF,EAAkBiF,EAAWjF,EAAI,GAAIwC,SAAWQ,GAAMoD,EAAgB,IAAKpD,EAAEyC,OAAO/F,sBACnKuE,EAAAC,cAAOE,QAAAA,CAAAA,UAAU,cAAcoD,KAAK,SAASC,YAAY,IAAI/H,WAAwByC,IAAjB8C,EAAWY,EAAkBZ,EAAWY,EAAI,GAAIrD,SAAWQ,GAAMoD,EAAgB,IAAKpD,EAAEyC,OAAO/F,uBAGxKuE,EAAAC,qBAAKE,UAAU,6BACZvE,KAAKc,MAAc,IAARiE,GAAa,QC5H/B8C,EAAcA,EAAGhI,QAAOiI,eAAcnF,eAE1C,MAAOoF,EAAQC,GAAahF,GAAS,IAG9BlB,EAAOmG,GAAYjF,EAAS,IAE1BnB,EADWhC,GAASiI,GAAgB,YAIvClF,EAAeC,EAAO,MAG5BkB,EAAU,UACMzB,IAAVzC,GACFoI,EAASpG,EAAWhC,KAErB,CAACA,IAEJ,MAAMoD,EAAgBiF,IACpB,MAAMC,EAASjG,EAAA,GAAQJ,EAAUoG,GAGjC,GAFAD,EAASE,GAELxF,EAAU,CACZ,MAAMV,EAAMhC,EAASkI,EAAUjI,EAAGiI,EAAUhI,EAAGgI,EAAU/H,GACnDgB,EAAMH,EAASgB,EAAI5B,EAAG4B,EAAI3B,EAAG2B,EAAI1B,GAIvCoC,EAASvB,EAAGc,EAAA,CAAA,EAAOD,EAAG,CAAEF,EAAGoG,EAAUpG,IACvC,GAIFgC,EAAU,KACR,MAAM0B,EAAsBC,IACtB9C,EAAaQ,UAAYR,EAAaQ,QAAQuC,SAASD,EAAME,SAC/DoC,GAAU,IAQd,OAJID,GACFlC,SAAS3B,iBAAiB,YAAauB,GAGlC,KACLI,SAAS1B,oBAAoB,YAAasB,KAE3C,CAACsC,IAEJ,MAAM9F,EAAMhC,EAAS6B,EAAM5B,EAAG4B,EAAM3B,EAAG2B,EAAM1B,gBAG7C,OACEgE,EAAAC,cAAKE,MAAAA,CAAAA,UAAU,yBAAyBD,IAAK1B,EAAc4B,MAAO,CAAE4D,SAAU,WAAYtB,QAAS,8BACjG1C,EAAAC,cAAA,MAAA,CACEE,UAAU,uBACVmC,QAASA,IAAMsB,GAAWD,iBAE1B3D,EAAAC,cACEE,MAAAA,CAAAA,UAAU,cACVC,MAAO,CAAEC,gBAVI,QAAQxC,EAAI5B,MAAM4B,EAAI3B,MAAM2B,EAAI1B,MAAMuB,EAAMC,SAc5DgG,gBACC3D,EAAAC,cAAA,MAAA,CACEE,UAAU,qBACVC,MAAO,CACL4D,SAAU,WACV5E,IAAK,OACLD,KAAM,EACN8E,OAAQ,IACRC,UAAW,iBAGblE,EAAAC,cAAC7B,EAAU,CACTC,IAAKX,EAAM5B,EACXwC,WAAYZ,EAAM3B,EAClBN,MAAOiC,EAAM1B,EACbuC,SAAUA,CAACxC,EAAGC,IAAM6C,EAAa,CAAE9C,IAAGC,qBAExCgE,EAAAC,cAACQ,EAAS,CACRpC,IAAKX,EAAM5B,EACXyC,SAAWzC,GAAM+C,EAAa,CAAE/C,qBAElCkE,EAAAC,cAACS,EAAW,CACVC,MAAOjD,EAAMC,EACbD,MAAOG,EACPU,SAAWZ,GAAMkB,EAAa,CAAElB,qBAElCqC,EAAAC,cAACY,EACCxC,CAAAA,IAAKX,EAAM5B,EACXwC,WAAYZ,EAAM3B,EAClBN,MAAOiC,EAAM1B,EACb2E,MAAOjD,EAAMC,EACbY,SAAW4F,GAAWtF,EAAasF"}

package/dist/index.module.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useRef as t,useState as n,useCallback as a,useEffect as r}from"react";function o(e,t,n){return Math.min(Math.max(e,t),n)}function l(e,t,n){let a,r,o;e=(e%360+360)%360;let l=Math.floor(e/60),s=e/60-l,c=n(1-t),i=n(1-st),u=n(1-(1-s)t);switch(l%6){case 0:a=n,r=u,o=c;break;case 1:a=i,r=n,o=c;break;case 2:a=c,r=n,o=u;break;case 3:a=c,r=i,o=n;break;case 4:a=u,r=c,o=n;break;case 5:a=n,r=c,o=i;break;default:a=0,r=0,o=0}return{r:Math.round(255a),g:Math.round(255r),b:Math.round(255o)}}function s(e,t,n){e/=255,t/=255,n/=255;let a,r,o=Math.max(e,t,n),l=Math.min(e,t,n),s=o,c=o-l;if(r=0===o?0:c/o,o===l)a=0;else{switch(o){case e:a=(t-n)/c+(t<n?6:0);break;case t:a=(n-e)/c+2;break;case n:a=(e-t)/c+4;break;default:a=0}a/=6}return{h:360a,s:r,v:s}}function c(e,t,n){const a=e=>{const t=Math.round(e).toString(16);return 1===t.length?"0"+t:t};return"#"+a(e)+a(t)+a(n)}function i(e){e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(e,t,n,a){return t+t+n+n+a+a});const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function u(e){if(!e)return{h:0,s:1,v:1,a:1};if(e.startsWith("#")){const t=i(e);if(t)return{...s(t.r,t.g,t.b),a:1}}const t=e.match(/^rgba?$(\d+),\s(\d+),\s(\d+)(?:,\s([\d.]+))?$$/);if(t){const e=parseInt(t[1],10),n=parseInt(t[2],10),a=parseInt(t[3],10),r=void 0!==t[4]?parseFloat(t[4]):1;return{...s(e,n,a),a:r}}return{h:0,s:1,v:1,a:1}}const m=({hue:l,saturation:s,value:c,onChange:i})=>{const u=t(null),[m,d]=n(!1),h=a(e=>{if(!u.current)return;const{width:t,height:n,left:a,top:r}=u.current.getBoundingClientRect(),l=o(e.clientX-a,0,t),s=o(e.clientY-r,0,n);i(l/t,1-s/n)},[i]),p=a(()=>{d(!1)},[]);return r(()=>{const e=e=>{m&&h(e)};return m&&(window.addEventListener("mousemove",e),window.addEventListener("mouseup",p)),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",p)}},[m,h,p]),/#__PURE__/e.createElement("div",{ref:u,className:"color-board",style:{backgroundColor:`hsl(${l}, 100%, 50%)`},onMouseDown:e=>{d(!0),h(e)}},/#__PURE__/e.createElement("div",{className:"color-board-white"}),/#__PURE__/e.createElement("div",{className:"color-board-black"}),/#__PURE__/e.createElement("div",{className:"color-board-handler",style:{left:100s+"%",top:100(1-c)+"%"}}))},d=({value:l,max:s,onChange:c,className:i,style:u,children:m})=>{const d=t(null),[h,p]=n(!1),v=a(e=>{if(!d.current)return;const{width:t,left:n}=d.current.getBoundingClientRect(),a=o(e.clientX-n,0,t);c(a/ts)},[s,c]),g=a(()=>{p(!1)},[]);return r(()=>{const e=e=>{h&&v(e)};return h&&(window.addEventListener("mousemove",e),window.addEventListener("mouseup",g)),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",g)}},[h,v,g]),/#__PURE__/e.createElement("div",{ref:d,className:`color-slider ${i\|\|""}`,style:u,onMouseDown:e=>{p(!0),v(e)}},/#__PURE__/e.createElement("div",{className:"color-slider-handler",style:{left:l/s100+"%"}}),m)},h=({hue:t,onChange:n})=>/#__PURE__/e.createElement(d,{value:t,max:360,onChange:n,className:"hue-slider"}),p=({alpha:t,color:n,onChange:a})=>{const{r:r,g:o,b:l}=n;/#__PURE__/return e.createElement(d,{value:t,max:1,onChange:a,className:"alpha-slider-bg",style:{background:`linear-gradient(to right, rgba(${r},${o},${l},0) 0%, rgba(${r},${o},${l},1) 100%)`}})},v=({hue:o,saturation:u,value:m,alpha:d,onChange:h})=>{const[p,v]=n("HEX"),[g,f]=n({}),[E,b]=n(!1),N=t(null);r(()=>{const e=e=>{N.current&&!N.current.contains(e.target)&&b(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const w=a(()=>l(o,u,m),[o,u,m]);r(()=>{const e=w();if("HEX"===p)f({hex:c(e.r,e.g,e.b)});else if("RGB"===p)f({r:e.r,g:e.g,b:e.b});else if("HSL"===p){const t=function(e,t,n){e/=255,t/=255,n/=255;let a,r,o=Math.max(e,t,n),l=Math.min(e,t,n),s=(o+l)/2;if(o===l)a=r=0;else{let c=o-l;switch(r=s>.5?c/(2-o-l):c/(o+l),o){case e:a=(t-n)/c+(t<n?6:0);break;case t:a=(n-e)/c+2;break;case n:a=(e-t)/c+4}a/=6}return{h:360a,s:r,l:s}}(e.r,e.g,e.b);f({h:Math.round(t.h),s:Math.round(100t.s),l:Math.round(100t.l)})}},[o,u,m,p,w]);const M=(e,t)=>{const n={...g,[e]:t};f(n);const a=parseInt(n.r,10),r=parseInt(n.g,10),o=parseInt(n.b,10);if(!isNaN(a)&&!isNaN(r)&&!isNaN(o)){const e=s(Math.min(255,Math.max(0,a)),Math.min(255,Math.max(0,r)),Math.min(255,Math.max(0,o)));h({...e,a:d})}},C=(e,t)=>{const n={...g,[e]:t};f(n);const a=parseInt(n.h,10),r=parseInt(n.s,10),o=parseInt(n.l,10);if(!isNaN(a)&&!isNaN(r)&&!isNaN(o)){const e=function(e,t,n){let a,r,o;if(0===t)a=r=o=n;else{const l=(e,t,n)=>(n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6(t-e)n:n<.5?t:n<2/3?e+(t-e)(2/3-n)6:e),s=n<.5?n(1+t):n+t-nt,c=2n-s;a=l(c,s,(e/=360)+1/3),r=l(c,s,e),o=l(c,s,e-1/3)}return{r:Math.round(255a),g:Math.round(255r),b:Math.round(255o)}}(Math.min(360,Math.max(0,a)),Math.min(100,Math.max(0,r))/100,Math.min(100,Math.max(0,o))/100),t=s(e.r,e.g,e.b);h({...t,a:d})}};/#__PURE__/return e.createElement("div",{className:"color-input-container"},/#__PURE__/e.createElement("div",{className:"color-input-row"},/#__PURE__/e.createElement("div",{className:"mode-selector",ref:N,onClick:()=>b(!E)},/#__PURE__/e.createElement("span",null,p),/#__PURE__/e.createElement("span",{className:"arrow",style:{fontSize:"10px",marginLeft:"4px",transform:E?"rotate(180deg)":"rotate(0deg)",display:"inline-block",transition:"transform 0.2s"}},"▼"),E&&/#__PURE__/e.createElement("div",{className:"mode-dropdown"},/#__PURE__/e.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),v("HEX"),b(!1)}},"HEX"),/#__PURE__/e.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),v("RGB"),b(!1)}},"RGB"),/#__PURE__/e.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),v("HSL"),b(!1)}},"HSL"))),window.EyeDropper&&/#__PURE__/e.createElement("div",{className:"eyedropper-icon",onClick:function(){try{if(!window.EyeDropper)return Promise.resolve();const e=new window.EyeDropper,t=function(){try{var t=Promise.resolve(e.open()).then(function(e){const t=i(e.sRGBHex);if(t){const e=s(t.r,t.g,t.b);h({...e,a:d})}})}catch(e){return}return t&&t.then?t.then(void 0,function(){}):t}();return Promise.resolve(t&&t.then?t.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},title:"Pick Color"},/#__PURE__/e.createElement("svg",{viewBox:"0 0 24 24",width:"16",height:"16"},/#__PURE__/e.createElement("path",{fill:"currentColor",d:"M17.5,1.5c-0.8,0-1.5,0.3-2.1,0.9l-8,8c-0.6,0.6-0.9,1.3-0.9,2.1v2.5l-4,4l1.5,1.5l4-4h2.5c0.8,0,1.5-0.3,2.1-0.9l8-8c0.6-0.6,0.9-1.3,0.9-2.1s-0.3-1.5-0.9-2.1S18.3,1.5,17.5,1.5z M17.5,10l-8-8l8,8z M6.5,12.5v2.5h-2.5L2,17l2,2l2-2v-2.5h2.5l8-8L10,5L6.5,8.5V12.5z"}),/#__PURE__/e.createElement("path",{d:"M19.3 8.9L15.1 4.7 17.5 2.3c.4-.4 1-.4 1.4 0l2.7 2.7c.4.4.4 1 0 1.4L19.3 8.9zM13.7 6.1L4 15.8V20h4.2l9.7-9.7-4.2-4.2z",fill:"currentColor"})))),/#__PURE__/e.createElement("div",{className:"color-input-fields"},"HEX"===p&&/#__PURE__/e.createElement("input",{className:"color-input",value:g.hex\|\|"",onChange:e=>{const t=e.target.value;if(f({...g,hex:t}),/^#?([0-9A-F]{3}\|[0-9A-F]{6})$/i.test(t)){const e=i(t);if(e){const t=s(e.r,e.g,e.b);h({...t,a:d})}}}}),"RGB"===p&&/#__PURE__/e.createElement(e.Fragment,null,/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"R",value:void 0!==g.r?g.r:"",onChange:e=>M("r",e.target.value)}),/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"G",value:void 0!==g.g?g.g:"",onChange:e=>M("g",e.target.value)}),/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"B",value:void 0!==g.b?g.b:"",onChange:e=>M("b",e.target.value)})),"HSL"===p&&/#__PURE__/e.createElement(e.Fragment,null,/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"H",value:void 0!==g.h?g.h:"",onChange:e=>C("h",e.target.value)}),/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"S",value:void 0!==g.s?g.s:"",onChange:e=>C("s",e.target.value)}),/#__PURE__/e.createElement("input",{className:"color-input",type:"number",placeholder:"L",value:void 0!==g.l?g.l:"",onChange:e=>C("l",e.target.value)})),/#__PURE__/e.createElement("div",{className:"color-input alpha-display"},Math.round(100d),"%")))},g=({value:a,defaultValue:o,onChange:s})=>{const[i,d]=n(!1),[g,f]=n(()=>u(a\|\|o\|\|"#1677ff")),E=t(null);r(()=>{void 0!==a&&f(u(a))},[a]);const b=e=>{const t={...g,...e};if(f(t),s){const e=l(t.h,t.s,t.v),n=c(e.r,e.g,e.b);s(n,{...e,a:t.a})}};r(()=>{const e=e=>{E.current&&!E.current.contains(e.target)&&d(!1)};return i&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[i]);const N=l(g.h,g.s,g.v);/#__PURE__/return e.createElement("div",{className:"color-picker-container",ref:E,style:{position:"relative",display:"inline-block"}},/#__PURE__/e.createElement("div",{className:"color-picker-trigger",onClick:()=>d(!i)},/#__PURE__/e.createElement("div",{className:"color-block",style:{backgroundColor:`rgba(${N.r}, ${N.g}, ${N.b}, ${g.a})`}})),i&&/#__PURE__/e.createElement("div",{className:"color-picker-panel",style:{position:"absolute",top:"100%",left:0,zIndex:1e3,marginTop:4}},/#__PURE__/e.createElement(m,{hue:g.h,saturation:g.s,value:g.v,onChange:(e,t)=>b({s:e,v:t})}),/#__PURE__/e.createElement(h,{hue:g.h,onChange:e=>b({h:e})}),/#__PURE__/e.createElement(p,{alpha:g.a,color:N,onChange:e=>b({a:e})}),/#__PURE__/e.createElement(v,{hue:g.h,saturation:g.s,value:g.v,alpha:g.a,onChange:e=>b(e)})))};export{g as default};
2	+ //# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.module.js","sources":["../src/lib/utils/color.js","../src/lib/ColorBoard.js","../src/lib/Sliders.js","../src/lib/ColorInput.js","../src/lib/index.js"],"sourcesContent":["\n/**\n * Clamps a value between min and max\n * @param {number} value \n * @param {number} min \n * @param {number} max \n */\nexport function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n}\n\n/**\n * Converts HSV to RGB\n * @param {number} h Hue 0-360\n * @param {number} s Saturation 0-1\n * @param {number} v Value 0-1\n * @returns {{r: number, g: number, b: number}}\n */\nexport function hsvToRgb(h, s, v) {\n h = ((h % 360) + 360) % 360; // Normalize hue\n let r, g, b;\n let i = Math.floor(h / 60);\n let f = h / 60 - i;\n let p = v * (1 - s);\n let q = v * (1 - f * s);\n let t = v * (1 - (1 - f) * s);\n\n switch (i % 6) {\n case 0: r = v; g = t; b = p; break;\n case 1: r = q; g = v; b = p; break;\n case 2: r = p; g = v; b = t; break;\n case 3: r = p; g = q; b = v; break;\n case 4: r = t; g = p; b = v; break;\n case 5: r = v; g = p; b = q; break;\n default: r = 0; g = 0; b = 0;\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n}\n\n/**\n * Converts RGB to HSV\n * @param {number} r Red 0-255\n * @param {number} g Green 0-255\n * @param {number} b Blue 0-255\n * @returns {{h: number, s: number, v: number}}\n */\nexport function rgbToHsv(r, g, b) {\n r /= 255;\n g /= 255;\n b /= 255;\n\n let max = Math.max(r, g, b);\n let min = Math.min(r, g, b);\n let h, s, v = max;\n\n let d = max - min;\n s = max === 0 ? 0 : d / max;\n\n if (max === min) {\n h = 0; // achromatic\n } else {\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n default: h = 0;\n }\n h /= 6;\n }\n\n return {\n h: h * 360,\n s: s,\n v: v\n };\n}\n\n/**\n * Converts RGB to Hex string\n * @param {number} r \n * @param {number} g \n * @param {number} b \n * @returns {string} Hex string (e.g., \"#ff0000\")\n */\nexport function rgbToHex(r, g, b) {\n const toHex = (c) => {\n const hex = Math.round(c).toString(16);\n return hex.length === 1 ? \"0\" + hex : hex;\n };\n return \"#\" + toHex(r) + toHex(g) + toHex(b);\n}\n\n/**\n * Converts Hex string to RGB\n * @param {string} hex \n * @returns {{r: number, g: number, b: number} | null}\n */\nexport function hexToRgb(hex) {\n // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function(m, r, g, b) {\n return r + r + g + g + b + b;\n });\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n}\n\n/**\n * Parses a color string to HSV\n * @param {string} color \n * @returns {{h: number, s: number, v: number, a: number}}\n */\nexport function parseColor(color) {\n if (!color) return { h: 0, s: 1, v: 1, a: 1 };\n\n // Hex\n if (color.startsWith('#')) {\n const rgb = hexToRgb(color);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n return { ...hsv, a: 1 };\n }\n }\n \n // RGB/RGBA\n const rgbaMatch = color.match(/^rgba?\$(\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*([\\d.]+))?\$$/);\n if (rgbaMatch) {\n const r = parseInt(rgbaMatch[1], 10);\n const g = parseInt(rgbaMatch[2], 10);\n const b = parseInt(rgbaMatch[3], 10);\n const a = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1;\n const hsv = rgbToHsv(r, g, b);\n return { ...hsv, a };\n }\n\n // Default fallback\n return { h: 0, s: 1, v: 1, a: 1 };\n}\n\n/**\n * Converts RGB to HSL\n * @param {number} r Red 0-255\n * @param {number} g Green 0-255\n * @param {number} b Blue 0-255\n * @returns {{h: number, s: number, l: number}}\n */\nexport function rgbToHsl(r, g, b) {\n r /= 255;\n g /= 255;\n b /= 255;\n\n let max = Math.max(r, g, b), min = Math.min(r, g, b);\n let h, s, l = (max + min) / 2;\n\n if (max === min) {\n h = s = 0; // achromatic\n } else {\n let d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n }\n h /= 6;\n }\n\n return { h: h * 360, s: s, l: l };\n}\n\n/**\n * Converts HSL to RGB\n * @param {number} h Hue 0-360\n * @param {number} s Saturation 0-1\n * @param {number} l Lightness 0-1\n * @returns {{r: number, g: number, b: number}}\n */\nexport function hslToRgb(h, s, l) {\n let r, g, b;\n\n if (s === 0) {\n r = g = b = l; // achromatic\n } else {\n const hue2rgb = (p, q, t) => {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1/6) return p + (q - p) * 6 * t;\n if (t < 1/2) return q;\n if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;\n return p;\n };\n\n const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n const p = 2 * l - q;\n h /= 360;\n r = hue2rgb(p, q, h + 1/3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1/3);\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n}\n","\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport { clamp } from './utils/color';\n\nconst ColorBoard = ({ hue, saturation, value, onChange }) => {\n const containerRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const handleChange = useCallback((e) => {\n if (!containerRef.current) return;\n const { width, height, left, top } = containerRef.current.getBoundingClientRect();\n const x = clamp(e.clientX - left, 0, width);\n const y = clamp(e.clientY - top, 0, height);\n\n const newSaturation = x / width;\n const newValue = 1 - y / height;\n\n onChange(newSaturation, newValue);\n }, [onChange]);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n handleChange(e);\n };\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n useEffect(() => {\n const handleMouseMove = (e) => {\n if (isDragging) {\n handleChange(e);\n }\n };\n\n if (isDragging) {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n }\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isDragging, handleChange, handleMouseUp]);\n\n return (\n <div\n ref={containerRef}\n className=\"color-board\"\n style={{\n backgroundColor: `hsl(${hue}, 100%, 50%)`,\n }}\n onMouseDown={handleMouseDown}\n >\n <div className=\"color-board-white\" />\n <div className=\"color-board-black\" />\n <div\n className=\"color-board-handler\"\n style={{\n left: `${saturation * 100}%`,\n top: `${(1 - value) * 100}%`,\n }}\n />\n </div>\n );\n};\n\nexport default ColorBoard;\n","\nimport React, { useRef, useState, useEffect, useCallback } from 'react';\nimport { clamp } from './utils/color';\n\nconst Slider = ({ value, max, onChange, className, style, children }) => {\n const containerRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const handleChange = useCallback((e) => {\n if (!containerRef.current) return;\n const { width, left } = containerRef.current.getBoundingClientRect();\n const x = clamp(e.clientX - left, 0, width);\n const newValue = (x / width) * max;\n onChange(newValue);\n }, [max, onChange]);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n handleChange(e);\n };\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n useEffect(() => {\n const handleMouseMove = (e) => {\n if (isDragging) {\n handleChange(e);\n }\n };\n\n if (isDragging) {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n }\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isDragging, handleChange, handleMouseUp]);\n\n return (\n <div\n ref={containerRef}\n className={`color-slider ${className || ''}`}\n style={style}\n onMouseDown={handleMouseDown}\n >\n <div\n className=\"color-slider-handler\"\n style={{\n left: `${(value / max) * 100}%`,\n }}\n />\n {children}\n </div>\n );\n};\n\nexport const HueSlider = ({ hue, onChange }) => {\n return (\n <Slider\n value={hue}\n max={360}\n onChange={onChange}\n className=\"hue-slider\"\n />\n );\n};\n\nexport const AlphaSlider = ({ alpha, color, onChange }) => {\n const { r, g, b } = color;\n return (\n <Slider\n value={alpha}\n max={1}\n onChange={onChange}\n className=\"alpha-slider-bg\"\n style={{\n background: `linear-gradient(to right, rgba(${r},${g},${b},0) 0%, rgba(${r},${g},${b},1) 100%)`\n }}\n />\n );\n};\n","import React, { useState, useEffect, useCallback, useRef } from 'react';\nimport { rgbToHex, hexToRgb, hsvToRgb, rgbToHsv, rgbToHsl, hslToRgb } from './utils/color';\n\nconst ColorInput = ({ hue, saturation, value, alpha, onChange }) => {\n const [mode, setMode] = useState('HEX');\n const [localValue, setLocalValue] = useState({});\n const [showDropdown, setShowDropdown] = useState(false);\n const dropdownRef = useRef(null);\n\n // Close dropdown when clicking outside\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setShowDropdown(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const getRgb = useCallback(() => hsvToRgb(hue, saturation, value), [hue, saturation, value]);\n\n useEffect(() => {\n const rgb = getRgb();\n if (mode === 'HEX') {\n setLocalValue({ hex: rgbToHex(rgb.r, rgb.g, rgb.b) });\n } else if (mode === 'RGB') {\n setLocalValue({ r: rgb.r, g: rgb.g, b: rgb.b });\n } else if (mode === 'HSL') {\n const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);\n setLocalValue({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });\n }\n }, [hue, saturation, value, mode, getRgb]);\n\n const handleHexChange = (e) => {\n const val = e.target.value;\n setLocalValue({ ...localValue, hex: val });\n if (/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(val)) {\n const rgb = hexToRgb(val);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n }\n };\n\n const handleRgbChange = (key, val) => {\n const newValue = { ...localValue, [key]: val };\n setLocalValue(newValue);\n const r = parseInt(newValue.r, 10);\n const g = parseInt(newValue.g, 10);\n const b = parseInt(newValue.b, 10);\n if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {\n const hsv = rgbToHsv(Math.min(255, Math.max(0, r)), Math.min(255, Math.max(0, g)), Math.min(255, Math.max(0, b)));\n onChange({ ...hsv, a: alpha });\n }\n };\n\n const handleHslChange = (key, val) => {\n const newValue = { ...localValue, [key]: val };\n setLocalValue(newValue);\n const h = parseInt(newValue.h, 10);\n const s = parseInt(newValue.s, 10);\n const l = parseInt(newValue.l, 10);\n if (!isNaN(h) && !isNaN(s) && !isNaN(l)) {\n const rgb = hslToRgb(Math.min(360, Math.max(0, h)), Math.min(100, Math.max(0, s)) / 100, Math.min(100, Math.max(0, l)) / 100);\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n };\n\n const openEyeDropper = async () => {\n if (!window.EyeDropper) return;\n const eyeDropper = new window.EyeDropper();\n try {\n const result = await eyeDropper.open();\n const rgb = hexToRgb(result.sRGBHex);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n } catch (e) {\n // User canceled\n }\n };\n\n return (\n <div className=\"color-input-container\">\n <div className=\"color-input-row\">\n <div className=\"mode-selector\" ref={dropdownRef} onClick={() => setShowDropdown(!showDropdown)}>\n <span>{mode}</span>\n <span className=\"arrow\" style={{ fontSize: '10px', marginLeft: '4px', transform: showDropdown ? 'rotate(180deg)' : 'rotate(0deg)', display: 'inline-block', transition: 'transform 0.2s' }}>▼</span>\n {showDropdown && (\n <div className=\"mode-dropdown\">\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('HEX'); setShowDropdown(false); }}>HEX</div>\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('RGB'); setShowDropdown(false); }}>RGB</div>\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('HSL'); setShowDropdown(false); }}>HSL</div>\n </div>\n )}\n </div>\n \n {window.EyeDropper && (\n <div className=\"eyedropper-icon\" onClick={openEyeDropper} title=\"Pick Color\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n <path fill=\"currentColor\" d=\"M17.5,1.5c-0.8,0-1.5,0.3-2.1,0.9l-8,8c-0.6,0.6-0.9,1.3-0.9,2.1v2.5l-4,4l1.5,1.5l4-4h2.5c0.8,0,1.5-0.3,2.1-0.9l8-8c0.6-0.6,0.9-1.3,0.9-2.1s-0.3-1.5-0.9-2.1S18.3,1.5,17.5,1.5z M17.5,10l-8-8l8,8z M6.5,12.5v2.5h-2.5L2,17l2,2l2-2v-2.5h2.5l8-8L10,5L6.5,8.5V12.5z\"/>\n <path d=\"M19.3 8.9L15.1 4.7 17.5 2.3c.4-.4 1-.4 1.4 0l2.7 2.7c.4.4.4 1 0 1.4L19.3 8.9zM13.7 6.1L4 15.8V20h4.2l9.7-9.7-4.2-4.2z\" fill=\"currentColor\"/>\n </svg>\n </div>\n )}\n </div>\n\n <div className=\"color-input-fields\">\n {mode === 'HEX' && (\n <input className=\"color-input\" value={localValue.hex || ''} onChange={handleHexChange} />\n )}\n {mode === 'RGB' && (\n <>\n <input className=\"color-input\" type=\"number\" placeholder=\"R\" value={localValue.r !== undefined ? localValue.r : ''} onChange={(e) => handleRgbChange('r', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"G\" value={localValue.g !== undefined ? localValue.g : ''} onChange={(e) => handleRgbChange('g', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"B\" value={localValue.b !== undefined ? localValue.b : ''} onChange={(e) => handleRgbChange('b', e.target.value)} />\n </>\n )}\n {mode === 'HSL' && (\n <>\n <input className=\"color-input\" type=\"number\" placeholder=\"H\" value={localValue.h !== undefined ? localValue.h : ''} onChange={(e) => handleHslChange('h', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"S\" value={localValue.s !== undefined ? localValue.s : ''} onChange={(e) => handleHslChange('s', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"L\" value={localValue.l !== undefined ? localValue.l : ''} onChange={(e) => handleHslChange('l', e.target.value)} />\n </>\n )}\n <div className=\"color-input alpha-display\">\n {Math.round(alpha * 100)}%\n </div>\n </div>\n </div>\n );\n};\n\nexport default ColorInput;\n","\nimport React, { useState, useRef, useEffect } from 'react';\nimport ColorBoard from './ColorBoard';\nimport { HueSlider, AlphaSlider } from './Sliders';\nimport ColorInput from './ColorInput';\nimport { hsvToRgb, rgbToHex, parseColor } from './utils/color';\nimport './index.css';\n\nconst ColorPicker = ({ value, defaultValue, onChange }) => {\n // Initialize state\n const [isOpen, setIsOpen] = useState(false);\n \n // Internal state for color components\n const [color, setColor] = useState(() => {\n const initColor = value || defaultValue || '#1677ff';\n return parseColor(initColor);\n });\n\n const containerRef = useRef(null);\n\n // Sync with prop value if controlled\n useEffect(() => {\n if (value !== undefined) {\n setColor(parseColor(value));\n }\n }, [value]);\n\n const handleChange = (newColor) => {\n const nextColor = { ...color, ...newColor };\n setColor(nextColor);\n \n if (onChange) {\n const rgb = hsvToRgb(nextColor.h, nextColor.s, nextColor.v);\n const hex = rgbToHex(rgb.r, rgb.g, rgb.b);\n // Return a rich object or just hex string? \n // AntD returns an object, but simple string is often easier. \n // Let's return the hex string and the object as second arg just in case.\n onChange(hex, { ...rgb, a: nextColor.a });\n }\n };\n\n // Click outside to close\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (containerRef.current && !containerRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n \n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isOpen]);\n\n const rgb = hsvToRgb(color.h, color.s, color.v);\n const displayColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${color.a})`;\n\n return (\n <div className=\"color-picker-container\" ref={containerRef} style={{ position: 'relative', display: 'inline-block' }}>\n <div \n className=\"color-picker-trigger\"\n onClick={() => setIsOpen(!isOpen)}\n >\n <div \n className=\"color-block\" \n style={{ backgroundColor: displayColor }} \n />\n </div>\n\n {isOpen && (\n <div \n className=\"color-picker-panel\" \n style={{ \n position: 'absolute', \n top: '100%', \n left: 0, \n zIndex: 1000, \n marginTop: 4 \n }}\n >\n <ColorBoard\n hue={color.h}\n saturation={color.s}\n value={color.v}\n onChange={(s, v) => handleChange({ s, v })}\n />\n <HueSlider\n hue={color.h}\n onChange={(h) => handleChange({ h })}\n />\n <AlphaSlider\n alpha={color.a}\n color={rgb}\n onChange={(a) => handleChange({ a })}\n />\n <ColorInput\n hue={color.h}\n saturation={color.s}\n value={color.v}\n alpha={color.a}\n onChange={(newHsv) => handleChange(newHsv)}\n />\n </div>\n )}\n </div>\n );\n};\n\nexport default ColorPicker;\n"],"names":["clamp","value","min","max","Math","hsvToRgb","h","s","v","r","g","b","i","floor","f","p","q","t","round","rgbToHsv","d","rgbToHex","toHex","c","hex","toString","length","hexToRgb","replace","m","result","exec","parseInt","parseColor","color","a","startsWith","rgb","rgbaMatch","match","undefined","parseFloat","ColorBoard","hue","saturation","onChange","containerRef","useRef","isDragging","setIsDragging","useState","handleChange","useCallback","e","current","width","height","left","top","getBoundingClientRect","x","clientX","y","clientY","handleMouseUp","useEffect","handleMouseMove","window","addEventListener","removeEventListener","React","createElement","ref","className","style","backgroundColor","onMouseDown","Slider","children","HueSlider","AlphaSlider","alpha","background","ColorInput","mode","setMode","localValue","setLocalValue","showDropdown","setShowDropdown","dropdownRef","handleClickOutside","event","contains","target","document","getRgb","hsl","l","rgbToHsl","handleRgbChange","key","val","newValue","isNaN","hsv","handleHslChange","hue2rgb","hslToRgb","onClick","fontSize","marginLeft","transform","display","transition","stopPropagation","EyeDropper","Promise","resolve","eyeDropper","_temp","open","then","sRGBHex","_catch","reject","title","viewBox","fill","test","Fragment","type","placeholder","ColorPicker","defaultValue","isOpen","setIsOpen","setColor","newColor","nextColor","position","zIndex","marginTop","newHsv"],"mappings":"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"}

package/dist/index.umd.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e\|\|self).gdpColorPicker=t(e.React)}(this,function(e){function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=/#__PURE__/t(e);function n(e,t,a){return Math.min(Math.max(e,t),a)}function r(e,t,a){let n,r,l;e=(e%360+360)%360;let o=Math.floor(e/60),s=e/60-o,c=a(1-t),u=a(1-st),i=a(1-(1-s)t);switch(o%6){case 0:n=a,r=i,l=c;break;case 1:n=u,r=a,l=c;break;case 2:n=c,r=a,l=i;break;case 3:n=c,r=u,l=a;break;case 4:n=i,r=c,l=a;break;case 5:n=a,r=c,l=u;break;default:n=0,r=0,l=0}return{r:Math.round(255n),g:Math.round(255r),b:Math.round(255l)}}function l(e,t,a){e/=255,t/=255,a/=255;let n,r,l=Math.max(e,t,a),o=Math.min(e,t,a),s=l,c=l-o;if(r=0===l?0:c/l,l===o)n=0;else{switch(l){case e:n=(t-a)/c+(t<a?6:0);break;case t:n=(a-e)/c+2;break;case a:n=(e-t)/c+4;break;default:n=0}n/=6}return{h:360n,s:r,v:s}}function o(e,t,a){const n=e=>{const t=Math.round(e).toString(16);return 1===t.length?"0"+t:t};return"#"+n(e)+n(t)+n(a)}function s(e){e=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(e,t,a,n){return t+t+a+a+n+n});const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function c(e){if(!e)return{h:0,s:1,v:1,a:1};if(e.startsWith("#")){const t=s(e);if(t)return{...l(t.r,t.g,t.b),a:1}}const t=e.match(/^rgba?$(\d+),\s(\d+),\s(\d+)(?:,\s([\d.]+))?$$/);if(t){const e=parseInt(t[1],10),a=parseInt(t[2],10),n=parseInt(t[3],10),r=void 0!==t[4]?parseFloat(t[4]):1;return{...l(e,a,n),a:r}}return{h:0,s:1,v:1,a:1}}const u=({hue:t,saturation:r,value:l,onChange:o})=>{const s=e.useRef(null),[c,u]=e.useState(!1),i=e.useCallback(e=>{if(!s.current)return;const{width:t,height:a,left:r,top:l}=s.current.getBoundingClientRect(),c=n(e.clientX-r,0,t),u=n(e.clientY-l,0,a);o(c/t,1-u/a)},[o]),d=e.useCallback(()=>{u(!1)},[]);return e.useEffect(()=>{const e=e=>{c&&i(e)};return c&&(window.addEventListener("mousemove",e),window.addEventListener("mouseup",d)),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",d)}},[c,i,d]),/#__PURE__/a.default.createElement("div",{ref:s,className:"color-board",style:{backgroundColor:`hsl(${t}, 100%, 50%)`},onMouseDown:e=>{u(!0),i(e)}},/#__PURE__/a.default.createElement("div",{className:"color-board-white"}),/#__PURE__/a.default.createElement("div",{className:"color-board-black"}),/#__PURE__/a.default.createElement("div",{className:"color-board-handler",style:{left:100r+"%",top:100(1-l)+"%"}}))},i=({value:t,max:r,onChange:l,className:o,style:s,children:c})=>{const u=e.useRef(null),[i,d]=e.useState(!1),m=e.useCallback(e=>{if(!u.current)return;const{width:t,left:a}=u.current.getBoundingClientRect(),o=n(e.clientX-a,0,t);l(o/tr)},[r,l]),f=e.useCallback(()=>{d(!1)},[]);return e.useEffect(()=>{const e=e=>{i&&m(e)};return i&&(window.addEventListener("mousemove",e),window.addEventListener("mouseup",f)),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",f)}},[i,m,f]),/#__PURE__/a.default.createElement("div",{ref:u,className:`color-slider ${o\|\|""}`,style:s,onMouseDown:e=>{d(!0),m(e)}},/#__PURE__/a.default.createElement("div",{className:"color-slider-handler",style:{left:t/r100+"%"}}),c)},d=({hue:e,onChange:t})=>/#__PURE__/a.default.createElement(i,{value:e,max:360,onChange:t,className:"hue-slider"}),m=({alpha:e,color:t,onChange:n})=>{const{r:r,g:l,b:o}=t;/#__PURE__/return a.default.createElement(i,{value:e,max:1,onChange:n,className:"alpha-slider-bg",style:{background:`linear-gradient(to right, rgba(${r},${l},${o},0) 0%, rgba(${r},${l},${o},1) 100%)`}})},f=({hue:t,saturation:n,value:c,alpha:u,onChange:i})=>{const[d,m]=e.useState("HEX"),[f,h]=e.useState({}),[p,v]=e.useState(!1),g=e.useRef(null);e.useEffect(()=>{const e=e=>{g.current&&!g.current.contains(e.target)&&v(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const E=e.useCallback(()=>r(t,n,c),[t,n,c]);e.useEffect(()=>{const e=E();if("HEX"===d)h({hex:o(e.r,e.g,e.b)});else if("RGB"===d)h({r:e.r,g:e.g,b:e.b});else if("HSL"===d){const t=function(e,t,a){e/=255,t/=255,a/=255;let n,r,l=Math.max(e,t,a),o=Math.min(e,t,a),s=(l+o)/2;if(l===o)n=r=0;else{let c=l-o;switch(r=s>.5?c/(2-l-o):c/(l+o),l){case e:n=(t-a)/c+(t<a?6:0);break;case t:n=(a-e)/c+2;break;case a:n=(e-t)/c+4}n/=6}return{h:360n,s:r,l:s}}(e.r,e.g,e.b);h({h:Math.round(t.h),s:Math.round(100t.s),l:Math.round(100t.l)})}},[t,n,c,d,E]);const b=(e,t)=>{const a={...f,[e]:t};h(a);const n=parseInt(a.r,10),r=parseInt(a.g,10),o=parseInt(a.b,10);if(!isNaN(n)&&!isNaN(r)&&!isNaN(o)){const e=l(Math.min(255,Math.max(0,n)),Math.min(255,Math.max(0,r)),Math.min(255,Math.max(0,o)));i({...e,a:u})}},N=(e,t)=>{const a={...f,[e]:t};h(a);const n=parseInt(a.h,10),r=parseInt(a.s,10),o=parseInt(a.l,10);if(!isNaN(n)&&!isNaN(r)&&!isNaN(o)){const e=function(e,t,a){let n,r,l;if(0===t)n=r=l=a;else{const o=(e,t,a)=>(a<0&&(a+=1),a>1&&(a-=1),a<1/6?e+6(t-e)a:a<.5?t:a<2/3?e+(t-e)(2/3-a)6:e),s=a<.5?a(1+t):a+t-at,c=2a-s;n=o(c,s,(e/=360)+1/3),r=o(c,s,e),l=o(c,s,e-1/3)}return{r:Math.round(255n),g:Math.round(255r),b:Math.round(255l)}}(Math.min(360,Math.max(0,n)),Math.min(100,Math.max(0,r))/100,Math.min(100,Math.max(0,o))/100),t=l(e.r,e.g,e.b);i({...t,a:u})}};/#__PURE__/return a.default.createElement("div",{className:"color-input-container"},/#__PURE__/a.default.createElement("div",{className:"color-input-row"},/#__PURE__/a.default.createElement("div",{className:"mode-selector",ref:g,onClick:()=>v(!p)},/#__PURE__/a.default.createElement("span",null,d),/#__PURE__/a.default.createElement("span",{className:"arrow",style:{fontSize:"10px",marginLeft:"4px",transform:p?"rotate(180deg)":"rotate(0deg)",display:"inline-block",transition:"transform 0.2s"}},"▼"),p&&/#__PURE__/a.default.createElement("div",{className:"mode-dropdown"},/#__PURE__/a.default.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),m("HEX"),v(!1)}},"HEX"),/#__PURE__/a.default.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),m("RGB"),v(!1)}},"RGB"),/#__PURE__/a.default.createElement("div",{className:"mode-option",onClick:e=>{e.stopPropagation(),m("HSL"),v(!1)}},"HSL"))),window.EyeDropper&&/#__PURE__/a.default.createElement("div",{className:"eyedropper-icon",onClick:function(){try{if(!window.EyeDropper)return Promise.resolve();const e=new window.EyeDropper,t=function(){try{var t=Promise.resolve(e.open()).then(function(e){const t=s(e.sRGBHex);if(t){const e=l(t.r,t.g,t.b);i({...e,a:u})}})}catch(e){return}return t&&t.then?t.then(void 0,function(){}):t}();return Promise.resolve(t&&t.then?t.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},title:"Pick Color"},/#__PURE__/a.default.createElement("svg",{viewBox:"0 0 24 24",width:"16",height:"16"},/#__PURE__/a.default.createElement("path",{fill:"currentColor",d:"M17.5,1.5c-0.8,0-1.5,0.3-2.1,0.9l-8,8c-0.6,0.6-0.9,1.3-0.9,2.1v2.5l-4,4l1.5,1.5l4-4h2.5c0.8,0,1.5-0.3,2.1-0.9l8-8c0.6-0.6,0.9-1.3,0.9-2.1s-0.3-1.5-0.9-2.1S18.3,1.5,17.5,1.5z M17.5,10l-8-8l8,8z M6.5,12.5v2.5h-2.5L2,17l2,2l2-2v-2.5h2.5l8-8L10,5L6.5,8.5V12.5z"}),/#__PURE__/a.default.createElement("path",{d:"M19.3 8.9L15.1 4.7 17.5 2.3c.4-.4 1-.4 1.4 0l2.7 2.7c.4.4.4 1 0 1.4L19.3 8.9zM13.7 6.1L4 15.8V20h4.2l9.7-9.7-4.2-4.2z",fill:"currentColor"})))),/#__PURE__/a.default.createElement("div",{className:"color-input-fields"},"HEX"===d&&/#__PURE__/a.default.createElement("input",{className:"color-input",value:f.hex\|\|"",onChange:e=>{const t=e.target.value;if(h({...f,hex:t}),/^#?([0-9A-F]{3}\|[0-9A-F]{6})$/i.test(t)){const e=s(t);if(e){const t=l(e.r,e.g,e.b);i({...t,a:u})}}}}),"RGB"===d&&/#__PURE__/a.default.createElement(a.default.Fragment,null,/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"R",value:void 0!==f.r?f.r:"",onChange:e=>b("r",e.target.value)}),/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"G",value:void 0!==f.g?f.g:"",onChange:e=>b("g",e.target.value)}),/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"B",value:void 0!==f.b?f.b:"",onChange:e=>b("b",e.target.value)})),"HSL"===d&&/#__PURE__/a.default.createElement(a.default.Fragment,null,/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"H",value:void 0!==f.h?f.h:"",onChange:e=>N("h",e.target.value)}),/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"S",value:void 0!==f.s?f.s:"",onChange:e=>N("s",e.target.value)}),/#__PURE__/a.default.createElement("input",{className:"color-input",type:"number",placeholder:"L",value:void 0!==f.l?f.l:"",onChange:e=>N("l",e.target.value)})),/#__PURE__/a.default.createElement("div",{className:"color-input alpha-display"},Math.round(100u),"%")))};return({value:t,defaultValue:n,onChange:l})=>{const[s,i]=e.useState(!1),[h,p]=e.useState(()=>c(t\|\|n\|\|"#1677ff")),v=e.useRef(null);e.useEffect(()=>{void 0!==t&&p(c(t))},[t]);const g=e=>{const t={...h,...e};if(p(t),l){const e=r(t.h,t.s,t.v),a=o(e.r,e.g,e.b);l(a,{...e,a:t.a})}};e.useEffect(()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&i(!1)};return s&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[s]);const E=r(h.h,h.s,h.v);/#__PURE__/return a.default.createElement("div",{className:"color-picker-container",ref:v,style:{position:"relative",display:"inline-block"}},/#__PURE__/a.default.createElement("div",{className:"color-picker-trigger",onClick:()=>i(!s)},/#__PURE__/a.default.createElement("div",{className:"color-block",style:{backgroundColor:`rgba(${E.r}, ${E.g}, ${E.b}, ${h.a})`}})),s&&/#__PURE__/a.default.createElement("div",{className:"color-picker-panel",style:{position:"absolute",top:"100%",left:0,zIndex:1e3,marginTop:4}},/#__PURE__/a.default.createElement(u,{hue:h.h,saturation:h.s,value:h.v,onChange:(e,t)=>g({s:e,v:t})}),/#__PURE__/a.default.createElement(d,{hue:h.h,onChange:e=>g({h:e})}),/#__PURE__/a.default.createElement(m,{alpha:h.a,color:E,onChange:e=>g({a:e})}),/#__PURE__/a.default.createElement(f,{hue:h.h,saturation:h.s,value:h.v,alpha:h.a,onChange:e=>g(e)})))}});
2	+ //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.umd.js","sources":["../src/lib/utils/color.js","../src/lib/ColorBoard.js","../src/lib/Sliders.js","../src/lib/ColorInput.js","../src/lib/index.js"],"sourcesContent":["\n/**\n * Clamps a value between min and max\n * @param {number} value \n * @param {number} min \n * @param {number} max \n */\nexport function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n}\n\n/**\n * Converts HSV to RGB\n * @param {number} h Hue 0-360\n * @param {number} s Saturation 0-1\n * @param {number} v Value 0-1\n * @returns {{r: number, g: number, b: number}}\n */\nexport function hsvToRgb(h, s, v) {\n h = ((h % 360) + 360) % 360; // Normalize hue\n let r, g, b;\n let i = Math.floor(h / 60);\n let f = h / 60 - i;\n let p = v * (1 - s);\n let q = v * (1 - f * s);\n let t = v * (1 - (1 - f) * s);\n\n switch (i % 6) {\n case 0: r = v; g = t; b = p; break;\n case 1: r = q; g = v; b = p; break;\n case 2: r = p; g = v; b = t; break;\n case 3: r = p; g = q; b = v; break;\n case 4: r = t; g = p; b = v; break;\n case 5: r = v; g = p; b = q; break;\n default: r = 0; g = 0; b = 0;\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n}\n\n/**\n * Converts RGB to HSV\n * @param {number} r Red 0-255\n * @param {number} g Green 0-255\n * @param {number} b Blue 0-255\n * @returns {{h: number, s: number, v: number}}\n */\nexport function rgbToHsv(r, g, b) {\n r /= 255;\n g /= 255;\n b /= 255;\n\n let max = Math.max(r, g, b);\n let min = Math.min(r, g, b);\n let h, s, v = max;\n\n let d = max - min;\n s = max === 0 ? 0 : d / max;\n\n if (max === min) {\n h = 0; // achromatic\n } else {\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n default: h = 0;\n }\n h /= 6;\n }\n\n return {\n h: h * 360,\n s: s,\n v: v\n };\n}\n\n/**\n * Converts RGB to Hex string\n * @param {number} r \n * @param {number} g \n * @param {number} b \n * @returns {string} Hex string (e.g., \"#ff0000\")\n */\nexport function rgbToHex(r, g, b) {\n const toHex = (c) => {\n const hex = Math.round(c).toString(16);\n return hex.length === 1 ? \"0\" + hex : hex;\n };\n return \"#\" + toHex(r) + toHex(g) + toHex(b);\n}\n\n/**\n * Converts Hex string to RGB\n * @param {string} hex \n * @returns {{r: number, g: number, b: number} | null}\n */\nexport function hexToRgb(hex) {\n // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function(m, r, g, b) {\n return r + r + g + g + b + b;\n });\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n}\n\n/**\n * Parses a color string to HSV\n * @param {string} color \n * @returns {{h: number, s: number, v: number, a: number}}\n */\nexport function parseColor(color) {\n if (!color) return { h: 0, s: 1, v: 1, a: 1 };\n\n // Hex\n if (color.startsWith('#')) {\n const rgb = hexToRgb(color);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n return { ...hsv, a: 1 };\n }\n }\n \n // RGB/RGBA\n const rgbaMatch = color.match(/^rgba?\$(\\d+),\\s*(\\d+),\\s*(\\d+)(?:,\\s*([\\d.]+))?\$$/);\n if (rgbaMatch) {\n const r = parseInt(rgbaMatch[1], 10);\n const g = parseInt(rgbaMatch[2], 10);\n const b = parseInt(rgbaMatch[3], 10);\n const a = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1;\n const hsv = rgbToHsv(r, g, b);\n return { ...hsv, a };\n }\n\n // Default fallback\n return { h: 0, s: 1, v: 1, a: 1 };\n}\n\n/**\n * Converts RGB to HSL\n * @param {number} r Red 0-255\n * @param {number} g Green 0-255\n * @param {number} b Blue 0-255\n * @returns {{h: number, s: number, l: number}}\n */\nexport function rgbToHsl(r, g, b) {\n r /= 255;\n g /= 255;\n b /= 255;\n\n let max = Math.max(r, g, b), min = Math.min(r, g, b);\n let h, s, l = (max + min) / 2;\n\n if (max === min) {\n h = s = 0; // achromatic\n } else {\n let d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n }\n h /= 6;\n }\n\n return { h: h * 360, s: s, l: l };\n}\n\n/**\n * Converts HSL to RGB\n * @param {number} h Hue 0-360\n * @param {number} s Saturation 0-1\n * @param {number} l Lightness 0-1\n * @returns {{r: number, g: number, b: number}}\n */\nexport function hslToRgb(h, s, l) {\n let r, g, b;\n\n if (s === 0) {\n r = g = b = l; // achromatic\n } else {\n const hue2rgb = (p, q, t) => {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1/6) return p + (q - p) * 6 * t;\n if (t < 1/2) return q;\n if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;\n return p;\n };\n\n const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n const p = 2 * l - q;\n h /= 360;\n r = hue2rgb(p, q, h + 1/3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1/3);\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n}\n","\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport { clamp } from './utils/color';\n\nconst ColorBoard = ({ hue, saturation, value, onChange }) => {\n const containerRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const handleChange = useCallback((e) => {\n if (!containerRef.current) return;\n const { width, height, left, top } = containerRef.current.getBoundingClientRect();\n const x = clamp(e.clientX - left, 0, width);\n const y = clamp(e.clientY - top, 0, height);\n\n const newSaturation = x / width;\n const newValue = 1 - y / height;\n\n onChange(newSaturation, newValue);\n }, [onChange]);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n handleChange(e);\n };\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n useEffect(() => {\n const handleMouseMove = (e) => {\n if (isDragging) {\n handleChange(e);\n }\n };\n\n if (isDragging) {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n }\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isDragging, handleChange, handleMouseUp]);\n\n return (\n <div\n ref={containerRef}\n className=\"color-board\"\n style={{\n backgroundColor: `hsl(${hue}, 100%, 50%)`,\n }}\n onMouseDown={handleMouseDown}\n >\n <div className=\"color-board-white\" />\n <div className=\"color-board-black\" />\n <div\n className=\"color-board-handler\"\n style={{\n left: `${saturation * 100}%`,\n top: `${(1 - value) * 100}%`,\n }}\n />\n </div>\n );\n};\n\nexport default ColorBoard;\n","\nimport React, { useRef, useState, useEffect, useCallback } from 'react';\nimport { clamp } from './utils/color';\n\nconst Slider = ({ value, max, onChange, className, style, children }) => {\n const containerRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const handleChange = useCallback((e) => {\n if (!containerRef.current) return;\n const { width, left } = containerRef.current.getBoundingClientRect();\n const x = clamp(e.clientX - left, 0, width);\n const newValue = (x / width) * max;\n onChange(newValue);\n }, [max, onChange]);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n handleChange(e);\n };\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n useEffect(() => {\n const handleMouseMove = (e) => {\n if (isDragging) {\n handleChange(e);\n }\n };\n\n if (isDragging) {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n }\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isDragging, handleChange, handleMouseUp]);\n\n return (\n <div\n ref={containerRef}\n className={`color-slider ${className || ''}`}\n style={style}\n onMouseDown={handleMouseDown}\n >\n <div\n className=\"color-slider-handler\"\n style={{\n left: `${(value / max) * 100}%`,\n }}\n />\n {children}\n </div>\n );\n};\n\nexport const HueSlider = ({ hue, onChange }) => {\n return (\n <Slider\n value={hue}\n max={360}\n onChange={onChange}\n className=\"hue-slider\"\n />\n );\n};\n\nexport const AlphaSlider = ({ alpha, color, onChange }) => {\n const { r, g, b } = color;\n return (\n <Slider\n value={alpha}\n max={1}\n onChange={onChange}\n className=\"alpha-slider-bg\"\n style={{\n background: `linear-gradient(to right, rgba(${r},${g},${b},0) 0%, rgba(${r},${g},${b},1) 100%)`\n }}\n />\n );\n};\n","import React, { useState, useEffect, useCallback, useRef } from 'react';\nimport { rgbToHex, hexToRgb, hsvToRgb, rgbToHsv, rgbToHsl, hslToRgb } from './utils/color';\n\nconst ColorInput = ({ hue, saturation, value, alpha, onChange }) => {\n const [mode, setMode] = useState('HEX');\n const [localValue, setLocalValue] = useState({});\n const [showDropdown, setShowDropdown] = useState(false);\n const dropdownRef = useRef(null);\n\n // Close dropdown when clicking outside\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setShowDropdown(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const getRgb = useCallback(() => hsvToRgb(hue, saturation, value), [hue, saturation, value]);\n\n useEffect(() => {\n const rgb = getRgb();\n if (mode === 'HEX') {\n setLocalValue({ hex: rgbToHex(rgb.r, rgb.g, rgb.b) });\n } else if (mode === 'RGB') {\n setLocalValue({ r: rgb.r, g: rgb.g, b: rgb.b });\n } else if (mode === 'HSL') {\n const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);\n setLocalValue({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });\n }\n }, [hue, saturation, value, mode, getRgb]);\n\n const handleHexChange = (e) => {\n const val = e.target.value;\n setLocalValue({ ...localValue, hex: val });\n if (/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(val)) {\n const rgb = hexToRgb(val);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n }\n };\n\n const handleRgbChange = (key, val) => {\n const newValue = { ...localValue, [key]: val };\n setLocalValue(newValue);\n const r = parseInt(newValue.r, 10);\n const g = parseInt(newValue.g, 10);\n const b = parseInt(newValue.b, 10);\n if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {\n const hsv = rgbToHsv(Math.min(255, Math.max(0, r)), Math.min(255, Math.max(0, g)), Math.min(255, Math.max(0, b)));\n onChange({ ...hsv, a: alpha });\n }\n };\n\n const handleHslChange = (key, val) => {\n const newValue = { ...localValue, [key]: val };\n setLocalValue(newValue);\n const h = parseInt(newValue.h, 10);\n const s = parseInt(newValue.s, 10);\n const l = parseInt(newValue.l, 10);\n if (!isNaN(h) && !isNaN(s) && !isNaN(l)) {\n const rgb = hslToRgb(Math.min(360, Math.max(0, h)), Math.min(100, Math.max(0, s)) / 100, Math.min(100, Math.max(0, l)) / 100);\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n };\n\n const openEyeDropper = async () => {\n if (!window.EyeDropper) return;\n const eyeDropper = new window.EyeDropper();\n try {\n const result = await eyeDropper.open();\n const rgb = hexToRgb(result.sRGBHex);\n if (rgb) {\n const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n onChange({ ...hsv, a: alpha });\n }\n } catch (e) {\n // User canceled\n }\n };\n\n return (\n <div className=\"color-input-container\">\n <div className=\"color-input-row\">\n <div className=\"mode-selector\" ref={dropdownRef} onClick={() => setShowDropdown(!showDropdown)}>\n <span>{mode}</span>\n <span className=\"arrow\" style={{ fontSize: '10px', marginLeft: '4px', transform: showDropdown ? 'rotate(180deg)' : 'rotate(0deg)', display: 'inline-block', transition: 'transform 0.2s' }}>▼</span>\n {showDropdown && (\n <div className=\"mode-dropdown\">\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('HEX'); setShowDropdown(false); }}>HEX</div>\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('RGB'); setShowDropdown(false); }}>RGB</div>\n <div className=\"mode-option\" onClick={(e) => { e.stopPropagation(); setMode('HSL'); setShowDropdown(false); }}>HSL</div>\n </div>\n )}\n </div>\n \n {window.EyeDropper && (\n <div className=\"eyedropper-icon\" onClick={openEyeDropper} title=\"Pick Color\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n <path fill=\"currentColor\" d=\"M17.5,1.5c-0.8,0-1.5,0.3-2.1,0.9l-8,8c-0.6,0.6-0.9,1.3-0.9,2.1v2.5l-4,4l1.5,1.5l4-4h2.5c0.8,0,1.5-0.3,2.1-0.9l8-8c0.6-0.6,0.9-1.3,0.9-2.1s-0.3-1.5-0.9-2.1S18.3,1.5,17.5,1.5z M17.5,10l-8-8l8,8z M6.5,12.5v2.5h-2.5L2,17l2,2l2-2v-2.5h2.5l8-8L10,5L6.5,8.5V12.5z\"/>\n <path d=\"M19.3 8.9L15.1 4.7 17.5 2.3c.4-.4 1-.4 1.4 0l2.7 2.7c.4.4.4 1 0 1.4L19.3 8.9zM13.7 6.1L4 15.8V20h4.2l9.7-9.7-4.2-4.2z\" fill=\"currentColor\"/>\n </svg>\n </div>\n )}\n </div>\n\n <div className=\"color-input-fields\">\n {mode === 'HEX' && (\n <input className=\"color-input\" value={localValue.hex || ''} onChange={handleHexChange} />\n )}\n {mode === 'RGB' && (\n <>\n <input className=\"color-input\" type=\"number\" placeholder=\"R\" value={localValue.r !== undefined ? localValue.r : ''} onChange={(e) => handleRgbChange('r', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"G\" value={localValue.g !== undefined ? localValue.g : ''} onChange={(e) => handleRgbChange('g', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"B\" value={localValue.b !== undefined ? localValue.b : ''} onChange={(e) => handleRgbChange('b', e.target.value)} />\n </>\n )}\n {mode === 'HSL' && (\n <>\n <input className=\"color-input\" type=\"number\" placeholder=\"H\" value={localValue.h !== undefined ? localValue.h : ''} onChange={(e) => handleHslChange('h', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"S\" value={localValue.s !== undefined ? localValue.s : ''} onChange={(e) => handleHslChange('s', e.target.value)} />\n <input className=\"color-input\" type=\"number\" placeholder=\"L\" value={localValue.l !== undefined ? localValue.l : ''} onChange={(e) => handleHslChange('l', e.target.value)} />\n </>\n )}\n <div className=\"color-input alpha-display\">\n {Math.round(alpha * 100)}%\n </div>\n </div>\n </div>\n );\n};\n\nexport default ColorInput;\n","\nimport React, { useState, useRef, useEffect } from 'react';\nimport ColorBoard from './ColorBoard';\nimport { HueSlider, AlphaSlider } from './Sliders';\nimport ColorInput from './ColorInput';\nimport { hsvToRgb, rgbToHex, parseColor } from './utils/color';\nimport './index.css';\n\nconst ColorPicker = ({ value, defaultValue, onChange }) => {\n // Initialize state\n const [isOpen, setIsOpen] = useState(false);\n \n // Internal state for color components\n const [color, setColor] = useState(() => {\n const initColor = value || defaultValue || '#1677ff';\n return parseColor(initColor);\n });\n\n const containerRef = useRef(null);\n\n // Sync with prop value if controlled\n useEffect(() => {\n if (value !== undefined) {\n setColor(parseColor(value));\n }\n }, [value]);\n\n const handleChange = (newColor) => {\n const nextColor = { ...color, ...newColor };\n setColor(nextColor);\n \n if (onChange) {\n const rgb = hsvToRgb(nextColor.h, nextColor.s, nextColor.v);\n const hex = rgbToHex(rgb.r, rgb.g, rgb.b);\n // Return a rich object or just hex string? \n // AntD returns an object, but simple string is often easier. \n // Let's return the hex string and the object as second arg just in case.\n onChange(hex, { ...rgb, a: nextColor.a });\n }\n };\n\n // Click outside to close\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (containerRef.current && !containerRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n \n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isOpen]);\n\n const rgb = hsvToRgb(color.h, color.s, color.v);\n const displayColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${color.a})`;\n\n return (\n <div className=\"color-picker-container\" ref={containerRef} style={{ position: 'relative', display: 'inline-block' }}>\n <div \n className=\"color-picker-trigger\"\n onClick={() => setIsOpen(!isOpen)}\n >\n <div \n className=\"color-block\" \n style={{ backgroundColor: displayColor }} \n />\n </div>\n\n {isOpen && (\n <div \n className=\"color-picker-panel\" \n style={{ \n position: 'absolute', \n top: '100%', \n left: 0, \n zIndex: 1000, \n marginTop: 4 \n }}\n >\n <ColorBoard\n hue={color.h}\n saturation={color.s}\n value={color.v}\n onChange={(s, v) => handleChange({ s, v })}\n />\n <HueSlider\n hue={color.h}\n onChange={(h) => handleChange({ h })}\n />\n <AlphaSlider\n alpha={color.a}\n color={rgb}\n onChange={(a) => handleChange({ a })}\n />\n <ColorInput\n hue={color.h}\n saturation={color.s}\n value={color.v}\n alpha={color.a}\n onChange={(newHsv) => handleChange(newHsv)}\n />\n </div>\n )}\n </div>\n );\n};\n\nexport default ColorPicker;\n"],"names":["clamp","value","min","max","Math","hsvToRgb","h","s","v","r","g","b","i","floor","f","p","q","t","round","rgbToHsv","d","rgbToHex","toHex","c","hex","toString","length","hexToRgb","replace","m","result","exec","parseInt","parseColor","color","a","startsWith","rgb","rgbaMatch","match","undefined","parseFloat","ColorBoard","hue","saturation","onChange","containerRef","useRef","isDragging","setIsDragging","useState","handleChange","useCallback","e","current","width","height","left","top","getBoundingClientRect","x","clientX","y","clientY","handleMouseUp","useEffect","handleMouseMove","window","addEventListener","removeEventListener","React","createElement","ref","className","style","backgroundColor","onMouseDown","Slider","children","HueSlider","AlphaSlider","alpha","background","ColorInput","mode","setMode","localValue","setLocalValue","showDropdown","setShowDropdown","dropdownRef","handleClickOutside","event","contains","target","document","getRgb","hsl","l","rgbToHsl","handleRgbChange","key","val","newValue","isNaN","hsv","handleHslChange","hue2rgb","hslToRgb","onClick","fontSize","marginLeft","transform","display","transition","stopPropagation","EyeDropper","Promise","resolve","eyeDropper","_temp","open","then","sRGBHex","_catch","reject","title","viewBox","fill","test","Fragment","type","placeholder","ColorPicker","defaultValue","isOpen","setIsOpen","setColor","newColor","nextColor","position","zIndex","marginTop","newHsv"],"mappings":"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"}