@indielayer/ui 1.2.0 → 1.4.0

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

@@ -1,69 +1,66 @@
-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 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 { defineComponent as T, ref as $, computed as D, openBlock as t, createElementBlock as b, normalizeClass as o, unref as r, createElementVNode as a, normalizeStyle as R, withDirectives as S, vModelCheckbox as F, toDisplayString as L, createCommentVNode as i, createBlock as c } from "vue";
+import { useTheme as M } from "../../composables/useTheme.js";
+import { useCommon as f } from "../../composables/useCommon.js";
+import { useColors as P } from "../../composables/useColors.js";
+import { useInputtable as n } from "../../composables/useInputtable.js";
+import { useInteractive as v } from "../../composables/useInteractive.js";
+import U from "../spinner/Spinner.vue.js";
+import W from "../inputFooter/InputFooter.vue.js";
+const X = { class: "flex items-center" }, j = ["id", "aria-checked", "aria-disabled", "disabled", "name", "required", "value"], A = ["textContent"], G = {
   ...f.props(),
-  ...i.props(),
-  id: String,
-  label: String,
-  helper: String,
+  ...P.props("primary"),
+  ...v.props(),
+  ...n.props(),
   glow: Boolean
 }, H = {
   name: "XToggle",
   validators: {
-    ...c.validators()
+    ...f.validators()
   }
-}, re = /* @__PURE__ */ E({
+}, ee = /* @__PURE__ */ T({
   ...H,
   props: G,
-  emits: i.emits(!1),
-  setup(h, { expose: v, emit: n }) {
-    const t = h, u = I(null), l = N({
+  emits: n.emits(!1),
+  setup(h, { expose: k, emit: y }) {
+    const d = h, u = y, m = $(null), l = D({
       get() {
-        return !!t.modelValue;
+        return !!d.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 } = v(m), {
+      errorInternal: C,
+      hideFooterInternal: V,
+      reset: z,
+      validate: B,
+      setError: I
+    } = n(d, { focus: p, emit: u, withListeners: !1 }), { styles: q, classes: s, className: E } = M("Toggle", {}, d);
+    return k({ focus: p, blur: w, reset: z, validate: B, setError: I }), (e, g) => (t(), b("label", {
       class: o(["inline-block", [
-        r(S),
+        r(E),
         r(s).wrapper,
         e.disabled ? "cursor-not-allowed" : "cursor-pointer"
       ]])
     }, [
-      a("div", j, [
+      a("div", X, [
         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(r(q))
         }, [
           a("div", {
             class: o(r(s).buttonWrapper)
           }, [
-            D(a("input", {
+            S(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] = (N) => l.value = N),
               "aria-checked": l.value ? "true" : "false",
               "aria-disabled": e.disabled ? "true" : void 0,
               type: "checkbox",
@@ -72,8 +69,8 @@ const j = { class: "flex items-center" }, A = ["id", "aria-checked", "aria-disab
               name: e.name,
               required: e.required,
               value: e.modelValue
-            }, null, 8, A), [
-              [R, l.value]
+            }, null, 8, j), [
+              [F, l.value]
             ]),
             a("div", {
               class: o([
@@ -87,24 +84,25 @@ const j = { class: "flex items-center" }, A = ["id", "aria-checked", "aria-disab
             }, null, 2)
           ], 2)
         ], 6),
-        e.label ? (d(), g("span", {
+        e.label ? (t(), 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: L(e.label)
+        }, null, 10, A)) : i("", !0),
+        e.loading ? (t(), c(U, {
           key: 1,
           size: e.size,
           class: "ml-1"
-        }, null, 8, ["size"])) : b("", !0)
+        }, null, 8, ["size"])) : i("", !0)
       ]),
-      $(r(U), {
-        error: r(y),
+      r(V) ? i("", !0) : (t(), c(W, {
+        key: 0,
+        error: r(C),
         helper: e.helper
-      }, null, 8, ["error", "helper"])
+      }, null, 8, ["error", "helper"]))
     ], 2));
   }
 });
 export {
-  re as default
+  ee 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,19 @@
-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';
-export declare const injectTabKey: InjectionKey<TabGroupInjection>;
+import type { NotificationInjection } from '../components/notifications/Notifications.vue';
+import type { IconInjection } from '../components/icon/Icon.vue';
+import type { FormGroupInjection } from '../components/formGroup';
+import type { AccordionInjection } from '../components/accordion';
+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 injectTabGroupKey: 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 injectFormGroupKey: InjectionKey<FormGroupInjection>;
+export declare const injectIconsKey: InjectionKey<IconInjection>;
 export declare const injectButtonGroupKey: InjectionKey<ButtonGroupInjection>;
-export declare const injectNotificationKey: InjectionKey<any>;
+export declare const injectNotificationKey: InjectionKey<NotificationInjection>;
+export declare const injectAccordionKey: InjectionKey<AccordionInjection>;

package/lib/composables/keys.js

@@ -1,10 +1,12 @@
-const o = Symbol(), t = Symbol(), e = Symbol(), n = Symbol(), c = Symbol(), y = Symbol(), i = Symbol();
+const o = Symbol(), t = Symbol(), n = Symbol(), c = Symbol(), e = Symbol(), y = Symbol(), i = Symbol(), m = Symbol(), s = Symbol();
 export {
-  y as injectButtonGroupKey,
-  c as injectColorsKey,
-  t as injectFormKey,
-  n as injectIconsKey,
-  i as injectNotificationKey,
-  o as injectTabKey,
-  e as injectThemeKey
+  s as injectAccordionKey,
+  i as injectButtonGroupKey,
+  e as injectFormGroupKey,
+  c as injectFormKey,
+  y as injectIconsKey,
+  m as injectNotificationKey,
+  o as injectOptionsKey,
+  n as injectTabGroupKey,
+  t as injectThemeKey
 };

package/lib/composables/useColors.js

@@ -0,0 +1,52 @@
+import { inject as m, computed as p, unref as f } from "vue";
+import { injectThemeKey as g } from "./keys.js";
+import { tailwindColors as n, setOpacity as l, isValidColor as d, colorShade as t } from "../common/colors.js";
+import { mergeRightDeep as y } from "../common/utils.js";
+const i = {}, C = {
+  primary: n.sky,
+  secondary: n.slate,
+  success: n.green,
+  warning: n.yellow,
+  error: n.red
+}, a = (r) => n[r], c = (r, s) => l(r, s), w = () => {
+  const r = m(g, {}), s = p(() => y(C, f(r).colors || {}));
+  return {
+    getPalette: (e) => {
+      if (!e)
+        return a("gray");
+      const o = a(e);
+      if (o)
+        return o;
+      if (i[e])
+        return i[e];
+      if (s.value[e])
+        return s.value[e];
+      if (!d(e))
+        return console.warn(`Invalid color: ${e}`), a("gray");
+      const u = {
+        50: t(e, 0.9),
+        100: t(e, 0.8),
+        200: t(e, 0.6),
+        300: t(e, 0.4),
+        400: t(e, 0.1),
+        500: e,
+        600: t(e, -0.1),
+        700: t(e, -0.25),
+        800: t(e, -0.58),
+        900: t(e, -0.7),
+        950: t(e, -0.8)
+      };
+      return i[e] = u, u;
+    },
+    getColorOpacity: c
+  };
+};
+w.props = (r) => ({
+  color: {
+    type: String,
+    default: r
+  }
+});
+export {
+  w as useColors
+};

package/lib/composables/useFocusTrap.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPublicInstance } from 'vue';
+import { type MaybeRef } from 'vue';
+export declare function useFocusTrap(): {
+    initFocusTrap: (targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) => Promise<void>;
+    clearFocusTrap: () => void;
+};

package/lib/composables/useFocusTrap.js

@@ -0,0 +1,45 @@
+import { onUnmounted as y, unref as p, nextTick as x } from "vue";
+const m = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])';
+function w() {
+  let n = [], u = null, s = null, r = null;
+  async function b(e) {
+    e = p(e), e && (await x(), f(e), s && s.focus(), document.addEventListener("keydown", d), u = new MutationObserver(() => f(e)), e.$el ? u.observe(e.$el, { childList: !0, subtree: !0 }) : u.observe(e, { childList: !0, subtree: !0 }));
+  }
+  function f(e) {
+    if (e === null)
+      return;
+    let c;
+    e.$el ? c = e == null ? void 0 : e.$el.querySelectorAll(m) : e.querySelectorAll(m), n = Array.from(c || []), s = n[0] || null, r = n[n.length - 1] || null;
+  }
+  const d = (e) => {
+    var c;
+    if (e.key === "Tab") {
+      const t = e.shiftKey, o = document.activeElement;
+      if (!o) {
+        e.preventDefault(), (c = n[0]) == null || c.focus();
+        return;
+      }
+      const l = n[0], i = n[n.length - 1];
+      !t && o === i ? (e.preventDefault(), l == null || l.focus()) : t && o === l && (e.preventDefault(), i == null || i.focus());
+    } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+      e.preventDefault();
+      const t = document.activeElement, o = n.indexOf(t), l = n[o - 1];
+      l ? l.focus() : r && r.focus();
+    } else if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+      e.preventDefault();
+      const t = document.activeElement, o = n.indexOf(t), l = n[o + 1];
+      l ? l.focus() : s && s.focus();
+    }
+  }, a = () => {
+    document.removeEventListener("keydown", d), u == null || u.disconnect();
+  };
+  return y(() => {
+    a();
+  }), {
+    initFocusTrap: b,
+    clearFocusTrap: a
+  };
+}
+export {
+  w as useFocusTrap
+};

package/lib/composables/{inputtable.d.ts → useInputtable.d.ts}

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue';
+import type { MaybeRef, PropType } from 'vue';
 export interface XFormInputMethods {
     focus: () => void;
     validate: (val: any) => boolean;
@@ -12,8 +12,17 @@ export declare const useInputtable: {
     }): {
         isFirstValidation: import("vue").Ref<boolean>;
         errorInternal: any;
+        hideFooterInternal: any;
+        isFocused: import("vue").Ref<boolean>;
         isInsideForm: boolean;
-        inputListeners: {};
+        isInsideFormGroup: boolean;
+        inputListeners: MaybeRef<{
+            focus: (event: Event) => void;
+            blur: (event: Event) => void;
+            input: (event: Event) => void;
+            change: (event: Event) => void;
+        }>;
+        formGroup: import("..").FormGroupInjection;
         reset: () => void;
         validate: (val?: any) => boolean;
         setError: (val: string) => void;
@@ -21,6 +30,7 @@ export declare const useInputtable: {
     emits(withListeners?: boolean): string[];
     props(): {
         readonly modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly id: StringConstructor;
         readonly name: StringConstructor;
         readonly readonly: BooleanConstructor;
         readonly required: BooleanConstructor;
@@ -28,7 +38,10 @@ export declare const useInputtable: {
             readonly type: BooleanConstructor;
             readonly default: true;
         };
+        readonly label: StringConstructor;
+        readonly helper: StringConstructor;
         readonly error: StringConstructor;
+        readonly hideFooter: BooleanConstructor;
         readonly rules: {
             readonly type: ArrayConstructor;
             readonly default: () => never[];

package/lib/composables/useInputtable.js

@@ -0,0 +1,110 @@
+import { ref as i, watch as h, inject as G, computed as j, onMounted as A, onUnmounted as O } from "vue";
+import { injectFormGroupKey as K, injectFormKey as M } from "./keys.js";
+const y = (r, { focus: I, emit: o, withListeners: b = !0 }) => {
+  const s = i(!0), n = i(r.error), v = i(r.hideFooter), V = r.name ? r.name : (Math.random() + 1).toString(36).substring(7), a = i(V);
+  h(() => r.error, (e) => {
+    n.value = e;
+  }), h(() => r.name, (e) => {
+    e && (a.value = e);
+  });
+  const t = G(K, {
+    registerInputGroup: () => {
+    },
+    unregisterInputGroup: () => {
+    },
+    setValue: () => {
+    },
+    isInsideFormGroup: !1,
+    value: void 0
+  });
+  t.isInsideFormGroup && (v.value = !0);
+  const c = G(M, {
+    registerInput: () => {
+    },
+    unregisterInput: () => {
+    },
+    isInsideForm: !1
+  }), S = () => {
+    n.value = "", s.value = !0, o("update:modelValue", "");
+  }, F = (e) => {
+    n.value = e;
+  }, m = (e) => {
+    e = e || r.modelValue, s.value = !1;
+    for (let p = 0; p < r.rules.length; p++) {
+      const u = r.rules[p];
+      let l = !0;
+      if (typeof u == "function")
+        l = u(e);
+      else if (Array.isArray(u) && u.length === 2) {
+        const { 0: d, 1: g } = u;
+        l = d(e, g);
+      } else {
+        const d = u.fn, { options: g } = u;
+        l = d(e, g);
+      }
+      if (l !== !0)
+        return n.value = l, !1;
+    }
+    return n.value = "", !0;
+  }, f = i(!1), B = b ? j(() => ({
+    focus: (e) => {
+      f.value = !0, o("focus", e);
+    },
+    blur: (e) => {
+      f.value = !1, o("blur", e);
+    },
+    input: (e) => {
+      r.validateOnInput && !s.value && m(e.target.value), o("update:modelValue", e.target.value);
+    },
+    change: (e) => o("change", e)
+  })) : {
+    focus: () => {
+    },
+    blur: () => {
+    },
+    input: () => {
+    },
+    change: () => {
+    }
+  };
+  return A(() => {
+    t.isInsideFormGroup ? t.registerInputGroup(a.value, I) : c.registerInput(a.value, I, m, F);
+  }), O(() => {
+    t.isInsideFormGroup ? t.unregisterInputGroup(a.value) : c.unregisterInput(a.value);
+  }), {
+    isFirstValidation: s,
+    errorInternal: n,
+    hideFooterInternal: v,
+    isFocused: f,
+    isInsideForm: c.isInsideForm,
+    isInsideFormGroup: t.isInsideFormGroup,
+    inputListeners: B,
+    formGroup: t,
+    reset: S,
+    validate: m,
+    setError: F
+  };
+};
+y.emits = (r = !0) => r ? ["update:modelValue", "blur", "focus", "input", "change"] : ["update:modelValue"];
+y.props = () => ({
+  modelValue: [String, Number, Boolean, Object, Array],
+  id: String,
+  name: String,
+  readonly: Boolean,
+  required: Boolean,
+  validateOnInput: {
+    type: Boolean,
+    default: !0
+  },
+  label: String,
+  helper: String,
+  error: String,
+  hideFooter: Boolean,
+  rules: {
+    type: Array,
+    default: () => []
+  }
+});
+export {
+  y as useInputtable
+};

package/lib/composables/{interactive.d.ts → useInteractive.d.ts}

@@ -1,7 +1,10 @@
-import type { Ref } from 'vue';
+import type { LoaderStatus } from 'src/components/loader/Loader.vue';
+import type { PropType, Ref } from 'vue';
 export interface InteractiveProps {
     disabled?: boolean;
     loading?: boolean;
+    loadingLabel?: string;
+    loadingStatus?: LoaderStatus;
 }
 export declare const useInteractive: {
     (el: Ref<HTMLElement | null>): {
@@ -11,5 +14,10 @@ export declare const useInteractive: {
     props(): {
         readonly disabled: BooleanConstructor;
         readonly loading: BooleanConstructor;
+        readonly loadingLabel: StringConstructor;
+        readonly loadingStatus: {
+            readonly type: PropType<LoaderStatus>;
+            readonly default: "active";
+        };
     };
 };

package/lib/composables/useInteractive.js

@@ -0,0 +1,22 @@
+const t = (o) => ({
+  focus: () => {
+    var a, e;
+    return (e = (a = o.value) == null ? void 0 : a.focus) == null ? void 0 : e.call(a);
+  },
+  blur: () => {
+    var a, e;
+    return (e = (a = o.value) == null ? void 0 : a.blur) == null ? void 0 : e.call(a);
+  }
+});
+t.props = () => ({
+  disabled: Boolean,
+  loading: Boolean,
+  loadingLabel: String,
+  loadingStatus: {
+    type: String,
+    default: "active"
+  }
+});
+export {
+  t as useInteractive
+};

package/lib/composables/useNotifications.d.ts

@@ -0,0 +1,2 @@
+import type { NotificationInjection } from '../components/notifications/Notifications.vue';
+export declare const useNotifications: (key?: symbol | string) => NotificationInjection | undefined;

package/lib/composables/{theme.d.ts → useTheme.d.ts}

@@ -1,11 +1,14 @@
-import { type StyleValue, type Slots, type UnwrapNestedRefs, type UnwrapRef, type MaybeRef } from 'vue';
-import { type ColorComposition } from './colors';
-import { type CSSComposition } from './css';
+import { type Slots, type UnwrapNestedRefs, type UnwrapRef, type MaybeRef, type CSSProperties } from 'vue';
+import { type ColorComposition } from './useColors';
+import { type CSSComposition } from './useCSS';
+import type { ComponentThemes } from 'src/theme';
+export type Stylish = false | null | undefined | string | CSSProperties;
+export type StyleValue = Stylish | Array<Stylish>;
 export type ThemeVueClass = string | Record<string, boolean> | (string | Record<string, boolean>)[];
 export type ThemeClasses<P, K extends string = string, D = undefined> = Record<K, string | ((params: ThemeParams<P, D>) => ThemeVueClass)>;
 export type ThemeStyles<P, D> = StyleValue | ((params: ThemeParams<P, D>) => StyleValue);
 export interface ThemeComponent<P = object, K extends string = string, D = object> {
-    classes?: ThemeClasses<P, K, D>;
+    classes?: Partial<ThemeClasses<P, K, D>>;
     styles?: ThemeStyles<P, D>;
 }
 export type ThemeParams<P = Record<string, any>, D = Record<string, any>> = {
@@ -16,8 +19,8 @@ export type ThemeParams<P = Record<string, any>, D = Record<string, any>> = {
     rtl?: boolean;
     data: UnwrapNestedRefs<D>;
 };
-export declare const useTheme: <P extends object = object, K extends string = string, D extends object = object>(namespace: string, defaultTheme?: ThemeComponent<P, K, D>, props?: MaybeRef<P>, data?: D) => {
-    classPrefix: import("vue").ComputedRef<any>;
+export declare const useTheme: <P extends object = object, K extends string = string, D extends object = object>(namespace: keyof ComponentThemes, defaultTheme?: ThemeComponent<P, K, D>, props?: MaybeRef<P>, data?: D) => {
+    classPrefix: import("vue").ComputedRef<string>;
     className: import("vue").ComputedRef<string>;
     colors: ColorComposition;
     classes: import("vue").ComputedRef<Record<K, ThemeVueClass>>;