@ryuzaki13/react-foundation-ui 1.5.8 → 1.5.10

package/dist/tabs/index.js

@@ -1,55 +1,57 @@
-import { d as e, h as t, l as n } from "../chunks/misc-Cp_r022Z.js";
-import { Children as r, isValidElement as i, useId as a, useMemo as o, useRef as s, useState as c } from "react";
-import { cn as l, getRovingFocusTargetIndex as u } from "@ryuzaki13/react-foundation-lib/utils";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { t as e } from "../chunks/ui.module-DHVTOqZ0.js";
+import { n as t } from "../chunks/uiClasses-UkaejTdf.js";
+import { d as n, h as r, l as i } from "../chunks/misc-Cp_r022Z.js";
+import { Children as a, isValidElement as o, useId as s, useMemo as c, useRef as l, useState as u } from "react";
+import { cn as d, getRovingFocusTargetIndex as f } from "@ryuzaki13/react-foundation-lib/utils";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/tabs/lib/tabs.ts
-function m(e) {
+function g(e) {
 	return e.find((e) => !e.disabled)?.id ?? null;
 }
-function h(e, t) {
-	return t ? e.find((e) => e.id === t && !e.disabled)?.id ?? m(e) : m(e);
+function _(e, t) {
+	return t ? e.find((e) => e.id === t && !e.disabled)?.id ?? g(e) : g(e);
 }
-function g(e) {
+function v(e) {
 	return e.filter((e) => !e.disabled);
 }
-function _({ mountStrategy: e, isSelected: t, isVisited: n }) {
+function y({ mountStrategy: e, isSelected: t, isVisited: n }) {
 	return e === "keep-mounted" || t || e === "lazy" && n;
 }
 //#endregion
 //#region src/tabs/model/useTabsState.ts
-function v({ items: e, value: t, defaultValue: n, onValueChange: r, orientation: i = "horizontal", activationMode: l = "automatic", loop: d = !0 }) {
-	let f = t !== void 0, p = o(() => g(e), [e]), m = p[0]?.id ?? null, [_, v] = c(() => h(e, n)), [y, b] = c(() => h(e, t ?? n)), x = h(e, t ?? n), [S, C] = c(() => x ? /* @__PURE__ */ new Set([x]) : /* @__PURE__ */ new Set()), w = a(), T = s({}), E = h(e, f ? t : _), D = h(e, y) ?? E ?? m, O = o(() => {
+function b({ items: e, value: t, defaultValue: n, onValueChange: r, orientation: i = "horizontal", activationMode: a = "automatic", loop: o = !0 }) {
+	let d = t !== void 0, p = c(() => v(e), [e]), m = p[0]?.id ?? null, [h, g] = u(() => _(e, n)), [y, b] = u(() => _(e, t ?? n)), x = _(e, t ?? n), [S, C] = u(() => x ? /* @__PURE__ */ new Set([x]) : /* @__PURE__ */ new Set()), w = s(), T = l({}), E = _(e, d ? t : h), D = _(e, y) ?? E ?? m, O = c(() => {
 		if (!E || S.has(E)) return S;
 		let e = new Set(S);
 		return e.add(E), e;
 	}, [E, S]), k = (t) => {
-		let n = h(e, t);
+		let n = _(e, t);
 		n && (C((e) => {
 			if (e.has(n)) return e;
 			let t = new Set(e);
 			return t.add(n), t;
-		}), f || v(n), r?.(n));
+		}), d || g(n), r?.(n));
 	}, A = (e) => {
 		T.current[e]?.focus();
 	}, j = (e) => {
 		if (p.length < 2) return;
-		let t = Math.max(0, p.findIndex((e) => e.id === (D ?? E ?? m))), n = u({
+		let t = Math.max(0, p.findIndex((e) => e.id === (D ?? E ?? m))), n = f({
 			currentIndex: t,
 			itemCount: p.length,
 			key: e.key,
 			orientation: i,
-			wrap: d
+			wrap: o
 		});
 		if (n === null) return;
 		e.preventDefault();
 		let r = p[n]?.id;
-		r && (b(r), A(r), l === "automatic" && k(r));
+		r && (b(r), A(r), a === "automatic" && k(r));
 	}, M = (e) => {
 		let t = e.relatedTarget;
 		t instanceof Node && e.currentTarget.contains(t) || b(E ?? m);
 	}, N = (e) => `${w}-tab-${e}`, P = (e) => `${w}-panel-${e}`;
 	return {
-		activationMode: l,
+		activationMode: a,
 		orientation: i,
 		selectedTabId: E,
 		tabbableTabId: D,
@@ -78,10 +80,9 @@ function v({ items: e, value: t, defaultValue: n, onValueChange: r, orientation:
 		isVisited: (e) => O.has(e)
 	};
 }
-var y = {
+var x = {
 	tabsContainer: "pcMjuj",
-	bordered: "ITP5v-",
-	cleanPanel: "kzs94N",
+	clean: "NLOw2z",
 	tabs: "ZSAoAa",
 	panels: "psYhsZ",
 	horizontal: "mNDq9-",
@@ -98,27 +99,27 @@ var y = {
 };
 //#endregion
 //#region src/tabs/ui/TabsLoadingState.tsx
-function b({ containerClassName: e, tabListClassName: n, panelsClassName: r, panelClassName: i, panelBodyClassName: a, loadingText: o }) {
-	return /* @__PURE__ */ p("div", {
+function S({ containerClassName: e, tabListClassName: t, panelsClassName: n, panelClassName: i, panelBodyClassName: a, loadingText: o }) {
+	return /* @__PURE__ */ h("div", {
 		className: e,
-		children: [/* @__PURE__ */ f("div", {
-			className: n,
+		children: [/* @__PURE__ */ m("div", {
+			className: t,
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ f("button", {
+			children: /* @__PURE__ */ m("button", {
 				type: "button",
 				disabled: !0,
 				"data-disabled": "",
-				className: l(y.tab, "skeletonLine"),
+				className: d(x.tab, "skeletonLine"),
 				children: "Загрузка..."
 			})
-		}), /* @__PURE__ */ f("div", {
-			className: r,
+		}), /* @__PURE__ */ m("div", {
+			className: n,
 			"aria-busy": "true",
-			children: /* @__PURE__ */ f("div", {
+			children: /* @__PURE__ */ m("div", {
 				className: i,
-				children: /* @__PURE__ */ f("div", {
+				children: /* @__PURE__ */ m("div", {
 					className: a,
-					children: /* @__PURE__ */ f(t, {
+					children: /* @__PURE__ */ m(r, {
 						text: o,
 						className: "radiusSm"
 					})
@@ -129,16 +130,16 @@ function b({ containerClassName: e, tabListClassName: n, panelsClassName: r, pan
 }
 //#endregion
 //#region src/tabs/ui/TabsNoDataState.tsx
-function x({ containerClassName: t, panelsClassName: n, panelClassName: r, panelBodyClassName: i }) {
-	return /* @__PURE__ */ f("div", {
-		className: t,
-		children: /* @__PURE__ */ f("div", {
-			className: n,
-			children: /* @__PURE__ */ f("div", {
+function C({ containerClassName: e, panelsClassName: t, panelClassName: r, panelBodyClassName: i }) {
+	return /* @__PURE__ */ m("div", {
+		className: e,
+		children: /* @__PURE__ */ m("div", {
+			className: t,
+			children: /* @__PURE__ */ m("div", {
 				className: r,
-				children: /* @__PURE__ */ f("div", {
+				children: /* @__PURE__ */ m("div", {
 					className: i,
-					children: /* @__PURE__ */ f(e, { className: "radiusSm" })
+					children: /* @__PURE__ */ m(n, { className: "radiusSm" })
 				})
 			})
 		})
@@ -146,8 +147,8 @@ function x({ containerClassName: t, panelsClassName: n, panelClassName: r, panel
 }
 //#endregion
 //#region src/tabs/ui/TabsPanel.tsx
-function S({ tabId: e, isSelected: t, className: n, getTabElementId: r, getPanelElementId: i, children: a }) {
-	return /* @__PURE__ */ f("div", {
+function w({ tabId: e, isSelected: t, className: n, getTabElementId: r, getPanelElementId: i, children: a }) {
+	return /* @__PURE__ */ m("div", {
 		role: "tabpanel",
 		id: i(e),
 		"aria-labelledby": r(e),
@@ -158,93 +159,83 @@ function S({ tabId: e, isSelected: t, className: n, getTabElementId: r, getPanel
 }
 //#endregion
 //#region src/tabs/ui/TabsTabList.tsx
-function C({ items: e, state: t, className: r, ariaLabel: i, ariaLabelledBy: a }) {
-	return /* @__PURE__ */ f("div", {
-		className: r,
+function T({ items: e, state: t, className: n, ariaLabel: r, ariaLabelledBy: a }) {
+	return /* @__PURE__ */ m("div", {
+		className: n,
 		role: "tablist",
 		"aria-orientation": t.orientation,
-		"aria-label": i,
+		"aria-label": r,
 		"aria-labelledby": a,
 		onKeyDown: t.onTabListKeyDown,
 		onBlur: t.onTabListBlur,
-		children: ((e) => t.orientation === "horizontal" ? /* @__PURE__ */ f(n, { children: e }) : /* @__PURE__ */ f(d, { children: e }))(e.map((e) => /* @__PURE__ */ f("button", {
+		children: ((e) => t.orientation === "horizontal" ? /* @__PURE__ */ m(i, { children: e }) : /* @__PURE__ */ m(p, { children: e }))(e.map((e) => /* @__PURE__ */ m("button", {
 			...t.getTabButtonProps(e),
 			"data-ui": "tabs-tab",
 			"data-action": "select-tab",
-			className: l(y.tab, "textWrap", e.id === t.selectedTabId && y.selected),
+			className: d(x.tab, "textWrap", e.id === t.selectedTabId && x.selected),
 			children: e.title
 		}, e.id)))
 	});
 }
 //#endregion
 //#region src/tabs/ui/TabsBox.tsx
-function w({ items: e, value: t, defaultValue: n, onValueChange: r, className: i, isLoading: a, loadingText: o, cleanPanel: s, bordered: c = !1, orientation: u = "horizontal", activationMode: d = "automatic", mountStrategy: m = "unmount", loop: h = !0, "aria-label": g, "aria-labelledby": w }) {
-	let T = v({
-		items: e,
-		value: t,
-		defaultValue: n,
-		onValueChange: r,
-		orientation: u,
-		activationMode: d,
-		loop: h
-	}), E = l(y.tabsContainer, y[u], c && y.bordered, s && y.cleanPanel, i), D = y.tabs, O = l(y.panels, y.panelScrollable, "scrollable overscroll"), k = y.panel, A = y.panelBody;
-	return a ? /* @__PURE__ */ f(b, {
-		containerClassName: E,
-		tabListClassName: D,
-		panelsClassName: O,
-		panelClassName: k,
-		panelBodyClassName: A,
-		loadingText: o
-	}) : e.length ? /* @__PURE__ */ p("div", {
-		className: E,
-		children: [/* @__PURE__ */ f(C, {
-			items: e,
-			state: T,
-			className: D,
-			ariaLabel: g,
-			ariaLabelledBy: w
-		}), /* @__PURE__ */ f("div", {
-			className: O,
-			children: e.map((e) => {
-				let t = e.id === T.selectedTabId;
-				return _({
-					mountStrategy: m,
+function E({ items: n, value: r, defaultValue: i, onValueChange: a, className: o, isLoading: s, loadingText: c, orientation: l = "horizontal", activationMode: u = "automatic", mountStrategy: f = "unmount", loop: p = !0, tone: g = "primary", clean: _ = !1, "aria-label": v, "aria-labelledby": E }) {
+	let D = b({
+		items: n,
+		value: r,
+		defaultValue: i,
+		onValueChange: a,
+		orientation: l,
+		activationMode: u,
+		loop: p
+	}), O = d(x.tabsContainer, _ ? x.clean : e.uiFilledPanel, x[l], t(g), o), k = x.tabs, A = d(x.panels, x.panelScrollable, "scrollable overscroll"), j = x.panel, M = x.panelBody;
+	return s ? /* @__PURE__ */ m(S, {
+		containerClassName: O,
+		tabListClassName: k,
+		panelsClassName: A,
+		panelClassName: j,
+		panelBodyClassName: M,
+		loadingText: c
+	}) : n.length ? /* @__PURE__ */ h("div", {
+		className: O,
+		children: [/* @__PURE__ */ m(T, {
+			items: n,
+			state: D,
+			className: k,
+			ariaLabel: v,
+			ariaLabelledBy: E
+		}), /* @__PURE__ */ m("div", {
+			className: A,
+			children: n.map((e) => {
+				let t = e.id === D.selectedTabId;
+				return y({
+					mountStrategy: f,
 					isSelected: t,
-					isVisited: T.isVisited(e.id)
-				}) ? /* @__PURE__ */ f(S, {
+					isVisited: D.isVisited(e.id)
+				}) ? /* @__PURE__ */ m(w, {
 					tabId: e.id,
 					isSelected: t,
-					className: k,
-					getTabElementId: T.getTabElementId,
-					getPanelElementId: T.getPanelElementId,
-					children: /* @__PURE__ */ f("div", {
-						className: A,
+					className: j,
+					getTabElementId: D.getTabElementId,
+					getPanelElementId: D.getPanelElementId,
+					children: /* @__PURE__ */ m("div", {
+						className: M,
 						children: e.content
 					})
 				}, e.id) : null;
 			})
 		})]
-	}) : /* @__PURE__ */ f(x, {
-		containerClassName: E,
-		panelsClassName: O,
-		panelClassName: k,
-		panelBodyClassName: A
-	});
-}
-//#endregion
-//#region src/tabs/ui/Tabs.tsx
-function T({ onChange: e, onValueChange: t, ...n }) {
-	return /* @__PURE__ */ f(w, {
-		...n,
-		onValueChange: (n) => {
-			t?.(n), e?.(n);
-		}
+	}) : /* @__PURE__ */ m(C, {
+		containerClassName: O,
+		panelsClassName: A,
+		panelClassName: j,
+		panelBodyClassName: M
 	});
 }
 //#endregion
 //#region src/tabs/ui/TabsLayout.tsx
-var E = "TabsLayout.Tab", D = "TabsLayout.Toolbar", O = "TabsLayout.Content", k = "TabsLayout.Footer";
-function A(e) {
+var D = "TabsLayout.Tab", O = "TabsLayout.Toolbar", k = "TabsLayout.Content", A = "TabsLayout.Footer";
+function j(e) {
 	let { type: t } = e;
 	if (typeof t == "function") {
 		let e = t;
@@ -256,112 +247,112 @@ function A(e) {
 	}
 	return null;
 }
-function j(e, t) {
-	return i(e) && A(e) === t;
-}
-function M({ children: e }) {
-	return /* @__PURE__ */ f(d, { children: e });
+function M(e, t) {
+	return o(e) && j(e) === t;
 }
-M.displayName = E;
 function N({ children: e }) {
-	return /* @__PURE__ */ f(d, { children: e });
+	return /* @__PURE__ */ m(p, { children: e });
 }
 N.displayName = D;
 function P({ children: e }) {
-	return /* @__PURE__ */ f(d, { children: e });
+	return /* @__PURE__ */ m(p, { children: e });
 }
 P.displayName = O;
 function F({ children: e }) {
-	return /* @__PURE__ */ f(d, { children: e });
+	return /* @__PURE__ */ m(p, { children: e });
 }
 F.displayName = k;
-function I(e, t) {
-	let n = null, a = null, o = null;
-	for (let s of r.toArray(e)) {
-		if (!i(s)) throw Error(`TabsLayout.Tab "${t}" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`);
-		if (j(s, D)) {
+function I({ children: e }) {
+	return /* @__PURE__ */ m(p, { children: e });
+}
+I.displayName = A;
+function L(e, t) {
+	let n = null, r = null, i = null;
+	for (let s of a.toArray(e)) {
+		if (!o(s)) throw Error(`TabsLayout.Tab "${t}" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`);
+		if (M(s, O)) {
 			if (n) throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Toolbar.`);
 			n = s.props;
 			continue;
 		}
-		if (j(s, O)) {
-			if (a) throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Content.`);
-			a = s.props;
+		if (M(s, k)) {
+			if (r) throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Content.`);
+			r = s.props;
 			continue;
 		}
-		if (j(s, k)) {
-			if (o) throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Footer.`);
-			o = s.props;
+		if (M(s, A)) {
+			if (i) throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Footer.`);
+			i = s.props;
 			continue;
 		}
 		throw Error(`TabsLayout.Tab "${t}" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`);
 	}
-	if (!a) throw Error(`TabsLayout.Tab "${t}" должен содержать блок TabsLayout.Content.`);
+	if (!r) throw Error(`TabsLayout.Tab "${t}" должен содержать блок TabsLayout.Content.`);
 	return {
 		toolbar: n,
-		content: a,
-		footer: o
+		content: r,
+		footer: i
 	};
 }
-function L(e) {
-	return r.toArray(e).map((e) => {
-		if (!j(e, E)) throw Error("TabsLayout принимает только дочерние элементы TabsLayout.Tab.");
+function R(e) {
+	return a.toArray(e).map((e) => {
+		if (!M(e, D)) throw Error("TabsLayout принимает только дочерние элементы TabsLayout.Tab.");
 		return {
 			id: e.props.id,
 			title: e.props.title,
 			disabled: e.props.disabled,
-			...I(e.props.children, e.props.id)
+			...L(e.props.children, e.props.id)
 		};
 	});
 }
-var R = ({ children: e, value: t, defaultValue: n, onValueChange: r, className: i, bordered: a, cleanPanel: s, orientation: c = "horizontal", activationMode: u = "manual", mountStrategy: d = "lazy", loop: m = !0, "aria-label": h, "aria-labelledby": g }) => {
-	let b = o(() => L(e), [e]), x = v({
-		items: b,
-		value: t,
-		defaultValue: n,
-		onValueChange: r,
-		orientation: c,
-		activationMode: u,
-		loop: m
-	}), w = l(y.tabsContainer, y[c], a && y.bordered, s && y.cleanPanel, i), T = l(y.panels, y.layoutPanels);
-	return /* @__PURE__ */ p("div", {
-		className: w,
-		children: [/* @__PURE__ */ f(C, {
-			items: b,
-			state: x,
-			className: y.tabs,
-			ariaLabel: h,
-			ariaLabelledBy: g
-		}), /* @__PURE__ */ f("div", {
-			className: T,
-			children: b.map((e) => {
-				let t = e.id === x.selectedTabId;
-				if (!_({
-					mountStrategy: d,
+var z = ({ children: n, value: r, defaultValue: i, onValueChange: a, className: o, orientation: s = "horizontal", activationMode: l = "manual", mountStrategy: u = "lazy", loop: f = !0, tone: p = "primary", clean: g = !1, "aria-label": _, "aria-labelledby": v }) => {
+	let S = c(() => R(n), [n]), C = b({
+		items: S,
+		value: r,
+		defaultValue: i,
+		onValueChange: a,
+		orientation: s,
+		activationMode: l,
+		loop: f
+	}), E = d(x.tabsContainer, g ? x.clean : e.uiFilledPanel, x[s], t(p), o), D = d(x.panels, x.layoutPanels);
+	return /* @__PURE__ */ h("div", {
+		className: E,
+		children: [/* @__PURE__ */ m(T, {
+			items: S,
+			state: C,
+			className: x.tabs,
+			ariaLabel: _,
+			ariaLabelledBy: v
+		}), /* @__PURE__ */ m("div", {
+			className: D,
+			children: S.map((e) => {
+				let t = e.id === C.selectedTabId;
+				if (!y({
+					mountStrategy: u,
 					isSelected: t,
-					isVisited: x.isVisited(e.id)
+					isVisited: C.isVisited(e.id)
 				})) return null;
 				let n = `${e.toolbar ? "auto " : ""}minmax(0, 1fr)${e.footer ? " auto" : ""}`;
-				return /* @__PURE__ */ f(S, {
+				return /* @__PURE__ */ m(w, {
 					tabId: e.id,
 					isSelected: t,
-					className: y.panel,
-					getTabElementId: x.getTabElementId,
-					getPanelElementId: x.getPanelElementId,
-					children: /* @__PURE__ */ p("div", {
-						className: y.layoutPanel,
+					className: x.panel,
+					getTabElementId: C.getTabElementId,
+					getPanelElementId: C.getPanelElementId,
+					children: /* @__PURE__ */ h("div", {
+						className: x.layoutPanel,
 						style: { gridTemplateRows: n },
 						children: [
-							e.toolbar ? /* @__PURE__ */ f("div", {
-								className: l(y.layoutSection, e.toolbar.className),
+							e.toolbar ? /* @__PURE__ */ m("div", {
+								className: d(x.layoutSection, e.toolbar.className),
 								children: e.toolbar.children
 							}) : null,
-							/* @__PURE__ */ f("div", {
-								className: l(y.layoutSection, y.layoutContent, e.content.className),
+							/* @__PURE__ */ m("div", {
+								className: d(x.layoutSection, x.layoutContent, e.content.className),
 								children: e.content.children
 							}),
-							e.footer ? /* @__PURE__ */ f("div", {
-								className: l(y.layoutSection, e.footer.className),
+							e.footer ? /* @__PURE__ */ m("div", {
+								className: d(x.layoutSection, e.footer.className),
 								children: e.footer.children
 							}) : null
 						]
@@ -371,14 +362,14 @@ var R = ({ children: e, value: t, defaultValue: n, onValueChange: r, className:
 		})]
 	});
 };
-R.displayName = "TabsLayout";
-var z = Object.assign(R, {
-	Tab: M,
-	Toolbar: N,
-	Content: P,
-	Footer: F
+z.displayName = "TabsLayout";
+var B = Object.assign(z, {
+	Tab: N,
+	Toolbar: P,
+	Content: F,
+	Footer: I
 });
 //#endregion
-export { T as Tabs, w as TabsBox, z as TabsLayout };
+export { E as TabsBox, B as TabsLayout };
 
 //# sourceMappingURL=index.js.map