@enos5/enos-vue-default 1.8.0 → 1.8.2

package/dist/{plugin-ODQo1Iv8.js → plugin-DYTVm2W1.js}

@@ -1,5 +1,5 @@
 import { ref, computed, watch, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, normalizeStyle, toDisplayString, createBlock, createCommentVNode, renderSlot, createVNode, Transition, withCtx, mergeProps, useSlots, unref, withDirectives, vShow, useAttrs, vModelCheckbox, onMounted, nextTick, onBeforeUnmount, Teleport, withModifiers, onUnmounted, inject, provide, defineComponent, isVNode, cloneVNode, resolveDynamicComponent, createTextVNode, h, vModelText, createSlots } from "vue";
-import { LockClosedIcon, ChevronDownIcon, PhotoIcon, ExclamationCircleIcon, ExclamationTriangleIcon, ChevronUpIcon, MagnifyingGlassIcon, CheckIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
+import { LockClosedIcon, ChevronDownIcon, PhotoIcon, EyeDropperIcon, ExclamationCircleIcon, ExclamationTriangleIcon, ChevronUpIcon, MagnifyingGlassIcon, CheckIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
 import Editor from "@tinymce/tinymce-vue";
 import { Link } from "@inertiajs/vue3";
 const _hoisted_1$E = { class: "border-b border-neutral-200 bg-neutral-50/80 p-2 dark:border-neutral-800 dark:bg-neutral-900/80" };
@@ -306,7 +306,7 @@ const _hoisted_1$B = { class: "md:col-span-1 flex justify-between" };
 const _hoisted_2$m = { class: "px-4 sm:px-0" };
 const _hoisted_3$g = { class: "text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50" };
 const _hoisted_4$b = { class: "mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-200" };
-const _hoisted_5$8 = { class: "px-4 sm:px-0" };
+const _hoisted_5$9 = { class: "px-4 sm:px-0" };
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$B, [
     createElementVNode("div", _hoisted_2$m, [
@@ -317,7 +317,7 @@ function _sfc_render(_ctx, _cache) {
         renderSlot(_ctx.$slots, "description")
       ])
     ]),
-    createElementVNode("div", _hoisted_5$8, [
+    createElementVNode("div", _hoisted_5$9, [
       renderSlot(_ctx.$slots, "aside")
     ])
   ]);
@@ -621,21 +621,21 @@ const _hoisted_2$k = {
 };
 const _hoisted_3$e = ["type", "value", "disabled"];
 const _hoisted_4$a = ["aria-label"];
-const _hoisted_5$7 = {
+const _hoisted_5$8 = {
   key: 0,
   class: "h-5 w-5",
   fill: "none",
   stroke: "currentColor",
   viewBox: "0 0 24 24"
 };
-const _hoisted_6$7 = {
+const _hoisted_6$8 = {
   key: 1,
   class: "h-5 w-5",
   fill: "none",
   stroke: "currentColor",
   viewBox: "0 0 24 24"
 };
-const DEFAULT_MAX_LENGTH$2 = 254;
+const DEFAULT_MAX_LENGTH$1 = 254;
 const _sfc_main$I = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "TextInput",
   props: {
@@ -666,7 +666,7 @@ const _sfc_main$I = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     const inputAttrs = computed(() => {
       const { class: _class, type: _type, ...rest } = attrs;
       if (rest.maxlength === void 0) {
-        rest.maxlength = DEFAULT_MAX_LENGTH$2;
+        rest.maxlength = DEFAULT_MAX_LENGTH$1;
       }
       return rest;
     });
@@ -718,14 +718,14 @@ const _sfc_main$I = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           "aria-label": revealed.value ? "Hide password" : "Show password",
           onClick: toggleVisibility
         }, [
-          revealed.value ? (openBlock(), createElementBlock("svg", _hoisted_5$7, [..._cache[2] || (_cache[2] = [
+          revealed.value ? (openBlock(), createElementBlock("svg", _hoisted_5$8, [..._cache[2] || (_cache[2] = [
             createElementVNode("path", {
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               "stroke-width": "2",
               d: "M13.875 18.825A10.05 10.05 0 0112 19c-5 0-9.27-3.11-11-7 1.01-2.27 2.78-4.1 5-5.32m3.08-1.3A9.96 9.96 0 0112 5c5 0 9.27 3.11 11 7a11.03 11.03 0 01-4.16 4.91M15 12a3 3 0 00-3-3m0 0a3 3 0 00-2.94 3.59M3 3l18 18"
             }, null, -1)
-          ])])) : (openBlock(), createElementBlock("svg", _hoisted_6$7, [..._cache[3] || (_cache[3] = [
+          ])])) : (openBlock(), createElementBlock("svg", _hoisted_6$8, [..._cache[3] || (_cache[3] = [
             createElementVNode("path", {
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
@@ -745,7 +745,7 @@ const _sfc_main$I = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   }
 });
 const _hoisted_1$u = ["value", "disabled"];
-const DEFAULT_MAX_LENGTH$1 = 1e3;
+const DEFAULT_MAX_LENGTH = 1e3;
 const _sfc_main$H = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "TextArea",
   props: {
@@ -772,7 +772,7 @@ const _sfc_main$H = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     const textareaAttrs = computed(() => {
       const { class: _class, ...rest } = attrs;
       if (rest.maxlength === void 0) {
-        rest.maxlength = DEFAULT_MAX_LENGTH$1;
+        rest.maxlength = DEFAULT_MAX_LENGTH;
       }
       return rest;
     });
@@ -1427,17 +1427,17 @@ const _hoisted_2$i = {
 };
 const _hoisted_3$c = ["value", "disabled"];
 const _hoisted_4$9 = { class: "p-4" };
-const _hoisted_5$6 = { class: "mb-4 flex items-center justify-between" };
-const _hoisted_6$6 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
-const _hoisted_7$6 = { class: "grid grid-cols-7 gap-1 mb-2" };
-const _hoisted_8$4 = { class: "grid grid-cols-7 gap-1" };
-const _hoisted_9$3 = ["disabled", "onClick", "onMouseenter"];
-const _hoisted_10$3 = { class: "mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800" };
-const _hoisted_11$3 = { class: "flex items-center justify-between" };
-const _hoisted_12$2 = { class: "text-xs text-neutral-500 dark:text-neutral-400" };
-const _hoisted_13$2 = { key: 0 };
-const _hoisted_14$2 = { key: 1 };
-const _hoisted_15$2 = { key: 2 };
+const _hoisted_5$7 = { class: "mb-4 flex items-center justify-between" };
+const _hoisted_6$7 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
+const _hoisted_7$7 = { class: "grid grid-cols-7 gap-1 mb-2" };
+const _hoisted_8$5 = { class: "grid grid-cols-7 gap-1" };
+const _hoisted_9$4 = ["disabled", "onClick", "onMouseenter"];
+const _hoisted_10$4 = { class: "mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800" };
+const _hoisted_11$4 = { class: "flex items-center justify-between" };
+const _hoisted_12$3 = { class: "text-xs text-neutral-500 dark:text-neutral-400" };
+const _hoisted_13$3 = { key: 0 };
+const _hoisted_14$3 = { key: 1 };
+const _hoisted_15$3 = { key: 2 };
 const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "DateRangeInput",
   props: {
@@ -1725,7 +1725,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           }, ["stop"]))
         }, [
           createElementVNode("div", _hoisted_4$9, [
-            createElementVNode("div", _hoisted_5$6, [
+            createElementVNode("div", _hoisted_5$7, [
               createElementVNode("button", {
                 type: "button",
                 class: "p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",
@@ -1745,7 +1745,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                   })
                 ], -1)
               ])]),
-              createElementVNode("div", _hoisted_6$6, toDisplayString(monthNames.value[currentMonth.value]) + " " + toDisplayString(currentYear.value), 1),
+              createElementVNode("div", _hoisted_6$7, toDisplayString(monthNames.value[currentMonth.value]) + " " + toDisplayString(currentYear.value), 1),
               createElementVNode("button", {
                 type: "button",
                 class: "p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",
@@ -1766,7 +1766,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                 ], -1)
               ])])
             ]),
-            createElementVNode("div", _hoisted_7$6, [
+            createElementVNode("div", _hoisted_7$7, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(dayNames.value, (day) => {
                 return openBlock(), createElementBlock("div", {
                   key: day,
@@ -1774,7 +1774,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                 }, toDisplayString(day), 1);
               }), 128))
             ]),
-            createElementVNode("div", _hoisted_8$4, [
+            createElementVNode("div", _hoisted_8$5, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(calendarDays.value, (day) => {
                 return openBlock(), createElementBlock("div", {
                   key: day.date.toISOString(),
@@ -1799,14 +1799,14 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                     onClick: ($event) => selectDate(day.date),
                     onMouseenter: ($event) => handleDateHover(day.date),
                     onMouseleave: handleDateLeave
-                  }, toDisplayString(day.date.getDate()), 43, _hoisted_9$3)
+                  }, toDisplayString(day.date.getDate()), 43, _hoisted_9$4)
                 ]);
               }), 128))
             ]),
-            createElementVNode("div", _hoisted_10$3, [
-              createElementVNode("div", _hoisted_11$3, [
-                createElementVNode("div", _hoisted_12$2, [
-                  startDate.value && endDate.value ? (openBlock(), createElementBlock("div", _hoisted_13$2, " Range: " + toDisplayString(daysBetween.value) + " days ", 1)) : startDate.value ? (openBlock(), createElementBlock("div", _hoisted_14$2, " Select end date ")) : (openBlock(), createElementBlock("div", _hoisted_15$2, " Select start date "))
+            createElementVNode("div", _hoisted_10$4, [
+              createElementVNode("div", _hoisted_11$4, [
+                createElementVNode("div", _hoisted_12$3, [
+                  startDate.value && endDate.value ? (openBlock(), createElementBlock("div", _hoisted_13$3, " Range: " + toDisplayString(daysBetween.value) + " days ", 1)) : startDate.value ? (openBlock(), createElementBlock("div", _hoisted_14$3, " Select end date ")) : (openBlock(), createElementBlock("div", _hoisted_15$3, " Select start date "))
                 ]),
                 startDate.value || endDate.value ? (openBlock(), createElementBlock("button", {
                   key: 0,
@@ -1830,10 +1830,10 @@ const _hoisted_4$8 = {
   key: 0,
   class: "mt-4 rounded-lg border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-800 dark:bg-neutral-900/50"
 };
-const _hoisted_5$5 = { class: "flex items-center space-x-4" };
-const _hoisted_6$5 = ["src"];
-const _hoisted_7$5 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
-const _hoisted_8$3 = { class: "text-xs text-neutral-500 dark:text-neutral-200" };
+const _hoisted_5$6 = { class: "flex items-center space-x-4" };
+const _hoisted_6$6 = ["src"];
+const _hoisted_7$6 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
+const _hoisted_8$4 = { class: "text-xs text-neutral-500 dark:text-neutral-200" };
 const _sfc_main$C = {
   __name: "ImageInput",
   props: {
@@ -1880,15 +1880,15 @@ const _sfc_main$C = {
           }), null, 16, _hoisted_3$b)
         ]),
         props.currentImageUrl ? (openBlock(), createElementBlock("div", _hoisted_4$8, [
-          createElementVNode("div", _hoisted_5$5, [
+          createElementVNode("div", _hoisted_5$6, [
             createElementVNode("img", {
               src: props.currentImageUrl,
               alt: "Current logo",
               class: "h-16 w-auto max-w-24 object-contain rounded-lg shadow-sm"
-            }, null, 8, _hoisted_6$5),
+            }, null, 8, _hoisted_6$6),
             createElementVNode("div", null, [
-              createElementVNode("p", _hoisted_7$5, toDisplayString(props.currentLabel), 1),
-              createElementVNode("p", _hoisted_8$3, toDisplayString(props.currentSubtext), 1)
+              createElementVNode("p", _hoisted_7$6, toDisplayString(props.currentLabel), 1),
+              createElementVNode("p", _hoisted_8$4, toDisplayString(props.currentSubtext), 1)
             ])
           ])
         ])) : createCommentVNode("", true)
@@ -2121,7 +2121,7 @@ const _sfc_main$y = {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$m, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
-          return openBlock(), createBlock(_sfc_main$w, {
+          return openBlock(), createBlock(_sfc_main$v, {
             key: `radio-${__props.name ?? "group"}-${option}`,
             type: "radio-input",
             "model-value": props.modelValue,
@@ -2261,17 +2261,761 @@ const _sfc_main$x = {
     };
   }
 };
-const _hoisted_1$k = ["for"];
-const _hoisted_2$e = {
+const _hoisted_1$k = { class: "relative w-full" };
+const _hoisted_2$e = ["name", "value", "disabled", "required"];
+const _hoisted_3$a = ["disabled", "aria-expanded"];
+const _hoisted_4$7 = { class: "color-picker-checker relative inline-flex size-10 shrink-0 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-700" };
+const _hoisted_5$5 = { class: "min-w-0 flex-1" };
+const _hoisted_6$5 = { class: "block truncate font-mono text-sm text-neutral-900 dark:text-neutral-50" };
+const _hoisted_7$5 = { class: "rounded-2xl border border-neutral-200 bg-white/96 p-4 shadow-2xl shadow-neutral-950/12 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/96 dark:shadow-black/30" };
+const _hoisted_8$3 = { class: "flex items-start gap-3" };
+const _hoisted_9$3 = { class: "color-picker-checker relative size-14 shrink-0 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700" };
+const _hoisted_10$3 = { class: "min-w-0 flex-1" };
+const _hoisted_11$3 = { class: "truncate font-mono text-base text-neutral-900 dark:text-neutral-50" };
+const _hoisted_12$2 = ["disabled"];
+const _hoisted_13$2 = { class: "mt-4 space-y-4" };
+const _hoisted_14$2 = ["aria-label", "aria-valuenow"];
+const _hoisted_15$2 = {
+  key: 0,
+  class: "absolute inset-0 bg-[linear-gradient(to_right,#fff,transparent)]"
+};
+const _hoisted_16$1 = {
+  key: 2,
+  class: "absolute inset-0 bg-[linear-gradient(to_top,#000,transparent)]"
+};
+const _hoisted_17$1 = { class: "space-y-3" };
+const _hoisted_18$1 = {
+  key: 0,
+  class: "space-y-2"
+};
+const _hoisted_19 = { class: "flex items-center justify-between text-xs font-medium text-neutral-500 dark:text-neutral-400" };
+const _hoisted_20 = ["for"];
+const _hoisted_21 = ["id", "disabled", "value"];
+const _hoisted_22 = {
+  key: 1,
+  class: "space-y-2"
+};
+const _hoisted_23 = { class: "flex items-center justify-between text-xs font-medium text-neutral-500 dark:text-neutral-400" };
+const _hoisted_24 = ["for"];
+const _hoisted_25 = ["id", "disabled", "value"];
+const _hoisted_26 = { class: "space-y-2" };
+const _hoisted_27 = ["for"];
+const _hoisted_28 = ["id", "maxlength", "placeholder", "value", "disabled"];
+const DEFAULT_HEX = "#000000";
+const DEFAULT_ALPHA = 255;
+const PICKER_PANEL_WIDTH = 320;
+const PICKER_PANEL_GAP = 8;
+const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
+  __name: "ColorPicker",
+  props: {
+    modelValue: {
+      type: [String, null],
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    disabledClass: {
+      type: String,
+      default: "!border-neutral-200 !bg-neutral-100 !text-neutral-500 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-neutral-500"
+    },
+    allowAlpha: {
+      type: Boolean,
+      default: false
+    },
+    variant: {
+      type: String,
+      default: "classic"
+    }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const triggerRef = ref(null);
+    const panelRef = ref(null);
+    const hexInputRef = ref(null);
+    const saturationRef = ref(null);
+    const isOpen = ref(false);
+    const supportsEyeDropper = ref(false);
+    const lastEmittedValue = ref("");
+    const hue = ref(220);
+    const saturation = ref(84);
+    const brightness = ref(92);
+    const alpha = ref(DEFAULT_ALPHA);
+    const displayValue = ref("");
+    const panelStyle = ref({
+      position: "fixed",
+      left: "0px",
+      top: "0px",
+      visibility: "hidden",
+      width: `${PICKER_PANEL_WIDTH}px`,
+      zIndex: "9999"
+    });
+    let dragCleanup = null;
+    let revealFrame = null;
+    const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+    const parseHexColor = (value) => {
+      if (typeof value !== "string") {
+        return null;
+      }
+      const trimmed = value.trim();
+      if (trimmed === "") {
+        return null;
+      }
+      const withHash = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+      const shortRgbMatch = withHash.match(/^#([0-9a-fA-F]{3})$/);
+      if (shortRgbMatch) {
+        const expanded = shortRgbMatch[1].split("").map((char) => char.repeat(2)).join("").toUpperCase();
+        return { hex6: `#${expanded}`, alpha: DEFAULT_ALPHA };
+      }
+      const longRgbMatch = withHash.match(/^#([0-9a-fA-F]{6})$/);
+      if (longRgbMatch) {
+        return { hex6: `#${longRgbMatch[1].toUpperCase()}`, alpha: DEFAULT_ALPHA };
+      }
+      const shortRgbaMatch = withHash.match(/^#([0-9a-fA-F]{4})$/);
+      if (shortRgbaMatch) {
+        const expanded = shortRgbaMatch[1].split("").map((char) => char.repeat(2)).join("").toUpperCase();
+        return {
+          hex6: `#${expanded.slice(0, 6)}`,
+          alpha: Number.parseInt(expanded.slice(6, 8), 16)
+        };
+      }
+      const longRgbaMatch = withHash.match(/^#([0-9a-fA-F]{8})$/);
+      if (longRgbaMatch) {
+        const expanded = longRgbaMatch[1].toUpperCase();
+        return {
+          hex6: `#${expanded.slice(0, 6)}`,
+          alpha: Number.parseInt(expanded.slice(6, 8), 16)
+        };
+      }
+      return null;
+    };
+    const formatColor = (parsedColor, allowAlpha = false) => {
+      if (!parsedColor) {
+        return "";
+      }
+      if (!allowAlpha) {
+        return parsedColor.hex6;
+      }
+      return `${parsedColor.hex6}${parsedColor.alpha.toString(16).padStart(2, "0").toUpperCase()}`;
+    };
+    const normalizeModelValue = (value, allowAlpha = false) => {
+      const parsed = parseHexColor(value);
+      if (!parsed) {
+        return "";
+      }
+      return formatColor({
+        hex6: parsed.hex6,
+        alpha: allowAlpha ? parsed.alpha : DEFAULT_ALPHA
+      }, allowAlpha);
+    };
+    const hexToRgb = (hex6) => {
+      const normalized = hex6.replace("#", "");
+      return {
+        red: Number.parseInt(normalized.slice(0, 2), 16),
+        green: Number.parseInt(normalized.slice(2, 4), 16),
+        blue: Number.parseInt(normalized.slice(4, 6), 16)
+      };
+    };
+    const rgbToHex = ({ red, green, blue }) => {
+      const toHex = (value) => clamp(Math.round(value), 0, 255).toString(16).padStart(2, "0").toUpperCase();
+      return `#${toHex(red)}${toHex(green)}${toHex(blue)}`;
+    };
+    const rgbToHsv = ({ red, green, blue }) => {
+      const r = red / 255;
+      const g = green / 255;
+      const b = blue / 255;
+      const max = Math.max(r, g, b);
+      const min = Math.min(r, g, b);
+      const delta = max - min;
+      let nextHue = hue.value;
+      if (delta !== 0) {
+        if (max === r) {
+          nextHue = 60 * ((g - b) / delta % 6);
+        } else if (max === g) {
+          nextHue = 60 * ((b - r) / delta + 2);
+        } else {
+          nextHue = 60 * ((r - g) / delta + 4);
+        }
+      }
+      if (nextHue < 0) {
+        nextHue += 360;
+      }
+      const nextSaturation = max === 0 ? 0 : delta / max * 100;
+      const nextBrightness = max * 100;
+      return {
+        hue: clamp(nextHue, 0, 360),
+        saturation: clamp(nextSaturation, 0, 100),
+        brightness: clamp(nextBrightness, 0, 100)
+      };
+    };
+    const hsvToRgb = ({ hue: colorHue, saturation: colorSaturation, brightness: colorBrightness }) => {
+      const h2 = (colorHue % 360 + 360) % 360;
+      const s = clamp(colorSaturation, 0, 100) / 100;
+      const v = clamp(colorBrightness, 0, 100) / 100;
+      const chroma = v * s;
+      const x = chroma * (1 - Math.abs(h2 / 60 % 2 - 1));
+      const match = v - chroma;
+      let rPrime = 0;
+      let gPrime = 0;
+      let bPrime = 0;
+      if (h2 < 60) {
+        rPrime = chroma;
+        gPrime = x;
+      } else if (h2 < 120) {
+        rPrime = x;
+        gPrime = chroma;
+      } else if (h2 < 180) {
+        gPrime = chroma;
+        bPrime = x;
+      } else if (h2 < 240) {
+        gPrime = x;
+        bPrime = chroma;
+      } else if (h2 < 300) {
+        rPrime = x;
+        bPrime = chroma;
+      } else {
+        rPrime = chroma;
+        bPrime = x;
+      }
+      return {
+        red: Math.round((rPrime + match) * 255),
+        green: Math.round((gPrime + match) * 255),
+        blue: Math.round((bPrime + match) * 255)
+      };
+    };
+    const alphaPercentFromByte = (value) => Math.round(clamp(value, 0, 255) * 100 / 255);
+    const alphaByteFromPercent = (value) => Math.round(clamp(Number(value) || 0, 0, 100) * 255 / 100);
+    const currentRgb = computed(() => hsvToRgb({
+      hue: hue.value,
+      saturation: saturation.value,
+      brightness: brightness.value
+    }));
+    const currentColor = computed(() => ({
+      hex6: rgbToHex(currentRgb.value),
+      alpha: clamp(alpha.value, 0, 255)
+    }));
+    const normalizedValue = computed(() => normalizeModelValue(props.modelValue, props.allowAlpha));
+    const emittedValue = computed(() => formatColor(currentColor.value, props.allowAlpha));
+    const opacityPercent = computed(() => alphaPercentFromByte(alpha.value));
+    const swatchColor = computed(() => {
+      const { red, green, blue } = currentRgb.value;
+      return `rgba(${red}, ${green}, ${blue}, ${clamp(alpha.value / 255, 0, 1)})`;
+    });
+    const hueColor = computed(() => rgbToHex(hsvToRgb({ hue: hue.value, saturation: 100, brightness: 100 })));
+    const isRainbowVariant = computed(() => props.variant === "rainbow");
+    const alphaGradient = computed(() => {
+      const { red, green, blue } = currentRgb.value;
+      return `linear-gradient(90deg, rgba(${red}, ${green}, ${blue}, 0) 0%, rgba(${red}, ${green}, ${blue}, 1) 100%)`;
+    });
+    const saturationHandleStyle = computed(() => ({
+      left: `${isRainbowVariant.value ? hue.value / 360 * 100 : saturation.value}%`,
+      top: `${isRainbowVariant.value ? brightness.value >= 100 ? saturation.value / 2 : 50 + (100 - brightness.value) / 2 : 100 - brightness.value}%`
+    }));
+    const saturationAreaStyle = computed(() => isRainbowVariant.value ? {
+      background: "linear-gradient(90deg, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"
+    } : {
+      backgroundColor: hueColor.value
+    });
+    const saturationAreaLabel = computed(() => isRainbowVariant.value ? `Rainbow color area for ${emittedValue.value}` : `Saturation and brightness for ${emittedValue.value}`);
+    const fieldId = computed(() => {
+      const id = attrs.id;
+      return typeof id === "string" && id !== "" ? id : void 0;
+    });
+    const fieldName = computed(() => {
+      const name = attrs.name;
+      return typeof name === "string" && name !== "" ? name : void 0;
+    });
+    const triggerAttrs = computed(() => {
+      const {
+        class: _class,
+        name: _name,
+        autofocus: _autofocus,
+        required: _required,
+        placeholder: _placeholder,
+        maxlength: _maxlength,
+        ...rest
+      } = attrs;
+      return {
+        ...rest,
+        id: fieldId.value
+      };
+    });
+    const triggerClasses = computed(() => [
+      "group flex w-full items-center gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-3 text-left text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
+      attrs.class,
+      props.disabled ? props.disabledClass : ""
+    ]);
+    const hiddenInputRequired = computed(() => Boolean(attrs.required) && !props.disabled);
+    const hexInputPlaceholder = computed(() => props.allowAlpha ? "#RRGGBBAA" : "#RRGGBB");
+    const canUseEyeDropper = computed(() => supportsEyeDropper.value && !props.disabled);
+    const normalizedVariant = computed(() => isRainbowVariant.value ? "rainbow" : "classic");
+    const syncFromNormalizedValue = (value) => {
+      const parsed = parseHexColor(value) ?? { hex6: DEFAULT_HEX, alpha: DEFAULT_ALPHA };
+      const rgb = hexToRgb(parsed.hex6);
+      const hsv = rgbToHsv(rgb);
+      hue.value = hsv.hue;
+      saturation.value = hsv.saturation;
+      brightness.value = hsv.brightness;
+      alpha.value = props.allowAlpha ? parsed.alpha : DEFAULT_ALPHA;
+      displayValue.value = formatColor({
+        hex6: parsed.hex6,
+        alpha: props.allowAlpha ? parsed.alpha : DEFAULT_ALPHA
+      }, props.allowAlpha);
+    };
+    const emitCurrentColor = () => {
+      displayValue.value = emittedValue.value;
+      lastEmittedValue.value = emittedValue.value;
+      emit("update:modelValue", emittedValue.value);
+    };
+    watch([normalizedValue, () => props.allowAlpha, normalizedVariant], ([nextValue, allowAlpha, variant], [, previousAllowAlpha, previousVariant]) => {
+      if (allowAlpha === previousAllowAlpha && nextValue === lastEmittedValue.value) {
+        displayValue.value = nextValue;
+        lastEmittedValue.value = "";
+        return;
+      }
+      if (variant !== previousVariant) {
+        lastEmittedValue.value = "";
+      }
+      lastEmittedValue.value = "";
+      syncFromNormalizedValue(nextValue);
+    });
+    const updatePanelPosition = () => {
+      if (!triggerRef.value || !panelRef.value) {
+        return;
+      }
+      const rect = triggerRef.value.getBoundingClientRect();
+      const panelWidth = panelRef.value.offsetWidth || PICKER_PANEL_WIDTH;
+      const panelHeight = panelRef.value.offsetHeight || 0;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      let left = rect.left;
+      if (left + panelWidth > viewportWidth - PICKER_PANEL_GAP) {
+        left = viewportWidth - panelWidth - PICKER_PANEL_GAP;
+      }
+      left = Math.max(PICKER_PANEL_GAP, left);
+      const spaceBelow = viewportHeight - rect.bottom - PICKER_PANEL_GAP;
+      const spaceAbove = rect.top - PICKER_PANEL_GAP;
+      const openUpward = spaceBelow < panelHeight && spaceAbove > spaceBelow;
+      panelStyle.value = {
+        position: "fixed",
+        left: `${left}px`,
+        ...openUpward ? { bottom: `${viewportHeight - rect.top + PICKER_PANEL_GAP}px` } : { top: `${rect.bottom + PICKER_PANEL_GAP}px` },
+        width: `${panelWidth}px`,
+        zIndex: "9999",
+        visibility: panelStyle.value.visibility
+      };
+    };
+    const revealPanel = async () => {
+      if (!isOpen.value) {
+        return;
+      }
+      if (revealFrame !== null) {
+        cancelAnimationFrame(revealFrame);
+        revealFrame = null;
+      }
+      panelStyle.value = {
+        ...panelStyle.value,
+        visibility: "hidden"
+      };
+      await nextTick();
+      updatePanelPosition();
+      revealFrame = requestAnimationFrame(() => {
+        if (!isOpen.value) {
+          return;
+        }
+        panelStyle.value = {
+          ...panelStyle.value,
+          visibility: "visible"
+        };
+      });
+    };
+    const closePanel = () => {
+      isOpen.value = false;
+    };
+    const togglePanel = async () => {
+      if (props.disabled) {
+        return;
+      }
+      isOpen.value = !isOpen.value;
+      if (isOpen.value) {
+        displayValue.value = emittedValue.value;
+        await revealPanel();
+        await nextTick();
+        hexInputRef.value?.focus();
+        hexInputRef.value?.select();
+      }
+    };
+    const closeOnOutsidePointer = (event) => {
+      if (!isOpen.value) {
+        return;
+      }
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (triggerRef.value?.contains(target) || panelRef.value?.contains(target)) {
+        return;
+      }
+      closePanel();
+    };
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape" && isOpen.value) {
+        closePanel();
+        triggerRef.value?.focus();
+      }
+    };
+    const handleViewportChange = () => {
+      if (isOpen.value) {
+        updatePanelPosition();
+      }
+    };
+    const beginDrag = (event, updateFromPointer) => {
+      if (props.disabled) {
+        return;
+      }
+      event.preventDefault();
+      updateFromPointer(event);
+      const handleMove = (moveEvent) => updateFromPointer(moveEvent);
+      const handleUp = () => {
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        dragCleanup = null;
+      };
+      window.addEventListener("pointermove", handleMove);
+      window.addEventListener("pointerup", handleUp, { once: true });
+      dragCleanup = handleUp;
+    };
+    const updateFromSaturationPointer = (event) => {
+      if (!saturationRef.value) {
+        return;
+      }
+      const rect = saturationRef.value.getBoundingClientRect();
+      const xPercent = clamp((event.clientX - rect.left) / rect.width * 100, 0, 100);
+      const yPercent = clamp((event.clientY - rect.top) / rect.height * 100, 0, 100);
+      if (isRainbowVariant.value) {
+        hue.value = clamp(xPercent / 100 * 360, 0, 360);
+        if (yPercent <= 50) {
+          saturation.value = clamp(yPercent / 50 * 100, 0, 100);
+          brightness.value = 100;
+        } else {
+          saturation.value = 100;
+          brightness.value = clamp(100 - (yPercent - 50) / 50 * 100, 0, 100);
+        }
+      } else {
+        saturation.value = xPercent;
+        brightness.value = clamp(100 - yPercent, 0, 100);
+      }
+      emitCurrentColor();
+    };
+    const updateFromSaturationKey = (event) => {
+      const step = event.shiftKey ? 10 : 2;
+      if (event.key === "ArrowLeft") {
+        if (isRainbowVariant.value) {
+          hue.value = clamp(hue.value - step * 3.6, 0, 360);
+        } else {
+          saturation.value = clamp(saturation.value - step, 0, 100);
+        }
+      } else if (event.key === "ArrowRight") {
+        if (isRainbowVariant.value) {
+          hue.value = clamp(hue.value + step * 3.6, 0, 360);
+        } else {
+          saturation.value = clamp(saturation.value + step, 0, 100);
+        }
+      } else if (event.key === "ArrowUp") {
+        if (isRainbowVariant.value) {
+          if (brightness.value < 100) {
+            brightness.value = clamp(brightness.value + step, 0, 100);
+          } else {
+            saturation.value = clamp(saturation.value - step, 0, 100);
+          }
+        } else {
+          brightness.value = clamp(brightness.value + step, 0, 100);
+        }
+      } else if (event.key === "ArrowDown") {
+        if (isRainbowVariant.value) {
+          if (saturation.value < 100 || brightness.value === 100) {
+            saturation.value = clamp(saturation.value + step, 0, 100);
+          } else {
+            brightness.value = clamp(brightness.value - step, 0, 100);
+          }
+        } else {
+          brightness.value = clamp(brightness.value - step, 0, 100);
+        }
+      } else {
+        return;
+      }
+      event.preventDefault();
+      emitCurrentColor();
+    };
+    const handleHueInput = (event) => {
+      hue.value = clamp(Number(event.target?.value ?? hue.value) || 0, 0, 360);
+      emitCurrentColor();
+    };
+    const handleAlphaInput = (event) => {
+      alpha.value = alphaByteFromPercent(event.target?.value ?? opacityPercent.value);
+      emitCurrentColor();
+    };
+    const handleHexInput = (event) => {
+      const nextValue = String(event.target?.value ?? "");
+      displayValue.value = nextValue;
+      const parsed = parseHexColor(nextValue);
+      if (!parsed) {
+        return;
+      }
+      const normalized = formatColor({
+        hex6: parsed.hex6,
+        alpha: props.allowAlpha ? parsed.alpha : DEFAULT_ALPHA
+      }, props.allowAlpha);
+      syncFromNormalizedValue(normalized);
+      lastEmittedValue.value = normalized;
+      emit("update:modelValue", normalized);
+    };
+    const handleHexBlur = (event) => {
+      displayValue.value = emittedValue.value;
+      emit("blur", event);
+    };
+    const pickFromScreen = async () => {
+      if (!canUseEyeDropper.value) {
+        return;
+      }
+      try {
+        const eyeDropper = new window.EyeDropper();
+        const result = await eyeDropper.open();
+        const picked = parseHexColor(result?.sRGBHex);
+        if (!picked) {
+          return;
+        }
+        const normalized = formatColor({
+          hex6: picked.hex6,
+          alpha: props.allowAlpha ? alpha.value : DEFAULT_ALPHA
+        }, props.allowAlpha);
+        syncFromNormalizedValue(normalized);
+        lastEmittedValue.value = normalized;
+        emit("update:modelValue", normalized);
+      } catch (error) {
+        if (error?.name !== "AbortError") {
+          console.error("EyeDropper failed", error);
+        }
+      }
+    };
+    onMounted(() => {
+      supportsEyeDropper.value = typeof window !== "undefined" && "EyeDropper" in window;
+      syncFromNormalizedValue(normalizedValue.value);
+      if (attrs.autofocus !== void 0) {
+        triggerRef.value?.focus();
+      }
+      document.addEventListener("pointerdown", closeOnOutsidePointer, true);
+      document.addEventListener("keydown", closeOnEscape);
+      window.addEventListener("resize", handleViewportChange);
+      window.addEventListener("scroll", handleViewportChange, true);
+    });
+    onUnmounted(() => {
+      if (revealFrame !== null) {
+        cancelAnimationFrame(revealFrame);
+      }
+      dragCleanup?.();
+      document.removeEventListener("pointerdown", closeOnOutsidePointer, true);
+      document.removeEventListener("keydown", closeOnEscape);
+      window.removeEventListener("resize", handleViewportChange);
+      window.removeEventListener("scroll", handleViewportChange, true);
+    });
+    watch(isOpen, (open) => {
+      if (open) {
+        revealPanel();
+      }
+    });
+    __expose({ focus: () => triggerRef.value?.focus() });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        fieldName.value ? (openBlock(), createElementBlock("input", {
+          key: 0,
+          type: "hidden",
+          name: fieldName.value,
+          value: emittedValue.value,
+          disabled: props.disabled,
+          required: hiddenInputRequired.value
+        }, null, 8, _hoisted_2$e)) : createCommentVNode("", true),
+        createElementVNode("button", mergeProps({
+          ref_key: "triggerRef",
+          ref: triggerRef
+        }, triggerAttrs.value, {
+          type: "button",
+          class: triggerClasses.value,
+          disabled: props.disabled,
+          "aria-expanded": isOpen.value,
+          "aria-haspopup": "dialog",
+          onClick: togglePanel
+        }), [
+          createElementVNode("span", _hoisted_4$7, [
+            createElementVNode("span", {
+              class: "absolute inset-0",
+              style: normalizeStyle({ backgroundColor: swatchColor.value })
+            }, null, 4)
+          ]),
+          createElementVNode("span", _hoisted_5$5, [
+            _cache[1] || (_cache[1] = createElementVNode("span", { class: "block text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400" }, "Color", -1)),
+            createElementVNode("span", _hoisted_6$5, toDisplayString(emittedValue.value), 1)
+          ]),
+          createVNode(unref(ChevronDownIcon), {
+            class: normalizeClass(["size-4 shrink-0 text-neutral-400 transition-transform dark:text-neutral-500", isOpen.value ? "rotate-180" : ""])
+          }, null, 8, ["class"])
+        ], 16, _hoisted_3$a),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createVNode(Transition, {
+            "enter-active-class": "transition duration-150 ease-out",
+            "enter-from-class": "opacity-0 translate-y-1",
+            "enter-to-class": "opacity-100 translate-y-0",
+            "leave-active-class": "transition duration-100 ease-in",
+            "leave-from-class": "opacity-100 translate-y-0",
+            "leave-to-class": "opacity-0 translate-y-1"
+          }, {
+            default: withCtx(() => [
+              isOpen.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "panelRef",
+                ref: panelRef,
+                class: "z-50",
+                style: normalizeStyle(panelStyle.value)
+              }, [
+                createElementVNode("div", _hoisted_7$5, [
+                  createElementVNode("div", _hoisted_8$3, [
+                    createElementVNode("div", _hoisted_9$3, [
+                      createElementVNode("span", {
+                        class: "absolute inset-0",
+                        style: normalizeStyle({ backgroundColor: swatchColor.value })
+                      }, null, 4)
+                    ]),
+                    createElementVNode("div", _hoisted_10$3, [
+                      _cache[2] || (_cache[2] = createElementVNode("p", { class: "text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400" }, "Selected color", -1)),
+                      createElementVNode("p", _hoisted_11$3, toDisplayString(emittedValue.value), 1)
+                    ]),
+                    supportsEyeDropper.value ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      type: "button",
+                      class: normalizeClass(["inline-flex size-10 items-center justify-center rounded-xl border border-neutral-200 text-neutral-600 transition-colors hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-900 dark:focus:ring-neutral-100/10", props.disabled ? "cursor-not-allowed opacity-50" : ""]),
+                      disabled: props.disabled,
+                      "aria-label": "Pick color from screen",
+                      onClick: pickFromScreen
+                    }, [
+                      createVNode(unref(EyeDropperIcon), { class: "size-5" })
+                    ], 10, _hoisted_12$2)) : createCommentVNode("", true)
+                  ]),
+                  createElementVNode("div", _hoisted_13$2, [
+                    createElementVNode("div", {
+                      ref_key: "saturationRef",
+                      ref: saturationRef,
+                      class: "relative h-48 cursor-crosshair overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800",
+                      style: normalizeStyle(saturationAreaStyle.value),
+                      tabindex: "0",
+                      role: "slider",
+                      "aria-label": saturationAreaLabel.value,
+                      "aria-valuemin": 0,
+                      "aria-valuemax": 100,
+                      "aria-valuenow": Math.round(saturation.value),
+                      onPointerdown: _cache[0] || (_cache[0] = ($event) => beginDrag($event, updateFromSaturationPointer)),
+                      onKeydown: updateFromSaturationKey
+                    }, [
+                      !isRainbowVariant.value ? (openBlock(), createElementBlock("div", _hoisted_15$2)) : createCommentVNode("", true),
+                      isRainbowVariant.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        _cache[3] || (_cache[3] = createElementVNode("div", { class: "absolute inset-x-0 top-0 h-1/2 bg-[linear-gradient(to_bottom,#fff,transparent)]" }, null, -1)),
+                        _cache[4] || (_cache[4] = createElementVNode("div", { class: "absolute inset-x-0 bottom-0 h-1/2 bg-[linear-gradient(to_bottom,transparent,#000)]" }, null, -1))
+                      ], 64)) : (openBlock(), createElementBlock("div", _hoisted_16$1)),
+                      createElementVNode("span", {
+                        class: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3)]",
+                        style: normalizeStyle(saturationHandleStyle.value)
+                      }, null, 4)
+                    ], 44, _hoisted_14$2),
+                    createElementVNode("div", _hoisted_17$1, [
+                      !isRainbowVariant.value ? (openBlock(), createElementBlock("div", _hoisted_18$1, [
+                        createElementVNode("div", _hoisted_19, [
+                          createElementVNode("label", {
+                            for: fieldId.value ? `${fieldId.value}-hue` : void 0
+                          }, "Hue", 8, _hoisted_20),
+                          createElementVNode("span", null, toDisplayString(Math.round(hue.value)) + "°", 1)
+                        ]),
+                        createElementVNode("input", {
+                          id: fieldId.value ? `${fieldId.value}-hue` : void 0,
+                          type: "range",
+                          min: "0",
+                          max: "360",
+                          step: "1",
+                          class: "color-picker-range",
+                          disabled: props.disabled,
+                          value: hue.value,
+                          style: { "background": "linear-gradient(90deg, #FF0000 0%, #FFFF00 17%, #00FF00 33%, #00FFFF 50%, #0000FF 67%, #FF00FF 83%, #FF0000 100%)" },
+                          onInput: handleHueInput
+                        }, null, 40, _hoisted_21)
+                      ])) : createCommentVNode("", true),
+                      props.allowAlpha ? (openBlock(), createElementBlock("div", _hoisted_22, [
+                        createElementVNode("div", _hoisted_23, [
+                          createElementVNode("label", {
+                            for: fieldId.value ? `${fieldId.value}-alpha` : void 0
+                          }, "Opacity", 8, _hoisted_24),
+                          createElementVNode("span", null, toDisplayString(opacityPercent.value) + "%", 1)
+                        ]),
+                        createElementVNode("input", {
+                          id: fieldId.value ? `${fieldId.value}-alpha` : void 0,
+                          type: "range",
+                          min: "0",
+                          max: "100",
+                          step: "1",
+                          class: "color-picker-range",
+                          disabled: props.disabled,
+                          value: opacityPercent.value,
+                          style: normalizeStyle({ background: alphaGradient.value }),
+                          onInput: handleAlphaInput
+                        }, null, 44, _hoisted_25)
+                      ])) : createCommentVNode("", true)
+                    ]),
+                    createElementVNode("div", _hoisted_26, [
+                      createElementVNode("label", {
+                        for: fieldId.value ? `${fieldId.value}-hex` : void 0,
+                        class: "text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400"
+                      }, "Hex value", 8, _hoisted_27),
+                      createElementVNode("input", {
+                        id: fieldId.value ? `${fieldId.value}-hex` : void 0,
+                        ref_key: "hexInputRef",
+                        ref: hexInputRef,
+                        type: "text",
+                        inputmode: "text",
+                        spellcheck: "false",
+                        autocapitalize: "characters",
+                        maxlength: props.allowAlpha ? 9 : 7,
+                        placeholder: hexInputPlaceholder.value,
+                        class: "w-full rounded-xl border border-neutral-200 bg-white px-3 py-2.5 font-mono text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
+                        value: displayValue.value,
+                        disabled: props.disabled,
+                        onInput: handleHexInput,
+                        onBlur: handleHexBlur
+                      }, null, 40, _hoisted_28)
+                    ])
+                  ])
+                ])
+              ], 4)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ]))
+      ]);
+    };
+  }
+});
+const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-b86f621b"]]);
+const _hoisted_1$j = ["for"];
+const _hoisted_2$d = {
   key: 1,
   class: "text-xs text-gray-500 mb-1 block"
 };
-const _hoisted_3$a = {
-  key: 17,
+const _hoisted_3$9 = {
+  key: 18,
   class: "flex items-center mt-2 text-sm text-red-600"
 };
 const defaultFieldClass = "block w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 placeholder:text-neutral-400 shadow-sm transition-all duration-200 focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10";
-const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
+const _sfc_main$v = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "InputGroup",
   props: {
     type: {
@@ -2445,6 +3189,14 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     locale: {
       type: String,
       default: "fr-CA"
+    },
+    allowAlpha: {
+      type: Boolean,
+      default: false
+    },
+    variant: {
+      type: String,
+      default: "classic"
     }
   },
   emits: ["update:modelValue", "blur"],
@@ -2471,8 +3223,7 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       "tel",
       "search",
       "month",
-      "week",
-      "color"
+      "week"
     ];
     const noComponentTypes = [];
     const isImageType = computed(() => props.type === "image");
@@ -2488,6 +3239,7 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     const isDateRangeType = computed(() => props.type === "daterange");
     const isTextareaType = computed(() => props.type === "textarea");
     const isTinyEditorType = computed(() => props.type === "tiny-editor");
+    const isColorPickerType = computed(() => props.type === "color");
     const isSelectType = computed(() => props.type === "select");
     const isTextLikeType = computed(() => textLikeTypes.includes(props.type));
     const isNoComponentType = computed(() => noComponentTypes.includes(props.type));
@@ -2630,67 +3382,80 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       disabled: props.disabled,
       disabledClass: props.disabledClass
     }));
+    const colorPickerBindings = computed(() => ({
+      ...attrs,
+      class: [attrs.class],
+      name: props.name,
+      modelValue: typeof props.modelValue === "string" ? props.modelValue : "",
+      disabled: props.disabled,
+      disabledClass: props.disabledClass,
+      allowAlpha: props.allowAlpha,
+      variant: props.variant
+    }));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
         __props.label && !showsInlineChoiceControl.value ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: fieldId.value,
           class: "text-base font-semibold text-gray-900 dark:text-gray-50 mb-1 block"
-        }, toDisplayString(__props.label), 9, _hoisted_1$k)) : createCommentVNode("", true),
-        __props.helperText && !showsInlineChoiceControl.value ? (openBlock(), createElementBlock("span", _hoisted_2$e, toDisplayString(__props.helperText), 1)) : createCommentVNode("", true),
+        }, toDisplayString(__props.label), 9, _hoisted_1$j)) : createCommentVNode("", true),
+        __props.helperText && !showsInlineChoiceControl.value ? (openBlock(), createElementBlock("span", _hoisted_2$d, toDisplayString(__props.helperText), 1)) : createCommentVNode("", true),
         isTextareaType.value ? (openBlock(), createBlock(_sfc_main$H, mergeProps({ key: 2 }, textAreaBindings.value, {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event))
         }), null, 16)) : isTinyEditorType.value ? (openBlock(), createBlock(_sfc_main$x, mergeProps({ key: 3 }, tinyEditorBindings.value, {
           "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[3] || (_cache[3] = ($event) => emit("blur", $event))
-        }), null, 16)) : isSelectType.value ? (openBlock(), createBlock(_sfc_main$F, mergeProps({ key: 4 }, selectBindings.value, {
+        }), null, 16)) : isColorPickerType.value ? (openBlock(), createBlock(ColorPicker, mergeProps({ key: 4 }, colorPickerBindings.value, {
           "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[5] || (_cache[5] = ($event) => emit("blur", $event))
-        }), null, 16)) : isDateType.value ? (openBlock(), createBlock(DateInput, mergeProps({ key: 5 }, dateBindings.value, {
+        }), null, 16)) : isSelectType.value ? (openBlock(), createBlock(_sfc_main$F, mergeProps({ key: 5 }, selectBindings.value, {
           "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[7] || (_cache[7] = ($event) => emit("blur", $event))
-        }), null, 16)) : isDateRangeType.value ? (openBlock(), createBlock(DateRangeInput, mergeProps({ key: 6 }, dateRangeBindings.value, {
+        }), null, 16)) : isDateType.value ? (openBlock(), createBlock(DateInput, mergeProps({ key: 6 }, dateBindings.value, {
           "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[9] || (_cache[9] = ($event) => emit("blur", $event))
-        }), null, 16)) : isTextLikeType.value ? (openBlock(), createBlock(_sfc_main$I, mergeProps({ key: 7 }, textInputBindings.value, {
+        }), null, 16)) : isDateRangeType.value ? (openBlock(), createBlock(DateRangeInput, mergeProps({ key: 7 }, dateRangeBindings.value, {
           "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[11] || (_cache[11] = ($event) => emit("blur", $event))
-        }), null, 16)) : isImageType.value ? (openBlock(), createBlock(_sfc_main$C, mergeProps({ key: 8 }, imageBindings.value, {
+        }), null, 16)) : isTextLikeType.value ? (openBlock(), createBlock(_sfc_main$I, mergeProps({ key: 8 }, textInputBindings.value, {
           "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[13] || (_cache[13] = ($event) => emit("blur", $event))
-        }), null, 16)) : isCheckboxSingleType.value ? (openBlock(), createBlock(_sfc_main$J, mergeProps({ key: 9 }, checkboxSingleBindings.value, {
+        }), null, 16)) : isImageType.value ? (openBlock(), createBlock(_sfc_main$C, mergeProps({ key: 9 }, imageBindings.value, {
           "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[15] || (_cache[15] = ($event) => emit("blur", $event))
-        }), null, 16)) : isRadioSingleType.value ? (openBlock(), createBlock(_sfc_main$A, mergeProps({ key: 10 }, radioSingleBindings.value, {
+        }), null, 16)) : isCheckboxSingleType.value ? (openBlock(), createBlock(_sfc_main$J, mergeProps({ key: 10 }, checkboxSingleBindings.value, {
           "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[17] || (_cache[17] = ($event) => emit("blur", $event))
-        }), null, 16)) : isToggleSingleType.value ? (openBlock(), createBlock(_sfc_main$z, mergeProps({ key: 11 }, toggleSingleBindings.value, {
+        }), null, 16)) : isRadioSingleType.value ? (openBlock(), createBlock(_sfc_main$A, mergeProps({ key: 11 }, radioSingleBindings.value, {
           "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[19] || (_cache[19] = ($event) => emit("blur", $event))
-        }), null, 16)) : isNotationType.value ? (openBlock(), createBlock(_sfc_main$B, mergeProps({ key: 12 }, notationBindings.value, {
+        }), null, 16)) : isToggleSingleType.value ? (openBlock(), createBlock(_sfc_main$z, mergeProps({ key: 12 }, toggleSingleBindings.value, {
           "onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[21] || (_cache[21] = ($event) => emit("blur", $event))
-        }), null, 16)) : isCheckboxType.value ? (openBlock(), createBlock(_sfc_main$v, mergeProps({ key: 13 }, checkboxBindings.value, {
+        }), null, 16)) : isNotationType.value ? (openBlock(), createBlock(_sfc_main$B, mergeProps({ key: 13 }, notationBindings.value, {
           "onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[23] || (_cache[23] = ($event) => emit("blur", $event))
-        }), null, 16)) : isRadioType.value ? (openBlock(), createBlock(_sfc_main$y, mergeProps({ key: 14 }, radioBindings.value, {
+        }), null, 16)) : isCheckboxType.value ? (openBlock(), createBlock(_sfc_main$u, mergeProps({ key: 14 }, checkboxBindings.value, {
           "onUpdate:modelValue": _cache[24] || (_cache[24] = ($event) => emit("update:modelValue", $event)),
           onBlur: _cache[25] || (_cache[25] = ($event) => emit("blur", $event))
+        }), null, 16)) : isRadioType.value ? (openBlock(), createBlock(_sfc_main$y, mergeProps({ key: 15 }, radioBindings.value, {
+          "onUpdate:modelValue": _cache[26] || (_cache[26] = ($event) => emit("update:modelValue", $event)),
+          onBlur: _cache[27] || (_cache[27] = ($event) => emit("blur", $event))
         }), null, 16)) : isNoComponentType.value ? renderSlot(_ctx.$slots, "unsupported-type", {
-          key: 15,
+          key: 16,
           type: __props.type,
           modelValue: __props.modelValue,
           updateValue,
           attrs: unref(attrs)
         }) : renderSlot(_ctx.$slots, "unsupported-type", {
-          key: 16,
+          key: 17,
           type: __props.type,
           modelValue: __props.modelValue,
           updateValue,
           attrs: unref(attrs)
         }),
