@indielayer/ui 1.2.0 → 1.3.0

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

@@ -1,269 +1,346 @@
-import { defineComponent as re, ref as m, computed as _, watch as x, openBlock as i, createElementBlock as u, normalizeClass as c, unref as a, normalizeStyle as te, toDisplayString as v, createCommentVNode as oe, createElementVNode as g, createVNode as k, withCtx as w, Fragment as y, renderList as R, createBlock as I, createTextVNode as T, withDirectives as ne, mergeProps as ae, toHandlers as ie, vModelSelect as se, renderSlot as ue } from "vue";
-import { useEventListener as de } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
-import { useCommon as j } from "../../composables/common.js";
-import { useInputtable as O } from "../../composables/inputtable.js";
-import { useInteractive as F } from "../../composables/interactive.js";
-import { useTheme as fe } from "../../composables/theme.js";
-import { checkIcon as pe, chevronDownIcon as ce } from "../../common/icons.js";
-import me from "../tag/Tag.vue.js";
-import ve from "../icon/Icon.vue.js";
-import ye from "../menu/MenuItem.vue.js";
-import be from "../spinner/Spinner.vue.js";
-import he from "../popover/Popover.vue.js";
-import ge from "../popover/PopoverContainer.vue.js";
-import ke from "../helpers/InputError.js";
-import we from "./Select.theme.js";
-const Ae = ["textContent"], Ve = { class: "relative" }, _e = {
+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 { useCommon as G } from "../../composables/useCommon.js";
+import { useInputtable as O } 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 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 = {
+  key: 0,
+  class: "flex gap-1 flex-wrap"
+}, Ee = {
+  key: 0,
+  class: "text-gray-400 dark:text-gray-500"
+}, ze = { key: 1 }, Ce = {
+  key: 0,
+  class: "flex gap-1 flex-wrap"
+}, De = {
   key: 0,
   class: "text-gray-400 dark:text-gray-500"
-}, Re = { key: 1 }, Ie = {
+}, Ne = { key: 1 }, Oe = {
   key: 1,
   class: "px-2 text-center text-gray-400"
-}, Oe = ["name", "disabled", "multiple", "readonly"], Se = ["value", "disabled"], ze = {
-  ...j.props(),
-  ...F.props(),
+}, Le = ["name", "disabled", "multiple", "readonly"], Be = ["value", "disabled"], Te = {
+  ...G.props(),
+  ...J.props(),
   ...O.props(),
   placeholder: String,
   options: Array,
   multiple: Boolean,
   label: String,
   helper: String,
-  flat: Boolean
-}, Ce = {
+  flat: Boolean,
+  native: Boolean
+}, Fe = {
   name: "XSelect",
   validators: {
-    ...j.validators()
+    ...G.validators()
   }
-}, Ke = /* @__PURE__ */ re({
-  ...Ce,
-  props: ze,
+}, ll = /* @__PURE__ */ fe({
+  ...Fe,
+  props: Te,
   emits: O.emits(),
-  setup(M, { expose: U, emit: b }) {
-    const o = M, S = m(null), z = m(null), A = m(null), s = m(null), d = m(), t = _({
+  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({
       get() {
-        return o.multiple ? o.modelValue ? Array.isArray(o.modelValue) ? o.modelValue : [o.modelValue] : [] : o.modelValue;
+        return r.multiple ? r.modelValue ? Array.isArray(r.modelValue) ? r.modelValue : [r.modelValue] : [] : r.modelValue;
       },
       set(e) {
-        b("update:modelValue", e);
+        V("update:modelValue", e);
       }
-    }), f = _(() => !o.options || o.options.length === 0 ? [] : o.options.map((e) => {
-      let r = !1;
-      return o.multiple && Array.isArray(t.value) ? r = t.value.includes(e.value) : r = e.value === t.value, {
+    }), d = I(() => !r.options || r.options.length === 0 ? [] : r.options.map((e) => {
+      let i = !1;
+      return r.multiple && Array.isArray(t.value) ? i = t.value.includes(e.value) : i = e.value === t.value, {
         value: e.value,
         label: e.label,
-        active: r,
+        active: i,
         disabled: e.disabled,
-        iconRight: r ? pe : void 0,
-        onClick: () => D(e.value)
+        iconRight: i ? be : void 0,
+        onClick: () => T(e.value)
       };
-    })), C = _(() => {
-      var e;
-      return (e = o.options) == null ? void 0 : e.filter((r) => !r.disabled);
-    });
-    x(() => {
+    })), L = I(() => {
       var e;
-      return (e = s.value) == null ? void 0 : e.isOpen;
-    }, () => {
+      return (e = r.options) == null ? void 0 : e.filter((i) => !i.disabled);
+    }), y = I(() => {
       var e;
-      (e = s.value) != null && e.isOpen && (o.multiple || typeof d.value > "u") && V(-1);
-    }), x(d, (e) => {
-      typeof e < "u" && A.value && A.value[e].$el.scrollIntoView({ block: "nearest", inline: "nearest" });
+      return (e = f.value) == null ? void 0 : e.isOpen;
+    });
+    N(y, (e) => {
+      e && (ee(), setTimeout(() => {
+        B(s.value || 0);
+      }, 50), (r.multiple || typeof s.value > "u") && D(-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);
+        }
+      } else {
+        const e = d.value.findIndex((i) => i.value === t.value);
+        e !== -1 && (s.value = e);
+      }
+    }
+    function B(e) {
+      var i;
+      _.value && ((i = _.value[e]) == null || i.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
+    }
+    N(s, (e) => {
+      typeof e < "u" && _.value && B(e);
     });
-    function V(e, r = "down") {
-      if (!C.value || C.value.length === 0) {
-        d.value = void 0;
+    function D(e, i = "down") {
+      if (!L.value || L.value.length === 0) {
+        s.value = void 0;
         return;
       }
-      if (typeof e > "u" && (e = r === "down" ? -1 : 1), r === "down") {
+      if (typeof e > "u" && (e = i === "down" ? -1 : 1), i === "down") {
         let l = e + 1;
-        for (l > f.value.length - 1 && (l = 0); f.value[l].disabled; )
-          ++l > f.value.length - 1 && (l = 0);
-        d.value = l;
+        for (l > d.value.length - 1 && (l = 0); d.value[l].disabled; )
+          ++l > d.value.length - 1 && (l = 0);
+        s.value = l;
       } else {
         let l = e - 1;
-        for (l < 0 && (l = f.value.length - 1); f.value[l].disabled; )
-          --l < 0 && (l = f.value.length - 1);
-        d.value = l;
+        for (l < 0 && (l = d.value.length - 1); d.value[l].disabled; )
+          --l < 0 && (l = d.value.length - 1);
+        s.value = l;
       }
     }
-    de(z, "keydown", H);
-    function H(e) {
-      var r, l, n, P, $, B, L, X;
-      if (f.value.length !== 0)
-        if (e.code === "ArrowDown") {
-          if (e.preventDefault(), !((r = s.value) != null && r.isOpen)) {
-            (l = s.value) == null || l.open();
-            return;
-          }
-          V(d.value, "down");
-        } else if (e.code === "ArrowUp") {
-          if (e.preventDefault(), !((n = s.value) != null && n.isOpen))
-            return;
-          V(d.value, "up");
-        } else if (e.code === "Enter" || e.code === "Space") {
-          if (e.preventDefault(), e.stopPropagation(), !((P = s.value) != null && P.isOpen)) {
-            ($ = s.value) == null || $.open();
-            return;
-          }
-          typeof d.value < "u" && (D(f.value[d.value].value), o.multiple || (B = s.value) == null || B.close());
-        } else
-          e.code === "Escape" ? (e.preventDefault(), e.stopPropagation(), (L = s.value) == null || L.close()) : e.code === "Tab" && ((X = s.value) == null || X.close());
-    }
-    function D(e) {
+    function T(e) {
       var l;
-      const r = (l = o.options) == null ? void 0 : l.find((n) => n.value === e);
-      if (!(!r || r.disabled))
-        if (o.multiple)
+      const i = (l = r.options) == null ? void 0 : l.find((n) => n.value === e);
+      if (!(!i || i.disabled)) {
+        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), b("update:modelValue", t.value));
+            n !== -1 ? t.value.splice(n, 1) : (t.value.push(e), V("update:modelValue", t.value));
           } else
             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();
+        });
+      }
     }
-    function K(e) {
+    function F(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 W(e, r) {
+    function P(e, i) {
       e.stopPropagation();
-      const l = t.value.indexOf(r);
-      l !== -1 && (t.value.splice(l, 1), b("update:modelValue", t.value));
+      const l = t.value.indexOf(i);
+      l !== -1 && (t.value.splice(l, 1), V("update:modelValue", t.value));
     }
-    function E(e) {
+    function $(e) {
       var l;
-      const r = (l = o.options) == null ? void 0 : l.find((n) => n.value === e);
-      return r ? r.label : "";
+      const i = (l = r.options) == null ? void 0 : l.find((n) => n.value === e);
+      return i ? i.label : "";
     }
-    const { focus: N, blur: q } = F(S), {
-      errorInternal: h,
-      inputListeners: G,
-      reset: J,
-      validate: Q,
-      setError: Y,
-      isInsideForm: Z
-    } = O(o, { focus: N, emit: b, withListeners: !1 }), { styles: ee, classes: p, className: le } = fe("select", we, o, { errorInternal: h });
-    return U({ focus: N, blur: q, reset: J, validate: Q, setError: Y }), (e, r) => (i(), u("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);
+      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);
+    }, {
+      immediate: !0
+    });
+    function se(e) {
+      var i, l, n, v, 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");
+        } else if (e.code === "ArrowUp") {
+          if (e.preventDefault(), !y.value) {
+            (l = f.value) == null || l.show();
+            return;
+          }
+          D(s.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());
+        } 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();
+          }));
+    }
+    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({
       ref_key: "labelRef",
-      ref: z,
+      ref: C,
       tabindex: "0",
-      class: c(["group relative", [
-        a(le),
-        a(p).wrapper,
-        { "mb-3": a(Z) }
-      ]]),
-      style: te(a(ee))
-    }, [
-      e.label ? (i(), u("p", {
-        key: 0,
-        class: c(a(p).label),
-        textContent: v(e.label)
-      }, null, 10, Ae)) : oe("", !0),
-      g("div", Ve, [
-        k(he, {
-          ref_key: "popoverRef",
-          ref: s,
-          block: "",
-          disabled: e.disabled || e.loading,
-          "dismiss-on-click": !e.multiple,
-          align: "left"
-        }, {
-          content: w(() => [
-            k(ge, {
-              class: c(a(p).content)
-            }, {
-              default: w(() => [
-                f.value.length > 0 ? (i(!0), u(y, { key: 0 }, R(f.value, (l, n) => (i(), I(ye, {
-                  key: n,
-                  ref_for: !0,
-                  ref_key: "itemsRef",
-                  ref: A,
-                  item: l,
-                  size: e.size,
-                  disabled: l.disabled,
-                  selected: n === d.value,
-                  color: "primary",
-                  filled: ""
-                }, null, 8, ["item", "size", "disabled", "selected"]))), 128)) : (i(), u("div", Ie, " No options "))
-              ]),
-              _: 1
-            }, 8, ["class"])
-          ]),
-          default: w(() => [
-            g("div", {
-              class: c([
-                a(p).box,
-                {
-                  // error
-                  "border-red-500 dark:border-red-400 group-focus:outline-red-500": a(h),
-                  "group-focus:outline-[color:var(--x-select-border)]": !e.disabled && !a(h)
-                }
-              ])
-            }, [
-              e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (i(!0), u(y, { key: 0 }, R(t.value, (l) => (i(), I(me, {
+      class: ["group", [
+        u(de),
+        u(h).wrapper
+      ]],
+      style: u(ue),
+      disabled: e.disabled,
+      required: e.required,
+      "is-inside-form": u(re),
+      label: e.label
+    }, H(oe.value)), {
+      default: b(() => [
+        S("div", $e, [
+          e.native && !e.multiple ? (a(), o("div", {
+            key: 0,
+            class: R(u(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, {
                 key: l,
                 size: "sm",
-                class: "mr-1",
                 removable: "",
                 onRemove: (n) => {
-                  W(n, l);
+                  P(n, l);
                 }
               }, {
-                default: w(() => [
-                  T(v(E(l)), 1)
+                default: b(() => [
+                  z(m($(l)), 1)
                 ]),
                 _: 2
-              }, 1032, ["onRemove"]))), 128)) : !e.multiple && !K(t.value) ? (i(), u(y, { key: 1 }, [
-                T(v(E(t.value)), 1)
-              ], 64)) : (i(), u(y, { key: 2 }, [
-                e.placeholder ? (i(), u("div", _e, v(e.placeholder), 1)) : (i(), u("div", Re, " "))
-              ], 64))
-            ], 2)
+              }, 1032, ["onRemove"]))), 128))
+            ])) : !e.multiple && !F(t.value) ? (a(), o(p, { 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))
+          ], 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"
+          }, {
+            content: b(() => [
+              K(Ve, {
+                class: R(u(h).content)
+              }, {
+                default: b(() => [
+                  d.value.length > 0 ? (a(!0), o(p, { key: 0 }, E(d.value, (l, n) => (a(), c(Ae, {
+                    key: n,
+                    ref_for: !0,
+                    ref_key: "itemsRef",
+                    ref: _,
+                    item: l,
+                    size: e.size,
+                    disabled: l.disabled,
+                    selected: n === s.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 "))
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ]),
+            default: b(() => [
+              S("div", {
+                class: R([u(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, {
+                    key: l,
+                    size: "sm",
+                    removable: "",
+                    onRemove: (n) => {
+                      P(n, l);
+                    }
+                  }, {
+                    default: b(() => [
+                      z(m($(l)), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["onRemove"]))), 128))
+                ])) : !e.multiple && !F(t.value) ? (a(), o(p, { 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))
+              ], 2)
+            ]),
+            _: 1
+          }, 8, ["disabled", "dismiss-on-click"])),
+          ve(S("select", x({
+            ref_key: "elRef",
+            ref: k,
+            "onUpdate:modelValue": i[2] || (i[2] = (l) => t.value = l),
+            tabindex: "-1",
+            class: e.native && !e.multiple ? "absolute inset-0 w-full h-full cursor-pointer opacity-0" : "hidden",
+            name: e.name,
+            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", {
+              key: n,
+              value: l.value,
+              disabled: l.disabled
+            }, m(l.label), 9, Be))), 128))
+          ], 16, Le), [
+            [pe, t.value]
           ]),
-          _: 1
-        }, 8, ["disabled", "dismiss-on-click"]),
-        ne(g("select", ae({
-          ref_key: "elRef",
-          ref: S,
-          "onUpdate:modelValue": r[0] || (r[0] = (l) => t.value = l),
-          class: "hidden",
-          name: e.name,
-          disabled: e.disabled || e.loading,
-          multiple: e.multiple,
-          readonly: e.readonly
-        }, ie(a(G), !0)), [
-          (i(!0), u(y, null, R(e.options, (l, n) => (i(), u("option", {
-            key: n,
-            value: l.value,
-            disabled: l.disabled
-          }, v(l.label), 9, Se))), 128))
-        ], 16, Oe), [
-          [se, t.value]
+          S("div", {
+            class: R(u(h).iconWrapper)
+          }, [
+            e.loading ? (a(), c(Ie, {
+              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, ["icon", "class"])
+            ])
+          ], 2)
         ]),
-        g("div", {
-          class: c(a(p).iconWrapper)
-        }, [
-          e.loading ? (i(), I(be, {
-            key: 0,
-            size: e.size
-          }, null, 8, ["size"])) : ue(e.$slots, "icon", { key: 1 }, () => [
-            k(ve, {
-              icon: a(ce),
-              class: c([
-                a(p).icon,
-                e.disabled ? "text-gray-600 dark:text-gray-500" : "text-gray-500 dark:text-gray-400"
-              ])
-            }, null, 8, ["icon", "class"])
-          ])
-        ], 2)
+        e.hideFooter ? me("", !0) : (a(), c(_e, {
+          key: 0,
+          error: u(j),
+          helper: e.helper
+        }, null, 8, ["error", "helper"]))
       ]),
-      k(a(ke), {
-        error: a(h),
-        helper: e.helper
-      }, null, 8, ["error", "helper"])
-    ], 6));
+      _: 3
+    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class"]));
   }
 });
 export {
-  Ke as default
+  ll as default
 };

package/lib/components/select/index.d.ts

@@ -1,3 +1,2 @@
 export { default as XSelect } from './Select.vue';
-export type { SelectProps, SelectOption } from './Select.vue';
-export type { SelectTheme } from './Select.theme';
+export type { SelectProps, SelectOption, SelectTheme } from './Select.vue';

package/lib/components/select/theme/Select.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { SelectTheme } from '../Select.vue';
+declare const theme: SelectTheme;
+export default theme;

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

@@ -0,0 +1,22 @@
+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;
+    },
+    content: "py-1 max-h-72 overflow-scroll",
+    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;
+    }
+  },
+  styles: ({ colors: e, css: s }) => {
+    const r = e.getPalette("primary");
+    return s.get("border", r[500]);
+  }
+}, l = t;
+export {
+  l as default
+};

package/lib/components/select/theme/Select.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import { type SelectTheme } from '../Select.vue';
+declare const theme: SelectTheme;
+export default theme;

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

@@ -0,0 +1,22 @@
+const s = {
+  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;
+    },
+    content: "py-1 max-h-72 overflow-scroll",
+    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;
+    }
+  },
+  styles: ({ colors: e, css: t }) => {
+    const r = e.getPalette("primary");
+    return t.get("border", r[500]);
+  }
+}, a = s;
+export {
+  a as default
+};

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

@@ -1,4 +1,5 @@
 import type { ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const skeletonProps: {
     tag: {
         type: StringConstructor;
@@ -6,6 +7,9 @@ declare const skeletonProps: {
     };
 };
 export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>;
+type InternalClasses = 'wrapper';
+export interface SkeletonTheme extends ThemeComponent<SkeletonProps, InternalClasses> {
+}
 declare const _default: import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;