@vuelor/picker 0.3.1 → 0.4.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ref as O, watch as te, computed as m, toRaw as j, defineComponent as V, createElementBlock as P, openBlock as y, normalizeClass as c, unref as l, renderSlot as T, onMounted as ne, onUnmounted as re, useTemplateRef as ue, watchEffect as ie, withModifiers as ce, normalizeStyle as x, createElementVNode as h, createBlock as A, createCommentVNode as W, withCtx as F, getCurrentInstance as de, createVNode as w } from "vue";
+import { ref as O, watch as te, computed as f, toRaw as j, defineComponent as V, createElementBlock as P, openBlock as C, normalizeClass as c, unref as l, renderSlot as T, onMounted as re, onUnmounted as ne, useTemplateRef as ue, watchEffect as ie, withModifiers as ce, normalizeStyle as x, createElementVNode as h, createBlock as A, createCommentVNode as W, withCtx as F, getCurrentInstance as de, createVNode as w } from "vue";
 import { twMerge as ve } from "tailwind-merge";
 import { createContext as pe, Primitive as ae, SliderRoot as L, SliderTrack as G, SliderThumb as N } from "reka-ui";
 function _(a, e = 0, t = 1) {
@@ -6,33 +6,33 @@ function _(a, e = 0, t = 1) {
 }
 function le(a, e = 1) {
   const t = [];
-  let s = 0;
-  for (; s < a.length; )
-    t.push(a.substring(s, s + e)), s += e;
+  let o = 0;
+  for (; o < a.length; )
+    t.push(a.substring(o, o + e)), o += e;
   return t;
 }
-function se(a) {
-  const { h: e, s: t, l: s } = a, u = s + t * Math.min(s, 1 - s), i = u === 0 ? 0 : 2 - 2 * s / u;
+function oe(a) {
+  const { h: e, s: t, l: o } = a, u = o + t * Math.min(o, 1 - o), i = u === 0 ? 0 : 2 - 2 * o / u;
   return { h: e, s: i, v: u };
 }
-function oe(a) {
-  const { h: e, s: t, v: s } = a, u = s - s * t / 2, i = u === 1 || u === 0 ? 0 : (s - u) / Math.min(u, 1 - u);
+function se(a) {
+  const { h: e, s: t, v: o } = a, u = o - o * t / 2, i = u === 1 || u === 0 ? 0 : (o - u) / Math.min(u, 1 - u);
   return { h: e, s: i, l: u };
 }
 function X(a) {
-  const { h: e, s: t, v: s } = a, u = (o) => {
-    const r = (o + e / 60) % 6;
-    return s - s * t * Math.max(Math.min(r, 4 - r, 1), 0);
-  }, i = [u(5), u(3), u(1)].map((o) => Math.round(o * 255));
+  const { h: e, s: t, v: o } = a, u = (s) => {
+    const n = (s + e / 60) % 6;
+    return o - o * t * Math.max(Math.min(n, 4 - n, 1), 0);
+  }, i = [u(5), u(3), u(1)].map((s) => Math.round(s * 255));
   return { r: i[0], g: i[1], b: i[2] };
 }
 function he(a) {
   if (!a) return { h: 0, s: 1, v: 1 };
-  const e = a.r / 255, t = a.g / 255, s = a.b / 255, u = Math.max(e, t, s), i = Math.min(e, t, s);
-  let o = 0;
-  u !== i && (u === e ? o = 60 * (0 + (t - s) / (u - i)) : u === t ? o = 60 * (2 + (s - e) / (u - i)) : u === s && (o = 60 * (4 + (e - t) / (u - i)))), o < 0 && (o = o + 360);
-  const r = u === 0 ? 0 : (u - i) / u, n = [o, r, u];
-  return { h: n[0], s: n[1], v: n[2] };
+  const e = a.r / 255, t = a.g / 255, o = a.b / 255, u = Math.max(e, t, o), i = Math.min(e, t, o);
+  let s = 0;
+  u !== i && (u === e ? s = 60 * (0 + (t - o) / (u - i)) : u === t ? s = 60 * (2 + (o - e) / (u - i)) : u === o && (s = 60 * (4 + (e - t) / (u - i)))), s < 0 && (s = s + 360);
+  const n = u === 0 ? 0 : (u - i) / u, r = [s, n, u];
+  return { h: r[0], s: r[1], v: r[2] };
 }
 const R = (a) => {
   const e = Math.round(a).toString(16);
@@ -61,7 +61,7 @@ function J(a) {
     b: e[2]
   };
 }
-function ot(a) {
+function st(a) {
   const e = le(a.slice(1), 2).map((t) => parseInt(t, 16));
   return {
     r: e[0],
@@ -70,50 +70,50 @@ function ot(a) {
     a: e[3] / 255
   };
 }
-function fe(a) {
+function me(a) {
   return `rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`;
 }
-function me(a, e, t) {
-  const s = O(void 0);
+function fe(a, e, t) {
+  const o = O(void 0);
   return te(
     () => a.modelValue,
     (u) => {
-      u !== s.value && t(u);
+      u !== o.value && t(u);
     },
     { immediate: !0 }
-  ), m({
+  ), f({
     get: () => a.modelValue,
     set: (u) => {
-      s.value = u, e("update:modelValue", u);
+      o.value = u, e("update:modelValue", u);
     }
   });
 }
 const ge = {
   picker: {
-    root: "w-60 bg-white rounded-[13px] p-4 flex flex-col gap-2 shadow-vuelor-card"
+    root: "w-60 bg-vuelor-surface shadow-vuelor-card rounded-[13px] p-4 flex flex-col gap-2"
   },
   dropper: {
-    base: "enabled:hover:bg-[#0000000d] disabled:opacity-50 rounded-[5px] focus-within:outline-1 focus-within:outline-[#0d99ff] p-1"
+    base: "enabled:hover:bg-black/5 disabled:opacity-50 rounded-[5px] focus-within:outline-1 focus-within:outline-vuelor-primary p-1"
   },
   shared: {
-    thumb: "block w-4 h-4 rounded-full border-4 border-white shadow-vuelor-thumb focus:outline-1 outline-[#0d99ff]"
+    thumb: "block w-4 h-4 rounded-full border-4 border-white shadow-vuelor-thumb focus:outline-1 outline-vuelor-primary"
   },
   canvas: {
-    root: "relative touch-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-    area: "rounded-[5px] outline-1 outline-solid -outline-offset-1 outline-[#0000001a]"
+    root: "touch-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    area: "rounded-[5px] outline-1 outline-solid -outline-offset-1 outline-black/10"
   },
   slider: {
     root: "relative h-4 w-full flex items-center select-none touch-none data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-4 data-[orientation=vertical]:flex-col data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
     track: "relative h-4 w-full shadow-vuelor-inner grow rounded-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-4"
   },
   input: {
-    group: "w-full flex gap-[1px] rounded-[5px] enabled:hover:outline-1 outline-[#e6e6e6] focus-within:outline-1 focus-within:outline-[#0d99ff] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-    item: "flex flex-1 data-[before]:grow-0 data-[alpha-input]:grow-0 items-center px-1 gap-1 bg-[#f5f5f5] first:rounded-l-[5px] last:rounded-r-[5px]",
+    group: "w-full flex gap-[1px] rounded-[5px] hover:outline-1 outline-vuelor-border focus-within:outline-1 focus-within:outline-vuelor-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:outline-none",
+    item: "flex flex-1 data-[before]:grow-0 data-[alpha-input]:grow-0 items-center px-1 gap-1 bg-vuelor-input first:rounded-l-[5px] last:rounded-r-[5px]",
     label: "select-none text-black text-[11px] opacity-40 data-[alpha-label]:block",
     field: "w-full min-w-5 h-6 text-[11px] focus:outline-none"
   },
   swatch: {
-    base: "relative grow-0 h-4 w-4 rounded-[20%] overflow-hidden focus-within:outline-1 focus-within:outline-[#0d99ff] disabled:opacity-50",
+    base: "relative grow-0 h-4 w-4 rounded-[20%] overflow-hidden focus-within:outline-1 focus-within:outline-vuelor-primary disabled:opacity-50",
     alpha: "absolute top-0 right-0 h-full w-1/2"
   }
 }, ke = {
@@ -148,49 +148,49 @@ const ge = {
   tailwindcss: ge,
   vanillacss: ke
 };
-function Ce(a, e) {
+function ye(a, e) {
   return (...t) => {
-    const s = {};
+    const o = {};
     for (const u of t) {
       const i = a[u];
       if (i)
-        for (const [o, r] of Object.entries(i))
-          s[o] = (...n) => {
-            const p = e?.[u]?.[o];
+        for (const [s, n] of Object.entries(i))
+          o[s] = (...r) => {
+            const p = e?.[u]?.[s];
             return ve(
-              r,
+              n,
               p,
-              ...n.filter(Boolean)
+              ...r.filter(Boolean)
             );
           };
     }
-    return s;
+    return o;
   };
 }
 function Z(a) {
   const e = a.trim(), t = e.match(/^#?(?<r>[A-Fa-f0-9]{2})(?<g>[A-Fa-f0-9]{2})(?<b>[A-Fa-f0-9]{2})$/);
   if (t?.groups) {
-    const { r: o, g: r, b: n } = t.groups;
+    const { r: s, g: n, b: r } = t.groups;
     return {
-      r: parseInt(o, 16),
-      g: parseInt(r, 16),
-      b: parseInt(n, 16),
+      r: parseInt(s, 16),
+      g: parseInt(n, 16),
+      b: parseInt(r, 16),
       a: 1
     };
   }
-  const s = e.match(/^#?(?<r>[A-Fa-f0-9]{2})(?<g>[A-Fa-f0-9]{2})(?<b>[A-Fa-f0-9]{2})(?<a>[A-Fa-f0-9]{2})$/);
-  if (s?.groups) {
-    const { r: o, g: r, b: n, a: d } = s.groups;
+  const o = e.match(/^#?(?<r>[A-Fa-f0-9]{2})(?<g>[A-Fa-f0-9]{2})(?<b>[A-Fa-f0-9]{2})(?<a>[A-Fa-f0-9]{2})$/);
+  if (o?.groups) {
+    const { r: s, g: n, b: r, a: d } = o.groups;
     return {
-      r: parseInt(o, 16),
-      g: parseInt(r, 16),
-      b: parseInt(n, 16),
+      r: parseInt(s, 16),
+      g: parseInt(n, 16),
+      b: parseInt(r, 16),
       a: parseInt(d, 16) / 255
     };
   }
   const u = e.match(/^#?(?<r>[A-Fa-f0-9])(?<g>[A-Fa-f0-9])(?<b>[A-Fa-f0-9])$/);
   if (u?.groups) {
-    const { r: o, g: r, b: n } = u.groups, d = o + o, p = r + r, b = n + n;
+    const { r: s, g: n, b: r } = u.groups, d = s + s, p = n + n, b = r + r;
     return {
       r: parseInt(d, 16),
       g: parseInt(p, 16),
@@ -200,17 +200,17 @@ function Z(a) {
   }
   const i = e.match(/^#?(?<r>[A-Fa-f0-9])(?<g>[A-Fa-f0-9])(?<b>[A-Fa-f0-9])(?<a>[A-Fa-f0-9])$/);
   if (i?.groups) {
-    const { r: o, g: r, b: n, a: d } = i.groups, p = o + o, b = r + r, f = n + n, k = d + d;
+    const { r: s, g: n, b: r, a: d } = i.groups, p = s + s, b = n + n, m = r + r, k = d + d;
     return {
       r: parseInt(p, 16),
       g: parseInt(b, 16),
-      b: parseInt(f, 16),
+      b: parseInt(m, 16),
       a: parseInt(k, 16) / 255
     };
   }
   return null;
 }
-function ye(a) {
+function Ce(a) {
   return a ? a.substring(0, 7).replace("#", "") : null;
 }
 function xe(a) {
@@ -221,10 +221,10 @@ function xe(a) {
 function z(a) {
   const e = /^([a-zA-Z]{3,4})\(\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?)\s*,\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?)\s*,\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?)(?:\s*,\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+)%?))?\s*\)$/i, t = a.match(e);
   if (!t) return null;
-  const [, s, u, i, o, r] = t;
+  const [, o, u, i, s, n] = t;
   return {
-    type: s,
-    values: [u, i, o, r].filter(Boolean)
+    type: o,
+    values: [u, i, s, n].filter(Boolean)
   };
 }
 function D(a) {
@@ -282,15 +282,15 @@ function Be(a) {
   } : { h: 0, s: 0, v: 0, a: 1 };
 }
 function K(a) {
-  const e = he(a), t = oe(e);
+  const e = he(a), t = se(e);
   return { hsv: e, hsl: t, rgb: a };
 }
 function Q(a) {
-  const e = se(a), t = X(e);
+  const e = oe(a), t = X(e);
   return { hsv: e, hsl: a, rgb: t };
 }
 function ee(a) {
-  const e = oe(a), t = X(a);
+  const e = se(a), t = X(a);
   return { hsv: a, hsl: e, rgb: t };
 }
 function Ie() {
@@ -298,86 +298,86 @@ function Ie() {
     hsv: { h: 0, s: 0, v: 0 },
     hsl: { h: 0, s: 0, l: 0 },
     rgb: { r: 0, g: 0, b: 0 }
-  }), e = O(100), t = m({
+  }), e = O(100), t = f({
     get: () => a.value.rgb,
     set: (v) => a.value = K(v)
-  }), s = m({
+  }), o = f({
     get: () => ({ ...a.value.rgb, a: e.value / 100 }),
     set: (v) => {
       e.value = Math.round((v.a ?? 1) * 100), a.value = K({ r: v.r, g: v.g, b: v.b });
     }
-  }), u = m({
+  }), u = f({
     get: () => a.value.hsl,
     set: (v) => a.value = Q(v)
-  }), i = m({
+  }), i = f({
     get: () => ({ ...a.value.hsl, a: e.value / 100 }),
     set: (v) => {
       e.value = Math.round((v.a ?? 1) * 100), a.value = Q({ h: v.h, s: v.s, l: v.l });
     }
-  }), o = m({
+  }), s = f({
     get: () => a.value.hsv,
     set: (v) => a.value = ee(v)
-  }), r = m({
+  }), n = f({
     get: () => ({ ...a.value.hsv, a: e.value / 100 }),
     set: (v) => {
       e.value = Math.round((v.a ?? 1) * 100), a.value = ee({ h: v.h, s: v.s, v: v.v });
     }
-  }), n = m({
+  }), r = f({
     get: () => q(a.value.rgb),
     set: (v) => {
-      const C = J(v);
-      a.value = K(C);
+      const y = J(v);
+      a.value = K(y);
     }
-  }), d = m({
+  }), d = f({
     get: () => {
-      const v = q(a.value.rgb), C = R(e.value / 100 * 255);
-      return v + C;
+      const v = q(a.value.rgb), y = R(e.value / 100 * 255);
+      return v + y;
     },
     set: (v) => {
-      const C = J(v.slice(0, 7)), $ = v.slice(7, 9), I = $ ? parseInt($, 16) / 255 : 1;
-      e.value = Math.round(I * 100), a.value = K(C);
+      const y = J(v.slice(0, 7)), $ = v.slice(7, 9), I = $ ? parseInt($, 16) / 255 : 1;
+      e.value = Math.round(I * 100), a.value = K(y);
     }
   });
   function p() {
-    const { r: v, g: C, b: $ } = a.value.rgb;
-    return `rgb(${v}, ${C}, ${$})`;
+    const { r: v, g: y, b: $ } = a.value.rgb;
+    return `rgb(${v}, ${y}, ${$})`;
   }
   function b() {
-    const { r: v, g: C, b: $ } = a.value.rgb, I = (e.value / 100).toFixed(2);
-    return `rgba(${v}, ${C}, ${$}, ${I})`;
+    const { r: v, g: y, b: $ } = a.value.rgb, I = (e.value / 100).toFixed(2);
+    return `rgba(${v}, ${y}, ${$}, ${I})`;
   }
-  function f() {
-    const { h: v, s: C, l: $ } = a.value.hsl, I = (C * 100).toFixed(1), E = ($ * 100).toFixed(1);
+  function m() {
+    const { h: v, s: y, l: $ } = a.value.hsl, I = (y * 100).toFixed(1), E = ($ * 100).toFixed(1);
     return `hsl(${v}, ${I}%, ${E}%)`;
   }
   function k() {
-    const { h: v, s: C, l: $ } = a.value.hsl, I = (C * 100).toFixed(1), E = ($ * 100).toFixed(1), Y = (e.value / 100).toFixed(2);
+    const { h: v, s: y, l: $ } = a.value.hsl, I = (y * 100).toFixed(1), E = ($ * 100).toFixed(1), Y = (e.value / 100).toFixed(2);
     return `hsla(${v}, ${I}%, ${E}%, ${Y})`;
   }
   function B() {
-    const { h: v, s: C, v: $ } = a.value.hsv, I = (C * 100).toFixed(1), E = ($ * 100).toFixed(1);
+    const { h: v, s: y, v: $ } = a.value.hsv, I = (y * 100).toFixed(1), E = ($ * 100).toFixed(1);
     return `hsv(${v}, ${I}%, ${E}%)`;
   }
   function M() {
-    const { h: v, s: C, v: $ } = a.value.hsv, I = (C * 100).toFixed(1), E = ($ * 100).toFixed(1), Y = (e.value / 100).toFixed(2);
+    const { h: v, s: y, v: $ } = a.value.hsv, I = (y * 100).toFixed(1), E = ($ * 100).toFixed(1), Y = (e.value / 100).toFixed(2);
     return `hsva(${v}, ${I}%, ${E}%, ${Y})`;
   }
   function g() {
     return {
       rgb: j(t.value),
-      rgba: j(s.value),
+      rgba: j(o.value),
       hsl: j(u.value),
       hsla: j(i.value),
-      hsv: j(o.value),
-      hsva: j(r.value),
-      hex: n.value,
+      hsv: j(s.value),
+      hsva: j(n.value),
+      hex: r.value,
       hexa: d.value
     };
   }
   function H(v) {
     switch (v) {
       case "hex":
-        return n.value;
+        return r.value;
       case "hexa":
         return d.value;
       case "rgb":
@@ -385,7 +385,7 @@ function Ie() {
       case "rgba":
         return b();
       case "hsl":
-        return f();
+        return m();
       case "hsla":
         return k();
       case "hsv":
@@ -395,19 +395,19 @@ function Ie() {
       case "object":
         return g();
       default:
-        return n.value;
+        return r.value;
     }
   }
-  function U(v, C) {
-    switch (C) {
+  function U(v, y) {
+    switch (y) {
       case "hex": {
         const $ = Z(v);
-        $ && (s.value = $);
+        $ && (o.value = $);
         break;
       }
       case "hexa": {
         const $ = Z(v);
-        $ && (s.value = $);
+        $ && (o.value = $);
         break;
       }
       case "rgb": {
@@ -415,7 +415,7 @@ function Ie() {
         break;
       }
       case "rgba": {
-        s.value = Se(v);
+        o.value = Se(v);
         break;
       }
       case "hsl": {
@@ -427,11 +427,11 @@ function Ie() {
         break;
       }
       case "hsv": {
-        o.value = He(v);
+        s.value = He(v);
         break;
       }
       case "hsva": {
-        r.value = Be(v);
+        n.value = Be(v);
         break;
       }
       case "object": {
@@ -448,16 +448,16 @@ function Ie() {
     state: a,
     alpha: e,
     rgb: t,
-    rgba: s,
+    rgba: o,
     hsl: u,
     hsla: i,
-    hsv: o,
-    hsva: r,
-    hex: n,
+    hsv: s,
+    hsva: n,
+    hex: r,
     hexa: d,
     toRGBString: p,
     toRGBAString: b,
-    toHSLString: f,
+    toHSLString: m,
     toHSLAString: k,
     toHSVString: B,
     toHSVAString: M,
@@ -466,7 +466,7 @@ function Ie() {
     fromFormat: U
   };
 }
-const [S, Pe] = pe("ColorPickerRoot"), nt = /* @__PURE__ */ V({
+const [S, Pe] = pe("ColorPickerRoot"), rt = /* @__PURE__ */ V({
   __name: "ColorPickerRoot",
   props: {
     ui: {},
@@ -479,115 +479,115 @@ const [S, Pe] = pe("ColorPickerRoot"), nt = /* @__PURE__ */ V({
   },
   emits: ["valueCommit", "update:modelValue"],
   setup(a, { expose: e, emit: t }) {
-    const s = a, u = t, i = Ie(), o = me(s, u, (b) => {
-      b === null || s.format === "object" && typeof b != "object" || s.format !== "object" && typeof b == "object" ? i.hexa.value = s.defaultValue : i.fromFormat(b, s.format);
+    const o = a, u = t, i = Ie(), s = fe(o, u, (b) => {
+      b === null || o.format === "object" && typeof b != "object" || o.format !== "object" && typeof b == "object" ? i.hexa.value = o.defaultValue : i.fromFormat(b, o.format);
     });
     te(
       () => [i.hexa.value, i.hsv.value],
-      () => o.value = i.toFormat(s.format)
+      () => s.value = i.toFormat(o.format)
     );
-    const r = m(() => s.disabled), n = m(() => ["hexa", "rgba", "hsva", "object"].includes(s.format)), d = Ce($e[s.styling], s.ui), p = d("picker");
+    const n = f(() => o.disabled), r = f(() => ["hexa", "rgba", "hsva", "object"].includes(o.format)), d = ye($e[o.styling], o.ui), p = d("picker");
     return Pe({
       ...i,
       uiSlots: d,
-      disabled: r,
-      isAlphaEnabled: n,
+      disabled: n,
+      isAlphaEnabled: r,
       commitValue: () => {
-        s.disabled || u("valueCommit", i.toFormat(s.format));
+        o.disabled || u("valueCommit", i.toFormat(o.format));
       }
     }), e({
       color: i
-    }), (b, f) => (y(), P("div", {
-      class: c(l(p).root(s.class))
+    }), (b, m) => (C(), P("div", {
+      class: c(l(p).root(o.class))
     }, [
       T(b.$slots, "default")
     ], 2));
   }
 });
 function Ae(a, e) {
-  const t = a.canvas.width, s = a.canvas.height, u = `hsl(${e},100%,50%)`;
-  a.rect(0, 0, t, s), a.fillStyle = u, a.fillRect(0, 0, t, s);
+  const t = a.canvas.width, o = a.canvas.height, u = `hsl(${e},100%,50%)`;
+  a.rect(0, 0, t, o), a.fillStyle = u, a.fillRect(0, 0, t, o);
   const i = a.createLinearGradient(0, 0, t, 0);
-  i.addColorStop(0, "rgba(255,255,255,1)"), i.addColorStop(1, "rgba(255,255,255,0)"), a.fillStyle = i, a.fillRect(0, 0, t, s);
-  const o = a.createLinearGradient(0, 0, 0, s);
-  o.addColorStop(0, "rgba(0,0,0,0)"), o.addColorStop(1, "rgba(0,0,0,1)"), a.fillStyle = o, a.fillRect(0, 0, t, s);
+  i.addColorStop(0, "rgba(255,255,255,1)"), i.addColorStop(1, "rgba(255,255,255,0)"), a.fillStyle = i, a.fillRect(0, 0, t, o);
+  const s = a.createLinearGradient(0, 0, 0, o);
+  s.addColorStop(0, "rgba(0,0,0,0)"), s.addColorStop(1, "rgba(0,0,0,1)"), a.fillStyle = s, a.fillRect(0, 0, t, o);
 }
 function Fe(a, e) {
-  const t = a.canvas.width, s = a.canvas.height;
-  a.clearRect(0, 0, t, s);
+  const t = a.canvas.width, o = a.canvas.height;
+  a.clearRect(0, 0, t, o);
   const u = a.createLinearGradient(0, 0, t, 0), i = 12;
-  for (let n = 0; n <= i; n++) {
-    const d = n / i, { r: p, g: b, b: f } = X(se({ h: e, s: d, l: 0.5 }));
-    u.addColorStop(d, `rgb(${p} ${b} ${f})`);
+  for (let r = 0; r <= i; r++) {
+    const d = r / i, { r: p, g: b, b: m } = X(oe({ h: e, s: d, l: 0.5 }));
+    u.addColorStop(d, `rgb(${p} ${b} ${m})`);
   }
-  a.fillStyle = u, a.fillRect(0, 0, t, s), a.globalCompositeOperation = "screen";
-  let o = a.createLinearGradient(0, 0, 0, s);
-  o.addColorStop(0, "white"), o.addColorStop(0.5, "rgba(255,255,255,0)"), a.fillStyle = o, a.fillRect(0, 0, t, s), a.globalCompositeOperation = "multiply";
-  let r = a.createLinearGradient(0, 0, 0, s);
-  r.addColorStop(0.5, "rgba(0,0,0,0)"), r.addColorStop(1, "black"), a.fillStyle = r, a.fillRect(0, 0, t, s), a.globalCompositeOperation = "source-over";
+  a.fillStyle = u, a.fillRect(0, 0, t, o), a.globalCompositeOperation = "screen";
+  let s = a.createLinearGradient(0, 0, 0, o);
+  s.addColorStop(0, "white"), s.addColorStop(0.5, "rgba(255,255,255,0)"), a.fillStyle = s, a.fillRect(0, 0, t, o), a.globalCompositeOperation = "multiply";
+  let n = a.createLinearGradient(0, 0, 0, o);
+  n.addColorStop(0.5, "rgba(0,0,0,0)"), n.addColorStop(1, "black"), a.fillStyle = n, a.fillRect(0, 0, t, o), a.globalCompositeOperation = "source-over";
 }
 function Me(a, e) {
-  const t = S(), s = O({
+  const t = S(), o = O({
     top: 1,
     left: 1,
     width: 1,
     height: 1
-  }), { hsl: u, hsv: i } = t, o = m({
+  }), { hsl: u, hsv: i } = t, s = f({
     get: () => e.value === "HSV" ? 1 - i.value.v : 1 - u.value.l,
     set: (g) => {
       e.value === "HSV" ? i.value = { ...i.value, v: _(1 - g, 0, 1) } : u.value = { ...u.value, l: _(1 - g, 0, 1) };
     }
-  }), r = m({
+  }), n = f({
     get: () => e.value === "HSV" ? i.value.s : u.value.s,
     set: (g) => {
       e.value === "HSV" ? i.value = { ...i.value, s: _(g, 0, 1) } : u.value = { ...u.value, s: _(g, 0, 1) };
     }
-  }), n = O(!1), d = m(() => {
-    const g = r.value * s.value.width, H = o.value * s.value.height;
+  }), r = O(!1), d = f(() => {
+    const g = n.value * o.value.width, H = s.value * o.value.height;
     return {
       top: 0,
       left: 0,
       position: "absolute",
-      display: n.value ? void 0 : "none",
-      backgroundColor: fe({ ...t.rgba.value, a: 1 }),
+      display: r.value ? void 0 : "none",
+      backgroundColor: me({ ...t.rgba.value, a: 1 }),
       transform: `translate3d(calc(-50% + ${g}px), calc(-50% + ${H}px), 0px)`
     };
   });
-  ne(() => {
-    p(), n.value = !0, window.addEventListener("resize", p);
-  }), re(() => {
+  re(() => {
+    p(), r.value = !0, window.addEventListener("resize", p);
+  }), ne(() => {
     window.removeEventListener("resize", p);
   });
   function p() {
     const g = a.value;
-    g && (s.value = g.getBoundingClientRect());
+    g && (o.value = g.getBoundingClientRect());
   }
   function b(g) {
-    t.disabled.value || (document.addEventListener("pointermove", f), document.addEventListener("pointerup", k), p(), f(g));
+    t.disabled.value || (document.addEventListener("pointermove", m), document.addEventListener("pointerup", k), p(), m(g));
   }
-  function f(g) {
+  function m(g) {
     g.preventDefault();
-    const H = g.clientY - s.value.top, U = g.clientX - s.value.left;
-    r.value = _(U, 0, s.value.width) / s.value.width, o.value = _(H, 0, s.value.height) / s.value.height;
+    const H = g.clientY - o.value.top, U = g.clientX - o.value.left;
+    n.value = _(U, 0, o.value.width) / o.value.width, s.value = _(H, 0, o.value.height) / o.value.height;
   }
   function k() {
-    document.removeEventListener("pointermove", f), document.removeEventListener("pointerup", k), t.commitValue();
+    document.removeEventListener("pointermove", m), document.removeEventListener("pointerup", k), t.commitValue();
   }
   function B(g) {
     if (t.disabled.value) return;
     const H = g.shiftKey ? 0.1 : 0.01;
     switch (g.key) {
       case "ArrowUp":
-        g.preventDefault(), o.value -= H, t.commitValue();
+        g.preventDefault(), s.value -= H, t.commitValue();
         break;
       case "ArrowDown":
-        g.preventDefault(), o.value += H, t.commitValue();
+        g.preventDefault(), s.value += H, t.commitValue();
         break;
       case "ArrowLeft":
-        g.preventDefault(), r.value -= H, t.commitValue();
+        g.preventDefault(), n.value -= H, t.commitValue();
         break;
       case "ArrowRight":
-        g.preventDefault(), r.value += H, t.commitValue();
+        g.preventDefault(), n.value += H, t.commitValue();
         break;
     }
   }
@@ -606,7 +606,7 @@ function Me(a, e) {
     handlePointerDown: b
   };
 }
-const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
+const Re = ["data-disabled"], De = ["height", "width"], nt = /* @__PURE__ */ V({
   __name: "ColorPickerCanvas",
   props: {
     type: { default: "HSV" },
@@ -617,15 +617,15 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
     ui: {}
   },
   setup(a) {
-    const e = S(), t = ue("canvasRef"), s = a, u = m(() => ({
+    const e = S(), t = ue("canvasRef"), o = a, u = f(() => ({
       position: "relative",
-      height: `${s.height}px`,
-      width: `${s.width}px`
+      height: `${o.height}px`,
+      width: `${o.width}px`
     }));
     ie(() => {
       const b = t.value?.getContext("2d");
       if (b)
-        switch (s.type) {
+        switch (o.type) {
           case "HSL":
             Fe(b, e.hsv.value.h);
             break;
@@ -634,35 +634,35 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
             break;
         }
     });
-    const i = m(() => s.type), {
-      thumbStyles: o,
-      handleWheel: r,
-      handleKeyDown: n,
+    const i = f(() => o.type), {
+      thumbStyles: s,
+      handleWheel: n,
+      handleKeyDown: r,
       handlePointerDown: d
     } = Me(t, i), p = e.uiSlots("canvas", "shared");
-    return (b, f) => (y(), P("div", {
+    return (b, m) => (C(), P("div", {
       style: x(u.value),
-      class: c(l(p).root(s.ui?.root, s.class)),
+      class: c(l(p).root(o.ui?.root, o.class)),
       "data-disabled": l(e).disabled.value ? "" : null,
-      onContextmenu: f[0] || (f[0] = ce(() => {
+      onContextmenu: m[0] || (m[0] = ce(() => {
       }, ["prevent"])),
-      onKeydown: f[1] || (f[1] = //@ts-ignore
-      (...k) => l(n) && l(n)(...k)),
-      onPointerdown: f[2] || (f[2] = //@ts-ignore
+      onKeydown: m[1] || (m[1] = //@ts-ignore
+      (...k) => l(r) && l(r)(...k)),
+      onPointerdown: m[2] || (m[2] = //@ts-ignore
       (...k) => l(d) && l(d)(...k)),
-      onWheel: f[3] || (f[3] = (k) => s.wheel && l(r)(k))
+      onWheel: m[3] || (m[3] = (k) => o.wheel && l(n)(k))
     }, [
       h("canvas", {
         ref_key: "canvasRef",
         ref: t,
-        height: s.height,
-        width: s.width,
-        class: c(l(p).area(s.ui?.area))
+        height: o.height,
+        width: o.width,
+        class: c(l(p).area(o.ui?.area))
       }, null, 10, De),
       h("span", {
         tabindex: "0",
-        style: x(l(o)),
-        class: c(l(p).thumb(s.ui?.thumb))
+        style: x(l(s)),
+        class: c(l(p).thumb(o.ui?.thumb))
       }, null, 6)
     ], 46, Re));
   }
@@ -674,17 +674,17 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
     asChild: { type: Boolean }
   },
   setup(a) {
-    const e = a, t = S(), s = m(() => typeof window < "u" && !!window.EyeDropper);
+    const e = a, t = S(), o = f(() => typeof window < "u" && !!window.EyeDropper);
     function u() {
-      const o = window.EyeDropper;
-      new o().open().then((n) => {
-        t.hexa.value = n.sRGBHex;
-      }).catch((n) => {
-        console.error(n);
+      const s = window.EyeDropper;
+      new s().open().then((r) => {
+        t.hexa.value = r.sRGBHex;
+      }).catch((r) => {
+        console.error(r);
       });
     }
     const i = t.uiSlots("dropper");
-    return (o, r) => s.value ? (y(), A(l(ae), {
+    return (s, n) => o.value ? (C(), A(l(ae), {
       key: 0,
       as: e.as,
       "as-child": e.asChild,
@@ -693,7 +693,7 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
       onClick: u
     }, {
       default: F(() => [
-        T(o.$slots, "default")
+        T(s.$slots, "default")
       ]),
       _: 3
     }, 8, ["as", "as-child", "disabled", "class"])) : W("", !0);
@@ -707,58 +707,58 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
   },
   emits: ["update:modelValue"],
   setup(a, { emit: e }) {
-    const t = e, s = a, u = S(), i = de(), o = m(() => !!i?.vnode.props?.["onUpdate:modelValue"]), r = m(() => o.value ? ye(s.modelValue) : u.hex.value.replace("#", "")), n = m(() => o.value ? xe(s.modelValue) : u.alpha.value);
-    function d(f) {
-      const k = f.target, B = k.value ? Z(k.value) : null;
+    const t = e, o = a, u = S(), i = de(), s = f(() => !!i?.vnode.props?.["onUpdate:modelValue"]), n = f(() => s.value ? Ce(o.modelValue) : u.hex.value.replace("#", "")), r = f(() => s.value ? xe(o.modelValue) : u.alpha.value);
+    function d(m) {
+      const k = m.target, B = k.value ? Z(k.value) : null;
       if (!B) {
-        k.value = r.value;
+        k.value = n.value;
         return;
       }
-      o.value ? t("update:modelValue", be(B)) : (u.rgba.value = B, u.commitValue());
+      s.value ? t("update:modelValue", be(B)) : (u.rgba.value = B, u.commitValue());
     }
-    function p(f) {
-      const k = f.target, B = parseInt(k.value, 10), M = isNaN(B) ? u.alpha.value : _(B, 0, 100);
+    function p(m) {
+      const k = m.target, B = parseInt(k.value, 10), M = isNaN(B) ? u.alpha.value : _(B, 0, 100);
       u.alpha.value !== M ? (u.alpha.value = M, u.commitValue()) : k.value = M.toString();
     }
     const b = u.uiSlots("input");
-    return (f, k) => (y(), P("div", {
-      class: c(l(b).group(s.ui?.group, s.class)),
+    return (m, k) => (C(), P("div", {
+      class: c(l(b).group(o.ui?.group, o.class)),
       "data-disabled": l(u).disabled.value ? "" : null
     }, [
       h("div", {
-        class: c(l(b).item(s.ui?.item))
+        class: c(l(b).item(o.ui?.item))
       }, [
-        T(f.$slots, "before"),
+        T(m.$slots, "before"),
         h("span", {
-          class: c(l(b).label(s.ui?.label))
+          class: c(l(b).label(o.ui?.label))
         }, "#", 2),
         h("input", {
           type: "text",
           name: "hex",
           "aria-label": "Hex",
-          value: r.value,
+          value: n.value,
           disabled: l(u).disabled.value,
-          class: c(l(b).field(s.ui?.field)),
+          class: c(l(b).field(o.ui?.field)),
           onBlur: d
         }, null, 42, Le)
       ], 2),
-      l(u).isAlphaEnabled.value ? (y(), P("div", {
+      l(u).isAlphaEnabled.value ? (C(), P("div", {
         key: 0,
         "data-alpha-input": "",
-        class: c(l(b).item(s.ui?.item))
+        class: c(l(b).item(o.ui?.item))
       }, [
         h("input", {
           type: "text",
           name: "opacity",
           "aria-label": "Opacity",
-          value: n.value,
+          value: r.value,
           disabled: l(u).disabled.value,
-          class: c(l(b).field(s.ui?.field)),
+          class: c(l(b).field(o.ui?.field)),
           onBlur: p
         }, null, 42, Ge),
         h("span", {
           "data-alpha-label": "",
-          class: c(l(b).label(s.ui?.label))
+          class: c(l(b).label(o.ui?.label))
         }, "%", 2)
       ], 2)) : W("", !0)
     ], 10, Ee));
@@ -771,75 +771,75 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
   },
   setup(a) {
     const e = a, t = S();
-    function s(r, n) {
-      const d = r.target, p = parseInt(d.value, 10), b = isNaN(p) ? t.rgb.value[n] : _(p, 0, 255);
-      t.rgb.value[n] !== b ? (t.rgb.value = {
+    function o(n, r) {
+      const d = n.target, p = parseInt(d.value, 10), b = isNaN(p) ? t.rgb.value[r] : _(p, 0, 255);
+      t.rgb.value[r] !== b ? (t.rgb.value = {
         ...t.rgb.value,
-        [n]: b
+        [r]: b
       }, t.commitValue()) : d.value = b.toString();
     }
-    function u(r) {
-      const n = r.target, d = parseInt(n.value, 10), p = isNaN(d) ? t.alpha.value : _(d, 0, 100);
-      t.alpha.value !== p ? (t.alpha.value = p, t.commitValue()) : n.value = p.toString();
+    function u(n) {
+      const r = n.target, d = parseInt(r.value, 10), p = isNaN(d) ? t.alpha.value : _(d, 0, 100);
+      t.alpha.value !== p ? (t.alpha.value = p, t.commitValue()) : r.value = p.toString();
     }
-    const i = (r) => Math.round(r), o = t.uiSlots("input");
-    return (r, n) => (y(), P("div", {
-      class: c(l(o).group(e.ui?.group, e.class)),
+    const i = (n) => Math.round(n), s = t.uiSlots("input");
+    return (n, r) => (C(), P("div", {
+      class: c(l(s).group(e.ui?.group, e.class)),
       "data-disabled": l(t).disabled.value ? "" : null
     }, [
       h("div", {
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
-        T(r.$slots, "before"),
+        T(n.$slots, "before"),
         h("span", {
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "R", 2),
         h("input", {
           type: "text",
           name: "red",
           "aria-label": "Red",
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           value: i(l(t).rgb.value.r),
-          onBlur: n[0] || (n[0] = (d) => s(d, "r"))
+          onBlur: r[0] || (r[0] = (d) => o(d, "r"))
         }, null, 42, Ue)
       ], 2),
       h("div", {
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
         h("span", {
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "G", 2),
         h("input", {
           type: "text",
           name: "green",
           "aria-label": "Green",
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           value: i(l(t).rgb.value.g),
-          onBlur: n[1] || (n[1] = (d) => s(d, "g"))
+          onBlur: r[1] || (r[1] = (d) => o(d, "g"))
         }, null, 42, je)
       ], 2),
       h("div", {
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
         h("span", {
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "B", 2),
         h("input", {
           type: "text",
           name: "blue",
           "aria-label": "Blue",
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           value: i(l(t).rgb.value.b),
-          onBlur: n[2] || (n[2] = (d) => s(d, "b"))
+          onBlur: r[2] || (r[2] = (d) => o(d, "b"))
         }, null, 42, Te)
       ], 2),
-      l(t).isAlphaEnabled.value ? (y(), P("div", {
+      l(t).isAlphaEnabled.value ? (C(), P("div", {
         key: 0,
         "data-alpha-input": "",
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
         h("input", {
           type: "text",
@@ -847,12 +847,12 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
           "aria-label": "Opacity",
           value: l(t).alpha.value,
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           onBlur: u
         }, null, 42, ze),
         h("span", {
           "data-alpha-label": "",
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "%", 2)
       ], 2)) : W("", !0)
     ], 10, Ne));
@@ -865,75 +865,75 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
   },
   setup(a) {
     const e = a, t = S();
-    function s(r, n, d) {
-      const p = r.target, b = parseInt(p.value, 10), f = isNaN(b) ? t.hsl.value[n] : _(b, 0, d);
-      t.hsl.value[n] !== f ? (t.hsl.value = {
+    function o(n, r, d) {
+      const p = n.target, b = parseInt(p.value, 10), m = isNaN(b) ? t.hsl.value[r] : _(b, 0, d);
+      t.hsl.value[r] !== m ? (t.hsl.value = {
         ...t.hsl.value,
-        [n]: n === "h" ? f : f / 100
-      }, t.commitValue()) : p.value = n !== "h" ? Math.round(f * 100).toString() : f.toString();
+        [r]: r === "h" ? m : m / 100
+      }, t.commitValue()) : p.value = r !== "h" ? Math.round(m * 100).toString() : m.toString();
     }
-    function u(r) {
-      const n = r.target, d = parseInt(n.value, 10), p = isNaN(d) ? t.alpha.value : _(d, 0, 100);
-      t.alpha.value !== p ? (t.alpha.value = p, t.commitValue()) : n.value = p.toString();
+    function u(n) {
+      const r = n.target, d = parseInt(r.value, 10), p = isNaN(d) ? t.alpha.value : _(d, 0, 100);
+      t.alpha.value !== p ? (t.alpha.value = p, t.commitValue()) : r.value = p.toString();
     }
-    const i = (r) => Math.round(r * 100), o = t.uiSlots("input");
-    return (r, n) => (y(), P("div", {
-      class: c(l(o).group(e.ui?.group, e.class)),
+    const i = (n) => Math.round(n * 100), s = t.uiSlots("input");
+    return (n, r) => (C(), P("div", {
+      class: c(l(s).group(e.ui?.group, e.class)),
       "data-disabled": l(t).disabled.value ? "" : null
     }, [
       h("div", {
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
-        T(r.$slots, "before"),
+        T(n.$slots, "before"),
         h("span", {
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "H", 2),
         h("input", {
           type: "text",
           name: "hue",
           "aria-label": "Hue",
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           value: Math.round(l(t).hsl.value.h),
-          onBlur: n[0] || (n[0] = (d) => s(d, "h", 360))
+          onBlur: r[0] || (r[0] = (d) => o(d, "h", 360))
         }, null, 42, We)
       ], 2),
       h("div", {
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
         h("span", {
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "S", 2),
         h("input", {
           type: "text",
           name: "saturation",
           "aria-label": "Saturation",
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           value: i(l(t).hsl.value.s),
-          onBlur: n[1] || (n[1] = (d) => s(d, "s", 100))
+          onBlur: r[1] || (r[1] = (d) => o(d, "s", 100))
         }, null, 42, Ke)
       ], 2),
       h("div", {
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
         h("span", {
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "L", 2),
         h("input", {
           type: "text",
           name: "lightness",
           "aria-label": "Lightness",
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           value: i(l(t).hsl.value.l),
-          onBlur: n[2] || (n[2] = (d) => s(d, "l", 100))
+          onBlur: r[2] || (r[2] = (d) => o(d, "l", 100))
         }, null, 42, Ze)
       ], 2),
-      l(t).isAlphaEnabled.value ? (y(), P("div", {
+      l(t).isAlphaEnabled.value ? (C(), P("div", {
         key: 0,
         "data-alpha-input": "",
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
         h("input", {
           type: "text",
@@ -941,12 +941,12 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
           "aria-label": "Opacity",
           value: l(t).alpha.value,
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           onBlur: u
         }, null, 42, Ye),
         h("span", {
           "data-alpha-label": "",
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "%", 2)
       ], 2)) : W("", !0)
     ], 10, Oe));
@@ -959,75 +959,75 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
   },
   setup(a) {
     const e = a, t = S();
-    function s(r, n, d) {
-      const p = r.target, b = parseInt(p.value, 10), f = isNaN(b) ? t.hsv.value[n] : _(b, 0, d);
-      t.hsv.value[n] !== f ? (t.hsv.value = {
+    function o(n, r, d) {
+      const p = n.target, b = parseInt(p.value, 10), m = isNaN(b) ? t.hsv.value[r] : _(b, 0, d);
+      t.hsv.value[r] !== m ? (t.hsv.value = {
         ...t.hsv.value,
-        [n]: n === "h" ? f : f / 100
-      }, t.commitValue()) : p.value = n !== "h" ? Math.round(f * 100).toString() : f.toString();
+        [r]: r === "h" ? m : m / 100
+      }, t.commitValue()) : p.value = r !== "h" ? Math.round(m * 100).toString() : m.toString();
     }
-    function u(r) {
-      const n = r.target, d = parseInt(n.value, 10), p = isNaN(d) ? t.alpha.value : _(d, 0, 100);
-      t.alpha.value !== p ? (t.alpha.value = p, t.commitValue()) : n.value = p.toString();
+    function u(n) {
+      const r = n.target, d = parseInt(r.value, 10), p = isNaN(d) ? t.alpha.value : _(d, 0, 100);
+      t.alpha.value !== p ? (t.alpha.value = p, t.commitValue()) : r.value = p.toString();
     }
-    const i = (r) => Math.round(r * 100), o = t.uiSlots("input");
-    return (r, n) => (y(), P("div", {
-      class: c(l(o).group(e.ui?.group, e.class)),
+    const i = (n) => Math.round(n * 100), s = t.uiSlots("input");
+    return (n, r) => (C(), P("div", {
+      class: c(l(s).group(e.ui?.group, e.class)),
       "data-disabled": l(t).disabled.value ? "" : null
     }, [
       h("div", {
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
-        T(r.$slots, "before"),
+        T(n.$slots, "before"),
         h("span", {
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "H", 2),
         h("input", {
           type: "text",
           name: "hue",
           "aria-label": "Hue",
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           value: Math.round(l(t).hsv.value.h),
-          onBlur: n[0] || (n[0] = (d) => s(d, "h", 360))
+          onBlur: r[0] || (r[0] = (d) => o(d, "h", 360))
         }, null, 42, qe)
       ], 2),
       h("div", {
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
         h("span", {
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "S", 2),
         h("input", {
           type: "text",
           name: "saturation",
           "aria-label": "Saturation",
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           value: i(l(t).hsv.value.s),
-          onBlur: n[1] || (n[1] = (d) => s(d, "s", 100))
+          onBlur: r[1] || (r[1] = (d) => o(d, "s", 100))
         }, null, 42, Je)
       ], 2),
       h("div", {
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
         h("span", {
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "B", 2),
         h("input", {
           type: "text",
           name: "brightness",
           "aria-label": "Brightness",
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           value: i(l(t).hsv.value.v),
-          onBlur: n[2] || (n[2] = (d) => s(d, "v", 100))
+          onBlur: r[2] || (r[2] = (d) => o(d, "v", 100))
         }, null, 42, Qe)
       ], 2),
-      l(t).isAlphaEnabled.value ? (y(), P("div", {
+      l(t).isAlphaEnabled.value ? (C(), P("div", {
         key: 0,
         "data-alpha-input": "",
-        class: c(l(o).item(e.ui?.item))
+        class: c(l(s).item(e.ui?.item))
       }, [
         h("input", {
           type: "text",
@@ -1035,12 +1035,12 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
           "aria-label": "Opacity",
           value: l(t).alpha.value,
           disabled: l(t).disabled.value,
-          class: c(l(o).field(e.ui?.field)),
+          class: c(l(s).field(e.ui?.field)),
           onBlur: u
         }, null, 42, et),
         h("span", {
           "data-alpha-label": "",
-          class: c(l(o).label(e.ui?.label))
+          class: c(l(s).label(e.ui?.label))
         }, "%", 2)
       ], 2)) : W("", !0)
     ], 10, Xe));
@@ -1053,33 +1053,33 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
     ui: {}
   },
   setup(a) {
-    const e = S(), t = m({
+    const e = S(), t = f({
       get: () => [e.alpha.value],
-      set: ([o]) => {
-        e.alpha.value = o;
+      set: ([s]) => {
+        e.alpha.value = s;
       }
-    }), s = a, u = m(() => ({
+    }), o = a, u = f(() => ({
       background: [
-        `linear-gradient(${s.orientation === "vertical" ? "to top" : "to right"}, rgba(0, 0, 0, 0) 0%, ${e.hex.value} 100%)`,
+        `linear-gradient(${o.orientation === "vertical" ? "to top" : "to right"}, rgba(0, 0, 0, 0) 0%, ${e.hex.value} 100%)`,
         "repeating-conic-gradient(#ddd 0% 25%, transparent 0% 50%) 50% / 8px 8px"
       ].join(",")
     })), i = e.uiSlots("slider", "shared");
-    return (o, r) => (y(), A(l(L), {
+    return (s, n) => (C(), A(l(L), {
       modelValue: t.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (n) => t.value = n),
+      "onUpdate:modelValue": n[0] || (n[0] = (r) => t.value = r),
       disabled: l(e).disabled.value,
-      orientation: s.orientation,
-      class: c(l(i).root(s.ui?.root, s.class)),
-      onValueCommit: r[1] || (r[1] = (n) => l(e).commitValue())
+      orientation: o.orientation,
+      class: c(l(i).root(o.ui?.root, o.class)),
+      onValueCommit: n[1] || (n[1] = (r) => l(e).commitValue())
     }, {
       default: F(() => [
         w(l(G), {
           style: x(u.value),
-          class: c(l(i).track(s.ui?.track))
+          class: c(l(i).track(o.ui?.track))
         }, null, 8, ["style", "class"]),
         w(l(N), {
           style: x({ backgroundColor: l(e).hexa.value }),
-          class: c(l(i).thumb(s.ui?.thumb)),
+          class: c(l(i).thumb(o.ui?.thumb)),
           "aria-label": "Opacity"
         }, null, 8, ["style", "class"])
       ]),
@@ -1095,24 +1095,24 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
     ui: {}
   },
   setup(a) {
-    const e = a, t = S(), s = m({
+    const e = a, t = S(), o = f({
       get: () => [t.hsv.value.h],
-      set: ([o]) => {
+      set: ([s]) => {
         t.hsv.value = {
           ...t.hsv.value,
-          h: o
+          h: s
         };
       }
-    }), u = m(() => `linear-gradient(${e.orientation === "vertical" ? "to top" : "to right"}, red, yellow, lime, cyan, blue, magenta, red)`), i = t.uiSlots("slider", "shared");
-    return (o, r) => (y(), A(l(L), {
-      modelValue: s.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
+    }), u = f(() => `linear-gradient(${e.orientation === "vertical" ? "to top" : "to right"}, red, yellow, lime, cyan, blue, magenta, red)`), i = t.uiSlots("slider", "shared");
+    return (s, n) => (C(), A(l(L), {
+      modelValue: o.value,
+      "onUpdate:modelValue": n[0] || (n[0] = (r) => o.value = r),
       disabled: l(t).disabled.value,
       max: 360,
       inverted: e.inverted,
       orientation: e.orientation,
       class: c(l(i).root(e.ui?.root, e.class)),
-      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
+      onValueCommit: n[1] || (n[1] = (r) => l(t).commitValue())
     }, {
       default: F(() => [
         w(l(G), {
@@ -1136,27 +1136,27 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
     ui: {}
   },
   setup(a) {
-    const e = a, t = S(), s = m({
+    const e = a, t = S(), o = f({
       get: () => [t.hsl.value.s],
-      set: ([o]) => {
+      set: ([s]) => {
         t.hsl.value = {
           ...t.hsl.value,
-          s: o
+          s
         };
       }
-    }), u = m(() => {
-      const o = e.orientation === "vertical" ? "to top" : "to right", r = `hsl(${Math.floor(t.hsl.value.h)}, 0%, ${Math.floor(t.hsl.value.l * 100)}%)`, n = `hsl(${Math.floor(t.hsl.value.h)}, 100%, ${Math.floor(t.hsl.value.l * 100)}%)`;
-      return `linear-gradient(${o}, ${r}, ${n})`;
+    }), u = f(() => {
+      const s = e.orientation === "vertical" ? "to top" : "to right", n = `hsl(${Math.floor(t.hsl.value.h)}, 0%, ${Math.floor(t.hsl.value.l * 100)}%)`, r = `hsl(${Math.floor(t.hsl.value.h)}, 100%, ${Math.floor(t.hsl.value.l * 100)}%)`;
+      return `linear-gradient(${s}, ${n}, ${r})`;
     }), i = t.uiSlots("slider", "shared");
-    return (o, r) => (y(), A(l(L), {
-      modelValue: s.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
+    return (s, n) => (C(), A(l(L), {
+      modelValue: o.value,
+      "onUpdate:modelValue": n[0] || (n[0] = (r) => o.value = r),
       max: 1,
       step: 0.01,
       disabled: l(t).disabled.value,
       orientation: e.orientation,
       class: c(l(i).root(e.ui?.root, e.class)),
-      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
+      onValueCommit: n[1] || (n[1] = (r) => l(t).commitValue())
     }, {
       default: F(() => [
         w(l(G), {
@@ -1172,7 +1172,7 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
       _: 1
     }, 8, ["modelValue", "disabled", "orientation", "class"]));
   }
-}), ft = /* @__PURE__ */ V({
+}), mt = /* @__PURE__ */ V({
   __name: "ColorPickerSliderLightness",
   props: {
     class: {},
@@ -1180,27 +1180,27 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
     ui: {}
   },
   setup(a) {
-    const e = a, t = S(), s = m({
+    const e = a, t = S(), o = f({
       get: () => [t.hsl.value.l],
-      set: ([o]) => {
+      set: ([s]) => {
         t.hsl.value = {
           ...t.hsl.value,
-          l: o
+          l: s
         };
       }
-    }), u = m(() => {
-      const o = e.orientation === "vertical" ? "to top" : "to right", r = `hsl(${Math.floor(t.hsl.value.h)}, ${Math.floor(t.hsl.value.s * 100)}%, 50%)`;
-      return `linear-gradient(${o}, hsl(0, 0%, 0%), ${r}, hsl(0, 0%, 100%))`;
+    }), u = f(() => {
+      const s = e.orientation === "vertical" ? "to top" : "to right", n = `hsl(${Math.floor(t.hsl.value.h)}, ${Math.floor(t.hsl.value.s * 100)}%, 50%)`;
+      return `linear-gradient(${s}, hsl(0, 0%, 0%), ${n}, hsl(0, 0%, 100%))`;
     }), i = t.uiSlots("slider", "shared");
-    return (o, r) => (y(), A(l(L), {
-      modelValue: s.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
+    return (s, n) => (C(), A(l(L), {
+      modelValue: o.value,
+      "onUpdate:modelValue": n[0] || (n[0] = (r) => o.value = r),
       max: 1,
       step: 0.01,
       disabled: l(t).disabled.value,
       orientation: e.orientation,
       class: c(l(i).root(e.ui?.root, e.class)),
-      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
+      onValueCommit: n[1] || (n[1] = (r) => l(t).commitValue())
     }, {
       default: F(() => [
         w(l(G), {
@@ -1216,7 +1216,7 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
       _: 1
     }, 8, ["modelValue", "disabled", "orientation", "class"]));
   }
-}), mt = /* @__PURE__ */ V({
+}), ft = /* @__PURE__ */ V({
   __name: "ColorPickerSliderRed",
   props: {
     class: {},
@@ -1224,26 +1224,26 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
     ui: {}
   },
   setup(a) {
-    const e = a, t = S(), s = m({
+    const e = a, t = S(), o = f({
       get: () => [t.rgb.value.r],
-      set: ([o]) => {
+      set: ([s]) => {
         t.rgb.value = {
           ...t.rgb.value,
-          r: o
+          r: s
         };
       }
-    }), u = m(() => {
-      const o = e.orientation === "vertical" ? "to top" : "to right", r = `rgb(0, ${t.rgb.value.g}, ${t.rgb.value.b})`, n = `rgb(255, ${t.rgb.value.g}, ${t.rgb.value.b})`;
-      return `linear-gradient(${o}, ${r}, ${n})`;
+    }), u = f(() => {
+      const s = e.orientation === "vertical" ? "to top" : "to right", n = `rgb(0, ${t.rgb.value.g}, ${t.rgb.value.b})`, r = `rgb(255, ${t.rgb.value.g}, ${t.rgb.value.b})`;
+      return `linear-gradient(${s}, ${n}, ${r})`;
     }), i = t.uiSlots("slider", "shared");
-    return (o, r) => (y(), A(l(L), {
-      modelValue: s.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
+    return (s, n) => (C(), A(l(L), {
+      modelValue: o.value,
+      "onUpdate:modelValue": n[0] || (n[0] = (r) => o.value = r),
       disabled: l(t).disabled.value,
       max: 255,
       orientation: e.orientation,
       class: c(l(i).root(e.ui?.root, e.class)),
-      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
+      onValueCommit: n[1] || (n[1] = (r) => l(t).commitValue())
     }, {
       default: F(() => [
         w(l(G), {
@@ -1267,26 +1267,26 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
     ui: {}
   },
   setup(a) {
-    const e = a, t = S(), s = m({
+    const e = a, t = S(), o = f({
       get: () => [t.rgb.value.g],
-      set: ([o]) => {
+      set: ([s]) => {
         t.rgb.value = {
           ...t.rgb.value,
-          g: o
+          g: s
         };
       }
-    }), u = m(() => {
-      const o = e.orientation === "vertical" ? "to top" : "to right", r = `rgb(${t.rgb.value.r}, 0, ${t.rgb.value.b})`, n = `rgb(${t.rgb.value.r}, 255, ${t.rgb.value.b})`;
-      return `linear-gradient(${o}, ${r}, ${n})`;
+    }), u = f(() => {
+      const s = e.orientation === "vertical" ? "to top" : "to right", n = `rgb(${t.rgb.value.r}, 0, ${t.rgb.value.b})`, r = `rgb(${t.rgb.value.r}, 255, ${t.rgb.value.b})`;
+      return `linear-gradient(${s}, ${n}, ${r})`;
     }), i = t.uiSlots("slider", "shared");
-    return (o, r) => (y(), A(l(L), {
-      modelValue: s.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
+    return (s, n) => (C(), A(l(L), {
+      modelValue: o.value,
+      "onUpdate:modelValue": n[0] || (n[0] = (r) => o.value = r),
       disabled: l(t).disabled.value,
       max: 255,
       orientation: e.orientation,
       class: c(l(i).root(e.ui?.root, e.class)),
-      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
+      onValueCommit: n[1] || (n[1] = (r) => l(t).commitValue())
     }, {
       default: F(() => [
         w(l(G), {
@@ -1310,26 +1310,26 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
     ui: {}
   },
   setup(a) {
-    const e = a, t = S(), s = m({
+    const e = a, t = S(), o = f({
       get: () => [t.rgb.value.b],
-      set: ([o]) => {
+      set: ([s]) => {
         t.rgb.value = {
           ...t.rgb.value,
-          b: o
+          b: s
         };
       }
-    }), u = m(() => {
-      const o = e.orientation === "vertical" ? "to top" : "to right", r = `rgb(${t.rgb.value.r}, ${t.rgb.value.g}, 0)`, n = `rgb(${t.rgb.value.r}, ${t.rgb.value.g}, 255)`;
-      return `linear-gradient(${o}, ${r}, ${n})`;
+    }), u = f(() => {
+      const s = e.orientation === "vertical" ? "to top" : "to right", n = `rgb(${t.rgb.value.r}, ${t.rgb.value.g}, 0)`, r = `rgb(${t.rgb.value.r}, ${t.rgb.value.g}, 255)`;
+      return `linear-gradient(${s}, ${n}, ${r})`;
     }), i = t.uiSlots("slider", "shared");
-    return (o, r) => (y(), A(l(L), {
-      modelValue: s.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (n) => s.value = n),
+    return (s, n) => (C(), A(l(L), {
+      modelValue: o.value,
+      "onUpdate:modelValue": n[0] || (n[0] = (r) => o.value = r),
       disabled: l(t).disabled.value,
       max: 255,
       orientation: e.orientation,
       class: c(l(i).root(e.ui?.root, e.class)),
-      onValueCommit: r[1] || (r[1] = (n) => l(t).commitValue())
+      onValueCommit: n[1] || (n[1] = (r) => l(t).commitValue())
     }, {
       default: F(() => [
         w(l(G), {
@@ -1354,17 +1354,17 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
     ui: {}
   },
   setup(a) {
-    const e = S(), t = a, s = m(() => Z(t.value) || e.rgba.value), u = e.uiSlots("swatch");
-    return (i, o) => (y(), A(l(ae), {
+    const e = S(), t = a, o = f(() => Z(t.value) || e.rgba.value), u = e.uiSlots("swatch");
+    return (i, s) => (C(), A(l(ae), {
       as: t.as,
       disabled: l(e).disabled.value,
-      style: x({ backgroundColor: `rgb(${s.value.r}, ${s.value.g}, ${s.value.b})` }),
+      style: x({ backgroundColor: `rgb(${o.value.r}, ${o.value.g}, ${o.value.b})` }),
       class: c(l(u).base(t.ui?.base, t.class))
     }, {
       default: F(() => [
         h("span", {
           style: x({
-            opacity: 1 - s.value.a,
+            opacity: 1 - o.value.a,
             background: `url(${l(tt)})`
           }),
           class: c(l(u).alpha(t.ui?.alpha))
@@ -1375,31 +1375,31 @@ const Re = ["data-disabled"], De = ["height", "width"], rt = /* @__PURE__ */ V({
   }
 });
 export {
-  rt as ColorPickerCanvas,
+  nt as ColorPickerCanvas,
   ut as ColorPickerEyeDropper,
   vt as ColorPickerInputHSB,
   dt as ColorPickerInputHSL,
   it as ColorPickerInputHex,
   ct as ColorPickerInputRGB,
-  nt as ColorPickerRoot,
+  rt as ColorPickerRoot,
   pt as ColorPickerSliderAlpha,
   kt as ColorPickerSliderBlue,
   gt as ColorPickerSliderGreen,
   ht as ColorPickerSliderHue,
-  ft as ColorPickerSliderLightness,
-  mt as ColorPickerSliderRed,
+  mt as ColorPickerSliderLightness,
+  ft as ColorPickerSliderRed,
   bt as ColorPickerSliderSaturation,
   $t as ColorPickerSwatch,
-  se as HSLtoHSV,
-  oe as HSVtoHSL,
+  oe as HSLtoHSV,
+  se as HSVtoHSL,
   X as HSVtoRGB,
   J as HexToRGB,
-  ot as HexaToRGBA,
-  fe as RGBAtoCSS,
+  st as HexaToRGBA,
+  me as RGBAtoCSS,
   be as RGBAtoHexa,
   he as RGBtoHSV,
   q as RGBtoHex,
   S as injectColorPickerContext,
   R as toHex,
-  me as useVModel
+  fe as useVModel
 };