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

package/dist/TransferList.d.mts

@@ -0,0 +1,67 @@
+import { W as Theme } from "./index-CJhK7JND.mjs";
+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 };

package/dist/TransferList.mjs

@@ -0,0 +1,354 @@
+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 { Typography } from "./Typography.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.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
+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] = useControlled({
+		controlled: value,
+		default: defaultValue ?? []
+	});
+	const [checked, setChecked] = 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 = styled("div", {
+	name: "TransferList",
+	label: "TransferList",
+	shouldForwardProp: createShouldForwardProp([...props, "isDisabled"]),
+	systemProps: [src_exports.space]
+})(({ theme, isDisabled }) => ({
+	display: "flex",
+	alignItems: "stretch",
+	gap: theme.space[2],
+	...isDisabled && { opacity: .5 }
+}));
+const TransferListList = styled(Paper, {
+	name: "TransferList",
+	slot: "list",
+	label: "TransferListList",
+	shouldForwardProp: createShouldForwardProp(["isError"])
+})(({ theme, isError }) => ({
+	flex: "1 1 0",
+	minWidth: 0,
+	overflow: "hidden",
+	border: `${theme.borderWidths.thin} solid ${(0, src_exports.get)(theme, isError ? "palette.error.main" : "border.default")}`
+}));
+const TransferListHeader = 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, src_exports.get)(theme, "border.default")}`
+}));
+const TransferListTitle = styled("span", {
+	name: "TransferList",
+	slot: "title",
+	label: "TransferListTitle"
+})({
+	flex: 1,
+	minWidth: 0
+});
+const TransferListCount = styled("span", {
+	name: "TransferList",
+	slot: "count",
+	label: "TransferListCount"
+})(({ theme }) => ({
+	color: theme.text.secondary,
+	whiteSpace: "nowrap"
+}));
+const TransferListItems = styled("div", {
+	name: "TransferList",
+	slot: "items",
+	label: "TransferListItems"
+})({
+	height: "14rem",
+	overflowY: "auto"
+});
+const TransferListRow = styled("div", {
+	name: "TransferList",
+	slot: "item",
+	label: "TransferListItem"
+})(({ theme }) => ({
+	display: "flex",
+	"&:hover": { backgroundColor: (0, src_exports.get)(theme, "background.secondary") },
+	"& > label": {
+		flex: 1,
+		padding: `${theme.space[1]} ${theme.space[2]}`,
+		boxSizing: "border-box"
+	}
+}));
+const TransferListControls = styled("div", {
+	name: "TransferList",
+	slot: "controls",
+	label: "TransferListControls"
+})(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center",
+	alignItems: "stretch",
+	gap: theme.space[1]
+}));
+const TransferListIcon = 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__ */ jsxs(TransferListList, {
+		elevation: 0,
+		p: 0,
+		isError,
+		"data-side": side,
+		children: [/* @__PURE__ */ jsxs(TransferListHeader, { children: [
+			hasSelectAll && /* @__PURE__ */ jsx(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__ */ jsx(TransferListTitle, {
+				id: titleId,
+				children: /* @__PURE__ */ jsx(Typography, {
+					variant: "subtitle2",
+					as: "span",
+					children: title
+				})
+			}),
+			hasSelectAll && /* @__PURE__ */ jsx(TransferListCount, { children: /* @__PURE__ */ jsx(Typography, {
+				variant: "caption",
+				children: getCountLabel(checkedCount, items.length)
+			}) })
+		] }), /* @__PURE__ */ 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__ */ jsx(TransferListRow, {
+					role: "listitem",
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						id: `${baseId}-${position}`,
+						"aria-labelledby": labelId,
+						size,
+						color,
+						disabled: disabled || item.disabled,
+						checked: state.isChecked(item),
+						onChange: () => state.toggle(item),
+						children: /* @__PURE__ */ jsx(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 = useDefaultProps("TransferList");
+	const fc = useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		size: sizeProp ?? dp.size,
+		color: colorProp ?? dp.color
+	});
+	const baseId = 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__ */ 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__ */ jsx(List, {
+				side: "left",
+				title: leftLabel,
+				baseId,
+				state,
+				hasSelectAll,
+				getCountLabel,
+				size: fc.size,
+				color: fc.color,
+				disabled: fc.disabled,
+				isError: fc.error
+			}),
+			/* @__PURE__ */ jsxs(TransferListControls, { children: [
+				shouldShowMoveAll && /* @__PURE__ */ jsx(Button, {
+					...buttonProps,
+					"aria-label": moveAllRightLabel,
+					disabled: isOff("left", false),
+					onClick: state.moveAllRight,
+					children: /* @__PURE__ */ jsxs(TransferListIcon, { children: [/* @__PURE__ */ jsx(Icon, {
+						name: "chevron_right",
+						size: "1em",
+						color: "inherit"
+					}), /* @__PURE__ */ jsx(Icon, {
+						name: "chevron_right",
+						size: "1em",
+						color: "inherit"
+					})] })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					...buttonProps,
+					"aria-label": moveRightLabel,
+					disabled: isOff("left", true),
+					onClick: state.moveRight,
+					children: /* @__PURE__ */ jsx(TransferListIcon, { children: /* @__PURE__ */ jsx(Icon, {
+						name: "chevron_right",
+						size: "1em",
+						color: "inherit"
+					}) })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					...buttonProps,
+					"aria-label": moveLeftLabel,
+					disabled: isOff("right", true),
+					onClick: state.moveLeft,
+					children: /* @__PURE__ */ jsx(TransferListIcon, { children: /* @__PURE__ */ jsx(Icon, {
+						name: "chevron_left",
+						size: "1em",
+						color: "inherit"
+					}) })
+				}),
+				shouldShowMoveAll && /* @__PURE__ */ jsx(Button, {
+					...buttonProps,
+					"aria-label": moveAllLeftLabel,
+					disabled: isOff("right", false),
+					onClick: state.moveAllLeft,
+					children: /* @__PURE__ */ jsxs(TransferListIcon, { children: [/* @__PURE__ */ jsx(Icon, {
+						name: "chevron_left",
+						size: "1em",
+						color: "inherit"
+					}), /* @__PURE__ */ jsx(Icon, {
+						name: "chevron_left",
+						size: "1em",
+						color: "inherit"
+					})] })
+				})
+			] }),
+			/* @__PURE__ */ jsx(List, {
+				side: "right",
+				title: rightLabel,
+				baseId,
+				state,
+				hasSelectAll,
+				getCountLabel,
+				size: fc.size,
+				color: fc.color,
+				disabled: fc.disabled,
+				isError: fc.error
+			})
+		]
+	});
+}
+//#endregion
+export { TransferList };

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-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.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 { Y as TypographyVariant } from "./themes-Kbk9h5cN.cjs";
-import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-BSqet8aO.cjs";
+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";
 export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/Typography.d.mts

@@ -1,3 +1,3 @@
-import { Y as TypographyVariant } from "./themes-RX2UX5gD.mjs";
-import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-smqjMLAZ.mjs";
+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";
 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-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Typography/Typography.tsx

package/dist/View.d.cts

@@ -1,2 +1,2 @@
-import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-nB94D7UM.cjs";
+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";
 export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/View.d.mts

@@ -1,2 +1,2 @@
-import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-cuv3o-L7.mjs";
+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";
 export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };