@indielayer/ui 1.1.0 → 1.3.0

package/lib/components/textarea/Textarea.vue.js

@@ -1,16 +1,16 @@
-import { defineComponent as V, ref as B, watch as P, openBlock as m, createElementBlock as u, normalizeStyle as K, unref as r, normalizeClass as p, toDisplayString as R, createCommentVNode as j, createElementVNode as D, mergeProps as H, toHandlers as L, withKeys as X, createVNode as F } from "vue";
-import { useResizeObserver as O, useEventListener as q } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
-import { useCSS as A } from "../../composables/css.js";
-import { useTheme as G } from "../../composables/theme.js";
-import { useCommon as d } from "../../composables/common.js";
-import { useColors as J } from "../../composables/colors.js";
-import { useInputtable as s } from "../../composables/inputtable.js";
-import { useInteractive as f } from "../../composables/interactive.js";
-import M from "../helpers/InputError.js";
-import Q from "./Textarea.theme.js";
-const U = ["textContent"], W = ["disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value", "onKeydown"], Y = {
-  ...d.props(),
-  ...f.props(),
+import { defineComponent as I, ref as V, watch as P, openBlock as m, createBlock as d, normalizeStyle as q, unref as r, normalizeClass as K, withCtx as R, createElementVNode as j, mergeProps as F, toHandlers as H, withKeys as L, createCommentVNode as $ } from "vue";
+import { useResizeObserver as D, useEventListener as O } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useCSS as X } from "../../composables/useCSS.js";
+import { useTheme as A } from "../../composables/useTheme.js";
+import { useCommon as u } from "../../composables/useCommon.js";
+import { useColors as G } from "../../composables/useColors.js";
+import { useInputtable as s } from "../../composables/useInputtable.js";
+import { useInteractive as p } from "../../composables/useInteractive.js";
+import J from "../label/Label.vue.js";
+import M from "../inputFooter/InputFooter.vue.js";
+const Q = ["disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value", "onKeydown"], U = {
+  ...u.props(),
+  ...p.props(),
   ...s.props(),
   helper: String,
   label: String,
@@ -18,93 +18,96 @@ const U = ["textContent"], W = ["disabled", "max", "maxlength", "min", "dir", "r
     type: String,
     default: "ltr"
   },
-  rows: [Number, String],
+  rows: {
+    type: [Number, String],
+    default: 2
+  },
   max: [Number, String],
   maxlength: [Number, String],
   min: [Number, String],
   minlength: [Number, String],
   placeholder: String,
-  adjustToText: {
-    type: Boolean,
-    default: !0
-  },
+  adjustToText: Boolean,
   preventEnter: Boolean,
   block: Boolean
-}, Z = {
+}, W = {
   name: "XTextarea",
   validators: {
-    ...d.validators()
+    ...u.validators()
   }
-}, ue = /* @__PURE__ */ V({
-  ...Z,
-  props: Y,
+}, me = /* @__PURE__ */ I({
+  ...W,
+  props: U,
   emits: s.emits(),
-  setup(c, { expose: h, emit: g }) {
-    const o = c, t = B(null);
-    O(t, n), typeof window < "u" && q(window, "resize", n), P([() => o.modelValue, () => o.size], () => {
+  setup(f, { expose: c, emit: h }) {
+    const t = f, b = h, o = V(null);
+    D(o, n), typeof window < "u" && O(window, "resize", n), P([() => t.modelValue, () => t.size], () => {
       setTimeout(n);
     });
-    const b = A("textarea"), y = J().getPalette("primary"), v = b.get("border", y[400]);
+    const g = X("textarea"), y = G().getPalette("primary"), v = g.get("border", y[400]);
     function w() {
       n();
     }
     function S(e) {
-      o.preventEnter && e.preventDefault(), e.stopPropagation();
+      t.preventEnter && e.preventDefault(), e.stopPropagation();
     }
     function n() {
-      o.adjustToText && t.value && (t.value.style.height = "1px", t.value.style.height = 2 + t.value.scrollHeight + "px");
+      t.adjustToText && o.value && (o.value.style.height = "1px", o.value.style.height = 2 + o.value.scrollHeight + "px");
     }
-    const { focus: i, blur: N } = f(t), {
+    const { focus: a, blur: k } = p(o), {
       errorInternal: l,
-      isInsideForm: x,
-      inputListeners: C,
-      reset: E,
-      validate: k,
-      setError: T
-    } = s(o, { focus: i, emit: g }), { styles: z, classes: a, className: I } = G("textarea", Q, o, { errorInternal: l });
-    return h({ focus: i, blur: N, reset: E, validate: k, setError: T }), (e, _) => (m(), u("label", {
-      style: K(r(z)),
-      class: p(["relative", [
-        r(I),
-        r(a).wrapper,
-        { "mb-3": r(x), "w-full": e.block }
-      ]])
-    }, [
-      e.label ? (m(), u("p", {
-        key: 0,
-        class: p(r(a).label),
-        textContent: R(e.label)
-      }, null, 10, U)) : j("", !0),
-      D("textarea", H({
-        ref_key: "elRef",
-        ref: t,
-        class: ["", [
-          r(a).input,
-          r(l) ? "border-red-500 dark:border-red-400 focus:outline-red-500" : "focus:outline-[color:var(--x-textarea-border)]"
-        ]],
-        style: r(v),
-        disabled: e.disabled,
-        max: e.max,
-        maxlength: e.maxlength,
-        min: e.min,
-        dir: e.dir,
-        rows: e.rows,
-        minlength: e.minlength,
-        name: e.name,
-        placeholder: e.placeholder,
-        readonly: e.readonly,
-        value: e.modelValue ? String(e.modelValue) : ""
-      }, L(r(C), !0), {
-        onKeydown: X(S, ["enter"]),
-        onInput: w
-      }), null, 16, W),
-      F(r(M), {
-        error: r(l),
-        helper: e.helper
-      }, null, 8, ["error", "helper"])
-    ], 6));
+      isInsideForm: N,
+      inputListeners: T,
+      reset: C,
+      validate: z,
+      setError: E
+    } = s(t, { focus: a, emit: b }), { styles: x, classes: i, className: B } = A("Textarea", {}, t, { errorInternal: l });
+    return c({ focus: a, blur: k, reset: C, validate: z, setError: E }), (e, Z) => (m(), d(J, {
+      style: q(r(x)),
+      block: e.block,
+      disabled: e.disabled,
+      required: e.required,
+      "is-inside-form": r(N),
+      label: e.label,
+      class: K([
+        r(B),
+        r(i).wrapper
+      ])
+    }, {
+      default: R(() => [
+        j("textarea", F({
+          ref_key: "elRef",
+          ref: o,
+          class: ["", [
+            r(i).input,
+            r(l) ? "border-red-500 dark:border-red-400 focus:outline-red-500" : "focus:outline-[color:var(--x-textarea-border)]"
+          ]],
+          style: r(v),
+          disabled: e.disabled,
+          max: e.max,
+          maxlength: e.maxlength,
+          min: e.min,
+          dir: e.dir,
+          rows: e.rows,
+          minlength: e.minlength,
+          name: e.name,
+          placeholder: e.placeholder,
+          readonly: e.readonly,
+          value: e.modelValue ? String(e.modelValue) : ""
+        }, H(r(T), !0), {
+          onKeydown: L(S, ["enter"]),
+          onInput: w
+        }), null, 16, Q),
+        e.hideFooter ? $("", !0) : (m(), d(M, {
+          key: 0,
+          error: r(l),
+          helper: e.helper
+        }, null, 8, ["error", "helper"]))
+      ]),
+      _: 1
+    }, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class"]));
   }
 });
 export {
-  ue as default
+  me as default
 };

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

@@ -1,2 +1,2 @@
 export { default as XTextarea } from './Textarea.vue';
-export type { TextareaProps } from './Textarea.vue';
+export type { TextareaProps, TextareaTheme } from './Textarea.vue';

package/lib/components/textarea/theme/Textarea.base.theme.d.ts

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

package/lib/components/textarea/theme/Textarea.base.theme.js

@@ -0,0 +1,12 @@
+const t = {
+  classes: {
+    wrapper: "",
+    input: ({ props: r, data: a }) => {
+      const e = ["resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md"];
+      return !a.errorInternal && !r.disabled && e.push("hover:border-gray-400 dark:hover:border-gray-500"), r.size === "xs" ? e.push("px-2 py-1 text-xs") : r.size === "sm" ? e.push("px-2 py-2 text-sm") : r.size === "lg" ? e.push("px-4 py-3 text-lg") : r.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(r.disabled ? "bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed" : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"), e;
+    }
+  }
+}, s = t;
+export {
+  s as default
+};

package/lib/components/textarea/theme/Textarea.carbon.theme.d.ts

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

package/lib/components/textarea/theme/Textarea.carbon.theme.js

@@ -0,0 +1,12 @@
+const t = {
+  classes: {
+    wrapper: "",
+    input: ({ props: r, data: a }) => {
+      const e = ["resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4"];
+      return !a.errorInternal && !r.disabled && e.push("hover:border-gray-400 dark:hover:border-gray-500"), r.size === "xs" || r.size === "sm" ? e.push("py-1.5") : r.size === "lg" || r.size === "xl" ? e.push("py-3.5") : e.push("py-2.5"), r.disabled ? e.push("bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed") : r.readonly ? e.push("bg-white dark:bg-gray-900 text-gray-700") : e.push("bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200"), e;
+    }
+  }
+}, s = t;
+export {
+  s as default
+};

package/lib/components/themeProvider/ThemeProvider.vue.d.ts

@@ -0,0 +1,15 @@
+import { type PropType } from 'vue';
+import { type UITheme } from '../../theme';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    theme: PropType<UITheme>;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    theme: PropType<UITheme>;
+}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/themeProvider/ThemeProvider.vue.js

@@ -0,0 +1,18 @@
+import { defineComponent as a, inject as c, ref as i, unref as r, provide as f, watchEffect as l, renderSlot as p } from "vue";
+import { injectThemeKey as n } from "../../composables/keys.js";
+import { injectThemeStyles as u } from "../../theme.js";
+const h = { name: "XThemeProvider" }, y = /* @__PURE__ */ a({
+  ...h,
+  props: {
+    theme: Object
+  },
+  setup(m) {
+    const t = m, o = c(n, {}), e = i(t.theme || r(o) || {});
+    return f(n, e), l(() => {
+      e.value = t.theme || r(o) || {}, e.value.styles && u(e.value.name || "", e.value.styles);
+    }), (s, d) => p(s.$slots, "default");
+  }
+});
+export {
+  y as default
+};

package/lib/components/themeProvider/ThemeProvider.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ThemeProvider.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1 @@
+export { default as XThemeProvider } from './ThemeProvider.vue';

package/lib/components/toggle/Toggle.vue.d.ts

@@ -1,4 +1,5 @@
 import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const toggleProps: {
     id: StringConstructor;
     label: StringConstructor;
@@ -13,23 +14,32 @@ declare const toggleProps: {
         readonly default: true;
     };
     error: StringConstructor;
+    hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     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 ToggleProps = ExtractPublicPropTypes<typeof toggleProps>;
+type InternalClasses = 'wrapper' | 'label' | 'buttonWrapper' | 'button';
+export interface ToggleTheme extends ThemeComponent<ToggleProps, InternalClasses> {
+}
 declare const _default: import("vue").DefineComponent<{
     id: StringConstructor;
     label: StringConstructor;
@@ -44,18 +54,24 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     error: StringConstructor;
+    hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     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;
     };
@@ -79,32 +95,40 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     error: StringConstructor;
+    hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     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;
     };
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
-    color: string;
-    size: import("../../composables/common").Size;
+    size: import("../../composables/useCommon").Size;
     required: boolean;
-    loading: boolean;
     glow: boolean;
+    color: string;
+    disabled: boolean;
+    loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
     validateOnInput: boolean;
+    hideFooter: boolean;
     rules: unknown[];
 }, {}>;
 export default _default;

package/lib/components/toggle/Toggle.vue.js

@@ -1,60 +1,59 @@
-import { defineComponent as E, ref as I, computed as N, openBlock as d, createElementBlock as g, normalizeClass as o, unref as r, createElementVNode as a, normalizeStyle as q, withDirectives as D, vModelCheckbox as R, toDisplayString as T, createCommentVNode as b, createBlock as X, createVNode as $ } from "vue";
-import { useTheme as L } from "../../composables/theme.js";
-import { useCommon as c } from "../../composables/common.js";
-import { useColors as M } from "../../composables/colors.js";
-import { useInputtable as i } from "../../composables/inputtable.js";
-import { useInteractive as f } from "../../composables/interactive.js";
+import { defineComponent as I, ref as N, computed as T, openBlock as i, createElementBlock as b, normalizeClass as o, unref as r, createElementVNode as a, normalizeStyle as $, withDirectives as D, vModelCheckbox as R, toDisplayString as F, createCommentVNode as d, createBlock as c } from "vue";
+import { useTheme as L } from "../../composables/useTheme.js";
+import { useCommon as f } from "../../composables/useCommon.js";
+import { useColors as M } from "../../composables/useColors.js";
+import { useInputtable as n } from "../../composables/useInputtable.js";
+import { useInteractive as h } from "../../composables/useInteractive.js";
 import P from "../spinner/Spinner.vue.js";
-import U from "../helpers/InputError.js";
-import W from "./Toggle.theme.js";
-const j = { class: "flex items-center" }, A = ["id", "aria-checked", "aria-disabled", "disabled", "name", "required", "value"], F = ["textContent"], G = {
-  ...c.props(),
-  ...M.props("primary"),
+import U from "../inputFooter/InputFooter.vue.js";
+const W = { class: "flex items-center" }, X = ["id", "aria-checked", "aria-disabled", "disabled", "name", "required", "value"], j = ["textContent"], A = {
   ...f.props(),
-  ...i.props(),
+  ...M.props("primary"),
+  ...h.props(),
+  ...n.props(),
   id: String,
   label: String,
   helper: String,
   glow: Boolean
-}, H = {
+}, G = {
   name: "XToggle",
   validators: {
-    ...c.validators()
+    ...f.validators()
   }
-}, re = /* @__PURE__ */ E({
-  ...H,
-  props: G,
-  emits: i.emits(!1),
-  setup(h, { expose: v, emit: n }) {
-    const t = h, u = I(null), l = N({
+}, x = /* @__PURE__ */ I({
+  ...G,
+  props: A,
+  emits: n.emits(!1),
+  setup(v, { expose: k, emit: y }) {
+    const t = v, u = y, m = N(null), l = T({
       get() {
         return !!t.modelValue;
       },
       set(e) {
-        n("update:modelValue", e);
+        u("update:modelValue", e);
       }
-    }), { focus: m, blur: k } = f(u), {
-      errorInternal: y,
-      reset: w,
-      validate: C,
-      setError: V
-    } = i(t, { focus: m, emit: n, withListeners: !1 }), { styles: z, classes: s, className: S } = L("toggle", W, t);
-    return v({ focus: m, blur: k, reset: w, validate: C, setError: V }), (e, p) => (d(), g("label", {
+    }), { focus: p, blur: w } = h(m), {
+      errorInternal: C,
+      reset: V,
+      validate: z,
+      setError: S
+    } = n(t, { focus: p, emit: u, withListeners: !1 }), { styles: B, classes: s, className: q } = L("Toggle", {}, t);
+    return k({ focus: p, blur: w, reset: V, validate: z, setError: S }), (e, g) => (i(), b("label", {
       class: o(["inline-block", [
-        r(S),
+        r(q),
         r(s).wrapper,
         e.disabled ? "cursor-not-allowed" : "cursor-pointer"
       ]])
     }, [
-      a("div", j, [
+      a("div", W, [
         a("div", {
-          class: o(["flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 border-transparent", {
+          class: o(["flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 !border-transparent", {
             [`shadow-lg shadow-${e.color}-500/50`]: e.glow && e.modelValue,
             "bg-gray-300 dark:bg-gray-500": !e.disabled && !l.value && !e.loading,
             "bg-gray-100 dark:bg-gray-700": e.disabled || e.loading,
             "bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]": !e.disabled && l.value
           }]),
-          style: q(r(z))
+          style: $(r(B))
         }, [
           a("div", {
             class: o(r(s).buttonWrapper)
@@ -62,8 +61,8 @@ const j = { class: "flex items-center" }, A = ["id", "aria-checked", "aria-disab
             D(a("input", {
               id: e.id,
               ref_key: "elRef",
-              ref: u,
-              "onUpdate:modelValue": p[0] || (p[0] = (B) => l.value = B),
+              ref: m,
+              "onUpdate:modelValue": g[0] || (g[0] = (E) => l.value = E),
               "aria-checked": l.value ? "true" : "false",
               "aria-disabled": e.disabled ? "true" : void 0,
               type: "checkbox",
@@ -72,7 +71,7 @@ const j = { class: "flex items-center" }, A = ["id", "aria-checked", "aria-disab
               name: e.name,
               required: e.required,
               value: e.modelValue
-            }, null, 8, A), [
+            }, null, 8, X), [
               [R, l.value]
             ]),
             a("div", {
@@ -87,24 +86,25 @@ const j = { class: "flex items-center" }, A = ["id", "aria-checked", "aria-disab
             }, null, 2)
           ], 2)
         ], 6),
-        e.label ? (d(), g("span", {
+        e.label ? (i(), b("span", {
           key: 0,
           class: o(["ml-2", r(s).label]),
-          textContent: T(e.label)
-        }, null, 10, F)) : b("", !0),
-        e.loading ? (d(), X(P, {
+          textContent: F(e.label)
+        }, null, 10, j)) : d("", !0),
+        e.loading ? (i(), c(P, {
           key: 1,
           size: e.size,
           class: "ml-1"
-        }, null, 8, ["size"])) : b("", !0)
+        }, null, 8, ["size"])) : d("", !0)
       ]),
-      $(r(U), {
-        error: r(y),
+      e.hideFooter ? d("", !0) : (i(), c(U, {
+        key: 0,
+        error: r(C),
         helper: e.helper
-      }, null, 8, ["error", "helper"])
+      }, null, 8, ["error", "helper"]))
     ], 2));
   }
 });
 export {
-  re as default
+  x as default
 };

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

@@ -1,2 +1,2 @@
 export { default as XToggle } from './Toggle.vue';
-export type { ToggleProps } from './Toggle.vue';
+export type { ToggleProps, ToggleTheme } from './Toggle.vue';

package/lib/components/toggle/theme/Toggle.base.theme.d.ts

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

package/lib/components/toggle/theme/Toggle.carbon.theme.d.ts

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

package/lib/components/toggle/theme/Toggle.carbon.theme.js

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

package/lib/components/tooltip/Tooltip.vue.js

@@ -1,13 +1,17 @@
-import { defineComponent as r, openBlock as s, createBlock as a, withCtx as t, createElementVNode as n, createVNode as l, renderSlot as o } from "vue";
+import { defineComponent as s, openBlock as r, createBlock as a, withCtx as t, createElementVNode as n, createVNode as l, renderSlot as o } from "vue";
 import c from "../popover/Popover.vue.js";
-import m from "../popover/PopoverContainer.vue.js";
-const _ = { class: "dark" }, p = { name: "XTooltip" }, h = /* @__PURE__ */ r({
-  ...p,
-  setup(d) {
-    return (e, i) => (s(), a(c, { hover: "" }, {
+import "../popover/Popover.vue2.js";
+import i from "../popover/PopoverContainer.vue.js";
+const m = { class: "dark" }, _ = { name: "XTooltip" }, k = /* @__PURE__ */ s({
+  ..._,
+  setup(p) {
+    return (e, d) => (r(), a(c, {
+      triggers: ["hover"],
+      class: "inline-block"
+    }, {
       content: t(() => [
-        n("div", _, [
-          l(m, { class: "p-2 text-white text-sm w-max max-w-xs" }, {
+        n("div", m, [
+          l(i, { class: "p-2 text-white text-sm w-max max-w-xs" }, {
             default: t(() => [
               o(e.$slots, "tooltip")
             ]),
@@ -23,5 +27,5 @@ const _ = { class: "dark" }, p = { name: "XTooltip" }, h = /* @__PURE__ */ r({
   }
 });
 export {
-  h as default
+  k as default
 };

package/lib/composables/index.d.ts

@@ -1,7 +1,7 @@
 export * from './keys';
-export * from './common';
-export * from './colors';
-export * from './css';
-export * from './inputtable';
-export * from './interactive';
-export * from './notifications';
+export * from './useCommon';
+export * from './useColors';
+export * from './useCSS';
+export * from './useInputtable';
+export * from './useInteractive';
+export * from './useNotifications';

package/lib/composables/keys.d.ts

@@ -1,11 +1,15 @@
-import type { InjectionKey } from 'vue';
+import type { InjectionKey, MaybeRef } from 'vue';
 import type { FormInjection } from '../components/form/Form.vue';
 import type { TabGroupInjection } from '../components/tab/TabGroup.vue';
 import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue';
+import type { NotificationInjection } from '../components/notifications/Notifications.vue';
+import type { IconInjection } from '../components/icon/Icon.vue';
+import type { UIOptions } from '../create';
+import type { UITheme } from '../theme';
+export declare const injectOptionsKey: InjectionKey<UIOptions>;
+export declare const injectThemeKey: InjectionKey<MaybeRef<UITheme>>;
 export declare const injectTabKey: InjectionKey<TabGroupInjection>;
 export declare const injectFormKey: InjectionKey<FormInjection>;
-export declare const injectThemeKey: InjectionKey<any>;
-export declare const injectIconsKey: InjectionKey<any>;
-export declare const injectColorsKey: InjectionKey<any>;
+export declare const injectIconsKey: InjectionKey<IconInjection>;
 export declare const injectButtonGroupKey: InjectionKey<ButtonGroupInjection>;
-export declare const injectNotificationKey: InjectionKey<any>;
+export declare const injectNotificationKey: InjectionKey<NotificationInjection>;