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

package/dist/Collapse.cjs

@@ -0,0 +1,126 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
+const require_useTransition = require("./useTransition-DAQd1PX3.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/Collapse/Collapse.tsx
+const CollapseRoot = require_src.styled("div", {
+	name: "Collapse",
+	label: "Collapse",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"status",
+		"duration",
+		"easing",
+		"orientation",
+		"collapsedSize"
+	])
+})(({ status, duration, easing, orientation, collapsedSize }) => {
+	const size = orientation === "horizontal" ? "width" : "height";
+	return {
+		overflow: "hidden",
+		transition: `${size} ${duration}ms ${easing}`,
+		...orientation === "horizontal" && status !== "exited" && { width: "max-content" },
+		...status === "exited" && {
+			[size]: collapsedSize,
+			...Number.parseFloat(collapsedSize) === 0 && { visibility: "hidden" }
+		}
+	};
+});
+const CollapseWrapper = require_src.styled("div", {
+	name: "Collapse",
+	slot: "wrapper",
+	label: "CollapseWrapper",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["orientation"])
+})(({ orientation }) => orientation === "horizontal" ? {
+	display: "flex",
+	height: "100%",
+	width: "max-content"
+} : {
+	display: "flex",
+	width: "100%"
+});
+const CollapseInner = require_src.styled("div", {
+	name: "Collapse",
+	slot: "inner",
+	label: "CollapseInner",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["orientation"])
+})(({ orientation }) => orientation === "horizontal" ? { height: "100%" } : { width: "100%" });
+/**
+* @description Opens and closes its content by its height - or, horizontal, its width. The size
+* it moves to is measured from the content, and left to the content once it is open, so content
+* that grows keeps showing. Closed, it keeps `collapsedSize` and is hidden when that is nothing.
+* A user who asked for less motion sees it change at once.
+*/
+function Collapse({ children, isShown = false, shouldAppear: shouldAppearProp, shouldMountOnEnter = false, shouldUnmountOnExit = false, timeout: timeoutProp, easing: easingProp, collapsedSize: collapsedSizeProp, orientation: orientationProp, onEnter, onEntering, onEntered, onExit, onExiting, onExited, className, "data-testid": dataTestid }) {
+	const theme = require_theme.useTheme();
+	const dp = require_theme.useDefaultProps("Collapse");
+	const shouldAppear = shouldAppearProp ?? dp.shouldAppear ?? true;
+	const timeout = timeoutProp ?? dp.timeout ?? theme.transitions.duration.standard;
+	const easing = easingProp ?? dp.easing ?? "standard";
+	const collapsedSize = collapsedSizeProp ?? dp.collapsedSize ?? 0;
+	const orientation = orientationProp ?? dp.orientation ?? "vertical";
+	const size = orientation === "horizontal" ? "width" : "height";
+	const collapsed = typeof collapsedSize === "number" ? `${collapsedSize}px` : collapsedSize;
+	const rootRef = (0, react.useRef)(null);
+	const wrapperRef = (0, react.useRef)(null);
+	const measure = () => {
+		const wrapper = wrapperRef.current;
+		return `${orientation === "horizontal" ? wrapper.clientWidth : wrapper.clientHeight}px`;
+	};
+	const { status, duration } = require_useTransition.useTransition({
+		isShown,
+		shouldAppear,
+		shouldMountOnEnter,
+		shouldUnmountOnExit,
+		timeout,
+		nodeRef: rootRef,
+		onEnter: (node) => {
+			node.getBoundingClientRect();
+			onEnter?.(node);
+		},
+		onEntering: (node) => {
+			node.style[size] = measure();
+			onEntering?.(node);
+		},
+		onEntered: (node) => {
+			node.style[size] = "";
+			onEntered?.(node);
+		},
+		onExit: (node) => {
+			node.style[size] = measure();
+			node.getBoundingClientRect();
+			onExit?.(node);
+		},
+		onExiting: (node) => {
+			node.style[size] = collapsed;
+			onExiting?.(node);
+		},
+		onExited: (node) => {
+			node.style[size] = "";
+			onExited?.(node);
+		}
+	});
+	if (status === "unmounted") return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapseRoot, {
+		ref: rootRef,
+		status,
+		duration,
+		easing: theme.transitions.easing[easing],
+		orientation,
+		collapsedSize: collapsed,
+		className,
+		"data-testid": dataTestid,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapseWrapper, {
+			ref: wrapperRef,
+			orientation,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapseInner, {
+				orientation,
+				children
+			})
+		})
+	});
+}
+//#endregion
+exports.Collapse = Collapse;

