@studiotoolkit/color-wheel 1.0.2 → 1.0.3

package/dist/ColorWheel.d.ts

@@ -30,6 +30,6 @@ interface ColorWheelProps {
     width?: number;
     height?: number;
 }
-export default function ColorWheel({ onColorsChange, harmonyMode: propHarmonyMode, saturation: propSaturation, brightness: propBrightness, circleRadius: propCircleRadius, wheelThickness: propWheelThickness, dotSize: propDotSize, dotPosition: propDotPosition, handleThickness: propHandleThickness, handleColor: propHandleColor, harmonyPolygon: propHarmonyPolygon, polygonColor: propPolygonColor, polygonThickness: propPolygonThickness, centerDot: propCenterDot, showCenterDot: propShowCenterDot, borderColor: propBorderColor, canvasBackgroundColor: propCanvasBackgroundColor, width, height, }: ColorWheelProps): import("react/jsx-runtime").JSX.Element;
+export default function ColorWheel({ onColorsChange, harmonyMode: propHarmonyMode, saturation: propSaturation, brightness: propBrightness, circleRadius: propCircleRadius, wheelThickness: propWheelThickness, dotSize: propDotSize, dotPosition: propDotPosition, handleThickness: propHandleThickness, handleColor: propHandleColor, harmonyPolygon: propHarmonyPolygon, polygonColor: propPolygonColor, polygonThickness: propPolygonThickness, centerDot: propCenterDot, showCenterDot: propShowCenterDot, borderColor: propBorderColor, canvasBackgroundColor: propCanvasBackgroundColor, width, height, }: ColorWheelProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ColorWheel.d.ts.map

package/dist/ColorWheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorWheel.d.ts","sourceRoot":"","sources":["../src/ColorWheel.tsx"],"names":[],"mappings":"AACA,OAAO,kBAAkB,CAAC;AAG1B,KAAK,WAAW,GACZ,eAAe,GACf,WAAW,GACX,eAAe,GACf,OAAO,GACP,SAAS,GACT,QAAQ,GACR,QAAQ,CAAC;AACb,KAAK,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACzB;AAUD,UAAU,eAAe;IACvB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwHD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,cAAc,EACd,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,UAAU,EAAE,cAAc,EAC1B,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EAAE,kBAAkB,EAClC,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,EAC5B,eAAe,EAAE,mBAAmB,EACpC,WAAW,EAAE,eAAe,EAC5B,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAE,gBAAgB,EAC9B,gBAAgB,EAAE,oBAAoB,EACtC,SAAS,EAAE,aAAa,EACxB,aAAa,EAAE,iBAAyB,EACxC,WAAW,EAAE,eAA2B,EACxC,qBAAqB,EAAE,yBAAyC,EAChE,KAAW,EACX,MAAY,GACb,EAAE,eAAe,2CAuejB"}
+{"version":3,"file":"ColorWheel.d.ts","sourceRoot":"","sources":["../src/ColorWheel.tsx"],"names":[],"mappings":"AACA,OAAO,kBAAkB,CAAC;AAG1B,KAAK,WAAW,GACZ,eAAe,GACf,WAAW,GACX,eAAe,GACf,OAAO,GACP,SAAS,GACT,QAAQ,GACR,QAAQ,CAAC;AACb,KAAK,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACzB;AAUD,UAAU,eAAe;IACvB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwHD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,cAAc,EACd,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,UAAU,EAAE,cAAc,EAC1B,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EAAE,kBAAkB,EAClC,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,EAC5B,eAAe,EAAE,mBAAmB,EACpC,WAAW,EAAE,eAAe,EAC5B,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAE,gBAAgB,EAC9B,gBAAgB,EAAE,oBAAoB,EACtC,SAAS,EAAE,aAAa,EACxB,aAAa,EAAE,iBAAyB,EACxC,WAAW,EAAE,eAA2B,EACxC,qBAAqB,EAAE,yBAAyC,EAChE,KAAW,EACX,MAAY,GACb,EAAE,eAAe,+BAuejB"}

package/dist/ThemeContext.d.ts

@@ -5,7 +5,7 @@ interface ThemeContextType {
 }
 export declare function ThemeProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function useTheme(): ThemeContextType;
 export {};
 //# sourceMappingURL=ThemeContext.d.ts.map

package/dist/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../src/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvF,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,CAAC;CAChE;AAOD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CASlE;AAED,wBAAgB,QAAQ,qBAEvB"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../src/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvF,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,CAAC;CAChE;AAOD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BASlE;AAED,wBAAgB,QAAQ,qBAEvB"}

package/dist/color-wheel.css

