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

package/dist/Tabs/TabScrollButton.cjs

@@ -0,0 +1,93 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-DU81aGy9.cjs");
+const require_theme = require("../theme-BxXuXRgQ.cjs");
+const require_Icon = require("../Icon-Cvuhp9ek.cjs");
+const require_dividerLine = require("../dividerLine-BNljcGlv.cjs");
+let react = require("react");
+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/TabScrollButton/TabScrollButton.tsx
+const TabScrollButtonRoot = require_src.styled("button", {
+	name: "Tabs",
+	slot: "scrollButton",
+	label: "TabsScrollButton",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"isVertical",
+		"textColor",
+		"isHidden",
+		"shouldShowOnMobile",
+		"divider"
+	])
+})(({ theme, isVertical, textColor, isHidden, shouldShowOnMobile, divider }) => ({
+	...divider,
+	appearance: "none",
+	display: "grid",
+	placeItems: "center",
+	flexShrink: 0,
+	alignSelf: "stretch",
+	...isVertical ? { minHeight: theme.space[5] } : { minWidth: theme.icon.lg },
+	padding: 0,
+	border: "none",
+	backgroundColor: "transparent",
+	color: (0, require_src.src_exports.get)(theme, `text.${textColor}`),
+	cursor: "pointer",
+	visibility: isHidden ? "hidden" : "visible",
+	"&:disabled": {
+		color: (0, require_src.src_exports.get)(theme, "text.disabled"),
+		cursor: "default"
+	},
+	...!isVertical && { "[dir=\"rtl\"] & svg": { transform: "scaleX(-1)" } },
+	...!shouldShowOnMobile && { [theme.breakpoints.down("sm")]: { display: "none" } }
+}));
+const CHEVRONS = {
+	horizontal: {
+		start: "chevron_left",
+		end: "chevron_right"
+	},
+	vertical: {
+		start: "expand_less",
+		end: "expand_more"
+	}
+};
+/**
+* @description The button that scrolls a row of tabs - a `Tabs` shows one at each end while its
+* tabs overflow (`overflowBehavior="scroll"`). Out of the tab order and hidden from assistive
+* technology: the arrow keys already reach every tab. A `Tabs` takes another in its place with
+* `slots={{ scrollButton }}`, given these same props.
+*/
+function TabScrollButton({ direction, orientation, disabled, isHidden = false, color: colorProp, textColor: textColorProp, onClick, children, className, "data-testid": dataTestid }) {
+	const theme = require_theme.useTheme();
+	const dp = require_theme.useDefaultProps("TabScrollButton");
+	const tabs = (0, react.useContext)(require_dividerLine.TabsContext);
+	const color = colorProp ?? dp.color ?? tabs?.selectedColor;
+	const textColor = textColorProp ?? tabs?.rowProps.textColor ?? dp.textColor ?? tabs?.textColor ?? "primary";
+	const resolvedOrientation = orientation ?? (tabs?.isVertical ? "vertical" : "horizontal");
+	const divider = tabs ? require_dividerLine.getEnclosedPieceStyle(theme, {
+		variant: tabs.variant,
+		color,
+		orientation: resolvedOrientation,
+		hasDivider: tabs.hasDivider
+	}) : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabScrollButtonRoot, {
+		type: "button",
+		"aria-hidden": true,
+		tabIndex: -1,
+		disabled,
+		isVertical: resolvedOrientation === "vertical",
+		textColor,
+		isHidden,
+		shouldShowOnMobile: tabs?.shouldShowScrollButtonsOnMobile ?? false,
+		divider,
+		"data-scroll-direction": direction,
+		className,
+		"data-testid": dataTestid,
+		onClick,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			name: CHEVRONS[resolvedOrientation][direction],
+			size: "sm",
+			color: "inherit"
+		})
+	});
+}
+//#endregion
+exports.TabScrollButton = TabScrollButton;

package/dist/Tabs/TabScrollButton.d.cts

@@ -0,0 +1,2 @@
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-gnh-Oe0n.cjs";
+export { TabScrollButton, TabScrollButtonProps, TabScrollDirection };

package/dist/Tabs/TabScrollButton.d.mts

@@ -0,0 +1,2 @@
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-BjPX49XA.mjs";
+export { TabScrollButton, TabScrollButtonProps, TabScrollDirection };

package/dist/Tabs/TabScrollButton.mjs

