@studiotoolkit/color-wheel 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Studio Toolkit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,152 @@
+# Color Wheel
+
+Interactive color wheel React component for creating and manipulating color harmonies with support for multiple harmony modes and customization options.
+
+**Play around and Generate component code here:**  
+https://studiotoolkit.github.io/build-color-wheel
+
+**Complete Demo:**  
+https://studiotoolkit.github.io/demo-all
+
+## Features
+
+### Harmony Modes
+
+<table>
+<tr>
+<td align="center"><img src="assets/analogous.png" width="100"/><br/>Analogous</td>
+<td align="center"><img src="assets/complementary.png" width="100"/><br/>Complementary</td>
+<td align="center"><img src="assets/monochromatic.png" width="100"/><br/>Monochromatic</td>
+<td align="center"><img src="assets/simple.png" width="100"/><br/>Simple</td>
+</tr>
+<tr>
+<td align="center"><img src="assets/split-complementary.png" width="100"/><br/>Split Complementary</td>
+<td align="center"><img src="assets/square.png" width="100"/><br/>Square</td>
+<td align="center"><img src="assets/triadic.png" width="100"/><br/>Triadic</td>
+<td align="center"></td>
+</tr>
+</table>
+
+### Customization Options
+
+<table>
+<tr>
+<td align="center"><img src="assets/background-image.png" width="100"/><br/>Background Color</td>
+<td align="center"><img src="assets/center-dot.png" width="100"/><br/>Center Dot</td>
+<td align="center"><img src="assets/harmony-polygon.png" width="100"/><br/>Harmony Polygon</td>
+<td align="center"><img src="assets/thickness.png" width="100"/><br/>Thickness</td>
+</tr>
+<tr>
+<td align="center"><img src="assets/thickness2.png" width="100"/><br/>Thickness variation</td>
+<td align="center"></td>
+<td align="center"></td>
+<td align="center"></td>
+</tr>
+</table>
+
+## Installation
+
+```bash
+# Using pnpm
+pnpm add @studiotoolkit/color-wheel
+
+# Using npm
+npm install @studiotoolkit/color-wheel
+
+# Using yarn
+yarn add @studiotoolkit/color-wheel
+```
+
+**React Version:** `^18.0.0` or higher
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { ColorWheel } from '@studiotoolkit/color-wheel';
+import '@studiotoolkit/color-wheel/style.css';
+
+function App() {
+  const handleColorsChange = (palette) => {
+    console.log('Selected colors:', palette);
+  };
+
+  return (
+    <ColorWheel
+      onColorsChange={handleColorsChange}
+      harmonyMode="complementary"
+      width={300}
+      height={300}
+    />
+  );
+}
+```
+
+**Sample Output:**
+
+```json
+{
+  "split": ["#00b1ff", "#ff0031", "#ffce00"]
+}
+```
+
+### With Custom Styling
+
+```tsx
+import { ColorWheel } from '@studiotoolkit/color-wheel';
+import '@studiotoolkit/color-wheel/style.css';
+
+function App() {
+  const handleColorsChange = (palette) => {
+    console.log('Selected colors:', palette);
+  };
+
+  return (
+    <ColorWheel
+      onColorsChange={handleColorsChange}
+      harmonyMode="triadic"
+      saturation={100}
+      brightness={50}
+      width={400}
+      height={400}
+      wheelThickness={80}
+      dotSize={5}
+      dotPosition="outer"
+      handleThickness={2}
+      handleColor="#000000"
+      harmonyPolygon={true}
+      polygonColor="#000000"
+      polygonThickness={1}
+      showCenterDot={true}
+      centerDot="#ffffff"
+      borderColor="#ffffff"
+      canvasBackgroundColor="transparent"
+    />
+  );
+}
+```
+
+### Harmony Modes
+
+The ColorWheel supports the following harmony modes:
+
+- `complementary` - Colors opposite on the color wheel
+- `analogous` - Adjacent colors on the color wheel
+- `monochromatic` - Variations of a single hue
+- `split` - Split complementary harmony
+- `triadic` - Three evenly spaced colors
+- `square` - Four evenly spaced colors
+- `simple` - Single color selection
+
+## Contributors
+
+[StudioToolkit](https://github.com/studiotoolkit)
+
+## License
+
+Licensed under the MIT License.
+
+## Keywords
+
+color-wheel, color-picker, color-harmony, harmony-polygon, react-color, color-selection, design-tools, ui-components

package/dist/ColorWheel.d.ts

@@ -0,0 +1,35 @@
+import "./ColorWheel.css";
+type HarmonyMode = "complementary" | "analogous" | "monochromatic" | "split" | "triadic" | "square" | "simple";
+type DotPosition = "center" | "inner" | "outer";
+export interface ColorData {
+    HEX: string;
+    RGB: [number, number, number];
+    HSL: [number, number, number];
+}
+export interface PaletteOutput {
+    [key: string]: string[];
+}
+interface ColorWheelProps {
+    onColorsChange?: (palette: PaletteOutput) => void;
+    harmonyMode?: HarmonyMode;
+    saturation?: number;
+    brightness?: number;
+    circleRadius?: number;
+    wheelThickness?: number;
+    dotSize?: number;
+    dotPosition?: DotPosition;
+    handleThickness?: number;
+    handleColor?: string;
+    harmonyPolygon?: boolean;
+    polygonColor?: string;
+    polygonThickness?: number;
+    centerDot?: string;
+    showCenterDot?: boolean;
+    borderColor?: string;
+    canvasBackgroundColor?: string;
+    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 {};
+//# sourceMappingURL=ColorWheel.d.ts.map

package/dist/ColorWheel.d.ts.map

@@ -0,0 +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"}

package/dist/ThemeContext.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+interface ThemeContextType {
+    isDark: boolean;
+    setIsDark: (v: boolean | ((prev: boolean) => boolean)) => void;
+}
+export declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextType;
+export {};
+//# sourceMappingURL=ThemeContext.d.ts.map

package/dist/ThemeContext.d.ts.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ColorWheel } from "./ColorWheel";
+export type { ColorData, PaletteOutput } from "./ColorWheel";
+export { ThemeProvider, useTheme } from "./ThemeContext";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +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;

package/dist/index.mjs

@@ -0,0 +1,364 @@
+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: () => {
+  }
+});
+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 Be() {
+  return Ae(ye);
+}
+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"
+  }
+];
+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"
+      }
+    }
+  ) });
+}
+export {
+  Qe as ColorWheel,
+  Ke as ThemeProvider,
+  Be as useTheme
+};

package/dist/style.css

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

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@studiotoolkit/color-wheel",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "Interactive color wheel React component for creating and manipulating color harmonies with multiple harmony modes",
+  "author": "StudioToolkit",
+  "homepage": "https://studiotoolkit.github.io/build-color-wheel",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/studiotoolkit/studiotoolkit",
+    "directory": "packages/color-wheel"
+  },
+  "bugs": {
+    "url": "https://github.com/studiotoolkit/studiotoolkit/issues"
+  },
+  "keywords": [
+    "color-wheel",
+    "color-picker",
+    "color-harmony",
+    "harmony-polygon",
+    "react-color",
+    "color-selection",
+    "design-tools",
+    "ui-components",
+    "complementary",
+    "analogous",
+    "triadic"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/ColorWheel.css",
+    "./src/ColorWheel.css": "./src/ColorWheel.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.0"
+  },
+  "scripts": {
+    "build": "npx tsc --project tsconfig.json && vite build",
+    "dev": "vite build --watch",
+    "clean": "rm -rf dist",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui"
+  }
+}