package/dist/Collapse.d.cts

@@ -0,0 +1,2 @@
+import { n as CollapseOrientation, r as CollapseProps, t as Collapse } from "./index-Db4L2hwa.cjs";
+export { Collapse, CollapseOrientation, CollapseProps };

package/dist/Collapse.d.mts

@@ -0,0 +1,2 @@
+import { n as CollapseOrientation, r as CollapseProps, t as Collapse } from "./index-BvgX5eyV.mjs";
+export { Collapse, CollapseOrientation, CollapseProps };

package/dist/Collapse.mjs

@@ -0,0 +1,124 @@
+import { o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-oBfFhJm9.mjs";
+import { t as useTransition } from "./useTransition-DP1k0irI.mjs";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Collapse/Collapse.tsx
+const CollapseRoot = styled("div", {
+	name: "Collapse",
+	label: "Collapse",
+	shouldForwardProp: createShouldForwardProp([
+		"status",
+		"duration",
+		"easing",
+		"orientation",
+		"collapsedSize"
+	])
+})(({ status, duration, easing, orientation, collapsedSize }) => {
+	const size = orientation === "horizontal" ? "width" : "height";
+	return {
+		overflow: "hidden",
+		transition: `${size} ${duration}ms ${easing}`,
+		...orientation === "horizontal" && status !== "exited" && { width: "max-content" },
+		...status === "exited" && {
+			[size]: collapsedSize,
+			...Number.parseFloat(collapsedSize) === 0 && { visibility: "hidden" }
+		}
+	};
+});
+const CollapseWrapper = styled("div", {
+	name: "Collapse",
+	slot: "wrapper",
+	label: "CollapseWrapper",
+	shouldForwardProp: createShouldForwardProp(["orientation"])
+})(({ orientation }) => orientation === "horizontal" ? {
+	display: "flex",
+	height: "100%",
+	width: "max-content"
+} : {
+	display: "flex",
+	width: "100%"
+});
+const CollapseInner = styled("div", {
+	name: "Collapse",
+	slot: "inner",
+	label: "CollapseInner",
+	shouldForwardProp: createShouldForwardProp(["orientation"])
+})(({ orientation }) => orientation === "horizontal" ? { height: "100%" } : { width: "100%" });
+/**
+* @description Opens and closes its content by its height - or, horizontal, its width. The size
+* it moves to is measured from the content, and left to the content once it is open, so content
+* that grows keeps showing. Closed, it keeps `collapsedSize` and is hidden when that is nothing.
+* A user who asked for less motion sees it change at once.
+*/
+function Collapse({ children, isShown = false, shouldAppear: shouldAppearProp, shouldMountOnEnter = false, shouldUnmountOnExit = false, timeout: timeoutProp, easing: easingProp, collapsedSize: collapsedSizeProp, orientation: orientationProp, onEnter, onEntering, onEntered, onExit, onExiting, onExited, className, "data-testid": dataTestid }) {
+	const theme = useTheme();
+	const dp = useDefaultProps("Collapse");
+	const shouldAppear = shouldAppearProp ?? dp.shouldAppear ?? true;
+	const timeout = timeoutProp ?? dp.timeout ?? theme.transitions.duration.standard;
+	const easing = easingProp ?? dp.easing ?? "standard";
+	const collapsedSize = collapsedSizeProp ?? dp.collapsedSize ?? 0;
+	const orientation = orientationProp ?? dp.orientation ?? "vertical";
+	const size = orientation === "horizontal" ? "width" : "height";
+	const collapsed = typeof collapsedSize === "number" ? `${collapsedSize}px` : collapsedSize;
+	const rootRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const measure = () => {
+		const wrapper = wrapperRef.current;
+		return `${orientation === "horizontal" ? wrapper.clientWidth : wrapper.clientHeight}px`;
+	};
+	const { status, duration } = useTransition({
+		isShown,
+		shouldAppear,
+		shouldMountOnEnter,
+		shouldUnmountOnExit,
+		timeout,
+		nodeRef: rootRef,
+		onEnter: (node) => {
+			node.getBoundingClientRect();
+			onEnter?.(node);
+		},
+		onEntering: (node) => {
+			node.style[size] = measure();
+			onEntering?.(node);
+		},
+		onEntered: (node) => {
+			node.style[size] = "";
+			onEntered?.(node);
+		},
+		onExit: (node) => {
+			node.style[size] = measure();
+			node.getBoundingClientRect();
+			onExit?.(node);
+		},
+		onExiting: (node) => {
+			node.style[size] = collapsed;
+			onExiting?.(node);
+		},
+		onExited: (node) => {
+			node.style[size] = "";
+			onExited?.(node);
+		}
+	});
+	if (status === "unmounted") return null;
+	return /* @__PURE__ */ jsx(CollapseRoot, {
+		ref: rootRef,
+		status,
+		duration,
+		easing: theme.transitions.easing[easing],
+		orientation,
+		collapsedSize: collapsed,
+		className,
+		"data-testid": dataTestid,
+		children: /* @__PURE__ */ jsx(CollapseWrapper, {
+			ref: wrapperRef,
+			orientation,
+			children: /* @__PURE__ */ jsx(CollapseInner, {
+				orientation,
+				children
+			})
+		})
+	});
+}
+//#endregion
+export { Collapse };

package/dist/Drawer.d.cts

@@ -1,6 +1,6 @@
-import { Vt as PaperElevation } from "./index-DmJ7yWWi.cjs";
-import { i as ButtonProps } from "./index-XxydXX8l.cjs";
-import "./index-DBteSahY.cjs";
+import { cn as PaperElevation } from "./index-XN4-ZqTB.cjs";
+import { i as ButtonProps } from "./index-BQge4W7L.cjs";
+import "./index-x3WC9ViD.cjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/Drawer.d.mts

@@ -1,6 +1,6 @@
-import { Vt as PaperElevation } from "./index-CVNJEUwJ.mjs";
-import { i as ButtonProps } from "./index-Bxd9NOWb.mjs";
-import "./index-_G1osn09.mjs";
+import { cn as PaperElevation } from "./index-CRQ7XLri.mjs";
+import { i as ButtonProps } from "./index-DK3zgGPe.mjs";
+import "./index-fPRELf0V.mjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/Fab.cjs

@@ -0,0 +1,114 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
+const require_Button = require("./Button.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Fab/Fab.tsx
+const FabRoot = require_src.styled(require_Button.Button, {
+	name: "Fab",
+	label: "Fab",
+	shouldForwardProp: (prop) => prop !== "fabVariant" && prop !== "isCollapsed",
+	systemProps: [require_src.src_exports.space]
+})(({ theme, size, fabVariant, isCollapsed }) => {
+	const side = (0, require_src.src_exports.get)(theme, `avatar.${size}`);
+	const { duration, easing } = theme.transitions;
+	const move = (property) => `${property} ${duration.standard}ms ${easing.standard}`;
+	return {
+		height: side,
+		boxShadow: theme.shadows[6],
+		"&:hover:not(:disabled)": { boxShadow: theme.shadows[8] },
+		"&:active:not(:disabled)": { boxShadow: theme.shadows[6] },
+		transition: [
+			"background-color",
+			"color",
+			"border-color",
+			"opacity",
+			"box-shadow",
+			"padding-left",
+			"padding-right"
+		].map(move).join(", "),
+		"@media (prefers-reduced-motion: reduce)": { transition: "none" },
+		"&::after": {
+			content: "\"\"",
+			position: "absolute",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			width: "100%",
+			height: "100%",
+			minWidth: theme.space[6],
+			minHeight: theme.space[6]
+		},
+		"& > span": { minWidth: 0 },
+		...fabVariant === "circular" ? {
+			width: side,
+			minWidth: side,
+			padding: 0,
+			borderRadius: "50%"
+		} : {
+			minWidth: side,
+			paddingLeft: isCollapsed ? 0 : theme.space[2],
+			paddingRight: isCollapsed ? 0 : theme.space[3],
+			borderRadius: "9999px",
+			maxWidth: "100%"
+		}
+	};
+});
+const FabLabel = require_src.styled("span", {
+	name: "Fab",
+	slot: "label",
+	label: "FabLabel",
+	shouldForwardProp: (prop) => prop !== "isCollapsed"
+})(({ theme, isCollapsed }) => ({
+	display: "grid",
+	gridTemplateColumns: isCollapsed ? "0fr" : "1fr",
+	minWidth: 0,
+	transition: `grid-template-columns ${theme.transitions.duration.standard}ms ${theme.transitions.easing.standard}`,
+	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+}));
+const FabLabelText = require_src.styled("span", {
+	name: "Fab",
+	slot: "labelText",
+	label: "FabLabelText"
+})(({ theme }) => ({
+	display: "block",
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	textIndent: theme.space[1.5],
+	whiteSpace: "nowrap"
+}));
+/**
+* @description A floating action button: the one main action of a page, circular - its icon - or
+* extended, a pill with a label. It is a `Button`, with its focus ring, press state and disabled
+* behavior, raised on a shadow that lifts on hover and moves with `theme.transitions` (and not at
+* all under `prefers-reduced-motion`). Its touch target is at least `theme.space[6]` square however
+* small the fab. An extended fab keeps its label on one line, with the icon a `theme.space[1.5]`
+* before it, and `isCollapsed` draws it as a circle - the label moving out over `theme.transitions`. Margin and padding are `theme.space` keys, as everywhere. Where it floats is the
+* page's: no position is built in. A fab with no text - a circular one - must be named:
+* `aria-label` or `aria-labelledby`.
+*/
+function Fab({ variant: variantProp, color, size, startIcon, isCollapsed = false, children, ...rest }) {
+	const dp = require_theme.useDefaultProps("Fab");
+	const variant = variantProp ?? dp.variant ?? "circular";
+	const isExtended = variant === "extended";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FabRoot, {
+		fabVariant: variant,
+		isCollapsed: isExtended && isCollapsed,
+		variant: "contained",
+		color: color ?? dp.color ?? "primary",
+		size: size ?? dp.size ?? "md",
+		startIcon: isExtended ? startIcon : void 0,
+		gap: isExtended ? 0 : void 0,
+		...rest,
+		children: isExtended ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FabLabel, {
+			isCollapsed,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FabLabelText, {
+				"data-fab-label": "",
+				children
+			})
+		}) : children
+	});
+}
+//#endregion
+exports.Fab = Fab;

