@indielayer/ui 1.3.0 → 1.4.0

package/lib/components/select/Select.vue.js

@@ -1,43 +1,41 @@
-import { defineComponent as fe, ref as A, computed as I, watch as N, nextTick as X, unref as u, openBlock as a, createBlock as c, mergeProps as x, toHandlers as H, withCtx as b, createElementVNode as S, createElementBlock as o, normalizeClass as R, Fragment as p, renderList as E, createTextVNode as z, toDisplayString as m, createVNode as K, withDirectives as ve, vModelSelect as pe, renderSlot as ce, createCommentVNode as me } from "vue";
-import { useEventListener as ye } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { defineComponent as ve, ref as A, computed as I, watch as O, nextTick as U, unref as s, openBlock as a, createBlock as c, mergeProps as X, toHandlers as H, withCtx as b, createElementVNode as E, createElementBlock as o, normalizeClass as _, Fragment as p, renderList as z, createTextVNode as C, toDisplayString as m, createVNode as K, withDirectives as pe, vModelSelect as ce, renderSlot as me, createCommentVNode as ye } from "vue";
+import { useEventListener as he } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
 import { useCommon as G } from "../../composables/useCommon.js";
-import { useInputtable as O } from "../../composables/useInputtable.js";
+import { useInputtable as D } from "../../composables/useInputtable.js";
 import { useInteractive as J } from "../../composables/useInteractive.js";
-import { useTheme as he } from "../../composables/useTheme.js";
-import { checkIcon as be, chevronDownIcon as ke } from "../../common/icons.js";
-import ge from "../label/Label.vue.js";
+import { useTheme as be } from "../../composables/useTheme.js";
+import { checkIcon as ke, selectIcon as ge } from "../../common/icons.js";
+import we from "../label/Label.vue.js";
 import W from "../tag/Tag.vue.js";
-import we from "../icon/Icon.vue.js";
-import Ae from "../menu/MenuItem.vue.js";
-import Ie from "../spinner/Spinner.vue.js";
+import Ae from "../icon/Icon.vue.js";
+import Ie from "../menu/MenuItem.vue.js";
+import _e from "../spinner/Spinner.vue.js";
 import Re from "../popover/Popover.vue.js";
 import "../popover/Popover.vue2.js";
 import Ve from "../popover/PopoverContainer.vue.js";
