react-color-palette-wheel 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Milles Dyson Schroeder
+
+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

@@ -1,73 +1,55 @@
-# React + TypeScript + Vite
+# 🎨 React Color Palette Wheel
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A professional, lightweight, and fully typed color wheel component for React. Inspired by tools like Adobe Color, this library allows color selection based on **Chromatic Harmonies** (Triad, Complementary, Analogous, etc.) with geometric precision.
 
-Currently, two official plugins are available:
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-color-palette-wheel)
+![npm version](https://img.shields.io/npm/v/react-color-palette-wheel)
+![license](https://img.shields.io/npm/l/react-color-palette-wheel)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## ✨ Highlights
 
-## React Compiler
+* **Ultra Lightweight:** Only **~16.4kB** (packed).
+* **Mathematical Harmonies:** Precise algorithms for complex color schemes.
+* **TypeScript:** Native type definitions (`.d.ts`) included.
+* **Performance:** Optimized Canvas rendering.
+* **Zero Config:** Works out of the box with sensible defaults.
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## 📦 Installation
 
-## Expanding the ESLint configuration
+```bash
+npm install react-color-palette-wheel
+# or
+yarn add react-color-palette-wheel
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+## 🚀 Basic Usage
+
+```ts
+import { useState } from 'react';
+import { ColorWheel, HarmonyType, CursorData } from 'react-color-palette-wheel';
+
+function App() {
+    const [colors, setColors] = useState<CursorData[]>([]);
+
+    return (
+        <div>
+            <h1>Harmony Selector</h1>
+            
+            <ColorWheel
+                radius={250}                 // Wheel radius (Total diameter: 500px)
+                harmony={HarmonyType.Triad}  // Harmony type (e.g., Triad)
+                onChange={setColors}         // Callback with selected colors
+            />
+        </div>
+    );
+}
+```
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+## 🛠️ Build Details
+* **Formats:** ESM (.es.js) and UMD (.umd.js).
+* **Size:** ~16kB (Minified + Gzipped).
+* **Typing:** Full TypeScript support.
 
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+## 📄 License
+MIT

package/dist/react-color-palette-wheel.es.js

@@ -1,408 +1,150 @@
-import Se, { useState as Re, useRef as Q, useCallback as K, useEffect as le } from "react";
-var X = { exports: {} }, $ = {};
-var ue;
-function Ce() {
-  if (ue) return $;
-  ue = 1;
-  var e = /* @__PURE__ */ Symbol.for("react.transitional.element"), t = /* @__PURE__ */ Symbol.for("react.fragment");
-  function r(o, a, s) {
-    var i = null;
-    if (s !== void 0 && (i = "" + s), a.key !== void 0 && (i = "" + a.key), "key" in a) {
-      s = {};
-      for (var d in a)
-        d !== "key" && (s[d] = a[d]);
-    } else s = a;
-    return a = s.ref, {
-      $$typeof: e,
-      type: o,
-      key: i,
-      ref: a !== void 0 ? a : null,
-      props: s
-    };
-  }
-  return $.Fragment = t, $.jsx = r, $.jsxs = r, $;
-}
-var Y = {};
-var ce;
-function ke() {
-  return ce || (ce = 1, process.env.NODE_ENV !== "production" && (function() {
-    function e(n) {
-      if (n == null) return null;
-      if (typeof n == "function")
-        return n.$$typeof === G ? null : n.displayName || n.name || null;
-      if (typeof n == "string") return n;
-      switch (n) {
-        case y:
-          return "Fragment";
-        case P:
-          return "Profiler";
-        case x:
-          return "StrictMode";
-        case V:
-          return "Suspense";
-        case q:
-          return "SuspenseList";
-        case H:
-          return "Activity";
-      }
-      if (typeof n == "object")
-        switch (typeof n.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), n.$$typeof) {
-          case p:
-            return "Portal";
-          case k:
-            return n.displayName || "Context";
-          case j:
-            return (n._context.displayName || "Context") + ".Consumer";
-          case R:
-            var u = n.render;
-            return n = n.displayName, n || (n = u.displayName || u.name || "", n = n !== "" ? "ForwardRef(" + n + ")" : "ForwardRef"), n;
-          case A:
-            return u = n.displayName || null, u !== null ? u : e(n.type) || "Memo";
-          case O:
-            u = n._payload, n = n._init;
-            try {
-              return e(n(u));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function t(n) {
-      return "" + n;
-    }
-    function r(n) {
-      try {
-        t(n);
-        var u = !1;
-      } catch {
-        u = !0;
-      }
-      if (u) {
-        u = console;
-        var b = u.error, g = typeof Symbol == "function" && Symbol.toStringTag && n[Symbol.toStringTag] || n.constructor.name || "Object";
-        return b.call(
-          u,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          g
-        ), t(n);
-      }
-    }
-    function o(n) {
-      if (n === y) return "<>";
-      if (typeof n == "object" && n !== null && n.$$typeof === O)
-        return "<...>";
-      try {
-        var u = e(n);
-        return u ? "<" + u + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function a() {
-      var n = F.A;
-      return n === null ? null : n.getOwner();
-    }
-    function s() {
-      return Error("react-stack-top-frame");
-    }
-    function i(n) {
-      if (D.call(n, "key")) {
-        var u = Object.getOwnPropertyDescriptor(n, "key").get;
-        if (u && u.isReactWarning) return !1;
-      }
-      return n.key !== void 0;
-    }
-    function d(n, u) {
-      function b() {
-        ne || (ne = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          u
-        ));
-      }
-      b.isReactWarning = !0, Object.defineProperty(n, "key", {
-        get: b,
-        configurable: !0
-      });
-    }
-    function _() {
-      var n = e(this.type);
-      return oe[n] || (oe[n] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), n = this.props.ref, n !== void 0 ? n : null;
-    }
-    function m(n, u, b, g, z, B) {
-      var v = b.ref;
-      return n = {
-        $$typeof: f,
-        type: n,
-        key: u,
-        props: b,
-        _owner: g
-      }, (v !== void 0 ? v : null) !== null ? Object.defineProperty(n, "ref", {
-        enumerable: !1,
-        get: _
-      }) : Object.defineProperty(n, "ref", { enumerable: !1, value: null }), n._store = {}, Object.defineProperty(n._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(n, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(n, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: z
-      }), Object.defineProperty(n, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: B
-      }), Object.freeze && (Object.freeze(n.props), Object.freeze(n)), n;
-    }
-    function h(n, u, b, g, z, B) {
-      var v = u.children;
-      if (v !== void 0)
-        if (g)
-          if (L(v)) {
-            for (g = 0; g < v.length; g++)
-              N(v[g]);
-            Object.freeze && Object.freeze(v);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else N(v);
-      if (D.call(u, "key")) {
-        v = e(n);
-        var I = Object.keys(u).filter(function(we) {
-          return we !== "key";
-        });
-        g = 0 < I.length ? "{key: someKey, " + I.join(": ..., ") + ": ...}" : "{key: someKey}", ie[v + g] || (I = 0 < I.length ? "{" + I.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          g,
-          v,
-          I,
-          v
-        ), ie[v + g] = !0);
-      }
-      if (v = null, b !== void 0 && (r(b), v = "" + b), i(u) && (r(u.key), v = "" + u.key), "key" in u) {
-        b = {};
-        for (var Z in u)
-          Z !== "key" && (b[Z] = u[Z]);
-      } else b = u;
-      return v && d(
-        b,
-        typeof n == "function" ? n.displayName || n.name || "Unknown" : n
-      ), m(
-        n,
-        v,
-        b,
-        a(),
-        z,
-        B
-      );
-    }
-    function N(n) {
-      c(n) ? n._store && (n._store.validated = 1) : typeof n == "object" && n !== null && n.$$typeof === O && (n._payload.status === "fulfilled" ? c(n._payload.value) && n._payload.value._store && (n._payload.value._store.validated = 1) : n._store && (n._store.validated = 1));
-    }
-    function c(n) {
-      return typeof n == "object" && n !== null && n.$$typeof === f;
-    }
-    var l = Se, f = /* @__PURE__ */ Symbol.for("react.transitional.element"), p = /* @__PURE__ */ Symbol.for("react.portal"), y = /* @__PURE__ */ Symbol.for("react.fragment"), x = /* @__PURE__ */ Symbol.for("react.strict_mode"), P = /* @__PURE__ */ Symbol.for("react.profiler"), j = /* @__PURE__ */ Symbol.for("react.consumer"), k = /* @__PURE__ */ Symbol.for("react.context"), R = /* @__PURE__ */ Symbol.for("react.forward_ref"), V = /* @__PURE__ */ Symbol.for("react.suspense"), q = /* @__PURE__ */ Symbol.for("react.suspense_list"), A = /* @__PURE__ */ Symbol.for("react.memo"), O = /* @__PURE__ */ Symbol.for("react.lazy"), H = /* @__PURE__ */ Symbol.for("react.activity"), G = /* @__PURE__ */ Symbol.for("react.client.reference"), F = l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, D = Object.prototype.hasOwnProperty, L = Array.isArray, J = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    l = {
-      react_stack_bottom_frame: function(n) {
-        return n();
-      }
-    };
-    var ne, oe = {}, ae = l.react_stack_bottom_frame.bind(
-      l,
-      s
-    )(), se = J(o(s)), ie = {};
-    Y.Fragment = y, Y.jsx = function(n, u, b) {
-      var g = 1e4 > F.recentlyCreatedOwnerStacks++;
-      return h(
-        n,
-        u,
-        b,
-        !1,
-        g ? Error("react-stack-top-frame") : ae,
-        g ? J(o(n)) : se
-      );
-    }, Y.jsxs = function(n, u, b) {
-      var g = 1e4 > F.recentlyCreatedOwnerStacks++;
-      return h(
-        n,
-        u,
-        b,
-        !0,
-        g ? Error("react-stack-top-frame") : ae,
-        g ? J(o(n)) : se
-      );
-    };
-  })()), Y;
-}
-var fe;
-function Te() {
-  return fe || (fe = 1, process.env.NODE_ENV === "production" ? X.exports = Ce() : X.exports = ke()), X.exports;
-}
-var M = Te(), Ae = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, T = function(e) {
-  return typeof e == "string" ? e.length > 0 : typeof e == "number";
-}, E = function(e, t, r) {
-  return t === void 0 && (t = 0), r === void 0 && (r = Math.pow(10, t)), Math.round(r * e) / r + 0;
-}, S = function(e, t, r) {
-  return t === void 0 && (t = 0), r === void 0 && (r = 1), e > r ? r : e > t ? e : t;
-}, Ee = function(e) {
-  return (e = isFinite(e) ? e % 360 : 0) > 0 ? e : e + 360;
-}, de = function(e) {
-  return { r: S(e.r, 0, 255), g: S(e.g, 0, 255), b: S(e.b, 0, 255), a: S(e.a) };
-}, ee = function(e) {
-  return { r: E(e.r), g: E(e.g), b: E(e.b), a: E(e.a, 3) };
-}, Me = /^#([0-9a-f]{3,8})$/i, U = function(e) {
-  var t = e.toString(16);
-  return t.length < 2 ? "0" + t : t;
-}, _e = function(e) {
-  var t = e.r, r = e.g, o = e.b, a = e.a, s = Math.max(t, r, o), i = s - Math.min(t, r, o), d = i ? s === t ? (r - o) / i : s === r ? 2 + (o - t) / i : 4 + (t - r) / i : 0;
-  return { h: 60 * (d < 0 ? d + 6 : d), s: s ? i / s * 100 : 0, v: s / 255 * 100, a };
-}, Pe = function(e) {
-  var t = e.h, r = e.s, o = e.v, a = e.a;
-  t = t / 360 * 6, r /= 100, o /= 100;
-  var s = Math.floor(t), i = o * (1 - r), d = o * (1 - (t - s) * r), _ = o * (1 - (1 - t + s) * r), m = s % 6;
-  return { r: 255 * [o, d, i, i, _, o][m], g: 255 * [_, o, o, d, i, i][m], b: 255 * [i, i, _, o, o, d][m], a };
-}, pe = function(e) {
-  return { h: Ee(e.h), s: S(e.s, 0, 100), l: S(e.l, 0, 100), a: S(e.a) };
-}, he = function(e) {
-  return { h: E(e.h), s: E(e.s), l: E(e.l), a: E(e.a, 3) };
-}, be = function(e) {
-  return Pe((r = (t = e).s, { h: t.h, s: (r *= ((o = t.l) < 50 ? o : 100 - o) / 100) > 0 ? 2 * r / (o + r) * 100 : 0, v: o + r, a: t.a }));
-  var t, r, o;
-}, W = function(e) {
-  return { h: (t = _e(e)).h, s: (a = (200 - (r = t.s)) * (o = t.v) / 100) > 0 && a < 200 ? r * o / 100 / (a <= 100 ? a : 200 - a) * 100 : 0, l: a / 2, a: t.a };
-  var t, r, o, a;
-}, Ne = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, je = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, Oe = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, Fe = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, ge = { string: [[function(e) {
-  var t = Me.exec(e);
-  return t ? (e = t[1]).length <= 4 ? { r: parseInt(e[0] + e[0], 16), g: parseInt(e[1] + e[1], 16), b: parseInt(e[2] + e[2], 16), a: e.length === 4 ? E(parseInt(e[3] + e[3], 16) / 255, 2) : 1 } : e.length === 6 || e.length === 8 ? { r: parseInt(e.substr(0, 2), 16), g: parseInt(e.substr(2, 2), 16), b: parseInt(e.substr(4, 2), 16), a: e.length === 8 ? E(parseInt(e.substr(6, 2), 16) / 255, 2) : 1 } : null : null;
-}, "hex"], [function(e) {
-  var t = Oe.exec(e) || Fe.exec(e);
-  return t ? t[2] !== t[4] || t[4] !== t[6] ? null : de({ r: Number(t[1]) / (t[2] ? 100 / 255 : 1), g: Number(t[3]) / (t[4] ? 100 / 255 : 1), b: Number(t[5]) / (t[6] ? 100 / 255 : 1), a: t[7] === void 0 ? 1 : Number(t[7]) / (t[8] ? 100 : 1) }) : null;
-}, "rgb"], [function(e) {
-  var t = Ne.exec(e) || je.exec(e);
-  if (!t) return null;
-  var r, o, a = pe({ h: (r = t[1], o = t[2], o === void 0 && (o = "deg"), Number(r) * (Ae[o] || 1)), s: Number(t[3]), l: Number(t[4]), a: t[5] === void 0 ? 1 : Number(t[5]) / (t[6] ? 100 : 1) });
-  return be(a);
-}, "hsl"]], object: [[function(e) {
-  var t = e.r, r = e.g, o = e.b, a = e.a, s = a === void 0 ? 1 : a;
-  return T(t) && T(r) && T(o) ? de({ r: Number(t), g: Number(r), b: Number(o), a: Number(s) }) : null;
-}, "rgb"], [function(e) {
-  var t = e.h, r = e.s, o = e.l, a = e.a, s = a === void 0 ? 1 : a;
-  if (!T(t) || !T(r) || !T(o)) return null;
-  var i = pe({ h: Number(t), s: Number(r), l: Number(o), a: Number(s) });
-  return be(i);
-}, "hsl"], [function(e) {
-  var t = e.h, r = e.s, o = e.v, a = e.a, s = a === void 0 ? 1 : a;
-  if (!T(t) || !T(r) || !T(o)) return null;
-  var i = (function(d) {
-    return { h: Ee(d.h), s: S(d.s, 0, 100), v: S(d.v, 0, 100), a: S(d.a) };
-  })({ h: Number(t), s: Number(r), v: Number(o), a: Number(s) });
-  return Pe(i);
-}, "hsv"]] }, ve = function(e, t) {
-  for (var r = 0; r < t.length; r++) {
-    var o = t[r][0](e);
-    if (o) return [o, t[r][1]];
+import { jsx as S, jsxs as rt } from "react/jsx-runtime";
+import { useState as Z, useRef as k, useCallback as A, useEffect as G } from "react";
+var at = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, w = function(t) {
+  return typeof t == "string" ? t.length > 0 : typeof t == "number";
+}, d = function(t, n, e) {
+  return n === void 0 && (n = 0), e === void 0 && (e = Math.pow(10, n)), Math.round(e * t) / e + 0;
+}, M = function(t, n, e) {
+  return n === void 0 && (n = 0), e === void 0 && (e = 1), t > e ? e : t > n ? t : n;
+}, U = function(t) {
+  return (t = isFinite(t) ? t % 360 : 0) > 0 ? t : t + 360;
+}, L = function(t) {
+  return { r: M(t.r, 0, 255), g: M(t.g, 0, 255), b: M(t.b, 0, 255), a: M(t.a) };
+}, H = function(t) {
+  return { r: d(t.r), g: d(t.g), b: d(t.b), a: d(t.a, 3) };
+}, st = /^#([0-9a-f]{3,8})$/i, D = function(t) {
+  var n = t.toString(16);
+  return n.length < 2 ? "0" + n : n;
+}, tt = function(t) {
+  var n = t.r, e = t.g, o = t.b, r = t.a, a = Math.max(n, e, o), s = a - Math.min(n, e, o), f = s ? a === n ? (e - o) / s : a === e ? 2 + (o - n) / s : 4 + (n - e) / s : 0;
+  return { h: 60 * (f < 0 ? f + 6 : f), s: a ? s / a * 100 : 0, v: a / 255 * 100, a: r };
+}, nt = function(t) {
+  var n = t.h, e = t.s, o = t.v, r = t.a;
+  n = n / 360 * 6, e /= 100, o /= 100;
+  var a = Math.floor(n), s = o * (1 - e), f = o * (1 - (n - a) * e), m = o * (1 - (1 - n + a) * e), p = a % 6;
+  return { r: 255 * [o, f, s, s, m, o][p], g: 255 * [m, o, o, f, s, s][p], b: 255 * [s, s, m, o, o, f][p], a: r };
+}, B = function(t) {
+  return { h: U(t.h), s: M(t.s, 0, 100), l: M(t.l, 0, 100), a: M(t.a) };
+}, O = function(t) {
+  return { h: d(t.h), s: d(t.s), l: d(t.l), a: d(t.a, 3) };
+}, T = function(t) {
+  return nt((e = (n = t).s, { h: n.h, s: (e *= ((o = n.l) < 50 ? o : 100 - o) / 100) > 0 ? 2 * e / (o + e) * 100 : 0, v: o + e, a: n.a }));
+  var n, e, o;
+}, I = function(t) {
+  return { h: (n = tt(t)).h, s: (r = (200 - (e = n.s)) * (o = n.v) / 100) > 0 && r < 200 ? e * o / 100 / (r <= 100 ? r : 200 - r) * 100 : 0, l: r / 2, a: n.a };
+  var n, e, o, r;
+}, it = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, lt = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, ct = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, ut = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, V = { string: [[function(t) {
+  var n = st.exec(t);
+  return n ? (t = n[1]).length <= 4 ? { r: parseInt(t[0] + t[0], 16), g: parseInt(t[1] + t[1], 16), b: parseInt(t[2] + t[2], 16), a: t.length === 4 ? d(parseInt(t[3] + t[3], 16) / 255, 2) : 1 } : t.length === 6 || t.length === 8 ? { r: parseInt(t.substr(0, 2), 16), g: parseInt(t.substr(2, 2), 16), b: parseInt(t.substr(4, 2), 16), a: t.length === 8 ? d(parseInt(t.substr(6, 2), 16) / 255, 2) : 1 } : null : null;
+}, "hex"], [function(t) {
+  var n = ct.exec(t) || ut.exec(t);
+  return n ? n[2] !== n[4] || n[4] !== n[6] ? null : L({ r: Number(n[1]) / (n[2] ? 100 / 255 : 1), g: Number(n[3]) / (n[4] ? 100 / 255 : 1), b: Number(n[5]) / (n[6] ? 100 / 255 : 1), a: n[7] === void 0 ? 1 : Number(n[7]) / (n[8] ? 100 : 1) }) : null;
+}, "rgb"], [function(t) {
+  var n = it.exec(t) || lt.exec(t);
+  if (!n) return null;
+  var e, o, r = B({ h: (e = n[1], o = n[2], o === void 0 && (o = "deg"), Number(e) * (at[o] || 1)), s: Number(n[3]), l: Number(n[4]), a: n[5] === void 0 ? 1 : Number(n[5]) / (n[6] ? 100 : 1) });
+  return T(r);
+}, "hsl"]], object: [[function(t) {
+  var n = t.r, e = t.g, o = t.b, r = t.a, a = r === void 0 ? 1 : r;
+  return w(n) && w(e) && w(o) ? L({ r: Number(n), g: Number(e), b: Number(o), a: Number(a) }) : null;
+}, "rgb"], [function(t) {
+  var n = t.h, e = t.s, o = t.l, r = t.a, a = r === void 0 ? 1 : r;
+  if (!w(n) || !w(e) || !w(o)) return null;
+  var s = B({ h: Number(n), s: Number(e), l: Number(o), a: Number(a) });
+  return T(s);
+}, "hsl"], [function(t) {
+  var n = t.h, e = t.s, o = t.v, r = t.a, a = r === void 0 ? 1 : r;
+  if (!w(n) || !w(e) || !w(o)) return null;
+  var s = (function(f) {
+    return { h: U(f.h), s: M(f.s, 0, 100), v: M(f.v, 0, 100), a: M(f.a) };
+  })({ h: Number(n), s: Number(e), v: Number(o), a: Number(a) });
+  return nt(s);
+}, "hsv"]] }, _ = function(t, n) {
+  for (var e = 0; e < n.length; e++) {
+    var o = n[e][0](t);
+    if (o) return [o, n[e][1]];
   }
   return [null, void 0];
-}, Ie = function(e) {
-  return typeof e == "string" ? ve(e.trim(), ge.string) : typeof e == "object" && e !== null ? ve(e, ge.object) : [null, void 0];
-}, te = function(e, t) {
-  var r = W(e);
-  return { h: r.h, s: S(r.s + 100 * t, 0, 100), l: r.l, a: r.a };
-}, re = function(e) {
-  return (299 * e.r + 587 * e.g + 114 * e.b) / 1e3 / 255;
-}, me = function(e, t) {
-  var r = W(e);
-  return { h: r.h, s: r.s, l: S(r.l + 100 * t, 0, 100), a: r.a };
-}, ye = (function() {
-  function e(t) {
-    this.parsed = Ie(t)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 };
+}, ft = function(t) {
+  return typeof t == "string" ? _(t.trim(), V.string) : typeof t == "object" && t !== null ? _(t, V.object) : [null, void 0];
+}, $ = function(t, n) {
+  var e = I(t);
+  return { h: e.h, s: M(e.s + 100 * n, 0, 100), l: e.l, a: e.a };
+}, j = function(t) {
+  return (299 * t.r + 587 * t.g + 114 * t.b) / 1e3 / 255;
+}, J = function(t, n) {
+  var e = I(t);
+  return { h: e.h, s: e.s, l: M(e.l + 100 * n, 0, 100), a: e.a };
+}, K = (function() {
+  function t(n) {
+    this.parsed = ft(n)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 };
   }
-  return e.prototype.isValid = function() {
+  return t.prototype.isValid = function() {
     return this.parsed !== null;
-  }, e.prototype.brightness = function() {
-    return E(re(this.rgba), 2);
-  }, e.prototype.isDark = function() {
-    return re(this.rgba) < 0.5;
-  }, e.prototype.isLight = function() {
-    return re(this.rgba) >= 0.5;
-  }, e.prototype.toHex = function() {
-    return t = ee(this.rgba), r = t.r, o = t.g, a = t.b, i = (s = t.a) < 1 ? U(E(255 * s)) : "", "#" + U(r) + U(o) + U(a) + i;
-    var t, r, o, a, s, i;
-  }, e.prototype.toRgb = function() {
-    return ee(this.rgba);
-  }, e.prototype.toRgbString = function() {
-    return t = ee(this.rgba), r = t.r, o = t.g, a = t.b, (s = t.a) < 1 ? "rgba(" + r + ", " + o + ", " + a + ", " + s + ")" : "rgb(" + r + ", " + o + ", " + a + ")";
-    var t, r, o, a, s;
-  }, e.prototype.toHsl = function() {
-    return he(W(this.rgba));
-  }, e.prototype.toHslString = function() {
-    return t = he(W(this.rgba)), r = t.h, o = t.s, a = t.l, (s = t.a) < 1 ? "hsla(" + r + ", " + o + "%, " + a + "%, " + s + ")" : "hsl(" + r + ", " + o + "%, " + a + "%)";
-    var t, r, o, a, s;
-  }, e.prototype.toHsv = function() {
-    return t = _e(this.rgba), { h: E(t.h), s: E(t.s), v: E(t.v), a: E(t.a, 3) };
-    var t;
-  }, e.prototype.invert = function() {
-    return C({ r: 255 - (t = this.rgba).r, g: 255 - t.g, b: 255 - t.b, a: t.a });
-    var t;
-  }, e.prototype.saturate = function(t) {
-    return t === void 0 && (t = 0.1), C(te(this.rgba, t));
-  }, e.prototype.desaturate = function(t) {
-    return t === void 0 && (t = 0.1), C(te(this.rgba, -t));
-  }, e.prototype.grayscale = function() {
-    return C(te(this.rgba, -1));
-  }, e.prototype.lighten = function(t) {
-    return t === void 0 && (t = 0.1), C(me(this.rgba, t));
-  }, e.prototype.darken = function(t) {
-    return t === void 0 && (t = 0.1), C(me(this.rgba, -t));
-  }, e.prototype.rotate = function(t) {
-    return t === void 0 && (t = 15), this.hue(this.hue() + t);
-  }, e.prototype.alpha = function(t) {
-    return typeof t == "number" ? C({ r: (r = this.rgba).r, g: r.g, b: r.b, a: t }) : E(this.rgba.a, 3);
-    var r;
-  }, e.prototype.hue = function(t) {
-    var r = W(this.rgba);
-    return typeof t == "number" ? C({ h: t, s: r.s, l: r.l, a: r.a }) : E(r.h);
-  }, e.prototype.isEqual = function(t) {
-    return this.toHex() === C(t).toHex();
-  }, e;
-})(), C = function(e) {
-  return e instanceof ye ? e : new ye(e);
+  }, t.prototype.brightness = function() {
+    return d(j(this.rgba), 2);
+  }, t.prototype.isDark = function() {
+    return j(this.rgba) < 0.5;
+  }, t.prototype.isLight = function() {
+    return j(this.rgba) >= 0.5;
+  }, t.prototype.toHex = function() {
+    return n = H(this.rgba), e = n.r, o = n.g, r = n.b, s = (a = n.a) < 1 ? D(d(255 * a)) : "", "#" + D(e) + D(o) + D(r) + s;
+    var n, e, o, r, a, s;
+  }, t.prototype.toRgb = function() {
+    return H(this.rgba);
+  }, t.prototype.toRgbString = function() {
+    return n = H(this.rgba), e = n.r, o = n.g, r = n.b, (a = n.a) < 1 ? "rgba(" + e + ", " + o + ", " + r + ", " + a + ")" : "rgb(" + e + ", " + o + ", " + r + ")";
+    var n, e, o, r, a;
+  }, t.prototype.toHsl = function() {
+    return O(I(this.rgba));
+  }, t.prototype.toHslString = function() {
+    return n = O(I(this.rgba)), e = n.h, o = n.s, r = n.l, (a = n.a) < 1 ? "hsla(" + e + ", " + o + "%, " + r + "%, " + a + ")" : "hsl(" + e + ", " + o + "%, " + r + "%)";
+    var n, e, o, r, a;
+  }, t.prototype.toHsv = function() {
+    return n = tt(this.rgba), { h: d(n.h), s: d(n.s), v: d(n.v), a: d(n.a, 3) };
+    var n;
+  }, t.prototype.invert = function() {
+    return C({ r: 255 - (n = this.rgba).r, g: 255 - n.g, b: 255 - n.b, a: n.a });
+    var n;
+  }, t.prototype.saturate = function(n) {
+    return n === void 0 && (n = 0.1), C($(this.rgba, n));
+  }, t.prototype.desaturate = function(n) {
+    return n === void 0 && (n = 0.1), C($(this.rgba, -n));
+  }, t.prototype.grayscale = function() {
+    return C($(this.rgba, -1));
+  }, t.prototype.lighten = function(n) {
+    return n === void 0 && (n = 0.1), C(J(this.rgba, n));
+  }, t.prototype.darken = function(n) {
+    return n === void 0 && (n = 0.1), C(J(this.rgba, -n));
+  }, t.prototype.rotate = function(n) {
+    return n === void 0 && (n = 15), this.hue(this.hue() + n);
+  }, t.prototype.alpha = function(n) {
+    return typeof n == "number" ? C({ r: (e = this.rgba).r, g: e.g, b: e.b, a: n }) : d(this.rgba.a, 3);
+    var e;
+  }, t.prototype.hue = function(n) {
+    var e = I(this.rgba);
+    return typeof n == "number" ? C({ h: n, s: e.s, l: e.l, a: e.a }) : d(e.h);
+  }, t.prototype.isEqual = function(n) {
+    return this.toHex() === C(n).toHex();
+  }, t;
+})(), C = function(t) {
+  return t instanceof K ? t : new K(t);
 };
-const De = ({
-  hexColor: e,
-  cursorPos: t,
-  onPointerDown: r,
+const ht = ({
+  hexColor: t,
+  cursorPos: n,
+  onPointerDown: e,
   onPointerMove: o,
-  onPointerUp: a
+  onPointerUp: r
 }) => {
-  const [s, i] = Re(!1), d = (h) => {
-    i(!0), r(h), h.currentTarget.setPointerCapture(h.pointerId);
-  }, _ = (h) => {
-    s && o(h);
+  const [a, s] = Z(!1), f = (h) => {
+    s(!0), e(h), h.currentTarget.setPointerCapture(h.pointerId);
   }, m = (h) => {
-    i(!1), a(h), h.currentTarget.releasePointerCapture(h.pointerId);
+    a && o(h);
+  }, p = (h) => {
+    s(!1), r(h), h.currentTarget.releasePointerCapture(h.pointerId);
   };
-  return /* @__PURE__ */ M.jsx(
+  return /* @__PURE__ */ S(
     "div",
     {
       style: {
@@ -412,21 +154,21 @@ const De = ({
         borderRadius: "50%",
         border: "2px solid white",
         boxShadow: "0 2px 4px rgba(0,0,0,0.3)",
-        backgroundColor: e,
+        backgroundColor: t,
         left: "50%",
         top: "50%",
-        transform: `translate(calc(-50% + ${t.x}px), calc(-50% + ${t.y}px))`,
+        transform: `translate(calc(-50% + ${n.x}px), calc(-50% + ${n.y}px))`,
         pointerEvents: "auto",
-        cursor: s ? "grabbing" : "grab",
+        cursor: a ? "grabbing" : "grab",
         willChange: "transform",
         zIndex: 10
       },
-      onPointerDown: d,
-      onPointerMove: _,
-      onPointerUp: m
+      onPointerDown: f,
+      onPointerMove: m,
+      onPointerUp: p
     }
   );
-}, w = {
+}, x = {
   /** Custom color selection without predefined harmony */
   Custom: "Custom",
   /** Colors adjacent to each other on the color wheel */
@@ -443,165 +185,165 @@ const De = ({
   Square: "Square",
   /** A combination of complementary and analogous colors */
   Compound: "Compound"
-}, xe = (e, t, r, o) => {
-  const a = Math.atan2(t, e), s = Math.sqrt(e * e + t * t);
-  let i = [];
-  switch (r) {
-    case w.Analogous:
-      i = [0, -30, 30, -60, 60];
+}, Q = (t, n, e, o) => {
+  const r = Math.atan2(n, t), a = Math.sqrt(t * t + n * n);
+  let s = [];
+  switch (e) {
+    case x.Analogous:
+      s = [0, -30, 30, -60, 60];
       break;
-    case w.Monochromatic:
-      i = [0];
+    case x.Monochromatic:
+      s = [0];
       break;
-    case w.Triad:
-      i = [0, 120, 240];
+    case x.Triad:
+      s = [0, 120, 240];
       break;
-    case w.Complementary:
-      i = [0, 180];
+    case x.Complementary:
+      s = [0, 180];
       break;
-    case w.SplitComplementary:
-      i = [0, 150, 210];
+    case x.SplitComplementary:
+      s = [0, 150, 210];
       break;
-    case w.Square:
-      i = [0, 90, 180, 270];
+    case x.Square:
+      s = [0, 90, 180, 270];
       break;
-    case w.Compound:
-      i = [0, 180, 30, 210, 60];
+    case x.Compound:
+      s = [0, 180, 30, 210, 60];
       break;
-    case w.Custom:
+    case x.Custom:
     default:
       return null;
   }
-  const d = i.length, _ = 0.25, m = [];
+  const f = s.length, m = 0.25, p = [];
   for (let h = 0; h < o; h++) {
-    const N = Math.floor(h / d), c = h % d, l = i[c], f = a + l * Math.PI / 180;
-    let p = s;
-    r === w.Monochromatic ? (p = s * (1 - h * 0.15), p < 0 && (p = 0)) : (p = s * (1 - N * _), p < 0 && (p = 0)), m.push({
-      x: Math.cos(f) * p,
-      y: Math.sin(f) * p
+    const R = Math.floor(h / f), l = h % f, i = s[l], c = r + i * Math.PI / 180;
+    let u = a;
+    e === x.Monochromatic ? (u = a * (1 - h * 0.15), u < 0 && (u = 0)) : (u = a * (1 - R * m), u < 0 && (u = 0)), p.push({
+      x: Math.cos(c) * u,
+      y: Math.sin(c) * u
     });
   }
-  return m;
-}, $e = (e, t) => {
-  const r = t, o = t, a = e.createConicGradient(Math.PI * 1.5, r, o);
-  a.addColorStop(0, "#FFFF00"), a.addColorStop(0.19, "#FF0000"), a.addColorStop(0.36, "#FF00FF"), a.addColorStop(0.5, "#0000FF"), a.addColorStop(0.64, "#00FFFF"), a.addColorStop(0.78, "#00FF00"), a.addColorStop(1, "#FFFF00"), e.fillStyle = a, e.beginPath(), e.arc(r, o, t, 0, Math.PI * 2), e.fill();
-  const s = e.createRadialGradient(r, o, 0, r, o, t);
-  s.addColorStop(0, "#ffffff"), s.addColorStop(0.2, "rgba(255, 255, 255, 0.8)"), s.addColorStop(0.6, "rgba(255, 255, 255, 0.2)"), s.addColorStop(1, "rgba(255, 255, 255, 0)"), e.fillStyle = s, e.beginPath(), e.arc(r, o, t, 0, Math.PI * 2), e.fill();
-}, Ye = (e, t, r) => {
-  const o = Math.sqrt(e * e + t * t), a = r - 1;
-  if (o > a) {
-    const s = a / o;
-    return { x: e * s, y: t * s };
+  return p;
+}, dt = (t, n) => {
+  const e = n, o = n, r = t.createConicGradient(Math.PI * 1.5, e, o);
+  r.addColorStop(0, "#FFFF00"), r.addColorStop(0.19, "#FF0000"), r.addColorStop(0.36, "#FF00FF"), r.addColorStop(0.5, "#0000FF"), r.addColorStop(0.64, "#00FFFF"), r.addColorStop(0.78, "#00FF00"), r.addColorStop(1, "#FFFF00"), t.fillStyle = r, t.beginPath(), t.arc(e, o, n, 0, Math.PI * 2), t.fill();
+  const a = t.createRadialGradient(e, o, 0, e, o, n);
+  a.addColorStop(0, "#ffffff"), a.addColorStop(0.2, "rgba(255, 255, 255, 0.8)"), a.addColorStop(0.6, "rgba(255, 255, 255, 0.2)"), a.addColorStop(1, "rgba(255, 255, 255, 0)"), t.fillStyle = a, t.beginPath(), t.arc(e, o, n, 0, Math.PI * 2), t.fill();
+}, pt = (t, n, e) => {
+  const o = Math.sqrt(t * t + n * n), r = e - 1;
+  if (o > r) {
+    const a = r / o;
+    return { x: t * a, y: n * a };
   }
-  return { x: e, y: t };
-}, qe = ({
-  radius: e = 150,
-  onChange: t,
-  quantityOfColors: r = 5,
-  harmony: o = w.Monochromatic
+  return { x: t, y: n };
+}, vt = ({
+  radius: t = 150,
+  onChange: n,
+  quantityOfColors: e = 5,
+  harmony: o = x.Monochromatic
 }) => {
-  const a = Q(null), s = Q(null), [i, d] = Re([]), _ = Q([]), m = K((c, l) => {
-    const f = a.current;
-    if (!f) return "#ffffff";
-    const p = f.getContext("2d");
-    if (!p) return "#ffffff";
-    const y = window.devicePixelRatio || 1, x = c + e, P = l + e, j = Math.floor(x * y), k = Math.floor(P * y), R = p.getImageData(j, k, 1, 1).data;
-    return C({ r: R[0], g: R[1], b: R[2], a: R[3] / 255 }).toHex();
-  }, [e]);
-  le(() => {
-    const c = a.current;
-    if (!c) return;
-    const l = c.getContext("2d", { willReadFrequently: !0 });
+  const r = k(null), a = k(null), [s, f] = Z([]), m = k([]), p = A((l, i) => {
+    const c = r.current;
+    if (!c) return "#ffffff";
+    const u = c.getContext("2d");
+    if (!u) return "#ffffff";
+    const v = window.devicePixelRatio || 1, g = l + t, y = i + t, N = Math.floor(g * v), P = Math.floor(y * v), b = u.getImageData(N, P, 1, 1).data;
+    return C({ r: b[0], g: b[1], b: b[2], a: b[3] / 255 }).toHex();
+  }, [t]);
+  G(() => {
+    const l = r.current;
     if (!l) return;
-    const f = window.devicePixelRatio || 1, p = e * 2;
-    c.width = p * f, c.height = p * f, c.style.width = `${p}px`, c.style.height = `${p}px`, l.scale(f, f), $e(l, e);
-  }, [e]), le(() => {
-    let c;
-    if (i.length > 0) {
-      const l = i[0];
-      c = xe(l.x, l.y, o, r);
+    const i = l.getContext("2d", { willReadFrequently: !0 });
+    if (!i) return;
+    const c = window.devicePixelRatio || 1, u = t * 2;
+    l.width = u * c, l.height = u * c, l.style.width = `${u}px`, l.style.height = `${u}px`, i.scale(c, c), dt(i, t);
+  }, [t]), G(() => {
+    let l;
+    if (s.length > 0) {
+      const i = s[0];
+      l = Q(i.x, i.y, o, e);
     }
-    if (!c) {
-      const l = e * 0.5;
-      o !== w.Custom ? c = xe(l, 0, o, r) : c = Array.from({ length: r }).map((p, y) => {
-        const x = y / r * 2 * Math.PI;
-        return { x: Math.cos(x) * e * 0.6, y: Math.sin(x) * e * 0.6 };
+    if (!l) {
+      const i = t * 0.5;
+      o !== x.Custom ? l = Q(i, 0, o, e) : l = Array.from({ length: e }).map((u, v) => {
+        const g = v / e * 2 * Math.PI;
+        return { x: Math.cos(g) * t * 0.6, y: Math.sin(g) * t * 0.6 };
       });
     }
-    if (c) {
-      const l = c.map((f, p) => ({
-        id: p,
-        x: f.x,
-        y: f.y,
-        color: m(f.x, f.y)
+    if (l) {
+      const i = l.map((c, u) => ({
+        id: u,
+        x: c.x,
+        y: c.y,
+        color: p(c.x, c.y)
       }));
-      if (l.length > 0 && o !== w.Custom) {
-        const f = Math.atan2(l[0].y, l[0].x), p = Math.sqrt(l[0].x * l[0].x + l[0].y * l[0].y);
-        _.current = l.map((y) => {
-          const x = Math.atan2(y.y, y.x), P = Math.sqrt(y.x * y.x + y.y * y.y);
+      if (i.length > 0 && o !== x.Custom) {
+        const c = Math.atan2(i[0].y, i[0].x), u = Math.sqrt(i[0].x * i[0].x + i[0].y * i[0].y);
+        m.current = i.map((v) => {
+          const g = Math.atan2(v.y, v.x), y = Math.sqrt(v.x * v.x + v.y * v.y);
           return {
-            angleOffset: x - f,
-            distanceRatio: p > 0 ? P / p : 1
+            angleOffset: g - c,
+            distanceRatio: u > 0 ? y / u : 1
           };
         });
       }
-      d(l), t && t(l);
+      f(i), n && n(i);
     }
-  }, [o, r, m]);
-  const h = K(
-    (c, l, f) => {
-      const p = s.current;
-      if (!p) return;
-      const y = p.getBoundingClientRect();
-      let x = c - y.left - e, P = l - y.top - e;
-      const j = Ye(x, P, e);
-      if (x = j.x, P = j.y, o === w.Custom) {
-        const k = m(x, P), R = [...i];
-        R[f] = { ...R[f], x, y: P, color: k }, d(R), t && t(R);
+  }, [o, e, p]);
+  const h = A(
+    (l, i, c) => {
+      const u = a.current;
+      if (!u) return;
+      const v = u.getBoundingClientRect();
+      let g = l - v.left - t, y = i - v.top - t;
+      const N = pt(g, y, t);
+      if (g = N.x, y = N.y, o === x.Custom) {
+        const P = p(g, y), b = [...s];
+        b[c] = { ...b[c], x: g, y, color: P }, f(b), n && n(b);
         return;
       }
-      if (_.current.length > 0 && _.current[f]) {
-        const k = Math.atan2(P, x), R = _.current[f], V = k - R.angleOffset, q = i.map((A, O) => {
-          if (O === f)
-            return { ...A, x, y: P, color: m(x, P) };
-          const H = Math.sqrt(A.x * A.x + A.y * A.y), G = _.current[O], F = V + G.angleOffset, D = Math.cos(F) * H, L = Math.sin(F) * H;
+      if (m.current.length > 0 && m.current[c]) {
+        const P = Math.atan2(y, g), b = m.current[c], et = P - b.angleOffset, q = s.map((F, Y) => {
+          if (Y === c)
+            return { ...F, x: g, y, color: p(g, y) };
+          const X = Math.sqrt(F.x * F.x + F.y * F.y), ot = m.current[Y], E = et + ot.angleOffset, W = Math.cos(E) * X, z = Math.sin(E) * X;
           return {
-            ...A,
-            x: D,
-            y: L,
-            color: m(D, L)
+            ...F,
+            x: W,
+            y: z,
+            color: p(W, z)
           };
         });
-        d(q), t && t(q);
+        f(q), n && n(q);
       } else {
-        const k = m(x, P), R = [...i];
-        R[f] = { ...R[f], x, y: P, color: k }, d(R), t && t(R);
+        const P = p(g, y), b = [...s];
+        b[c] = { ...b[c], x: g, y, color: P }, f(b), n && n(b);
       }
     },
-    [e, m, t, i, o]
-  ), N = K((c) => ({
-    onPointerDown: (l) => {
-      h(l.clientX, l.clientY, c);
+    [t, p, n, s, o]
+  ), R = A((l) => ({
+    onPointerDown: (i) => {
+      h(i.clientX, i.clientY, l);
     },
-    onPointerMove: (l) => {
-      h(l.clientX, l.clientY, c);
+    onPointerMove: (i) => {
+      h(i.clientX, i.clientY, l);
     },
     onPointerUp: () => {
     }
   }), [h]);
-  return /* @__PURE__ */ M.jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 20 }, children: /* @__PURE__ */ M.jsxs(
+  return /* @__PURE__ */ S("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 20 }, children: /* @__PURE__ */ rt(
     "div",
     {
-      ref: s,
+      ref: a,
       style: {
-        width: e * 2,
-        height: e * 2,
+        width: t * 2,
+        height: t * 2,
         position: "relative",
         touchAction: "none"
       },
       children: [
-        /* @__PURE__ */ M.jsx("canvas", { ref: a, style: { borderRadius: "50%", display: "block" } }),
-        /* @__PURE__ */ M.jsx(
+        /* @__PURE__ */ S("canvas", { ref: r, style: { borderRadius: "50%", display: "block" } }),
+        /* @__PURE__ */ S(
           "svg",
           {
             style: {
@@ -613,33 +355,33 @@ const De = ({
               pointerEvents: "none",
               zIndex: 1
             },
-            children: i.map((c) => /* @__PURE__ */ M.jsx(
+            children: s.map((l) => /* @__PURE__ */ S(
               "line",
               {
-                x1: e,
-                y1: e,
-                x2: e + c.x,
-                y2: e + c.y,
+                x1: t,
+                y1: t,
+                x2: t + l.x,
+                y2: t + l.y,
                 stroke: "white",
                 strokeWidth: "2",
                 style: { filter: "drop-shadow(0px 1px 1px rgba(0,0,0,0.3))" }
               },
-              c.id
+              l.id
             ))
           }
         ),
-        i.map((c, l) => {
-          const f = N(l);
-          return /* @__PURE__ */ M.jsx(
-            De,
+        s.map((l, i) => {
+          const c = R(i);
+          return /* @__PURE__ */ S(
+            ht,
             {
-              cursorPos: { x: c.x, y: c.y },
-              hexColor: c.color,
-              onPointerDown: f.onPointerDown,
-              onPointerMove: f.onPointerMove,
-              onPointerUp: f.onPointerUp
+              cursorPos: { x: l.x, y: l.y },
+              hexColor: l.color,
+              onPointerDown: c.onPointerDown,
+              onPointerMove: c.onPointerMove,
+              onPointerUp: c.onPointerUp
             },
-            c.id
+            l.id
           );
         })
       ]
@@ -647,6 +389,6 @@ const De = ({
   ) });
 };
 export {
-  qe as ColorWheel,
-  w as HarmonyType
+  vt as ColorWheel,
+  x as HarmonyType
 };

package/dist/react-color-palette-wheel.umd.js

@@ -1,6 +1 @@
-(function(A,_){typeof exports=="object"&&typeof module<"u"?_(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],_):(A=typeof globalThis<"u"?globalThis:A||self,_(A.ReactColorPaletteWheel={},A.React))})(this,(function(A,_){"use strict";var X={exports:{}},W={};var ne;function _e(){if(ne)return W;ne=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(o,a,s){var i=null;if(s!==void 0&&(i=""+s),a.key!==void 0&&(i=""+a.key),"key"in a){s={};for(var d in a)d!=="key"&&(s[d]=a[d])}else s=a;return a=s.ref,{$$typeof:e,type:o,key:i,ref:a!==void 0?a:null,props:s}}return W.Fragment=t,W.jsx=r,W.jsxs=r,W}var H={};var oe;function Pe(){return oe||(oe=1,process.env.NODE_ENV!=="production"&&(function(){function e(n){if(n==null)return null;if(typeof n=="function")return n.$$typeof===K?null:n.displayName||n.name||null;if(typeof n=="string")return n;switch(n){case R:return"Fragment";case w:return"Profiler";case x:return"StrictMode";case Q:return"Suspense";case V:return"SuspenseList";case G:return"Activity"}if(typeof n=="object")switch(typeof n.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),n.$$typeof){case p:return"Portal";case M:return n.displayName||"Context";case F:return(n._context.displayName||"Context")+".Consumer";case E:var u=n.render;return n=n.displayName,n||(n=u.displayName||u.name||"",n=n!==""?"ForwardRef("+n+")":"ForwardRef"),n;case N:return u=n.displayName||null,u!==null?u:e(n.type)||"Memo";case I:u=n._payload,n=n._init;try{return e(n(u))}catch{}}return null}function t(n){return""+n}function r(n){try{t(n);var u=!1}catch{u=!0}if(u){u=console;var b=u.error,g=typeof Symbol=="function"&&Symbol.toStringTag&&n[Symbol.toStringTag]||n.constructor.name||"Object";return b.call(u,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",g),t(n)}}function o(n){if(n===R)return"<>";if(typeof n=="object"&&n!==null&&n.$$typeof===I)return"<...>";try{var u=e(n);return u?"<"+u+">":"<...>"}catch{return"<...>"}}function a(){var n=D.A;return n===null?null:n.getOwner()}function s(){return Error("react-stack-top-frame")}function i(n){if(z.call(n,"key")){var u=Object.getOwnPropertyDescriptor(n,"key").get;if(u&&u.isReactWarning)return!1}return n.key!==void 0}function d(n,u){function b(){me||(me=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",u))}b.isReactWarning=!0,Object.defineProperty(n,"key",{get:b,configurable:!0})}function P(){var n=e(this.type);return ye[n]||(ye[n]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),n=this.props.ref,n!==void 0?n:null}function y(n,u,b,g,$,te){var v=b.ref;return n={$$typeof:f,type:n,key:u,props:b,_owner:g},(v!==void 0?v:null)!==null?Object.defineProperty(n,"ref",{enumerable:!1,get:P}):Object.defineProperty(n,"ref",{enumerable:!1,value:null}),n._store={},Object.defineProperty(n._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(n,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(n,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:$}),Object.defineProperty(n,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:te}),Object.freeze&&(Object.freeze(n.props),Object.freeze(n)),n}function h(n,u,b,g,$,te){var v=u.children;if(v!==void 0)if(g)if(J(v)){for(g=0;g<v.length;g++)O(v[g]);Object.freeze&&Object.freeze(v)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else O(v);if(z.call(u,"key")){v=e(n);var Y=Object.keys(u).filter(function(De){return De!=="key"});g=0<Y.length?"{key: someKey, "+Y.join(": ..., ")+": ...}":"{key: someKey}",Ee[v+g]||(Y=0<Y.length?"{"+Y.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,g,v,Y,v),Ee[v+g]=!0)}if(v=null,b!==void 0&&(r(b),v=""+b),i(u)&&(r(u.key),v=""+u.key),"key"in u){b={};for(var re in u)re!=="key"&&(b[re]=u[re])}else b=u;return v&&d(b,typeof n=="function"?n.displayName||n.name||"Unknown":n),y(n,v,b,a(),$,te)}function O(n){c(n)?n._store&&(n._store.validated=1):typeof n=="object"&&n!==null&&n.$$typeof===I&&(n._payload.status==="fulfilled"?c(n._payload.value)&&n._payload.value._store&&(n._payload.value._store.validated=1):n._store&&(n._store.validated=1))}function c(n){return typeof n=="object"&&n!==null&&n.$$typeof===f}var l=_,f=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),R=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),w=Symbol.for("react.profiler"),F=Symbol.for("react.consumer"),M=Symbol.for("react.context"),E=Symbol.for("react.forward_ref"),Q=Symbol.for("react.suspense"),V=Symbol.for("react.suspense_list"),N=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),G=Symbol.for("react.activity"),K=Symbol.for("react.client.reference"),D=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,J=Array.isArray,ee=console.createTask?console.createTask:function(){return null};l={react_stack_bottom_frame:function(n){return n()}};var me,ye={},Re=l.react_stack_bottom_frame.bind(l,s)(),xe=ee(o(s)),Ee={};H.Fragment=R,H.jsx=function(n,u,b){var g=1e4>D.recentlyCreatedOwnerStacks++;return h(n,u,b,!1,g?Error("react-stack-top-frame"):Re,g?ee(o(n)):xe)},H.jsxs=function(n,u,b){var g=1e4>D.recentlyCreatedOwnerStacks++;return h(n,u,b,!0,g?Error("react-stack-top-frame"):Re,g?ee(o(n)):xe)}})()),H}var ae;function we(){return ae||(ae=1,process.env.NODE_ENV==="production"?X.exports=_e():X.exports=Pe()),X.exports}var j=we(),Se={grad:.9,turn:360,rad:360/(2*Math.PI)},k=function(e){return typeof e=="string"?e.length>0:typeof e=="number"},m=function(e,t,r){return t===void 0&&(t=0),r===void 0&&(r=Math.pow(10,t)),Math.round(r*e)/r+0},C=function(e,t,r){return t===void 0&&(t=0),r===void 0&&(r=1),e>r?r:e>t?e:t},se=function(e){return(e=isFinite(e)?e%360:0)>0?e:e+360},ie=function(e){return{r:C(e.r,0,255),g:C(e.g,0,255),b:C(e.b,0,255),a:C(e.a)}},q=function(e){return{r:m(e.r),g:m(e.g),b:m(e.b),a:m(e.a,3)}},Ce=/^#([0-9a-f]{3,8})$/i,U=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},le=function(e){var t=e.r,r=e.g,o=e.b,a=e.a,s=Math.max(t,r,o),i=s-Math.min(t,r,o),d=i?s===t?(r-o)/i:s===r?2+(o-t)/i:4+(t-r)/i:0;return{h:60*(d<0?d+6:d),s:s?i/s*100:0,v:s/255*100,a}},ue=function(e){var t=e.h,r=e.s,o=e.v,a=e.a;t=t/360*6,r/=100,o/=100;var s=Math.floor(t),i=o*(1-r),d=o*(1-(t-s)*r),P=o*(1-(1-t+s)*r),y=s%6;return{r:255*[o,d,i,i,P,o][y],g:255*[P,o,o,d,i,i][y],b:255*[i,i,P,o,o,d][y],a}},ce=function(e){return{h:se(e.h),s:C(e.s,0,100),l:C(e.l,0,100),a:C(e.a)}},fe=function(e){return{h:m(e.h),s:m(e.s),l:m(e.l),a:m(e.a,3)}},de=function(e){return ue((r=(t=e).s,{h:t.h,s:(r*=((o=t.l)<50?o:100-o)/100)>0?2*r/(o+r)*100:0,v:o+r,a:t.a}));var t,r,o},L=function(e){return{h:(t=le(e)).h,s:(a=(200-(r=t.s))*(o=t.v)/100)>0&&a<200?r*o/100/(a<=100?a:200-a)*100:0,l:a/2,a:t.a};var t,r,o,a},Te=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,ke=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,Me=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,Ae=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,pe={string:[[function(e){var t=Ce.exec(e);return t?(e=t[1]).length<=4?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?m(parseInt(e[3]+e[3],16)/255,2):1}:e.length===6||e.length===8?{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:e.length===8?m(parseInt(e.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(e){var t=Me.exec(e)||Ae.exec(e);return t?t[2]!==t[4]||t[4]!==t[6]?null:ie({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:t[7]===void 0?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(e){var t=Te.exec(e)||ke.exec(e);if(!t)return null;var r,o,a=ce({h:(r=t[1],o=t[2],o===void 0&&(o="deg"),Number(r)*(Se[o]||1)),s:Number(t[3]),l:Number(t[4]),a:t[5]===void 0?1:Number(t[5])/(t[6]?100:1)});return de(a)},"hsl"]],object:[[function(e){var t=e.r,r=e.g,o=e.b,a=e.a,s=a===void 0?1:a;return k(t)&&k(r)&&k(o)?ie({r:Number(t),g:Number(r),b:Number(o),a:Number(s)}):null},"rgb"],[function(e){var t=e.h,r=e.s,o=e.l,a=e.a,s=a===void 0?1:a;if(!k(t)||!k(r)||!k(o))return null;var i=ce({h:Number(t),s:Number(r),l:Number(o),a:Number(s)});return de(i)},"hsl"],[function(e){var t=e.h,r=e.s,o=e.v,a=e.a,s=a===void 0?1:a;if(!k(t)||!k(r)||!k(o))return null;var i=(function(d){return{h:se(d.h),s:C(d.s,0,100),v:C(d.v,0,100),a:C(d.a)}})({h:Number(t),s:Number(r),v:Number(o),a:Number(s)});return ue(i)},"hsv"]]},he=function(e,t){for(var r=0;r<t.length;r++){var o=t[r][0](e);if(o)return[o,t[r][1]]}return[null,void 0]},Ne=function(e){return typeof e=="string"?he(e.trim(),pe.string):typeof e=="object"&&e!==null?he(e,pe.object):[null,void 0]},B=function(e,t){var r=L(e);return{h:r.h,s:C(r.s+100*t,0,100),l:r.l,a:r.a}},Z=function(e){return(299*e.r+587*e.g+114*e.b)/1e3/255},be=function(e,t){var r=L(e);return{h:r.h,s:r.s,l:C(r.l+100*t,0,100),a:r.a}},ge=(function(){function e(t){this.parsed=Ne(t)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return e.prototype.isValid=function(){return this.parsed!==null},e.prototype.brightness=function(){return m(Z(this.rgba),2)},e.prototype.isDark=function(){return Z(this.rgba)<.5},e.prototype.isLight=function(){return Z(this.rgba)>=.5},e.prototype.toHex=function(){return t=q(this.rgba),r=t.r,o=t.g,a=t.b,i=(s=t.a)<1?U(m(255*s)):"","#"+U(r)+U(o)+U(a)+i;var t,r,o,a,s,i},e.prototype.toRgb=function(){return q(this.rgba)},e.prototype.toRgbString=function(){return t=q(this.rgba),r=t.r,o=t.g,a=t.b,(s=t.a)<1?"rgba("+r+", "+o+", "+a+", "+s+")":"rgb("+r+", "+o+", "+a+")";var t,r,o,a,s},e.prototype.toHsl=function(){return fe(L(this.rgba))},e.prototype.toHslString=function(){return t=fe(L(this.rgba)),r=t.h,o=t.s,a=t.l,(s=t.a)<1?"hsla("+r+", "+o+"%, "+a+"%, "+s+")":"hsl("+r+", "+o+"%, "+a+"%)";var t,r,o,a,s},e.prototype.toHsv=function(){return t=le(this.rgba),{h:m(t.h),s:m(t.s),v:m(t.v),a:m(t.a,3)};var t},e.prototype.invert=function(){return T({r:255-(t=this.rgba).r,g:255-t.g,b:255-t.b,a:t.a});var t},e.prototype.saturate=function(t){return t===void 0&&(t=.1),T(B(this.rgba,t))},e.prototype.desaturate=function(t){return t===void 0&&(t=.1),T(B(this.rgba,-t))},e.prototype.grayscale=function(){return T(B(this.rgba,-1))},e.prototype.lighten=function(t){return t===void 0&&(t=.1),T(be(this.rgba,t))},e.prototype.darken=function(t){return t===void 0&&(t=.1),T(be(this.rgba,-t))},e.prototype.rotate=function(t){return t===void 0&&(t=15),this.hue(this.hue()+t)},e.prototype.alpha=function(t){return typeof t=="number"?T({r:(r=this.rgba).r,g:r.g,b:r.b,a:t}):m(this.rgba.a,3);var r},e.prototype.hue=function(t){var r=L(this.rgba);return typeof t=="number"?T({h:t,s:r.s,l:r.l,a:r.a}):m(r.h)},e.prototype.isEqual=function(t){return this.toHex()===T(t).toHex()},e})(),T=function(e){return e instanceof ge?e:new ge(e)};const je=({hexColor:e,cursorPos:t,onPointerDown:r,onPointerMove:o,onPointerUp:a})=>{const[s,i]=_.useState(!1),d=h=>{i(!0),r(h),h.currentTarget.setPointerCapture(h.pointerId)},P=h=>{s&&o(h)},y=h=>{i(!1),a(h),h.currentTarget.releasePointerCapture(h.pointerId)};return j.jsx("div",{style:{position:"absolute",width:24,height:24,borderRadius:"50%",border:"2px solid white",boxShadow:"0 2px 4px rgba(0,0,0,0.3)",backgroundColor:e,left:"50%",top:"50%",transform:`translate(calc(-50% + ${t.x}px), calc(-50% + ${t.y}px))`,pointerEvents:"auto",cursor:s?"grabbing":"grab",willChange:"transform",zIndex:10},onPointerDown:d,onPointerMove:P,onPointerUp:y})},S={Custom:"Custom",Analogous:"Analogous",Monochromatic:"Monochromatic",Triad:"Triad",Complementary:"Complementary",SplitComplementary:"SplitComplementary",Square:"Square",Compound:"Compound"},ve=(e,t,r,o)=>{const a=Math.atan2(t,e),s=Math.sqrt(e*e+t*t);let i=[];switch(r){case S.Analogous:i=[0,-30,30,-60,60];break;case S.Monochromatic:i=[0];break;case S.Triad:i=[0,120,240];break;case S.Complementary:i=[0,180];break;case S.SplitComplementary:i=[0,150,210];break;case S.Square:i=[0,90,180,270];break;case S.Compound:i=[0,180,30,210,60];break;case S.Custom:default:return null}const d=i.length,P=.25,y=[];for(let h=0;h<o;h++){const O=Math.floor(h/d),c=h%d,l=i[c],f=a+l*Math.PI/180;let p=s;r===S.Monochromatic?(p=s*(1-h*.15),p<0&&(p=0)):(p=s*(1-O*P),p<0&&(p=0)),y.push({x:Math.cos(f)*p,y:Math.sin(f)*p})}return y},Oe=(e,t)=>{const r=t,o=t,a=e.createConicGradient(Math.PI*1.5,r,o);a.addColorStop(0,"#FFFF00"),a.addColorStop(.19,"#FF0000"),a.addColorStop(.36,"#FF00FF"),a.addColorStop(.5,"#0000FF"),a.addColorStop(.64,"#00FFFF"),a.addColorStop(.78,"#00FF00"),a.addColorStop(1,"#FFFF00"),e.fillStyle=a,e.beginPath(),e.arc(r,o,t,0,Math.PI*2),e.fill();const s=e.createRadialGradient(r,o,0,r,o,t);s.addColorStop(0,"#ffffff"),s.addColorStop(.2,"rgba(255, 255, 255, 0.8)"),s.addColorStop(.6,"rgba(255, 255, 255, 0.2)"),s.addColorStop(1,"rgba(255, 255, 255, 0)"),e.fillStyle=s,e.beginPath(),e.arc(r,o,t,0,Math.PI*2),e.fill()},Fe=(e,t,r)=>{const o=Math.sqrt(e*e+t*t),a=r-1;if(o>a){const s=a/o;return{x:e*s,y:t*s}}return{x:e,y:t}},Ie=({radius:e=150,onChange:t,quantityOfColors:r=5,harmony:o=S.Monochromatic})=>{const a=_.useRef(null),s=_.useRef(null),[i,d]=_.useState([]),P=_.useRef([]),y=_.useCallback((c,l)=>{const f=a.current;if(!f)return"#ffffff";const p=f.getContext("2d");if(!p)return"#ffffff";const R=window.devicePixelRatio||1,x=c+e,w=l+e,F=Math.floor(x*R),M=Math.floor(w*R),E=p.getImageData(F,M,1,1).data;return T({r:E[0],g:E[1],b:E[2],a:E[3]/255}).toHex()},[e]);_.useEffect(()=>{const c=a.current;if(!c)return;const l=c.getContext("2d",{willReadFrequently:!0});if(!l)return;const f=window.devicePixelRatio||1,p=e*2;c.width=p*f,c.height=p*f,c.style.width=`${p}px`,c.style.height=`${p}px`,l.scale(f,f),Oe(l,e)},[e]),_.useEffect(()=>{let c;if(i.length>0){const l=i[0];c=ve(l.x,l.y,o,r)}if(!c){const l=e*.5;o!==S.Custom?c=ve(l,0,o,r):c=Array.from({length:r}).map((p,R)=>{const x=R/r*2*Math.PI;return{x:Math.cos(x)*e*.6,y:Math.sin(x)*e*.6}})}if(c){const l=c.map((f,p)=>({id:p,x:f.x,y:f.y,color:y(f.x,f.y)}));if(l.length>0&&o!==S.Custom){const f=Math.atan2(l[0].y,l[0].x),p=Math.sqrt(l[0].x*l[0].x+l[0].y*l[0].y);P.current=l.map(R=>{const x=Math.atan2(R.y,R.x),w=Math.sqrt(R.x*R.x+R.y*R.y);return{angleOffset:x-f,distanceRatio:p>0?w/p:1}})}d(l),t&&t(l)}},[o,r,y]);const h=_.useCallback((c,l,f)=>{const p=s.current;if(!p)return;const R=p.getBoundingClientRect();let x=c-R.left-e,w=l-R.top-e;const F=Fe(x,w,e);if(x=F.x,w=F.y,o===S.Custom){const M=y(x,w),E=[...i];E[f]={...E[f],x,y:w,color:M},d(E),t&&t(E);return}if(P.current.length>0&&P.current[f]){const M=Math.atan2(w,x),E=P.current[f],Q=M-E.angleOffset,V=i.map((N,I)=>{if(I===f)return{...N,x,y:w,color:y(x,w)};const G=Math.sqrt(N.x*N.x+N.y*N.y),K=P.current[I],D=Q+K.angleOffset,z=Math.cos(D)*G,J=Math.sin(D)*G;return{...N,x:z,y:J,color:y(z,J)}});d(V),t&&t(V)}else{const M=y(x,w),E=[...i];E[f]={...E[f],x,y:w,color:M},d(E),t&&t(E)}},[e,y,t,i,o]),O=_.useCallback(c=>({onPointerDown:l=>{h(l.clientX,l.clientY,c)},onPointerMove:l=>{h(l.clientX,l.clientY,c)},onPointerUp:()=>{}}),[h]);return j.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:20},children:j.jsxs("div",{ref:s,style:{width:e*2,height:e*2,position:"relative",touchAction:"none"},children:[j.jsx("canvas",{ref:a,style:{borderRadius:"50%",display:"block"}}),j.jsx("svg",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",zIndex:1},children:i.map(c=>j.jsx("line",{x1:e,y1:e,x2:e+c.x,y2:e+c.y,stroke:"white",strokeWidth:"2",style:{filter:"drop-shadow(0px 1px 1px rgba(0,0,0,0.3))"}},c.id))}),i.map((c,l)=>{const f=O(l);return j.jsx(je,{cursorPos:{x:c.x,y:c.y},hexColor:c.color,onPointerDown:f.onPointerDown,onPointerMove:f.onPointerMove,onPointerUp:f.onPointerUp},c.id)})]})})};A.ColorWheel=Ie,A.HarmonyType=S,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})}));
+(function(S,M){typeof exports=="object"&&typeof module<"u"?M(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],M):(S=typeof globalThis<"u"?globalThis:S||self,M(S.ReactColorPaletteWheel={},S.jsxRuntime,S.React))})(this,(function(S,M,P){"use strict";var tt={grad:.9,turn:360,rad:360/(2*Math.PI)},F=function(t){return typeof t=="string"?t.length>0:typeof t=="number"},d=function(t,e,n){return e===void 0&&(e=0),n===void 0&&(n=Math.pow(10,e)),Math.round(n*t)/n+0},C=function(t,e,n){return e===void 0&&(e=0),n===void 0&&(n=1),t>n?n:t>e?t:e},q=function(t){return(t=isFinite(t)?t%360:0)>0?t:t+360},W=function(t){return{r:C(t.r,0,255),g:C(t.g,0,255),b:C(t.b,0,255),a:C(t.a)}},A=function(t){return{r:d(t.r),g:d(t.g),b:d(t.b),a:d(t.a,3)}},et=/^#([0-9a-f]{3,8})$/i,k=function(t){var e=t.toString(16);return e.length<2?"0"+e:e},Y=function(t){var e=t.r,n=t.g,o=t.b,r=t.a,a=Math.max(e,n,o),s=a-Math.min(e,n,o),f=s?a===e?(n-o)/s:a===n?2+(o-e)/s:4+(e-n)/s:0;return{h:60*(f<0?f+6:f),s:a?s/a*100:0,v:a/255*100,a:r}},E=function(t){var e=t.h,n=t.s,o=t.v,r=t.a;e=e/360*6,n/=100,o/=100;var a=Math.floor(e),s=o*(1-n),f=o*(1-(e-a)*n),m=o*(1-(1-e+a)*n),p=a%6;return{r:255*[o,f,s,s,m,o][p],g:255*[m,o,o,f,s,s][p],b:255*[s,s,m,o,o,f][p],a:r}},T=function(t){return{h:q(t.h),s:C(t.s,0,100),l:C(t.l,0,100),a:C(t.a)}},X=function(t){return{h:d(t.h),s:d(t.s),l:d(t.l),a:d(t.a,3)}},z=function(t){return E((n=(e=t).s,{h:e.h,s:(n*=((o=e.l)<50?o:100-o)/100)>0?2*n/(o+n)*100:0,v:o+n,a:e.a}));var e,n,o},D=function(t){return{h:(e=Y(t)).h,s:(r=(200-(n=e.s))*(o=e.v)/100)>0&&r<200?n*o/100/(r<=100?r:200-r)*100:0,l:r/2,a:e.a};var e,n,o,r},nt=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,ot=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,rt=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,at=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,G={string:[[function(t){var e=et.exec(t);return e?(t=e[1]).length<=4?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:t.length===4?d(parseInt(t[3]+t[3],16)/255,2):1}:t.length===6||t.length===8?{r:parseInt(t.substr(0,2),16),g:parseInt(t.substr(2,2),16),b:parseInt(t.substr(4,2),16),a:t.length===8?d(parseInt(t.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(t){var e=rt.exec(t)||at.exec(t);return e?e[2]!==e[4]||e[4]!==e[6]?null:W({r:Number(e[1])/(e[2]?100/255:1),g:Number(e[3])/(e[4]?100/255:1),b:Number(e[5])/(e[6]?100/255:1),a:e[7]===void 0?1:Number(e[7])/(e[8]?100:1)}):null},"rgb"],[function(t){var e=nt.exec(t)||ot.exec(t);if(!e)return null;var n,o,r=T({h:(n=e[1],o=e[2],o===void 0&&(o="deg"),Number(n)*(tt[o]||1)),s:Number(e[3]),l:Number(e[4]),a:e[5]===void 0?1:Number(e[5])/(e[6]?100:1)});return z(r)},"hsl"]],object:[[function(t){var e=t.r,n=t.g,o=t.b,r=t.a,a=r===void 0?1:r;return F(e)&&F(n)&&F(o)?W({r:Number(e),g:Number(n),b:Number(o),a:Number(a)}):null},"rgb"],[function(t){var e=t.h,n=t.s,o=t.l,r=t.a,a=r===void 0?1:r;if(!F(e)||!F(n)||!F(o))return null;var s=T({h:Number(e),s:Number(n),l:Number(o),a:Number(a)});return z(s)},"hsl"],[function(t){var e=t.h,n=t.s,o=t.v,r=t.a,a=r===void 0?1:r;if(!F(e)||!F(n)||!F(o))return null;var s=(function(f){return{h:q(f.h),s:C(f.s,0,100),v:C(f.v,0,100),a:C(f.a)}})({h:Number(e),s:Number(n),v:Number(o),a:Number(a)});return E(s)},"hsv"]]},L=function(t,e){for(var n=0;n<e.length;n++){var o=e[n][0](t);if(o)return[o,e[n][1]]}return[null,void 0]},st=function(t){return typeof t=="string"?L(t.trim(),G.string):typeof t=="object"&&t!==null?L(t,G.object):[null,void 0]},H=function(t,e){var n=D(t);return{h:n.h,s:C(n.s+100*e,0,100),l:n.l,a:n.a}},j=function(t){return(299*t.r+587*t.g+114*t.b)/1e3/255},O=function(t,e){var n=D(t);return{h:n.h,s:n.s,l:C(n.l+100*e,0,100),a:n.a}},B=(function(){function t(e){this.parsed=st(e)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return t.prototype.isValid=function(){return this.parsed!==null},t.prototype.brightness=function(){return d(j(this.rgba),2)},t.prototype.isDark=function(){return j(this.rgba)<.5},t.prototype.isLight=function(){return j(this.rgba)>=.5},t.prototype.toHex=function(){return e=A(this.rgba),n=e.r,o=e.g,r=e.b,s=(a=e.a)<1?k(d(255*a)):"","#"+k(n)+k(o)+k(r)+s;var e,n,o,r,a,s},t.prototype.toRgb=function(){return A(this.rgba)},t.prototype.toRgbString=function(){return e=A(this.rgba),n=e.r,o=e.g,r=e.b,(a=e.a)<1?"rgba("+n+", "+o+", "+r+", "+a+")":"rgb("+n+", "+o+", "+r+")";var e,n,o,r,a},t.prototype.toHsl=function(){return X(D(this.rgba))},t.prototype.toHslString=function(){return e=X(D(this.rgba)),n=e.h,o=e.s,r=e.l,(a=e.a)<1?"hsla("+n+", "+o+"%, "+r+"%, "+a+")":"hsl("+n+", "+o+"%, "+r+"%)";var e,n,o,r,a},t.prototype.toHsv=function(){return e=Y(this.rgba),{h:d(e.h),s:d(e.s),v:d(e.v),a:d(e.a,3)};var e},t.prototype.invert=function(){return w({r:255-(e=this.rgba).r,g:255-e.g,b:255-e.b,a:e.a});var e},t.prototype.saturate=function(e){return e===void 0&&(e=.1),w(H(this.rgba,e))},t.prototype.desaturate=function(e){return e===void 0&&(e=.1),w(H(this.rgba,-e))},t.prototype.grayscale=function(){return w(H(this.rgba,-1))},t.prototype.lighten=function(e){return e===void 0&&(e=.1),w(O(this.rgba,e))},t.prototype.darken=function(e){return e===void 0&&(e=.1),w(O(this.rgba,-e))},t.prototype.rotate=function(e){return e===void 0&&(e=15),this.hue(this.hue()+e)},t.prototype.alpha=function(e){return typeof e=="number"?w({r:(n=this.rgba).r,g:n.g,b:n.b,a:e}):d(this.rgba.a,3);var n},t.prototype.hue=function(e){var n=D(this.rgba);return typeof e=="number"?w({h:e,s:n.s,l:n.l,a:n.a}):d(n.h)},t.prototype.isEqual=function(e){return this.toHex()===w(e).toHex()},t})(),w=function(t){return t instanceof B?t:new B(t)};const it=({hexColor:t,cursorPos:e,onPointerDown:n,onPointerMove:o,onPointerUp:r})=>{const[a,s]=P.useState(!1),f=h=>{s(!0),n(h),h.currentTarget.setPointerCapture(h.pointerId)},m=h=>{a&&o(h)},p=h=>{s(!1),r(h),h.currentTarget.releasePointerCapture(h.pointerId)};return M.jsx("div",{style:{position:"absolute",width:24,height:24,borderRadius:"50%",border:"2px solid white",boxShadow:"0 2px 4px rgba(0,0,0,0.3)",backgroundColor:t,left:"50%",top:"50%",transform:`translate(calc(-50% + ${e.x}px), calc(-50% + ${e.y}px))`,pointerEvents:"auto",cursor:a?"grabbing":"grab",willChange:"transform",zIndex:10},onPointerDown:f,onPointerMove:m,onPointerUp:p})},v={Custom:"Custom",Analogous:"Analogous",Monochromatic:"Monochromatic",Triad:"Triad",Complementary:"Complementary",SplitComplementary:"SplitComplementary",Square:"Square",Compound:"Compound"},V=(t,e,n,o)=>{const r=Math.atan2(e,t),a=Math.sqrt(t*t+e*e);let s=[];switch(n){case v.Analogous:s=[0,-30,30,-60,60];break;case v.Monochromatic:s=[0];break;case v.Triad:s=[0,120,240];break;case v.Complementary:s=[0,180];break;case v.SplitComplementary:s=[0,150,210];break;case v.Square:s=[0,90,180,270];break;case v.Compound:s=[0,180,30,210,60];break;case v.Custom:default:return null}const f=s.length,m=.25,p=[];for(let h=0;h<o;h++){const $=Math.floor(h/f),l=h%f,i=s[l],u=r+i*Math.PI/180;let c=a;n===v.Monochromatic?(c=a*(1-h*.15),c<0&&(c=0)):(c=a*(1-$*m),c<0&&(c=0)),p.push({x:Math.cos(u)*c,y:Math.sin(u)*c})}return p},lt=(t,e)=>{const n=e,o=e,r=t.createConicGradient(Math.PI*1.5,n,o);r.addColorStop(0,"#FFFF00"),r.addColorStop(.19,"#FF0000"),r.addColorStop(.36,"#FF00FF"),r.addColorStop(.5,"#0000FF"),r.addColorStop(.64,"#00FFFF"),r.addColorStop(.78,"#00FF00"),r.addColorStop(1,"#FFFF00"),t.fillStyle=r,t.beginPath(),t.arc(n,o,e,0,Math.PI*2),t.fill();const a=t.createRadialGradient(n,o,0,n,o,e);a.addColorStop(0,"#ffffff"),a.addColorStop(.2,"rgba(255, 255, 255, 0.8)"),a.addColorStop(.6,"rgba(255, 255, 255, 0.2)"),a.addColorStop(1,"rgba(255, 255, 255, 0)"),t.fillStyle=a,t.beginPath(),t.arc(n,o,e,0,Math.PI*2),t.fill()},ut=(t,e,n)=>{const o=Math.sqrt(t*t+e*e),r=n-1;if(o>r){const a=r/o;return{x:t*a,y:e*a}}return{x:t,y:e}},ct=({radius:t=150,onChange:e,quantityOfColors:n=5,harmony:o=v.Monochromatic})=>{const r=P.useRef(null),a=P.useRef(null),[s,f]=P.useState([]),m=P.useRef([]),p=P.useCallback((l,i)=>{const u=r.current;if(!u)return"#ffffff";const c=u.getContext("2d");if(!c)return"#ffffff";const y=window.devicePixelRatio||1,g=l+t,x=i+t,R=Math.floor(g*y),I=Math.floor(x*y),b=c.getImageData(R,I,1,1).data;return w({r:b[0],g:b[1],b:b[2],a:b[3]/255}).toHex()},[t]);P.useEffect(()=>{const l=r.current;if(!l)return;const i=l.getContext("2d",{willReadFrequently:!0});if(!i)return;const u=window.devicePixelRatio||1,c=t*2;l.width=c*u,l.height=c*u,l.style.width=`${c}px`,l.style.height=`${c}px`,i.scale(u,u),lt(i,t)},[t]),P.useEffect(()=>{let l;if(s.length>0){const i=s[0];l=V(i.x,i.y,o,n)}if(!l){const i=t*.5;o!==v.Custom?l=V(i,0,o,n):l=Array.from({length:n}).map((c,y)=>{const g=y/n*2*Math.PI;return{x:Math.cos(g)*t*.6,y:Math.sin(g)*t*.6}})}if(l){const i=l.map((u,c)=>({id:c,x:u.x,y:u.y,color:p(u.x,u.y)}));if(i.length>0&&o!==v.Custom){const u=Math.atan2(i[0].y,i[0].x),c=Math.sqrt(i[0].x*i[0].x+i[0].y*i[0].y);m.current=i.map(y=>{const g=Math.atan2(y.y,y.x),x=Math.sqrt(y.x*y.x+y.y*y.y);return{angleOffset:g-u,distanceRatio:c>0?x/c:1}})}f(i),e&&e(i)}},[o,n,p]);const h=P.useCallback((l,i,u)=>{const c=a.current;if(!c)return;const y=c.getBoundingClientRect();let g=l-y.left-t,x=i-y.top-t;const R=ut(g,x,t);if(g=R.x,x=R.y,o===v.Custom){const I=p(g,x),b=[...s];b[u]={...b[u],x:g,y:x,color:I},f(b),e&&e(b);return}if(m.current.length>0&&m.current[u]){const I=Math.atan2(x,g),b=m.current[u],ft=I-b.angleOffset,_=s.map((N,J)=>{if(J===u)return{...N,x:g,y:x,color:p(g,x)};const K=Math.sqrt(N.x*N.x+N.y*N.y),ht=m.current[J],Q=ft+ht.angleOffset,Z=Math.cos(Q)*K,U=Math.sin(Q)*K;return{...N,x:Z,y:U,color:p(Z,U)}});f(_),e&&e(_)}else{const I=p(g,x),b=[...s];b[u]={...b[u],x:g,y:x,color:I},f(b),e&&e(b)}},[t,p,e,s,o]),$=P.useCallback(l=>({onPointerDown:i=>{h(i.clientX,i.clientY,l)},onPointerMove:i=>{h(i.clientX,i.clientY,l)},onPointerUp:()=>{}}),[h]);return M.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:20},children:M.jsxs("div",{ref:a,style:{width:t*2,height:t*2,position:"relative",touchAction:"none"},children:[M.jsx("canvas",{ref:r,style:{borderRadius:"50%",display:"block"}}),M.jsx("svg",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",zIndex:1},children:s.map(l=>M.jsx("line",{x1:t,y1:t,x2:t+l.x,y2:t+l.y,stroke:"white",strokeWidth:"2",style:{filter:"drop-shadow(0px 1px 1px rgba(0,0,0,0.3))"}},l.id))}),s.map((l,i)=>{const u=$(i);return M.jsx(it,{cursorPos:{x:l.x,y:l.y},hexColor:l.color,onPointerDown:u.onPointerDown,onPointerMove:u.onPointerMove,onPointerUp:u.onPointerUp},l.id)})]})})};S.ColorWheel=ct,S.HarmonyType=v,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,7 +1,29 @@
 {
   "name": "react-color-palette-wheel",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MillesDyson/color-palette-generator.git"
+  },
+  "homepage": "https://github.com/MillesDyson/color-palette-generator",
+  "bugs": {
+    "url": "https://github.com/MillesDyson/color-palette-generator/issues"
+  },
+  "keywords": [
+    "react",
+    "color",
+    "palette",
+    "wheel",
+    "color-palette",
+    "color-palette-generator"
+  ],
+  "author": {
+    "name": "Milles Dyson",
+    "email": "millesdyson@gmail.com",
+    "url": "https://github.com/MillesDyson"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
@@ -40,7 +62,7 @@
     "react-dom": "^19.2.0"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   }
 }