@indielayer/ui 1.3.0 → 1.5.0

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

@@ -1,56 +1,56 @@
-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 pe, ref as A, computed as I, watch as O, nextTick as U, unref as s, openBlock as o, createBlock as c, mergeProps as X, toHandlers as H, withCtx as b, createElementVNode as C, createElementBlock as a, normalizeClass as R, Fragment as v, renderList as E, createTextVNode as z, toDisplayString as m, createVNode as K, withDirectives as ve, 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 { useColors as be } from "../../composables/useColors.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 ke } from "../../composables/useTheme.js";
+import { checkIcon as ge, selectIcon as we } from "../../common/icons.js";
+import Ae 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 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 Ie from "../icon/Icon.vue.js";
+import Re from "../menu/MenuItem.vue.js";
+import Ve from "../spinner/Spinner.vue.js";
+import _e from "../popover/Popover.vue.js";
+import "../popover/Popover.vue3.js";
+import $e from "../popover/PopoverContainer.vue.js";
+import Ce from "../inputFooter/InputFooter.vue.js";
+const Ee = { class: "relative" }, ze = {
   key: 0,
   class: "flex gap-1 flex-wrap"
-}, Ee = {
+}, Se = {
   key: 0,
-  class: "text-gray-400 dark:text-gray-500"
-}, ze = { key: 1 }, Ce = {
+  class: "text-secondary-400 dark:text-secondary-500"
+}, Ne = { key: 1 }, Oe = {
   key: 0,
   class: "flex gap-1 flex-wrap"
 }, De = {
   key: 0,
-  class: "text-gray-400 dark:text-gray-500"
-}, Ne = { key: 1 }, Oe = {
+  class: "text-secondary-400 dark:text-secondary-500"
+}, Le = { key: 1 }, Be = {
   key: 1,
-  class: "px-2 text-center text-gray-400"
-}, Le = ["name", "disabled", "multiple", "readonly"], Be = ["value", "disabled"], Te = {
+  class: "px-2 text-center text-secondary-400"
+}, Te = ["id", "name", "disabled", "multiple", "readonly"], Fe = ["value", "disabled"], Pe = {
+  ...be.props("primary"),
   ...G.props(),
   ...J.props(),
-  ...O.props(),
+  ...D.props(),
   placeholder: String,
   options: Array,
   multiple: Boolean,
-  label: String,
-  helper: String,
   flat: Boolean,
   native: Boolean
-}, Fe = {
+}, qe = {
   name: "XSelect",
   validators: {
     ...G.validators()
   }
-}, ll = /* @__PURE__ */ fe({
-  ...Fe,
-  props: Te,
-  emits: O.emits(),
+}, nl = /* @__PURE__ */ pe({
+  ...qe,
+  props: Pe,
+  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, V = Z, k = A(null), S = A(null), _ = 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;
       },
@@ -64,7 +64,7 @@ const $e = { class: "relative" }, Se = {
         label: e.label,
         active: i,
         disabled: e.disabled,
-        iconRight: i ? be : void 0,
+        iconRight: i ? ge : void 0,
         onClick: () => T(e.value)
       };
     })), L = I(() => {
@@ -74,44 +74,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" }));
     }
-    N(s, (e) => {
+    O(u, (e) => {
       typeof e < "u" && _.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) {
@@ -126,9 +126,9 @@ const $e = { class: "relative" }, Se = {
             t.value = [e];
         else
           t.value = e;
-        r.native || X(() => {
-          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();
+        r.native || U(() => {
+          var n, p, w;
+          (n = k.value) == null || n.dispatchEvent(new Event("input")), (p = k.value) == null || p.dispatchEvent(new Event("change")), (w = S.value) == null || w.$el.focus();
         });
       }
     }
@@ -147,81 +147,84 @@ const $e = { class: "relative" }, Se = {
     }
     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);
+      hideFooterInternal: ie,
+      inputListeners: x,
+      reset: te,
+      validate: ne,
+      setError: oe,
+      isFocused: re,
+      isInsideForm: ae
+    } = D(r, { focus: q, emit: V, withListeners: !0 }), se = I(() => {
+      const { focus: e, blur: i } = s(x);
       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) {
-      var i, l, n, v, w;
+    function ue(e) {
+      var i, l, n, p, w;
       if (d.value.length !== 0)
         if (e.code === "ArrowDown") {
           if (e.preventDefault(), !y.value) {
             (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 || (p = f.value) == null || p.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 } = ke("Select", {}, r, { errorInternal: j });
+    return Y({ focus: q, blur: le, reset: te, validate: ne, setError: oe }), (e, i) => (o(), c(Ae, 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),
-      label: e.label
-    }, H(oe.value)), {
+      "is-inside-form": s(ae),
+      label: e.label,
+      tooltip: e.tooltip
+    }, H(se.value)), {
       default: b(() => [
-        S("div", $e, [
-          e.native && !e.multiple ? (a(), o("div", {
+        C("div", Ee, [
+          e.native && !e.multiple ? (o(), a("div", {
             key: 0,
-            class: R(u(h).box),
+            class: R(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 ? (o(), a("div", ze, [
+              (o(!0), a(v, null, E(t.value, (l) => (o(), c(W, {
                 key: l,
-                size: "sm",
+                size: "xs",
+                outlined: "",
                 removable: "",
                 onRemove: (n) => {
                   P(n, l);
@@ -232,26 +235,23 @@ const $e = { class: "relative" }, Se = {
                 ]),
                 _: 2
               }, 1032, ["onRemove"]))), 128))
-            ])) : !e.multiple && !F(t.value) ? (a(), o(p, { key: 1 }, [
+            ])) : !e.multiple && !F(t.value) ? (o(), a(v, { key: 1 }, [
               z(m($(t.value)), 1)
-            ], 64)) : (a(), o(p, { key: 2 }, [
-              e.placeholder ? (a(), o("div", Ee, m(e.placeholder), 1)) : (a(), o("div", ze, " "))
+            ], 64)) : (o(), a(v, { key: 2 }, [
+              e.placeholder ? (o(), a("div", Se, m(e.placeholder), 1)) : (o(), a("div", Ne, " "))
             ], 64))
-          ], 2)) : (a(), c(Re, {
+          ], 2)) : (o(), c(_e, {
             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)
+              K($e, {
+                class: R(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 ? (o(!0), a(v, { key: 0 }, E(d.value, (l, n) => (o(), c(Re, {
                     key: n,
                     ref_for: !0,
                     ref_key: "itemsRef",
@@ -259,26 +259,27 @@ const $e = { class: "relative" }, Se = {
                     item: l,
                     size: e.size,
                     disabled: l.disabled,
-                    selected: n === s.value,
-                    color: "primary",
+                    selected: n === u.value,
+                    color: e.color,
                     filled: "",
                     onClick: i[1] || (i[1] = () => {
-                      var v;
-                      return !e.multiple && ((v = f.value) == null ? void 0 : v.hide());
+                      var p;
+                      return !e.multiple && ((p = f.value) == null ? void 0 : p.hide());
                     })
-                  }, null, 8, ["item", "size", "disabled", "selected"]))), 128)) : (a(), o("div", Oe, " No options "))
+                  }, null, 8, ["item", "size", "disabled", "selected", "color"]))), 128)) : (o(), a("div", Be, " No options "))
                 ]),
                 _: 1
               }, 8, ["class"])
             ]),
             default: b(() => [
-              S("div", {
-                class: R([u(h).box])
+              C("div", {
+                class: R([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 ? (o(), a("div", Oe, [
+                  (o(!0), a(v, null, E(t.value, (l) => (o(), c(W, {
                     key: l,
-                    size: "sm",
+                    size: "xs",
+                    outlined: "",
                     removable: "",
                     onRemove: (n) => {
                       P(n, l);
@@ -289,16 +290,17 @@ const $e = { class: "relative" }, Se = {
                     ]),
                     _: 2
                   }, 1032, ["onRemove"]))), 128))
-                ])) : !e.multiple && !F(t.value) ? (a(), o(p, { key: 1 }, [
+                ])) : !e.multiple && !F(t.value) ? (o(), a(v, { key: 1 }, [
                   z(m($(t.value)), 1)
-                ], 64)) : (a(), o(p, { key: 2 }, [
-                  e.placeholder ? (a(), o("div", De, m(e.placeholder), 1)) : (a(), o("div", Ne, " "))
+                ], 64)) : (o(), a(v, { key: 2 }, [
+                  e.placeholder ? (o(), a("div", De, m(e.placeholder), 1)) : (o(), a("div", Le, " "))
                 ], 64))
               ], 2)
             ]),
             _: 1
-          }, 8, ["disabled", "dismiss-on-click"])),
-          ve(S("select", x({
+          }, 8, ["disabled"])),
+          ve(C("select", X({
+            id: e.id,
             ref_key: "elRef",
             ref: k,
             "onUpdate:modelValue": i[2] || (i[2] = (l) => t.value = l),
@@ -308,39 +310,39 @@ 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(x), !0)), [
+            (o(!0), a(v, null, E(e.options, (l, n) => (o(), a("option", {
               key: n,
               value: l.value,
               disabled: l.disabled
-            }, m(l.label), 9, Be))), 128))
-          ], 16, Le), [
-            [pe, t.value]
+            }, m(l.label), 9, Fe))), 128))
+          ], 16, Te), [
+            [ce, t.value]
           ]),
-          S("div", {
-            class: R(u(h).iconWrapper)
+          C("div", {
+            class: R(s(h).iconWrapper)
           }, [
-            e.loading ? (a(), c(Ie, {
+            e.loading ? (o(), c(Ve, {
               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(Ie, {
+                icon: s(we),
+                class: R([s(h).icon])
               }, null, 8, ["icon", "class"])
             ])
           ], 2)
         ]),
-        e.hideFooter ? me("", !0) : (a(), c(_e, {
+        s(ie) ? ye("", !0) : (o(), c(Ce, {
           key: 0,
-          error: u(j),
+          error: s(j),
           helper: e.helper
         }, null, 8, ["error", "helper"]))
       ]),
       _: 3
-    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class"]));
+    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
   }
 });
 export {
-  ll as default
+  nl as default
 };

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

@@ -2,21 +2,21 @@ const t = {
   classes: {
     wrapper: "",
     box: ({ props: e, data: s }) => {
-      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;
+      const r = ["w-full border border-secondary-300 dark:border-secondary-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-secondary-400 dark:hover:border-secondary-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-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), s.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
     },
-    content: "py-1 max-h-72 overflow-scroll",
+    content: "p-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;
+      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-secondary-300 dark:text-secondary-500") : s.push("text-secondary-500 dark:text-secondary-400"), s;
     }
   },
   styles: ({ colors: e, css: s }) => {
     const r = e.getPalette("primary");
     return s.get("border", r[500]);
   }
-}, l = t;
+}, o = t;
 export {
-  l as default
+  o as default
 };

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

@@ -1,22 +1,22 @@
-const s = {
+const o = {
   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;
+    box: ({ props: e, data: s }) => {
+      const r = ["w-full border-b text-sm px-4 border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out"];
+      return !s.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-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-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : e.readonly ? r.push("bg-white dark:bg-secondary-900 text-secondary-700") : r.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), s.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-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"];
-      return e.disabled ? t.push("text-gray-300 dark:text-gray-500") : t.push("text-gray-500 dark:text-gray-400"), t;
+      const s = ["h-5 w-5"];
+      return e.disabled ? s.push("text-secondary-300 dark:text-secondary-500") : s.push("text-secondary-500 dark:text-secondary-400"), s;
     }
   },
-  styles: ({ colors: e, css: t }) => {
+  styles: ({ colors: e, css: s }) => {
     const r = e.getPalette("primary");
-    return t.get("border", r[500]);
+    return s.get("border", r[500]);
   }
-}, a = s;
+}, t = o;
 export {
-  a as default
+  t 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-secondary-300 dark:bg-secondary-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
 };