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

package/dist/FabMenu-BqBhZs0S.mjs

@@ -0,0 +1,271 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
+import { t as Icon } from "./Icon-XpXU-SuF.mjs";
+import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
+import { Fab } from "./Fab.mjs";
+import { Zoom } from "./Zoom.mjs";
+import { t as FabMenuContext } from "./FabMenuContext-CiCWgAmf.mjs";
+import { Children, Fragment, cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// 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 };
+}
+// 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
+			})]
+		})
+	});
+}
+export { FabMenu as t };

package/dist/FabMenu-fQGSZCjr.cjs

@@ -0,0 +1,277 @@
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
+const require_Icon = require("./Icon-C5Iz5ekp.cjs");
+const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
+const require_Fab = require("./Fab.cjs");
+const require_Zoom = require("./Zoom.cjs");
+const require_FabMenuContext = require("./FabMenuContext-C86bOvTe.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");
+// 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 };
+}
+// 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
+			})]
+		})
+	});
+}
+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-fQGSZCjr.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-BqBhZs0S.mjs";
+import { FabMenuItem } from "./FabMenu/FabMenuItem.mjs";
+export { FabMenu, FabMenuItem };

package/dist/FabMenuContext-C86bOvTe.cjs

@@ -0,0 +1,21 @@
+let react = require("react");
+// 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;
+}
+Object.defineProperty(exports, "FabMenuContext", {
+	enumerable: true,
+	get: function() {
+		return FabMenuContext;
+	}
+});
+Object.defineProperty(exports, "useFabMenu", {
+	enumerable: true,
+	get: function() {
+		return useFabMenu;
+	}
+});

package/dist/FabMenuContext-CiCWgAmf.mjs

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+// 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;
+}
+export { useFabMenu as n, FabMenuContext as t };

package/dist/Fade.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useTransitionChild = require("./useTransitionChild-COlRozbU.cjs");
+// src/Fade/Fade.tsx
+/**
+* @description Fades one child in and out by its opacity. The child holds a `ref` and takes a
+* `style`; out, it is hidden, so it takes no click or focus. A user who asked for less motion sees
+* it change at once.
+*/
+function Fade(props) {
+	return require_useTransitionChild.useTransitionChild(props, ({ status, duration, easing }) => ({
+		opacity: status === "entering" || status === "entered" ? 1 : 0,
+		transition: `opacity ${duration}ms ${easing}`,
+		visibility: status === "exited" ? "hidden" : void 0
+	}));
+}
+exports.Fade = Fade;

package/dist/Fade.d.cts

@@ -0,0 +1,9 @@
+import { n as TransitionProps } from "./useTransition-C89K0mS7.cjs";
+type FadeProps = TransitionProps;
+/**
+ * @description Fades one child in and out by its opacity. The child holds a `ref` and takes a
+ * `style`; out, it is hidden, so it takes no click or focus. A user who asked for less motion sees
+ * it change at once.
+ */
+declare function Fade(props: Readonly<FadeProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export { Fade, FadeProps };

package/dist/Fade.d.mts

@@ -0,0 +1,9 @@
+import { n as TransitionProps } from "./useTransition-3EoagwIe.mjs";
+type FadeProps = TransitionProps;
+/**
+ * @description Fades one child in and out by its opacity. The child holds a `ref` and takes a
+ * `style`; out, it is hidden, so it takes no click or focus. A user who asked for less motion sees
+ * it change at once.
+ */
+declare function Fade(props: Readonly<FadeProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export { Fade, FadeProps };

package/dist/Fade.mjs

@@ -0,0 +1,15 @@
+import { t as useTransitionChild } from "./useTransitionChild-CFhlMm65.mjs";
+// src/Fade/Fade.tsx
+/**
+* @description Fades one child in and out by its opacity. The child holds a `ref` and takes a
+* `style`; out, it is hidden, so it takes no click or focus. A user who asked for less motion sees
+* it change at once.
+*/
+function Fade(props) {
+	return useTransitionChild(props, ({ status, duration, easing }) => ({
+		opacity: status === "entering" || status === "entered" ? 1 : 0,
+		transition: `opacity ${duration}ms ${easing}`,
+		visibility: status === "exited" ? "hidden" : void 0
+	}));
+}
+export { Fade };

package/dist/Flex.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_View = require("./View.cjs");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Flex/Flex.tsx
+// src/Flex/Flex.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props, "layout"]);
 const Flex = require_src.styled(require_View.View, {
 	name: "Flex",
@@ -13,5 +13,4 @@ const Flex = require_src.styled(require_View.View, {
 	display: "flex",
 	flexDirection: "column"
 });
-//#endregion
 exports.Flex = Flex;

package/dist/Flex.d.cts

@@ -1,2 +1,2 @@
-import { Jt as FlexProps, Yt as GapToken, qt as Flex } from "./index-DJ0f69wh.cjs";
+import { dn as FlexProps, fn as GapToken, un as Flex } from "./index-Lsm4v8fB.cjs";
 export { Flex, FlexProps, GapToken };