haze-ui 1.32.0 → 1.34.0

package/dist/components/Table/TableHead.js

@@ -1,16 +1,25 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useTableClassNames as t } from "./TableContext.js";
 /* empty css                    */
-import { jsx as t } from "react/jsx-runtime";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/lib/components/Table/TableHead.tsx
-var n = "haze-TableHead__head";
-function r({ className: r, children: i }) {
-	return /* @__PURE__ */ t("thead", {
+var i = "haze-TableHead__head";
+function a(a) {
+	let o = n(6), { className: s, children: c } = a, l = t()?.head, u;
+	o[0] !== s || o[1] !== l ? (u = [
+		i,
+		l,
+		s
+	], o[0] = s, o[1] = l, o[2] = u) : u = o[2];
+	let d;
+	return o[3] !== c || o[4] !== u ? (d = /* @__PURE__ */ r("thead", {
 		"data-slot": "header",
-		className: e([n, r]),
-		children: i
-	});
+		className: e(u),
+		children: c
+	}), o[3] = c, o[4] = u, o[5] = d) : d = o[5], d;
 }
 //#endregion
-export { r as default };
+export { a as default };

package/dist/components/Table/TableRow.js

@@ -1,13 +1,18 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { jsx as t } from "react/jsx-runtime";
+import { useTableClassNames as t } from "./TableContext.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/lib/components/Table/TableRow.tsx
-function n({ className: n, children: r }) {
-	return /* @__PURE__ */ t("tr", {
+function i(i) {
+	let a = n(6), { className: o, children: s } = i, c = t()?.row, l;
+	a[0] !== o || a[1] !== c ? (l = [c, o], a[0] = o, a[1] = c, a[2] = l) : l = a[2];
+	let u;
+	return a[3] !== s || a[4] !== l ? (u = /* @__PURE__ */ r("tr", {
 		"data-slot": "row",
-		className: e([n]),
-		children: r
-	});
+		className: e(l),
+		children: s
+	}), a[3] = s, a[4] = l, a[5] = u) : u = a[5], u;
 }
 //#endregion
-export { n as default };
+export { i as default };

package/dist/components/Table/table-styles.js

@@ -0,0 +1,7 @@
+
+"use client";
+/* empty css                       */
+//#region src/lib/components/Table/table-styles.ts
+var e = "haze-table-styles__stripedStyle", t = "haze-table-styles__borderedStyle";
+//#endregion
+export { t as borderedStyle, e as stripedStyle };

package/dist/components/Tabs/SortableTabList.js

@@ -8,12 +8,13 @@ import { sortableItemStyle as i } from "../../utils/sortable-shared.js";
 import { SortableRegion as a } from "../../utils/sortable.js";
 import { edgeScrollDelta as o } from "./edge-scroll.js";
 /* empty css                          */
-import { Children as s, createContext as c, isValidElement as l, useCallback as u, useContext as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { jsx as g } from "react/jsx-runtime";
-import { arrayMove as _, horizontalListSortingStrategy as v, useSortable as y } from "@dnd-kit/sortable";
+import { c as s } from "react/compiler-runtime";
+import { Children as c, createContext as l, isValidElement as u, useCallback as d, useContext as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _ } from "react/jsx-runtime";
+import { arrayMove as v, horizontalListSortingStrategy as y, useSortable as b } from "@dnd-kit/sortable";
 //#region src/lib/components/Tabs/SortableTabList.tsx
-var b = "haze-SortableTabList__sortableTab", x = "haze-SortableTabList__sortableTabActive", S = "haze-SortableTabList__sortableTabDragging", C = c(null);
-function w(e, t, n) {
+var x = "haze-SortableTabList__sortableTab", S = "haze-SortableTabList__sortableTabActive", C = "haze-SortableTabList__sortableTabDragging", w = l(null);
+function T(e, t, n) {
 	if (n.offsetParent !== t) return null;
 	let r = 0;
 	for (let e of Array.from(t.children)) {
@@ -29,20 +30,20 @@ function w(e, t, n) {
 		scaleY: 1
 	};
 }
-function T({ id: n, children: r }) {
-	let { value: a, setValue: o } = t(), { listeners: s, setNodeRef: c, transform: h, transition: _, isDragging: v } = y({ id: n }), T = m(null), E = d(C), D = m(null), O = u((e) => {
+function E({ id: n, children: r }) {
+	let { value: a, setValue: o } = t(), { listeners: s, setNodeRef: c, transform: l, transition: g, isDragging: v } = b({ id: n }), y = h(null), E = f(w), D = h(null), O = d((e) => {
 		D.current = e, c(e);
-	}, [c]), k = l(r) ? r.props.value : void 0, A = k !== void 0 && a === k, j = p(() => {
+	}, [c]), k = u(r) ? r.props.value : void 0, A = k !== void 0 && a === k, j = m(() => {
 		let e = E?.current, t = D.current;
-		return !h || !e || !t ? h : w(h, e, t) ?? h;
-	}, [h, E]);
-	f(() => {
+		return !l || !e || !t ? l : T(l, e, t) ?? l;
+	}, [l, E]);
+	p(() => {
 		if (v) {
-			T.current === null && (T.current = a);
+			y.current === null && (y.current = a);
 			return;
 		}
-		let e = T.current;
-		e !== null && (T.current = null, e !== a && o(e));
+		let e = y.current;
+		e !== null && (y.current = null, e !== a && o(e));
 	}, [
 		v,
 		a,
@@ -53,64 +54,82 @@ function T({ id: n, children: r }) {
 		t?.(e), e.defaultPrevented && e.stopPropagation();
 	}
 	let N = s?.onPointerDown;
-	return /* @__PURE__ */ g("span", {
+	return /* @__PURE__ */ _("span", {
 		ref: O,
 		"data-slot": "sortable-tab",
-		style: i(j, _),
+		style: i(j, g),
 		onPointerDown: N,
 		onKeyDownCapture: M,
 		className: e([
-			b,
-			A && x,
-			v && S
+			x,
+			A && S,
+			v && C
 		]),
 		children: r
 	});
 }
-function E({ className: e, onReorder: t, children: i }) {
-	let c = s.toArray(i), u = c.map((e, t) => {
-		if (l(e)) {
-			let t = e.props.value;
-			if (t !== void 0) return t;
-		}
-		return t;
-	}), d = p(() => n(c), [c]), y = m(null), b = m(0), [x, S] = h(!1);
-	return f(() => {
-		if (!x) return;
+function D(e) {
+	let t = s(26), { className: i, onReorder: l, children: u } = e, d, f;
+	t[0] === u ? (d = t[1], f = t[2]) : (d = c.toArray(u), f = d.map(O), t[0] = u, t[1] = d, t[2] = f);
+	let m = f, b;
+	t[3] === d ? b = t[4] : (b = n(d), t[3] = d, t[4] = b);
+	let x = b, S = h(null), C = h(0), [T, D] = g(!1), k, A;
+	t[5] === T ? (k = t[6], A = t[7]) : (k = () => {
+		if (!T) return;
 		let e = 0, t = () => {
-			let n = y.current;
+			let n = S.current;
 			if (n) {
 				let e = n.getBoundingClientRect();
-				n.scrollLeft += o(e, b.current);
+				n.scrollLeft += o(e, C.current);
 			}
 			e = requestAnimationFrame(t);
 		};
 		e = requestAnimationFrame(t);
 		let n = (e) => {
-			b.current = e.clientX;
+			C.current = e.clientX;
 		};
 		return window.addEventListener("pointermove", n), () => {
 			cancelAnimationFrame(e), window.removeEventListener("pointermove", n);
 		};
-	}, [x]), /* @__PURE__ */ g("div", { children: g(C.Provider, {
-		value: y,
-		children: /* @__PURE__ */ g(a, {
-			ids: u,
-			strategy: v,
-			onMove: (e, n) => t?.(_(u, e, n).map((e) => u.indexOf(e))),
-			onDragStart: (e) => S(e.activatorEvent.type === "pointerdown"),
-			onDragEnd: () => S(!1),
-			children: /* @__PURE__ */ g(r, {
-				className: e,
-				listRef: y,
-				tabMetas: d,
-				children: c.map((e, t) => /* @__PURE__ */ g(T, {
-					id: u[t] ?? t,
-					children: e
-				}, u[t] ?? t))
-			})
+	}, A = [T], t[5] = T, t[6] = k, t[7] = A), p(k, A);
+	let j;
+	t[8] !== m || t[9] !== l ? (j = (e, t) => l?.(v(m, e, t).map((e) => m.indexOf(e))), t[8] = m, t[9] = l, t[10] = j) : j = t[10];
+	let M, N;
+	t[11] === Symbol.for("react.memo_cache_sentinel") ? (M = (e) => D(e.activatorEvent.type === "pointerdown"), N = () => D(!1), t[11] = M, t[12] = N) : (M = t[11], N = t[12]);
+	let P;
+	if (t[13] !== m || t[14] !== d) {
+		let e;
+		t[16] === m ? e = t[17] : (e = (e, t) => /* @__PURE__ */ _(E, {
+			id: m[t] ?? t,
+			children: e
+		}, m[t] ?? t), t[16] = m, t[17] = e), P = d.map(e), t[13] = m, t[14] = d, t[15] = P;
+	} else P = t[15];
+	let F;
+	t[18] !== i || t[19] !== P || t[20] !== x ? (F = /* @__PURE__ */ _(r, {
+		className: i,
+		listRef: S,
+		tabMetas: x,
+		children: P
+	}), t[18] = i, t[19] = P, t[20] = x, t[21] = F) : F = t[21];
+	let I;
+	return t[22] !== m || t[23] !== j || t[24] !== F ? (I = /* @__PURE__ */ _("div", { children: _(w.Provider, {
+		value: S,
+		children: /* @__PURE__ */ _(a, {
+			ids: m,
+			strategy: y,
+			onMove: j,
+			onDragStart: M,
+			onDragEnd: N,
+			children: F
 		})
-	}) });
+	}) }), t[22] = m, t[23] = j, t[24] = F, t[25] = I) : I = t[25], I;
+}
+function O(e, t) {
+	if (u(e)) {
+		let t = e.props.value;
+		if (t !== void 0) return t;
+	}
+	return t;
 }
 //#endregion
-export { E as default };
+export { D as default };

package/dist/components/Tabs/Tab.js

@@ -3,95 +3,112 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 import { useTabsContext as n } from "./TabsContext.js";
+import { tabVariants as r } from "./tabs-styles.js";
 /* empty css              */
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { c as i } from "react/compiler-runtime";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/lib/components/Tabs/Tab.tsx
-var o = "haze-Tab__base", s = "haze-Tab__active", c = "haze-Tab__iconSlot", l = "haze-Tab__statusDot", u = {
+var c = "haze-Tab__base", l = "haze-Tab__activeFloor", u = "haze-Tab__disabledClass", d = "haze-Tab__iconSlot", f = "haze-Tab__statusDot", p = {
 	dirty: "haze-Tab__dirty",
 	error: "haze-Tab__error",
 	syncing: "haze-Tab__syncing"
-}, d = "haze-Tab__srOnly", f = "haze-Tab__labelContent", p = "haze-Tab__closeGlyph", m = "haze-Tab__closablePad", h = {
+}, m = "haze-Tab__srOnly", h = "haze-Tab__labelContent", g = "haze-Tab__closeGlyph", _ = "haze-Tab__closablePad", v = {
 	dirty: "statusDirty",
 	error: "statusError",
 	syncing: "statusSyncing"
 };
-function g({ status: t }) {
-	return /* @__PURE__ */ i("span", {
+function y(t) {
+	let n = i(2), { status: r } = t, a = p[r], s;
+	return n[0] === a ? s = n[1] : (s = /* @__PURE__ */ o("span", {
 		"data-slot": "tab-status-dot",
 		"aria-hidden": "true",
-		className: e([l, u[t]])
-	});
+		className: e([f, a])
+	}), n[0] = a, n[1] = s), s;
 }
-function _({ value: l, icon: u, status: _, statusLabel: v, closable: y = !1, closeLabel: b, onClose: x, className: S, children: C }) {
-	let { value: w, setValue: T, classNames: E } = n(), D = t("tabs"), O = w === l, k = (e) => {
-		e.stopPropagation(), x?.(e);
-	}, A = /* @__PURE__ */ a(r, { children: [
-		u !== void 0 && /* @__PURE__ */ i("span", {
+function b({ value: i, icon: f, status: p, statusLabel: b, closable: x = !1, closeLabel: S, onClose: C, disabled: w = !1, className: T, children: E }) {
+	let { value: D, setValue: O, variant: k, classNames: A } = n(), j = t("tabs"), M = D === i, N = r[k], P = (e) => {
+		e.stopPropagation(), C?.(e);
+	}, F = () => {
+		w || O(i);
+	}, I = /* @__PURE__ */ s(a, { children: [
+		f !== void 0 && /* @__PURE__ */ o("span", {
 			"data-slot": "icon",
 			"aria-hidden": "true",
-			className: e(c),
-			children: u
-		}),
-		C,
-		_ !== void 0 && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(g, { status: _ }), /* @__PURE__ */ i("span", {
 			className: e(d),
-			children: v ?? D[h[_]]
+			children: f
+		}),
+		E,
+		p !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(y, { status: p }), /* @__PURE__ */ o("span", {
+			className: e(m),
+			children: b ?? j[v[p]]
 		})] })
 	] });
-	return y ? /* @__PURE__ */ a("div", {
+	return x ? /* @__PURE__ */ s("div", {
 		"data-slot": "tab",
+		"data-variant": k,
 		role: "tab",
-		"aria-selected": O,
-		"aria-controls": `tabpanel-${l}`,
-		tabIndex: O ? 0 : -1,
-		"data-haze-tab-value": l,
+		"aria-selected": M,
+		"aria-disabled": w || void 0,
+		"aria-controls": `tabpanel-${i}`,
+		tabIndex: M ? 0 : -1,
+		"data-haze-tab-value": i,
 		onKeyDown: (e) => {
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault(), T(l);
-				return;
+			if (!w) {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault(), O(i);
+					return;
+				}
+				e.key === "Delete" && (e.preventDefault(), C?.(e));
 			}
-			e.key === "Delete" && (e.preventDefault(), x?.(e));
 		},
-		onClick: () => T(l),
+		onClick: F,
 		className: e([
-			o,
-			O && s,
-			m,
-			S,
-			E?.tab
+			c,
+			N.idle,
+			M && l,
+			M && N.active,
+			w && u,
+			_,
+			T,
+			A?.tab
 		]),
-		children: [/* @__PURE__ */ i("span", {
+		children: [/* @__PURE__ */ o("span", {
 			"data-slot": "tab-label",
-			className: e(f),
-			children: A
-		}), /* @__PURE__ */ i("span", {
+			className: e(h),
+			children: I
+		}), /* @__PURE__ */ o("span", {
 			role: "button",
 			"data-slot": "tab-close",
-			"aria-label": b ?? D.close,
-			onClick: k,
-			className: e(p),
-			children: /* @__PURE__ */ i("span", {
+			"aria-label": S ?? j.close,
+			onClick: P,
+			className: e(g),
+			children: /* @__PURE__ */ o("span", {
 				"aria-hidden": "true",
 				children: "×"
 			})
 		})]
-	}) : /* @__PURE__ */ i("button", {
+	}) : /* @__PURE__ */ o("button", {
 		type: "button",
 		"data-slot": "tab",
+		"data-variant": k,
 		role: "tab",
-		"aria-selected": O,
-		"aria-controls": `tabpanel-${l}`,
-		tabIndex: O ? 0 : -1,
-		"data-haze-tab-value": l,
-		onClick: () => T(l),
+		"aria-selected": M,
+		"aria-controls": `tabpanel-${i}`,
+		tabIndex: M ? 0 : -1,
+		"data-haze-tab-value": i,
+		disabled: w,
+		onClick: F,
 		className: e([
-			o,
-			O && s,
-			S,
-			E?.tab
+			c,
+			N.idle,
+			M && l,
+			M && N.active,
+			w && u,
+			T,
+			A?.tab
 		]),
-		children: A
+		children: I
 	});
 }
 //#endregion
-export { g as TabStatusDot, _ as default };
+export { y as TabStatusDot, b as default };

package/dist/components/Tabs/TabList.js

@@ -4,101 +4,122 @@ import { classnames as e } from "../../utils/classnames.js";
 import { getDirection as t } from "../../utils/direction.js";
 import { useStrings as n } from "../LocaleProvider/useStrings.js";
 import { useTabsContext as r } from "./TabsContext.js";
-import i from "../Menu/Menu.js";
+import { listVariants as i } from "./tabs-styles.js";
 import { TabStatusDot as a } from "./Tab.js";
-import { collectTabMetas as o } from "./tab-metas.js";
+import o from "../Menu/Menu.js";
+import { collectTabMetas as s } from "./tab-metas.js";
 /* empty css                  */
-import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { useControl as m } from "react-use-control";
+import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useControl as h } from "react-use-control";
 //#region src/lib/components/Tabs/TabList.tsx
-var h = "haze-TabList__base", g = "haze-TabList__grow", _ = "haze-TabList__bar", v = "haze-TabList__overflowArea", y = "haze-TabList__overflowButton", b = "haze-TabList__menuTabLabel", x = "[role=\"tab\"]:not([disabled])";
-function S({ className: S, listRef: C, overflowLabel: w, children: T, tabMetas: E }) {
-	let { value: D, setValue: O, classNames: k } = r(), A = n("tabs"), j = u(null), M = C ?? j, [N, P] = d(!1), [, F, I] = m(void 0, !1), L = l(() => E ?? o(T), [E, T]), R = l(() => L.length === 0 ? [] : [{
+var g = "haze-TabList__base", _ = "haze-TabList__grow", v = "haze-TabList__bar", y = "haze-TabList__overflowArea", b = "haze-TabList__overflowAreaLine", x = "haze-TabList__stripButton", S = "haze-TabList__menuTabLabel", C = "[role=\"tab\"]:not([disabled]):not([aria-disabled=\"true\"])";
+function w({ className: w, listRef: T, overflowLabel: E, children: D, tabMetas: O }) {
+	let { value: k, setValue: A, variant: j, addable: M, classNames: N } = r(), P = n("tabs"), F = d(null), I = T ?? F, [L, R] = f(!1), [, z, B] = h(void 0, !1), V = u(() => O ?? s(D), [O, D]), H = u(() => V.length === 0 ? [] : [{
 		type: "group",
-		key: `tab-list-overflow-${D}`,
-		value: D,
+		key: `tab-list-overflow-${k}`,
+		value: k,
 		onValueChange: (e) => {
-			O(e), F(!1);
+			A(e), z(!1);
 		},
-		children: L.map((t) => ({
+		children: V.map((t) => ({
 			type: "radio",
 			key: t.value,
 			value: t.value,
 			icon: t.icon,
-			label: t.status ? /* @__PURE__ */ p("span", {
-				className: e(b),
-				children: [/* @__PURE__ */ f(a, { status: t.status }), t.label]
+			disabled: t.disabled,
+			label: t.status ? /* @__PURE__ */ m("span", {
+				className: e(S),
+				children: [/* @__PURE__ */ p(a, { status: t.status }), t.label]
 			}) : t.label
 		}))
 	}], [
-		L,
-		D,
-		O,
-		F
-	]), z = s(() => {
-		let e = M.current;
-		e && P(e.scrollWidth > e.clientWidth + 1);
+		V,
+		k,
+		A,
+		z
+	]), U = c(() => {
+		let e = I.current;
+		e && R(e.scrollWidth > e.clientWidth + 1);
 	}, []);
-	return c(() => {
-		let e = M.current;
-		if (!e || (z(), typeof ResizeObserver > "u")) return;
-		let t = new ResizeObserver(z);
+	return l(() => {
+		let e = I.current;
+		if (!e || (U(), typeof ResizeObserver > "u")) return;
+		let t = new ResizeObserver(U);
 		return t.observe(e), () => t.disconnect();
-	}, [z, T]), /* @__PURE__ */ p("div", {
+	}, [U, D]), /* @__PURE__ */ m("div", {
 		"data-slot": "tab-bar",
-		className: e(_),
-		children: [/* @__PURE__ */ f("div", {
-			ref: M,
-			"data-slot": "tab-list",
-			role: "tablist",
-			onKeyDown: (e) => {
-				let n = Array.from(M.current?.querySelectorAll(x) ?? []);
-				if (n.length === 0) return;
-				let r = document.activeElement, i = n.findIndex((e) => e.contains(r)), a = (e) => {
-					let t = n[e];
-					t && (t.focus(), O(t.dataset.hazeTabValue ?? ""));
-				}, o = t(M.current) === "rtl" ? "ArrowLeft" : "ArrowRight", s = o === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
-				switch (e.key) {
-					case o:
-						e.preventDefault(), a(i < 0 ? 0 : (i + 1) % n.length);
-						return;
-					case s:
-						e.preventDefault(), a(i < 0 ? n.length - 1 : (i - 1 + n.length) % n.length);
-						return;
-					case "Home":
-						e.preventDefault(), a(0);
-						return;
-					case "End":
-						e.preventDefault(), a(n.length - 1);
-						return;
-				}
-			},
-			className: e([
-				h,
-				g,
-				S,
-				k?.list
-			]),
-			children: T
-		}), N && L.length > 0 && /* @__PURE__ */ f("div", {
-			"data-slot": "tab-overflow",
-			className: e(v),
-			children: /* @__PURE__ */ f(i, {
-				open: I,
-				trigger: /* @__PURE__ */ f("button", {
+		className: e(v),
+		children: [
+			/* @__PURE__ */ p("div", {
+				ref: I,
+				"data-slot": "tab-list",
+				"data-variant": j,
+				role: "tablist",
+				onKeyDown: (e) => {
+					let n = Array.from(I.current?.querySelectorAll(C) ?? []);
+					if (n.length === 0) return;
+					let r = document.activeElement, i = n.findIndex((e) => e.contains(r)), a = (e) => {
+						let t = n[e];
+						t && (t.focus(), A(t.dataset.hazeTabValue ?? ""));
+					}, o = t(I.current) === "rtl" ? "ArrowLeft" : "ArrowRight", s = o === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+					switch (e.key) {
+						case o:
+							e.preventDefault(), a(i < 0 ? 0 : (i + 1) % n.length);
+							return;
+						case s:
+							e.preventDefault(), a(i < 0 ? n.length - 1 : (i - 1 + n.length) % n.length);
+							return;
+						case "Home":
+							e.preventDefault(), a(0);
+							return;
+						case "End":
+							e.preventDefault(), a(n.length - 1);
+							return;
+					}
+				},
+				className: e([
+					g,
+					j !== "pill" && _,
+					i[j],
+					w,
+					N?.list
+				]),
+				children: D
+			}),
+			L && V.length > 0 && /* @__PURE__ */ p("div", {
+				"data-slot": "tab-overflow",
+				className: e([y, j === "line" && b]),
+				children: /* @__PURE__ */ p(o, {
+					open: B,
+					trigger: /* @__PURE__ */ p("button", {
+						type: "button",
+						"aria-label": E ?? P.moreTabs,
+						className: e(x),
+						children: /* @__PURE__ */ p("span", {
+							"aria-hidden": "true",
+							children: "⋯"
+						})
+					}),
+					items: H
+				})
+			}),
+			M && /* @__PURE__ */ p("div", {
+				"data-slot": "tab-add",
+				className: e([y, j === "line" && b]),
+				children: /* @__PURE__ */ p("button", {
 					type: "button",
-					"aria-label": w ?? A.moreTabs,
-					className: e(y),
-					children: /* @__PURE__ */ f("span", {
+					"aria-label": M.addLabel ?? "Add tab",
+					onClick: () => M.onAdd?.(),
+					className: e(x),
+					children: /* @__PURE__ */ p("span", {
 						"aria-hidden": "true",
-						children: "⋯"
+						children: "+"
 					})
-				}),
-				items: R
+				})
 			})
-		})]
+		]
 	});
 }
 //#endregion
-export { S as default };
+export { w as default };

package/dist/components/Tabs/TabPanel.js

@@ -3,23 +3,28 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { useTabsContext as t } from "./TabsContext.js";
 /* empty css                   */
-import { jsx as n } from "react/jsx-runtime";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/lib/components/Tabs/TabPanel.tsx
-var r = "haze-TabPanel__base", i = "haze-TabPanel__hidden";
-function a({ value: a, className: o, children: s }) {
-	let { value: c, classNames: l } = t(), u = c === a;
-	return /* @__PURE__ */ n("div", {
+var i = "haze-TabPanel__base", a = "haze-TabPanel__hidden";
+function o(o) {
+	let s = n(8), { value: c, className: l, children: u } = o, { value: d, destroyInactiveTabPane: f, lazy: p, activated: m, classNames: h } = t(), g = d === c;
+	if (!g && p && !m.has(c) || !g && f) return null;
+	let _ = `tabpanel-${c}`, v = !g && a, y = h?.panel, b;
+	s[0] !== l || s[1] !== v || s[2] !== y ? (b = [
+		i,
+		v,
+		l,
+		y
+	], s[0] = l, s[1] = v, s[2] = y, s[3] = b) : b = s[3];
+	let x;
+	return s[4] !== u || s[5] !== _ || s[6] !== b ? (x = /* @__PURE__ */ r("div", {
 		"data-slot": "tab-panel",
 		role: "tabpanel",
-		id: `tabpanel-${a}`,
-		className: e([
-			r,
-			!u && i,
-			o,
-			l?.panel
-		]),
-		children: s
-	});
+		id: _,
+		className: e(b),
+		children: u
+	}), s[4] = u, s[5] = _, s[6] = b, s[7] = x) : x = s[7], x;
 }
 //#endregion
-export { a as default };
+export { o as default };