@enos5/enos-vue-default 1.7.6 → 1.8.2

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

@@ -1,14 +1,14 @@
 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$D = { class: "border-b border-neutral-200 bg-neutral-50/80 p-2 dark:border-neutral-800 dark:bg-neutral-900/80" };
-const _hoisted_2$n = {
+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" };
+const _hoisted_2$o = {
   role: "tablist",
   class: "flex overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-neutral-200 dark:bg-neutral-950 dark:ring-neutral-800"
 };
-const _hoisted_3$g = ["aria-selected", "tabindex", "onClick", "onKeydown"];
-const _sfc_main$S = {
+const _hoisted_3$h = ["aria-selected", "tabindex", "onClick", "onKeydown"];
+const _sfc_main$T = {
   __name: "CardTabs",
   props: {
     tabs: {
@@ -77,8 +77,8 @@ const _sfc_main$S = {
       focusTabAtIndex(targetIndex);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$D, [
-        createElementVNode("div", _hoisted_2$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$E, [
+        createElementVNode("div", _hoisted_2$o, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab, index) => {
             return openBlock(), createElementBlock("button", {
               key: tab.value,
@@ -98,22 +98,22 @@ const _sfc_main$S = {
               ]),
               onClick: ($event) => activateTab(tab.value),
               onKeydown: ($event) => onTabKeydown($event, index)
-            }, toDisplayString(tab.label), 47, _hoisted_3$g);
+            }, toDisplayString(tab.label), 47, _hoisted_3$h);
           }), 128))
         ])
       ]);
     };
   }
 };
