@indielayer/ui 1.18.0 → 2.0.0

package/lib/components/tag/theme/Tag.carbon.theme.js

@@ -1,24 +1,22 @@
-const x = {
-  classes: {
-    wrapper: ({ props: l }) => {
-      let e = "inline-flex leading-tight max-w-full ";
-      return l.size === "xs" || l.size === "sm" ? e += " px-2 py-0.5 text-xs" : l.size === "lg" ? e += " px-4 py-3" : l.size === "xl" ? e += " px-5 py-5 text-lg" : e += " px-3 py-1 text-sm", e;
-    }
-  },
-  styles: ({ colors: l, props: e, css: s }) => {
-    const t = l.getPalette(e.color);
-    return s.variables({
-      bg: t[200],
-      text: t[800],
-      border: t[800],
-      dark: {
-        bg: t[800],
-        border: t[400],
-        text: e.outlined ? t[200] : t[100]
-      }
-    });
-  }
-}, i = x;
-export {
-  i as default
+//#region src/components/tag/theme/Tag.carbon.theme.ts
+var e = {
+	classes: { wrapper: ({ props: e }) => {
+		let t = "inline-flex leading-tight max-w-full ";
+		return e.size === "xs" || e.size === "sm" ? t += " px-2 py-0.5 text-xs" : e.size === "lg" ? t += " px-4 py-3" : e.size === "xl" ? t += " px-5 py-5 text-lg" : t += " px-3 py-1 text-sm", t;
+	} },
+	styles: ({ colors: e, props: t, css: n }) => {
+		let r = e.getPalette(t.color);
+		return n.variables({
+			bg: r[200],
+			text: r[800],
+			border: r[800],
+			dark: {
+				bg: r[800],
+				border: r[400],
+				text: t.outlined ? r[200] : r[100]
+			}
+		});
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/textarea/Textarea.js

@@ -0,0 +1,5 @@
+import e from "./Textarea.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/textarea/Textarea.vue
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/textarea/Textarea.vue.d.ts

@@ -1,5 +1,6 @@
 import { type ExtractPublicPropTypes, type Ref } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
+import type { Size } from '../../composables/useCommon';
 declare const textareaProps: {
     dir: {
         type: StringConstructor;
@@ -14,12 +15,12 @@ declare const textareaProps: {
     min: (StringConstructor | NumberConstructor)[];
     minlength: (StringConstructor | NumberConstructor)[];
     placeholder: StringConstructor;
-    adjustToText: BooleanConstructor;
-    preventEnter: BooleanConstructor;
-    block: BooleanConstructor;
-    resizable: BooleanConstructor;
-    showCounter: BooleanConstructor;
-    clearable: BooleanConstructor;
+    adjustToText: import("vue").Prop<boolean | undefined>;
+    preventEnter: import("vue").Prop<boolean | undefined>;
+    block: import("vue").Prop<boolean | undefined>;
+    resizable: import("vue").Prop<boolean | undefined>;
+    showCounter: import("vue").Prop<boolean | undefined>;
+    clearable: import("vue").Prop<boolean | undefined>;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -50,15 +51,17 @@ declare const textareaProps: {
         readonly default: "active";
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly type: import("vue").PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 };
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>;
-type InternalClasses = 'wrapper' | 'input' | 'icon';
+type InternalClasses = 'wrapper' | 'input' | 'icon' | 'adornment' | 'adornmentStart' | 'adornmentEnd' | 'adornmentIcon' | 'adornmentSlot';
 type InternalExtraData = {
     errorInternal: Ref<boolean>;
+    isInsideInputGroup: boolean;
+    inputGroupPosition: import('../../common/inputGroupRadius').InputGroupPosition | undefined;
 };
 export interface TextareaTheme extends ThemeComponent<TextareaProps, InternalClasses, InternalExtraData> {
 }
@@ -76,12 +79,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     min: (StringConstructor | NumberConstructor)[];
     minlength: (StringConstructor | NumberConstructor)[];
     placeholder: StringConstructor;
-    adjustToText: BooleanConstructor;
-    preventEnter: BooleanConstructor;
-    block: BooleanConstructor;
-    resizable: BooleanConstructor;
-    showCounter: BooleanConstructor;
-    clearable: BooleanConstructor;
+    adjustToText: import("vue").Prop<boolean | undefined>;
+    preventEnter: import("vue").Prop<boolean | undefined>;
+    block: import("vue").Prop<boolean | undefined>;
+    resizable: import("vue").Prop<boolean | undefined>;
+    showCounter: import("vue").Prop<boolean | undefined>;
+    clearable: import("vue").Prop<boolean | undefined>;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -112,7 +115,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         readonly default: "active";
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly type: import("vue").PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -136,12 +139,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     min: (StringConstructor | NumberConstructor)[];
     minlength: (StringConstructor | NumberConstructor)[];
     placeholder: StringConstructor;
-    adjustToText: BooleanConstructor;
-    preventEnter: BooleanConstructor;
-    block: BooleanConstructor;
-    resizable: BooleanConstructor;
-    showCounter: BooleanConstructor;
-    clearable: BooleanConstructor;
+    adjustToText: import("vue").Prop<boolean | undefined>;
+    preventEnter: import("vue").Prop<boolean | undefined>;
+    block: import("vue").Prop<boolean | undefined>;
+    resizable: import("vue").Prop<boolean | undefined>;
+    showCounter: import("vue").Prop<boolean | undefined>;
+    clearable: import("vue").Prop<boolean | undefined>;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -172,7 +175,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         readonly default: "active";
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly type: import("vue").PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -180,8 +183,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    size: import("../../composables/useCommon").Size;
-    block: boolean;
+    size: Size;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     modelValue: string | number | boolean | object | any[] | undefined;
@@ -191,13 +193,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     hideFooter: boolean;
     rules: unknown[];
     skipFormRegistry: boolean;
-    clearable: boolean;
     dir: string;
-    showCounter: boolean;
     rows: string | number;
-    adjustToText: boolean;
-    preventEnter: boolean;
-    resizable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     prefix?(_: {}): any;
     suffix?(_: {}): any;

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

@@ -0,0 +1,197 @@
+import { injectInputGroupKey as e } from "../../composables/keys.js";
+import { useColors as t } from "../../composables/useColors.js";
+import { useCSS as n } from "../../composables/useCSS.js";
+import { useTheme as r } from "../../composables/useTheme.js";
+import { optionalBooleanProp as i } from "../../common/props.js";
+import { useCommon as a } from "../../composables/useCommon.js";
+import ee from "../icon/Icon.js";
+import { closeIcon as te } from "../../common/icons.js";
+import { useInteractive as o } from "../../composables/useInteractive.js";
+import { useInputtable as s } from "../../composables/useInputtable.js";
+import c from "../inputFooter/InputFooter.js";
+import { useEventListener as l, useResizeObserver as u } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import ne from "../label/Label.js";
+import { computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, defineComponent as g, inject as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, openBlock as x, ref as re, renderSlot as S, toHandlers as ie, unref as C, useAttrs as ae, useSlots as oe, watch as se, withCtx as ce, withKeys as w } from "vue";
+//#region src/components/textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
+var T = { class: "relative" }, E = [
+	"id",
+	"disabled",
+	"max",
+	"maxlength",
+	"min",
+	"dir",
+	"rows",
+	"minlength",
+	"name",
+	"placeholder",
+	"readonly",
+	"value"
+], D = {
+	...a.props(),
+	...o.props(),
+	...s.props(),
+	dir: {
+		type: String,
+		default: "ltr"
+	},
+	rows: {
+		type: [Number, String],
+		default: 2
+	},
+	max: [Number, String],
+	maxlength: [Number, String],
+	min: [Number, String],
+	minlength: [Number, String],
+	placeholder: String,
+	adjustToText: i(),
+	preventEnter: i(),
+	block: i(),
+	resizable: i(),
+	showCounter: i(),
+	clearable: i()
+}, O = /* @__PURE__ */ g({
+	name: "XTextarea",
+	validators: { ...a.validators() },
+	props: D,
+	emits: s.emits(),
+	setup(i, { expose: a, emit: g }) {
+		let D = i, O = _(e, {
+			registerChild: () => {},
+			unregisterChild: () => {},
+			registerInput: () => {},
+			unregisterInput: () => {},
+			getPosition: () => "only",
+			childOrder: d(() => []),
+			isInsideInputGroup: !1,
+			groupProps: {}
+		}), k = g, A = ae(), j = d(() => Object.keys(A).reduce((e, t) => (t.startsWith("data-") && (e[t] = A[t]), e), {})), M = re(null);
+		u(M, R), typeof window < "u" && l(window, "resize", R), se([() => D.modelValue, () => D.size], () => {
+			setTimeout(R);
+		});
+		let N = n("textarea"), P = t().getPalette("primary"), F = N.get("border", P[400]);
+		function I() {
+			R();
+		}
+		function L(e) {
+			D.preventEnter && e.preventDefault(), e.stopPropagation();
+		}
+		function R() {
+			D.adjustToText && M.value && (M.value.style.height = "1px", M.value.style.height = 2 + M.value.scrollHeight + "px");
+		}
+		let { focus: z, blur: B } = o(M), { errorInternal: V, hideFooterInternal: H, hideLabelInternal: U, isInsideForm: le, isInsideInputGroup: W, inputGroupPosition: ue, inputListeners: de, reset: G, validate: fe, setError: pe } = s(D, {
+			focus: z,
+			emit: k
+		}), K = d(() => O.groupProps?.size ?? D.size), q = d(() => D.disabled || !!O.groupProps?.disabled), me = d(() => U.value ? void 0 : D.label), he = d(() => ({
+			...D,
+			size: K.value,
+			disabled: q.value
+		})), ge = d(() => {
+			let e = D.modelValue;
+			return e ? String(e).length : 0;
+		}), J = d(() => D.clearable && D.modelValue !== ""), Y = oe(), X = d(() => !!Y.prefix), Z = d(() => !!Y.suffix), _e = d(() => Z.value || J.value), Q = d(() => X.value ? "!pl-10" : ""), ve = d(() => {
+			let e = +!!J.value + +!!Z.value;
+			return e >= 2 ? "!pr-16" : e === 1 ? "!pr-10" : "";
+		});
+		function ye(e) {
+			return e == null;
+		}
+		let { styles: be, classes: $, className: xe } = r("Textarea", {}, he, {
+			errorInternal: V,
+			isInsideInputGroup: W,
+			inputGroupPosition: ue
+		});
+		return a({
+			focus: z,
+			blur: B,
+			reset: G,
+			validate: fe,
+			setError: pe
+		}), (e, t) => (x(), f(ne, {
+			style: b(C(be)),
+			block: e.block,
+			disabled: q.value,
+			required: e.required,
+			"is-inside-form": C(le),
+			"is-inside-input-group": C(W),
+			label: me.value,
+			class: y([C(xe), C($).wrapper]),
+			tooltip: e.tooltip
+		}, {
+			default: ce(() => [h("div", T, [
+				X.value ? (x(), m("div", {
+					key: 0,
+					class: y([C($).adornment, C($).adornmentStart])
+				}, [h("div", { class: y(C($).adornmentSlot) }, [S(e.$slots, "prefix")], 2)], 2)) : p("", !0),
+				h("textarea", v({
+					id: e.id,
+					ref_key: "elRef",
+					ref: M,
+					class: ["", [
+						C($).input,
+						C(V) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-textarea-border)]",
+						Q.value,
+						ve.value
+					]],
+					style: C(F),
+					disabled: q.value,
+					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: ye(e.modelValue) ? "" : String(e.modelValue)
+				}, j.value, ie(C(de), !0), {
+					onKeydown: w(L, ["enter"]),
+					onInput: I
+				}), null, 16, E),
+				_e.value ? (x(), m("div", {
+					key: 1,
+					class: y([C($).adornment, C($).adornmentEnd])
+				}, [Z.value ? (x(), m("div", {
+					key: 0,
+					class: y(C($).adornmentSlot)
+				}, [S(e.$slots, "suffix")], 2)) : p("", !0), J.value ? (x(), f(ee, {
+					key: 1,
+					size: K.value,
+					icon: C(te),
+					class: y([C($).adornmentIcon, "cursor-pointer"]),
+					onClick: t[0] ||= (e) => C(G)()
+				}, null, 8, [
+					"size",
+					"icon",
+					"class"
+				])) : p("", !0)], 2)) : p("", !0)
+			]), C(H) ? p("", !0) : (x(), f(c, {
+				key: 0,
+				error: C(V),
+				helper: e.helper,
+				"character-count": ge.value,
+				"max-characters": e.maxlength,
+				"show-counter": e.showCounter
+			}, null, 8, [
+				"error",
+				"helper",
+				"character-count",
+				"max-characters",
+				"show-counter"
+			]))]),
+			_: 3
+		}, 8, [
+			"style",
+			"block",
+			"disabled",
+			"required",
+			"is-inside-form",
+			"is-inside-input-group",
+			"label",
+			"class",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { O as default };

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

@@ -1,13 +1,17 @@
-const a = {
-  classes: {
-    wrapper: "",
-    input: ({ props: s, data: r }) => {
-      const e = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md"];
-      return s.resizable || e.push("resize-none"), !r.errorInternal && !s.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), s.size === "xs" ? e.push("px-2 py-1 text-xs") : s.size === "sm" ? e.push("px-2 py-1.5 text-sm") : s.size === "lg" ? e.push("px-4 py-3 text-lg") : s.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(s.disabled ? "bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed" : "bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
-    },
-    icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0"
-  }
-}, t = a;
-export {
-  t as default
-};
+import { inputGroupRadiusClasses as e } from "../../../common/inputGroupRadius.js";
+//#region src/components/textarea/theme/Textarea.base.theme.ts
+var t = { classes: {
+	wrapper: "",
+	input: ({ props: t, data: n }) => {
+		let r = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-xs"];
+		return n.isInsideInputGroup ? r.push(...e(n.inputGroupPosition)) : r.push("rounded-md"), t.resizable || r.push("resize-none"), !n.errorInternal && !t.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), t.size === "xs" ? r.push("px-2 py-1 text-xs") : t.size === "sm" ? r.push("px-2 py-1.5 text-sm") : t.size === "lg" ? r.push("px-4 py-3 text-lg") : t.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), r.push(t.disabled ? "bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed" : "bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), r;
+	},
+	icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0",
+	adornment: "absolute inset-y-0 z-10 flex items-center gap-1.5 pointer-events-none",
+	adornmentStart: "left-0 pl-2",
+	adornmentEnd: "right-0 pr-2 top-2 items-start",
+	adornmentIcon: "shrink-0 text-secondary-600 dark:text-secondary-300 pointer-events-auto",
+	adornmentSlot: "shrink-0 pointer-events-auto text-secondary-600 dark:text-secondary-300 text-sm"
+} };
+//#endregion
+export { t as default };

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

@@ -1,13 +1,16 @@
-const a = {
-  classes: {
-    wrapper: "",
-    input: ({ props: r, data: s }) => {
-      const e = ["resize-none appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4"];
-      return !s.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-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-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : r.readonly ? e.push("bg-white dark:bg-secondary-900 text-secondary-700") : e.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
-    },
-    icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0"
-  }
-}, n = a;
-export {
-  n as default
-};
+//#region src/components/textarea/theme/Textarea.carbon.theme.ts
+var e = { classes: {
+	wrapper: "",
+	input: ({ props: e, data: t }) => {
+		let n = ["resize-none appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4"];
+		return !t.errorInternal && !e.disabled && n.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" || e.size === "sm" ? n.push("py-1.5") : e.size === "lg" || e.size === "xl" ? n.push("py-3.5") : n.push("py-2.5"), e.disabled ? n.push("bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : e.readonly ? n.push("bg-white dark:bg-secondary-900 text-secondary-700") : n.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), n;
+	},
+	icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0",
+	adornment: "absolute inset-y-0 z-10 flex items-center gap-1.5 pointer-events-none",
+	adornmentStart: "left-0 pl-2",
+	adornmentEnd: "right-0 pr-2 top-2 items-start",
+	adornmentIcon: "shrink-0 text-secondary-600 dark:text-secondary-300 pointer-events-auto",
+	adornmentSlot: "shrink-0 pointer-events-auto text-secondary-600 dark:text-secondary-300 text-sm"
+} };
+//#endregion
+export { e as default };

package/lib/components/themeProvider/ThemeProvider.js

@@ -0,0 +1,5 @@
+import e from "./ThemeProvider.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/themeProvider/ThemeProvider.vue
+var t = e;
+//#endregion
+export { t as default };

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

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

package/lib/components/toggle/Toggle.js

@@ -0,0 +1,5 @@
+import e from "./Toggle.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/toggle/Toggle.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -1,7 +1,7 @@
 import { type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const toggleProps: {
-    glow: BooleanConstructor;
+    glow: import("vue").Prop<boolean | undefined>;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -46,7 +46,7 @@ type InternalClasses = 'wrapper' | 'label' | 'buttonWrapper' | 'button';
 export interface ToggleTheme extends ThemeComponent<ToggleProps, InternalClasses> {
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    glow: BooleanConstructor;
+    glow: import("vue").Prop<boolean | undefined>;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -92,7 +92,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     validate: (val?: any) => boolean;
     setError: (val: string) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    glow: BooleanConstructor;
+    glow: import("vue").Prop<boolean | undefined>;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -135,7 +135,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    glow: boolean;
     color: string;
     size: import("../../composables/useCommon").Size;
     loading: boolean;

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

@@ -0,0 +1,101 @@
+import { useColors as e } from "../../composables/useColors.js";
+import { useTheme as t } from "../../composables/useTheme.js";
+import { optionalBooleanProp as n } from "../../common/props.js";
+import { useCommon as r } from "../../composables/useCommon.js";
+import { useInteractive as i } from "../../composables/useInteractive.js";
+import a from "../spinner/Spinner.js";
+import { useInputtable as o } from "../../composables/useInputtable.js";
+import s from "../inputFooter/InputFooter.js";
+import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, toDisplayString as v, unref as y, vModelCheckbox as b, withDirectives as x } from "vue";
+//#region src/components/toggle/Toggle.vue?vue&type=script&setup=true&lang.ts
+var S = { class: "flex items-center" }, C = [
+	"id",
+	"aria-checked",
+	"aria-disabled",
+	"disabled",
+	"name",
+	"required",
+	"value"
+], w = ["textContent"], T = {
+	...r.props(),
+	...e.props("primary"),
+	...i.props(),
+	...o.props(),
+	glow: n()
+}, E = /* @__PURE__ */ p({
+	name: "XToggle",
+	validators: { ...r.validators() },
+	props: T,
+	emits: o.emits(!1),
+	setup(e, { expose: n, emit: r }) {
+		let p = e, T = r, E = _(null), D = c({
+			get() {
+				return !!p.modelValue;
+			},
+			set(e) {
+				T("update:modelValue", e);
+			}
+		}), { focus: O, blur: k } = i(E), { errorInternal: A, hideFooterInternal: j, reset: M, validate: N, setError: P } = o(p, {
+			focus: O,
+			emit: T,
+			withListeners: !1
+		}), { styles: F, classes: I, className: L } = t("Toggle", {}, p);
+		return n({
+			focus: O,
+			blur: k,
+			reset: M,
+			validate: N,
+			setError: P
+		}), (e, t) => (g(), d("label", { class: m(["inline-block", [
+			y(L),
+			y(I).wrapper,
+			e.disabled ? "cursor-not-allowed" : "cursor-pointer"
+		]]) }, [f("div", S, [
+			f("div", {
+				class: m(["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-secondary-300 dark:bg-secondary-500": !e.disabled && !D.value && !e.loading,
+					"bg-secondary-100 dark:bg-secondary-700": e.disabled || e.loading,
+					"bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]": !e.disabled && D.value
+				}]),
+				style: h(y(F))
+			}, [f("div", { class: m(y(I).buttonWrapper) }, [x(f("input", {
+				id: e.id,
+				ref_key: "elRef",
+				ref: E,
+				"onUpdate:modelValue": t[0] ||= (e) => D.value = e,
+				"aria-checked": D.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, C), [[b, D.value]]), f("div", { class: m([
+				y(I).button,
+				{
+					"translate-x-full": D.value,
+					shadow: !e.disabled
+				},
+				e.disabled ? "bg-secondary-50 dark:bg-secondary-800" : "bg-white dark:bg-secondary-800"
+			]) }, null, 2)], 2)], 6),
+			e.label ? (g(), d("span", {
+				key: 0,
+				class: m(["ml-2", y(I).label]),
+				textContent: v(e.label)
+			}, null, 10, w)) : u("", !0),
+			e.loading ? (g(), l(a, {
+				key: 1,
+				size: e.size,
+				class: "ml-1"
+			}, null, 8, ["size"])) : u("", !0)
+		]), y(j) ? u("", !0) : (g(), l(s, {
+			key: 0,
+			error: y(A),
+			helper: e.helper
+		}, null, 8, ["error", "helper"]))], 2));
+	}
+});
+//#endregion
+export { E as default };