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

package/dist/Fab.cjs

@@ -0,0 +1,113 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_Button = require("./Button.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// 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
+	});
+}
+exports.Fab = Fab;

package/dist/Fab.d.cts

@@ -0,0 +1,2 @@
+import { n as FabProps, r as FabVariant, t as Fab } from "./index-BuAKhHMs.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-BV5BvdeN.mjs";
+export { Fab, FabProps, FabVariant };

package/dist/Fab.mjs

@@ -0,0 +1,112 @@
+import { a as src_exports, o as styled } from "./src-B-rNjHIL.mjs";
+import { n as useDefaultProps } from "./theme-DyyZQFzQ.mjs";
+import { Button } from "./Button.mjs";
+import { jsx } from "react/jsx-runtime";
+// 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
+	});
+}
+export { Fab };

package/dist/FabMenu/FabMenu.cjs

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

package/dist/FabMenu/FabMenu.d.cts

@@ -0,0 +1,51 @@
+import { nt as Theme } from "../index-Lsm4v8fB.cjs";
+import { ReactNode, SyntheticEvent } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+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;
+export { FabMenu, FabMenuAlign, FabMenuDirection, FabMenuProps };

package/dist/FabMenu/FabMenu.d.mts

@@ -0,0 +1,51 @@
+import { nt as Theme } from "../index-CR8qkP8U.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { ReactNode, SyntheticEvent } from "react";
+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;
+export { FabMenu, FabMenuAlign, FabMenuDirection, FabMenuProps };

package/dist/FabMenu/FabMenu.mjs

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

package/dist/FabMenu/FabMenuItem.cjs

@@ -0,0 +1,27 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Fab = require("../Fab.cjs");
+const require_FabMenuContext = require("../FabMenuContext-C86bOvTe.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// 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
+	});
+}
+exports.FabMenuItem = FabMenuItem;

package/dist/FabMenu/FabMenuItem.d.cts

@@ -0,0 +1,17 @@
+import { n as FabProps } from "../index-BuAKhHMs.cjs";
+import { MouseEvent, ReactNode } from "react";
+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;
+export { FabMenuItem, FabMenuItemProps };

package/dist/FabMenu/FabMenuItem.d.mts

@@ -0,0 +1,17 @@
+import { n as FabProps } from "../index-BV5BvdeN.mjs";
+import { MouseEvent, ReactNode } from "react";
+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;
+export { FabMenuItem, FabMenuItemProps };

package/dist/FabMenu/FabMenuItem.mjs

@@ -0,0 +1,26 @@
+import { Fab } from "../Fab.mjs";
+import { n as useFabMenu } from "../FabMenuContext-CiCWgAmf.mjs";
+import { jsx } from "react/jsx-runtime";
+// 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
+	});
+}
+export { FabMenuItem };