-        hasError.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
+        hasError.value ? (openBlock(), createElementBlock("div", _hoisted_3$9, [
           createVNode(unref(ExclamationCircleIcon), { class: "mr-1 h-4 w-4 flex-shrink-0" }),
           createElementVNode("span", null, toDisplayString(__props.errorMessage), 1)
         ])) : createCommentVNode("", true)
@@ -2698,8 +3463,8 @@ const _sfc_main$w = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     };
   }
 });
-const _hoisted_1$j = { class: "flex flex-wrap gap-3" };
-const _sfc_main$v = {
+const _hoisted_1$i = { class: "flex flex-wrap gap-3" };
+const _sfc_main$u = {
   __name: "CheckboxMultipleInput",
   props: {
     modelValue: {
@@ -2740,9 +3505,9 @@ const _sfc_main$v = {
       emit("update:modelValue", nextSelection);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
-          return openBlock(), createBlock(_sfc_main$w, {
+          return openBlock(), createBlock(_sfc_main$v, {
             key: `checkbox-${option}`,
             type: "checkbox-input",
             name: __props.name,
@@ -2758,153 +3523,6 @@ const _sfc_main$v = {
     };
   }
 };
-const _hoisted_1$i = { class: "relative" };
-const _hoisted_2$d = ["disabled", "aria-label"];
-const _hoisted_3$9 = ["value", "disabled"];
-const _hoisted_4$7 = ["value", "disabled"];
-const DEFAULT_COLOR = "#000000";
-const DEFAULT_MAX_LENGTH = 7;
-const _sfc_main$u = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
-  __name: "ColorPicker",
-  props: {
-    modelValue: {
-      type: [String, null],
-      default: ""
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    disabledClass: {
-      type: String,
-      default: "!border-neutral-200 !bg-neutral-100 !text-neutral-500 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-neutral-500"
-    }
-  },
-  emits: ["update:modelValue", "blur"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const attrs = useAttrs();
-    const textInput = ref(null);
-    const nativeInput = ref(null);
-    const normalizeHexColor = (value) => {
-      if (typeof value !== "string") {
-        return "";
-      }
-      const trimmed = value.trim();
-      if (trimmed === "") {
-        return "";
-      }
-      const withHash = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
-      const shortMatch = withHash.match(/^#([0-9a-fA-F]{3})$/);
-      if (shortMatch) {
-        const [, shortValue] = shortMatch;
-        return `#${shortValue.split("").map((char) => char.repeat(2)).join("").toUpperCase()}`;
-      }
-      const longMatch = withHash.match(/^#([0-9a-fA-F]{6})$/);
-      if (longMatch) {
-        return `#${longMatch[1].toUpperCase()}`;
-      }
-      return "";
-    };
-    const normalizedModelValue = computed(() => normalizeHexColor(props.modelValue));
-    const fallbackColor = computed(() => normalizedModelValue.value || DEFAULT_COLOR);
-    const displayValue = ref(normalizedModelValue.value);
-    const textInputAttrs = computed(() => {
-      const { class: _class, type: _type, ...rest } = attrs;
-      if (rest.maxlength === void 0) {
-        rest.maxlength = DEFAULT_MAX_LENGTH;
-      }
-      return rest;
-    });
-    const textInputClasses = computed(() => [
-      "w-full min-w-0 rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 shadow-sm outline-none transition-colors placeholder:text-neutral-400 focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
-      "pl-16",
-      attrs.class
-    ]);
-    watch(normalizedModelValue, (nextValue) => {
-      displayValue.value = nextValue;
-    });
-    const emitNormalizedColor = (value) => {
-      const normalized = normalizeHexColor(value);
-      if (!normalized) {
-        return false;
-      }
-      emit("update:modelValue", normalized);
-      return true;
-    };
-    const handleTextInput = (event) => {
-      const nextValue = String(event.target?.value ?? "");
-      displayValue.value = nextValue;
-      emitNormalizedColor(nextValue);
-    };
-    const handleNativeInput = (event) => {
-      const nextValue = String(event.target?.value ?? "");
-      const normalized = normalizeHexColor(nextValue) || DEFAULT_COLOR;
-      displayValue.value = normalized;
-      emit("update:modelValue", normalized);
-    };
-    const handleBlur = (event) => {
-      displayValue.value = normalizedModelValue.value;
-      emit("blur", event);
-    };
-    const openNativePicker = () => {
-      if (props.disabled) {
-        return;
-      }
-      nativeInput.value?.click();
-    };
-    onMounted(() => {
-      if (textInput.value?.hasAttribute("autofocus")) {
-        textInput.value.focus();
-      }
-    });
-    __expose({ focus: () => textInput.value?.focus() });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        createElementVNode("button", {
-          type: "button",
-          class: normalizeClass(["absolute inset-y-0 left-0 my-2 ml-2 inline-flex w-10 items-center justify-center rounded-md border border-neutral-200 bg-white shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:focus:ring-neutral-100/10", props.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"]),
-          disabled: props.disabled,
-          "aria-label": `Choose color${normalizedModelValue.value ? ` ${normalizedModelValue.value}` : ""}`,
-          onClick: openNativePicker
-        }, [
-          createElementVNode("span", {
-            class: "h-5 w-5 rounded border border-black/10 dark:border-white/10",
-            style: normalizeStyle({ backgroundColor: fallbackColor.value })
-          }, null, 4)
-        ], 10, _hoisted_2$d),
-        createElementVNode("input", {
-          ref_key: "nativeInput",
-          ref: nativeInput,
-          type: "color",
-          tabindex: "-1",
-          "aria-hidden": "true",
-          class: "pointer-events-none absolute h-0 w-0 opacity-0",
-          value: fallbackColor.value,
-          disabled: props.disabled,
-          onInput: handleNativeInput,
-          onChange: handleNativeInput
-        }, null, 40, _hoisted_3$9),
-        createElementVNode("input", mergeProps({
-          ref_key: "textInput",
-          ref: textInput
-        }, textInputAttrs.value, {
-          type: "text",
-          inputmode: "text",
-          spellcheck: "false",
-          autocapitalize: "characters",
-          placeholder: "#RRGGBB",
-          class: [textInputClasses.value, props.disabled ? props.disabledClass : null],
-          value: displayValue.value,
-          disabled: props.disabled,
-          onInput: handleTextInput,
-          onBlur: handleBlur
-        }), null, 16, _hoisted_4$7)
-      ]);
-    };
-  }
-});
 const _sfc_main$t = {
   __name: "Modal",
   props: {
@@ -5137,7 +5755,7 @@ const _sfc_main$2 = {
                       isEditingRow(item, index) && column.slot && unref(slots)[getEditSlotName(column)] ? renderSlot(_ctx.$slots, getEditSlotName(column), mergeProps({
                         key: 0,
                         ref_for: true
-                      }, getSlotBindings(item, column, index))) : isEditingRow(item, index) && column.input ? (openBlock(), createBlock(_sfc_main$w, {
+                      }, getSlotBindings(item, column, index))) : isEditingRow(item, index) && column.input ? (openBlock(), createBlock(_sfc_main$v, {
                         key: 1,
                         type: getInputType(column),
                         class: normalizeClass(getInputClass(column)),
@@ -5365,8 +5983,8 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   CardTabs: _sfc_main$T,
   Checkbox: _sfc_main$K,
   CheckboxInput: _sfc_main$J,
-  CheckboxMultipleInput: _sfc_main$v,
-  ColorPicker: _sfc_main$u,
+  CheckboxMultipleInput: _sfc_main$u,
+  ColorPicker,
   ConfirmationModal: _sfc_main$s,
   CustomSelect: _sfc_main$G,
   DateInput,
@@ -5378,7 +5996,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   FormSection: _sfc_main$o,
   ImageInput: _sfc_main$C,
   InputError: _sfc_main$n,
-  InputGroup: _sfc_main$w,
+  InputGroup: _sfc_main$v,
   InputLabel: _sfc_main$m,
   LinkButton: _sfc_main$l,
   Modal: _sfc_main$t,
@@ -5423,9 +6041,9 @@ const plugin = {
 };
 export {
   _sfc_main$x as $,
-  _sfc_main$A as A,
-  _sfc_main$y as B,
-  _sfc_main$k as C,
+  _sfc_main$y as A,
+  _sfc_main$k as B,
+  ColorPicker as C,
   DateInput as D,
   _sfc_main$F as E,
   _sfc_main$j as F,
@@ -5462,23 +6080,23 @@ export {
   _sfc_main$T as f,
   _sfc_main$K as g,
   _sfc_main$J as h,
-  _sfc_main$v as i,
-  _sfc_main$u as j,
-  _sfc_main$s as k,
-  _sfc_main$G as l,
-  DateRangeInput as m,
-  _sfc_main$r as n,
-  _sfc_main$R as o,
-  _sfc_main$q as p,
-  _sfc_main$p as q,
-  plugin as r,
-  _sfc_main$o as s,
-  _sfc_main$C as t,
-  _sfc_main$n as u,
-  _sfc_main$w as v,
-  _sfc_main$m as w,
-  _sfc_main$l as x,
-  _sfc_main$t as y,
-  _sfc_main$B as z
+  _sfc_main$u as i,
+  _sfc_main$s as j,
+  _sfc_main$G as k,
+  DateRangeInput as l,
+  _sfc_main$r as m,
+  _sfc_main$R as n,
+  _sfc_main$q as o,
+  _sfc_main$p as p,
+  plugin as q,
+  _sfc_main$o as r,
+  _sfc_main$C as s,
+  _sfc_main$n as t,
+  _sfc_main$v as u,
+  _sfc_main$m as v,
+  _sfc_main$l as w,
+  _sfc_main$t as x,
+  _sfc_main$B as y,
+  _sfc_main$A as z
 };
-//# sourceMappingURL=plugin-ODQo1Iv8.js.map
+//# sourceMappingURL=plugin-DYTVm2W1.js.map