@vellira-ui/react 2.59.4 → 2.60.0

package/dist/index.js

@@ -3827,15 +3827,15 @@ ni.displayName = "Tabs.Indicator";
 //#endregion
 //#region src/components/Tabs/List/TabsList.tsx
 var ri = ({ children: e, className: t, scrollable: n, ...r }) => {
-	let { orientation: i, variant: a } = Yr(), o = n ?? !1;
+	let { mode: i, orientation: a, variant: o } = Yr(), s = n ?? !1;
 	return /* @__PURE__ */ d("div", {
 		...r,
-		role: "tablist",
-		"aria-orientation": i,
-		"data-orientation": i,
-		"data-variant": a,
-		"data-scrollable": o ? "" : void 0,
-		className: U(ti.list, i === "vertical" && ti.vertical, a === "line" && ti.line, a === "pills" && ti.pills, a === "segmented" && ti.segmented, o && ti.scrollable, t),
+		role: i === "tabs" ? "tablist" : void 0,
+		"aria-orientation": i === "tabs" ? a : void 0,
+		"data-orientation": a,
+		"data-variant": o,
+		"data-scrollable": s ? "" : void 0,
+		className: U(ti.list, a === "vertical" && ti.vertical, o === "line" && ti.line, o === "pills" && ti.pills, o === "segmented" && ti.segmented, s && ti.scrollable, t),
 		children: e
 	});
 };
