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

package/dist/TabsContext-B_XHbjcS.d.cts

@@ -0,0 +1,6 @@
+import "./index-DchHf5cF.cjs";
+//#region src/Tabs/TabsContext.d.ts
+/** A tab's value: what it is chosen as. A `Tab` without one takes its position. */
+type TabValue = string | number;
+//#endregion
+export { TabValue as t };

package/dist/TabsContext-Dn2kqUwr.d.mts

@@ -0,0 +1,6 @@
+import "./index-h4dYtVrp.mjs";
+//#region src/Tabs/TabsContext.d.ts
+/** A tab's value: what it is chosen as. A `Tab` without one takes its position. */
+type TabValue = string | number;
+//#endregion
+export { TabValue as t };

package/dist/TabsValueContext-D40zGCpE.cjs

@@ -0,0 +1,19 @@
+let react = require("react");
+//#region src/Tabs/TabsValueContext.ts
+/** Set by a `TabContext`. */
+const TabsValueContext = (0, react.createContext)(null);
+/** The surrounding `TabContext`'s value, if there is one. */
+const useTabsValue = () => (0, react.useContext)(TabsValueContext);
+//#endregion
+Object.defineProperty(exports, "TabsValueContext", {
+	enumerable: true,
+	get: function() {
+		return TabsValueContext;
+	}
+});
+Object.defineProperty(exports, "useTabsValue", {
+	enumerable: true,
+	get: function() {
+		return useTabsValue;
+	}
+});

package/dist/TabsValueContext-DvL3inf7.mjs

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+//#region src/Tabs/TabsValueContext.ts
+/** Set by a `TabContext`. */
+const TabsValueContext = createContext(null);
+/** The surrounding `TabContext`'s value, if there is one. */
+const useTabsValue = () => useContext(TabsValueContext);
+//#endregion
+export { useTabsValue as n, TabsValueContext as t };

package/dist/TextInput.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_FormControl = require("./FormControl.cjs");
 const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 let react = require("react");
@@ -65,10 +65,10 @@ const baseStyle = {
 	alignItems: "center",
 	transition: "border-color 0.15s ease"
 };
