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

package/dist/Tabs/Tab.cjs

@@ -0,0 +1,306 @@
+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-D-EWsBVg.cjs");
+const require_dividerLine = require("../dividerLine-BNljcGlv.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Tabs/Tab/Tab.tsx
+const shouldForwardProp = (0, require("@soroush.tech/styled-system/should-forward-prop").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(", ") : require_dividerLine.getDividerShadow(theme, isVertical, lineMain);
+	return {
+		border: "none",
+		padding: thin,
+		boxShadow: edges,
+		borderRadius: 0,
+		...isVertical ? {
+			borderStartStartRadius: radius,
+			borderEndStartRadius: radius
+		} : {
+			borderTopLeftRadius: radius,
+			borderTopRightRadius: radius
+		}
+	};
+};
+const TabRoot = require_src.styled("div", {
+	name: "Tab",
+	label: "Tab",
+	shouldForwardProp
+})(({ theme, variant, color, isSelected, isDisabled, fullWidth, isVertical, hasDivider, selectedBg, bg, borderRadius, lineColor }) => {
+	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	const isBoxed = variant === "boxed";
+	const outlineColor = isBoxed && isSelected ? `${main}59` : "transparent";
+	const raised = (0, require_src.src_exports.get)(theme, "background.paper");
+	const groundKey = isSelected && selectedBg ? selectedBg : bg;
+	const ground = groundKey ? (0, require_src.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, require_src.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 = require_src.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, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	const idleColor = (0, require_src.src_exports.get)(theme, `text.${textColor ?? "primary"}`);
+	let labelColor = isSelected ? variant === "boxed" ? idleColor : main : idleColor;
+	if (isDisabled) labelColor = (0, require_src.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 = require_src.styled("div", {
+	name: "Tab",
+	slot: "secondaryAction",
+	label: "TabSecondaryAction"
+})({
+	display: "flex",
+	alignItems: "center",
+	flexShrink: 0
+});
+const TabClose = require_src.styled("button", {
+	name: "Tab",
+	slot: "close",
+	label: "TabClose",
+	shouldForwardProp
+})(({ theme, color, isSelected }) => {
+	const main = (0, require_src.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 = require_src.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 = require_theme.useDefaultProps("Tab");
+	const iconPlacement = icon == null ? void 0 : iconPosition;
+	const isIconFirst = iconPlacement === "top" || iconPlacement === "start";
+	const iconSlot = icon == null ? null : /* @__PURE__ */ (0, react_jsx_runtime.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 = require_dividerLine.useTabsContext();
+	const index = (0, react.useContext)(require_dividerLine.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__ */ (0, react_jsx_runtime.jsxs)(TabRoot, {
+		...styleProps,
+		role: "presentation",
+		className,
+		"data-tab-value": String(value),
+		"data-tab-selected": isSelected || void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(SecondaryActionSlot, { children: secondaryAction }),
+			isClosable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabClose, {
+				type: "button",
+				"aria-hidden": true,
+				title: closeLabel,
+				tabIndex: -1,
+				"data-tab-close": true,
+				color,
+				isSelected,
+				onClick: close,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					name: "close",
+					size: "0.75rem",
+					color: "inherit"
+				})
+			})
+		]
+	});
+}
+//#endregion
+exports.Tab = Tab;

package/dist/Tabs/Tab.d.cts

@@ -0,0 +1,62 @@
+import { W as Theme } from "../index-DJ0f69wh.cjs";
+import { t as TabValue } from "../TabsContext-B_XHbjcS.cjs";
+import { ElementType, MouseEvent, ReactNode } from "react";
+//#region src/Tabs/Tab/Tab.d.ts
+/** Where `icon` sits around a tab's label. */
+type TabIconPosition = 'start' | 'end' | 'top' | 'bottom';
+interface TabProps {
+  /** What the tab is chosen as. Default: its position among the tabs. */
+  value?: TabValue;
+  /** The tab's label. */
+  label?: ReactNode;
+  /** The tab's icon, as given - its size is the icon's own (`<Icon size="sm" />`). */
+  icon?: ReactNode;
+  /** Where `icon` sits around the label. Default: `'top'`. */
+  iconPosition?: TabIconPosition;
+  /**
+   * The tab's ground while it isn't selected - resolves against `theme.background`. Selected, it
+   * takes its `Tabs`' `selectedBg`.
+   */
+  bg?: keyof Theme['background'];
+  /**
+   * The tab's corner radius - resolves against `theme.radii`. In the enclosed look it rounds the
+   * corners away from the divider; elsewhere, all four. Default: `'sm'` boxed or enclosed, none
+   * otherwise.
+   */
+  borderRadius?: keyof Theme['radii'];
+  /** The tab's accent - its selected label, outline and indicator - resolves to `theme.palette[color]`. Default: its `Tabs`'. */
+  color?: keyof Theme['palette'];
+  /** The label's color - resolves against `theme.text`. Default: its `Tabs`'. */
+  textColor?: keyof Theme['text'];
+  /** Density token - resolves against `theme.sizes`. Default: its `Tabs`'. */
+  size?: keyof Theme['sizes'];
+  /** The tab's ground while it is selected - resolves against `theme.background`. Default: its `Tabs`' `selectedBg`. */
+  selectedBg?: keyof Theme['background'];
+  /** The label may take two lines rather than one. Default: `false`. */
+  isWrapped?: boolean;
+  /** The tab can't be chosen, and the arrow keys pass it. Default: `false`. */
+  disabled?: boolean;
+  /** A link, for a navigation of pages. */
+  href?: string;
+  /** The element the tab is rendered as. Default: `'button'`, or `'a'` with `href`. */
+  as?: ElementType;
+  /** Fired when the tab is pressed. */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  /** Hover text. */
+  title?: string;
+  /** Makes the tab closable: its close button's tooltip (`Close Button`). The button is the pointer's - a tablist owns tabs alone, so it is hidden from assistive technology - and Delete closes the focused tab. `Tabs`' `onTabClose` hears either. */
+  closeLabel?: string;
+  /** A control of the tab's own after its label - a kebab menu, a badge. */
+  secondaryAction?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @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.
+ */
+declare function Tab({ value: valueProp, label, icon, iconPosition, isWrapped: isWrappedProp, bg: bgProp, borderRadius: borderRadiusProp, color: colorProp, textColor: textColorProp, size: sizeProp, selectedBg: selectedBgProp, disabled, href, as, onClick, title, closeLabel, secondaryAction, className, 'data-testid': dataTestid }: Readonly<TabProps>): import("react").JSX.Element;
+//#endregion
+export { Tab, TabIconPosition, TabProps };

package/dist/Tabs/Tab.d.mts

@@ -0,0 +1,62 @@
+import { W as Theme } from "../index-CJhK7JND.mjs";
+import { t as TabValue } from "../TabsContext-Dn2kqUwr.mjs";
+import { ElementType, MouseEvent, ReactNode } from "react";
+//#region src/Tabs/Tab/Tab.d.ts
+/** Where `icon` sits around a tab's label. */
+type TabIconPosition = 'start' | 'end' | 'top' | 'bottom';
+interface TabProps {
+  /** What the tab is chosen as. Default: its position among the tabs. */
+  value?: TabValue;
+  /** The tab's label. */
+  label?: ReactNode;
+  /** The tab's icon, as given - its size is the icon's own (`<Icon size="sm" />`). */
+  icon?: ReactNode;
+  /** Where `icon` sits around the label. Default: `'top'`. */
+  iconPosition?: TabIconPosition;
+  /**
+   * The tab's ground while it isn't selected - resolves against `theme.background`. Selected, it
+   * takes its `Tabs`' `selectedBg`.
+   */
+  bg?: keyof Theme['background'];
+  /**
+   * The tab's corner radius - resolves against `theme.radii`. In the enclosed look it rounds the
+   * corners away from the divider; elsewhere, all four. Default: `'sm'` boxed or enclosed, none
+   * otherwise.
+   */
+  borderRadius?: keyof Theme['radii'];
+  /** The tab's accent - its selected label, outline and indicator - resolves to `theme.palette[color]`. Default: its `Tabs`'. */
+  color?: keyof Theme['palette'];
+  /** The label's color - resolves against `theme.text`. Default: its `Tabs`'. */
+  textColor?: keyof Theme['text'];
+  /** Density token - resolves against `theme.sizes`. Default: its `Tabs`'. */
+  size?: keyof Theme['sizes'];
+  /** The tab's ground while it is selected - resolves against `theme.background`. Default: its `Tabs`' `selectedBg`. */
+  selectedBg?: keyof Theme['background'];
+  /** The label may take two lines rather than one. Default: `false`. */
+  isWrapped?: boolean;
+  /** The tab can't be chosen, and the arrow keys pass it. Default: `false`. */
+  disabled?: boolean;
+  /** A link, for a navigation of pages. */
+  href?: string;
+  /** The element the tab is rendered as. Default: `'button'`, or `'a'` with `href`. */
+  as?: ElementType;
+  /** Fired when the tab is pressed. */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  /** Hover text. */
+  title?: string;
+  /** Makes the tab closable: its close button's tooltip (`Close Button`). The button is the pointer's - a tablist owns tabs alone, so it is hidden from assistive technology - and Delete closes the focused tab. `Tabs`' `onTabClose` hears either. */
+  closeLabel?: string;
+  /** A control of the tab's own after its label - a kebab menu, a badge. */
+  secondaryAction?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @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.
+ */
+declare function Tab({ value: valueProp, label, icon, iconPosition, isWrapped: isWrappedProp, bg: bgProp, borderRadius: borderRadiusProp, color: colorProp, textColor: textColorProp, size: sizeProp, selectedBg: selectedBgProp, disabled, href, as, onClick, title, closeLabel, secondaryAction, className, 'data-testid': dataTestid }: Readonly<TabProps>): import("react").JSX.Element;
+//#endregion
+export { Tab, TabIconPosition, TabProps };