-const _hoisted_1$C = {
+const _hoisted_1$D = {
   key: 0,
   class: "mb-4"
 };
-const _hoisted_2$m = {
+const _hoisted_2$n = {
   key: 1,
   class: "mb-4 text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50"
 };
-const _sfc_main$R = {
+const _sfc_main$S = {
   __name: "Card",
   props: {
     title: {
@@ -174,7 +174,7 @@ const _sfc_main$R = {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["rounded-2xl border border-neutral-200 bg-white text-neutral-950 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50", __props.overflowClass, { "sticky top-6 self-start": __props.sticky }, __props.cardClass])
       }, [
-        __props.tabs.length > 0 ? (openBlock(), createBlock(_sfc_main$S, {
+        __props.tabs.length > 0 ? (openBlock(), createBlock(_sfc_main$T, {
           key: 0,
           tabs: __props.tabs,
           "active-tab": __props.activeTab,
@@ -184,9 +184,9 @@ const _sfc_main$R = {
         createElementVNode("div", {
           class: normalizeClass(__props.paddingClass)
         }, [
-          _ctx.$slots.customTitle ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
+          _ctx.$slots.customTitle ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
             renderSlot(_ctx.$slots, "customTitle")
-          ])) : __props.title ? (openBlock(), createElementBlock("h3", _hoisted_2$m, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+          ])) : __props.title ? (openBlock(), createElementBlock("h3", _hoisted_2$n, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
           createElementVNode("div", {
             class: normalizeClass(["relative", __props.tabs.length > 0 ? "overflow-hidden" : "overflow-visible"])
           }, [
@@ -219,7 +219,7 @@ const _sfc_main$R = {
     };
   }
 };
-const _sfc_main$Q = /* @__PURE__ */ Object.assign({
+const _sfc_main$R = /* @__PURE__ */ Object.assign({
   inheritAttrs: false
 }, {
   __name: "Divider",
@@ -231,7 +231,7 @@ const _sfc_main$Q = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const _sfc_main$P = {
+const _sfc_main$Q = {
   __name: "ActionCard",
   props: {
     title: {
@@ -246,13 +246,13 @@ const _sfc_main$P = {
   setup(__props) {
     const slots = useSlots();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$R, {
+      return openBlock(), createBlock(_sfc_main$S, {
         title: __props.title,
         "content-class": __props.actionsClass
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default"),
-          unref(slots).danger ? (openBlock(), createBlock(_sfc_main$Q, {
+          unref(slots).danger ? (openBlock(), createBlock(_sfc_main$R, {
             key: 0,
             class: "mt-6 pt-4"
           }, {
@@ -267,8 +267,8 @@ const _sfc_main$P = {
     };
   }
 };
-const _hoisted_1$B = { class: "text-sm text-gray-600" };
-const _sfc_main$O = {
+const _hoisted_1$C = { class: "text-sm text-gray-600" };
+const _sfc_main$P = {
   __name: "ActionMessage",
   props: {
     on: Boolean
@@ -282,7 +282,7 @@ const _sfc_main$O = {
           "leave-to-class": "opacity-0"
         }, {
           default: withCtx(() => [
-            withDirectives(createElementVNode("div", _hoisted_1$B, [
+            withDirectives(createElementVNode("div", _hoisted_1$C, [
               renderSlot(_ctx.$slots, "default")
             ], 512), [
               [vShow, __props.on]
@@ -301,36 +301,36 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$N = {};
-const _hoisted_1$A = { class: "md:col-span-1 flex justify-between" };
-const _hoisted_2$l = { class: "px-4 sm:px-0" };
-const _hoisted_3$f = { class: "text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50" };
-const _hoisted_4$a = { 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 _sfc_main$O = {};
+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$9 = { class: "px-4 sm:px-0" };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$A, [
-    createElementVNode("div", _hoisted_2$l, [
-      createElementVNode("h3", _hoisted_3$f, [
+  return openBlock(), createElementBlock("div", _hoisted_1$B, [
+    createElementVNode("div", _hoisted_2$m, [
+      createElementVNode("h3", _hoisted_3$g, [
         renderSlot(_ctx.$slots, "title")
       ]),
-      createElementVNode("p", _hoisted_4$a, [
+      createElementVNode("p", _hoisted_4$b, [
         renderSlot(_ctx.$slots, "description")
       ])
     ]),
-    createElementVNode("div", _hoisted_5$8, [
+    createElementVNode("div", _hoisted_5$9, [
       renderSlot(_ctx.$slots, "aside")
     ])
   ]);
 }
-const SectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render]]);
-const _hoisted_1$z = { class: "md:grid md:grid-cols-3 md:gap-6" };
-const _hoisted_2$k = { class: "mt-5 md:mt-0 md:col-span-2" };
-const _hoisted_3$e = { class: "rounded-lg border border-neutral-200 bg-white px-4 py-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 sm:p-6" };
-const _sfc_main$M = {
+const SectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render]]);
+const _hoisted_1$A = { class: "md:grid md:grid-cols-3 md:gap-6" };
+const _hoisted_2$l = { class: "mt-5 md:mt-0 md:col-span-2" };
+const _hoisted_3$f = { class: "rounded-lg border border-neutral-200 bg-white px-4 py-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 sm:p-6" };
+const _sfc_main$N = {
   __name: "ActionSection",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$z, [
+      return openBlock(), createElementBlock("div", _hoisted_1$A, [
         createVNode(SectionTitle, null, {
           title: withCtx(() => [
             renderSlot(_ctx.$slots, "title")
@@ -340,8 +340,8 @@ const _sfc_main$M = {
           ]),
           _: 3
         }),
-        createElementVNode("div", _hoisted_2$k, [
-          createElementVNode("div", _hoisted_3$e, [
+        createElementVNode("div", _hoisted_2$l, [
+          createElementVNode("div", _hoisted_3$f, [
             renderSlot(_ctx.$slots, "content")
           ])
         ])
@@ -349,8 +349,8 @@ const _sfc_main$M = {
     };
   }
 };
-const _hoisted_1$y = { class: "sr-only" };
-const _sfc_main$L = {
+const _hoisted_1$z = { class: "sr-only" };
+const _sfc_main$M = {
   __name: "Badge",
   props: {
     type: {
@@ -415,7 +415,7 @@ const _sfc_main$L = {
         createElementVNode("span", {
           class: normalizeClass(["w-2 h-2 rounded-full", colorClasses[__props.color].dot])
         }, null, 2),
-        createElementVNode("span", _hoisted_1$y, [
+        createElementVNode("span", _hoisted_1$z, [
           renderSlot(_ctx.$slots, "default")
         ])
       ], 2)) : (openBlock(), createElementBlock("span", {
@@ -432,8 +432,8 @@ const _sfc_main$L = {
     };
   }
 };
-const _hoisted_1$x = ["type", "disabled"];
-const _sfc_main$K = /* @__PURE__ */ Object.assign({
+const _hoisted_1$y = ["type", "disabled"];
+const _sfc_main$L = /* @__PURE__ */ Object.assign({
   inheritAttrs: false
 }, {
   __name: "Button",
@@ -500,12 +500,12 @@ const _sfc_main$K = /* @__PURE__ */ Object.assign({
         class: buttonClasses.value
       }), [
         renderSlot(_ctx.$slots, "default")
-      ], 16, _hoisted_1$x);
+      ], 16, _hoisted_1$y);
     };
   }
 });
-const _hoisted_1$w = ["value"];
-const _sfc_main$J = {
+const _hoisted_1$x = ["value"];
+const _sfc_main$K = {
   __name: "Checkbox",
   props: {
     checked: {
@@ -535,14 +535,14 @@ const _sfc_main$J = {
         type: "checkbox",
         value: __props.value,
         class: "rounded border-neutral-300 text-neutral-900 shadow-sm focus:ring-neutral-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:focus:ring-neutral-100"
-      }, null, 8, _hoisted_1$w)), [
+      }, null, 8, _hoisted_1$x)), [
         [vModelCheckbox, proxyChecked.value]
       ]);
     };
   }
 };
-const _hoisted_1$v = ["name", "checked", "disabled"];
-const _sfc_main$I = {
+const _hoisted_1$w = ["name", "checked", "disabled"];
+const _sfc_main$J = {
   __name: "CheckboxInput",
   props: {
     modelValue: {
@@ -602,7 +602,7 @@ const _sfc_main$I = {
           onChange,
           onFocus: handleFocus,
           onBlur: handleBlur
-        }, null, 40, _hoisted_1$v),
+        }, null, 40, _hoisted_1$w),
         createElementVNode("span", {
           class: normalizeClass(["inline-flex h-4 w-4 items-center justify-center border text-[10px] font-bold leading-none", [
             isChecked.value ? "border-current bg-white/15 text-current dark:bg-neutral-900/15" : "border-neutral-400 text-transparent dark:border-neutral-500",
@@ -614,21 +614,21 @@ const _sfc_main$I = {
     };
   }
 };
-const _hoisted_1$u = { class: "relative flex items-center" };
-const _hoisted_2$j = {
+const _hoisted_1$v = { class: "relative flex items-center" };
+const _hoisted_2$k = {
   key: 0,
   class: "absolute inset-y-0 left-0 flex items-center pointer-events-none pl-3"
 };
-const _hoisted_3$d = ["type", "value", "disabled"];
-const _hoisted_4$9 = ["aria-label"];
-const _hoisted_5$7 = {
+const _hoisted_3$e = ["type", "value", "disabled"];
+const _hoisted_4$a = ["aria-label"];
+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",
@@ -636,7 +636,7 @@ const _hoisted_6$7 = {
   viewBox: "0 0 24 24"
 };
 const DEFAULT_MAX_LENGTH$1 = 254;
-const _sfc_main$H = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
+const _sfc_main$I = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "TextInput",
   props: {
     modelValue: {
@@ -695,8 +695,8 @@ const _sfc_main$H = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     });
     __expose({ focus: () => input.value?.focus() });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$u, [
-        isPasswordField.value ? (openBlock(), createElementBlock("div", _hoisted_2$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+        isPasswordField.value ? (openBlock(), createElementBlock("div", _hoisted_2$k, [
           createVNode(unref(LockClosedIcon), { class: "h-5 w-5 text-neutral-400 dark:text-neutral-200" })
         ])) : createCommentVNode("", true),
         createElementVNode("input", mergeProps({
@@ -710,7 +710,7 @@ const _sfc_main$H = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value)),
           onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event)),
           onWheel: handleWheel
-        }), null, 16, _hoisted_3$d),
+        }), null, 16, _hoisted_3$e),
         isPasswordField.value ? (openBlock(), createElementBlock("button", {
           key: 1,
           type: "button",
@@ -718,14 +718,14 @@ const _sfc_main$H = /* @__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",
@@ -739,14 +739,14 @@ const _sfc_main$H = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
               d: "M2.458 12C3.732 7.943 7.523 5 12 5s8.268 2.943 9.542 7c-1.274 4.057-5.065 7-9.542 7S3.732 16.057 2.458 12z"
             }, null, -1)
           ])]))
-        ], 8, _hoisted_4$9)) : createCommentVNode("", true)
+        ], 8, _hoisted_4$a)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$t = ["value", "disabled"];
+const _hoisted_1$u = ["value", "disabled"];
 const DEFAULT_MAX_LENGTH = 1e3;
-const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
+const _sfc_main$H = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "TextArea",
   props: {
     modelValue: String,
@@ -816,18 +816,18 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           value: props.modelValue,
           disabled: props.disabled,
           onInput: updateValue
-        }), null, 16, _hoisted_1$t)
+        }), null, 16, _hoisted_1$u)
       ]);
     };
   }
 });
-const _hoisted_1$s = ["onClick"];
-const _hoisted_2$i = {
+const _hoisted_1$t = ["onClick"];
+const _hoisted_2$j = {
   key: 0,
   class: "flex items-center gap-3"
 };
-const _hoisted_3$c = ["checked", "disabled", "onChange"];
-const _sfc_main$F = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
+const _hoisted_3$d = ["checked", "disabled", "onChange"];
+const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "CustomSelect",
   props: {
     modelValue: {
@@ -1185,7 +1185,7 @@ const _sfc_main$F = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                       ]),
                       onClick: withModifiers(($event) => __props.multiple ? toggleMultipleOption(option) : selectOption(option), ["stop"])
                     }, [
-                      __props.multiple ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
+                      __props.multiple ? (openBlock(), createElementBlock("div", _hoisted_2$j, [
                         createElementVNode("input", {
                           type: "checkbox",
                           class: "h-4 w-4 rounded border-neutral-300 text-neutral-900 focus:ring-neutral-900",
@@ -1195,7 +1195,7 @@ const _sfc_main$F = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                           onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                           }, ["stop"])),
                           onChange: withModifiers(($event) => toggleMultipleOption(option), ["stop"])
-                        }, null, 40, _hoisted_3$c),
+                        }, null, 40, _hoisted_3$d),
                         createElementVNode("span", {
                           style: normalizeStyle(darkTextStyle.value)
                         }, toDisplayString(optionText(option)), 5)
@@ -1203,7 +1203,7 @@ const _sfc_main$F = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                         key: 1,
                         style: normalizeStyle(darkTextStyle.value)
                       }, toDisplayString(optionText(option)), 5))
-                    ], 10, _hoisted_1$s);
+                    ], 10, _hoisted_1$t);
                   }), 128))
                 ], 2)
               ], 6)) : createCommentVNode("", true)
@@ -1215,7 +1215,7 @@ const _sfc_main$F = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     };
   }
 });
-const _sfc_main$E = {
+const _sfc_main$F = {
   __name: "SelectInput",
   props: {
     modelValue: {
@@ -1307,7 +1307,7 @@ const _sfc_main$E = {
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$F, mergeProps({
+      return openBlock(), createBlock(_sfc_main$G, mergeProps({
         "model-value": __props.modelValue,
         "model-modifiers": __props.modelModifiers,
         options: __props.options,
@@ -1334,8 +1334,8 @@ const _sfc_main$E = {
     };
   }
 };
-const _hoisted_1$r = ["type", "max", "value", "disabled"];
-const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
+const _hoisted_1$s = ["type", "max", "value", "disabled"];
+const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "DateInput",
   props: {
     modelValue: {
@@ -1415,30 +1415,30 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         disabled: props.disabled,
         onInput: handleDateInput,
         onChange: handleDateInput
-      }), null, 16, _hoisted_1$r);
+      }), null, 16, _hoisted_1$s);
     };
   }
 });
-const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-35dd480a"]]);
-const _hoisted_1$q = { class: "relative" };
-const _hoisted_2$h = {
+const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-35dd480a"]]);
+const _hoisted_1$r = { class: "relative" };
+const _hoisted_2$i = {
   key: 0,
   class: "text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1 block"
 };
-const _hoisted_3$b = ["value", "disabled"];
-const _hoisted_4$8 = { 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 _sfc_main$C = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
+const _hoisted_3$c = ["value", "disabled"];
+const _hoisted_4$9 = { class: "p-4" };
+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: {
     modelValue: {
@@ -1705,8 +1705,8 @@ const _sfc_main$C = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       document.removeEventListener("click", closeCalendar);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
-        __props.label ? (openBlock(), createElementBlock("label", _hoisted_2$h, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+      return openBlock(), createElementBlock("div", _hoisted_1$r, [
+        __props.label ? (openBlock(), createElementBlock("label", _hoisted_2$i, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
         createElementVNode("input", {
           ref_key: "inputRef",
           ref: inputRef,
@@ -1715,7 +1715,7 @@ const _sfc_main$C = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           value: displayText.value,
           disabled: props.disabled,
           onClick: toggleCalendar
-        }, null, 10, _hoisted_3$b),
+        }, null, 10, _hoisted_3$c),
         isOpen.value ? (openBlock(), createElementBlock("div", {
           key: 1,
           ref_key: "calendarRef",
@@ -1724,8 +1724,8 @@ const _sfc_main$C = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           onClick: _cache[0] || (_cache[0] = withModifiers(() => {
           }, ["stop"]))
         }, [
-          createElementVNode("div", _hoisted_4$8, [
-            createElementVNode("div", _hoisted_5$6, [
+          createElementVNode("div", _hoisted_4$9, [
+            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$C = /* @__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$C = /* @__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$C = /* @__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$C = /* @__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,
@@ -1822,19 +1822,19 @@ const _sfc_main$C = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     };
   }
 });
-const DateRangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-60a85ab0"]]);
-const _hoisted_1$p = { class: "relative" };
-const _hoisted_2$g = { class: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" };
-const _hoisted_3$a = ["accept"];
-const _hoisted_4$7 = {
+const DateRangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-60a85ab0"]]);
+const _hoisted_1$q = { class: "relative" };
+const _hoisted_2$h = { class: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" };
+const _hoisted_3$b = ["accept"];
+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 _sfc_main$B = {
+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: {
     currentImageUrl: {
@@ -1868,8 +1868,8 @@ const _sfc_main$B = {
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createElementVNode("div", _hoisted_1$p, [
-          createElementVNode("div", _hoisted_2$g, [
+        createElementVNode("div", _hoisted_1$q, [
+          createElementVNode("div", _hoisted_2$h, [
             createVNode(unref(PhotoIcon), { class: "size-5 text-neutral-400 dark:text-neutral-200" })
           ]),
           createElementVNode("input", mergeProps(__props.attrs, {
@@ -1877,18 +1877,18 @@ const _sfc_main$B = {
             accept: __props.accept,
             class: "block w-full cursor-pointer rounded-lg border border-neutral-200 bg-white py-3 pl-10 pr-4 text-sm text-neutral-700 shadow-sm transition-all duration-200 file:mr-4 file:rounded-md file:border-0 file:bg-neutral-900 file:px-4 file:py-2 file:text-sm file:font-medium file:text-neutral-50 hover:file:bg-neutral-800 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-100 dark:file:bg-neutral-800 dark:file:text-neutral-50 dark:hover:file:bg-neutral-700 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
             onChange: handleFileChange
-          }), null, 16, _hoisted_3$a)
+          }), null, 16, _hoisted_3$b)
         ]),
-        props.currentImageUrl ? (openBlock(), createElementBlock("div", _hoisted_4$7, [
-          createElementVNode("div", _hoisted_5$5, [
+        props.currentImageUrl ? (openBlock(), createElementBlock("div", _hoisted_4$8, [
+          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)
@@ -1896,9 +1896,9 @@ const _sfc_main$B = {
     };
   }
 };
-const _hoisted_1$o = { class: "flex h-12 overflow-hidden rounded-lg border border-neutral-200 bg-white text-sm dark:border-neutral-800 dark:bg-neutral-950" };
-const _hoisted_2$f = ["disabled", "onClick"];
-const _sfc_main$A = {
+const _hoisted_1$p = { class: "flex h-12 overflow-hidden rounded-lg border border-neutral-200 bg-white text-sm dark:border-neutral-800 dark:bg-neutral-950" };
+const _hoisted_2$g = ["disabled", "onClick"];
+const _sfc_main$B = {
   __name: "NotationInput",
   props: {
     modelValue: {
@@ -1924,7 +1924,7 @@ const _sfc_main$A = {
     const isSelected = (option) => String(option) === String(props.modelValue ?? "");
     const selectOption = (option) => emit("update:modelValue", option);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option, idx) => {
           return openBlock(), createElementBlock("button", {
             key: `notation-${idx}-${option}`,
@@ -1937,14 +1937,14 @@ const _sfc_main$A = {
             ]]),
             disabled: __props.disabled,
             onClick: ($event) => selectOption(option)
-          }, toDisplayString(option), 11, _hoisted_2$f);
+          }, toDisplayString(option), 11, _hoisted_2$g);
         }), 128))
       ]);
     };
   }
 };
-const _hoisted_1$n = ["name", "value", "checked", "disabled"];
-const _sfc_main$z = {
+const _hoisted_1$o = ["name", "value", "checked", "disabled"];
+const _sfc_main$A = {
   __name: "RadioInput",
   props: {
     modelValue: {
@@ -1999,18 +1999,18 @@ const _sfc_main$z = {
           onChange,
           onFocus: handleFocus,
           onBlur: handleBlur
-        }, null, 40, _hoisted_1$n),
+        }, null, 40, _hoisted_1$o),
         createElementVNode("span", null, toDisplayString(isChecked.value ? "✓" : "○") + " " + toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 };
-const _hoisted_1$m = ["name", "checked", "disabled"];
-const _hoisted_2$e = {
+const _hoisted_1$n = ["name", "checked", "disabled"];
+const _hoisted_2$f = {
   key: 0,
   class: "text-sm text-neutral-700 dark:text-neutral-200"
 };
-const _sfc_main$y = {
+const _sfc_main$z = {
   __name: "ToggleInput",
   props: {
     modelValue: {
@@ -2073,7 +2073,7 @@ const _sfc_main$y = {
           onChange,
           onFocus: handleFocus,
           onBlur: handleBlur
-        }, null, 40, _hoisted_1$m),
+        }, null, 40, _hoisted_1$n),
         createElementVNode("span", {
           "aria-hidden": "true",
           class: normalizeClass(["relative inline-flex h-6 w-11 items-center rounded-full border transition-colors duration-200", [
@@ -2084,13 +2084,13 @@ const _sfc_main$y = {
             class: normalizeClass(["inline-block size-4 rounded-full bg-white shadow-sm transition-transform duration-200 dark:bg-neutral-950", [isChecked.value ? "translate-x-6" : "translate-x-1"]])
           }, null, 2)
         ], 2),
-        __props.label ? (openBlock(), createElementBlock("span", _hoisted_2$e, toDisplayString(__props.label), 1)) : createCommentVNode("", true)
+        __props.label ? (openBlock(), createElementBlock("span", _hoisted_2$f, toDisplayString(__props.label), 1)) : createCommentVNode("", true)
       ], 2);
     };
   }
 };
-const _hoisted_1$l = { class: "flex flex-wrap gap-3" };
-const _sfc_main$x = {
+const _hoisted_1$m = { class: "flex flex-wrap gap-3" };
+const _sfc_main$y = {
   __name: "RadioMultipleInput",
   props: {
     modelValue: {
@@ -2119,7 +2119,7 @@ const _sfc_main$x = {
     });
     const selectOption = (option) => emit("update:modelValue", option);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
           return openBlock(), createBlock(_sfc_main$v, {
             key: `radio-${__props.name ?? "group"}-${option}`,
@@ -2136,11 +2136,11 @@ const _sfc_main$x = {
     };
   }
 };
-const _hoisted_1$k = {
+const _hoisted_1$l = {
   key: 0,
   class: "min-h-[12rem] w-full rounded-lg border border-slate-300 bg-slate-50"
 };
-const _sfc_main$w = {
+const _sfc_main$x = {
   __name: "TinyEditor",
   props: {
     modelValue: {
@@ -2247,7 +2247,7 @@ const _sfc_main$w = {
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", { key: editorKey.value }, [
-        !isEditorReady.value ? (openBlock(), createElementBlock("div", _hoisted_1$k)) : (openBlock(), createBlock(unref(Editor), {
+        !isEditorReady.value ? (openBlock(), createElementBlock("div", _hoisted_1$l)) : (openBlock(), createBlock(unref(Editor), {
           key: 1,
           "initial-value": content.value,
           "license-key": __props.licenseKey,
@@ -2261,13 +2261,757 @@ const _sfc_main$w = {
     };
   }
 };
+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$9 = {
-  key: 17,
+  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";
@@ -2445,6 +3189,14 @@ const _sfc_main$v = /* @__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$v = /* @__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$v = /* @__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,6 +3382,16 @@ const _sfc_main$v = /* @__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", {
@@ -2638,53 +3400,56 @@ const _sfc_main$v = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           class: "text-base font-semibold text-gray-900 dark:text-gray-50 mb-1 block"
         }, 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$G, mergeProps({ key: 2 }, textAreaBindings.value, {
+        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$w, mergeProps({ key: 3 }, tinyEditorBindings.value, {
+        }), 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$E, 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$H, 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$B, 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$I, 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$z, 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$y, 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$A, 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$u, 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$x, 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,
@@ -3395,7 +4160,7 @@ const _sfc_main$k = {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$9, [
         createElementVNode("div", _hoisted_2$7, [
-          createVNode(_sfc_main$Q)
+          createVNode(_sfc_main$R)
         ])
       ]);
     };
@@ -3921,7 +4686,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { state, toggleSidebar } = useSidebar();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$K, {
+      return openBlock(), createBlock(_sfc_main$L, {
         "data-sidebar": "trigger",
         "data-slot": "sidebar-trigger",
         variant: "ghost",
@@ -4172,7 +4937,7 @@ const _sfc_main$4 = {
           ]),
           __props.showDeletedToggle || __props.count !== null || _ctx.$slots.controls ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
             __props.showDeletedToggle ? (openBlock(), createElementBlock("div", _hoisted_8$2, [
-              createVNode(_sfc_main$y, {
+              createVNode(_sfc_main$z, {
                 modelValue: showDeletedModel.value,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showDeletedModel.value = $event),
                 label: __props.showDeletedLabel
@@ -5023,7 +5788,7 @@ const _sfc_main$2 = {
                         key: 0,
                         ref_for: true
                       }, getSlotBindings(item, null, index))) : createCommentVNode("", true),
-                      __props.rowEditing && isEditingRow(item, index) ? (openBlock(), createBlock(_sfc_main$K, {
+                      __props.rowEditing && isEditingRow(item, index) ? (openBlock(), createBlock(_sfc_main$L, {
                         key: 1,
                         type: "button",
                         variant: "outline",
@@ -5036,7 +5801,7 @@ const _sfc_main$2 = {
                           createVNode(unref(CheckIcon), { class: "size-4" })
                         ]),
                         _: 1
-                      }, 8, ["title", "aria-label", "onClick"])) : __props.rowEditing ? (openBlock(), createBlock(_sfc_main$K, {
+                      }, 8, ["title", "aria-label", "onClick"])) : __props.rowEditing ? (openBlock(), createBlock(_sfc_main$L, {
                         key: 2,
                         type: "button",
                         variant: "secondary",
@@ -5209,37 +5974,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ActionCard: _sfc_main$P,
-  ActionMessage: _sfc_main$O,
-  ActionSection: _sfc_main$M,
-  Badge: _sfc_main$L,
-  Button: _sfc_main$K,
-  Card: _sfc_main$R,
-  CardTabs: _sfc_main$S,
-  Checkbox: _sfc_main$J,
-  CheckboxInput: _sfc_main$I,
+  ActionCard: _sfc_main$Q,
+  ActionMessage: _sfc_main$P,
+  ActionSection: _sfc_main$N,
+  Badge: _sfc_main$M,
+  Button: _sfc_main$L,
+  Card: _sfc_main$S,
+  CardTabs: _sfc_main$T,
+  Checkbox: _sfc_main$K,
+  CheckboxInput: _sfc_main$J,
   CheckboxMultipleInput: _sfc_main$u,
+  ColorPicker,
   ConfirmationModal: _sfc_main$s,
-  CustomSelect: _sfc_main$F,
+  CustomSelect: _sfc_main$G,
   DateInput,
   DateRangeInput,
   DialogModal: _sfc_main$r,
-  Divider: _sfc_main$Q,
+  Divider: _sfc_main$R,
   Dropdown: _sfc_main$q,
   DropdownLink: _sfc_main$p,
   FormSection: _sfc_main$o,
-  ImageInput: _sfc_main$B,
+  ImageInput: _sfc_main$C,
   InputError: _sfc_main$n,
   InputGroup: _sfc_main$v,
   InputLabel: _sfc_main$m,
   LinkButton: _sfc_main$l,
   Modal: _sfc_main$t,
-  NotationInput: _sfc_main$A,
-  RadioInput: _sfc_main$z,
-  RadioMultipleInput: _sfc_main$x,
+  NotationInput: _sfc_main$B,
+  RadioInput: _sfc_main$A,
+  RadioMultipleInput: _sfc_main$y,
   SectionBorder: _sfc_main$k,
   SectionTitle,
-  SelectInput: _sfc_main$E,
+  SelectInput: _sfc_main$F,
   Sidebar: _sfc_main$j,
   SidebarContent: _sfc_main$i,
   SidebarFooter: _sfc_main$h,
@@ -5257,13 +6023,13 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   TableList: _sfc_main$3,
   TableListForm: _sfc_main$2,
   TableSearch: _sfc_main$4,
-  TextArea: _sfc_main$G,
-  TextInput: _sfc_main$H,
+  TextArea: _sfc_main$H,
+  TextInput: _sfc_main$I,
   ThSortable: _sfc_main$5,
-  TinyEditor: _sfc_main$w,
+  TinyEditor: _sfc_main$x,
   Toast: _sfc_main$1,
   ToastContainer: _sfc_main,
-  ToggleInput: _sfc_main$y,
+  ToggleInput: _sfc_main$z,
   useSidebar
 }, Symbol.toStringTag, { value: "Module" }));
 const plugin = {
@@ -5274,62 +6040,63 @@ const plugin = {
   }
 };
 export {
-  _sfc_main$1 as $,
-  _sfc_main$x as A,
+  _sfc_main$x as $,
+  _sfc_main$y as A,
   _sfc_main$k as B,
-  _sfc_main$E as C,
+  ColorPicker as C,
   DateInput as D,
-  _sfc_main$j as E,
-  _sfc_main$i as F,
-  _sfc_main$h as G,
-  _sfc_main$g as H,
-  _sfc_main$f as I,
-  _sfc_main$e as J,
-  _sfc_main$d as K,
-  _sfc_main$c as L,
-  _sfc_main$b as M,
-  _sfc_main$a as N,
-  _sfc_main$9 as O,
-  _sfc_main$8 as P,
-  _sfc_main$7 as Q,
-  _sfc_main$6 as R,
+  _sfc_main$F as E,
+  _sfc_main$j as F,
+  _sfc_main$i as G,
+  _sfc_main$h as H,
+  _sfc_main$g as I,
+  _sfc_main$f as J,
+  _sfc_main$e as K,
+  _sfc_main$d as L,
+  _sfc_main$c as M,
+  _sfc_main$b as N,
+  _sfc_main$a as O,
+  _sfc_main$9 as P,
+  _sfc_main$8 as Q,
+  _sfc_main$7 as R,
   SectionTitle as S,
-  _sfc_main$3 as T,
-  _sfc_main$2 as U,
-  _sfc_main$4 as V,
-  _sfc_main$G as W,
+  _sfc_main$6 as T,
+  _sfc_main$3 as U,
+  _sfc_main$2 as V,
+  _sfc_main$4 as W,
   _sfc_main$H as X,
-  _sfc_main$5 as Y,
-  _sfc_main$w as Z,
-  _sfc_main$P as _,
-  _sfc_main$O as a,
-  _sfc_main as a0,
-  _sfc_main$y as a1,
-  useSidebar as a2,
-  _sfc_main$M as b,
-  _sfc_main$L as c,
-  _sfc_main$K as d,
-  _sfc_main$R as e,
-  _sfc_main$S as f,
-  _sfc_main$J as g,
-  _sfc_main$I as h,
+  _sfc_main$I as Y,
+  _sfc_main$5 as Z,
+  _sfc_main$Q as _,
+  _sfc_main$P as a,
+  _sfc_main$1 as a0,
+  _sfc_main as a1,
+  _sfc_main$z as a2,
+  useSidebar as a3,
+  _sfc_main$N as b,
+  _sfc_main$M as c,
+  _sfc_main$L as d,
+  _sfc_main$S as e,
+  _sfc_main$T as f,
+  _sfc_main$K as g,
+  _sfc_main$J as h,
   _sfc_main$u as i,
   _sfc_main$s as j,
-  _sfc_main$F as k,
+  _sfc_main$G as k,
   DateRangeInput as l,
   _sfc_main$r as m,
-  _sfc_main$Q as n,
+  _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$B as s,
+  _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$A as y,
-  _sfc_main$z as z
+  _sfc_main$B as y,
+  _sfc_main$A as z
 };
-//# sourceMappingURL=plugin-BBFChsPh.js.map
+//# sourceMappingURL=plugin-DYTVm2W1.js.map