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

package/dist/Tooltip.mjs

@@ -0,0 +1,268 @@
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps } from "./theme-oBfFhJm9.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { t as getSurfaceRadius } from "./getSurfaceRadius-DTgqIzll.mjs";
+import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
+import { Portal } from "./Portal.mjs";
+import { t as useAnchoredPlacement } from "./useAnchoredPlacement-Pe7sY41E.mjs";
+import { t as useMergedRefs } from "./useMergedRefs-BfBckwRY.mjs";
+import { n as resolveTooltipPlacement, t as getTooltipOrigins } from "./getTooltipOrigins-CyyIMCF1.mjs";
+import { cloneElement, useCallback, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Tooltip/hooks/useTooltip.ts
+const isKeyboardFocus = (event) => {
+	try {
+		return event.target.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+};
+/**
+* The state of a tooltip: whether it is open (its own, or its owner's), the timers that open and
+* close it, and the handlers its child and the tooltip itself take. Opening and closing are
+* delayed; moving from the child onto the tooltip does not close it, so its text can be read and
+* selected (WCAG 1.4.13); Escape closes it at once.
+*/
+function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDelay, leaveDelay, enterTouchDelay, leaveTouchDelay, shouldOpenOnHover, shouldOpenOnFocus, shouldOpenOnTouch }) {
+	const [isOpen, setIsOpen] = useControlled({
+		controlled: isOpenProp,
+		default: defaultOpen
+	});
+	const timer = useRef(void 0);
+	const latest = useRef({
+		isOpen,
+		isOpenProp,
+		onOpen,
+		onClose
+	});
+	useEffect(() => {
+		latest.current = {
+			isOpen,
+			isOpenProp,
+			onOpen,
+			onClose
+		};
+	});
+	const clear = useCallback(() => window.clearTimeout(timer.current), []);
+	const ask = useCallback((next, event, delay) => {
+		clear();
+		timer.current = window.setTimeout(() => {
+			const current = latest.current;
+			if (current.isOpen === next) return;
+			if (current.isOpenProp === void 0) setIsOpen(next);
+			(next ? current.onOpen : current.onClose)?.(event);
+		}, delay);
+	}, [clear, setIsOpen]);
+	useEffect(() => clear, [clear]);
+	useEffect(() => {
+		if (!isOpen) return void 0;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") ask(false, event, 0);
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [isOpen, ask]);
+	return {
+		isOpen,
+		childHandlers: {
+			onMouseEnter: (event) => {
+				if (shouldOpenOnHover) ask(true, event, enterDelay);
+			},
+			onMouseLeave: (event) => {
+				if (shouldOpenOnHover) ask(false, event, leaveDelay);
+			},
+			onFocus: (event) => {
+				if (shouldOpenOnFocus && isKeyboardFocus(event)) ask(true, event, enterDelay);
+			},
+			onBlur: (event) => {
+				if (shouldOpenOnFocus) ask(false, event, leaveDelay);
+			},
+			onTouchStart: (event) => {
+				if (shouldOpenOnTouch) ask(true, event, enterTouchDelay);
+			},
+			onTouchEnd: (event) => {
+				if (shouldOpenOnTouch) ask(false, event, leaveTouchDelay);
+			},
+			onTouchCancel: (event) => {
+				if (shouldOpenOnTouch) ask(false, event, leaveTouchDelay);
+			}
+		},
+		surfaceHandlers: {
+			onMouseEnter: () => {
+				if (shouldOpenOnHover) clear();
+			},
+			onMouseLeave: (event) => {
+				if (shouldOpenOnHover) ask(false, event, leaveDelay);
+			}
+		}
+	};
+}
+//#endregion
+//#region src/Tooltip/Tooltip.tsx
+const MARGIN = 8;
+const GAP = 8;
+const ARROW = 8;
+const TooltipSurface = styled("div", {
+	name: "Tooltip",
+	label: "Tooltip",
+	shouldForwardProp: createShouldForwardProp([
+		"layer",
+		"borderRadius",
+		"bg",
+		"textColor"
+	])
+})(({ theme, layer, borderRadius, bg, textColor }) => ({
+	position: "fixed",
+	top: 0,
+	left: 0,
+	visibility: "hidden",
+	zIndex: theme.zOrder[layer],
+	boxSizing: "border-box",
+	maxWidth: "20rem",
+	padding: `${theme.space[.5]} ${theme.space[1]}`,
+	borderRadius: getSurfaceRadius(theme, borderRadius),
+	boxShadow: theme.shadows[4],
+	backgroundColor: (0, src_exports.get)(theme, `background.${bg ?? "modal"}`),
+	color: (0, src_exports.get)(theme, `text.${textColor ?? themeDefault(theme, "textColor", "initial")}`),
+	fontFamily: (0, src_exports.get)(theme, "fonts.body"),
+	fontSize: theme.fontSizes[0],
+	lineHeight: (0, src_exports.get)(theme, "lineHeights.base"),
+	overflowWrap: "break-word"
+}));
+const TooltipArrow = styled("span", {
+	name: "Tooltip",
+	slot: "arrow",
+	label: "TooltipArrow"
+})({
+	position: "absolute",
+	width: ARROW,
+	height: ARROW,
+	backgroundColor: "inherit",
+	transform: "rotate(45deg)",
+	pointerEvents: "none"
+});
+const getArrow = ({ anchorRect, surfaceSize, top, left }) => {
+	const { width, height } = surfaceSize;
+	if (top + height <= anchorRect.top + 1 || top >= anchorRect.bottom - 1) {
+		const side = top + height <= anchorRect.top + 1 ? "top" : "bottom";
+		const middle = anchorRect.left + anchorRect.width / 2 - left;
+		return {
+			side,
+			offset: Math.min(Math.max(middle, ARROW), width - ARROW)
+		};
+	}
+	const side = left + width <= anchorRect.left + 1 ? "left" : "right";
+	const middle = anchorRect.top + anchorRect.height / 2 - top;
+	return {
+		side,
+		offset: Math.min(Math.max(middle, ARROW), height - ARROW)
+	};
+};
+const isSameArrow = (a, b) => a !== null && a.side === b.side && a.offset === b.offset;
+const getArrowStyle = ({ side, offset }) => {
+	const half = ARROW / 2;
+	if (side === "top") return {
+		bottom: -4,
+		left: offset - half
+	};
+	if (side === "bottom") return {
+		top: -4,
+		left: offset - half
+	};
+	if (side === "left") return {
+		right: -4,
+		top: offset - half
+	};
+	return {
+		left: -4,
+		top: offset - half
+	};
+};
+/**
+* @description A short description of one child, shown on hover, keyboard focus and a long touch -
+* a `role="tooltip"` in a `Portal`, placed beside its child and flipped for want of room. The
+* child is named by it (`aria-label`) or described by it (`aria-describedby`, with
+* `shouldDescribeChild`). It opens and closes after their delays, stays open while the pointer is
+* on the tooltip itself, closes on Escape, and never takes or traps the focus.
+*/
+function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, "data-testid": dataTestid }) {
+	const dp = useDefaultProps("Tooltip");
+	const placement = placementProp ?? dp.placement ?? "top";
+	const hasArrow = hasArrowProp ?? dp.hasArrow ?? false;
+	const shouldDescribeChild = shouldDescribeChildProp ?? dp.shouldDescribeChild ?? false;
+	const layer = layerProp ?? dp.layer ?? "tooltip";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const bg = bgProp ?? dp.bg;
+	const textColor = textColorProp ?? dp.textColor;
+	const id = useId();
+	const { isOpen, childHandlers, surfaceHandlers } = useTooltip({
+		isOpen: isOpenProp,
+		defaultOpen,
+		onOpen,
+		onClose,
+		enterDelay: enterDelayProp ?? dp.enterDelay ?? 100,
+		leaveDelay: leaveDelayProp ?? dp.leaveDelay ?? 0,
+		enterTouchDelay: enterTouchDelayProp ?? dp.enterTouchDelay ?? 700,
+		leaveTouchDelay: leaveTouchDelayProp ?? dp.leaveTouchDelay ?? 1500,
+		shouldOpenOnHover: shouldOpenOnHoverProp ?? dp.shouldOpenOnHover ?? true,
+		shouldOpenOnFocus: shouldOpenOnFocusProp ?? dp.shouldOpenOnFocus ?? true,
+		shouldOpenOnTouch: shouldOpenOnTouchProp ?? dp.shouldOpenOnTouch ?? true
+	});
+	const isShown = isOpen && title !== void 0 && title !== null && title !== "";
+	const anchorRef = useRef(null);
+	const surfaceRef = useRef(null);
+	const own = children.props;
+	const ref = useMergedRefs(anchorRef, own.ref);
+	const [arrow, setArrow] = useState(null);
+	const getOrigins = useCallback((context) => getTooltipOrigins(resolveTooltipPlacement(placement, context), context.isRtl), [placement]);
+	const onPlaced = useCallback((placed) => {
+		if (!hasArrow) return;
+		const next = getArrow(placed);
+		setArrow((current) => isSameArrow(current, next) ? current : next);
+	}, [hasArrow]);
+	useAnchoredPlacement({
+		isOpen: isShown,
+		anchorRef,
+		surfaceRef,
+		getOrigins,
+		margin: MARGIN,
+		gap: GAP,
+		onPlaced
+	});
+	const handlers = Object.fromEntries(Object.entries(childHandlers).map(([name, handler]) => [name, (event) => {
+		own[name]?.(event);
+		handler(event);
+	}]));
+	const ownDescription = own["aria-describedby"];
+	const names = typeof title === "string" && own["aria-label"] === void 0 && own["aria-labelledby"] === void 0 ? { "aria-label": title } : {};
+	const ariaProps = shouldDescribeChild ? { "aria-describedby": isShown ? [ownDescription, id].filter(Boolean).join(" ") : ownDescription } : names;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [cloneElement(children, {
+		...handlers,
+		...ariaProps,
+		ref
+	}), isShown && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(TooltipSurface, {
+		...slotProps?.root,
+		as: slots?.root,
+		ref: surfaceRef,
+		id,
+		role: "tooltip",
+		layer,
+		borderRadius,
+		bg,
+		textColor,
+		className: [slotProps?.root?.className, className].filter(Boolean).join(" ") || void 0,
+		"data-testid": dataTestid ?? slotProps?.root?.["data-testid"],
+		...surfaceHandlers,
+		children: [title, hasArrow && arrow ? /* @__PURE__ */ jsx(TooltipArrow, {
+			...slotProps?.arrow,
+			as: slots?.arrow,
+			style: {
+				...slotProps?.arrow?.style,
+				...getArrowStyle(arrow)
+			},
+			"aria-hidden": "true"
+		}) : null]
+	}) })] });
+}
+//#endregion
+export { Tooltip };