@@ -3914,119 +3914,122 @@ var ii = (e) => [...e].sort((e, t) => {
 } }), si = {
 	tabs: "_tabs_1hj56_1",
 	vertical: "_vertical_1hj56_30"
-}, ci = ({ children: e, value: t, defaultValue: n, onValueChange: r, orientation: i = "horizontal", activationMode: a = "automatic", dir: o = "ltr", loop: s = !0, variant: c = "line", color: l = "primary", size: u = "md", keepMounted: f = !1, lazyMount: p = !1, disabled: m = !1, className: h, ...g }) => {
-	let _ = S(), v = t !== void 0, { value: b, setValue: C } = Ue({
+}, ci = ({ children: e, value: t, defaultValue: n, onValueChange: r, orientation: i = "horizontal", activationMode: a = "automatic", dir: o = "ltr", loop: s = !0, mode: c = "tabs", variant: l = "line", color: u = "primary", size: f = "md", keepMounted: p = !1, lazyMount: m = !1, disabled: h = !1, className: g, ..._ }) => {
+	let v = S(), b = t !== void 0, { value: C, setValue: w } = Ue({
 		value: t,
 		defaultValue: n,
 		onValueChange: r
-	}), w = T(b), D = T(void 0), O = T(void 0), [k, A] = E(b), { version: j, triggersRef: M, contentsRef: N, registerTrigger: P, registerContent: F } = ai(), I = y((e, t, n = !1) => {
+	}), D = T(C), O = T(void 0), k = T(void 0), [A, j] = E(C), { version: M, triggersRef: N, contentsRef: P, registerTrigger: F, registerContent: I } = ai(), L = y((e, t, n = !1) => {
 		if (!t) {
-			let t = w.current, n = M.current, r = n.findIndex((t) => t.value === e);
+			let t = D.current, n = N.current, r = n.findIndex((t) => t.value === e);
 			if (t === e && r >= 0) {
 				let t = n.filter((t) => !t.disabled && t.value !== e), i = t.find((e) => n.findIndex((t) => t.value === e.value) > r), a = [...t].reverse().find((e) => n.findIndex((t) => t.value === e.value) < r);
-				D.current = i?.value ?? a?.value, !v && D.current && (C(D.current), A(D.current), D.current = void 0);
+				O.current = i?.value ?? a?.value, !b && O.current && (w(O.current), j(O.current), O.current = void 0);
 			}
 		}
-		P(e, t, m || n);
+		F(e, t, h || n);
 	}, [
-		m,
-		v,
-		P,
-		A,
-		C,
-		M
-	]), { onKeyDown: L } = oi({
-		focusedValue: k,
-		setValue: C,
-		setFocusedValue: A,
-		getTabs: () => M.current,
+		h,
+		b,
+		F,
+		j,
+		w,
+		N
+	]), { onKeyDown: R } = oi({
+		focusedValue: A,
+		setValue: w,
+		setFocusedValue: j,
+		getTabs: () => N.current,
 		orientation: i,
 		activationMode: a,
 		dir: o,
 		loop: s
-	}), R = {
-		value: b,
-		focusedValue: k,
-		collectionVersion: j,
-		setValue: C,
-		setFocusedValue: A,
+	}), z = {
+		value: C,
+		focusedValue: A,
+		collectionVersion: M,
+		setValue: w,
+		setFocusedValue: j,
+		mode: c,
 		orientation: i,
 		activationMode: a,
 		dir: o,
 		loop: s,
-		variant: c,
-		color: l,
-		size: u,
-		keepMounted: f,
-		lazyMount: p,
-		disabled: m,
-		registerTrigger: I,
-		registerContent: F,
-		onTriggerKeyDown: L,
-		getTriggerId: y((e) => `${_}-trigger-${e}`, [_]),
-		getContentId: y((e) => `${_}-content-${e}`, [_])
+		variant: l,
+		color: u,
+		size: f,
+		keepMounted: p,
+		lazyMount: m,
+		disabled: h,
+		registerTrigger: L,
+		registerContent: I,
+		onTriggerKeyDown: R,
+		getTriggerId: y((e) => `${v}-trigger-${e}`, [v]),
+		getContentId: y((e) => `${v}-content-${e}`, [v])
 	};
 	return x(() => {
-		w.current = b;
-	}, [b]), x(() => {
-		let e = M.current.filter((e) => !e.disabled), t = e.find((e) => e.value === b), n = M.current.some((e) => e.value === b), r = D.current ?? e[0]?.value;
-		if (D.current = void 0, v) {
-			process.env.NODE_ENV !== "production" && b && !n && M.current.length > 0 && console.warn(`Tabs: value "${b}" does not match any Tabs.Trigger.`), !t && !k && e[0] && A(e[0].value);
+		D.current = C;
+	}, [C]), x(() => {
+		let e = N.current.filter((e) => !e.disabled), t = e.find((e) => e.value === C), n = N.current.some((e) => e.value === C), r = O.current ?? e[0]?.value;
+		if (O.current = void 0, b) {
+			process.env.NODE_ENV !== "production" && C && !n && N.current.length > 0 && console.warn(`Tabs: value "${C}" does not match any Tabs.Trigger.`), !t && !A && e[0] && j(e[0].value);
 			return;
 		}
-		if (!b || !n) {
-			r ? (C(r), A(r)) : A(void 0);
+		if (!C || !n) {
+			r ? (w(r), j(r)) : j(void 0);
 			return;
 		}
-		t && O.current !== b && (A(b), O.current = b);
+		t && k.current !== C && (j(C), k.current = C);
 	}, [
-		k,
-		v,
-		C,
-		M,
+		A,
 		b,
-		j
+		w,
+		N,
+		C,
+		M
 	]), x(() => {
-		if (process.env.NODE_ENV === "production") return;
-		let e = M.current.map((e) => e.value), t = N.current.map((e) => e.value), n = e.find((t, n) => e.indexOf(t) !== n);
+		if (process.env.NODE_ENV === "production" || c === "navigation") return;
+		let e = N.current.map((e) => e.value), t = P.current.map((e) => e.value), n = e.find((t, n) => e.indexOf(t) !== n);
 		n && console.warn(`Tabs.Trigger values must be unique. Duplicate value: "${n}".`);
 		for (let n of e) t.includes(n) || console.warn(`Tabs.Trigger value "${n}" does not match any Tabs.Content.`);
 		for (let n of t) e.includes(n) || console.warn(`Tabs.Content value "${n}" does not match any Tabs.Trigger.`);
 	}, [
+		P,
+		c,
 		N,
-		M,
-		j
+		M
 	]), /* @__PURE__ */ d(Jr.Provider, {
-		value: R,
+		value: z,
 		children: /* @__PURE__ */ d("div", {
-			...g,
-			className: U(si.tabs, i === "vertical" && si.vertical, h),
+			..._,
+			className: U(si.tabs, i === "vertical" && si.vertical, g),
+			"data-mode": c,
 			"data-orientation": i,
 			dir: o,
-			"data-variant": c,
-			"data-color": l,
-			"data-size": u,
-			"data-disabled": m ? "" : void 0,
+			"data-variant": l,
+			"data-color": u,
+			"data-size": f,
+			"data-disabled": h ? "" : void 0,
 			children: e
 		})
 	});
 };
 ci.displayName = "Tabs";
 var li = {
-	trigger: "_trigger_uc2y5_1",
-	iconOnly: "_iconOnly_uc2y5_49",
-	icon: "_icon_uc2y5_49",
-	body: "_body_uc2y5_69",
-	label: "_label_uc2y5_77",
-	description: "_description_uc2y5_84",
-	badge: "_badge_uc2y5_90",
-	sm: "_sm_uc2y5_105",
-	md: "_md_uc2y5_123",
-	lg: "_lg_uc2y5_127",
-	segmented: "_segmented_uc2y5_149",
-	line: "_line_uc2y5_194",
-	pills: "_pills_uc2y5_209",
-	vertical: "_vertical_uc2y5_235"
+	trigger: "_trigger_mt0se_1",
+	iconOnly: "_iconOnly_mt0se_49",
+	icon: "_icon_mt0se_49",
+	body: "_body_mt0se_69",
+	label: "_label_mt0se_77",
+	description: "_description_mt0se_84",
+	badge: "_badge_mt0se_90",
+	sm: "_sm_mt0se_105",
+	md: "_md_mt0se_123",
+	lg: "_lg_mt0se_127",
+	segmented: "_segmented_mt0se_149",
+	line: "_line_mt0se_196",
+	pills: "_pills_mt0se_211",
+	vertical: "_vertical_mt0se_239"
 }, ui = ({ children: e, className: t }) => /* @__PURE__ */ d("span", {
 	className: U(li.badge, t),
 	children: e
@@ -4042,62 +4045,113 @@ var di = ({ children: e, className: t }) => /* @__PURE__ */ d("span", {
 di.displayName = "Tabs.Icon";
 //#endregion
 //#region src/components/Tabs/Trigger/TabsTrigger.tsx
-var fi = _(({ value: e, children: t, className: n, disabled: r = !1, icon: i, badge: a, description: o, onClick: s, onKeyDown: c, ...l }, u) => {
-	let { value: m, focusedValue: h, setValue: g, setFocusedValue: _, orientation: b, variant: x, size: S, disabled: C, registerTrigger: w, onTriggerKeyDown: T, getTriggerId: E, getContentId: D } = Yr(), O = C || r, k = m === e, A = h === e || !h && k, j = p.toArray(t), M = j.some((e) => v(e) && e.type.displayName === "Tabs.Icon"), N = !!i, P = (N || M) && t == null;
-	process.env.NODE_ENV !== "production" && N && M && console.warn(`Tabs.Trigger value "${e}" received both icon and Tabs.Icon. Tabs.Icon takes precedence.`);
-	let F = y((t) => {
-		w(e, t, O), typeof u == "function" ? u(t) : u && (u.current = t);
+var fi = _(({ value: e, children: t, className: n, disabled: r = !1, asChild: i = !1, icon: a, badge: o, description: s, onClick: c, onKeyDown: l, ...m }, g) => {
+	let { value: _, focusedValue: b, setValue: x, setFocusedValue: S, mode: C, orientation: w, variant: T, size: E, disabled: D, registerTrigger: O, onTriggerKeyDown: k, getTriggerId: A, getContentId: j } = Yr(), M = D || r, N = _ === e, P = b === e || !b && N, F = i && v(t) ? t : void 0, I = F ? F.props.children : t, L = p.toArray(I), R = L.some((e) => v(e) && e.type.displayName === "Tabs.Icon"), z = !!a, B = (z || R) && I == null;
+	process.env.NODE_ENV !== "production" && z && R && console.warn(`Tabs.Trigger value "${e}" received both icon and Tabs.Icon. Tabs.Icon takes precedence.`);
+	let ee = y((t) => {
+		O(e, t, M), typeof g == "function" ? g(t) : g && (g.current = t);
 	}, [
+		M,
+		g,
 		O,
-		u,
-		w,
 		e
-	]), I = N && !M || a || o, L = j.every((e) => typeof e == "string" || typeof e == "number");
-	return /* @__PURE__ */ f("button", {
-		...l,
-		ref: F,
+	]), V = z && !R || o || s, H = L.every((e) => typeof e == "string" || typeof e == "number"), te = U(li.trigger, li[T], li[E], w === "vertical" && li.vertical, z && li.withIcon, B && li.iconOnly, n), ne = (t) => {
+		if (M) {
+			t.preventDefault();
+			return;
+		}
+		S(e), x(e);
+	}, re = (e) => {
+		e.defaultPrevented || k(e);
+	};
+	return C === "navigation" && F ? h(F, {
+		...m,
+		ref: ee,
+		id: A(e),
+		className: U(F.props.className, te),
+		"aria-current": N ? "page" : void 0,
+		"aria-disabled": M || void 0,
+		"data-state": N ? "active" : "inactive",
+		tabIndex: M ? -1 : F.props.tabIndex,
+		onClick: (e) => {
+			if (F.props.onClick?.(e), M) {
+				e.preventDefault();
+				return;
+			}
+			ne(e);
+		},
+		onKeyDown: (e) => {
+			F.props.onKeyDown?.(e), !e.defaultPrevented && re(e);
+		},
+		children: /* @__PURE__ */ f(u, { children: [
+			z && !R && /* @__PURE__ */ d("span", {
+				className: li.icon,
+				"aria-hidden": "true",
+				children: a
+			}),
+			I != null && (V ? /* @__PURE__ */ f("span", {
+				className: li.body,
+				children: [/* @__PURE__ */ d("span", {
+					className: li.label,
+					children: I
+				}), s != null && /* @__PURE__ */ d("span", {
+					className: li.description,
+					children: s
+				})]
+			}) : H ? /* @__PURE__ */ d("span", {
+				className: li.label,
+				children: I
+			}) : I),
+			o != null && /* @__PURE__ */ d("span", {
+				className: li.badge,
+				children: o
+			})
+		] })
+	}) : (process.env.NODE_ENV !== "production" && C === "tabs" && i && console.warn("Tabs.Trigger: asChild is only supported when Tabs mode=\"navigation\"."), process.env.NODE_ENV !== "production" && C === "navigation" && i && !F && console.warn("Tabs.Trigger: asChild requires a single valid React element child."), /* @__PURE__ */ f("button", {
+		...m,
+		ref: ee,
 		type: "button",
 		role: "tab",
-		id: E(e),
-		"aria-selected": k,
-		"aria-controls": D(e),
-		disabled: O,
-		tabIndex: A ? 0 : -1,
-		"data-state": k ? "active" : "inactive",
-		"data-orientation": b,
-		"data-disabled": O ? "" : void 0,
-		className: U(li.trigger, li[x], li[S], b === "vertical" && li.vertical, N && li.withIcon, P && li.iconOnly, n),
-		onClick: (t) => {
-			s?.(t), !(t.defaultPrevented || O) && (_(e), g(e));
+		id: A(e),
+		"aria-selected": N,
+		"aria-controls": j(e),
+		disabled: M,
+		tabIndex: P ? 0 : -1,
+		"data-state": N ? "active" : "inactive",
+		"data-orientation": w,
+		"data-disabled": M ? "" : void 0,
+		className: te,
+		onClick: (e) => {
+			c?.(e), !e.defaultPrevented && ne(e);
 		},
 		onKeyDown: (e) => {
-			c?.(e), !e.defaultPrevented && T(e);
+			l?.(e), !e.defaultPrevented && re(e);
 		},
 		children: [
-			N && !M && /* @__PURE__ */ d("span", {
+			z && !R && /* @__PURE__ */ d("span", {
 				className: li.icon,
 				"aria-hidden": "true",
-				children: i
+				children: a
 			}),
-			t != null && (I ? /* @__PURE__ */ f("span", {
+			I != null && (V ? /* @__PURE__ */ f("span", {
 				className: li.body,
 				children: [/* @__PURE__ */ d("span", {
 					className: li.label,
-					children: t
-				}), o != null && /* @__PURE__ */ d("span", {
+					children: I
+				}), s != null && /* @__PURE__ */ d("span", {
 					className: li.description,
-					children: o
+					children: s
 				})]
-			}) : L ? /* @__PURE__ */ d("span", {
+			}) : H ? /* @__PURE__ */ d("span", {
 				className: li.label,
-				children: t
-			}) : t),
-			a != null && /* @__PURE__ */ d("span", {
+				children: I
+			}) : I),
+			o != null && /* @__PURE__ */ d("span", {
 				className: li.badge,
-				children: a
+				children: o
 			})
 		]
-	});
+	}));
 });
 fi.displayName = "Tabs.Trigger";
 //#endregion