@indielayer/ui 1.0.10 → 1.2.0

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

@@ -0,0 +1,29 @@
+const i = {
+  classes: {
+    wrapper: "",
+    label: ({ props: t }) => {
+      const e = "font-medium text-gray-800 dark:text-gray-200";
+      return t.size === "xs" ? e + " text-xs" : t.size === "sm" ? e + " text-sm" : t.size === "lg" ? e + " text-lg" : t.size === "xl" ? e + " text-xl" : e + " text-sm";
+    },
+    buttonWrapper: ({ props: t }) => {
+      let e = "relative shrink-0";
+      return t.size === "sm" || t.size === "xs" ? e += " w-6" : t.size === "lg" ? e += " w-10" : t.size === "xl" ? e += " w-12" : e += " w-8", e;
+    },
+    button: ({ props: t }) => {
+      let e = "rounded-full shadow transform transition duration-150 shrink-0";
+      return t.size === "sm" || t.size === "xs" ? e += " h-3 w-3" : t.size === "lg" ? e += " h-5 w-5" : t.size === "xl" ? e += " h-6 w-6" : e += " h-4 w-4", e;
+    }
+  },
+  styles: ({ colors: t, props: e, css: l }) => {
+    const s = t.getPalette(e.color);
+    return l.variables({
+      bg: s[500],
+      dark: {
+        bg: s[600]
+      }
+    });
+  }
+}, r = i;
+export {
+  r as default
+};

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