package/dist/TransferList.cjs

@@ -1,13 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
+const require_useControlled = require("./useControlled-C666KpQ0.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-D-EWsBVg.cjs");
+const require_Icon = require("./Icon-BE7bRsqR.cjs");
+const require_FormControl = require("./FormControl.cjs");
 const require_Button = require("./Button.cjs");
 const require_Paper = require("./Paper.cjs");
-const require_FormControl = require("./FormControl.cjs");
 const require_Checkbox = require("./Checkbox.cjs");
-const require_useControlled = require("./useControlled-C666KpQ0.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");
@@ -79,6 +79,7 @@ const TransferListRoot = require_src.styled("div", {
 })(({ theme, isDisabled }) => ({
 	display: "flex",
 	alignItems: "stretch",
+	alignSelf: "stretch",
 	gap: theme.space[2],
 	...isDisabled && { opacity: .5 }
 }));
@@ -162,7 +163,7 @@ const TransferListIcon = require_src.styled("span", {
 	"[dir=\"rtl\"] &": { transform: "scaleX(-1)" },
 	"& > :nth-of-type(2)": { marginInlineStart: "-0.5em" }
 });
-function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, color, disabled, isError }) {
+function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, color, textColor, disabled, isError }) {
 	const items = state[side];
 	const titleId = `${baseId}-${side}-title`;
 	const enabledCount = state.getEnabled(side).length;
@@ -189,11 +190,13 @@ function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, c
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 					variant: "subtitle2",
 					as: "span",
+					color: textColor,
 					children: title
 				})
 			}),
 			hasSelectAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransferListCount, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 				variant: "caption",