-const backgroundStyle = ({ theme, textColor = require_themeDefault.themeDefault(theme, "accentTextColor", "primary") }) => {
+const backgroundStyle = ({ theme, textColor, color = require_themeDefault.themeDefault(theme, "color", "primary") }) => {
 	return {
 		backgroundColor: (0, require_src.src_exports.get)(theme, `background.${require_themeDefault.themeDefault(theme, "inputBg", "terminal")}`),
-		color: (0, require_src.src_exports.get)(theme, `text.${textColor}`),
+		color: textColor ? (0, require_src.src_exports.get)(theme, `text.${textColor}`) : (0, require_src.src_exports.get)(theme, `palette.${color}.main`),
 		fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
 		fontSize: (0, require_src.src_exports.get)(theme, "fontSizes.1"),
 		lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base")
@@ -178,7 +178,7 @@ function TextInput({ autoComplete, autoFocus, borderRadius, classes, components,
 	const { id, error, disabled, required, size, fullWidth } = fc;
 	const theme = require_theme.useTheme();
 	const color = fc.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
-	const textColor = fc.textColor ?? require_themeDefault.themeDefault(theme, "accentTextColor", "primary");
+	const textColor = fc.textColor;
 	const variant = variantProp ?? require_themeDefault.themeDefault(theme, "inputVariant", "default");
 	const isAutoResize = resize;
 	const isMultiline = multiline || rows !== void 0 && Number(rows) > 1;

package/dist/TextInput.d.cts

@@ -1,5 +1,4 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
 import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/TextInput/TextInput.d.ts
@@ -25,7 +24,7 @@ interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'wi
   };
   /** Focus/active border color - resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: TextInputColor;
-  /** Text color of the typed value - resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  /** Text color of the typed value - resolves against `theme.text`. Default: the accent `color`'s `main`. */
   textColor?: TextInputTextColor;
   /** Disables the input. */
   disabled?: boolean;

package/dist/TextInput.d.mts

@@ -1,5 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 //#region src/TextInput/TextInput.d.ts
@@ -25,7 +24,7 @@ interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'wi
   };
   /** Focus/active border color - resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: TextInputColor;
-  /** Text color of the typed value - resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  /** Text color of the typed value - resolves against `theme.text`. Default: the accent `color`'s `main`. */
   textColor?: TextInputTextColor;
   /** Disables the input. */
   disabled?: boolean;

package/dist/TextInput.mjs

@@ -1,6 +1,6 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
@@ -63,10 +63,10 @@ const baseStyle = {
 	alignItems: "center",
 	transition: "border-color 0.15s ease"
 };
-const backgroundStyle = ({ theme, textColor = themeDefault(theme, "accentTextColor", "primary") }) => {
+const backgroundStyle = ({ theme, textColor, color = themeDefault(theme, "color", "primary") }) => {
 	return {
 		backgroundColor: (0, src_exports.get)(theme, `background.${themeDefault(theme, "inputBg", "terminal")}`),
-		color: (0, src_exports.get)(theme, `text.${textColor}`),
+		color: textColor ? (0, src_exports.get)(theme, `text.${textColor}`) : (0, src_exports.get)(theme, `palette.${color}.main`),
 		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
 		fontSize: (0, src_exports.get)(theme, "fontSizes.1"),
 		lineHeight: (0, src_exports.get)(theme, "lineHeights.base")
@@ -176,7 +176,7 @@ function TextInput({ autoComplete, autoFocus, borderRadius, classes, components,
 	const { id, error, disabled, required, size, fullWidth } = fc;
 	const theme = useTheme();
 	const color = fc.color ?? themeDefault(theme, "color", "primary");
-	const textColor = fc.textColor ?? themeDefault(theme, "accentTextColor", "primary");
+	const textColor = fc.textColor;
 	const variant = variantProp ?? themeDefault(theme, "inputVariant", "default");
 	const isAutoResize = resize;
 	const isMultiline = multiline || rows !== void 0 && Number(rows) > 1;

package/dist/ToggleButton/ToggleButton.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
 const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
 const require_utils = require("../utils.cjs");
-const require_theme = require("../theme-BXlAP3xf.cjs");
+const require_theme = require("../theme-BxXuXRgQ.cjs");
 const require_ButtonGroupContext = require("../ButtonGroupContext-NtkVeDVE.cjs");
 const require_Button = require("../Button.cjs");
 const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-Ewc5Ixas.cjs");

package/dist/ToggleButton/ToggleButton.d.cts

@@ -1,4 +1,4 @@
-import { i as ButtonProps } from "../index-BhibLnZ0.cjs";
+import { i as ButtonProps } from "../index-DAwcmIjN.cjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-10jEsQdg.cjs";
 //#region src/ToggleButton/ToggleButton/ToggleButton.d.ts
 interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {

package/dist/ToggleButton/ToggleButton.d.mts

@@ -1,4 +1,4 @@
-import { i as ButtonProps } from "../index-DXvQ-JVZ.mjs";
+import { i as ButtonProps } from "../index-CG_1uPrD.mjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-10jEsQdg.mjs";
 //#region src/ToggleButton/ToggleButton/ToggleButton.d.ts
 interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {

package/dist/ToggleButton/ToggleButton.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
 import { t as themeDefault } from "../themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "../utils.mjs";
-import { r as useTheme } from "../theme-CDVxig_g.mjs";
+import { r as useTheme } from "../theme-Z9_QludW.mjs";
 import { t as ButtonGroupContext } from "../ButtonGroupContext-DS-kl9lG.mjs";
 import { Button } from "../Button.mjs";
 import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-DxIyy8ze.mjs";

package/dist/ToggleButton/ToggleButtonGroup.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
 const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
-const require_theme = require("../theme-BXlAP3xf.cjs");
+const require_theme = require("../theme-BxXuXRgQ.cjs");
 const require_ButtonGroup = require("../ButtonGroup.cjs");
 const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-Ewc5Ixas.cjs");
 let react = require("react");

package/dist/ToggleButton/ToggleButtonGroup.d.cts

@@ -1,4 +1,4 @@
-import { a as ButtonGroupProps } from "../index-DbEnSf2m.cjs";
+import { a as ButtonGroupProps } from "../index-CQfJZADG.cjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-10jEsQdg.cjs";
 //#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.d.ts
 interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {

package/dist/ToggleButton/ToggleButtonGroup.d.mts

@@ -1,4 +1,4 @@
-import { a as ButtonGroupProps } from "../index-BB-dLv5V.mjs";
+import { a as ButtonGroupProps } from "../index-BrgwkY6z.mjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-10jEsQdg.mjs";
 //#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.d.ts
 interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {

package/dist/ToggleButton/ToggleButtonGroup.mjs

@@ -1,6 +1,6 @@
 import { o as styled } from "../src-DLGYOJMh.mjs";
 import { t as themeDefault } from "../themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "../theme-CDVxig_g.mjs";
+import { r as useTheme } from "../theme-Z9_QludW.mjs";
 import { ButtonGroup } from "../ButtonGroup.mjs";
 import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-DxIyy8ze.mjs";
 import { useMemo } from "react";

package/dist/TransferList.cjs

@@ -0,0 +1,356 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_Typography = require("./Typography.cjs");
+const require_Icon = require("./Icon-D-EWsBVg.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");
+//#region src/TransferList/hooks/useTransferList.ts
+const isEnabled = (item) => !item.disabled;
+/**
+* A transfer list's state: which items are on the right (controlled or not), which are checked,
+* and the moves between the sides. A move takes the checked, enabled items of its source - or all
+* the enabled ones, which its button is off without - and unchecks what it moves; the items keep their own order on each side.
+*/
+function useTransferList({ items, value, defaultValue, onChange }) {
+	const [rightValues, setRightValues] = require_useControlled.useControlled({
+		controlled: value,
+		default: defaultValue ?? []
+	});
+	const [checked, setChecked] = (0, react.useState)([]);
+	const isRight = (item) => rightValues.includes(item.value);
+	const left = items.filter((item) => !isRight(item));
+	const right = items.filter(isRight);
+	const sides = {
+		left,
+		right
+	};
+	const isChecked = (item) => !item.disabled && checked.includes(item.value);
+	const getChecked = (side) => sides[side].filter(isChecked);
+	const getEnabled = (side) => sides[side].filter(isEnabled);
+	const commit = (next) => {
+		setRightValues(next);
+		onChange?.(next);
+	};
+	const toggle = (item) => {
+		setChecked((current) => current.includes(item.value) ? current.filter((entry) => entry !== item.value) : [...current, item.value]);
+	};
+	const toggleAll = (side) => {
+		const enabled = getEnabled(side).map((item) => item.value);
+		setChecked((current) => {
+			const isAll = enabled.every((entry) => current.includes(entry));
+			const rest = current.filter((entry) => !enabled.includes(entry));
+			return isAll ? rest : [...rest, ...enabled];
+		});
+	};
+	const move = (to, moving) => {
+		const moved = moving.map((item) => item.value);
+		setChecked((current) => current.filter((entry) => !moved.includes(entry)));
+		commit(to === "right" ? [...rightValues, ...moved] : rightValues.filter((entry) => !moved.includes(entry)));
+	};
+	return {
+		items,
+		left,
+		right,
+		isChecked,
+		getChecked,
+		getEnabled,
+		toggle,
+		toggleAll,
+		moveRight: () => move("right", getChecked("left")),
+		moveLeft: () => move("left", getChecked("right")),
+		moveAllRight: () => move("right", getEnabled("left")),
+		moveAllLeft: () => move("left", getEnabled("right"))
+	};
+}
+//#endregion
+//#region src/TransferList/TransferList.tsx
+const TransferListRoot = require_src.styled("div", {
+	name: "TransferList",
+	label: "TransferList",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props, "isDisabled"]),
+	systemProps: [require_src.src_exports.space]
+})(({ theme, isDisabled }) => ({
+	display: "flex",
+	alignItems: "stretch",
+	gap: theme.space[2],
+	...isDisabled && { opacity: .5 }
+}));
+const TransferListList = require_src.styled(require_Paper.Paper, {
+	name: "TransferList",
+	slot: "list",
+	label: "TransferListList",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["isError"])
+})(({ theme, isError }) => ({
+	flex: "1 1 0",
+	minWidth: 0,
+	overflow: "hidden",
+	border: `${theme.borderWidths.thin} solid ${(0, require_src.src_exports.get)(theme, isError ? "palette.error.main" : "border.default")}`
+}));
+const TransferListHeader = require_src.styled("div", {
+	name: "TransferList",
+	slot: "header",
+	label: "TransferListHeader"
+})(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.space[1],
+	padding: `${theme.space[1]} ${theme.space[2]}`,
+	borderBottom: `${theme.borderWidths.thin} solid ${(0, require_src.src_exports.get)(theme, "border.default")}`
+}));
+const TransferListTitle = require_src.styled("span", {
+	name: "TransferList",
+	slot: "title",
+	label: "TransferListTitle"
+})({
+	flex: 1,
+	minWidth: 0
+});
+const TransferListCount = require_src.styled("span", {
+	name: "TransferList",
+	slot: "count",
+	label: "TransferListCount"
+})(({ theme }) => ({
+	color: theme.text.secondary,
+	whiteSpace: "nowrap"
+}));
+const TransferListItems = require_src.styled("div", {
+	name: "TransferList",
+	slot: "items",
+	label: "TransferListItems"
+})({
+	height: "14rem",
+	overflowY: "auto"
+});
+const TransferListRow = require_src.styled("div", {
+	name: "TransferList",
+	slot: "item",
+	label: "TransferListItem"
+})(({ theme }) => ({
+	display: "flex",
+	"&:hover": { backgroundColor: (0, require_src.src_exports.get)(theme, "background.secondary") },
+	"& > label": {
+		flex: 1,
+		padding: `${theme.space[1]} ${theme.space[2]}`,
+		boxSizing: "border-box"
+	}
+}));
+const TransferListControls = require_src.styled("div", {
+	name: "TransferList",
+	slot: "controls",
+	label: "TransferListControls"
+})(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center",
+	alignItems: "stretch",
+	gap: theme.space[1]
+}));
+const TransferListIcon = require_src.styled("span", {
+	name: "TransferList",
+	slot: "icon",
+	label: "TransferListIcon"
+})({
+	display: "inline-flex",
+	alignItems: "center",
+	"[dir=\"rtl\"] &": { transform: "scaleX(-1)" },
+	"& > :nth-of-type(2)": { marginInlineStart: "-0.5em" }
+});
+function List({ side, title, baseId, state, hasSelectAll, getCountLabel, size, color, disabled, isError }) {
+	const items = state[side];
+	const titleId = `${baseId}-${side}-title`;
+	const enabledCount = state.getEnabled(side).length;
+	const checkedCount = state.getChecked(side).length;
+	const isAll = enabledCount > 0 && checkedCount === enabledCount;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TransferListList, {
+		elevation: 0,
+		p: 0,
+		isError,
+		"data-side": side,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TransferListHeader, { children: [
+			hasSelectAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
+				id: `${baseId}-${side}-all`,
+				"aria-labelledby": titleId,
+				size,
+				color,
+				disabled: disabled || enabledCount === 0,
+				checked: isAll,
+				indeterminate: checkedCount > 0 && !isAll,
+				onChange: () => state.toggleAll(side)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransferListTitle, {
+				id: titleId,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+					variant: "subtitle2",
+					as: "span",
+					children: title
+				})
+			}),
+			hasSelectAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransferListCount, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "caption",
+				children: getCountLabel(checkedCount, items.length)
+			}) })
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransferListItems, {
+			role: "list",
+			"aria-labelledby": title ? titleId : void 0,
+			children: items.map((item) => {
+				const position = state.items.indexOf(item);
+				const labelId = `${baseId}-${position}-label`;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransferListRow, {
+					role: "listitem",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
+						id: `${baseId}-${position}`,
+						"aria-labelledby": labelId,
+						size,
+						color,
+						disabled: disabled || item.disabled,
+						checked: state.isChecked(item),
+						onChange: () => state.toggle(item),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+							variant: "body2",
+							as: "span",
+							id: labelId,
+							children: item.label
+						})
+					})
+				}, item.value);
+			})
+		})]
+	});
+}
+/**
+* @description A transfer list: two lists, and the buttons that move the checked items from one
+* to the other. Each list is a list of rows whose checkbox is the row, so it is one tab stop and
+* the label toggles it. The value is the values on the right; the items keep their own order on
+* each side. A disabled item stays where it is. Every name - the lists' titles, the four buttons -
+* 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 }) {
+	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
+	});
+	const baseId = (0, react.useId)();
+	const moveAllRightLabel = moveAllRightLabelProp ?? dp.moveAllRightLabel;
+	const moveRightLabel = moveRightLabelProp ?? dp.moveRightLabel;
+	const moveLeftLabel = moveLeftLabelProp ?? dp.moveLeftLabel;
+	const moveAllLeftLabel = moveAllLeftLabelProp ?? dp.moveAllLeftLabel;
+	const shouldShowMoveAll = shouldShowMoveAllProp ?? dp.shouldShowMoveAll ?? false;
+	const hasSelectAll = hasSelectAllProp ?? dp.hasSelectAll ?? false;
+	const state = useTransferList({
+		items,
+		value,
+		defaultValue,
+		onChange
+	});
+	const buttonProps = {
+		variant: "outlined",
+		size: fc.size,
+		color: fc.color
+	};
+	const isOff = (side, ofChecked) => fc.disabled || (ofChecked ? state.getChecked(side).length === 0 : state.getEnabled(side).length === 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TransferListRoot, {
+		id: fc.id,
+		role: "group",
+		isDisabled: fc.disabled,
+		className,
+		"data-testid": dataTestid,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby ?? fc.labelId,
+		"aria-describedby": ariaDescribedby ?? fc["aria-describedby"],
+		...spaceProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(List, {
+				side: "left",
+				title: leftLabel,
+				baseId,
+				state,
+				hasSelectAll,
+				getCountLabel,
+				size: fc.size,
+				color: fc.color,
+				disabled: fc.disabled,
+				isError: fc.error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TransferListControls, { children: [
+				shouldShowMoveAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					...buttonProps,
+					"aria-label": moveAllRightLabel,
+					disabled: isOff("left", false),
+					onClick: state.moveAllRight,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TransferListIcon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+						name: "chevron_right",
+						size: "1em",
+						color: "inherit"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+						name: "chevron_right",
+						size: "1em",
+						color: "inherit"
+					})] })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					...buttonProps,
+					"aria-label": moveRightLabel,
+					disabled: isOff("left", true),
+					onClick: state.moveRight,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransferListIcon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+						name: "chevron_right",
+						size: "1em",
+						color: "inherit"
+					}) })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					...buttonProps,
+					"aria-label": moveLeftLabel,
+					disabled: isOff("right", true),
+					onClick: state.moveLeft,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransferListIcon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+						name: "chevron_left",
+						size: "1em",
+						color: "inherit"
+					}) })
+				}),
+				shouldShowMoveAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					...buttonProps,
+					"aria-label": moveAllLeftLabel,
+					disabled: isOff("right", false),
+					onClick: state.moveAllLeft,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TransferListIcon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+						name: "chevron_left",
+						size: "1em",
+						color: "inherit"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+						name: "chevron_left",
+						size: "1em",
+						color: "inherit"
+					})] })
+				})
+			] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(List, {
+				side: "right",
+				title: rightLabel,
+				baseId,
+				state,
+				hasSelectAll,
+				getCountLabel,
+				size: fc.size,
+				color: fc.color,
+				disabled: fc.disabled,
+				isError: fc.error
+			})
+		]
+	});
+}
+//#endregion
+exports.TransferList = TransferList;

package/dist/TransferList.d.cts

@@ -0,0 +1,67 @@
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+//#region src/TransferList/hooks/useTransferList.d.ts
+type TransferListValue = string | number;
+interface TransferListItem {
+  /** What `value` holds for it - unique among the items. */
+  value: TransferListValue;
+  /** What the row says, and what names its checkbox. */
+  label: string;
+  /** Stays where it is and can't be checked. */
+  disabled?: boolean;
+}
+//#endregion
+//#region src/TransferList/TransferList.d.ts
+interface TransferListProps extends SpaceProps<Theme> {
+  /** Every item, on either side. */
+  items: readonly TransferListItem[];
+  /** The values on the right. Controlled with `onChange`. */
+  value?: readonly TransferListValue[];
+  /** The values on the right at first, when uncontrolled. Default: none. */
+  defaultValue?: readonly TransferListValue[];
+  /** Fired as items move, with the values now on the right. */
+  onChange?: (value: TransferListValue[]) => void;
+  /** The left list's title, which names it. */
+  leftLabel?: string;
+  /** The right list's title, which names it. */
+  rightLabel?: string;
+  /** Names the button that moves every item right. */
+  moveAllRightLabel?: string;
+  /** Names the button that moves the checked items right. */
+  moveRightLabel?: string;
+  /** Names the button that moves the checked items left. */
+  moveLeftLabel?: string;
+  /** Names the button that moves every item left. */
+  moveAllLeftLabel?: string;
+  /** Adds the buttons that move every enabled item at once. Default: `false`. */
+  shouldShowMoveAll?: boolean;
+  /** A checkbox in each list's header - all, some or none checked - and the count beside it. Default: `false`. */
+  hasSelectAll?: boolean;
+  /** The count in a header: what is checked, of how many. Default: `n/total`. */
+  getCountLabel?: (checked: number, total: number) => string;
+  /** The checkboxes' and buttons' size. Default: its `FormControl`'s, else `'md'`. */
+  size?: keyof Theme['sizes'];
+  /** The checkboxes' and buttons' color - resolves to `theme.palette`. Default: its `FormControl`'s. */
+  color?: keyof Theme['palette'];
+  disabled?: boolean;
+  /** The lists take the error color. */
+  error?: boolean;
+  /** On the group, which a `FormLabel` names it by. Default: its `FormControl`'s. */
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A transfer list: two lists, and the buttons that move the checked items from one
+ * to the other. Each list is a list of rows whose checkbox is the row, so it is one tab stop and
+ * the label toggles it. The value is the values on the right; the items keep their own order on
+ * each side. A disabled item stays where it is. Every name - the lists' titles, the four buttons -
+ * 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;
+//#endregion
+export { TransferList, type TransferListItem, TransferListProps, type TransferListValue };