@indielayer/ui 1.18.0 → 2.0.0

package/lib/components/stepper/Stepper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,377 @@
+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 i from "../icon/Icon.js";
+import "../../common/icons.js";
+import ee from "../scroll/Scroll.js";
+import { Fragment as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, normalizeProps as _, normalizeStyle as te, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as ne, toDisplayString as S, unref as C, useSlots as re, watch as w, withCtx as T } from "vue";
+//#region src/components/stepper/Stepper.vue?vue&type=script&setup=true&lang.ts
+var ie = [
+	"aria-current",
+	"aria-disabled",
+	"onClick"
+], ae = { class: "min-w-0 flex-1" }, oe = { class: "text-sm font-medium leading-tight" }, E = /* @__PURE__ */ m({
+	name: "XStepper",
+	validators: {
+		...r.validators(),
+		variant: ["line", "dot"],
+		orientation: ["horizontal", "vertical"],
+		labelPlacement: ["end", "bottom"]
+	},
+	props: {
+		...r.props(),
+		...e.props("primary"),
+		modelValue: [String, Number],
+		steps: {
+			type: Array,
+			default: () => []
+		},
+		validate: Function,
+		beforeChange: Function,
+		variant: {
+			type: String,
+			default: "line"
+		},
+		orientation: {
+			type: String,
+			default: "vertical"
+		},
+		labelPlacement: {
+			type: String,
+			default: "end"
+		},
+		linear: {
+			type: Boolean,
+			default: !0
+		},
+		interactive: {
+			type: Boolean,
+			default: !0
+		},
+		editable: n(),
+		disabled: Boolean,
+		loading: Boolean,
+		iconComplete: String,
+		iconError: String,
+		iconEdit: String
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"step-complete"
+	],
+	setup(e, { expose: n, emit: r }) {
+		let m = e, E = re(), D = r, O = y([]), k = y(0), A = y(0), j = y(0);
+		w(() => m.steps, (e) => {
+			O.value = e.map((e) => ({
+				...e,
+				completed: e.completed ?? !1
+			})), se();
+		}, {
+			immediate: !0,
+			deep: !0
+		});
+		function se() {
+			if (O.value.length) {
+				if (m.modelValue !== void 0 && m.modelValue !== null) {
+					let e = O.value.findIndex((e) => e.value === m.modelValue);
+					if (e >= 0) {
+						k.value = e, j.value = Math.max(j.value, e);
+						return;
+					}
+				}
+				if (m.modelValue === void 0 || m.modelValue === null) {
+					let e = O.value[0]?.value;
+					e !== void 0 && pe(e);
+				}
+			}
+		}
+		w(() => m.modelValue, () => {
+			if (!O.value.length) return;
+			let e = O.value.findIndex((e) => e.value === m.modelValue);
+			e >= 0 && e !== k.value && (k.value = e);
+		}), w(k, (e) => {
+			let t = O.value[e];
+			t && (D("update:modelValue", t.value), j.value = Math.max(j.value, e));
+		});
+		let M = s(() => k.value <= 0), N = s(() => O.value.length === 0 || k.value >= O.value.length - 1), ce = s(() => O.value[k.value]?.value), P = s(() => O.value[k.value]), le = s(() => O.value.length === 1);
+		function F(e, t) {
+			return e.error ? "error" : t === k.value ? "active" : I(e, t) ? "complete" : "upcoming";
+		}
+		function I(e, t) {
+			return e.completed || t < k.value;
+		}
+		function ue(e, t) {
+			return (e.editable ?? m.editable) && I(e, t) && t !== k.value;
+		}
+		function L(e) {
+			let t = O.value[e];
+			return !t || t.disabled || m.loading || m.disabled ? !1 : m.linear ? e === 0 ? !0 : O.value.slice(0, e).every((e) => e.completed) : e <= j.value;
+		}
+		async function R() {
+			return m.validate ? m.validate() : !0;
+		}
+		async function z(e) {
+			if (!e.beforeNext) return !0;
+			try {
+				return await e.beforeNext(), !0;
+			} catch {
+				return !1;
+			}
+		}
+		async function B() {
+			let e = O.value[k.value];
+			return e ? !(I(e, k.value) && (!await R() || !await z(e))) : !0;
+		}
+		async function de(e, t) {
+			return m.beforeChange ? await m.beforeChange(e, t) !== !1 : !0;
+		}
+		async function V(e) {
+			if (e === k.value || e < 0 || e >= O.value.length) return;
+			let t = O.value[e]?.value, n = O.value[k.value]?.value;
+			t === void 0 || n === void 0 || await de(t, n) && (e !== k.value && !await B() || (A.value = k.value, k.value = e, D("change", t, e)));
+		}
+		async function H() {
+			if (m.loading || m.disabled || N.value || !await R()) return;
+			let e = O.value[k.value];
+			e && await z(e) && (e.completed = !0, D("step-complete", e.value, k.value), N.value || await V(k.value + 1));
+		}
+		async function U() {
+			m.loading || m.disabled || M.value || await B() && await V(k.value - 1);
+		}
+		async function W(e) {
+			let t = typeof e == "number" && e >= 0 && e < O.value.length && O.value[e] ? e : O.value.findIndex((t) => t.value === e);
+			t < 0 || m.interactive && L(t) && await V(t);
+		}
+		function G(e) {
+			W(e);
+		}
+		function fe() {
+			O.value.forEach((e) => {
+				e.completed = !1;
+			}), j.value = 0, A.value = 0, k.value = 0;
+			let e = O.value[0]?.value;
+			e !== void 0 && (D("update:modelValue", e), D("change", e, 0));
+		}
+		function pe(e) {
+			D("update:modelValue", e);
+		}
+		function K(e) {
+			return `summary-${e}`;
+		}
+		function q(e, t) {
+			return {
+				step: e,
+				index: t,
+				isActive: t === k.value,
+				next: H,
+				prev: U,
+				goTo: W
+			};
+		}
+		function me(e) {
+			let t = O.value[e];
+			return t && I(t, e) ? "border-primary-300 dark:border-primary-700" : "border-secondary-200 dark:border-secondary-700";
+		}
+		function J(e) {
+			let t = O.value[e];
+			return t && I(t, e) ? "bg-primary-500 dark:bg-primary-600" : "bg-secondary-200 dark:bg-secondary-700";
+		}
+		function he(e) {
+			let t = O.value.length - 1;
+			return e <= 0 ? "justify-start" : e >= t ? "justify-end" : "justify-center";
+		}
+		function Y(e) {
+			let t = O.value.length - 1;
+			return e <= 0 ? "items-start text-left" : e >= t ? "items-end text-right" : "items-center text-center";
+		}
+		function X(e, t) {
+			let n = F(e, t);
+			return n === "error" ? "bg-error-100 dark:bg-error-900 text-error-700 dark:text-error-300" : n === "complete" ? "bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200" : n === "active" ? "bg-primary-200 dark:bg-primary-800 text-primary-900 dark:text-primary-100" : "bg-secondary-200 dark:bg-secondary-700 text-secondary-600 dark:text-secondary-400";
+		}
+		function ge(e, t) {
+			return t === k.value ? "font-semibold text-primary-800 dark:text-primary-200" : "";
+		}
+		function _e(e, t) {
+			let n = F(e, t);
+			return n === "active" ? "text-primary-700 dark:text-primary-300" : n === "complete" ? "text-primary-600 dark:text-primary-400" : n === "error" ? "text-error-600 dark:text-error-400" : "text-secondary-600 dark:text-secondary-400";
+		}
+		function Z(e) {
+			return String(e);
+		}
+		function Q(e, t) {
+			let n = F(e, t);
+			return n === "error" ? {
+				type: "icon",
+				icon: m.iconError || "<path d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />"
+			} : n === "complete" ? ue(e, t) ? {
+				type: "icon",
+				icon: m.iconEdit || "<path d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\" />"
+			} : {
+				type: "icon",
+				icon: m.iconComplete || "<path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />"
+			} : m.variant === "dot" && m.orientation === "horizontal" ? { type: "dot" } : {
+				type: "number",
+				number: t + 1
+			};
+		}
+		let { styles: ve, classes: $, className: ye } = t("Stepper", {}, m);
+		return n({
+			next: H,
+			prev: U,
+			goTo: W,
+			reset: fe,
+			isFirst: M,
+			isLast: N,
+			activeIndex: k,
+			activeValue: ce
+		}), (e, t) => (v(), u("div", {
+			style: te(C(ve)),
+			class: g([C(ye), C($).wrapper])
+		}, [le.value && O.value[0] ? (v(), u(a, { key: 0 }, [C(E)[Z(O.value[0].value)] ? x(e.$slots, Z(O.value[0].value), _(h({ key: 0 }, q(O.value[0], 0)))) : l("", !0)], 64)) : e.orientation === "vertical" && O.value.length ? (v(), u("div", {
+			key: 1,
+			class: g(C($).layout)
+		}, [d("nav", {
+			class: g(C($).sidebar),
+			"aria-label": "Progress"
+		}, [d("ol", { class: g(C($).nav) }, [(v(!0), u(a, null, b(O.value, (t, n) => (v(), u("li", {
+			key: t.value,
+			class: g([
+				C($).navItem,
+				me(n),
+				{
+					"cursor-pointer": e.interactive && L(n) && !e.loading,
+					"cursor-not-allowed": !L(n) || e.loading,
+					"cursor-progress": e.loading
+				}
+			]),
+			"aria-current": n === k.value ? "step" : void 0,
+			"aria-disabled": !L(n) || t.disabled ? "true" : void 0,
+			onClick: (e) => G(n)
+		}, [d("span", { class: g([C($).indicator, X(t, n)]) }, [Q(t, n).type === "icon" ? (v(), c(i, {
+			key: 0,
+			icon: Q(t, n).icon,
+			size: "sm"
+		}, null, 8, ["icon"])) : (v(), u(a, { key: 1 }, [f(S(Q(t, n).number), 1)], 64))], 2), d("div", ae, [
+			d("div", { class: g([C($).title, ge(t, n)]) }, [f(S(t.title) + " ", 1), t.optional ? (v(), u("span", {
+				key: 0,
+				class: g(C($).optional)
+			}, "(optional)", 2)) : l("", !0)], 2),
+			t.subtitle ? (v(), u("div", {
+				key: 0,
+				class: g(C($).subtitle)
+			}, S(t.subtitle), 3)) : l("", !0),
+			t.description ? (v(), u("div", {
+				key: 1,
+				class: g(C($).description)
+			}, S(t.description), 3)) : l("", !0),
+			C(E)[K(t.value)] && I(t, n) && n !== k.value ? (v(), u("div", {
+				key: 2,
+				class: g(C($).summary)
+			}, [x(e.$slots, K(t.value), {
+				step: t,
+				index: n
+			})], 2)) : l("", !0)
+		])], 10, ie))), 128))], 2)], 2), d("div", {
+			class: g(C($).content),
+			"aria-live": "polite"
+		}, [x(e.$slots, "content-prefix"), p(o, {
+			"enter-active-class": "transition-opacity duration-200",
+			"enter-from-class": "opacity-0",
+			"leave-active-class": "transition-opacity duration-150",
+			"leave-to-class": "opacity-0",
+			mode: "out-in"
+		}, {
+			default: T(() => [P.value ? (v(), u("div", {
+				key: P.value.value,
+				class: g(C($).panel),
+				"data-stepper-panel": ""
+			}, [C(E)[Z(P.value.value)] ? x(e.$slots, Z(P.value.value), _(h({ key: 0 }, q(P.value, k.value)))) : l("", !0)], 2)) : l("", !0)]),
+			_: 3
+		})], 2)], 2)) : O.value.length ? (v(), u("div", {
+			key: 2,
+			class: g(C($).layout)
+		}, [p(ee, {
+			scrollbar: !1,
+			horizontal: "",
+			mousewheel: "",
+			class: g(C($).scroller)
+		}, {
+			default: T(() => [d("nav", {
+				class: g(C($).list),
+				"aria-label": "Progress"
+			}, [(v(!0), u(a, null, b(O.value, (t, n) => (v(), c(ne(e.interactive ? "button" : "div"), {
+				key: t.value,
+				type: e.interactive ? "button" : void 0,
+				class: g([
+					C($).step,
+					_e(t, n),
+					Y(n),
+					{
+						"cursor-pointer": e.interactive && L(n) && !e.loading,
+						"cursor-not-allowed": !L(n) || e.loading
+					}
+				]),
+				disabled: !e.interactive || !L(n) || t.disabled || e.loading,
+				"aria-current": n === k.value ? "step" : void 0,
+				onClick: (e) => G(n)
+			}, {
+				default: T(() => [d("div", { class: g([C($).stepTrack, he(n)]) }, [
+					n > 0 ? (v(), u("div", {
+						key: 0,
+						class: g([C($).stepConnector, J(n - 1)])
+					}, null, 2)) : l("", !0),
+					d("span", { class: g([C($).indicatorHorizontal, X(t, n)]) }, [t.icon ? (v(), c(i, {
+						key: 0,
+						icon: t.icon,
+						size: "sm"
+					}, null, 8, ["icon"])) : Q(t, n).type === "icon" ? (v(), c(i, {
+						key: 1,
+						icon: Q(t, n).icon,
+						size: "sm"
+					}, null, 8, ["icon"])) : (v(), u(a, { key: 2 }, [f(S(Q(t, n).number), 1)], 64))], 2),
+					n < O.value.length - 1 ? (v(), u("div", {
+						key: 1,
+						class: g([C($).stepConnector, J(n)])
+					}, null, 2)) : l("", !0)
+				], 2), d("div", { class: g([C($).label, Y(n)]) }, [
+					d("span", oe, S(t.title), 1),
+					t.optional ? (v(), u("span", {
+						key: 0,
+						class: g(C($).optional)
+					}, "(optional)", 2)) : l("", !0),
+					t.subtitle && e.labelPlacement === "end" ? (v(), u("span", {
+						key: 1,
+						class: g(C($).subtitle)
+					}, S(t.subtitle), 3)) : l("", !0)
+				], 2)]),
+				_: 2
+			}, 1032, [
+				"type",
+				"class",
+				"disabled",
+				"aria-current",
+				"onClick"
+			]))), 128))], 2)]),
+			_: 1
+		}, 8, ["class"]), d("div", {
+			class: g(C($).content),
+			"aria-live": "polite"
+		}, [x(e.$slots, "content-prefix"), p(o, {
+			"enter-active-class": "transition-opacity duration-200",
+			"enter-from-class": "opacity-0",
+			"leave-active-class": "transition-opacity duration-150",
+			"leave-to-class": "opacity-0",
+			mode: "out-in"
+		}, {
+			default: T(() => [P.value ? (v(), u("div", {
+				key: P.value.value,
+				class: g(C($).panel)
+			}, [C(E)[Z(P.value.value)] ? x(e.$slots, Z(P.value.value), _(h({ key: 0 }, q(P.value, k.value)))) : l("", !0)], 2)) : l("", !0)]),
+			_: 3
+		})], 2)], 2)) : l("", !0)], 6));
+	}
+});
+//#endregion
+export { E as default };

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