@@ -0,0 +1,91 @@
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
+import { n as useDefaultProps, r as useTheme } from "../theme-Z9_QludW.mjs";
+import { t as Icon } from "../Icon-DlheCTJb.mjs";
+import { a as TabsContext, r as getEnclosedPieceStyle } from "../dividerLine-FahY-M6_.mjs";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Tabs/TabScrollButton/TabScrollButton.tsx
+const TabScrollButtonRoot = styled("button", {
+	name: "Tabs",
+	slot: "scrollButton",
+	label: "TabsScrollButton",
+	shouldForwardProp: createShouldForwardProp([
+		"isVertical",
+		"textColor",
+		"isHidden",
+		"shouldShowOnMobile",
+		"divider"
+	])
+})(({ theme, isVertical, textColor, isHidden, shouldShowOnMobile, divider }) => ({
+	...divider,
+	appearance: "none",
+	display: "grid",
+	placeItems: "center",
+	flexShrink: 0,
+	alignSelf: "stretch",
+	...isVertical ? { minHeight: theme.space[5] } : { minWidth: theme.icon.lg },
+	padding: 0,
+	border: "none",
+	backgroundColor: "transparent",
+	color: (0, src_exports.get)(theme, `text.${textColor}`),
+	cursor: "pointer",
+	visibility: isHidden ? "hidden" : "visible",
+	"&:disabled": {
+		color: (0, src_exports.get)(theme, "text.disabled"),
+		cursor: "default"
+	},
+	...!isVertical && { "[dir=\"rtl\"] & svg": { transform: "scaleX(-1)" } },
+	...!shouldShowOnMobile && { [theme.breakpoints.down("sm")]: { display: "none" } }
+}));
+const CHEVRONS = {
+	horizontal: {
+		start: "chevron_left",
+		end: "chevron_right"
+	},
+	vertical: {
+		start: "expand_less",
+		end: "expand_more"
+	}
+};
+/**
+* @description The button that scrolls a row of tabs - a `Tabs` shows one at each end while its
+* tabs overflow (`overflowBehavior="scroll"`). Out of the tab order and hidden from assistive
+* technology: the arrow keys already reach every tab. A `Tabs` takes another in its place with
+* `slots={{ scrollButton }}`, given these same props.
+*/
+function TabScrollButton({ direction, orientation, disabled, isHidden = false, color: colorProp, textColor: textColorProp, onClick, children, className, "data-testid": dataTestid }) {
+	const theme = useTheme();
+	const dp = useDefaultProps("TabScrollButton");
+	const tabs = useContext(TabsContext);
+	const color = colorProp ?? dp.color ?? tabs?.selectedColor;
+	const textColor = textColorProp ?? tabs?.rowProps.textColor ?? dp.textColor ?? tabs?.textColor ?? "primary";
+	const resolvedOrientation = orientation ?? (tabs?.isVertical ? "vertical" : "horizontal");
+	const divider = tabs ? getEnclosedPieceStyle(theme, {
+		variant: tabs.variant,
+		color,
+		orientation: resolvedOrientation,
+		hasDivider: tabs.hasDivider
+	}) : {};
+	return /* @__PURE__ */ jsx(TabScrollButtonRoot, {
+		type: "button",
+		"aria-hidden": true,
+		tabIndex: -1,
+		disabled,
+		isVertical: resolvedOrientation === "vertical",
+		textColor,
+		isHidden,
+		shouldShowOnMobile: tabs?.shouldShowScrollButtonsOnMobile ?? false,
+		divider,
+		"data-scroll-direction": direction,
+		className,
+		"data-testid": dataTestid,
+		onClick,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			name: CHEVRONS[resolvedOrientation][direction],
+			size: "sm",
+			color: "inherit"
+		})
+	});
+}
+//#endregion
+export { TabScrollButton };

package/dist/Tabs/Tabs.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Tabs = require("../Tabs-D_wkX-Jb.cjs");
+exports.Tabs = require_Tabs.Tabs;

package/dist/Tabs/Tabs.d.cts

@@ -0,0 +1,3 @@
+import { t as TabValue } from "../TabsContext-C2agsLBN.cjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-B3LIhqHR.cjs";
+export { type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs/Tabs.d.mts

@@ -0,0 +1,3 @@
+import { t as TabValue } from "../TabsContext-DqyxdmGW.mjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-CoEqjFYn.mjs";
+export { type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs/Tabs.mjs

@@ -0,0 +1,2 @@
+import { t as Tabs } from "../Tabs-YfCUbkQV.mjs";
+export { Tabs };