@soroush.tech/design-system 2.0.0-rc.0 → 2.0.0-rc.2

package/dist/Tabs/Tab.mjs

@@ -0,0 +1,305 @@
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
+import { n as useDefaultProps } from "../theme-Z9_QludW.mjs";
+import { t as Icon } from "../Icon-DlheCTJb.mjs";
+import { i as TabIndexContext, n as getDividerShadow, o as useTabsContext } from "../dividerLine-FahY-M6_.mjs";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Tabs/Tab/Tab.tsx
+const shouldForwardProp = createShouldForwardProp([
+	"variant",
+	"color",
+	"textColor",
+	"sizeToken",
+	"isSelected",
+	"isDisabled",
+	"iconPlacement",
+	"isWrapped",
+	"fullWidth",
+	"isVertical",
+	"hasDivider",
+	"selectedBg",
+	"bg",
+	"borderRadius",
+	"lineColor",
+	"rowPaddingTop",
+	"rowPaddingBottom"
+]);
+const getEnclosedEdgeStyle = (theme, main, lineMain, isSelected, isVertical, hasDivider, radius) => {
+	const thin = theme.borderWidths.thin;
+	const top = `inset 0 ${thin} 0 ${main}`;
+	const right = `inset -${thin} 0 0 ${main}`;
+	const foot = `inset 0 -${thin} 0 ${main}`;
+	const left = `inset ${thin} 0 0 ${main}`;
+	const outline = isVertical ? [
+		top,
+		foot,
+		left
+	] : [
+		top,
+		right,
+		left
+	];
+	let edges = "none";
+	if (hasDivider) edges = isSelected ? outline.join(", ") : getDividerShadow(theme, isVertical, lineMain);
+	return {
+		border: "none",
+		padding: thin,
+		boxShadow: edges,
+		borderRadius: 0,
+		...isVertical ? {
+			borderStartStartRadius: radius,
+			borderEndStartRadius: radius
+		} : {
+			borderTopLeftRadius: radius,
+			borderTopRightRadius: radius
+		}
+	};
+};
+const TabRoot = styled("div", {
+	name: "Tab",
+	label: "Tab",
+	shouldForwardProp
+})(({ theme, variant, color, isSelected, isDisabled, fullWidth, isVertical, hasDivider, selectedBg, bg, borderRadius, lineColor }) => {
+	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
+	const isBoxed = variant === "boxed";
+	const outlineColor = isBoxed && isSelected ? `${main}59` : "transparent";
+	const raised = (0, src_exports.get)(theme, "background.paper");
+	const groundKey = isSelected && selectedBg ? selectedBg : bg;
+	const ground = groundKey ? (0, src_exports.get)(theme, `background.${groundKey}`) : "transparent";
+	const isRounded = isBoxed || variant === "enclosed";
+	let radius = 0;
+	if (borderRadius) radius = theme.radii[borderRadius];
+	else if (isRounded) radius = theme.radii.sm;
+	return {
+		position: "relative",
+		display: "flex",
+		alignItems: "stretch",
+		flexGrow: fullWidth ? 1 : 0,
+		flexShrink: fullWidth ? 1 : 0,
+		flexBasis: fullWidth ? 0 : "auto",
+		minWidth: 0,
+		backgroundColor: ground,
+		border: `${theme.borderWidths.thin} solid ${outlineColor}`,
+		borderRadius: radius,
+		...variant === "enclosed" && getEnclosedEdgeStyle(theme, main, (0, src_exports.get)(theme, `palette.${lineColor}.main`), isSelected, isVertical, hasDivider, String(radius)),
+		transition: "background-color 0.12s ease",
+		...isDisabled ? {} : { "&:hover": { backgroundColor: isBoxed ? raised : `${main}14` } },
+		"&:hover [data-tab-close]": { visibility: "visible" }
+	};
+});
+const TabLabel = styled("button", {
+	name: "Tab",
+	slot: "label",
+	label: "TabLabel",
+	shouldForwardProp
+})(({ theme, variant, color, textColor, sizeToken, isSelected, isDisabled, iconPlacement, isWrapped, isVertical, rowPaddingTop, rowPaddingBottom }) => {
+	const { paddingTop, paddingBottom, paddingLeft, paddingRight, fontSize } = theme.sizes[sizeToken];
+	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
+	const idleColor = (0, src_exports.get)(theme, `text.${textColor ?? "primary"}`);
+	let labelColor = isSelected ? variant === "boxed" ? idleColor : main : idleColor;
+	if (isDisabled) labelColor = (0, src_exports.get)(theme, "text.disabled");
+	return {
+		appearance: "none",
+		display: "grid",
+		gridAutoFlow: iconPlacement === "start" || iconPlacement === "end" ? "column" : "row",
+		alignContent: iconPlacement === "bottom" ? "start" : "end",
+		alignItems: "center",
+		justifyContent: "center",
+		justifyItems: "center",
+		gap: theme.space[1],
+		flex: 1,
+		minWidth: 0,
+		margin: 0,
+		paddingTop: theme.space[isVertical ? paddingTop : rowPaddingTop],
+		paddingBottom: theme.space[isVertical ? paddingBottom : rowPaddingBottom],
+		paddingLeft: theme.space[paddingLeft],
+		paddingRight: theme.space[paddingRight],
+		fontFamily: theme.fonts.body,
+		fontSize: theme.fontSizes[fontSize],
+		lineHeight: theme.lineHeights.base,
+		whiteSpace: isWrapped ? "normal" : "nowrap",
+		textAlign: "center",
+		textDecoration: "none",
+		color: labelColor,
+		backgroundColor: "transparent",
+		border: "none",
+		borderRadius: "inherit",
+		cursor: isDisabled ? "default" : "pointer",
+		outline: "none",
+		"&:focus-visible": {
+			outline: `${theme.borderWidths.base} solid ${main}`,
+			outlineOffset: `-${theme.borderWidths.base}`
+		}
+	};
+});
+const SecondaryActionSlot = styled("div", {
+	name: "Tab",
+	slot: "secondaryAction",
+	label: "TabSecondaryAction"
+})({
+	display: "flex",
+	alignItems: "center",
+	flexShrink: 0
+});
+const TabClose = styled("button", {
+	name: "Tab",
+	slot: "close",
+	label: "TabClose",
+	shouldForwardProp
+})(({ theme, color, isSelected }) => {
+	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		appearance: "none",
+		display: "grid",
+		placeItems: "center",
+		alignSelf: "center",
+		flexShrink: 0,
+		width: theme.icon.sm,
+		height: theme.icon.sm,
+		padding: 0,
+		marginInlineEnd: theme.space[.5],
+		border: "none",
+		borderRadius: theme.radii.sm,
+		backgroundColor: "transparent",
+		color: "inherit",
+		cursor: "pointer",
+		visibility: isSelected ? "visible" : "hidden",
+		"&:hover": { backgroundColor: `${main}1F` }
+	};
+});
+const IconSlot = styled("span", {
+	name: "Tab",
+	slot: "icon",
+	label: "TabIcon"
+})({
+	display: "inline-flex",
+	flexShrink: 0
+});
+/**
+* @description One tab of a `Tabs`. In a `tablist` it is a `tab` with `aria-selected` and
+* `aria-controls`, the selected one alone in the page's tab order; in a navigation
+* (`Tabs as="nav"`) a button or link marked `aria-current="page"` when it is the current
+* one. It takes one `icon`, which `iconPosition` places on a side of its label.
+*/
+function Tab({ value: valueProp, label, icon, iconPosition = "top", isWrapped: isWrappedProp, bg: bgProp, borderRadius: borderRadiusProp, color: colorProp, textColor: textColorProp, size: sizeProp, selectedBg: selectedBgProp, disabled = false, href, as, onClick, title, closeLabel, secondaryAction, className, "data-testid": dataTestid }) {
+	const dp = useDefaultProps("Tab");
+	const iconPlacement = icon == null ? void 0 : iconPosition;
+	const isIconFirst = iconPlacement === "top" || iconPlacement === "start";
+	const iconSlot = icon == null ? null : /* @__PURE__ */ jsx(IconSlot, {
+		"aria-hidden": true,
+		children: icon
+	});
+	const isWrapped = isWrappedProp ?? dp.isWrapped ?? false;
+	const bg = bgProp ?? dp.bg;
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const tabs = useTabsContext();
+	const index = useContext(TabIndexContext);
+	const value = valueProp ?? index;
+	const isSelected = tabs.selectedValue === value;
+	const { isNavigation, select, rowProps } = tabs;
+	const color = colorProp ?? rowProps.color ?? dp.color ?? tabs.color;
+	const textColor = textColorProp ?? rowProps.textColor ?? dp.textColor ?? tabs.textColor;
+	const size = sizeProp ?? rowProps.size ?? dp.size ?? tabs.size;
+	const selectedBg = selectedBgProp ?? rowProps.selectedBg ?? dp.selectedBg ?? tabs.selectedBg;
+	const handleClick = (event) => {
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+		select(value);
+	};
+	const handleFocus = () => {
+		if (tabs.shouldSelectOnFocus && !disabled && !isSelected) select(value);
+	};
+	const isClosable = closeLabel !== void 0;
+	const close = () => tabs.onTabClose?.(value);
+	const handleMouseDown = (event) => {
+		if (isClosable && event.button === 1) event.preventDefault();
+	};
+	const handleAuxClick = (event) => {
+		if (isClosable && event.button === 1) close();
+	};
+	const handleKeyDown = (event) => {
+		if (isClosable && event.key === "Delete") {
+			event.preventDefault();
+			close();
+		}
+	};
+	const element = as ?? (href === void 0 ? "button" : "a");
+	const semantics = isNavigation ? { "aria-current": isSelected ? "page" : void 0 } : {
+		role: "tab",
+		"aria-selected": isSelected,
+		"aria-controls": tabs.getPanelId(value),
+		tabIndex: value === tabs.focusableValue ? 0 : -1
+	};
+	const styleProps = {
+		variant: tabs.variant,
+		color,
+		textColor,
+		sizeToken: size,
+		isSelected,
+		isDisabled: disabled,
+		iconPlacement,
+		isWrapped,
+		fullWidth: tabs.fullWidth,
+		isVertical: tabs.isVertical,
+		hasDivider: tabs.hasDivider,
+		selectedBg,
+		bg,
+		borderRadius,
+		lineColor: tabs.selectedColor,
+		rowPaddingTop: tabs.rowPaddingTop,
+		rowPaddingBottom: tabs.rowPaddingBottom
+	};
+	return /* @__PURE__ */ jsxs(TabRoot, {
+		...styleProps,
+		role: "presentation",
+		className,
+		"data-tab-value": String(value),
+		"data-tab-selected": isSelected || void 0,
+		children: [
+			/* @__PURE__ */ jsxs(TabLabel, {
+				...semantics,
+				as: element,
+				id: tabs.getTabId(value),
+				type: element === "button" ? "button" : void 0,
+				href,
+				title,
+				"aria-disabled": disabled || void 0,
+				"aria-keyshortcuts": isClosable ? "Delete" : void 0,
+				"data-tab": true,
+				"data-testid": dataTestid,
+				...styleProps,
+				onClick: handleClick,
+				onFocus: handleFocus,
+				onMouseDown: handleMouseDown,
+				onAuxClick: handleAuxClick,
+				onKeyDown: handleKeyDown,
+				children: [
+					isIconFirst && iconSlot,
+					label,
+					!isIconFirst && iconSlot
+				]
+			}),
+			secondaryAction != null && /* @__PURE__ */ jsx(SecondaryActionSlot, { children: secondaryAction }),
+			isClosable && /* @__PURE__ */ jsx(TabClose, {
+				type: "button",
+				"aria-hidden": true,
+				title: closeLabel,
+				tabIndex: -1,
+				"data-tab-close": true,
+				color,
+				isSelected,
+				onClick: close,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "close",
+					size: "0.75rem",
+					color: "inherit"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { Tab };

package/dist/Tabs/TabContext.cjs

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Tabs/TabContext/TabContext.tsx
+/**
+* @description Holds which tab is selected for a `Tabs` and the `TabPanel`s beside it, so
+* the two can sit apart in the tree - the tabs in a header, the panels in the body - and
+* still be linked (`aria-controls`, `aria-labelledby`).
+*/
+function TabContext({ children, value: valueProp, defaultValue = null, onChange }) {
+	const [valueState, setValueState] = (0, react.useState)(defaultValue);
+	const value = valueProp === void 0 ? valueState : valueProp;
+	const baseId = (0, react.useId)();
+	const select = (0, react.useCallback)((next) => {
+		setValueState(next);
+		onChange?.(next);
+	}, [onChange]);
+	const context = (0, react.useMemo)(() => ({
+		value,
+		select,
+		baseId
+	}), [
+		value,
+		select,
+		baseId
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TabsValueContext.TabsValueContext.Provider, {
+		value: context,
+		children
+	});
+}
+//#endregion
+exports.TabContext = TabContext;

package/dist/Tabs/TabContext.d.cts

@@ -0,0 +1,20 @@
+import { t as TabValue } from "../TabsContext-C2agsLBN.cjs";
+import { ReactNode } from "react";
+//#region src/Tabs/TabContext/TabContext.d.ts
+interface TabContextProps {
+  children?: ReactNode;
+  /** The selected tab's value - `null` for none. Controlled with `onChange`. */
+  value?: TabValue | null;
+  /** The selected tab's value at first, when uncontrolled. */
+  defaultValue?: TabValue | null;
+  /** Fired with a tab's value when it is chosen. */
+  onChange?: (value: TabValue) => void;
+}
+/**
+ * @description Holds which tab is selected for a `Tabs` and the `TabPanel`s beside it, so
+ * the two can sit apart in the tree - the tabs in a header, the panels in the body - and
+ * still be linked (`aria-controls`, `aria-labelledby`).
+ */
+declare function TabContext({ children, value: valueProp, defaultValue, onChange }: Readonly<TabContextProps>): import("react").JSX.Element;
+//#endregion
+export { TabContext, TabContextProps };

package/dist/Tabs/TabContext.d.mts

@@ -0,0 +1,20 @@
+import { t as TabValue } from "../TabsContext-DqyxdmGW.mjs";
+import { ReactNode } from "react";
+//#region src/Tabs/TabContext/TabContext.d.ts
+interface TabContextProps {
+  children?: ReactNode;
+  /** The selected tab's value - `null` for none. Controlled with `onChange`. */
+  value?: TabValue | null;
+  /** The selected tab's value at first, when uncontrolled. */
+  defaultValue?: TabValue | null;
+  /** Fired with a tab's value when it is chosen. */
+  onChange?: (value: TabValue) => void;
+}
+/**
+ * @description Holds which tab is selected for a `Tabs` and the `TabPanel`s beside it, so
+ * the two can sit apart in the tree - the tabs in a header, the panels in the body - and
+ * still be linked (`aria-controls`, `aria-labelledby`).
+ */
+declare function TabContext({ children, value: valueProp, defaultValue, onChange }: Readonly<TabContextProps>): import("react").JSX.Element;
+//#endregion
+export { TabContext, TabContextProps };

package/dist/Tabs/TabContext.mjs

@@ -0,0 +1,33 @@
+import { t as TabsValueContext } from "../TabsValueContext-DvL3inf7.mjs";
+import { useCallback, useId, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Tabs/TabContext/TabContext.tsx
+/**
+* @description Holds which tab is selected for a `Tabs` and the `TabPanel`s beside it, so
+* the two can sit apart in the tree - the tabs in a header, the panels in the body - and
+* still be linked (`aria-controls`, `aria-labelledby`).
+*/
+function TabContext({ children, value: valueProp, defaultValue = null, onChange }) {
+	const [valueState, setValueState] = useState(defaultValue);
+	const value = valueProp === void 0 ? valueState : valueProp;
+	const baseId = useId();
+	const select = useCallback((next) => {
+		setValueState(next);
+		onChange?.(next);
+	}, [onChange]);
+	const context = useMemo(() => ({
+		value,
+		select,
+		baseId
+	}), [
+		value,
+		select,
+		baseId
+	]);
+	return /* @__PURE__ */ jsx(TabsValueContext.Provider, {
+		value: context,
+		children
+	});
+}
+//#endregion
+export { TabContext };

package/dist/Tabs/TabList.cjs

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
+const require_Tabs = require("../Tabs-D_wkX-Jb.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Tabs/TabList/TabList.tsx
+/**
+* @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
+* and links each tab to its `TabPanel` - the tab `aria-controls` its panel, which is named by
+* the tab. Everything else is a `Tabs`'.
+*/
+function TabList({ onChange, ...rest }) {
+	const context = require_TabsValueContext.useTabsValue();
+	if (!context) throw new Error("A TabList must be inside a TabContext.");
+	const { baseId, value, select } = context;
+	const link = (0, react.useMemo)(() => ({ baseId }), [baseId]);
+	const handleChange = (next) => {
+		select(next);
+		onChange?.(next);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tabs.TabListContext.Provider, {
+		value: link,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tabs.Tabs, {
+			...rest,
+			value,
+			onChange: handleChange
+		})
+	});
+}
+//#endregion
+exports.TabList = TabList;

package/dist/Tabs/TabList.d.cts

@@ -0,0 +1,11 @@
+import { a as TabsProps } from "../index-B3LIhqHR.cjs";
+//#region src/Tabs/TabList/TabList.d.ts
+type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
+/**
+ * @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
+ * and links each tab to its `TabPanel` - the tab `aria-controls` its panel, which is named by
+ * the tab. Everything else is a `Tabs`'.
+ */
+declare function TabList({ onChange, ...rest }: Readonly<TabListProps>): import("react").JSX.Element;
+//#endregion
+export { TabList, TabListProps };

package/dist/Tabs/TabList.d.mts

@@ -0,0 +1,11 @@
+import { a as TabsProps } from "../index-CoEqjFYn.mjs";
+//#region src/Tabs/TabList/TabList.d.ts
+type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
+/**
+ * @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
+ * and links each tab to its `TabPanel` - the tab `aria-controls` its panel, which is named by
+ * the tab. Everything else is a `Tabs`'.
+ */
+declare function TabList({ onChange, ...rest }: Readonly<TabListProps>): import("react").JSX.Element;
+//#endregion
+export { TabList, TabListProps };

package/dist/Tabs/TabList.mjs

@@ -0,0 +1,30 @@
+import { n as useTabsValue } from "../TabsValueContext-DvL3inf7.mjs";
+import { n as TabListContext, t as Tabs } from "../Tabs-YfCUbkQV.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Tabs/TabList/TabList.tsx
+/**
+* @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
+* and links each tab to its `TabPanel` - the tab `aria-controls` its panel, which is named by
+* the tab. Everything else is a `Tabs`'.
+*/
+function TabList({ onChange, ...rest }) {
+	const context = useTabsValue();
+	if (!context) throw new Error("A TabList must be inside a TabContext.");
+	const { baseId, value, select } = context;
+	const link = useMemo(() => ({ baseId }), [baseId]);
+	const handleChange = (next) => {
+		select(next);
+		onChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(TabListContext.Provider, {
+		value: link,
+		children: /* @__PURE__ */ jsx(Tabs, {
+			...rest,
+			value,
+			onChange: handleChange
+		})
+	});
+}
+//#endregion
+export { TabList };

package/dist/Tabs/TabPanel.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-DU81aGy9.cjs");
+const require_theme = require("../theme-BxXuXRgQ.cjs");
+const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
+const require_surfaceSystem = require("../surfaceSystem-BGQBoXv_.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/Tabs/TabPanel/TabPanel.tsx
+const TabPanelRoot = require_src.styled("div", {
+	name: "TabPanel",
+	label: "TabPanel",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]),
+	systemProps: [require_src.src_exports.space, require_surfaceSystem.surfaceSystem]
+})({ outline: "none" });
+/**
+* @description The content a tab shows: a `role="tabpanel"` named by its tab, which in
+* turn `aria-controls` it. Shown only while its tab is selected. It sits in a
+* `TabContext` beside the `Tabs`, which links the two.
+*/
+function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = require_theme.useDefaultProps("TabPanel");
+	const shouldKeepMounted = shouldKeepMountedProp ?? dp.shouldKeepMounted ?? false;
+	const tabs = require_TabsValueContext.useTabsValue();
+	if (!tabs) throw new Error("A TabPanel must be inside a TabContext.");
+	const { baseId } = tabs;
+	const isSelected = tabs.value === value;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabPanelRoot, {
+		...spaceProps,
+		role: "tabpanel",
+		id: require_surfaceSystem.getPanelId(baseId, value),
+		"aria-labelledby": require_surfaceSystem.getTabId(baseId, value),
+		tabIndex: 0,
+		hidden: !isSelected,
+		className,
+		"data-testid": dataTestid,
+		children: isSelected || shouldKeepMounted ? children : null
+	});
+}
+//#endregion
+exports.TabPanel = TabPanel;

package/dist/Tabs/TabPanel.d.cts

@@ -0,0 +1,27 @@
+import { V as Theme } from "../index-DmJ7yWWi.cjs";
+import { t as TabValue } from "../TabsContext-C2agsLBN.cjs";
+import { ReactNode } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+//#region src/Tabs/TabPanel/TabPanel.d.ts
+interface TabPanelProps extends SpaceProps<Theme> {
+  /** The value of the tab this panel belongs to. */
+  value: TabValue;
+  /** The panel's content. */
+  children?: ReactNode;
+  /** Keep the content mounted while the panel is hidden. Default: `false`. */
+  shouldKeepMounted?: boolean;
+  /** The panel's ground - resolves against `theme.background`. Match its tab's `selectedBg`. */
+  bg?: keyof Theme['background'];
+  /** The panel's corner radius - resolves against `theme.radii`. */
+  borderRadius?: keyof Theme['radii'];
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description The content a tab shows: a `role="tabpanel"` named by its tab, which in
+ * turn `aria-controls` it. Shown only while its tab is selected. It sits in a
+ * `TabContext` beside the `Tabs`, which links the two.
+ */
+declare function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TabPanelProps>): import("react").JSX.Element;
+//#endregion
+export { TabPanel, TabPanelProps };

package/dist/Tabs/TabPanel.d.mts

@@ -0,0 +1,27 @@
+import { V as Theme } from "../index-CVNJEUwJ.mjs";
+import { t as TabValue } from "../TabsContext-DqyxdmGW.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { ReactNode } from "react";
+//#region src/Tabs/TabPanel/TabPanel.d.ts
+interface TabPanelProps extends SpaceProps<Theme> {
+  /** The value of the tab this panel belongs to. */
+  value: TabValue;
+  /** The panel's content. */
+  children?: ReactNode;
+  /** Keep the content mounted while the panel is hidden. Default: `false`. */
+  shouldKeepMounted?: boolean;
+  /** The panel's ground - resolves against `theme.background`. Match its tab's `selectedBg`. */
+  bg?: keyof Theme['background'];
+  /** The panel's corner radius - resolves against `theme.radii`. */
+  borderRadius?: keyof Theme['radii'];
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description The content a tab shows: a `role="tabpanel"` named by its tab, which in
+ * turn `aria-controls` it. Shown only while its tab is selected. It sits in a
+ * `TabContext` beside the `Tabs`, which links the two.
+ */
+declare function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TabPanelProps>): import("react").JSX.Element;
+//#endregion
+export { TabPanel, TabPanelProps };

package/dist/Tabs/TabPanel.mjs

@@ -0,0 +1,38 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
+import { n as useDefaultProps } from "../theme-Z9_QludW.mjs";
+import { n as useTabsValue } from "../TabsValueContext-DvL3inf7.mjs";
+import { n as getPanelId, r as getTabId, t as surfaceSystem } from "../surfaceSystem-D8TbmKy3.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Tabs/TabPanel/TabPanel.tsx
+const TabPanelRoot = styled("div", {
+	name: "TabPanel",
+	label: "TabPanel",
+	shouldForwardProp: createShouldForwardProp([...props]),
+	systemProps: [src_exports.space, surfaceSystem]
+})({ outline: "none" });
+/**
+* @description The content a tab shows: a `role="tabpanel"` named by its tab, which in
+* turn `aria-controls` it. Shown only while its tab is selected. It sits in a
+* `TabContext` beside the `Tabs`, which links the two.
+*/
+function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = useDefaultProps("TabPanel");
+	const shouldKeepMounted = shouldKeepMountedProp ?? dp.shouldKeepMounted ?? false;
+	const tabs = useTabsValue();
+	if (!tabs) throw new Error("A TabPanel must be inside a TabContext.");
+	const { baseId } = tabs;
+	const isSelected = tabs.value === value;
+	return /* @__PURE__ */ jsx(TabPanelRoot, {
+		...spaceProps,
+		role: "tabpanel",
+		id: getPanelId(baseId, value),
+		"aria-labelledby": getTabId(baseId, value),
+		tabIndex: 0,
+		hidden: !isSelected,
+		className,
+		"data-testid": dataTestid,
+		children: isSelected || shouldKeepMounted ? children : null
+	});
+}
+//#endregion
+export { TabPanel };