+				color: textColor,
 				children: getCountLabel(checkedCount, items.length)
 			}) })
 		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransferListItems, {
@@ -216,6 +219,7 @@ function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, c
 							variant: "body2",
 							as: "span",
 							id: labelId,
+							color: textColor,
 							children: item.label
 						})
 					})
@@ -232,14 +236,15 @@ function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, c
 * is the app's, so it carries no language of its own. In a `FormControl` it takes the field's
 * size, color, error and disabled state, and its `FormLabel` names the group.
 */
-function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLabel, moveAllRightLabel: moveAllRightLabelProp, moveRightLabel: moveRightLabelProp, moveLeftLabel: moveLeftLabelProp, moveAllLeftLabel: moveAllLeftLabelProp, shouldShowMoveAll: shouldShowMoveAllProp, hasSelectAll: hasSelectAllProp, getCountLabel = (checked, total) => `${checked}/${total}`, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLabel, moveAllRightLabel: moveAllRightLabelProp, moveRightLabel: moveRightLabelProp, moveLeftLabel: moveLeftLabelProp, moveAllLeftLabel: moveAllLeftLabelProp, shouldShowMoveAll: shouldShowMoveAllProp, hasSelectAll: hasSelectAllProp, getCountLabel = (checked, total) => `${checked}/${total}`, size: sizeProp, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
 	const dp = require_theme.useDefaultProps("TransferList");
 	const fc = require_FormControl.useFormControl({
 		id: idProp,
 		error: errorProp,
 		disabled: disabledProp,
 		size: sizeProp ?? dp.size,
-		color: colorProp ?? dp.color
+		color: colorProp ?? dp.color,
+		textColor: textColorProp
 	});
 	const baseId = (0, react.useId)();
 	const moveAllRightLabel = moveAllRightLabelProp ?? dp.moveAllRightLabel;