package/dist/Fab.d.cts

@@ -0,0 +1,2 @@
+import { n as FabProps, r as FabVariant, t as Fab } from "./index-CERyXFjz.cjs";
+export { Fab, FabProps, FabVariant };

package/dist/Fab.d.mts

@@ -0,0 +1,2 @@
+import { n as FabProps, r as FabVariant, t as Fab } from "./index-CLvlNnjM.mjs";
+export { Fab, FabProps, FabVariant };

package/dist/Fab.mjs

@@ -0,0 +1,113 @@
+import { a as src_exports, o as styled } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps } from "./theme-oBfFhJm9.mjs";
+import { Button } from "./Button.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Fab/Fab.tsx
+const FabRoot = styled(Button, {
+	name: "Fab",
+	label: "Fab",
+	shouldForwardProp: (prop) => prop !== "fabVariant" && prop !== "isCollapsed",
+	systemProps: [src_exports.space]
+})(({ theme, size, fabVariant, isCollapsed }) => {
+	const side = (0, src_exports.get)(theme, `avatar.${size}`);
+	const { duration, easing } = theme.transitions;
+	const move = (property) => `${property} ${duration.standard}ms ${easing.standard}`;
+	return {
+		height: side,
+		boxShadow: theme.shadows[6],
+		"&:hover:not(:disabled)": { boxShadow: theme.shadows[8] },
+		"&:active:not(:disabled)": { boxShadow: theme.shadows[6] },
+		transition: [
+			"background-color",
+			"color",
+			"border-color",
+			"opacity",
+			"box-shadow",
+			"padding-left",
+			"padding-right"
+		].map(move).join(", "),
+		"@media (prefers-reduced-motion: reduce)": { transition: "none" },
+		"&::after": {
+			content: "\"\"",
+			position: "absolute",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			width: "100%",
+			height: "100%",
+			minWidth: theme.space[6],
+			minHeight: theme.space[6]
+		},
+		"& > span": { minWidth: 0 },
+		...fabVariant === "circular" ? {
+			width: side,
+			minWidth: side,
+			padding: 0,
+			borderRadius: "50%"
+		} : {
+			minWidth: side,
+			paddingLeft: isCollapsed ? 0 : theme.space[2],
+			paddingRight: isCollapsed ? 0 : theme.space[3],
+			borderRadius: "9999px",
+			maxWidth: "100%"
+		}
+	};
+});
+const FabLabel = styled("span", {
+	name: "Fab",
+	slot: "label",
+	label: "FabLabel",
+	shouldForwardProp: (prop) => prop !== "isCollapsed"
+})(({ theme, isCollapsed }) => ({
+	display: "grid",
+	gridTemplateColumns: isCollapsed ? "0fr" : "1fr",
+	minWidth: 0,
+	transition: `grid-template-columns ${theme.transitions.duration.standard}ms ${theme.transitions.easing.standard}`,
+	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+}));
+const FabLabelText = styled("span", {
+	name: "Fab",
+	slot: "labelText",
+	label: "FabLabelText"
+})(({ theme }) => ({
+	display: "block",
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	textIndent: theme.space[1.5],
+	whiteSpace: "nowrap"
+}));
+/**
+* @description A floating action button: the one main action of a page, circular - its icon - or
+* extended, a pill with a label. It is a `Button`, with its focus ring, press state and disabled
+* behavior, raised on a shadow that lifts on hover and moves with `theme.transitions` (and not at
+* all under `prefers-reduced-motion`). Its touch target is at least `theme.space[6]` square however
+* small the fab. An extended fab keeps its label on one line, with the icon a `theme.space[1.5]`
+* before it, and `isCollapsed` draws it as a circle - the label moving out over `theme.transitions`. Margin and padding are `theme.space` keys, as everywhere. Where it floats is the
+* page's: no position is built in. A fab with no text - a circular one - must be named:
+* `aria-label` or `aria-labelledby`.
+*/
+function Fab({ variant: variantProp, color, size, startIcon, isCollapsed = false, children, ...rest }) {
+	const dp = useDefaultProps("Fab");
+	const variant = variantProp ?? dp.variant ?? "circular";
+	const isExtended = variant === "extended";
+	return /* @__PURE__ */ jsx(FabRoot, {
+		fabVariant: variant,
+		isCollapsed: isExtended && isCollapsed,
+		variant: "contained",
+		color: color ?? dp.color ?? "primary",
+		size: size ?? dp.size ?? "md",
+		startIcon: isExtended ? startIcon : void 0,
+		gap: isExtended ? 0 : void 0,
+		...rest,
+		children: isExtended ? /* @__PURE__ */ jsx(FabLabel, {
+			isCollapsed,
+			children: /* @__PURE__ */ jsx(FabLabelText, {
+				"data-fab-label": "",
+				children
+			})
+		}) : children
+	});
+}
+//#endregion
+export { Fab };

