react-color-palette-wheel 0.0.1

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@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
+
+## React Compiler
+
+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).
+
+## Expanding the ESLint configuration
+
+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:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+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...
+    },
+  },
+])
+```

package/dist/components/ColorWheel.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ColorWheelProps } from '../types/colorWheel';
+export declare const ColorWheel: React.FC<ColorWheelProps>;

package/dist/components/ColorWheelCursor.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+interface ColorWheelCursorProps {
+    hexColor: string;
+    cursorPos: {
+        x: number;
+        y: number;
+    };
+    onPointerDown: (e: React.PointerEvent) => void;
+    onPointerMove: (e: React.PointerEvent) => void;
+    onPointerUp: (e: React.PointerEvent) => void;
+}
+export declare const ColorWheelCursor: React.FC<ColorWheelCursorProps>;
+export {};

package/dist/hooks/usePointerHandlers.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+import { CursorData } from '../types/colorWheel';
+interface UsePointerHandlersParams {
+    containerRef: RefObject<HTMLDivElement | null>;
+    cursorProps: CursorData[];
+    radius: number;
+    handleDirectCursorMove: (clientX: number, clientY: number, indexToUpdate: number) => void;
+}
+export declare const usePointerHandlers: ({ containerRef, cursorProps, radius, handleDirectCursorMove, }: UsePointerHandlersParams) => {
+    activeCursorIndex: number | null;
+    onPointerDown: (e: React.PointerEvent) => void;
+    onPointerMove: (e: React.PointerEvent) => void;
+    onPointerUp: (e: React.PointerEvent) => void;
+};
+export {};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ColorWheel } from './components/ColorWheel';
+export { HarmonyType } from './types/colorWheel';
+export type { CursorData, ColorWheelProps, HarmonyType as HarmonyTypeType } from './types/colorWheel';

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

@@ -0,0 +1,652 @@
+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]];
+  }
+  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 };
+  }
+  return e.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);
+};
+const De = ({
+  hexColor: e,
+  cursorPos: t,
+  onPointerDown: r,
+  onPointerMove: o,
+  onPointerUp: a
+}) => {
+  const [s, i] = Re(!1), d = (h) => {
+    i(!0), r(h), h.currentTarget.setPointerCapture(h.pointerId);
+  }, _ = (h) => {
+    s && o(h);
+  }, m = (h) => {
+    i(!1), a(h), h.currentTarget.releasePointerCapture(h.pointerId);
+  };
+  return /* @__PURE__ */ 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: 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: _,
+      onPointerUp: m
+    }
+  );
+}, w = {
+  /** Custom color selection without predefined harmony */
+  Custom: "Custom",
+  /** Colors adjacent to each other on the color wheel */
+  Analogous: "Analogous",
+  /** Colors of the same hue with varying saturation and lightness */
+  Monochromatic: "Monochromatic",
+  /** Three colors evenly spaced around the color wheel */
+  Triad: "Triad",
+  /** Two colors opposite each other on the color wheel */
+  Complementary: "Complementary",
+  /** A base color and two colors adjacent to its complement */
+  SplitComplementary: "SplitComplementary",
+  /** Four colors evenly spaced around the color wheel */
+  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];
+      break;
+    case w.Monochromatic:
+      i = [0];
+      break;
+    case w.Triad:
+      i = [0, 120, 240];
+      break;
+    case w.Complementary:
+      i = [0, 180];
+      break;
+    case w.SplitComplementary:
+      i = [0, 150, 210];
+      break;
+    case w.Square:
+      i = [0, 90, 180, 270];
+      break;
+    case w.Compound:
+      i = [0, 180, 30, 210, 60];
+      break;
+    case w.Custom:
+    default:
+      return null;
+  }
+  const d = i.length, _ = 0.25, m = [];
+  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
+    });
+  }
+  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 { x: e, y: t };
+}, qe = ({
+  radius: e = 150,
+  onChange: t,
+  quantityOfColors: r = 5,
+  harmony: o = w.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 });
+    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);
+    }
+    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 (c) {
+      const l = c.map((f, p) => ({
+        id: p,
+        x: f.x,
+        y: f.y,
+        color: m(f.x, f.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);
+          return {
+            angleOffset: x - f,
+            distanceRatio: p > 0 ? P / p : 1
+          };
+        });
+      }
+      d(l), t && t(l);
+    }
+  }, [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);
+        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;
+          return {
+            ...A,
+            x: D,
+            y: L,
+            color: m(D, L)
+          };
+        });
+        d(q), t && t(q);
+      } else {
+        const k = m(x, P), R = [...i];
+        R[f] = { ...R[f], x, y: P, color: k }, d(R), t && t(R);
+      }
+    },
+    [e, m, t, i, o]
+  ), N = K((c) => ({
+    onPointerDown: (l) => {
+      h(l.clientX, l.clientY, c);
+    },
+    onPointerMove: (l) => {
+      h(l.clientX, l.clientY, c);
+    },
+    onPointerUp: () => {
+    }
+  }), [h]);
+  return /* @__PURE__ */ M.jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 20 }, children: /* @__PURE__ */ M.jsxs(
+    "div",
+    {
+      ref: s,
+      style: {
+        width: e * 2,
+        height: e * 2,
+        position: "relative",
+        touchAction: "none"
+      },
+      children: [
+        /* @__PURE__ */ M.jsx("canvas", { ref: a, style: { borderRadius: "50%", display: "block" } }),
+        /* @__PURE__ */ M.jsx(
+          "svg",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none",
+              zIndex: 1
+            },
+            children: i.map((c) => /* @__PURE__ */ M.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 = N(l);
+          return /* @__PURE__ */ M.jsx(
+            De,
+            {
+              cursorPos: { x: c.x, y: c.y },
+              hexColor: c.color,
+              onPointerDown: f.onPointerDown,
+              onPointerMove: f.onPointerMove,
+              onPointerUp: f.onPointerUp
+            },
+            c.id
+          );
+        })
+      ]
+    }
+  ) });
+};
+export {
+  qe as ColorWheel,
+  w as HarmonyType
+};

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

@@ -0,0 +1,6 @@
+(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"})}));

package/dist/types/colorWheel.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Available color harmony types for the color wheel.
+ * Each type represents a different color relationship scheme.
+ */
+export declare const HarmonyType: {
+    /** Custom color selection without predefined harmony */
+    readonly Custom: "Custom";
+    /** Colors adjacent to each other on the color wheel */
+    readonly Analogous: "Analogous";
+    /** Colors of the same hue with varying saturation and lightness */
+    readonly Monochromatic: "Monochromatic";
+    /** Three colors evenly spaced around the color wheel */
+    readonly Triad: "Triad";
+    /** Two colors opposite each other on the color wheel */
+    readonly Complementary: "Complementary";
+    /** A base color and two colors adjacent to its complement */
+    readonly SplitComplementary: "SplitComplementary";
+    /** Four colors evenly spaced around the color wheel */
+    readonly Square: "Square";
+    /** A combination of complementary and analogous colors */
+    readonly Compound: "Compound";
+};
+/**
+ * Type representing a color harmony type.
+ * Derived from the HarmonyType constant object.
+ */
+export type HarmonyType = typeof HarmonyType[keyof typeof HarmonyType];
+/**
+ * Represents a cursor position and color data on the color wheel.
+ */
+export interface CursorData {
+    /** Unique identifier for the cursor */
+    id: number;
+    /** X coordinate position on the color wheel canvas */
+    x: number;
+    /** Y coordinate position on the color wheel canvas */
+    y: number;
+    /** Hex color value associated with this cursor position */
+    color: string;
+}
+/**
+ * Props for the ColorWheel component.
+ */
+export interface ColorWheelProps {
+    /** Radius of the color wheel in pixels. Defaults to a standard size if not provided. */
+    radius?: number;
+    /** Callback function invoked when colors change. Receives an array of cursor data. */
+    onChange?: (colors: CursorData[]) => void;
+    /** Number of color cursors to display on the wheel */
+    quantityOfColors?: number;
+    /** Type of color harmony to apply to the color selection */
+    harmony?: HarmonyType;
+}

package/dist/utils/calculateCursorPosition.d.ts

@@ -0,0 +1,4 @@
+export declare const calculateCursorPosition: (clientX: number, clientY: number, containerRect: DOMRect, radius: number) => {
+    x: number;
+    y: number;
+};

package/dist/utils/calculateHarmonyPositions.d.ts

@@ -0,0 +1,5 @@
+import { HarmonyType } from '../types/colorWheel';
+export declare const calculateHarmonyPositions: (masterX: number, masterY: number, harmony: HarmonyType, totalCursors: number) => {
+    x: number;
+    y: number;
+}[] | null;

package/dist/utils/calculateXy.d.ts

@@ -0,0 +1,4 @@
+export declare const xyToHs: (x: number, y: number, radius: number) => {
+    h: number;
+    s: number;
+};

package/dist/utils/constrainToRadius.d.ts

@@ -0,0 +1,4 @@
+export declare const constrainToRadius: (x: number, y: number, radius: number) => {
+    x: number;
+    y: number;
+};

package/dist/utils/drawColorWheel.d.ts

@@ -0,0 +1 @@
+export declare const drawColorWheel: (ctx: CanvasRenderingContext2D, radius: number) => void;

package/dist/utils/findClosestCursor.d.ts

@@ -0,0 +1,2 @@
+import { CursorData } from '../types/colorWheel';
+export declare const findClosestCursor: (clickX: number, clickY: number, cursors: CursorData[], maxDistance?: number) => number | null;

package/dist/utils/handleCursorMove.d.ts

@@ -0,0 +1,15 @@
+import { CursorData, HarmonyType } from '../types/colorWheel';
+interface HandleCursorMoveParams {
+    clientX: number;
+    clientY: number;
+    indexToUpdate: number;
+    containerRect: DOMRect;
+    radius: number;
+    harmony: HarmonyType;
+    quantityOfColors: number;
+    cursorProps: CursorData[];
+    getColorFromCanvas: (x: number, y: number) => string;
+    onChange?: (colors: CursorData[]) => void;
+}
+export declare const handleCursorMove: ({ clientX, clientY, indexToUpdate, containerRect, radius, harmony, quantityOfColors, cursorProps, getColorFromCanvas, onChange, }: HandleCursorMoveParams) => CursorData[];
+export {};

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-color-palette-wheel",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "files": ["dist"], 
+  "main": "./dist/react-color-palette-wheel.umd.js", 
+  "module": "./dist/react-color-palette-wheel.es.js", 
+  "types": "./dist/index.d.ts", 
+  "exports": {
+    ".": {
+      "import": "./dist/react-color-palette-wheel.es.js",
+      "require": "./dist/react-color-palette-wheel.umd.js"
+    }
+  },
+  "dependencies": {
+    "colord": "^2.9.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  }
+}