@@ -280,6 +285,7 @@ function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLa
 				getCountLabel,
 				size: fc.size,
 				color: fc.color,
+				textColor: fc.textColor,
 				disabled: fc.disabled,
 				isError: fc.error
 			}),
@@ -346,6 +352,7 @@ function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLa
 				getCountLabel,
 				size: fc.size,
 				color: fc.color,
+				textColor: fc.textColor,
 				disabled: fc.disabled,
 				isError: fc.error
 			})

package/dist/TransferList.d.cts

@@ -1,4 +1,4 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/TransferList/hooks/useTransferList.d.ts
 type TransferListValue = string | number;
@@ -43,6 +43,8 @@ interface TransferListProps extends SpaceProps<Theme> {
   size?: keyof Theme['sizes'];
   /** The checkboxes' and buttons' color - resolves to `theme.palette`. Default: its `FormControl`'s. */
   color?: keyof Theme['palette'];
+  /** The text color of the titles - resolves to `theme.text`. Default: its `FormControl`'s or `Form`'s. */
+  textColor?: keyof Theme['text'];
   disabled?: boolean;
   /** The lists take the error color. */
   error?: boolean;
@@ -62,6 +64,6 @@ interface TransferListProps extends SpaceProps<Theme> {
  * is the app's, so it carries no language of its own. In a `FormControl` it takes the field's
  * size, color, error and disabled state, and its `FormLabel` names the group.
  */
-declare function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLabel, moveAllRightLabel: moveAllRightLabelProp, moveRightLabel: moveRightLabelProp, moveLeftLabel: moveLeftLabelProp, moveAllLeftLabel: moveAllLeftLabelProp, shouldShowMoveAll: shouldShowMoveAllProp, hasSelectAll: hasSelectAllProp, getCountLabel, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<TransferListProps>): import("react").JSX.Element;
+declare function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLabel, moveAllRightLabel: moveAllRightLabelProp, moveRightLabel: moveRightLabelProp, moveLeftLabel: moveLeftLabelProp, moveAllLeftLabel: moveAllLeftLabelProp, shouldShowMoveAll: shouldShowMoveAllProp, hasSelectAll: hasSelectAllProp, getCountLabel, size: sizeProp, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<TransferListProps>): import("react").JSX.Element;
 //#endregion
 export { TransferList, type TransferListItem, TransferListProps, type TransferListValue };