package/dist/FabMenu/FabMenu.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_FabMenu = require("../FabMenu-RiVtzrKe.cjs");
+exports.FabMenu = require_FabMenu.FabMenu;

package/dist/FabMenu/FabMenu.d.cts

@@ -0,0 +1,53 @@
+import { nt as Theme } from "../index-XN4-ZqTB.cjs";
+import { ReactNode, SyntheticEvent } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+//#region src/FabMenu/FabMenu/FabMenu.d.ts
+type FabMenuDirection = 'up' | 'down' | 'left' | 'right';
+type FabMenuAlign = 'start' | 'end';
+interface FabMenuProps extends SpaceProps<Theme> {
+  /** The `FabMenuItem`s. */
+  children?: ReactNode;
+  /** The trigger's icon while closed. Default: an add icon. */
+  icon?: ReactNode;
+  /** The trigger's icon while open. Default: a close icon. */
+  closeIcon?: ReactNode;
+  /** A label for the trigger, which makes it an extended `Fab`. Without it, it is a circle. */
+  label?: ReactNode;
+  /** Names a trigger with no label - the same open or closed: `aria-expanded` says which. */
+  'aria-label'?: string;
+  /** Whether it is open. Controlled with `onOpen` and `onClose`. */
+  isOpen?: boolean;
+  /** Whether it is open at first, when uncontrolled. Default: `false`. */
+  defaultOpen?: boolean;
+  /** Fired when it asks to open. */
+  onOpen?: (event: SyntheticEvent | Event) => void;
+  /** Fired when it asks to close - on Escape, a press away, or an item chosen. */
+  onClose?: (event: SyntheticEvent | Event) => void;
+  /**
+   * Which way the actions go from the trigger: a column above or below it, or a row beside it.
+   * `'left'` and `'right'` are the page's start and end, so they swap right to left. Default: `'up'`.
+   */
+  direction?: FabMenuDirection;
+  /**
+   * Which edge of the trigger a column of actions lines up with; mirrored right to left. A row of
+   * actions is as tall as the trigger and sits level with it, so this does not apply. Default: `'end'`.
+   */
+  align?: FabMenuAlign;
+  /** Color of the trigger - resolves to `theme.palette`. Default: `'primary'`. */
+  color?: keyof Theme['palette'];
+  /** Size of the trigger, and of the items. Default: `'md'`. */
+  size?: keyof Theme['sizes'];
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `Fab` that opens a stack of actions - extended pills, each a `FabMenuItem` - from
+ * one corner of a page. The trigger is a disclosure button: `aria-expanded` and `aria-controls`,
+ * its icon turning to a close one while open. The actions zoom in over `theme.transitions` and are
+ * out of the tree while closed. Escape, a press away, or choosing an action closes it and, for
+ * Escape and an action, returns the focus to the trigger; the arrow keys, Home and End walk the
+ * actions and the trigger in the order they are drawn. Where it floats is the page's.
+ */
+declare function FabMenu({ children, icon, closeIcon, label, 'aria-label': ariaLabel, isOpen: isOpenProp, defaultOpen, onOpen, onClose, direction: directionProp, align: alignProp, color, size: sizeProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<FabMenuProps>): import("react").JSX.Element;
+//#endregion
+export { FabMenu, FabMenuAlign, FabMenuDirection, FabMenuProps };

package/dist/FabMenu/FabMenu.d.mts

@@ -0,0 +1,53 @@
+import { nt as Theme } from "../index-CRQ7XLri.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { ReactNode, SyntheticEvent } from "react";
+//#region src/FabMenu/FabMenu/FabMenu.d.ts
+type FabMenuDirection = 'up' | 'down' | 'left' | 'right';
+type FabMenuAlign = 'start' | 'end';
+interface FabMenuProps extends SpaceProps<Theme> {
+  /** The `FabMenuItem`s. */
+  children?: ReactNode;
+  /** The trigger's icon while closed. Default: an add icon. */
+  icon?: ReactNode;
+  /** The trigger's icon while open. Default: a close icon. */
+  closeIcon?: ReactNode;
+  /** A label for the trigger, which makes it an extended `Fab`. Without it, it is a circle. */
+  label?: ReactNode;
+  /** Names a trigger with no label - the same open or closed: `aria-expanded` says which. */
+  'aria-label'?: string;
+  /** Whether it is open. Controlled with `onOpen` and `onClose`. */
+  isOpen?: boolean;
+  /** Whether it is open at first, when uncontrolled. Default: `false`. */
+  defaultOpen?: boolean;
+  /** Fired when it asks to open. */
+  onOpen?: (event: SyntheticEvent | Event) => void;
+  /** Fired when it asks to close - on Escape, a press away, or an item chosen. */
+  onClose?: (event: SyntheticEvent | Event) => void;
+  /**
+   * Which way the actions go from the trigger: a column above or below it, or a row beside it.
+   * `'left'` and `'right'` are the page's start and end, so they swap right to left. Default: `'up'`.
+   */
+  direction?: FabMenuDirection;
+  /**
+   * Which edge of the trigger a column of actions lines up with; mirrored right to left. A row of
+   * actions is as tall as the trigger and sits level with it, so this does not apply. Default: `'end'`.
+   */
+  align?: FabMenuAlign;
+  /** Color of the trigger - resolves to `theme.palette`. Default: `'primary'`. */
+  color?: keyof Theme['palette'];
+  /** Size of the trigger, and of the items. Default: `'md'`. */
+  size?: keyof Theme['sizes'];
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `Fab` that opens a stack of actions - extended pills, each a `FabMenuItem` - from
+ * one corner of a page. The trigger is a disclosure button: `aria-expanded` and `aria-controls`,
+ * its icon turning to a close one while open. The actions zoom in over `theme.transitions` and are
+ * out of the tree while closed. Escape, a press away, or choosing an action closes it and, for
+ * Escape and an action, returns the focus to the trigger; the arrow keys, Home and End walk the
+ * actions and the trigger in the order they are drawn. Where it floats is the page's.
+ */
+declare function FabMenu({ children, icon, closeIcon, label, 'aria-label': ariaLabel, isOpen: isOpenProp, defaultOpen, onOpen, onClose, direction: directionProp, align: alignProp, color, size: sizeProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<FabMenuProps>): import("react").JSX.Element;
+//#endregion
+export { FabMenu, FabMenuAlign, FabMenuDirection, FabMenuProps };

package/dist/FabMenu/FabMenu.mjs

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

package/dist/FabMenu/FabMenuItem.cjs

@@ -0,0 +1,28 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Fab = require("../Fab.cjs");
+const require_FabMenuContext = require("../FabMenuContext-BZslb0lL.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/FabMenu/FabMenuItem/FabMenuItem.tsx
+/**
+* @description One action of a `FabMenu`: an extended `Fab` of the menu's size - a pill with an
+* icon and a label. Pressing it runs `onClick` and closes the menu, and focus goes back to the
+* trigger. It takes any `Fab` prop but its shape.
+*/
+function FabMenuItem({ icon, children, color, onClick, ...rest }) {
+	const menu = require_FabMenuContext.useFabMenu("FabMenuItem");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Fab.Fab, {
+		...rest,
+		"data-fab-menu-item": "",
+		variant: "extended",
+		size: menu.size,
+		color: color ?? "secondary",
+		startIcon: icon,
+		onClick: (event) => {
+			onClick?.(event);
+			menu.close(event);
+		},
+		children
+	});
+}
+//#endregion
+exports.FabMenuItem = FabMenuItem;