@@ -0,0 +1,2 @@
+.color-wheel-container{background-color:#fff;margin:0;font-family:sans-serif}[data-theme=dark] .color-wheel-container{background-color:#1a1a1a!important}.color-wheel-container h2{text-align:center;color:#fff;background:#222;margin:0;padding:15px}.layout{grid-template-columns:20% 30% 50%;height:100vh;display:grid}.panel{background-color:#fff;border-right:1px solid #ddd;padding:15px;overflow-y:auto}[data-theme=dark] .panel{color:#e0e0e0;border-right-color:#444;background-color:#1a1a1a!important}[data-theme=dark] .panel label{color:#e0e0e0}[data-theme=dark] .panel input,[data-theme=dark] .panel select{color:#e0e0e0;background-color:#2a2a2a;border:1px solid #444}[data-theme=dark] .panel hr{border-color:#444}.panel canvas{cursor:pointer;margin:auto;display:block}.panel label{margin-top:12px;font-weight:700;display:block}.panel input,.panel select{width:100%;margin-top:4px}.panel hr{margin:18px 0}.colors{flex-wrap:wrap;gap:12px;display:flex}.swatchBox{text-align:center;font-size:13px}.swatch{border:1px solid #ccc;border-radius:10px;width:70px;height:70px}.panel pre{background:#f3f3f3;border-radius:10px;max-height:320px;padding:10px;font-size:12px;overflow-x:auto}.panel h3{margin-top:0}
+/*$vite$:1*/

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react/jsx-runtime"),t=require("react"),me=t.createContext({isDark:!1,setIsDark:()=>{}});function Ye({children:S}){const[i,g]=t.useState(()=>localStorage.getItem("theme")==="dark");return t.useEffect(()=>{document.documentElement.setAttribute("data-theme",i?"dark":"light"),localStorage.setItem("theme",i?"dark":"light")},[i]),F.jsx(me.Provider,{value:{isDark:i,setIsDark:g},children:S})}function ge(){return t.useContext(me)}const he={complementary:[0,180],analogous:[-30,0,30],monochromatic:[0],split:[0,150,-150],triadic:[0,120,240],square:[0,90,180,270],simple:[0]},ze=[{name:"Harmony Mode",attribute:"harmony-mode",default:"split",show:!0,notes:""},{name:"Saturation",attribute:"saturation",default:100,show:!0,notes:""},{name:"Brightness",attribute:"brightness",default:50,show:!0,notes:""},{name:"Circle Radius",attribute:"circle-radius",default:1,show:!1,notes:"If not passed, default it is false"},{name:"Wheel Thickness",attribute:"wheel-thickness",default:80,show:!1,notes:"If not passed, default it is false"},{name:"Dot Size",attribute:"dot-size",default:5,show:!1,notes:"If not passed, default it is false"},{name:"Dot Position",attribute:"dot-position",default:"outer",show:!1,notes:"If not passed, default it is false"},{name:"Handle Thickness",attribute:"handle-thickness",default:2,show:!1,notes:"If not passed, default it is false"},{name:"Handle Color",attribute:"handle-color",default:"#000000",show:!1,notes:"If not passed, default it is false"},{name:"Show Harmony Polygon",attribute:"harmony-polygon",default:!1,show:!1,notes:"If not passed, default it is false"},{name:"Polygon Color",attribute:"polygon-color",default:"#000000",show:!1,notes:"If not passed, default it is false"},{name:"Polygon Thickness",attribute:"polygon-thickness",default:1,show:!1,notes:"If not passed, default it is false"},{name:"Center Dot",attribute:"center-dot",default:"#ffffff",show:!1,notes:"If not passed, default it is false"},{name:"Palette",attribute:"palette",default:null,show:!1,notes:"If not passed, default it is false"},{name:"Palette JSON",attribute:"palette-json",default:null,show:!1,notes:"If not passed, default it is false"}];function Ae({onColorsChange:S,harmonyMode:i,saturation:g,brightness:E,circleRadius:b,wheelThickness:y,dotSize:k,dotPosition:P,handleThickness:C,handleColor:I,harmonyPolygon:T,polygonColor:R,polygonThickness:D,centerDot:j,showCenterDot:H=!1,borderColor:U="#ffffff",canvasBackgroundColor:Y="transparent",width:W=450,height:L=450}){const O=t.useRef(null),[be,z]=t.useState(!1),{isDark:G}=ge(),l=e=>ze.find(s=>s.attribute===e),[c,ye]=t.useState(i||l("harmony-mode").default),[N,ke]=t.useState(g??l("saturation").default),[$,we]=t.useState(E??l("brightness").default),A=t.useCallback(()=>{const e=l("circle-radius").default;if(b!==void 0)return b;if(e===1){const s=Math.min(W,L),a=y??l("wheel-thickness").default,n=k??l("dot-size").default;return s/2-a/2-n-10}return e},[W,L,b,y,k]),[w,J]=t.useState(A()),[v,Se]=t.useState(y??l("wheel-thickness").default),[K,ve]=t.useState(k??l("dot-size").default),[X,Me]=t.useState(P||l("dot-position").default),[Q,Ee]=t.useState(C??l("handle-thickness").default),[V,Pe]=t.useState(I||(l("handle-color").default==="black"?"#000000":l("handle-color").default)),[Z,Ce]=t.useState(T??l("harmony-polygon").default),[x,Ie]=t.useState(R||(l("polygon-color").default==="black"?"#000000":l("polygon-color").default)),[p,Te]=t.useState(D??l("polygon-thickness").default),[ee,Re]=t.useState(j||(l("center-dot").default==="white"?"#ffffff":l("center-dot").default)),[te,De]=t.useState(H),[_,je]=t.useState(U),[M,We]=t.useState(Y),[d,se]=t.useState(0);t.useEffect(()=>{i!==void 0&&ye(i)},[i]),t.useEffect(()=>{g!==void 0&&ke(g)},[g]),t.useEffect(()=>{E!==void 0&&we(E)},[E]),t.useEffect(()=>{J(b!==void 0?b:A())},[b,A]),t.useEffect(()=>{y!==void 0&&Se(y)},[y]),t.useEffect(()=>{k!==void 0&&ve(k)},[k]),t.useEffect(()=>{P!==void 0&&Me(P)},[P]),t.useEffect(()=>{C!==void 0&&Ee(C)},[C]),t.useEffect(()=>{I!==void 0&&Pe(I)},[I]),t.useEffect(()=>{T!==void 0&&Ce(T)},[T]),t.useEffect(()=>{R!==void 0&&Ie(R)},[R]),t.useEffect(()=>{D!==void 0&&Te(D)},[D]),t.useEffect(()=>{j!==void 0&&Re(j)},[j]),t.useEffect(()=>{De(H)},[H]),t.useEffect(()=>{je(U)},[U]),t.useEffect(()=>{We(Y)},[Y]);const o={x:W/2,y:L/2},B=e=>(e+360)%360,ae=t.useCallback((e,s=N,a=$)=>`hsl(${e}, ${s}%, ${a}%)`,[N,$]),Le=(e,s,a)=>{s/=100,a/=100;const n=(1-Math.abs(2*a-1))*s,f=n*(1-Math.abs(e/60%2-1)),u=a-n/2;let r=0,h=0,m=0;return e<60?[r,h,m]=[n,f,0]:e<120?[r,h,m]=[f,n,0]:e<180?[r,h,m]=[0,n,f]:e<240?[r,h,m]=[0,f,n]:e<300?[r,h,m]=[f,0,n]:[r,h,m]=[n,0,f],{r:Math.round((r+u)*255),g:Math.round((h+u)*255),b:Math.round((m+u)*255)}},Oe=(e,s,a)=>"#"+[e,s,a].map(n=>n.toString(16).padStart(2,"0")).join(""),ne=t.useCallback(()=>X==="center"?w:X==="inner"?w-v/2:w+v/2,[X,w,v]),le=t.useCallback(e=>{const s=(e-90)*Math.PI/180,a=ne();return{x:o.x+a*Math.cos(s),y:o.y+a*Math.sin(s)}},[o.x,o.y,ne]),oe=(e,s)=>{const a=e-o.x,n=s-o.y,f=Math.atan2(n,a)*180/Math.PI;return B(f+90)},fe=t.useCallback(()=>{let e=[];c==="monochromatic"?e=[{h:d,l:30},{h:d,l:50},{h:d,l:70}]:e=he[c].map(a=>({h:B(d+a),l:$}));const s=e.map(a=>{const n=Le(a.h,N,a.l);return Oe(n.r,n.g,n.b)});return{[c]:s}},[c,d,N,$]),ie=t.useCallback(e=>{for(let s=0;s<360;s++)e.beginPath(),e.strokeStyle=`hsl(${s},100%,50%)`,e.lineWidth=v,e.arc(o.x,o.y,w,(s-90)*Math.PI/180,(s-89)*Math.PI/180),e.stroke()},[o.x,o.y,w,v]),ue=t.useCallback((e,s)=>{!Z||s.length<3||(e.beginPath(),e.moveTo(s[0].x,s[0].y),s.slice(1).forEach(a=>{e.lineTo(a.x,a.y)}),e.closePath(),e.strokeStyle=x,e.lineWidth=p,e.stroke())},[Z,x,p]),ce=t.useCallback(e=>{if(c==="simple")return;const s=he[c],a=[];s.forEach(n=>{const f=B(d+n),u=le(f);a.push(u),e.beginPath(),e.moveTo(o.x,o.y),e.lineTo(u.x,u.y),e.strokeStyle=V,e.lineWidth=Q,e.stroke(),e.beginPath(),e.arc(u.x,u.y,K,0,Math.PI*2),e.fillStyle=ae(f),e.fill(),e.strokeStyle="white",e.stroke()}),ue(e,a),te&&(e.beginPath(),e.arc(o.x,o.y,5,0,Math.PI*2),e.fillStyle=ee,e.fill(),e.strokeStyle="white",e.lineWidth=1,e.stroke())},[c,d,o.x,o.y,K,Q,V,ee,te,le,ae,ue]),de=t.useCallback(()=>{const e=O.current;if(!e)return;const s=e.getContext("2d");s&&(s.clearRect(0,0,e.width,e.height),M&&M!=="transparent"?(s.fillStyle=M,s.fillRect(0,0,e.width,e.height)):M==="transparent"&&(s.fillStyle=G?"#1a1a1a":"#ffffff",s.fillRect(0,0,e.width,e.height)),ie(s),ce(s),_&&(s.strokeStyle=_,s.lineWidth=1,s.strokeRect(0,0,e.width,e.height)))},[ie,ce,_,M,G]),Ne=()=>z(!0),$e=()=>z(!1),qe=()=>z(!1),He=e=>{if(!be)return;const s=O.current;if(!s)return;const a=s.getBoundingClientRect(),n=oe(e.clientX-a.left,e.clientY-a.top);se(n)},Ue=e=>{const s=O.current;if(!s)return;const a=s.getBoundingClientRect(),n=oe(e.clientX-a.left,e.clientY-a.top);se(n)};t.useEffect(()=>{de()},[de]);const q=t.useMemo(()=>fe(),[fe]);t.useEffect(()=>{S&&S(q)},[q,S]);const re=t.useCallback(()=>q,[q]);return t.useEffect(()=>(window.getColorWheelPalette=re,()=>{delete window.getColorWheelPalette}),[re]),F.jsx("div",{className:"color-wheel-container",children:F.jsx("canvas",{ref:O,width:W,height:L,onMouseDown:Ne,onMouseUp:$e,onMouseLeave:qe,onMouseMove:He,onClick:Ue,style:{display:"block",margin:"0 auto",cursor:"pointer"}})})}exports.ColorWheel=Ae;exports.ThemeProvider=Ye;exports.useTheme=ge;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");var n=(0,e.createContext)({isDark:!1,setIsDark:()=>{}});function r({children:r}){let[i,a]=(0,e.useState)(()=>localStorage.getItem(`theme`)===`dark`);return(0,e.useEffect)(()=>{document.documentElement.setAttribute(`data-theme`,i?`dark`:`light`),localStorage.setItem(`theme`,i?`dark`:`light`)},[i]),(0,t.jsx)(n.Provider,{value:{isDark:i,setIsDark:a},children:r})}function i(){return(0,e.useContext)(n)}var a={complementary:[0,180],analogous:[-30,0,30],monochromatic:[0],split:[0,150,-150],triadic:[0,120,240],square:[0,90,180,270],simple:[0]},o=[{name:`Harmony Mode`,attribute:`harmony-mode`,default:`split`,show:!0,notes:``},{name:`Saturation`,attribute:`saturation`,default:100,show:!0,notes:``},{name:`Brightness`,attribute:`brightness`,default:50,show:!0,notes:``},{name:`Circle Radius`,attribute:`circle-radius`,default:1,show:!1,notes:`If not passed, default it is false`},{name:`Wheel Thickness`,attribute:`wheel-thickness`,default:80,show:!1,notes:`If not passed, default it is false`},{name:`Dot Size`,attribute:`dot-size`,default:5,show:!1,notes:`If not passed, default it is false`},{name:`Dot Position`,attribute:`dot-position`,default:`outer`,show:!1,notes:`If not passed, default it is false`},{name:`Handle Thickness`,attribute:`handle-thickness`,default:2,show:!1,notes:`If not passed, default it is false`},{name:`Handle Color`,attribute:`handle-color`,default:`#000000`,show:!1,notes:`If not passed, default it is false`},{name:`Show Harmony Polygon`,attribute:`harmony-polygon`,default:!1,show:!1,notes:`If not passed, default it is false`},{name:`Polygon Color`,attribute:`polygon-color`,default:`#000000`,show:!1,notes:`If not passed, default it is false`},{name:`Polygon Thickness`,attribute:`polygon-thickness`,default:1,show:!1,notes:`If not passed, default it is false`},{name:`Center Dot`,attribute:`center-dot`,default:`#ffffff`,show:!1,notes:`If not passed, default it is false`},{name:`Palette`,attribute:`palette`,default:null,show:!1,notes:`If not passed, default it is false`},{name:`Palette JSON`,attribute:`palette-json`,default:null,show:!1,notes:`If not passed, default it is false`}];function s({onColorsChange:n,harmonyMode:r,saturation:s,brightness:c,circleRadius:l,wheelThickness:u,dotSize:d,dotPosition:f,handleThickness:p,handleColor:m,harmonyPolygon:h,polygonColor:g,polygonThickness:_,centerDot:v,showCenterDot:y=!1,borderColor:b=`#ffffff`,canvasBackgroundColor:x=`transparent`,width:S=450,height:C=450}){let w=(0,e.useRef)(null),[ee,T]=(0,e.useState)(!1),{isDark:E}=i(),D=e=>o.find(t=>t.attribute===e),[O,te]=(0,e.useState)(r||D(`harmony-mode`).default),[k,ne]=(0,e.useState)(s??D(`saturation`).default),[A,re]=(0,e.useState)(c??D(`brightness`).default),j=(0,e.useCallback)(()=>{let e=D(`circle-radius`).default;if(l!==void 0)return l;if(e===1){let e=Math.min(S,C),t=u??D(`wheel-thickness`).default,n=d??D(`dot-size`).default;return e/2-t/2-n-10}return e},[S,C,l,u,d]),[M,ie]=(0,e.useState)(j()),[N,ae]=(0,e.useState)(u??D(`wheel-thickness`).default),[oe,se]=(0,e.useState)(d??D(`dot-size`).default),[P,ce]=(0,e.useState)(f||D(`dot-position`).default),[F,le]=(0,e.useState)(p??D(`handle-thickness`).default),[I,ue]=(0,e.useState)(m||(D(`handle-color`).default===`black`?`#000000`:D(`handle-color`).default)),[L,de]=(0,e.useState)(h??D(`harmony-polygon`).default),[R,fe]=(0,e.useState)(g||(D(`polygon-color`).default===`black`?`#000000`:D(`polygon-color`).default)),[z,pe]=(0,e.useState)(_??D(`polygon-thickness`).default),[B,me]=(0,e.useState)(v||(D(`center-dot`).default===`white`?`#ffffff`:D(`center-dot`).default)),[V,he]=(0,e.useState)(y),[H,ge]=(0,e.useState)(b),[U,_e]=(0,e.useState)(x),[W,G]=(0,e.useState)(0);(0,e.useEffect)(()=>{r!==void 0&&te(r)},[r]),(0,e.useEffect)(()=>{s!==void 0&&ne(s)},[s]),(0,e.useEffect)(()=>{c!==void 0&&re(c)},[c]),(0,e.useEffect)(()=>{ie(l===void 0?j():l)},[l,j]),(0,e.useEffect)(()=>{u!==void 0&&ae(u)},[u]),(0,e.useEffect)(()=>{d!==void 0&&se(d)},[d]),(0,e.useEffect)(()=>{f!==void 0&&ce(f)},[f]),(0,e.useEffect)(()=>{p!==void 0&&le(p)},[p]),(0,e.useEffect)(()=>{m!==void 0&&ue(m)},[m]),(0,e.useEffect)(()=>{h!==void 0&&de(h)},[h]),(0,e.useEffect)(()=>{g!==void 0&&fe(g)},[g]),(0,e.useEffect)(()=>{_!==void 0&&pe(_)},[_]),(0,e.useEffect)(()=>{v!==void 0&&me(v)},[v]),(0,e.useEffect)(()=>{he(y)},[y]),(0,e.useEffect)(()=>{ge(b)},[b]),(0,e.useEffect)(()=>{_e(x)},[x]);let K={x:S/2,y:C/2},q=e=>(e+360)%360,J=(0,e.useCallback)((e,t=k,n=A)=>`hsl(${e}, ${t}%, ${n}%)`,[k,A]),ve=(e,t,n)=>{t/=100,n/=100;let r=(1-Math.abs(2*n-1))*t,i=r*(1-Math.abs(e/60%2-1)),a=n-r/2,o=0,s=0,c=0;return e<60?[o,s,c]=[r,i,0]:e<120?[o,s,c]=[i,r,0]:e<180?[o,s,c]=[0,r,i]:e<240?[o,s,c]=[0,i,r]:e<300?[o,s,c]=[i,0,r]:[o,s,c]=[r,0,i],{r:Math.round((o+a)*255),g:Math.round((s+a)*255),b:Math.round((c+a)*255)}},ye=(e,t,n)=>`#`+[e,t,n].map(e=>e.toString(16).padStart(2,`0`)).join(``),Y=(0,e.useCallback)(()=>P===`center`?M:P===`inner`?M-N/2:M+N/2,[P,M,N]),X=(0,e.useCallback)(e=>{let t=(e-90)*Math.PI/180,n=Y();return{x:K.x+n*Math.cos(t),y:K.y+n*Math.sin(t)}},[K.x,K.y,Y]),Z=(e,t)=>{let n=e-K.x,r=t-K.y,i=Math.atan2(r,n)*180/Math.PI;return q(i+90)},Q=(0,e.useCallback)(()=>{let e=[];e=O===`monochromatic`?[{h:W,l:30},{h:W,l:50},{h:W,l:70}]:a[O].map(e=>({h:q(W+e),l:A}));let t=e.map(e=>{let t=ve(e.h,k,e.l);return ye(t.r,t.g,t.b)});return{[O]:t}},[O,W,k,A]),be=(0,e.useCallback)(e=>{for(let t=0;t<360;t++)e.beginPath(),e.strokeStyle=`hsl(${t},100%,50%)`,e.lineWidth=N,e.arc(K.x,K.y,M,(t-90)*Math.PI/180,(t-89)*Math.PI/180),e.stroke()},[K.x,K.y,M,N]),xe=(0,e.useCallback)((e,t)=>{!L||t.length<3||(e.beginPath(),e.moveTo(t[0].x,t[0].y),t.slice(1).forEach(t=>{e.lineTo(t.x,t.y)}),e.closePath(),e.strokeStyle=R,e.lineWidth=z,e.stroke())},[L,R,z]),Se=(0,e.useCallback)(e=>{if(O===`simple`)return;let t=a[O],n=[];t.forEach(t=>{let r=q(W+t),i=X(r);n.push(i),e.beginPath(),e.moveTo(K.x,K.y),e.lineTo(i.x,i.y),e.strokeStyle=I,e.lineWidth=F,e.stroke(),e.beginPath(),e.arc(i.x,i.y,oe,0,Math.PI*2),e.fillStyle=J(r),e.fill(),e.strokeStyle=`white`,e.stroke()}),xe(e,n),V&&(e.beginPath(),e.arc(K.x,K.y,5,0,Math.PI*2),e.fillStyle=B,e.fill(),e.strokeStyle=`white`,e.lineWidth=1,e.stroke())},[O,W,K.x,K.y,oe,F,I,B,V,X,J,xe]),Ce=(0,e.useCallback)(()=>{let e=w.current;if(!e)return;let t=e.getContext(`2d`);t&&(t.clearRect(0,0,e.width,e.height),U&&U!==`transparent`?(t.fillStyle=U,t.fillRect(0,0,e.width,e.height)):U===`transparent`&&(t.fillStyle=E?`#1a1a1a`:`#ffffff`,t.fillRect(0,0,e.width,e.height)),be(t),Se(t),H&&(t.strokeStyle=H,t.lineWidth=1,t.strokeRect(0,0,e.width,e.height)))},[be,Se,H,U,E]),we=()=>T(!0),Te=()=>T(!1),Ee=()=>T(!1),De=e=>{if(!ee)return;let t=w.current;if(!t)return;let n=t.getBoundingClientRect(),r=Z(e.clientX-n.left,e.clientY-n.top);G(r)},Oe=e=>{let t=w.current;if(!t)return;let n=t.getBoundingClientRect(),r=Z(e.clientX-n.left,e.clientY-n.top);G(r)};(0,e.useEffect)(()=>{Ce()},[Ce]);let $=(0,e.useMemo)(()=>Q(),[Q]);(0,e.useEffect)(()=>{n&&n($)},[$,n]);let ke=(0,e.useCallback)(()=>$,[$]);return(0,e.useEffect)(()=>(window.getColorWheelPalette=ke,()=>{delete window.getColorWheelPalette}),[ke]),(0,t.jsx)(`div`,{className:`color-wheel-container`,children:(0,t.jsx)(`canvas`,{ref:w,width:S,height:C,onMouseDown:we,onMouseUp:Te,onMouseLeave:Ee,onMouseMove:De,onClick:Oe,style:{display:`block`,margin:`0 auto`,cursor:`pointer`}})})}exports.ColorWheel=s,exports.ThemeProvider=r,exports.useTheme=i;

package/dist/index.mjs

@@ -1,364 +1,377 @@
-import { jsx as J } from "react/jsx-runtime";
-import { useContext as Ae, useState as o, useEffect as a, createContext as Xe, useRef as _e, useCallback as d, useMemo as qe } from "react";
-const ye = Xe({
-  isDark: !1,
-  setIsDark: () => {
-  }
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+// src/ThemeContext.tsx
+var c = e({
+	isDark: !1,
+	setIsDark: () => {}
 });
-function Ke({ children: P }) {
-  const [u, b] = o(() => localStorage.getItem("theme") === "dark");
-  return a(() => {
-    document.documentElement.setAttribute("data-theme", u ? "dark" : "light"), localStorage.setItem("theme", u ? "dark" : "light");
-  }, [u]), /* @__PURE__ */ J(ye.Provider, { value: { isDark: u, setIsDark: b }, children: P });
+function l({ children: e }) {
+	let [t, n] = o(() => localStorage.getItem("theme") === "dark");
+	return r(() => {
+		document.documentElement.setAttribute("data-theme", t ? "dark" : "light"), localStorage.setItem("theme", t ? "dark" : "light");
+	}, [t]), /* @__PURE__ */ s(c.Provider, {
+		value: {
+			isDark: t,
+			setIsDark: n
+		},
+		children: e
+	});
 }
-function Be() {
-  return Ae(ye);
+function ee() {
+	return n(c);
 }
-const ge = {
-  complementary: [0, 180],
-  analogous: [-30, 0, 30],
-  monochromatic: [0],
-  split: [0, 150, -150],
-  triadic: [0, 120, 240],
-  square: [0, 90, 180, 270],
-  simple: [0]
-}, Fe = [
-  {
-    name: "Harmony Mode",
-    attribute: "harmony-mode",
-    default: "split",
-    show: !0,
-    notes: ""
-  },
-  {
-    name: "Saturation",
-    attribute: "saturation",
-    default: 100,
-    show: !0,
-    notes: ""
-  },
-  {
-    name: "Brightness",
-    attribute: "brightness",
-    default: 50,
-    show: !0,
-    notes: ""
-  },
-  {
-    name: "Circle Radius",
-    attribute: "circle-radius",
-    default: 1,
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Wheel Thickness",
-    attribute: "wheel-thickness",
-    default: 80,
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Dot Size",
-    attribute: "dot-size",
-    default: 5,
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Dot Position",
-    attribute: "dot-position",
-    default: "outer",
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Handle Thickness",
-    attribute: "handle-thickness",
-    default: 2,
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Handle Color",
-    attribute: "handle-color",
-    default: "#000000",
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Show Harmony Polygon",
-    attribute: "harmony-polygon",
-    default: !1,
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Polygon Color",
-    attribute: "polygon-color",
-    default: "#000000",
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Polygon Thickness",
-    attribute: "polygon-thickness",
-    default: 1,
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Center Dot",
-    attribute: "center-dot",
-    default: "#ffffff",
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Palette",
-    attribute: "palette",
-    default: null,
-    show: !1,
-    notes: "If not passed, default it is false"
-  },
-  {
-    name: "Palette JSON",
-    attribute: "palette-json",
-    default: null,
-    show: !1,
-    notes: "If not passed, default it is false"
-  }
+// src/ColorWheel.tsx
+var u = {
+	complementary: [0, 180],
+	analogous: [
+		-30,
+		0,
+		30
+	],
+	monochromatic: [0],
+	split: [
+		0,
+		150,
+		-150
+	],
+	triadic: [
+		0,
+		120,
+		240
+	],
+	square: [
+		0,
+		90,
+		180,
+		270
+	],
+	simple: [0]
+}, te = [
+	{
+		name: "Harmony Mode",
+		attribute: "harmony-mode",
+		default: "split",
+		show: !0,
+		notes: ""
+	},
+	{
+		name: "Saturation",
+		attribute: "saturation",
+		default: 100,
+		show: !0,
+		notes: ""
+	},
+	{
+		name: "Brightness",
+		attribute: "brightness",
+		default: 50,
+		show: !0,
+		notes: ""
+	},
+	{
+		name: "Circle Radius",
+		attribute: "circle-radius",
+		default: 1,
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Wheel Thickness",
+		attribute: "wheel-thickness",
+		default: 80,
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Dot Size",
+		attribute: "dot-size",
+		default: 5,
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Dot Position",
+		attribute: "dot-position",
+		default: "outer",
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Handle Thickness",
+		attribute: "handle-thickness",
+		default: 2,
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Handle Color",
+		attribute: "handle-color",
+		default: "#000000",
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Show Harmony Polygon",
+		attribute: "harmony-polygon",
+		default: !1,
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Polygon Color",
+		attribute: "polygon-color",
+		default: "#000000",
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Polygon Thickness",
+		attribute: "polygon-thickness",
+		default: 1,
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Center Dot",
+		attribute: "center-dot",
+		default: "#ffffff",
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Palette",
+		attribute: "palette",
+		default: null,
+		show: !1,
+		notes: "If not passed, default it is false"
+	},
+	{
+		name: "Palette JSON",
+		attribute: "palette-json",
+		default: null,
+		show: !1,
+		notes: "If not passed, default it is false"
+	}
 ];
-function Qe({
-  onColorsChange: P,
-  harmonyMode: u,
-  saturation: b,
-  brightness: C,
-  circleRadius: w,
-  wheelThickness: k,
-  dotSize: v,
-  dotPosition: R,
-  handleThickness: T,
-  handleColor: D,
-  harmonyPolygon: E,
-  polygonColor: L,
-  polygonThickness: W,
-  centerDot: N,
-  showCenterDot: z = !1,
-  borderColor: A = "#ffffff",
-  canvasBackgroundColor: X = "transparent",
-  width: O = 450,
-  height: $ = 450
-}) {
-  const j = _e(null), [be, _] = o(!1), { isDark: K } = Be(), l = (e) => Fe.find((t) => t.attribute === e), [c, we] = o(
-    u || l("harmony-mode").default
-  ), [H, ke] = o(
-    b ?? l("saturation").default
-  ), [U, ve] = o(
-    C ?? l("brightness").default
-  ), q = d(() => {
-    const e = l("circle-radius").default;
-    if (w !== void 0) return w;
-    if (e === 1) {
-      const t = Math.min(O, $), s = k ?? l("wheel-thickness").default, n = v ?? l("dot-size").default;
-      return t / 2 - s / 2 - n - 10;
-    }
-    return e;
-  }, [O, $, w, k, v]), [M, Q] = o(q()), [I, Me] = o(
-    k ?? l("wheel-thickness").default
-  ), [V, Pe] = o(
-    v ?? l("dot-size").default
-  ), [B, Ie] = o(
-    R || l("dot-position").default
-  ), [Z, Se] = o(
-    T ?? l("handle-thickness").default
-  ), [x, Ce] = o(
-    D || (l("handle-color").default === "black" ? "#000000" : l("handle-color").default)
-  ), [p, Re] = o(
-    E ?? l("harmony-polygon").default
-  ), [ee, Te] = o(
-    L || (l("polygon-color").default === "black" ? "#000000" : l("polygon-color").default)
-  ), [te, De] = o(
-    W ?? l("polygon-thickness").default
-  ), [se, Ee] = o(
-    N || (l("center-dot").default === "white" ? "#ffffff" : l("center-dot").default)
-  ), [ne, Le] = o(z), [F, We] = o(A), [S, Ne] = o(
-    X
-  ), [h, ae] = o(0);
-  a(() => {
-    u !== void 0 && we(u);
-  }, [u]), a(() => {
-    b !== void 0 && ke(b);
-  }, [b]), a(() => {
-    C !== void 0 && ve(C);
-  }, [C]), a(() => {
-    Q(w !== void 0 ? w : q());
-  }, [w, q]), a(() => {
-    k !== void 0 && Me(k);
-  }, [k]), a(() => {
-    v !== void 0 && Pe(v);
-  }, [v]), a(() => {
-    R !== void 0 && Ie(R);
-  }, [R]), a(() => {
-    T !== void 0 && Se(T);
-  }, [T]), a(() => {
-    D !== void 0 && Ce(D);
-  }, [D]), a(() => {
-    E !== void 0 && Re(E);
-  }, [E]), a(() => {
-    L !== void 0 && Te(L);
-  }, [L]), a(() => {
-    W !== void 0 && De(W);
-  }, [W]), a(() => {
-    N !== void 0 && Ee(N);
-  }, [N]), a(() => {
-    Le(z);
-  }, [z]), a(() => {
-    We(A);
-  }, [A]), a(() => {
-    Ne(X);
-  }, [X]);
-  const i = { x: O / 2, y: $ / 2 }, G = (e) => (e + 360) % 360, oe = d(
-    (e, t = H, s = U) => `hsl(${e}, ${t}%, ${s}%)`,
-    [H, U]
-  ), Oe = (e, t, s) => {
-    t /= 100, s /= 100;
-    const n = (1 - Math.abs(2 * s - 1)) * t, f = n * (1 - Math.abs(e / 60 % 2 - 1)), r = s - n / 2;
-    let m = 0, g = 0, y = 0;
-    return e < 60 ? [m, g, y] = [n, f, 0] : e < 120 ? [m, g, y] = [f, n, 0] : e < 180 ? [m, g, y] = [0, n, f] : e < 240 ? [m, g, y] = [0, f, n] : e < 300 ? [m, g, y] = [f, 0, n] : [m, g, y] = [n, 0, f], {
-      r: Math.round((m + r) * 255),
-      g: Math.round((g + r) * 255),
-      b: Math.round((y + r) * 255)
-    };
-  }, $e = (e, t, s) => "#" + [e, t, s].map((n) => n.toString(16).padStart(2, "0")).join(""), le = d(() => B === "center" ? M : B === "inner" ? M - I / 2 : M + I / 2, [B, M, I]), ie = d(
-    (e) => {
-      const t = (e - 90) * Math.PI / 180, s = le();
-      return {
-        x: i.x + s * Math.cos(t),
-        y: i.y + s * Math.sin(t)
-      };
-    },
-    [i.x, i.y, le]
-  ), fe = (e, t) => {
-    const s = e - i.x, n = t - i.y, f = Math.atan2(n, s) * 180 / Math.PI;
-    return G(f + 90);
-  }, de = d(() => {
-    let e = [];
-    c === "monochromatic" ? e = [
-      { h, l: 30 },
-      { h, l: 50 },
-      { h, l: 70 }
-    ] : e = ge[c].map((s) => ({
-      h: G(h + s),
-      l: U
-    }));
-    const t = e.map((s) => {
-      const n = Oe(s.h, H, s.l);
-      return $e(n.r, n.g, n.b);
-    });
-    return {
-      [c]: t
-    };
-  }, [c, h, H, U]), ue = d(
-    (e) => {
-      for (let t = 0; t < 360; t++)
-        e.beginPath(), e.strokeStyle = `hsl(${t},100%,50%)`, e.lineWidth = I, e.arc(
-          i.x,
-          i.y,
-          M,
-          (t - 90) * Math.PI / 180,
-          (t - 89) * Math.PI / 180
-        ), e.stroke();
-    },
-    [i.x, i.y, M, I]
-  ), re = d(
-    (e, t) => {
-      !p || t.length < 3 || (e.beginPath(), e.moveTo(t[0].x, t[0].y), t.slice(1).forEach((s) => {
-        e.lineTo(s.x, s.y);
-      }), e.closePath(), e.strokeStyle = ee, e.lineWidth = te, e.stroke());
-    },
-    [p, ee, te]
-  ), ce = d(
-    (e) => {
-      if (c === "simple")
-        return;
-      const t = ge[c], s = [];
-      t.forEach((n) => {
-        const f = G(h + n), r = ie(f);
-        s.push(r), e.beginPath(), e.moveTo(i.x, i.y), e.lineTo(r.x, r.y), e.strokeStyle = x, e.lineWidth = Z, e.stroke(), e.beginPath(), e.arc(r.x, r.y, V, 0, Math.PI * 2), e.fillStyle = oe(f), e.fill(), e.strokeStyle = "white", e.stroke();
-      }), re(e, s), ne && (e.beginPath(), e.arc(i.x, i.y, 5, 0, Math.PI * 2), e.fillStyle = se, e.fill(), e.strokeStyle = "white", e.lineWidth = 1, e.stroke());
-    },
-    [
-      c,
-      h,
-      i.x,
-      i.y,
-      V,
-      Z,
-      x,
-      se,
-      ne,
-      ie,
-      oe,
-      re
-    ]
-  ), he = d(() => {
-    const e = j.current;
-    if (!e) return;
-    const t = e.getContext("2d");
-    t && (t.clearRect(0, 0, e.width, e.height), S && S !== "transparent" ? (t.fillStyle = S, t.fillRect(0, 0, e.width, e.height)) : S === "transparent" && (t.fillStyle = K ? "#1a1a1a" : "#ffffff", t.fillRect(0, 0, e.width, e.height)), ue(t), ce(t), F && (t.strokeStyle = F, t.lineWidth = 1, t.strokeRect(0, 0, e.width, e.height)));
-  }, [
-    ue,
-    ce,
-    F,
-    S,
-    K
-  ]), je = () => _(!0), He = () => _(!1), Ue = () => _(!1), Ye = (e) => {
-    if (!be) return;
-    const t = j.current;
-    if (!t) return;
-    const s = t.getBoundingClientRect(), n = fe(e.clientX - s.left, e.clientY - s.top);
-    ae(n);
-  }, ze = (e) => {
-    const t = j.current;
-    if (!t) return;
-    const s = t.getBoundingClientRect(), n = fe(e.clientX - s.left, e.clientY - s.top);
-    ae(n);
-  };
-  a(() => {
-    he();
-  }, [he]);
-  const Y = qe(() => de(), [de]);
-  a(() => {
-    P && P(Y);
-  }, [Y, P]);
-  const me = d(
-    () => Y,
-    [Y]
-  );
-  return a(() => (window.getColorWheelPalette = me, () => {
-    delete window.getColorWheelPalette;
-  }), [me]), /* @__PURE__ */ J("div", { className: "color-wheel-container", children: /* @__PURE__ */ J(
-    "canvas",
-    {
-      ref: j,
-      width: O,
-      height: $,
-      onMouseDown: je,
-      onMouseUp: He,
-      onMouseLeave: Ue,
-      onMouseMove: Ye,
-      onClick: ze,
-      style: {
-        display: "block",
-        margin: "0 auto",
-        cursor: "pointer"
-      }
-    }
-  ) });
+function d({ onColorsChange: e, harmonyMode: n, saturation: c, brightness: l, circleRadius: d, wheelThickness: f, dotSize: p, dotPosition: m, handleThickness: h, handleColor: g, harmonyPolygon: _, polygonColor: v, polygonThickness: y, centerDot: b, showCenterDot: x = !1, borderColor: S = "#ffffff", canvasBackgroundColor: C = "transparent", width: w = 450, height: T = 450 }) {
+	let E = a(null), [ne, D] = o(!1), { isDark: O } = ee(), k = (e) => te.find((t) => t.attribute === e), [A, re] = o(n || k("harmony-mode").default), [j, ie] = o(c ?? k("saturation").default), [M, ae] = o(l ?? k("brightness").default), N = t(() => {
+		let e = k("circle-radius").default;
+		if (d !== void 0) return d;
+		if (e === 1) {
+			let e = Math.min(w, T), t = f ?? k("wheel-thickness").default, n = p ?? k("dot-size").default;
+			return e / 2 - t / 2 - n - 10;
+		}
+		return e;
+	}, [
+		w,
+		T,
+		d,
+		f,
+		p
+	]), [P, oe] = o(N()), [F, se] = o(f ?? k("wheel-thickness").default), [I, ce] = o(p ?? k("dot-size").default), [L, le] = o(m || k("dot-position").default), [R, ue] = o(h ?? k("handle-thickness").default), [z, de] = o(g || (k("handle-color").default === "black" ? "#000000" : k("handle-color").default)), [B, fe] = o(_ ?? k("harmony-polygon").default), [V, pe] = o(v || (k("polygon-color").default === "black" ? "#000000" : k("polygon-color").default)), [H, me] = o(y ?? k("polygon-thickness").default), [U, he] = o(b || (k("center-dot").default === "white" ? "#ffffff" : k("center-dot").default)), [W, ge] = o(x), [G, _e] = o(S), [K, ve] = o(C), [q, J] = o(0);
+	r(() => {
+		n !== void 0 && re(n);
+	}, [n]), r(() => {
+		c !== void 0 && ie(c);
+	}, [c]), r(() => {
+		l !== void 0 && ae(l);
+	}, [l]), r(() => {
+		oe(d === void 0 ? N() : d);
+	}, [d, N]), r(() => {
+		f !== void 0 && se(f);
+	}, [f]), r(() => {
+		p !== void 0 && ce(p);
+	}, [p]), r(() => {
+		m !== void 0 && le(m);
+	}, [m]), r(() => {
+		h !== void 0 && ue(h);
+	}, [h]), r(() => {
+		g !== void 0 && de(g);
+	}, [g]), r(() => {
+		_ !== void 0 && fe(_);
+	}, [_]), r(() => {
+		v !== void 0 && pe(v);
+	}, [v]), r(() => {
+		y !== void 0 && me(y);
+	}, [y]), r(() => {
+		b !== void 0 && he(b);
+	}, [b]), r(() => {
+		ge(x);
+	}, [x]), r(() => {
+		_e(S);
+	}, [S]), r(() => {
+		ve(C);
+	}, [C]);
+	let Y = {
+		x: w / 2,
+		y: T / 2
+	}, X = (e) => (e + 360) % 360, Z = t((e, t = j, n = M) => `hsl(${e}, ${t}%, ${n}%)`, [j, M]), ye = (e, t, n) => {
+		t /= 100, n /= 100;
+		let r = (1 - Math.abs(2 * n - 1)) * t, i = r * (1 - Math.abs(e / 60 % 2 - 1)), a = n - r / 2, o = 0, s = 0, c = 0;
+		return e < 60 ? [o, s, c] = [
+			r,
+			i,
+			0
+		] : e < 120 ? [o, s, c] = [
+			i,
+			r,
+			0
+		] : e < 180 ? [o, s, c] = [
+			0,
+			r,
+			i
+		] : e < 240 ? [o, s, c] = [
+			0,
+			i,
+			r
+		] : e < 300 ? [o, s, c] = [
+			i,
+			0,
+			r
+		] : [o, s, c] = [
+			r,
+			0,
+			i
+		], {
+			r: Math.round((o + a) * 255),
+			g: Math.round((s + a) * 255),
+			b: Math.round((c + a) * 255)
+		};
+	}, be = (e, t, n) => "#" + [
+		e,
+		t,
+		n
+	].map((e) => e.toString(16).padStart(2, "0")).join(""), xe = t(() => L === "center" ? P : L === "inner" ? P - F / 2 : P + F / 2, [
+		L,
+		P,
+		F
+	]), Se = t((e) => {
+		let t = (e - 90) * Math.PI / 180, n = xe();
+		return {
+			x: Y.x + n * Math.cos(t),
+			y: Y.y + n * Math.sin(t)
+		};
+	}, [
+		Y.x,
+		Y.y,
+		xe
+	]), Ce = (e, t) => {
+		let n = e - Y.x, r = t - Y.y, i = Math.atan2(r, n) * 180 / Math.PI;
+		return X(i + 90);
+	}, we = t(() => {
+		let e = [];
+		e = A === "monochromatic" ? [
+			{
+				h: q,
+				l: 30
+			},
+			{
+				h: q,
+				l: 50
+			},
+			{
+				h: q,
+				l: 70
+			}
+		] : u[A].map((e) => ({
+			h: X(q + e),
+			l: M
+		}));
+		let t = e.map((e) => {
+			let t = ye(e.h, j, e.l);
+			return be(t.r, t.g, t.b);
+		});
+		return { [A]: t };
+	}, [
+		A,
+		q,
+		j,
+		M
+	]), Te = t((e) => {
+		for (let t = 0; t < 360; t++) e.beginPath(), e.strokeStyle = `hsl(${t},100%,50%)`, e.lineWidth = F, e.arc(Y.x, Y.y, P, (t - 90) * Math.PI / 180, (t - 89) * Math.PI / 180), e.stroke();
+	}, [
+		Y.x,
+		Y.y,
+		P,
+		F
+	]), Ee = t((e, t) => {
+		!B || t.length < 3 || (e.beginPath(), e.moveTo(t[0].x, t[0].y), t.slice(1).forEach((t) => {
+			e.lineTo(t.x, t.y);
+		}), e.closePath(), e.strokeStyle = V, e.lineWidth = H, e.stroke());
+	}, [
+		B,
+		V,
+		H
+	]), De = t((e) => {
+		if (A === "simple") return;
+		let t = u[A], n = [];
+		t.forEach((t) => {
+			let r = X(q + t), i = Se(r);
+			n.push(i), e.beginPath(), e.moveTo(Y.x, Y.y), e.lineTo(i.x, i.y), e.strokeStyle = z, e.lineWidth = R, e.stroke(), e.beginPath(), e.arc(i.x, i.y, I, 0, Math.PI * 2), e.fillStyle = Z(r), e.fill(), e.strokeStyle = "white", e.stroke();
+		}), Ee(e, n), W && (e.beginPath(), e.arc(Y.x, Y.y, 5, 0, Math.PI * 2), e.fillStyle = U, e.fill(), e.strokeStyle = "white", e.lineWidth = 1, e.stroke());
+	}, [
+		A,
+		q,
+		Y.x,
+		Y.y,
+		I,
+		R,
+		z,
+		U,
+		W,
+		Se,
+		Z,
+		Ee
+	]), Oe = t(() => {
+		let e = E.current;
+		if (!e) return;
+		let t = e.getContext("2d");
+		t && (t.clearRect(0, 0, e.width, e.height), K && K !== "transparent" ? (t.fillStyle = K, t.fillRect(0, 0, e.width, e.height)) : K === "transparent" && (t.fillStyle = O ? "#1a1a1a" : "#ffffff", t.fillRect(0, 0, e.width, e.height)), Te(t), De(t), G && (t.strokeStyle = G, t.lineWidth = 1, t.strokeRect(0, 0, e.width, e.height)));
+	}, [
+		Te,
+		De,
+		G,
+		K,
+		O
+	]), ke = () => D(!0), Ae = () => D(!1), je = () => D(!1), Me = (e) => {
+		if (!ne) return;
+		let t = E.current;
+		if (!t) return;
+		let n = t.getBoundingClientRect(), r = Ce(e.clientX - n.left, e.clientY - n.top);
+		J(r);
+	}, Ne = (e) => {
+		let t = E.current;
+		if (!t) return;
+		let n = t.getBoundingClientRect(), r = Ce(e.clientX - n.left, e.clientY - n.top);
+		J(r);
+	};
+	r(() => {
+		Oe();
+	}, [Oe]);
+	let Q = i(() => we(), [we]);
+	r(() => {
+		e && e(Q);
+	}, [Q, e]);
+	let $ = t(() => Q, [Q]);
+	return r(() => (window.getColorWheelPalette = $, () => {
+		delete window.getColorWheelPalette;
+	}), [$]), /* @__PURE__ */ s("div", {
+		className: "color-wheel-container",
+		children: /* @__PURE__ */ s("canvas", {
+			ref: E,
+			width: w,
+			height: T,
+			onMouseDown: ke,
+			onMouseUp: Ae,
+			onMouseLeave: je,
+			onMouseMove: Me,
+			onClick: Ne,
+			style: {
+				display: "block",
+				margin: "0 auto",
+				cursor: "pointer"
+			}
+		})
+	});
 }
-export {
-  Qe as ColorWheel,
-  Ke as ThemeProvider,
-  Be as useTheme
-};
+export { d as ColorWheel, l as ThemeProvider, ee as useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiotoolkit/color-wheel",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "description": "Interactive color wheel React component for creating and manipulating color harmonies with multiple harmony modes",
   "author": "StudioToolkit",
@@ -53,17 +53,6 @@
   "engines": {
     "node": ">=16.0.0"
   },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0 || ^19.0.0",
-    "@types/react-dom": "^18.2.0 || ^19.0.0",
-    "@vitejs/plugin-react": "^4.2.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.0"
-  },
   "scripts": {
     "build": "npx tsc --project tsconfig.json && vite build && cp src/ColorWheel.css dist/style.css",
     "dev": "vite build --watch",
@@ -72,6 +61,20 @@
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:ui": "vitest --ui"
+    "test:ui": "vitest --ui",
+    "prepublishOnly": "pnpm run build && pnpm test"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.2.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.6"
   }
-}
+}