package/dist/TransferList.d.mts

@@ -1,4 +1,4 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/TransferList/hooks/useTransferList.d.ts
 type TransferListValue = string | number;
@@ -43,6 +43,8 @@ interface TransferListProps extends SpaceProps<Theme> {
   size?: keyof Theme['sizes'];
   /** The checkboxes' and buttons' color - resolves to `theme.palette`. Default: its `FormControl`'s. */
   color?: keyof Theme['palette'];
+  /** The text color of the titles - resolves to `theme.text`. Default: its `FormControl`'s or `Form`'s. */
+  textColor?: keyof Theme['text'];
   disabled?: boolean;
   /** The lists take the error color. */
   error?: boolean;
@@ -62,6 +64,6 @@ interface TransferListProps extends SpaceProps<Theme> {
  * is the app's, so it carries no language of its own. In a `FormControl` it takes the field's
  * size, color, error and disabled state, and its `FormLabel` names the group.
  */
-declare function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLabel, moveAllRightLabel: moveAllRightLabelProp, moveRightLabel: moveRightLabelProp, moveLeftLabel: moveLeftLabelProp, moveAllLeftLabel: moveAllLeftLabelProp, shouldShowMoveAll: shouldShowMoveAllProp, hasSelectAll: hasSelectAllProp, getCountLabel, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<TransferListProps>): import("react").JSX.Element;
+declare function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLabel, moveAllRightLabel: moveAllRightLabelProp, moveRightLabel: moveRightLabelProp, moveLeftLabel: moveLeftLabelProp, moveAllLeftLabel: moveAllLeftLabelProp, shouldShowMoveAll: shouldShowMoveAllProp, hasSelectAll: hasSelectAllProp, getCountLabel, size: sizeProp, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<TransferListProps>): import("react").JSX.Element;
 //#endregion
 export { TransferList, type TransferListItem, TransferListProps, type TransferListValue };

package/dist/TransferList.mjs

@@ -1,12 +1,12 @@
 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 useDefaultProps } from "./theme-oBfFhJm9.mjs";
+import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { t as Icon } from "./Icon-0hPpk-WZ.mjs";
+import { useFormControl } from "./FormControl.mjs";
 import { Button } from "./Button.mjs";
 import { Paper } from "./Paper.mjs";
-import { useFormControl } from "./FormControl.mjs";
 import { Checkbox } from "./Checkbox.mjs";
-import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
 import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/TransferList/hooks/useTransferList.ts
@@ -77,6 +77,7 @@ const TransferListRoot = styled("div", {
 })(({ theme, isDisabled }) => ({
 	display: "flex",
 	alignItems: "stretch",
+	alignSelf: "stretch",
 	gap: theme.space[2],
 	...isDisabled && { opacity: .5 }
 }));
@@ -160,7 +161,7 @@ const TransferListIcon = styled("span", {
 	"[dir=\"rtl\"] &": { transform: "scaleX(-1)" },
 	"& > :nth-of-type(2)": { marginInlineStart: "-0.5em" }
 });
