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

package/dist/FabMenu/FabMenuItem.d.cts

@@ -0,0 +1,19 @@
+import { n as FabProps } from "../index-CERyXFjz.cjs";
+import { MouseEvent, ReactNode } from "react";
+//#region src/FabMenu/FabMenuItem/FabMenuItem.d.ts
+interface FabMenuItemProps extends Omit<FabProps, 'variant' | 'size' | 'isCollapsed' | 'startIcon' | 'children'> {
+  /** An icon before the label. */
+  icon?: ReactNode;
+  /** What the item says, and does: its name. */
+  children: ReactNode;
+  /** Fired when it is pressed - the menu closes after it. */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * @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.
+ */
+declare function FabMenuItem({ icon, children, color, onClick, ...rest }: Readonly<FabMenuItemProps>): import("react").JSX.Element;
+//#endregion
+export { FabMenuItem, FabMenuItemProps };

package/dist/FabMenu/FabMenuItem.d.mts

@@ -0,0 +1,19 @@
+import { n as FabProps } from "../index-CLvlNnjM.mjs";
+import { MouseEvent, ReactNode } from "react";
+//#region src/FabMenu/FabMenuItem/FabMenuItem.d.ts
+interface FabMenuItemProps extends Omit<FabProps, 'variant' | 'size' | 'isCollapsed' | 'startIcon' | 'children'> {
+  /** An icon before the label. */
+  icon?: ReactNode;
+  /** What the item says, and does: its name. */
+  children: ReactNode;
+  /** Fired when it is pressed - the menu closes after it. */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * @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.
+ */
+declare function FabMenuItem({ icon, children, color, onClick, ...rest }: Readonly<FabMenuItemProps>): import("react").JSX.Element;
+//#endregion
+export { FabMenuItem, FabMenuItemProps };

package/dist/FabMenu/FabMenuItem.mjs

@@ -0,0 +1,27 @@
+import { Fab } from "../Fab.mjs";
+import { n as useFabMenu } from "../FabMenuContext-D-XlDbLl.mjs";
+import { jsx } from "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 = useFabMenu("FabMenuItem");
+	return /* @__PURE__ */ jsx(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
+export { FabMenuItem };

package/dist/FabMenu-BDfkT_zt.mjs

@@ -0,0 +1,273 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-oBfFhJm9.mjs";
+import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
+import { t as Icon } from "./Icon-0hPpk-WZ.mjs";
+import { t as isRtl } from "./isRtl-BJDtm86G.mjs";
+import { Fab } from "./Fab.mjs";
+import { Zoom } from "./Zoom.mjs";
+import { t as FabMenuContext } from "./FabMenuContext-D-XlDbLl.mjs";
+import { Children, Fragment, cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FabMenu/hooks/useFabMenuLayout.ts
+const px = (length) => Number.parseFloat(String(length));
+const isSame = (first, second) => first.direction === second.direction && first.maxWidth === second.maxWidth && first.maxHeight === second.maxHeight;
+/**
+* Measures the actions against the window as the menu opens, and as the window or the page
+* moves under it: a row that is wider than the room beside the trigger becomes a column - above it
+* where there is more room above, else below - and a column is no wider or taller than the room it
+* has, so a long label is cut with an ellipsis and a long column scrolls. Nothing is measured while
+* the menu is closed, and the layout is the one asked for until it opens. The room kept from the
+* window's edge is `theme.space[2]`, the step between the actions `theme.space[1]`.
+*/
+function useFabMenuLayout({ isOpen, direction, align, listRef, triggerRef, itemCount }) {
+	const theme = useTheme();
+	const margin = px(theme.space[2]);
+	const gap = px(theme.space[1]);
+	const [layout, setLayout] = useState({ direction });
+	useLayoutEffect(() => {
+		if (!isOpen) return void 0;
+		const asked = { direction };
+		const settle = (next) => setLayout((current) => isSame(current, next) ? current : next);
+		const measure = () => {
+			const list = listRef.current;
+			const trigger = triggerRef.current;
+			const rect = trigger.getBoundingClientRect();
+			const rtl = isRtl(trigger);
+			const room = {
+				top: rect.top - margin,
+				bottom: window.innerHeight - rect.bottom - margin,
+				left: rect.left - margin,
+				right: window.innerWidth - rect.right - margin
+			};
+			let column = direction;
+			if (direction === "left" || direction === "right") {
+				const items = [...list.querySelectorAll("[data-fab-menu-item]")];
+				if (items.reduce((sum, item) => {
+					const text = item.querySelector("[data-fab-label]");
+					return sum + item.offsetWidth + (text.scrollWidth - text.clientWidth);
+				}, 0) + gap * items.length <= (direction === "left" !== rtl ? room.left : room.right)) return settle(asked);
+				column = room.top >= room.bottom ? "up" : "down";
+			}
+			const height = (column === "up" ? room.top : room.bottom) - gap;
+			const width = align === "end" !== rtl ? rect.right - margin : window.innerWidth - rect.left - margin;
+			return settle({
+				direction: column,
+				maxWidth: Math.max(0, width),
+				maxHeight: list.scrollHeight > height ? Math.max(0, height) : void 0
+			});
+		};
+		measure();
+		window.addEventListener("resize", measure);
+		window.addEventListener("scroll", measure, { passive: true });
+		return () => {
+			window.removeEventListener("resize", measure);
+			window.removeEventListener("scroll", measure);
+		};
+	}, [
+		isOpen,
+		direction,
+		align,
+		itemCount,
+		margin,
+		gap,
+		listRef,
+		triggerRef
+	]);
+	return isOpen ? layout : { direction };
+}
+//#endregion
+//#region src/FabMenu/FabMenu/FabMenu.tsx
+const FabMenuRoot = styled("div", {
+	name: "FabMenu",
+	label: "FabMenu",
+	shouldForwardProp: createShouldForwardProp([...props]),
+	systemProps: [src_exports.space]
+})({
+	position: "relative",
+	display: "inline-flex"
+});
+const FabMenuList = styled("div", {
+	name: "FabMenu",
+	slot: "list",
+	label: "FabMenuList",
+	shouldForwardProp: createShouldForwardProp([
+		"direction",
+		"align",
+		"maxWidth",
+		"maxHeight"
+	])
+})(({ theme, direction, align, maxWidth, maxHeight }) => {
+	const clear = `calc(100% + ${theme.space[1]})`;
+	const base = {
+		position: "absolute",
+		display: "flex",
+		gap: theme.space[1],
+		width: "max-content"
+	};
+	if (direction === "left" || direction === "right") return {
+		...base,
+		flexDirection: "row",
+		top: 0,
+		bottom: 0,
+		alignItems: "center",
+		[direction === "left" ? "insetInlineEnd" : "insetInlineStart"]: clear
+	};
+	return {
+		...base,
+		flexDirection: "column",
+		...maxWidth !== void 0 && { maxWidth },
+		...maxHeight !== void 0 && {
+			maxHeight,
+			overflowY: "auto",
+			overscrollBehavior: "contain",
+			scrollbarWidth: "thin",
+			padding: theme.space[.5]
+		},
+		[direction === "up" ? "bottom" : "top"]: clear,
+		[align === "end" ? "insetInlineEnd" : "insetInlineStart"]: 0,
+		alignItems: align === "end" ? "flex-end" : "flex-start"
+	};
+});
+const getItems = (children) => Children.toArray(children).flatMap((child) => {
+	if (!isValidElement(child)) return [];
+	if (child.type !== Fragment) return [child];
+	return getItems(child.props.children).map((inner) => cloneElement(inner, { key: `${child.key}/${inner.key}` }));
+});
+const ITEMS = "[data-fab-menu-item]:not(:disabled)";
+/**
+* @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.
+*/
+function FabMenu({ children, icon, closeIcon, label, "aria-label": ariaLabel, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, direction: directionProp, align: alignProp, color, size: sizeProp, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = useDefaultProps("FabMenu");
+	const asked = directionProp ?? dp.direction ?? "up";
+	const align = alignProp ?? dp.align ?? "end";
+	const size = sizeProp ?? dp.size ?? "md";
+	const [isOpen, setIsOpen] = useControlled({
+		controlled: isOpenProp,
+		default: defaultOpen
+	});
+	const listId = useId();
+	const rootRef = useRef(null);
+	const listRef = useRef(null);
+	const triggerRef = useRef(null);
+	const open = (event) => {
+		setIsOpen(true);
+		onOpen?.(event);
+	};
+	const close = useCallback((event) => {
+		setIsOpen(false);
+		onClose?.(event);
+		if (event.type === "click" || event.type === "keydown") triggerRef.current.focus();
+	}, [setIsOpen, onClose]);
+	useEffect(() => {
+		if (!isOpen) return void 0;
+		const handlePointerDown = (event) => {
+			if (!rootRef.current?.contains(event.target)) close(event);
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => document.removeEventListener("pointerdown", handlePointerDown);
+	}, [isOpen, close]);
+	const items = getItems(children);
+	const layout = useFabMenuLayout({
+		isOpen,
+		direction: asked,
+		align,
+		listRef,
+		triggerRef,
+		itemCount: items.length
+	});
+	const direction = layout.direction;
+	const isRow = direction === "left" || direction === "right";
+	const isBefore = direction === "up" || direction === "left";
+	const handleKeyDown = (event) => {
+		if (event.key === "Escape" && isOpen) {
+			event.preventDefault();
+			close(event);
+			return;
+		}
+		const [back, forward] = isRow ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+		if (![
+			back,
+			forward,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		if (!isOpen) {
+			if (event.key === back || event.key === forward) {
+				event.preventDefault();
+				open(event);
+			}
+			return;
+		}
+		const found = [...rootRef.current.querySelectorAll(ITEMS)];
+		const drawn = isBefore ? [...found, triggerRef.current] : [triggerRef.current, ...found];
+		const at = drawn.indexOf(document.activeElement);
+		if (at === -1) return;
+		event.preventDefault();
+		const last = drawn.length - 1;
+		const toward = isRow && isRtl(rootRef.current) ? back : forward;
+		const step = event.key === toward ? 1 : -1;
+		drawn[{
+			Home: 0,
+			End: last
+		}[event.key] ?? Math.min(last, Math.max(0, at + step))].focus();
+	};
+	const triggerIcon = isOpen ? closeIcon ?? /* @__PURE__ */ jsx(Icon, {
+		name: "close",
+		color: "inherit"
+	}) : icon ?? /* @__PURE__ */ jsx(Icon, {
+		name: "add",
+		color: "inherit"
+	});
+	const isExtended = label !== void 0;
+	const context = useMemo(() => ({
+		close,
+		size
+	}), [close, size]);
+	const unfolding = isBefore ? [...items].reverse() : items;
+	return /* @__PURE__ */ jsx(FabMenuContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(FabMenuRoot, {
+			ref: rootRef,
+			className,
+			"data-testid": dataTestid,
+			onKeyDown: handleKeyDown,
+			...spaceProps,
+			children: [/* @__PURE__ */ jsx(FabMenuList, {
+				ref: listRef,
+				id: listId,
+				direction,
+				align,
+				maxWidth: layout.maxWidth,
+				maxHeight: layout.maxHeight,
+				children: items.map((item) => /* @__PURE__ */ jsx(Zoom, {
+					isShown: isOpen,
+					shouldAppear: false,
+					timeout: {
+						enter: 225 + 40 * unfolding.indexOf(item),
+						exit: 150
+					},
+					children: item
+				}, item.key))
+			}), /* @__PURE__ */ jsx(Fab, {
+				ref: triggerRef,
+				variant: isExtended ? "extended" : "circular",
+				color: color ?? dp.color ?? "primary",
+				size,
+				startIcon: isExtended ? triggerIcon : void 0,
+				"aria-label": isExtended ? void 0 : ariaLabel,
+				"aria-expanded": isOpen,
+				"aria-controls": isOpen ? listId : void 0,
+				onClick: (event) => isOpen ? close(event) : open(event),
+				children: isExtended ? label : triggerIcon
+			})]
+		})
+	});
+}
+//#endregion
+export { FabMenu as t };

package/dist/FabMenu-RiVtzrKe.cjs

@@ -0,0 +1,279 @@
+const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
+const require_useControlled = require("./useControlled-C666KpQ0.cjs");
+const require_Icon = require("./Icon-BE7bRsqR.cjs");
+const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
+const require_Fab = require("./Fab.cjs");
+const require_Zoom = require("./Zoom.cjs");
+const require_FabMenuContext = require("./FabMenuContext-BZslb0lL.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/FabMenu/hooks/useFabMenuLayout.ts
+const px = (length) => Number.parseFloat(String(length));
+const isSame = (first, second) => first.direction === second.direction && first.maxWidth === second.maxWidth && first.maxHeight === second.maxHeight;
+/**
+* Measures the actions against the window as the menu opens, and as the window or the page
+* moves under it: a row that is wider than the room beside the trigger becomes a column - above it
+* where there is more room above, else below - and a column is no wider or taller than the room it
+* has, so a long label is cut with an ellipsis and a long column scrolls. Nothing is measured while
+* the menu is closed, and the layout is the one asked for until it opens. The room kept from the
+* window's edge is `theme.space[2]`, the step between the actions `theme.space[1]`.
+*/
+function useFabMenuLayout({ isOpen, direction, align, listRef, triggerRef, itemCount }) {
+	const theme = require_theme.useTheme();
+	const margin = px(theme.space[2]);
+	const gap = px(theme.space[1]);
+	const [layout, setLayout] = (0, react.useState)({ direction });
+	(0, react.useLayoutEffect)(() => {
+		if (!isOpen) return void 0;
+		const asked = { direction };
+		const settle = (next) => setLayout((current) => isSame(current, next) ? current : next);
+		const measure = () => {
+			const list = listRef.current;
+			const trigger = triggerRef.current;
+			const rect = trigger.getBoundingClientRect();
+			const rtl = require_isRtl.isRtl(trigger);
+			const room = {
+				top: rect.top - margin,
+				bottom: window.innerHeight - rect.bottom - margin,
+				left: rect.left - margin,
+				right: window.innerWidth - rect.right - margin
+			};
+			let column = direction;
+			if (direction === "left" || direction === "right") {
+				const items = [...list.querySelectorAll("[data-fab-menu-item]")];
+				if (items.reduce((sum, item) => {
+					const text = item.querySelector("[data-fab-label]");
+					return sum + item.offsetWidth + (text.scrollWidth - text.clientWidth);
+				}, 0) + gap * items.length <= (direction === "left" !== rtl ? room.left : room.right)) return settle(asked);
+				column = room.top >= room.bottom ? "up" : "down";
+			}
+			const height = (column === "up" ? room.top : room.bottom) - gap;
+			const width = align === "end" !== rtl ? rect.right - margin : window.innerWidth - rect.left - margin;
+			return settle({
+				direction: column,
+				maxWidth: Math.max(0, width),
+				maxHeight: list.scrollHeight > height ? Math.max(0, height) : void 0
+			});
+		};
+		measure();
+		window.addEventListener("resize", measure);
+		window.addEventListener("scroll", measure, { passive: true });
+		return () => {
+			window.removeEventListener("resize", measure);
+			window.removeEventListener("scroll", measure);
+		};
+	}, [
+		isOpen,
+		direction,
+		align,
+		itemCount,
+		margin,
+		gap,
+		listRef,
+		triggerRef
+	]);
+	return isOpen ? layout : { direction };
+}
+//#endregion
+//#region src/FabMenu/FabMenu/FabMenu.tsx
+const FabMenuRoot = require_src.styled("div", {
+	name: "FabMenu",
+	label: "FabMenu",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]),
+	systemProps: [require_src.src_exports.space]
+})({
+	position: "relative",
+	display: "inline-flex"
+});
+const FabMenuList = require_src.styled("div", {
+	name: "FabMenu",
+	slot: "list",
+	label: "FabMenuList",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"direction",
+		"align",
+		"maxWidth",
+		"maxHeight"
+	])
+})(({ theme, direction, align, maxWidth, maxHeight }) => {
+	const clear = `calc(100% + ${theme.space[1]})`;
+	const base = {
+		position: "absolute",
+		display: "flex",
+		gap: theme.space[1],
+		width: "max-content"
+	};
+	if (direction === "left" || direction === "right") return {
+		...base,
+		flexDirection: "row",
+		top: 0,
+		bottom: 0,
+		alignItems: "center",
+		[direction === "left" ? "insetInlineEnd" : "insetInlineStart"]: clear
+	};
+	return {
+		...base,
+		flexDirection: "column",
+		...maxWidth !== void 0 && { maxWidth },
+		...maxHeight !== void 0 && {
+			maxHeight,
+			overflowY: "auto",
+			overscrollBehavior: "contain",
+			scrollbarWidth: "thin",
+			padding: theme.space[.5]
+		},
+		[direction === "up" ? "bottom" : "top"]: clear,
+		[align === "end" ? "insetInlineEnd" : "insetInlineStart"]: 0,
+		alignItems: align === "end" ? "flex-end" : "flex-start"
+	};
+});
+const getItems = (children) => react.Children.toArray(children).flatMap((child) => {
+	if (!(0, react.isValidElement)(child)) return [];
+	if (child.type !== react.Fragment) return [child];
+	return getItems(child.props.children).map((inner) => (0, react.cloneElement)(inner, { key: `${child.key}/${inner.key}` }));
+});
+const ITEMS = "[data-fab-menu-item]:not(:disabled)";
+/**
+* @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.
+*/
+function FabMenu({ children, icon, closeIcon, label, "aria-label": ariaLabel, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, direction: directionProp, align: alignProp, color, size: sizeProp, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = require_theme.useDefaultProps("FabMenu");
+	const asked = directionProp ?? dp.direction ?? "up";
+	const align = alignProp ?? dp.align ?? "end";
+	const size = sizeProp ?? dp.size ?? "md";
+	const [isOpen, setIsOpen] = require_useControlled.useControlled({
+		controlled: isOpenProp,
+		default: defaultOpen
+	});
+	const listId = (0, react.useId)();
+	const rootRef = (0, react.useRef)(null);
+	const listRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const open = (event) => {
+		setIsOpen(true);
+		onOpen?.(event);
+	};
+	const close = (0, react.useCallback)((event) => {
+		setIsOpen(false);
+		onClose?.(event);
+		if (event.type === "click" || event.type === "keydown") triggerRef.current.focus();
+	}, [setIsOpen, onClose]);
+	(0, react.useEffect)(() => {
+		if (!isOpen) return void 0;
+		const handlePointerDown = (event) => {
+			if (!rootRef.current?.contains(event.target)) close(event);
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => document.removeEventListener("pointerdown", handlePointerDown);
+	}, [isOpen, close]);
+	const items = getItems(children);
+	const layout = useFabMenuLayout({
+		isOpen,
+		direction: asked,
+		align,
+		listRef,
+		triggerRef,
+		itemCount: items.length
+	});
+	const direction = layout.direction;
+	const isRow = direction === "left" || direction === "right";
+	const isBefore = direction === "up" || direction === "left";
+	const handleKeyDown = (event) => {
+		if (event.key === "Escape" && isOpen) {
+			event.preventDefault();
+			close(event);
+			return;
+		}
+		const [back, forward] = isRow ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+		if (![
+			back,
+			forward,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		if (!isOpen) {
+			if (event.key === back || event.key === forward) {
+				event.preventDefault();
+				open(event);
+			}
+			return;
+		}
+		const found = [...rootRef.current.querySelectorAll(ITEMS)];
+		const drawn = isBefore ? [...found, triggerRef.current] : [triggerRef.current, ...found];
+		const at = drawn.indexOf(document.activeElement);
+		if (at === -1) return;
+		event.preventDefault();
+		const last = drawn.length - 1;
+		const toward = isRow && require_isRtl.isRtl(rootRef.current) ? back : forward;
+		const step = event.key === toward ? 1 : -1;
+		drawn[{
+			Home: 0,
+			End: last
+		}[event.key] ?? Math.min(last, Math.max(0, at + step))].focus();
+	};
+	const triggerIcon = isOpen ? closeIcon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+		name: "close",
+		color: "inherit"
+	}) : icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+		name: "add",
+		color: "inherit"
+	});
+	const isExtended = label !== void 0;
+	const context = (0, react.useMemo)(() => ({
+		close,
+		size
+	}), [close, size]);
+	const unfolding = isBefore ? [...items].reverse() : items;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FabMenuContext.FabMenuContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FabMenuRoot, {
+			ref: rootRef,
+			className,
+			"data-testid": dataTestid,
+			onKeyDown: handleKeyDown,
+			...spaceProps,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FabMenuList, {
+				ref: listRef,
+				id: listId,
+				direction,
+				align,
+				maxWidth: layout.maxWidth,
+				maxHeight: layout.maxHeight,
+				children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Zoom.Zoom, {
+					isShown: isOpen,
+					shouldAppear: false,
+					timeout: {
+						enter: 225 + 40 * unfolding.indexOf(item),
+						exit: 150
+					},
+					children: item
+				}, item.key))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Fab.Fab, {
+				ref: triggerRef,
+				variant: isExtended ? "extended" : "circular",
+				color: color ?? dp.color ?? "primary",
+				size,
+				startIcon: isExtended ? triggerIcon : void 0,
+				"aria-label": isExtended ? void 0 : ariaLabel,
+				"aria-expanded": isOpen,
+				"aria-controls": isOpen ? listId : void 0,
+				onClick: (event) => isOpen ? close(event) : open(event),
+				children: isExtended ? label : triggerIcon
+			})]
+		})
+	});
+}
+//#endregion
+Object.defineProperty(exports, "FabMenu", {
+	enumerable: true,
+	get: function() {
+		return FabMenu;
+	}
+});

