vlite3 0.2.5 → 0.2.7

package/components/Button.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as v, useSlots as x, computed as s, withDirectives as y, openBlock as r, createElementBlock as w, normalizeClass as i, createBlock as a, createCommentVNode as u, renderSlot as p, createTextVNode as k, toDisplayString as z, unref as B } from "vue";
-import c from "./Icon.vue.js";
+import { defineComponent as v, useSlots as x, computed as c, withDirectives as w, openBlock as i, createElementBlock as y, normalizeClass as o, createBlock as l, createCommentVNode as u, renderSlot as p, createTextVNode as z, toDisplayString as k, unref as B } from "vue";
+import d from "./Icon.vue.js";
 import { vRipple as C } from "../directives/vRipple.js";
-const R = ["type", "disabled"], D = /* @__PURE__ */ v({
+const S = ["type", "disabled"], D = /* @__PURE__ */ v({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -16,8 +16,8 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
     rounded: { default: "md" }
   },
   setup(e) {
-    const t = e, g = x(), l = s(() => t.icon && !t.text && !g.default), h = s(() => {
-      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", d = {
+    const t = e, g = x(), s = c(() => t.icon && !t.text && !g.default), h = c(() => {
+      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", r = {
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/20",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -39,17 +39,17 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
         link: "text-primary underline-offset-4 hover:underline"
       }, f = {
         xs: "h-6.5 px-2",
-        sm: "h-8 px-3",
+        sm: "h-7.5 px-3",
         md: "h-9 px-4 py-2",
         lg: "h-10 px-6",
         xl: "h-12 px-10"
-      }, b = {
-        xs: "h-6.5 w-6.5 min-h-6.5 min-w-6.5",
-        sm: "h-8 w-8 min-h-9 min-w-9",
-        md: "h-9 w-9 min-h-9 min-w-9",
-        lg: "h-10 w-10 min-h-11 min-w-11",
-        xl: "h-12 w-12 min-h-12 min-w-12"
       }, m = {
+        xs: "h-6.5 w-6.5 min-h-6.5 min-w-6.5",
+        sm: "h-7 w-7 min-h-7 min-w-7",
+        md: "h-7.5 w-7.5 min-h-7.5 min-w-7.5",
+        lg: "h-8 w-8 min-h-8 min-w-8",
+        xl: "h-8.5 w-8.5 min-h-8.5 min-w-8.5"
+      }, b = {
         none: "rounded-none",
         sm: "rounded-sm",
         md: "rounded",
@@ -60,44 +60,53 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
       };
       return [
         n,
-        d[t.variant],
-        m[t.rounded],
-        l.value ? b[t.size] : f[t.size],
+        r[t.variant],
+        b[t.rounded],
+        s.value ? m[t.size] : f[t.size],
         t.class
       ].join(" ");
-    }), o = s(() => ({
-      xs: "w-3 h-3",
-      sm: "w-4 h-4",
-      md: "w-4 h-4",
-      lg: "w-4 h-4",
-      xl: "w-4 h-4"
-    })[t.size]);
-    return (n, d) => y((r(), w("button", {
+    }), a = c(() => {
+      const n = {
+        xs: "w-3 h-3",
+        sm: "w-4 h-4",
+        md: "w-4 h-4",
+        lg: "w-4 h-4",
+        xl: "w-4 h-4"
+      }, r = {
+        xs: "w-3 h-3",
+        sm: "w-3.5 h-3.5",
+        md: "w-3.5 h-3.5",
+        lg: "w-4 h-4",
+        xl: "w-4 h-4"
+      };
+      return s.value ? r[t.size] : n[t.size];
+    });
+    return (n, r) => w((i(), y("button", {
       type: e.type,
-      class: i(h.value),
+      class: o(h.value),
       disabled: e.disabled || e.loading
     }, [
-      e.loading ? (r(), a(c, {
+      e.loading ? (i(), l(d, {
         key: 0,
         icon: "lucide:loader-2",
-        class: i(["animate-spin", { [o.value]: !0 }])
-      }, null, 8, ["class"])) : e.icon ? (r(), a(c, {
+        class: o(["animate-spin", { [a.value]: !0 }])
+      }, null, 8, ["class"])) : e.icon ? (i(), l(d, {
         key: 1,
         icon: e.icon,
-        class: i({
-          "mx-auto": l.value,
-          [o.value]: !0
+        class: o({
+          "mx-auto": s.value,
+          [a.value]: !0
         })
       }, null, 8, ["icon", "class"])) : u("", !0),
       p(n.$slots, "default", {}, () => [
-        k(z(e.text), 1)
+        z(k(e.text), 1)
       ]),
-      e.iconRight && !e.loading ? (r(), a(c, {
+      e.iconRight && !e.loading ? (i(), l(d, {
         key: 2,
         icon: e.iconRight,
-        class: i([o.value, "h-4 w-4"])
+        class: o([a.value, "h-4 w-4"])
       }, null, 8, ["icon", "class"])) : u("", !0)
-    ], 10, R)), [
+    ], 10, S)), [
       [B(C)]
     ]);
   }

package/components/Carousel/Carousel.vue.d.ts

@@ -27,7 +27,6 @@ declare function __VLS_template(): {
                 wheelOptions: import('vue-carousel-lite/types').WheelOptions;
                 bufferSize: number;
                 maxDomElements: number;
-                updateKey: string | number;
             }> & Omit<{
                 readonly data: any[];
                 readonly direction: "horizontal" | "vertical";
@@ -51,10 +50,9 @@ declare function __VLS_template(): {
                 readonly autoFocus: boolean;
                 readonly wheelOptions: import('vue-carousel-lite/types').WheelOptions;
                 readonly paginationPosition?: import('vue-carousel-lite').PaginationPosition | import('vue-carousel-lite').PaginationPosition[];
-                readonly updateKey?: string | number;
                 readonly paginationBackground?: boolean;
-                readonly "onSlide-change"?: (index: number) => any;
-            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "updateKey" | "autoFocus" | "wheelOptions">;
+                readonly "onSlide-change"?: ((index: number) => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "autoFocus" | "wheelOptions">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -149,10 +147,6 @@ declare function __VLS_template(): {
                     type: import('vue').PropType<number>;
                     default: number;
                 };
-                updateKey: {
-                    type: import('vue').PropType<string | number>;
-                    default: any;
-                };
                 autoFocus: {
                     type: import('vue').PropType<boolean>;
                     default: boolean;
@@ -167,14 +161,12 @@ declare function __VLS_template(): {
                         velocityThreshold: number;
                         pageScrollThreshold: number;
                         debounceTime: number;
-                        scrollByPage: boolean;
-                        lockDuringTransition: boolean;
                         preventDefault: boolean;
                         stopPropagation: boolean;
                     };
                 };
             }>> & Readonly<{
-                "onSlide-change"?: (index: number) => any;
+                "onSlide-change"?: ((index: number) => any) | undefined;
             }>, {
                 goToSlide: (index: number, smooth?: boolean) => void;
                 goNext: (smooth?: boolean) => void;
@@ -212,7 +204,6 @@ declare function __VLS_template(): {
                 wheelOptions: import('vue-carousel-lite/types').WheelOptions;
                 bufferSize: number;
                 maxDomElements: number;
-                updateKey: string | number;
             }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
                 created?: (() => void) | (() => void)[];
@@ -254,7 +245,6 @@ declare function __VLS_template(): {
             wheelOptions: import('vue-carousel-lite/types').WheelOptions;
             bufferSize: number;
             maxDomElements: number;
-            updateKey: string | number;
         }> & Omit<Readonly<import('vue').ExtractPropTypes<{
             data: {
                 type: import('vue').PropType<any[]>;
@@ -335,10 +325,6 @@ declare function __VLS_template(): {
                 type: import('vue').PropType<number>;
                 default: number;
             };
-            updateKey: {
-                type: import('vue').PropType<string | number>;
-                default: any;
-            };
             autoFocus: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
@@ -353,15 +339,13 @@ declare function __VLS_template(): {
                     velocityThreshold: number;
                     pageScrollThreshold: number;
                     debounceTime: number;
-                    scrollByPage: boolean;
-                    lockDuringTransition: boolean;
                     preventDefault: boolean;
                     stopPropagation: boolean;
                 };
             };
         }>> & Readonly<{
-            "onSlide-change"?: (index: number) => any;
-        }>, "focus" | "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "updateKey" | "goToSlide" | "goNext" | "goPrev" | "autoFocus" | "wheelOptions" | "state" | "canGoNext" | "canGoPrev"> & import('vue').ShallowUnwrapRef<{
+            "onSlide-change"?: ((index: number) => any) | undefined;
+        }>, "focus" | "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "goToSlide" | "goNext" | "goPrev" | "autoFocus" | "wheelOptions" | "state" | "canGoNext" | "canGoPrev"> & import('vue').ShallowUnwrapRef<{
             goToSlide: (index: number, smooth?: boolean) => void;
             goNext: (smooth?: boolean) => void;
             goPrev: (smooth?: boolean) => void;
@@ -462,7 +446,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             wheelOptions: import('vue-carousel-lite/types').WheelOptions;
             bufferSize: number;
             maxDomElements: number;
-            updateKey: string | number;
         }> & Omit<{
             readonly data: any[];
             readonly direction: "horizontal" | "vertical";
@@ -486,10 +469,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             readonly autoFocus: boolean;
             readonly wheelOptions: import('vue-carousel-lite/types').WheelOptions;
             readonly paginationPosition?: import('vue-carousel-lite').PaginationPosition | import('vue-carousel-lite').PaginationPosition[];
-            readonly updateKey?: string | number;
             readonly paginationBackground?: boolean;
-            readonly "onSlide-change"?: (index: number) => any;
-        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "updateKey" | "autoFocus" | "wheelOptions">;
+            readonly "onSlide-change"?: ((index: number) => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "autoFocus" | "wheelOptions">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -584,10 +566,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
                 type: import('vue').PropType<number>;
                 default: number;
             };
-            updateKey: {
-                type: import('vue').PropType<string | number>;
-                default: any;
-            };
             autoFocus: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
@@ -602,14 +580,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
                     velocityThreshold: number;
                     pageScrollThreshold: number;
                     debounceTime: number;
-                    scrollByPage: boolean;
-                    lockDuringTransition: boolean;
                     preventDefault: boolean;
                     stopPropagation: boolean;
                 };
             };
         }>> & Readonly<{
-            "onSlide-change"?: (index: number) => any;
+            "onSlide-change"?: ((index: number) => any) | undefined;
         }>, {
             goToSlide: (index: number, smooth?: boolean) => void;
             goNext: (smooth?: boolean) => void;
@@ -647,7 +623,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             wheelOptions: import('vue-carousel-lite/types').WheelOptions;
             bufferSize: number;
             maxDomElements: number;
-            updateKey: string | number;
         }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -689,7 +664,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         wheelOptions: import('vue-carousel-lite/types').WheelOptions;
         bufferSize: number;
         maxDomElements: number;
-        updateKey: string | number;
     }> & Omit<Readonly<import('vue').ExtractPropTypes<{
         data: {
             type: import('vue').PropType<any[]>;
@@ -770,10 +744,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             type: import('vue').PropType<number>;
             default: number;
         };
-        updateKey: {
-            type: import('vue').PropType<string | number>;
-            default: any;
-        };
         autoFocus: {
             type: import('vue').PropType<boolean>;
             default: boolean;
@@ -788,15 +758,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
                 velocityThreshold: number;
                 pageScrollThreshold: number;
                 debounceTime: number;
-                scrollByPage: boolean;
-                lockDuringTransition: boolean;
                 preventDefault: boolean;
                 stopPropagation: boolean;
             };
         };
     }>> & Readonly<{
-        "onSlide-change"?: (index: number) => any;
-    }>, "focus" | "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "updateKey" | "goToSlide" | "goNext" | "goPrev" | "autoFocus" | "wheelOptions" | "state" | "canGoNext" | "canGoPrev"> & import('vue').ShallowUnwrapRef<{
+        "onSlide-change"?: ((index: number) => any) | undefined;
+    }>, "focus" | "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "goToSlide" | "goNext" | "goPrev" | "autoFocus" | "wheelOptions" | "state" | "canGoNext" | "canGoPrev"> & import('vue').ShallowUnwrapRef<{
         goToSlide: (index: number, smooth?: boolean) => void;
         goNext: (smooth?: boolean) => void;
         goPrev: (smooth?: boolean) => void;

package/components/ChoiceBox/ChoiceBox.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, computed as y, openBlock as t, createElementBlock as i, toDisplayString as o, createCommentVNode as a, createElementVNode as c, normalizeClass as u, Fragment as V, renderList as _, withKeys as C, withModifiers as B, createVNode as A, createBlock as x } from "vue";
+import { defineComponent as w, computed as x, openBlock as t, createElementBlock as i, toDisplayString as o, createCommentVNode as a, createElementVNode as c, normalizeClass as u, Fragment as V, renderList as _, withKeys as C, withModifiers as B, createVNode as A, createBlock as y } from "vue";
 import m from "../Icon.vue.js";
 const K = { class: "w-full" }, N = {
   key: 0,
@@ -14,7 +14,7 @@ const K = { class: "w-full" }, N = {
   class: "shrink-0 pt-0.5"
 }, q = { class: "flex flex-col" }, z = { class: "flex items-center gap-2" }, D = {
   key: 0,
-  class: "mt-1 text-sm text-muted-foreground leading-relaxed"
+  class: "mt-1 -text-fs-3 text-muted leading-relaxed"
 }, F = {
   key: 0,
   class: "absolute top-4 right-4 text-primary"
@@ -31,18 +31,18 @@ const K = { class: "w-full" }, N = {
     gap: { default: 4 }
   },
   emits: ["update:modelValue", "change"],
-  setup(r, { emit: h }) {
-    const s = r, g = h, n = (l) => Array.isArray(s.modelValue) ? s.modelValue.includes(l) : s.modelValue === l, f = (l) => {
-      if (s.disabled || s.options.find((d) => d.id === l)?.disabled) return;
+  setup(s, { emit: h }) {
+    const r = s, g = h, n = (l) => Array.isArray(r.modelValue) ? r.modelValue.includes(l) : r.modelValue === l, f = (l) => {
+      if (r.disabled || r.options.find((d) => d.id === l)?.disabled) return;
       let e;
-      if (s.multiple) {
-        const d = Array.isArray(s.modelValue) ? [...s.modelValue] : [], p = d.indexOf(l);
+      if (r.multiple) {
+        const d = Array.isArray(r.modelValue) ? [...r.modelValue] : [], p = d.indexOf(l);
         p === -1 ? d.push(l) : d.splice(p, 1), e = d;
       } else
         e = l;
       g("update:modelValue", e), g("change", e);
-    }, b = y(() => {
-      switch (s.grid) {
+    }, b = x(() => {
+      switch (r.grid) {
         case 1:
           return "grid-cols-1";
         case 2:
@@ -54,8 +54,8 @@ const K = { class: "w-full" }, N = {
         default:
           return "grid-cols-1";
       }
-    }), v = y(() => {
-      switch (s.gap) {
+    }), v = x(() => {
+      switch (r.gap) {
         case 2:
           return "gap-2";
         case 3:
@@ -71,18 +71,18 @@ const K = { class: "w-full" }, N = {
       }
     });
     return (l, k) => (t(), i("div", K, [
-      r.title || r.description ? (t(), i("div", N, [
-        r.title ? (t(), i("h3", $, o(r.title), 1)) : a("", !0),
-        r.description ? (t(), i("p", E, o(r.description), 1)) : a("", !0)
+      s.title || s.description ? (t(), i("div", N, [
+        s.title ? (t(), i("h3", $, o(s.title), 1)) : a("", !0),
+        s.description ? (t(), i("p", E, o(s.description), 1)) : a("", !0)
       ])) : a("", !0),
       c("div", {
         class: u(["grid", [b.value, v.value]])
       }, [
-        (t(!0), i(V, null, _(r.options, (e) => (t(), i("div", {
+        (t(!0), i(V, null, _(s.options, (e) => (t(), i("div", {
           key: e.id,
           class: u(["relative flex cursor-pointer rounded-xl border border-border p-4 transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", [
             n(e.id) ? "border-primary bg-accent" : "bg-card hover:border-primary/50 hover:bg-accent",
-            r.disabled || e.disabled ? "opacity-50 cursor-not-allowed grayscale" : ""
+            s.disabled || e.disabled ? "opacity-50 cursor-not-allowed grayscale" : ""
           ]]),
           onClick: (d) => f(e.id),
           tabindex: "0",
@@ -105,7 +105,7 @@ const K = { class: "w-full" }, N = {
             c("div", q, [
               c("div", z, [
                 c("span", {
-                  class: u(["font-semibold text-foreground", {
+                  class: u(["font-semibold text-foreground text-fs-1", {
                     "text-primary": n(e.id)
                   }])
                 }, o(e.title), 3),
@@ -121,11 +121,11 @@ const K = { class: "w-full" }, N = {
             ])
           ]),
           n(e.id) ? (t(), i("div", F, [
-            r.multiple ? (t(), x(m, {
+            s.multiple ? (t(), y(m, {
               key: 0,
               icon: "lucide:check-square",
               class: "h-5 w-5"
-            })) : (t(), x(m, {
+            })) : (t(), y(m, {
               key: 1,
               icon: "lucide:check-circle-2",
               class: "h-5 w-5"

package/components/ColorPicker/ColorIro.vue.d.ts

@@ -3,7 +3,18 @@ type __VLS_Props = {
     showHeader?: boolean;
     size?: 'sm' | 'md' | 'lg';
 };
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        bottom?(_: {}): any;
+    };
+    refs: {
+        pickerRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => any;
     "update:color": (color: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
@@ -15,4 +26,10 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     pickerRef: HTMLDivElement;
 }, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/ColorPicker/ColorIro.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as B, defineAsyncComponent as E, ref as h, computed as C, watch as u, onMounted as H, onUnmounted as _, openBlock as i, createElementBlock as g, createVNode as P, unref as c, createBlock as x, createCommentVNode as d, createElementVNode as T, normalizeClass as N, nextTick as R } from "vue";
-import n from "@jaames/iro";
-import { useEyeDropper as V } from "@vueuse/core";
-const D = { class: "space-y-3" }, $ = {
+import { defineComponent as H, defineAsyncComponent as B, ref as g, computed as E, watch as p, onMounted as T, onUnmounted as C, openBlock as a, createElementBlock as x, createVNode as P, unref as c, createBlock as b, createCommentVNode as d, createElementVNode as M, normalizeStyle as N, renderSlot as R, nextTick as V } from "vue";
+import i from "@jaames/iro";
+import { useEyeDropper as D } from "@vueuse/core";
+const L = { class: "space-y-3 w-max" }, _ = {
   key: 0,
   class: "flex gap-2 mb-2.5 -text-fs-3 pr-0.5"
-}, M = /* @__PURE__ */ B({
+}, I = /* @__PURE__ */ H({
   __name: "ColorIro",
   props: {
     color: {},
@@ -12,9 +12,9 @@ const D = { class: "space-y-3" }, $ = {
     size: { default: "md" }
   },
   emits: ["update:color", "close"],
-  setup(l, { emit: b }) {
-    const a = E(() => import("../Button.vue2.js")), t = l, s = b, p = h(), e = h(null), { isSupported: m, open: z, sRGBHex: S } = V(), f = C(() => {
-      switch (t.size) {
+  setup(l, { emit: S }) {
+    const s = B(() => import("../Button.vue2.js")), n = l, u = S, r = g(), e = g(null), { isSupported: m, open: z, sRGBHex: w } = D(), f = E(() => {
+      switch (n.size) {
         case "sm":
           return 140;
         case "lg":
@@ -22,121 +22,119 @@ const D = { class: "space-y-3" }, $ = {
         default:
           return 162;
       }
-    }), w = {
+    }), v = {
       sm: 120,
       md: 140,
       lg: 150
-    }, v = async () => {
-      if (!(!p.value || e.value)) {
-        await R();
+    }, y = async () => {
+      if (!(!r.value || e.value)) {
+        await V();
         try {
-          e.value && (e.value.off("color:change"), e.value = null), e.value = n.ColorPicker(p.value, {
+          e.value && (e.value.off("color:change"), e.value = null), r.value && (r.value.innerHTML = ""), e.value = i.ColorPicker(r.value, {
             width: f.value,
-            color: t.color,
+            color: n.color,
             margin: 9,
-            boxHeight: w[t?.size],
-            // Auto-scale or keep ratio? default is usually width.
-            // Let's rely on default square-ish box unless specified.
-            // But for small size, maybe we want to keep it compact.
-            // iro defaults boxHeight to width if not specified.
+            boxHeight: v[n.size],
             sliderSize: 14,
             layout: [
               {
-                component: n.ui.Box
+                component: i.ui.Box
               },
               {
-                component: n.ui.Slider,
+                component: i.ui.Slider,
                 options: {
                   sliderType: "hue"
                 }
               },
               {
-                component: n.ui.Slider,
+                component: i.ui.Slider,
                 options: {
                   sliderType: "saturation"
                 }
               },
               {
-                component: n.ui.Slider,
+                component: i.ui.Slider,
                 options: {
                   sliderType: "value"
                 }
               }
             ]
           }), e.value.on("color:change", (o) => {
-            s("update:color", o.hexString);
+            u("update:color", o.hexString);
           });
         } catch (o) {
           console.error("Failed to initialize color picker:", o);
         }
       }
-    }, k = () => {
-      e.value && (e.value.off("color:change"), e.value = null);
+    }, h = () => {
+      e.value && (e.value.off("color:change"), e.value = null), r.value && (r.value.innerHTML = "");
     };
-    u(
-      () => t.color,
+    p(
+      () => n.color,
       (o) => {
         if (e.value && e.value.color.hexString !== o)
           try {
             e.value.color.hexString = o;
-          } catch (r) {
-            console.error("Error updating color:", r);
+          } catch (t) {
+            console.error("Error updating color:", t);
           }
       }
-    ), u(
-      () => t.size,
+    ), p(
+      () => n.size,
       () => {
-        k(), v();
+        h(), y();
       }
-    ), u(S, (o) => {
-      if (o && (s("update:color", o), e.value))
+    ), p(w, (o) => {
+      if (o && (u("update:color", o), e.value))
         try {
           e.value.color.hexString = o;
-        } catch (r) {
-          console.error("Error updating color from eyedropper:", r);
+        } catch (t) {
+          console.error("Error updating color from eyedropper:", t);
         }
     });
-    const y = async () => {
+    const k = async () => {
       try {
         await z();
       } catch (o) {
         console.error("Error opening eyedropper:", o);
       }
     };
-    return H(() => {
-      v();
-    }), _(() => {
-      k();
-    }), (o, r) => (i(), g("div", D, [
-      l.showHeader ? (i(), g("div", $, [
-        P(c(a), {
+    return T(() => {
+      y();
+    }), C(() => {
+      h();
+    }), (o, t) => (a(), x("div", L, [
+      l.showHeader ? (a(), x("div", _, [
+        P(c(s), {
           icon: "typcn:arrow-back",
-          onClick: r[0] || (r[0] = (A) => s("close")),
+          onClick: t[0] || (t[0] = ($) => u("close")),
           class: "flex-1 px-2 py-1 bg-background hover:bg-accent rounded text-xs border border-border transition-colors"
         }),
-        c(m) ? (i(), x(c(a), {
+        c(m) ? (a(), b(c(s), {
           key: 0,
-          onClick: y,
+          onClick: k,
           icon: "pepicons-pop:color-picker",
           class: "flex-1 px-2 py-1 bg-background hover:bg-accent rounded text-xs border border-border transition-colors"
         })) : d("", !0)
       ])) : d("", !0),
-      T("div", {
+      M("div", {
         ref_key: "pickerRef",
-        ref: p,
-        class: N(`w-[${f.value}px]`)
-      }, null, 2),
-      c(m) && !l.showHeader ? (i(), x(c(a), {
-        key: 1,
-        onClick: y,
-        icon: "pepicons-pop:color-picker",
-        variant: "outline",
-        size: "xs",
-        class: "w-full"
-      })) : d("", !0)
+        ref: r,
+        style: N({ width: f.value + "px", minHeight: v[l.size] + "px" })
+      }, null, 4),
+      R(o.$slots, "bottom", {}, () => [
+        c(m) && !l.showHeader ? (a(), b(c(s), {
+          key: 0,
+          onClick: k,
+          icon: "pepicons-pop:color-picker",
+          variant: "outline",
+          size: "sm",
+          class: "w-full"
+        })) : d("", !0)
+      ])
     ]));
   }
 });
 export {
-  M as default
+  I as default
 };