@@ -1,2 +1,2 @@
 export { default as XStepper } from './Stepper.vue';
-export type { StepperProps, StepperVariant, StepperTheme, } from './Stepper.vue';
+export type { StepperProps, StepperStep, StepperStepStatus, StepperVariant, StepperOrientation, StepperLabelPlacement, StepperTheme, } from './Stepper.vue';

package/lib/components/stepper/theme/Stepper.base.theme.js

@@ -1,20 +1,33 @@
-const r = {
-  classes: {
-    wrapper: "",
-    scroller: ({ props: s }) => {
-      const t = [""];
-      return s.fullWidth || t.push("!w-fit"), t;
-    },
-    list: ({ props: s }) => ["flex min-w-full w-fit items-start"],
-    step: ({ props: s, data: t }) => {
-      const e = [""];
-      return s.grow || e.push("w-[8rem]"), e;
-    },
-    label: ({ props: s, data: t }) => [""],
-    icon: ({ props: s, data: t }) => ["mr-2 mt-0.5"],
-    content: "mt-2 mb-4"
-  }
-}, c = r;
-export {
-  c as default
-};
+//#region src/components/stepper/theme/Stepper.base.theme.ts
+var e = { classes: {
+	wrapper: "w-full",
+	layout: ({ props: e }) => e.orientation === "vertical" ? "flex h-full min-h-0" : "flex flex-col",
+	sidebar: "w-full shrink-0 hidden md:block bg-secondary-100 dark:bg-secondary-900 h-full py-4 px-6 overflow-y-auto max-w-[260px]",
+	nav: "relative ml-4 pr-2 list-none m-0 p-0",
+	navItem: "pb-8 pl-6 group relative border-l list-none",
+	indicator: ({ props: e }) => {
+		let t = ["absolute flex items-center justify-center w-8 h-8 rounded-full -start-4 ring-4 ring-secondary-100 dark:ring-secondary-900 font-semibold text-sm shrink-0"];
+		return e.size === "sm" && t.push("w-6 h-6 text-xs -start-3"), t;
+	},
+	indicatorHorizontal: ({ props: e }) => {
+		let t = ["relative z-[1] flex items-center justify-center w-8 h-8 rounded-full font-semibold text-sm shrink-0"];
+		return e.size === "sm" && t.push("w-6 h-6 text-xs"), t;
+	},
+	stepTrack: "flex w-full items-center min-h-8",
+	stepConnector: "h-0.5 flex-1 min-w-[0.5rem] rounded-full",
+	connector: "",
+	title: "text-sm min-h-8 flex flex-col justify-center",
+	subtitle: "text-xs text-secondary-500 dark:text-secondary-400",
+	description: "text-xs text-secondary-500 dark:text-secondary-400",
+	optional: "text-xs font-normal text-secondary-400 dark:text-secondary-500",
+	summary: "text-xs text-secondary-500 dark:text-secondary-400 mt-1",
+	content: ({ props: e }) => e.orientation === "vertical" ? "grow py-4 px-6 md:px-10 overflow-y-auto relative min-h-[8rem]" : "mt-6 px-1 relative min-h-[5rem]",
+	panel: "w-full",
+	scroller: "w-full",
+	list: "flex min-w-full w-full items-start gap-0",
+	step: "flex flex-1 flex-col min-w-[5.5rem] max-w-[12rem] py-2 px-2 border-0 bg-transparent",
+	label: "flex flex-col gap-0.5 mt-2 min-w-0 w-full",
+	icon: "shrink-0"
+} };
+//#endregion
+export { e as default };