package/dist/FabMenu.cjs

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

package/dist/FabMenu.d.cts

@@ -0,0 +1,3 @@
+import { FabMenu, FabMenuAlign, FabMenuDirection, FabMenuProps } from "./FabMenu/FabMenu.cjs";
+import { FabMenuItem, FabMenuItemProps } from "./FabMenu/FabMenuItem.cjs";
+export { FabMenu, FabMenuAlign, FabMenuDirection, FabMenuItem, FabMenuItemProps, FabMenuProps };

package/dist/FabMenu.d.mts

@@ -0,0 +1,3 @@
+import { FabMenu, FabMenuAlign, FabMenuDirection, FabMenuProps } from "./FabMenu/FabMenu.mjs";
+import { FabMenuItem, FabMenuItemProps } from "./FabMenu/FabMenuItem.mjs";
+export { FabMenu, FabMenuAlign, FabMenuDirection, FabMenuItem, FabMenuItemProps, FabMenuProps };

package/dist/FabMenu.mjs

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

package/dist/FabMenuContext-BZslb0lL.cjs

@@ -0,0 +1,22 @@
+let react = require("react");
+//#region src/FabMenu/FabMenuContext.ts
+const FabMenuContext = (0, react.createContext)(null);
+/** The menu a part sits in - a part with none is a mistake, so it says so. */
+function useFabMenu(part) {
+	const menu = (0, react.useContext)(FabMenuContext);
+	if (!menu) throw new Error(`A ${part} must be inside a FabMenu.`);
+	return menu;
+}
+//#endregion
+Object.defineProperty(exports, "FabMenuContext", {
+	enumerable: true,
+	get: function() {
+		return FabMenuContext;
+	}
+});
+Object.defineProperty(exports, "useFabMenu", {
+	enumerable: true,
+	get: function() {
+		return useFabMenu;
+	}
+});

package/dist/FabMenuContext-D-XlDbLl.mjs

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+//#region src/FabMenu/FabMenuContext.ts
+const FabMenuContext = createContext(null);
+/** The menu a part sits in - a part with none is a mistake, so it says so. */
+function useFabMenu(part) {
+	const menu = useContext(FabMenuContext);
+	if (!menu) throw new Error(`A ${part} must be inside a FabMenu.`);
+	return menu;
+}
+//#endregion
+export { useFabMenu as n, FabMenuContext as t };