-function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, color, disabled, isError }) {
+function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, color, textColor, disabled, isError }) {
 	const items = state[side];
 	const titleId = `${baseId}-${side}-title`;
 	const enabledCount = state.getEnabled(side).length;
@@ -187,11 +188,13 @@ function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, c
 				children: /* @__PURE__ */ jsx(Typography, {
 					variant: "subtitle2",
 					as: "span",
+					color: textColor,
 					children: title
 				})
 			}),
 			hasSelectAll && /* @__PURE__ */ jsx(TransferListCount, { children: /* @__PURE__ */ jsx(Typography, {
 				variant: "caption",
+				color: textColor,
 				children: getCountLabel(checkedCount, items.length)
 			}) })
 		] }), /* @__PURE__ */ jsx(TransferListItems, {
@@ -214,6 +217,7 @@ function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, c
 							variant: "body2",
 							as: "span",
 							id: labelId,
+							color: textColor,
 							children: item.label
 						})
 					})
@@ -230,14 +234,15 @@ function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, c
 * is the app's, so it carries no language of its own. In a `FormControl` it takes the field's
 * size, color, error and disabled state, and its `FormLabel` names the group.
 */
-function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLabel, moveAllRightLabel: moveAllRightLabelProp, moveRightLabel: moveRightLabelProp, moveLeftLabel: moveLeftLabelProp, moveAllLeftLabel: moveAllLeftLabelProp, shouldShowMoveAll: shouldShowMoveAllProp, hasSelectAll: hasSelectAllProp, getCountLabel = (checked, total) => `${checked}/${total}`, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLabel, moveAllRightLabel: moveAllRightLabelProp, moveRightLabel: moveRightLabelProp, moveLeftLabel: moveLeftLabelProp, moveAllLeftLabel: moveAllLeftLabelProp, shouldShowMoveAll: shouldShowMoveAllProp, hasSelectAll: hasSelectAllProp, getCountLabel = (checked, total) => `${checked}/${total}`, size: sizeProp, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
 	const dp = useDefaultProps("TransferList");
 	const fc = useFormControl({
 		id: idProp,
 		error: errorProp,
 		disabled: disabledProp,
 		size: sizeProp ?? dp.size,
-		color: colorProp ?? dp.color
+		color: colorProp ?? dp.color,
+		textColor: textColorProp
 	});
 	const baseId = useId();
 	const moveAllRightLabel = moveAllRightLabelProp ?? dp.moveAllRightLabel;
@@ -278,6 +283,7 @@ function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLa
 				getCountLabel,
 				size: fc.size,
 				color: fc.color,
+				textColor: fc.textColor,
 				disabled: fc.disabled,
 				isError: fc.error
 			}),
@@ -344,6 +350,7 @@ function TransferList({ items, value, defaultValue, onChange, leftLabel, rightLa
 				getCountLabel,
 				size: fc.size,
 				color: fc.color,
+				textColor: fc.textColor,
 				disabled: fc.disabled,
 				isError: fc.error
 			})

package/dist/Typography.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
 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");

package/dist/Typography.d.cts

@@ -1,3 +1,3 @@
-import { ht as TypographyVariant } from "./index-DJ0f69wh.cjs";
-import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-K5exjvnX.cjs";
+import { jt as TypographyVariant } from "./index-XN4-ZqTB.cjs";
+import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-BDqIc6Gx.cjs";
 export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/Typography.d.mts

@@ -1,3 +1,3 @@
-import { ht as TypographyVariant } from "./index-CJhK7JND.mjs";
-import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-ClZyaZrR.mjs";
+import { jt as TypographyVariant } from "./index-CRQ7XLri.mjs";
+import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-BPh60KDs.mjs";
 export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/Typography.mjs

@@ -1,5 +1,5 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { r as useTheme } from "./theme-Z9_QludW.mjs";
+import { r as useTheme } from "./theme-oBfFhJm9.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Typography/Typography.tsx