package/lib/components/stepper/theme/Stepper.carbon.theme.js

@@ -1,5 +1,5 @@
 import e from "./Stepper.base.theme.js";
-const t = e, o = t;
-export {
-  o as default
-};
+//#region src/components/stepper/theme/Stepper.carbon.theme.ts
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/tab/Tab.js

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

package/lib/components/tab/Tab.vue.d.ts

@@ -15,7 +15,7 @@ declare const tabProps: {
     icon: StringConstructor;
     disabled: BooleanConstructor;
     exact: BooleanConstructor;
-    removable: BooleanConstructor;
+    removable: import("vue").Prop<boolean | undefined>;
     size: {
         readonly type: import("vue").PropType<Size>;
         readonly default: "md";
@@ -42,7 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     icon: StringConstructor;
     disabled: BooleanConstructor;
     exact: BooleanConstructor;
-    removable: BooleanConstructor;
+    removable: import("vue").Prop<boolean | undefined>;
     size: {
         readonly type: import("vue").PropType<Size>;
         readonly default: "md";
@@ -61,7 +61,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     icon: StringConstructor;
     disabled: BooleanConstructor;
     exact: BooleanConstructor;
-    removable: BooleanConstructor;
+    removable: import("vue").Prop<boolean | undefined>;
     size: {
         readonly type: import("vue").PropType<Size>;
         readonly default: "md";
@@ -72,7 +72,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
 }>, {
     disabled: boolean;
     tag: string;
-    removable: boolean;
     size: Size;
     exact: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {

package/lib/components/tab/Tab.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,139 @@
+import { injectTabGroupKey as e } from "../../composables/keys.js";
+import { useResolvedComponentProps as t } from "../../composables/resolveComponentDefaults.js";
+import { useTheme as n } from "../../composables/useTheme.js";
+import { optionalBooleanProp as r } from "../../common/props.js";
+import { useCommon as i } from "../../composables/useCommon.js";
+import a from "../icon/Icon.js";
+import { closeIcon as o } from "../../common/icons.js";
+import s from "../link/Link.js";
+import { useMutationObserver as c } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { Teleport as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, defineComponent as h, inject as g, normalizeClass as _, normalizeStyle as v, onMounted as y, openBlock as b, reactive as x, ref as S, renderSlot as C, resolveDynamicComponent as w, toDisplayString as T, unref as E, withCtx as D } from "vue";
+//#region src/components/tab/Tab.vue?vue&type=script&setup=true&lang.ts
+var O = {
+	...i.props(),
+	value: { type: [String, Number] },
+	tag: {
+		type: String,
+		default: "button"
+	},
+	to: [String, Object],
+	label: String,
+	icon: String,
+	disabled: Boolean,
+	exact: Boolean,
+	removable: r()
+}, k = /* @__PURE__ */ h({
+	name: "XTab",
+	validators: { ...i.validators() },
+	props: O,
+	emits: ["remove"],
+	setup(r) {
+		let i = r, h = t("Tab", i), O = u(() => j.value?.$el?.href || i.value), k = u(() => i.label || i.value), A = S(null), j = S(null), M = g(e, {
+			tabsContentRef: S(null),
+			activateTab: () => {},
+			state: x({
+				active: void 0,
+				variant: "line",
+				ghost: !1,
+				grow: !1,
+				exact: !1,
+				size: "md",
+				color: "primary"
+			})
+		}), N = u(() => M.state.exact || i.exact), P = u(() => i.size || M.state.size);
+		y(() => {
+			A.value = M.tabsContentRef.value, i.to && j.value && (F(), c(j.value.$el, F, {
+				attributes: !0,
+				attributeFilter: ["class"]
+			}));
+		});
+		function F() {
+			j.value && j.value.$el && i.to && j.value.$el.classList.contains(N.value ? "router-link-exact-active" : "router-link-active") && M.activateTab(O.value);
+		}
+		let I = u(() => M.state.active === O.value), L = u(() => M.state.color);
+		function R(e) {
+			if (i.disabled) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			!i.to && O.value !== void 0 && M.activateTab(O.value);
+		}
+		let { styles: z, classes: B, className: V } = n("Tab", {}, S({
+			...i,
+			size: P.value,
+			exact: N.value
+		}), {
+			...M.state,
+			selected: I
+		});
+		return (e, t) => (b(), d(w(e.to ? s : e.tag), {
+			ref_key: "elRef",
+			ref: j,
+			type: e.tag === "button" ? "button" : void 0,
+			"data-value": O.value,
+			to: e.to,
+			color: I.value ? L.value : void 0,
+			style: v([E(z), e.to && I.value && E(M).state.variant === "block" ? "--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);" : ""]),
+			class: _([
+				E(V),
+				E(B).wrapper,
+				"shrink-0",
+				{
+					"flex-1": E(M).state.grow,
+					"text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]": I.value,
+					"cursor-pointer": !e.disabled,
+					"cursor-not-allowed": e.disabled,
+					"cursor-not-allowed text-secondary-500": e.disabled && !I.value
+				}
+			]),
+			"aria-disabled": e.disabled ? "true" : void 0,
+			"aria-selected": I.value ? "true" : "false",
+			onClick: R
+		}, {
+			default: D(() => [C(e.$slots, "tab", {
+				label: e.label,
+				value: e.value,
+				size: P.value,
+				icon: e.icon
+			}, () => [m("div", { class: _(E(B).content) }, [
+				e.icon ? (b(), d(a, {
+					key: 0,
+					icon: e.icon,
+					size: P.value,
+					class: _(E(B).icon)
+				}, null, 8, [
+					"icon",
+					"size",
+					"class"
+				])) : f("", !0),
+				m("div", { class: _(E(B).label) }, T(k.value), 3),
+				E(h).removable ? (b(), d(a, {
+					key: 1,
+					size: "sm",
+					icon: E(o),
+					class: "ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150",
+					onClick: t[0] ||= (t) => e.$emit("remove", t)
+				}, null, 8, ["icon"])) : f("", !0)
+			], 2)]), I.value && A.value ? (b(), d(l, {
+				key: 0,
+				to: A.value
+			}, [e.$slots.default ? (b(), p("div", {
+				key: 0,
+				role: "tabpanel",
+				class: _(E(B).tabpanel)
+			}, [C(e.$slots, "default")], 2)) : f("", !0)], 8, ["to"])) : f("", !0)]),
+			_: 3
+		}, 8, [
+			"type",
+			"data-value",
+			"to",
+			"color",
+			"style",
+			"class",
+			"aria-disabled",
+			"aria-selected"
+		]));
+	}
+});
+//#endregion
+export { k as default };

package/lib/components/tab/TabGroup.js

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

package/lib/components/tab/TabGroup.vue.d.ts

@@ -16,8 +16,8 @@ declare const tabGroupProps: {
         type: PropType<"left" | "right" | "center">;
         default: string;
     };
-    ghost: BooleanConstructor;
-    grow: BooleanConstructor;
+    ghost: import("vue").Prop<boolean | undefined>;
+    grow: import("vue").Prop<boolean | undefined>;
     exact: BooleanConstructor;
     fullWidth: {
         type: BooleanConstructor;
@@ -62,8 +62,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: PropType<"left" | "right" | "center">;
         default: string;
     };
-    ghost: BooleanConstructor;
-    grow: BooleanConstructor;
+    ghost: import("vue").Prop<boolean | undefined>;
+    grow: import("vue").Prop<boolean | undefined>;
     exact: BooleanConstructor;
     fullWidth: {
         type: BooleanConstructor;
@@ -88,8 +88,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: PropType<"left" | "right" | "center">;
         default: string;
     };
-    ghost: BooleanConstructor;
-    grow: BooleanConstructor;
+    ghost: import("vue").Prop<boolean | undefined>;
+    grow: import("vue").Prop<boolean | undefined>;
     exact: BooleanConstructor;
     fullWidth: {
         type: BooleanConstructor;
@@ -110,10 +110,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     color: string;
     size: Size;
     align: "left" | "right" | "center";
-    ghost: boolean;
     exact: boolean;
     variant: "block" | "line";
-    grow: boolean;
     fullWidth: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;