@indielayer/ui 1.2.0 → 1.3.0

package/lib/components/divider/Divider.vue.js

@@ -1,16 +1,15 @@
-import { defineComponent as p, openBlock as o, createElementBlock as s, normalizeStyle as r, unref as t, normalizeClass as a, createElementVNode as i, toDisplayString as u, createCommentVNode as v } from "vue";
-import { useTheme as h } from "../../composables/theme.js";
-import y from "./Divider.theme.js";
-const f = ["textContent"], g = {
+import { defineComponent as p, openBlock as s, createElementBlock as o, normalizeStyle as r, unref as t, normalizeClass as a, createElementVNode as i, toDisplayString as u, createCommentVNode as v } from "vue";
+import { useTheme as y } from "../../composables/useTheme.js";
+const h = ["textContent"], f = {
   label: String,
   vertical: Boolean
-}, C = { name: "XDivider" }, B = /* @__PURE__ */ p({
-  ...C,
-  props: g,
+}, g = { name: "XDivider" }, x = /* @__PURE__ */ p({
+  ...g,
+  props: f,
   setup(n) {
-    const m = n, { styles: c, classes: l, className: d } = h("divider", y, m);
-    return (e, b) => (o(), s("div", {
-      style: r(t(c)),
+    const c = n, { styles: m, classes: l, className: d } = y("Divider", {}, c);
+    return (e, C) => (s(), o("div", {
+      style: r(t(m)),
       class: a([
         t(d),
         t(l).wrapper
@@ -25,7 +24,7 @@ const f = ["textContent"], g = {
           }
         ])
       }, null, 6),
-      e.label ? (o(), s("div", {
+      e.label ? (s(), o("div", {
         key: 0,
         class: a(["font-medium text-sm text-gray-600 dark:text-gray-300", [
           t(l).label,
@@ -35,7 +34,7 @@ const f = ["textContent"], g = {
           }
         ]]),
         textContent: u(e.label)
-      }, null, 10, f)) : v("", !0),
+      }, null, 10, h)) : v("", !0),
       i("div", {
         class: a(t(l).line),
         style: r([
@@ -49,5 +48,5 @@ const f = ["textContent"], g = {
   }
 });
 export {
-  B as default
+  x as default
 };

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

@@ -1,3 +1,2 @@
 export { default as XDivider } from './Divider.vue';
-export type { DividerProps } from './Divider.vue';
-export type { DividerTheme } from './Divider.theme';
+export type { DividerProps, DividerTheme } from './Divider.vue';

package/lib/components/divider/theme/Divider.base.theme.d.ts

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

package/lib/components/divider/theme/Divider.carbon.theme.d.ts

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

package/lib/components/divider/theme/Divider.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Divider.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/drawer/Drawer.vue.d.ts

@@ -1,9 +1,10 @@
 import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const drawerPosition: readonly ["left", "right", "top", "bottom"];
 declare const drawerProps: {
     modelValue: BooleanConstructor;
     position: {
-        type: PropType<"left" | "right" | "top" | "bottom">;
+        type: PropType<"top" | "bottom" | "left" | "right">;
         default: string;
     };
     teleportTo: {
@@ -26,10 +27,13 @@ declare const drawerProps: {
 };
 export type DrawerPosition = typeof drawerPosition[number];
 export type DrawerProps = ExtractPublicPropTypes<typeof drawerProps>;
+type InternalClasses = 'wrapper' | 'backdrop';
+export interface DrawerTheme extends ThemeComponent<DrawerProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: BooleanConstructor;
     position: {
-        type: PropType<"left" | "right" | "top" | "bottom">;
+        type: PropType<"top" | "bottom" | "left" | "right">;
         default: string;
     };
     teleportTo: {
@@ -55,7 +59,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: BooleanConstructor;
     position: {
-        type: PropType<"left" | "right" | "top" | "bottom">;
+        type: PropType<"top" | "bottom" | "left" | "right">;
         default: string;
     };
     teleportTo: {
@@ -78,12 +82,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    position: "top" | "bottom" | "left" | "right";
     modelValue: boolean;
-    height: string | number;
+    teleportTo: string | HTMLElement;
     width: string | number;
-    position: "left" | "right" | "top" | "bottom";
+    height: string | number;
     backdrop: boolean;
-    teleportTo: string | HTMLElement;
 }, {}>, {
     header?(_: {}): any;
     default?(_: {}): any;

package/lib/components/drawer/Drawer.vue.js

@@ -1,8 +1,7 @@
-import { defineComponent as P, ref as a, watchEffect as X, watch as j, computed as v, onMounted as K, openBlock as y, createBlock as M, Teleport as O, createVNode as w, Transition as q, withCtx as g, withDirectives as F, createElementVNode as k, normalizeClass as $, unref as n, createElementBlock as G, createCommentVNode as x, normalizeStyle as H, renderSlot as f, vShow as I } from "vue";
-import { useBreakpoints as J, breakpointsTailwind as Q, useEventListener as S, useSwipe as U } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
-import { useTheme as W } from "../../composables/theme.js";
-import Y from "../scroll/Scroll.vue.js";
-import Z from "./Drawer.theme.js";
+import { defineComponent as X, ref as a, watchEffect as j, watch as K, computed as v, onMounted as M, openBlock as y, createBlock as O, Teleport as q, createVNode as w, Transition as F, withCtx as g, withDirectives as G, createElementVNode as k, normalizeClass as $, unref as n, createElementBlock as H, createCommentVNode as x, normalizeStyle as I, renderSlot as f, vShow as J } from "vue";
+import { useBreakpoints as Q, breakpointsTailwind as U, useEventListener as S, useSwipe as W } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useTheme as Y } from "../../composables/useTheme.js";
+import Z from "../scroll/Scroll.vue.js";
 const ee = {
   key: 0,
   ref: "swipeRef",
@@ -36,21 +35,21 @@ const ee = {
   validators: {
     position: te
   }
-}, fe = /* @__PURE__ */ P({
+}, pe = /* @__PURE__ */ X({
   ...ie,
   props: oe,
   emits: ["update:modelValue"],
-  setup(E, { expose: L, emit: u }) {
-    const t = E, i = a(!0), s = a(t.modelValue), r = a(null), d = a(null), c = a(!1), h = typeof t.breakpoint == "string", p = J(h ? Q : { md: t.breakpoint || 768 }).smaller(h ? t.breakpoint : "md");
-    X(() => {
+  setup(E, { expose: L, emit: B }) {
+    const t = E, u = B, i = a(!0), s = a(t.modelValue), r = a(null), d = a(null), c = a(!1), h = typeof t.breakpoint == "string", p = Q(h ? U : { md: t.breakpoint || 768 }).smaller(h ? t.breakpoint : "md");
+    j(() => {
       t.breakpoint && (p.value ? (i.value = !0, l()) : (i.value = !1, m()));
-    }), S(r, "pointerdown", l), j(() => t.modelValue, (e) => {
+    }), S(r, "pointerdown", l), K(() => t.modelValue, (e) => {
       s.value = e;
-    }), typeof window < "u" && S(document, "keydown", B);
-    function B(e) {
+    }), typeof window < "u" && S(document, "keydown", T);
+    function T(e) {
       e.key === "Escape" && s.value && l();
     }
-    U(d, {
+    W(d, {
       // passive: false,
       // onSwipe(e: TouchEvent) {
       //   if (lengthX.value < 0) {
@@ -71,17 +70,17 @@ const ee = {
         i.value && (t.position === "left" && o === "left" || t.position === "right" && o === "right" || t.position === "top" && o === "up" || t.position === "bottom" && o === "down") && l();
       }
     });
-    const T = v(() => {
+    const V = v(() => {
       const e = {};
       return t.position === "left" || t.position === "right" ? e.width = `${t.width}px` : (t.position === "top" || t.position === "bottom") && (e.height = `${t.height}px`), e;
-    }), V = v(() => {
+    }), N = v(() => {
       const e = [];
       return i.value && (e.push("absolute shadow-lg"), t.position === "top" ? e.push("top-0 inset-x-0") : t.position === "bottom" ? e.push("bottom-0 inset-x-0") : t.position === "left" ? e.push("left-0 inset-y-0") : t.position === "right" && e.push("right-0 inset-y-0")), e;
     });
-    function N(e) {
+    function _(e) {
       e.classList.add("inset-0"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
     }
-    function _(e, o) {
+    function C(e, o) {
       if (!i.value) {
         o();
         return;
@@ -90,9 +89,9 @@ const ee = {
         t.backdrop && e.classList.add("bg-gray-500/30"), t.position === "top" ? e.style.top = "0" : t.position === "bottom" ? e.style.bottom = "0" : t.position === "left" ? e.style.left = "0" : t.position === "right" && (e.style.right = "0");
       }, 1);
     }
-    function C(e) {
+    function R(e) {
     }
-    function R(e, o) {
+    function D(e, o) {
       e.addEventListener("transitionend", o), setTimeout(() => {
         t.backdrop && e.classList.remove("bg-gray-500/30"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
       }, 1);
@@ -106,25 +105,25 @@ const ee = {
     function m() {
       s.value = !0, u("update:modelValue", !0);
     }
-    K(() => {
+    M(() => {
       c.value = !0;
     });
-    const { styles: D, classes: b, className: A } = W("drawer", Z, t);
-    return L({ open: m, close: l }), (e, o) => c.value ? (y(), M(O, {
+    const { styles: A, classes: b, className: P } = Y("Drawer", {}, t);
+    return L({ open: m, close: l }), (e, o) => c.value ? (y(), O(q, {
       key: 0,
       to: e.teleportTo,
       disabled: !i.value
     }, [
-      w(q, {
+      w(F, {
         css: !1,
-        onBeforeEnter: N,
-        onEnter: _,
-        onBeforeLeave: C,
-        onLeave: R,
+        onBeforeEnter: _,
+        onEnter: C,
+        onBeforeLeave: R,
+        onLeave: D,
         onAfterLeave: z
       }, {
         default: g(() => [
-          F(k("div", {
+          G(k("div", {
             ref_key: "backdropRef",
             ref: r,
             class: $([
@@ -133,19 +132,19 @@ const ee = {
               i.value || !e.breakpoint ? "absolute z-40" : ""
             ])
           }, [
-            i.value && s.value ? (y(), G("div", ee, null, 512)) : x("", !0),
+            i.value && s.value ? (y(), H("div", ee, null, 512)) : x("", !0),
             k("div", {
               ref_key: "drawerRef",
               ref: d,
               class: $([
-                n(A),
-                V.value,
+                n(P),
+                N.value,
                 n(b).wrapper
               ]),
-              style: H([T.value, n(D)])
+              style: I([V.value, n(A)])
             }, [
               f(e.$slots, "header"),
-              w(Y, {
+              w(Z, {
                 scrollbar: !1,
                 vertical: "",
                 class: "flex-1"
@@ -158,7 +157,7 @@ const ee = {
               f(e.$slots, "footer")
             ], 6)
           ], 2), [
-            [I, e.breakpoint ? s.value && n(p) || !n(p) : s.value]
+            [J, e.breakpoint ? s.value && n(p) || !n(p) : s.value]
           ])
         ]),
         _: 3
@@ -167,5 +166,5 @@ const ee = {
   }
 });
 export {
-  fe as default
+  pe as default
 };

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

@@ -1,3 +1,2 @@
 export { default as XDrawer } from './Drawer.vue';
-export type { DrawerProps, DrawerPosition } from './Drawer.vue';
-export type { DrawerTheme } from './Drawer.theme';
+export type { DrawerProps, DrawerPosition, DrawerTheme } from './Drawer.vue';

package/lib/components/drawer/theme/Drawer.base.theme.d.ts

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

package/lib/components/drawer/theme/Drawer.carbon.theme.d.ts

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

package/lib/components/drawer/theme/Drawer.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Drawer.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/form/Form.vue.d.ts

@@ -1,4 +1,5 @@
 import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const formProps: {
     autoValidate: {
         type: BooleanConstructor;
@@ -30,6 +31,9 @@ export type FormInput = {
     validate: (val?: any) => boolean;
     setError: (val: string) => void;
 };
+type InternalClasses = 'wrapper';
+export interface FormTheme extends ThemeComponent<FormProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     autoValidate: {
         type: BooleanConstructor;
@@ -61,9 +65,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
 }, {
+    disabled: boolean;
     autoValidate: boolean;
     autoFocus: boolean;
-    disabled: boolean;
     errors: [FormError[], FormError];
 }, {}>, {
     default?(_: {}): any;

package/lib/components/form/Form.vue.js

@@ -1,7 +1,6 @@
-import { defineComponent as y, provide as b, onMounted as _, watch as F, nextTick as V, openBlock as g, createElementBlock as E, normalizeStyle as I, unref as r, normalizeClass as v, createElementVNode as B, renderSlot as x } from "vue";
-import { injectFormKey as A } from "../../composables/keys.js";
-import { useTheme as k } from "../../composables/theme.js";
-import S from "./Form.theme.js";
+import { defineComponent as h, provide as F, onMounted as _, watch as V, nextTick as g, openBlock as E, createElementBlock as I, normalizeStyle as v, unref as r, normalizeClass as B, createElementVNode as x, renderSlot as A } from "vue";
+import { injectFormKey as k } from "../../composables/keys.js";
+import { useTheme as S } from "../../composables/useTheme.js";
 const j = ["disabled"], w = {
   autoValidate: {
     type: Boolean,
@@ -19,15 +18,15 @@ const j = ["disabled"], w = {
 }, z = {
   name: "XForm",
   inheritAttrs: !1
-}, D = /* @__PURE__ */ y({
+}, T = /* @__PURE__ */ h({
   ...z,
   props: w,
   emits: ["submit"],
   setup(l, { emit: d }) {
-    const i = l, s = [];
-    b(A, {
+    const i = l, u = d, s = [];
+    F(k, {
       registerInput: (e, t, o, a) => {
-        const n = s.find((h) => h.name === e);
+        const n = s.find((b) => b.name === e);
         n ? (n.focus = t, n.validate = o, n.setError = a) : s.push({ name: e, focus: t, validate: o, setError: a });
       },
       unregisterInput: (e) => {
@@ -37,8 +36,8 @@ const j = ["disabled"], w = {
       isInsideForm: !0
     }), _(() => {
       i.autoFocus && s && s.length > 0 && s[0].focus();
-    }), F(() => i.errors, (e) => {
-      e && V(() => {
+    }), V(() => i.errors, (e) => {
+      e && g(() => {
         if (Array.isArray(e))
           e.forEach((t) => {
             const o = s.find((a) => a.name === t.field);
@@ -50,30 +49,30 @@ const j = ["disabled"], w = {
         }
       });
     });
-    const f = () => {
+    const c = () => {
       let e = !0;
       return s.forEach((t) => {
         !t.validate() && e && (e = !1, t.focus && t.focus());
       }), e;
-    }, u = (e) => {
+    }, f = (e) => {
       e.preventDefault(), e.stopPropagation();
-      const t = i.autoValidate ? f() : !0;
-      d("submit", t);
-    }, { styles: c, classes: m, className: p } = k("form", S, i);
-    return (e, t) => (g(), E("form", {
-      style: I(r(c)),
-      class: v([
-        r(p),
-        r(m).wrapper
+      const t = i.autoValidate ? c() : !0;
+      u("submit", t);
+    }, { styles: m, classes: p, className: y } = S("Form", {}, i);
+    return (e, t) => (E(), I("form", {
+      style: v(r(m)),
+      class: B([
+        r(y),
+        r(p).wrapper
       ]),
-      onSubmit: u
+      onSubmit: f
     }, [
-      B("fieldset", { disabled: e.disabled }, [
-        x(e.$slots, "default")
+      x("fieldset", { disabled: e.disabled }, [
+        A(e.$slots, "default")
       ], 8, j)
     ], 38));
   }
 });
 export {
-  D as default
+  T as default
 };

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

@@ -1,3 +1,2 @@
 export { default as XForm } from './Form.vue';
-export type { FormProps, FormError, FormInjection, FormInput } from './Form.vue';
-export type { FormTheme } from './Form.theme';
+export type { FormProps, FormError, FormInjection, FormInput, FormTheme } from './Form.vue';

package/lib/components/form/theme/Form.base.theme.d.ts

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

package/lib/components/form/theme/Form.carbon.theme.d.ts

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

package/lib/components/form/theme/Form.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Form.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/icon/Icon.vue.d.ts

@@ -1,4 +1,5 @@
 import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const iconProps: {
     icon: {
         type: StringConstructor;
@@ -10,12 +11,21 @@ declare const iconProps: {
         default: string;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 };
 export type IconProps = ExtractPublicPropTypes<typeof iconProps>;
+export type Icon = string | {
+    icon: string;
+    filled?: boolean;
+    viewBox?: string;
+};
+export type IconInjection = Record<string, Icon>;
+type InternalClasses = 'wrapper';
+export interface IconTheme extends ThemeComponent<IconProps, InternalClasses> {
+}
 declare const _default: import("vue").DefineComponent<{
     icon: {
         type: StringConstructor;
@@ -27,7 +37,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -42,13 +52,13 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/common").Size;
-    viewBox: string;
+    size: import("../../composables/useCommon").Size;
     filled: boolean;
+    viewBox: string;
 }, {}>;
 export default _default;

package/lib/components/icon/Icon.vue.js

@@ -1,9 +1,8 @@
-import { defineComponent as I, inject as T, ref as s, watchEffect as H, computed as L, normalizeStyle as h, unref as i, openBlock as x, createElementBlock as k, mergeProps as M, normalizeClass as O } from "vue";
-import { useCommon as y } from "../../composables/common.js";
+import { defineComponent as C, inject as T, ref as s, watchEffect as H, computed as L, normalizeStyle as h, unref as i, openBlock as x, createElementBlock as k, mergeProps as M, normalizeClass as O } from "vue";
+import { useCommon as y } from "../../composables/useCommon.js";
 import { injectIconsKey as g } from "../../composables/keys.js";
-import { useTheme as z } from "../../composables/theme.js";
-import E from "./Icon.theme.js";
-const V = ["innerHTML"], G = ["stroke-linejoin", "stroke-linecap", "stroke", "fill", "viewBox", "innerHTML"], P = {
+import { useTheme as z } from "../../composables/useTheme.js";
+const E = ["innerHTML"], V = ["stroke-linejoin", "stroke-linecap", "stroke", "fill", "viewBox", "innerHTML"], G = {
   ...y.props(),
   icon: {
     type: String,
@@ -14,16 +13,16 @@ const V = ["innerHTML"], G = ["stroke-linejoin", "stroke-linecap", "stroke", "fi
     type: String,
     default: "0 0 24 24"
   }
-}, W = {
+}, P = {
   name: "XIcon",
   validators: {
     ...y.validators()
   }
-}, $ = /* @__PURE__ */ I({
-  ...W,
-  props: P,
+}, N = /* @__PURE__ */ C({
+  ...P,
+  props: G,
   setup(_) {
-    const o = _, a = T(g, () => ({})), r = s(!1), t = s(""), n = s(o.filled), u = s(o.viewBox), f = s({});
+    const o = _, a = T(g, {}), r = s(!1), t = s(""), n = s(o.filled), u = s(o.viewBox), f = s({});
     H(() => {
       const e = a && o.icon && a[o.icon];
       if (r.value = !1, t.value = e, e)
@@ -35,7 +34,7 @@ const V = ["innerHTML"], G = ["stroke-linejoin", "stroke-linecap", "stroke", "fi
           } else
             r.value = !1, t.value = e;
         else
-          typeof e == "object" && (t.value = e.icon, n.value = e.filled || o.filled, u.value = e.viewBox || e.viewbox || o.viewBox);
+          typeof e == "object" && (t.value = e.icon, n.value = e.filled || o.filled, u.value = e.viewBox || o.viewBox);
       else
         t.value = o.icon || "";
     });
@@ -43,19 +42,19 @@ const V = ["innerHTML"], G = ["stroke-linejoin", "stroke-linecap", "stroke", "fi
       e = e.trim();
       const c = e.substring(e.indexOf(">") + 1, e.lastIndexOf("</svg>")), l = e.substring(e.indexOf("<svg") + 4, e.indexOf(">")).trim().match(/[\w-]+="[^"]*"/g), m = {};
       return l == null || l.forEach((j) => {
-        const [w, C] = j.split("=");
-        ["height", "width", "class"].includes(w) || (m[w] = C.replace(/(^"|"$)/g, ""));
+        const [w, I] = j.split("=");
+        ["height", "width", "class"].includes(w) || (m[w] = I.replace(/(^"|"$)/g, ""));
       }), {
         attributes: m,
         content: c
       };
     }
-    const { styles: b, classes: p, className: v } = z("icon", E, o), d = L(() => h(i(b)));
+    const { styles: b, classes: p, className: v } = z("Icon", {}, o), d = L(() => h(i(b)));
     return (e, c) => r.value ? (x(), k("svg", M({
       key: 0,
       style: d.value,
       class: ["shrink-0", i(v), i(p).wrapper]
-    }, f.value, { innerHTML: t.value }), null, 16, V)) : (x(), k("svg", {
+    }, f.value, { innerHTML: t.value }), null, 16, E)) : (x(), k("svg", {
       key: 1,
       style: h(d.value),
       xmlns: "http://www.w3.org/2000/svg",
@@ -66,9 +65,9 @@ const V = ["innerHTML"], G = ["stroke-linejoin", "stroke-linecap", "stroke", "fi
       fill: n.value ? "currentColor" : "none",
       viewBox: u.value,
       innerHTML: t.value
-    }, null, 14, G));
+    }, null, 14, V));
   }
 });
 export {
-  $ as default
+  N as default
 };

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

@@ -1,3 +1,2 @@
 export { default as XIcon } from './Icon.vue';
-export type { IconProps } from './Icon.vue';
-export type { IconTheme } from './Icon.theme';
+export type { IconProps, IconTheme, Icon, IconInjection } from './Icon.vue';

package/lib/components/icon/theme/Icon.base.theme.d.ts

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

package/lib/components/icon/theme/Icon.carbon.theme.d.ts

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

package/lib/components/icon/theme/Icon.carbon.theme.js

@@ -0,0 +1,11 @@
+const t = {
+  classes: {
+    wrapper: ({ props: s }) => {
+      const e = "inline";
+      return s.size === "xs" ? e + " h-3 w-3" : s.size === "sm" ? e + " h-4 w-4" : s.size === "lg" ? e + " h-6 w-6" : s.size === "xl" ? e + " h-9 w-9" : e + " h-4 w-4";
+    }
+  }
+}, i = t;
+export {
+  i as default
+};

package/lib/components/image/Image.vue.d.ts

@@ -1,8 +1,12 @@
 import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const imageProps: {
     src: StringConstructor;
 };
 export type ImageProps = ExtractPublicPropTypes<typeof imageProps>;
+type InternalClasses = 'wrapper';
+export interface ImageTheme extends ThemeComponent<ImageProps, InternalClasses> {
+}
 declare const _default: import("vue").DefineComponent<{
     src: StringConstructor;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{