@@ -1,3 +1,35 @@
+import { type ExtractPublicPropTypes } from 'vue';
+declare const toggleProps: {
+    id: StringConstructor;
+    label: StringConstructor;
+    helper: StringConstructor;
+    glow: BooleanConstructor;
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    error: StringConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type ToggleProps = ExtractPublicPropTypes<typeof toggleProps>;
 declare const _default: import("vue").DefineComponent<{
     id: StringConstructor;
     label: StringConstructor;
@@ -31,7 +63,7 @@ declare const _default: import("vue").DefineComponent<{
     focus: () => void | undefined;
     blur: () => void | undefined;
     reset: () => void;
-    validate: (val: any) => boolean;
+    validate: (val?: any) => boolean;
     setError: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: StringConstructor;
@@ -65,12 +97,12 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
+    disabled: boolean;
+    color: string;
     size: import("../../composables/common").Size;
     required: boolean;
-    color: string;
-    glow: boolean;
-    disabled: boolean;
     loading: boolean;
+    glow: boolean;
     readonly: boolean;
     validateOnInput: boolean;
     rules: unknown[];

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

@@ -0,0 +1,110 @@
+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"),
+  ...f.props(),
+  ...i.props(),
+  id: String,
+  label: String,
+  helper: String,
+  glow: Boolean
+}, H = {
+  name: "XToggle",
+  validators: {
+    ...c.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({
+      get() {
+        return !!t.modelValue;
+      },
+      set(e) {
+        n("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", {
+      class: o(["inline-block", [
+        r(S),
+        r(s).wrapper,
+        e.disabled ? "cursor-not-allowed" : "cursor-pointer"
+      ]])
+    }, [
+      a("div", j, [
+        a("div", {
+          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))
+        }, [
+          a("div", {
+            class: o(r(s).buttonWrapper)
+          }, [
+            D(a("input", {
+              id: e.id,
+              ref_key: "elRef",
+              ref: u,
+              "onUpdate:modelValue": p[0] || (p[0] = (B) => l.value = B),
+              "aria-checked": l.value ? "true" : "false",
+              "aria-disabled": e.disabled ? "true" : void 0,
+              type: "checkbox",
+              class: "hidden",
+              disabled: e.disabled || e.loading,
+              name: e.name,
+              required: e.required,
+              value: e.modelValue
+            }, null, 8, A), [
+              [R, l.value]
+            ]),
+            a("div", {
+              class: o([
+                r(s).button,
+                {
+                  "translate-x-full": l.value,
+                  shadow: !e.disabled
+                },
+                e.disabled ? "bg-gray-50 dark:bg-gray-800" : "bg-white dark:bg-gray-800"
+              ])
+            }, null, 2)
+          ], 2)
+        ], 6),
+        e.label ? (d(), g("span", {
+          key: 0,
+          class: o(["ml-2", r(s).label]),
+          textContent: T(e.label)
+        }, null, 10, F)) : b("", !0),
+        e.loading ? (d(), X(P, {
+          key: 1,
+          size: e.size,
+          class: "ml-1"
+        }, null, 8, ["size"])) : b("", !0)
+      ]),
+      $(r(U), {
+        error: r(y),
+        helper: e.helper
+      }, null, 8, ["error", "helper"])
+    ], 2));
+  }
+});
+export {
+  re as default
+};

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

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

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

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

package/lib/components/tooltip/Tooltip.vue.d.ts

@@ -1,3 +1,6 @@
+import type { ExtractPublicPropTypes } from 'vue';
+declare const tooltipProps: {};
+export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
     default?(_: {}): any;
     tooltip?(_: {}): any;

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

@@ -0,0 +1,27 @@
+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 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: "" }, {
+      content: t(() => [
+        n("div", _, [
+          l(m, { class: "p-2 text-white text-sm w-max max-w-xs" }, {
+            default: t(() => [
+              o(e.$slots, "tooltip")
+            ]),
+            _: 3
+          })
+        ])
+      ]),
+      default: t(() => [
+        o(e.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  h as default
+};

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

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

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

@@ -0,0 +1,2 @@
+export { default as XTooltip } from './Tooltip.vue';
+export type { TooltipProps } from './Tooltip.vue';

package/lib/composables/colors-utils.js

@@ -0,0 +1,19 @@
+const t = (f) => /^#(?:[A-Fa-f0-9]{3}){1,2}$/.test(f), y = (f) => /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.test(f), G = (f) => /^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$/.test(f), n = (f) => {
+  var e;
+  return (e = f.match(/\((.*?)\)/)) == null ? void 0 : e[1].split(",");
+}, r = (f) => {
+  var e;
+  return (e = f.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (a, d, c, b) => "#" + d + d + c + c + b + b).substring(1).match(/.{2}/g)) == null ? void 0 : e.map((a) => parseInt(a, 16));
+}, p = (f, e) => {
+  const [a, d, c] = (t(f) ? r(f) : n(f)) ?? [0, 0, 0];
+  return "rgba(" + a + "," + d + "," + c + "," + e + ")";
+}, B = (f) => t(f) || y(f) || G(f), R = (f, e) => {
+  const a = e < 0, d = a ? 1 + e : 1 - e, c = a ? 0 : e * 255 ** 2, b = (m) => Math.round((d * Math.floor(Number(m)) ** 2 + c) ** 0.5), [o, i, l, s] = (t(f) ? r(f) : n(f)) ?? [0, 0, 0], u = b(o), g = b(i), h = b(l);
+  return "rgb" + (s ? "a(" : "(") + u + "," + g + "," + h + (s ? "," + s : ")");
+}, $ = Object.freeze({ slate: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a", 950: "#020617" }, gray: { 50: "#f9fafb", 100: "#f3f4f6", 200: "#e5e7eb", 300: "#d1d5db", 400: "#9ca3af", 500: "#6b7280", 600: "#4b5563", 700: "#374151", 800: "#1f2937", 900: "#111827", 950: "#030712" }, zinc: { 50: "#fafafa", 100: "#f4f4f5", 200: "#e4e4e7", 300: "#d4d4d8", 400: "#a1a1aa", 500: "#71717a", 600: "#52525b", 700: "#3f3f46", 800: "#27272a", 900: "#18181b", 950: "#09090b" }, neutral: { 50: "#fafafa", 100: "#f5f5f5", 200: "#e5e5e5", 300: "#d4d4d4", 400: "#a3a3a3", 500: "#737373", 600: "#525252", 700: "#404040", 800: "#262626", 900: "#171717", 950: "#0a0a0a" }, stone: { 50: "#fafaf9", 100: "#f5f5f4", 200: "#e7e5e4", 300: "#d6d3d1", 400: "#a8a29e", 500: "#78716c", 600: "#57534e", 700: "#44403c", 800: "#292524", 900: "#1c1917", 950: "#0c0a09" }, red: { 50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5", 400: "#f87171", 500: "#ef4444", 600: "#dc2626", 700: "#b91c1c", 800: "#991b1b", 900: "#7f1d1d", 950: "#450a0a" }, orange: { 50: "#fff7ed", 100: "#ffedd5", 200: "#fed7aa", 300: "#fdba74", 400: "#fb923c", 500: "#f97316", 600: "#ea580c", 700: "#c2410c", 800: "#9a3412", 900: "#7c2d12", 950: "#431407" }, amber: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f", 950: "#451a03" }, yellow: { 50: "#fefce8", 100: "#fef9c3", 200: "#fef08a", 300: "#fde047", 400: "#facc15", 500: "#eab308", 600: "#ca8a04", 700: "#a16207", 800: "#854d0e", 900: "#713f12", 950: "#422006" }, lime: { 50: "#f7fee7", 100: "#ecfccb", 200: "#d9f99d", 300: "#bef264", 400: "#a3e635", 500: "#84cc16", 600: "#65a30d", 700: "#4d7c0f", 800: "#3f6212", 900: "#365314", 950: "#1a2e05" }, green: { 50: "#f0fdf4", 100: "#dcfce7", 200: "#bbf7d0", 300: "#86efac", 400: "#4ade80", 500: "#22c55e", 600: "#16a34a", 700: "#15803d", 800: "#166534", 900: "#14532d", 950: "#052e16" }, emerald: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", 950: "#022c22" }, teal: { 50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4", 400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e", 800: "#115e59", 900: "#134e4a", 950: "#042f2e" }, cyan: { 50: "#ecfeff", 100: "#cffafe", 200: "#a5f3fc", 300: "#67e8f9", 400: "#22d3ee", 500: "#06b6d4", 600: "#0891b2", 700: "#0e7490", 800: "#155e75", 900: "#164e63", 950: "#083344" }, sky: { 50: "#f0f9ff", 100: "#e0f2fe", 200: "#bae6fd", 300: "#7dd3fc", 400: "#38bdf8", 500: "#0ea5e9", 600: "#0284c7", 700: "#0369a1", 800: "#075985", 900: "#0c4a6e", 950: "#082f49" }, blue: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a", 950: "#172554" }, indigo: { 50: "#eef2ff", 100: "#e0e7ff", 200: "#c7d2fe", 300: "#a5b4fc", 400: "#818cf8", 500: "#6366f1", 600: "#4f46e5", 700: "#4338ca", 800: "#3730a3", 900: "#312e81", 950: "#1e1b4b" }, violet: { 50: "#f5f3ff", 100: "#ede9fe", 200: "#ddd6fe", 300: "#c4b5fd", 400: "#a78bfa", 500: "#8b5cf6", 600: "#7c3aed", 700: "#6d28d9", 800: "#5b21b6", 900: "#4c1d95", 950: "#2e1065" }, purple: { 50: "#faf5ff", 100: "#f3e8ff", 200: "#e9d5ff", 300: "#d8b4fe", 400: "#c084fc", 500: "#a855f7", 600: "#9333ea", 700: "#7e22ce", 800: "#6b21a8", 900: "#581c87", 950: "#3b0764" }, fuchsia: { 50: "#fdf4ff", 100: "#fae8ff", 200: "#f5d0fe", 300: "#f0abfc", 400: "#e879f9", 500: "#d946ef", 600: "#c026d3", 700: "#a21caf", 800: "#86198f", 900: "#701a75", 950: "#4a044e" }, pink: { 50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4", 400: "#f472b6", 500: "#ec4899", 600: "#db2777", 700: "#be185d", 800: "#9d174d", 900: "#831843", 950: "#500724" }, rose: { 50: "#fff1f2", 100: "#ffe4e6", 200: "#fecdd3", 300: "#fda4af", 400: "#fb7185", 500: "#f43f5e", 600: "#e11d48", 700: "#be123c", 800: "#9f1239", 900: "#881337", 950: "#4c0519" }, lightBlue: { 50: "#f0f9ff", 100: "#e0f2fe", 200: "#bae6fd", 300: "#7dd3fc", 400: "#38bdf8", 500: "#0ea5e9", 600: "#0284c7", 700: "#0369a1", 800: "#075985", 900: "#0c4a6e", 950: "#082f49" }, warmGray: { 50: "#fafaf9", 100: "#f5f5f4", 200: "#e7e5e4", 300: "#d6d3d1", 400: "#a8a29e", 500: "#78716c", 600: "#57534e", 700: "#44403c", 800: "#292524", 900: "#1c1917", 950: "#0c0a09" }, trueGray: { 50: "#fafafa", 100: "#f5f5f5", 200: "#e5e5e5", 300: "#d4d4d4", 400: "#a3a3a3", 500: "#737373", 600: "#525252", 700: "#404040", 800: "#262626", 900: "#171717", 950: "#0a0a0a" }, coolGray: { 50: "#f9fafb", 100: "#f3f4f6", 200: "#e5e7eb", 300: "#d1d5db", 400: "#9ca3af", 500: "#6b7280", 600: "#4b5563", 700: "#374151", 800: "#1f2937", 900: "#111827", 950: "#030712" }, blueGray: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a", 950: "#020617" } });
+export {
+  R as colorShade,
+  B as isValidColor,
+  p as setOpacity,
+  $ as tailwindColors
+};

package/lib/composables/colors.d.ts

@@ -17,7 +17,7 @@ export interface ColorsProps {
     color?: string;
 }
 export interface ColorComposition {
-    getPalette: (color: string) => ColorPalette;
+    getPalette: (color?: string) => ColorPalette;
     getColorOpacity: (color: string, opacity: number) => string;
 }
 export declare const useColors: {
@@ -29,3 +29,4 @@ export declare const useColors: {
         };
     };
 };
+export type UseColorsProps = ReturnType<typeof useColors.props>;

package/lib/composables/colors.js

@@ -0,0 +1,52 @@
+import { inject as p, computed as m, unref as g } from "vue";
+import { injectThemeKey as f } from "./keys.js";
+import { tailwindColors as r, setOpacity as l, isValidColor as y, colorShade as t } from "./colors-utils.js";
+import { mergeRightDeep as d } from "../common/utils.js";
+const a = {}, C = {
+  primary: r.sky,
+  secondary: r.slate,
+  success: r.green,
+  warning: r.yellow,
+  error: r.red
+}, c = () => {
+  const s = p(f, {}), o = m(() => d(C, g(s).colors || {})), i = (e) => r[e];
+  return {
+    getPalette: (e) => {
+      if (!e)
+        return i("gray");
+      const n = i(e);
+      if (n)
+        return n;
+      if (a[e])
+        return a[e];
+      if (o.value[e])
+        return o.value[e];
+      if (!y(e))
+        return console.warn(`Invalid color: ${e}`), i("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 a[e] = u, u;
+    },
+    getColorOpacity: (e, n) => l(e, n)
+  };
+};
+c.props = (s) => ({
+  color: {
+    type: String,
+    default: s
+  }
+});
+export {
+  c as useColors
+};

package/lib/composables/common.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const useCommon: {
     (): void;
     props(): {

package/lib/composables/common.js

@@ -0,0 +1,17 @@
+const e = () => {
+}, s = Object.freeze({
+  size: ["xs", "sm", "md", "lg", "xl"]
+});
+e.props = () => ({
+  size: {
+    type: String,
+    default: "md",
+    validator: (t) => s.size.includes(t)
+  }
+});
+e.validators = () => ({
+  ...s
+});
+export {
+  e as useCommon
+};

package/lib/composables/css.js

@@ -0,0 +1,26 @@
+const u = ["dark"], a = ["hover", "active", "focus", "visited"], f = (n) => u.includes(n), v = (n) => a.includes(n), d = (n) => {
+  const $ = (i, e, t, s) => `${r(i, t, s)}: ${e}`, r = (i, e, t) => `--x${n ? `-${n}` : ""}${e ? `-${e}` : ""}-${i}${t ? `-${t}` : ""}`, l = (i, e, t) => {
+    let s = {};
+    for (const o in i) {
+      const c = i[o];
+      if (!c)
+        break;
+      f(o) ? s = {
+        ...s,
+        ...l(c, o, t)
+      } : v(o) ? s = {
+        ...s,
+        ...l(c, e, o)
+      } : s[r(o, e, t)] = c;
+    }
+    return s;
+  };
+  return {
+    get: $,
+    variable: r,
+    variables: l
+  };
+};
+export {
+  d as useCSS
+};

package/lib/composables/inputtable.d.ts

@@ -1,4 +1,4 @@
-import type { Ref, PropType } from 'vue';
+import type { PropType } from 'vue';
 export interface XFormInputMethods {
     focus: () => void;
     validate: (val: any) => boolean;
@@ -10,12 +10,12 @@ export declare const useInputtable: {
         emit: any;
         withListeners?: boolean | undefined;
     }): {
-        isFirstValidation: Ref<boolean>;
+        isFirstValidation: import("vue").Ref<boolean>;
         errorInternal: any;
-        isInsideForm: any;
+        isInsideForm: boolean;
         inputListeners: {};
         reset: () => void;
-        validate: (val: any) => boolean;
+        validate: (val?: any) => boolean;
         setError: (val: string) => void;
     };
     emits(withListeners?: boolean): string[];

package/lib/composables/inputtable.js

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

package/lib/composables/interactive.js

@@ -0,0 +1,17 @@
+const a = (u) => ({
+  focus: () => {
+    var o, e;
+    return (e = (o = u.value) == null ? void 0 : o.focus) == null ? void 0 : e.call(o);
+  },
+  blur: () => {
+    var o, e;
+    return (e = (o = u.value) == null ? void 0 : o.blur) == null ? void 0 : e.call(o);
+  }
+});
+a.props = () => ({
+  disabled: Boolean,
+  loading: Boolean
+});
+export {
+  a as useInteractive
+};

package/lib/composables/keys.d.ts

@@ -1,8 +1,11 @@
 import type { InjectionKey } from 'vue';
-export declare const injectTabKey: InjectionKey<any>;
-export declare const injectFormKey: InjectionKey<any>;
+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>;
+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 injectButtonGroupKey: InjectionKey<any>;
+export declare const injectButtonGroupKey: InjectionKey<ButtonGroupInjection>;
 export declare const injectNotificationKey: InjectionKey<any>;

package/lib/composables/keys.js

@@ -0,0 +1,10 @@
+const o = Symbol(), t = Symbol(), e = Symbol(), n = Symbol(), c = Symbol(), y = Symbol(), i = Symbol();
+export {
+  y as injectButtonGroupKey,
+  c as injectColorsKey,
+  t as injectFormKey,
+  n as injectIconsKey,
+  i as injectNotificationKey,
+  o as injectTabKey,
+  e as injectThemeKey
+};

package/lib/composables/notifications.js

@@ -0,0 +1,9 @@
+import { inject as o } from "vue";
+import { injectNotificationKey as n } from "./keys.js";
+const a = (i) => {
+  const t = o(i || n);
+  return t || console.warn("useNotifications must have a parent wrapped with Notifications component"), t;
+};
+export {
+  a as useNotifications
+};

package/lib/composables/theme.d.ts

@@ -1,20 +1,26 @@
-import { type StyleValue } from 'vue';
+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 } from 'vue';
-export type ThemeParams = {
-    props: any;
+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>;
+    styles?: ThemeStyles<P, D>;
+}
+export type ThemeParams<P = Record<string, any>, D = Record<string, any>> = {
+    props: UnwrapRef<P>;
     slots: Slots;
     colors: ColorComposition;
     css: CSSComposition;
     rtl?: boolean;
-    data?: any;
+    data: UnwrapNestedRefs<D>;
 };
-export declare const useTheme: (namespace: string, defaultTheme: any, props: any, data?: any) => {
+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>;
     className: import("vue").ComputedRef<string>;
     colors: ColorComposition;
-    classes: import("vue").ComputedRef<any>;
+    classes: import("vue").ComputedRef<Record<K, ThemeVueClass>>;
     styles: import("vue").ComputedRef<StyleValue>;
     css: CSSComposition;
 };

package/lib/composables/theme.js

@@ -0,0 +1,59 @@
+import { inject as P, computed as c, unref as r, useSlots as T } from "vue";
+import { injectThemeKey as $ } from "./keys.js";
+import { useColors as d } from "./colors.js";
+import { useCSS as w } from "./css.js";
+import { mergeRightDeep as D, smartUnref as C, isFunction as h, isObject as j } from "../common/utils.js";
+const U = (s, e = {}, n = {}, l = {}) => {
+  const t = P($, !1), b = c(() => {
+    var o;
+    return (o = r(t)) != null && o[s] ? D(e.classes, r(t)[s].classes || {}) : e.classes;
+  }), f = c(() => {
+    var o;
+    return ((o = r(t)) == null ? void 0 : o.classPrefix) ?? "x-";
+  }), v = c(() => `${f.value}${s}`), m = c(() => {
+    var o;
+    return ((o = r(t)) == null ? void 0 : o.rtl) ?? !1;
+  }), a = T(), i = d(), u = w(s), y = c(() => S(b.value, {
+    props: r(n),
+    slots: a,
+    data: C(l),
+    colors: i,
+    css: u,
+    rtl: r(m)
+  })), O = c(() => {
+    var x;
+    const o = ((x = r(t)) == null ? void 0 : x[s]) || {}, p = {
+      props: r(n),
+      slots: a,
+      data: C(l),
+      colors: i,
+      css: u,
+      rtl: r(m)
+    };
+    return [
+      g(e.styles, p),
+      g(o.styles, p)
+    ];
+  });
+  return {
+    classPrefix: f,
+    className: v,
+    colors: i,
+    classes: y,
+    styles: O,
+    css: u
+  };
+};
+function S(s, e) {
+  const n = {};
+  return Object.keys(s).forEach((l) => {
+    const t = s[l];
+    n[l] = h(t) ? t(e) : j(t) ? S(t, e) : t;
+  }), n;
+}
+function g(s, e) {
+  return h(s) ? s(e) || {} : j(s) ? s : {};
+}
+export {
+  U as useTheme
+};