package/dist/View.d.cts

@@ -1,2 +1,2 @@
-import { $t as ViewBorderRadiusToken, Qt as ViewBorderColorToken, Xt as View, Zt as ViewBackgroundToken, en as ViewBorderWidthToken, nn as ViewProps, tn as ViewColorToken } from "./index-DJ0f69wh.cjs";
+import { _n as ViewBorderWidthToken, gn as ViewBorderRadiusToken, hn as ViewBorderColorToken, mn as ViewBackgroundToken, pn as View, vn as ViewColorToken, yn as ViewProps } from "./index-XN4-ZqTB.cjs";
 export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/View.d.mts

@@ -1,2 +1,2 @@
-import { $t as ViewBorderRadiusToken, Qt as ViewBorderColorToken, Xt as View, Zt as ViewBackgroundToken, en as ViewBorderWidthToken, nn as ViewProps, tn as ViewColorToken } from "./index-CJhK7JND.mjs";
+import { _n as ViewBorderWidthToken, gn as ViewBorderRadiusToken, hn as ViewBorderColorToken, mn as ViewBackgroundToken, pn as View, vn as ViewColorToken, yn as ViewProps } from "./index-CRQ7XLri.mjs";
 export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/Zoom.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useTransitionChild = require("./useTransitionChild-CikpU0Yh.cjs");
+//#region src/Zoom/Zoom.tsx
+/**
+* @description Zooms one child in from nothing and out to nothing. The child holds a `ref` and
+* takes a `style`; out, it is hidden. A user who asked for less motion sees it change at once.
+*/
+function Zoom(props) {
+	return require_useTransitionChild.useTransitionChild(props, ({ status, duration, easing }) => ({
+		transform: status === "entering" || status === "entered" ? "none" : "scale(0)",
+		transition: `transform ${duration}ms ${easing}`,
+		visibility: status === "exited" ? "hidden" : void 0
+	}));
+}
+//#endregion
+exports.Zoom = Zoom;

package/dist/Zoom.d.cts

@@ -0,0 +1,10 @@
+import { n as TransitionProps } from "./useTransition-l9dv83-Y.cjs";
+//#region src/Zoom/Zoom.d.ts
+type ZoomProps = TransitionProps;
+/**
+ * @description Zooms one child in from nothing and out to nothing. The child holds a `ref` and
+ * takes a `style`; out, it is hidden. A user who asked for less motion sees it change at once.
+ */
+declare function Zoom(props: Readonly<ZoomProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//#endregion
+export { Zoom, ZoomProps };

package/dist/Zoom.d.mts

@@ -0,0 +1,10 @@
+import { n as TransitionProps } from "./useTransition-C1F7MuHO.mjs";
+//#region src/Zoom/Zoom.d.ts
+type ZoomProps = TransitionProps;
+/**
+ * @description Zooms one child in from nothing and out to nothing. The child holds a `ref` and
+ * takes a `style`; out, it is hidden. A user who asked for less motion sees it change at once.
+ */
+declare function Zoom(props: Readonly<ZoomProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//#endregion
+export { Zoom, ZoomProps };

package/dist/Zoom.mjs

@@ -0,0 +1,15 @@
+import { t as useTransitionChild } from "./useTransitionChild-Dvg9hO-F.mjs";
+//#region src/Zoom/Zoom.tsx
+/**
+* @description Zooms one child in from nothing and out to nothing. The child holds a `ref` and
+* takes a `style`; out, it is hidden. A user who asked for less motion sees it change at once.
+*/
+function Zoom(props) {
+	return useTransitionChild(props, ({ status, duration, easing }) => ({
+		transform: status === "entering" || status === "entered" ? "none" : "scale(0)",
+		transition: `transform ${duration}ms ${easing}`,
+		visibility: status === "exited" ? "hidden" : void 0
+	}));
+}
+//#endregion
+export { Zoom };