-import _e from "../inputFooter/InputFooter.vue.js";
-const $e = { class: "relative" }, Se = {
+import $e from "../inputFooter/InputFooter.vue.js";
+const Ee = { class: "relative" }, ze = {
   key: 0,
   class: "flex gap-1 flex-wrap"
-}, Ee = {
+}, Ce = {
   key: 0,
   class: "text-gray-400 dark:text-gray-500"
-}, ze = { key: 1 }, Ce = {
+}, Se = { key: 1 }, Ne = {
   key: 0,
   class: "flex gap-1 flex-wrap"
-}, De = {
+}, Oe = {
   key: 0,
   class: "text-gray-400 dark:text-gray-500"
-}, Ne = { key: 1 }, Oe = {
+}, De = { key: 1 }, Le = {
   key: 1,
   class: "px-2 text-center text-gray-400"
-}, Le = ["name", "disabled", "multiple", "readonly"], Be = ["value", "disabled"], Te = {
+}, Be = ["id", "name", "disabled", "multiple", "readonly"], Te = ["value", "disabled"], xe = {
   ...G.props(),
   ...J.props(),
-  ...O.props(),
+  ...D.props(),
   placeholder: String,
   options: Array,
   multiple: Boolean,
-  label: String,
-  helper: String,
   flat: Boolean,
   native: Boolean
 }, Fe = {
@@ -45,17 +43,17 @@ const $e = { class: "relative" }, Se = {
   validators: {
     ...G.validators()
   }
-}, ll = /* @__PURE__ */ fe({
+}, il = /* @__PURE__ */ ve({
   ...Fe,
-  props: Te,
-  emits: O.emits(),
+  props: xe,
+  emits: D.emits(),
   setup(Q, { expose: Y, emit: Z }) {
-    const r = Q, V = Z, k = A(null), C = A(null), _ = A(null), f = A(null), s = A(), t = I({
+    const r = Q, R = Z, k = A(null), S = A(null), V = A(null), f = A(null), u = A(), t = I({
       get() {
         return r.multiple ? r.modelValue ? Array.isArray(r.modelValue) ? r.modelValue : [r.modelValue] : [] : r.modelValue;
       },
       set(e) {
-        V("update:modelValue", e);
+        R("update:modelValue", e);
       }
     }), d = I(() => !r.options || r.options.length === 0 ? [] : r.options.map((e) => {
       let i = !1;
@@ -64,7 +62,7 @@ const $e = { class: "relative" }, Se = {
         label: e.label,
         active: i,
         disabled: e.disabled,
-        iconRight: i ? be : void 0,
+        iconRight: i ? ke : void 0,
         onClick: () => T(e.value)
       };
     })), L = I(() => {
@@ -74,44 +72,44 @@ const $e = { class: "relative" }, Se = {
       var e;
       return (e = f.value) == null ? void 0 : e.isOpen;
     });
-    N(y, (e) => {
+    O(y, (e) => {
       e && (ee(), setTimeout(() => {
-        B(s.value || 0);
-      }, 50), (r.multiple || typeof s.value > "u") && D(-1));
+        B(u.value || 0);
+      }, 50), (r.multiple || typeof u.value > "u") && N(-1));
     });
     function ee() {
       if (r.multiple) {
         if (Array.isArray(t.value) && t.value.length > 0) {
           const e = d.value.findIndex((i) => i.value === t.value[0]);
-          e !== -1 && (s.value = e);
+          e !== -1 && (u.value = e);
         }
       } else {
         const e = d.value.findIndex((i) => i.value === t.value);
-        e !== -1 && (s.value = e);
+        e !== -1 && (u.value = e);
       }
     }
     function B(e) {
       var i;
-      _.value && ((i = _.value[e]) == null || i.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
+      V.value && ((i = V.value[e]) == null || i.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
     }
-    N(s, (e) => {
-      typeof e < "u" && _.value && B(e);
+    O(u, (e) => {
+      typeof e < "u" && V.value && B(e);
     });
-    function D(e, i = "down") {
+    function N(e, i = "down") {
       if (!L.value || L.value.length === 0) {
-        s.value = void 0;
+        u.value = void 0;
         return;
       }
       if (typeof e > "u" && (e = i === "down" ? -1 : 1), i === "down") {
         let l = e + 1;
         for (l > d.value.length - 1 && (l = 0); d.value[l].disabled; )
           ++l > d.value.length - 1 && (l = 0);
-        s.value = l;
+        u.value = l;
       } else {
         let l = e - 1;
         for (l < 0 && (l = d.value.length - 1); d.value[l].disabled; )
           --l < 0 && (l = d.value.length - 1);
-        s.value = l;
+        u.value = l;
       }
     }
     function T(e) {
@@ -121,52 +119,53 @@ const $e = { class: "relative" }, Se = {
         if (r.multiple)
           if (Array.isArray(t.value)) {
             const n = t.value.indexOf(e);
-            n !== -1 ? t.value.splice(n, 1) : (t.value.push(e), V("update:modelValue", t.value));
+            n !== -1 ? t.value.splice(n, 1) : (t.value.push(e), R("update:modelValue", t.value));
           } else
             t.value = [e];
         else
           t.value = e;
-        r.native || X(() => {
+        r.native || U(() => {
           var n, v, w;
-          (n = k.value) == null || n.dispatchEvent(new Event("input")), (v = k.value) == null || v.dispatchEvent(new Event("change")), (w = C.value) == null || w.$el.focus();
+          (n = k.value) == null || n.dispatchEvent(new Event("input")), (v = k.value) == null || v.dispatchEvent(new Event("change")), (w = S.value) == null || w.$el.focus();
         });
       }
     }
-    function F(e) {
+    function x(e) {
       return !!(typeof e > "u" || e === null || e === "" || Array.isArray(e) && e.length === 0 || !Array.isArray(e) && typeof e == "object" && Object.keys(e).length === 0);
     }
-    function P(e, i) {
+    function F(e, i) {
       e.stopPropagation();
       const l = t.value.indexOf(i);
-      l !== -1 && (t.value.splice(l, 1), V("update:modelValue", t.value));
+      l !== -1 && (t.value.splice(l, 1), R("update:modelValue", t.value));
     }
     function $(e) {
       var l;
       const i = (l = r.options) == null ? void 0 : l.find((n) => n.value === e);
       return i ? i.label : "";
     }
-    const { focus: q, blur: le } = J(k), {
-      errorInternal: j,
-      inputListeners: M,
-      reset: ie,
-      validate: te,
-      setError: ne,
-      isFocused: ae,
-      isInsideForm: re
-    } = O(r, { focus: q, emit: V, withListeners: !0 }), oe = I(() => {
-      const { focus: e, blur: i } = u(M);
+    const { focus: P, blur: le } = J(k), {
+      errorInternal: q,
+      hideFooterInternal: ie,
+      inputListeners: j,
+      reset: te,
+      validate: ne,
+      setError: ae,
+      isFocused: re,
+      isInsideForm: oe
+    } = D(r, { focus: P, emit: R, withListeners: !0 }), se = I(() => {
+      const { focus: e, blur: i } = s(j);
       return {
         focus: e,
         blur: i
       };
     });
     let g = null;
-    N([ae, y], ([e, i]) => {
-      e || i ? g || (g = ye(document, "keydown", se)) : g && (g(), g = null);
+    O([re, y], ([e, i]) => {
+      e || i ? g || (g = he(document, "keydown", ue)) : g && (g(), g = null);
     }, {
       immediate: !0
     });
-    function se(e) {
+    function ue(e) {
       var i, l, n, v, w;
       if (d.value.length !== 0)
         if (e.code === "ArrowDown") {
@@ -174,131 +173,131 @@ const $e = { class: "relative" }, Se = {
             (i = f.value) == null || i.show();
             return;
           }
-          D(s.value, "down");
+          N(u.value, "down");
         } else if (e.code === "ArrowUp") {
           if (e.preventDefault(), !y.value) {
             (l = f.value) == null || l.show();
             return;
           }
-          D(s.value, "up");
+          N(u.value, "up");
         } else if (e.code === "Enter" || e.code === "Space") {
           if (e.preventDefault(), e.stopPropagation(), !y.value) {
             (n = f.value) == null || n.show();
             return;
           }
-          typeof s.value < "u" && (T(d.value[s.value].value), r.multiple || (v = f.value) == null || v.hide());
+          typeof u.value < "u" && (T(d.value[u.value].value), r.multiple || (v = f.value) == null || v.hide());
         } else
-          e.code === "Tab" && y.value && (e.preventDefault(), (w = f.value) == null || w.hide(), r.native || X(() => {
-            var U;
-            (U = C.value) == null || U.$el.focus();
+          e.code === "Tab" && y.value && (e.preventDefault(), (w = f.value) == null || w.hide(), r.native || U(() => {
+            var M;
+            (M = S.value) == null || M.$el.focus();
           }));
     }
-    const { styles: ue, classes: h, className: de } = he("Select", {}, r, { errorInternal: j });
-    return Y({ focus: q, blur: le, reset: ie, validate: te, setError: ne }), (e, i) => (a(), c(ge, x({
+    const { styles: de, classes: h, className: fe } = be("Select", {}, r, { errorInternal: q });
+    return Y({ focus: P, blur: le, reset: te, validate: ne, setError: ae }), (e, i) => (a(), c(we, X({
       ref_key: "labelRef",
-      ref: C,
+      ref: S,
       tabindex: "0",
       class: ["group", [
-        u(de),
-        u(h).wrapper
+        s(fe),
+        s(h).wrapper
       ]],
-      style: u(ue),
+      style: s(de),
       disabled: e.disabled,
       required: e.required,
-      "is-inside-form": u(re),
+      "is-inside-form": s(oe),
       label: e.label
-    }, H(oe.value)), {
+    }, H(se.value)), {
       default: b(() => [
-        S("div", $e, [
+        E("div", Ee, [
           e.native && !e.multiple ? (a(), o("div", {
             key: 0,
-            class: R(u(h).box),
+            class: _(s(h).box),
             onClick: i[0] || (i[0] = (l) => {
               var n;
               return (n = k.value) == null ? void 0 : n.click();
             })
           }, [
-            e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (a(), o("div", Se, [
-              (a(!0), o(p, null, E(t.value, (l) => (a(), c(W, {
+            e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (a(), o("div", ze, [
+              (a(!0), o(p, null, z(t.value, (l) => (a(), c(W, {
                 key: l,
-                size: "sm",
+                size: "xs",
+                outlined: "",
                 removable: "",
                 onRemove: (n) => {
-                  P(n, l);
+                  F(n, l);
                 }
               }, {
                 default: b(() => [
-                  z(m($(l)), 1)
+                  C(m($(l)), 1)
                 ]),
                 _: 2
               }, 1032, ["onRemove"]))), 128))
-            ])) : !e.multiple && !F(t.value) ? (a(), o(p, { key: 1 }, [
-              z(m($(t.value)), 1)
+            ])) : !e.multiple && !x(t.value) ? (a(), o(p, { key: 1 }, [
+              C(m($(t.value)), 1)
             ], 64)) : (a(), o(p, { key: 2 }, [
-              e.placeholder ? (a(), o("div", Ee, m(e.placeholder), 1)) : (a(), o("div", ze, " "))
+              e.placeholder ? (a(), o("div", Ce, m(e.placeholder), 1)) : (a(), o("div", Se, " "))
             ], 64))
           ], 2)) : (a(), c(Re, {
             key: 1,
             ref_key: "popoverRef",
             ref: f,
-            block: "",
-            disabled: e.disabled || e.loading || e.readonly,
-            "dismiss-on-click": !e.multiple,
-            align: "left"
+            disabled: e.disabled || e.loading || e.readonly
           }, {
             content: b(() => [
               K(Ve, {
-                class: R(u(h).content)
+                class: _(s(h).content)
               }, {
                 default: b(() => [
-                  d.value.length > 0 ? (a(!0), o(p, { key: 0 }, E(d.value, (l, n) => (a(), c(Ae, {
+                  d.value.length > 0 ? (a(!0), o(p, { key: 0 }, z(d.value, (l, n) => (a(), c(Ie, {
                     key: n,
                     ref_for: !0,
                     ref_key: "itemsRef",
-                    ref: _,
+                    ref: V,
                     item: l,
                     size: e.size,
                     disabled: l.disabled,
-                    selected: n === s.value,
+                    selected: n === u.value,
                     color: "primary",
                     filled: "",
                     onClick: i[1] || (i[1] = () => {
                       var v;
                       return !e.multiple && ((v = f.value) == null ? void 0 : v.hide());
                     })
-                  }, null, 8, ["item", "size", "disabled", "selected"]))), 128)) : (a(), o("div", Oe, " No options "))
+                  }, null, 8, ["item", "size", "disabled", "selected"]))), 128)) : (a(), o("div", Le, " No options "))
                 ]),
                 _: 1
               }, 8, ["class"])
             ]),
             default: b(() => [
-              S("div", {
-                class: R([u(h).box])
+              E("div", {
+                class: _([s(h).box])
               }, [
-                e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (a(), o("div", Ce, [
-                  (a(!0), o(p, null, E(t.value, (l) => (a(), c(W, {
+                e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (a(), o("div", Ne, [
+                  (a(!0), o(p, null, z(t.value, (l) => (a(), c(W, {
                     key: l,
-                    size: "sm",
+                    size: "xs",
+                    outlined: "",
                     removable: "",
                     onRemove: (n) => {
-                      P(n, l);
+                      F(n, l);
                     }
                   }, {
                     default: b(() => [
-                      z(m($(l)), 1)
+                      C(m($(l)), 1)
                     ]),
                     _: 2
                   }, 1032, ["onRemove"]))), 128))
-                ])) : !e.multiple && !F(t.value) ? (a(), o(p, { key: 1 }, [
-                  z(m($(t.value)), 1)
+                ])) : !e.multiple && !x(t.value) ? (a(), o(p, { key: 1 }, [
+                  C(m($(t.value)), 1)
                 ], 64)) : (a(), o(p, { key: 2 }, [
-                  e.placeholder ? (a(), o("div", De, m(e.placeholder), 1)) : (a(), o("div", Ne, " "))
+                  e.placeholder ? (a(), o("div", Oe, m(e.placeholder), 1)) : (a(), o("div", De, " "))
                 ], 64))
               ], 2)
             ]),
             _: 1
-          }, 8, ["disabled", "dismiss-on-click"])),
-          ve(S("select", x({
+          }, 8, ["disabled"])),
+          pe(E("select", X({
+            id: e.id,
             ref_key: "elRef",
             ref: k,
             "onUpdate:modelValue": i[2] || (i[2] = (l) => t.value = l),
@@ -308,32 +307,32 @@ const $e = { class: "relative" }, Se = {
             disabled: e.disabled || e.loading,
             multiple: e.multiple,
             readonly: e.readonly
-          }, H(u(M), !0)), [
-            (a(!0), o(p, null, E(e.options, (l, n) => (a(), o("option", {
+          }, H(s(j), !0)), [
+            (a(!0), o(p, null, z(e.options, (l, n) => (a(), o("option", {
               key: n,
               value: l.value,
               disabled: l.disabled
-            }, m(l.label), 9, Be))), 128))
-          ], 16, Le), [
-            [pe, t.value]
+            }, m(l.label), 9, Te))), 128))
+          ], 16, Be), [
+            [ce, t.value]
           ]),
-          S("div", {
-            class: R(u(h).iconWrapper)
+          E("div", {
+            class: _(s(h).iconWrapper)
           }, [
-            e.loading ? (a(), c(Ie, {
+            e.loading ? (a(), c(_e, {
               key: 0,
               size: e.size
-            }, null, 8, ["size"])) : ce(e.$slots, "icon", { key: 1 }, () => [
-              K(we, {
-                icon: u(ke),
-                class: R([u(h).icon])
+            }, null, 8, ["size"])) : me(e.$slots, "icon", { key: 1 }, () => [
+              K(Ae, {
+                icon: s(ge),
+                class: _([s(h).icon])
               }, null, 8, ["icon", "class"])
             ])
           ], 2)
         ]),
-        e.hideFooter ? me("", !0) : (a(), c(_e, {
+        s(ie) ? ye("", !0) : (a(), c($e, {
           key: 0,
-          error: u(j),
+          error: s(q),
           helper: e.helper
         }, null, 8, ["error", "helper"]))
       ]),
@@ -342,5 +341,5 @@ const $e = { class: "relative" }, Se = {
   }
 });
 export {
-  ll as default
+  il as default
 };

package/lib/components/select/theme/Select.base.theme.js

@@ -1,22 +1,22 @@
-const t = {
+const s = {
   classes: {
     wrapper: "",
-    box: ({ props: e, data: s }) => {
+    box: ({ props: e, data: t }) => {
       const r = ["w-full border border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm"];
-      return !s.errorInternal && !e.disabled && r.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-2 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed") : r.push("bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"), s.errorInternal ? r.push("border-red-500 dark:border-red-400 group-focus:outline-red-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
+      return !t.errorInternal && !e.disabled && r.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-2 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed") : r.push("bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"), t.errorInternal ? r.push("border-red-500 dark:border-red-400 group-focus:outline-red-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
     },
-    content: "py-1 max-h-72 overflow-scroll",
+    content: "py-1 max-h-72 overflow-y-auto",
     iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
     icon: ({ props: e }) => {
-      const s = [""];
-      return e.size === "sm" || e.size === "xs" ? s.push("h-3 w-3") : e.size === "lg" ? s.push("h-6 w-6") : e.size === "xl" ? s.push("h-7 w-7") : s.push("h-5 w-5"), e.disabled ? s.push("text-gray-300 dark:text-gray-500") : s.push("text-gray-500 dark:text-gray-400"), s;
+      const t = [""];
+      return e.size === "sm" || e.size === "xs" ? t.push("h-3 w-3") : e.size === "lg" ? t.push("h-6 w-6") : e.size === "xl" ? t.push("h-7 w-7") : t.push("h-5 w-5"), e.disabled ? t.push("text-gray-300 dark:text-gray-500") : t.push("text-gray-500 dark:text-gray-400"), t;
     }
   },
-  styles: ({ colors: e, css: s }) => {
+  styles: ({ colors: e, css: t }) => {
     const r = e.getPalette("primary");
-    return s.get("border", r[500]);
+    return t.get("border", r[500]);
   }
-}, l = t;
+}, a = s;
 export {
-  l as default
+  a as default
 };

package/lib/components/select/theme/Select.carbon.theme.js

@@ -1,11 +1,11 @@
-const s = {
+const a = {
   classes: {
     wrapper: "",
     box: ({ props: e, data: t }) => {
       const r = ["w-full border-b text-sm px-4 border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out"];
-      return !t.errorInternal && !e.disabled && r.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" || e.size === "sm" ? r.push("py-1.5") : e.size === "lg" || e.size === "xl" ? r.push("py-3.5") : r.push("py-2.5"), e.disabled ? r.push("bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed") : e.readonly ? r.push("bg-white dark:bg-gray-900 text-gray-700") : r.push("bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200"), t.errorInternal ? r.push("border-red-500 dark:border-red-400 group-focus:outline-red-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
+      return !t.errorInternal && !e.disabled && r.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" || e.size === "sm" ? r.push("py-1.5") : e.size === "lg" || e.size === "xl" ? r.push("py-3.5") : r.push("py-2.5"), e.disabled ? r.push("bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed") : e.readonly ? r.push("bg-white dark:bg-gray-900 text-gray-700") : r.push("bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200"), t.errorInternal ? r.push("border-red-500 dark:border-red-400 group-focus:outline-red-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
     },
-    content: "py-1 max-h-72 overflow-scroll",
+    content: "py-1 max-h-72 overflow-y-auto",
     iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
     icon: ({ props: e }) => {
       const t = ["h-5 w-5"];
@@ -16,7 +16,7 @@ const s = {
     const r = e.getPalette("primary");
     return t.get("border", r[500]);
   }
-}, a = s;
+}, s = a;
 export {
-  a as default
+  s as default
 };

package/lib/components/skeleton/Skeleton.vue.d.ts

@@ -1,10 +1,17 @@
-import type { ExtractPublicPropTypes } from 'vue';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
+declare const shapes: readonly ["line", "circle"];
+export type SkeletonShape = typeof shapes[number];
 declare const skeletonProps: {
     tag: {
         type: StringConstructor;
         default: string;
     };
+    shape: {
+        type: PropType<"line" | "circle">;
+        default: string;
+        validator: (val: SkeletonShape) => boolean;
+    };
 };
 export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>;
 type InternalClasses = 'wrapper';
@@ -15,12 +22,23 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    shape: {
+        type: PropType<"line" | "circle">;
+        default: string;
+        validator: (val: "line" | "circle") => boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
     };
+    shape: {
+        type: PropType<"line" | "circle">;
+        default: string;
+        validator: (val: "line" | "circle") => boolean;
+    };
 }>>, {
     tag: string;
+    shape: "line" | "circle";
 }, {}>;
 export default _default;

package/lib/components/skeleton/Skeleton.vue.js

@@ -1,23 +1,33 @@
-import { defineComponent as r, openBlock as c, createBlock as p, resolveDynamicComponent as m, normalizeStyle as i, unref as e, normalizeClass as f, withCtx as u, createTextVNode as _ } from "vue";
-import { useTheme as d } from "../../composables/useTheme.js";
-const y = {
+import { defineComponent as c, openBlock as p, createBlock as i, resolveDynamicComponent as m, normalizeStyle as d, unref as t, normalizeClass as u, withCtx as f, createTextVNode as _ } from "vue";
+import { useTheme as h } from "../../composables/useTheme.js";
+const y = ["line", "circle"], s = {
+  shape: y
+}, k = {
   tag: {
     type: String,
     default: "div"
+  },
+  shape: {
+    type: String,
+    default: "line",
+    validator: (e) => s.shape.includes(e)
   }
-}, k = { name: "XSkeleton" }, h = /* @__PURE__ */ r({
-  ...k,
-  props: y,
-  setup(t) {
-    const s = t, { styles: o, classes: n, className: a } = d("Skeleton", {}, s);
-    return (l, C) => (c(), p(m(l.tag), {
-      style: i(e(o)),
-      class: f([
-        e(a),
-        e(n).wrapper
+}, S = {
+  name: "XSkeleton",
+  validators: s
+}, x = /* @__PURE__ */ c({
+  ...S,
+  props: k,
+  setup(e) {
+    const a = e, { styles: o, classes: n, className: l } = h("Skeleton", {}, a);
+    return (r, g) => (p(), i(m(r.tag), {
+      style: d(t(o)),
+      class: u([
+        t(l),
+        t(n).wrapper
       ])
     }, {
-      default: u(() => [
+      default: f(() => [
         _(" ​ ")
       ]),
       _: 1
@@ -25,5 +35,5 @@ const y = {
   }
 });
 export {
-  h as default
+  x as default
 };

package/lib/components/skeleton/theme/Skeleton.base.theme.js

@@ -1,8 +1,11 @@
-const e = {
+const a = {
   classes: {
-    wrapper: "animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md"
+    wrapper: ({ props: s }) => {
+      const e = ["animate-pulse bg-gray-300 dark:bg-gray-600"];
+      return s.shape === "circle" ? e.push("w-8 h-8 rounded-full") : e.push("rounded-md"), e;
+    }
   }
-}, a = e;
+}, r = a;
 export {
-  a as default
+  r as default
 };