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

package/dist/{SidebarContext-B1lWrt77.d.cts → SidebarContext-Bod_oUMi.d.cts}

@@ -1,6 +1,11 @@
-//#region src/Sidebar/SidebarContext.d.ts
 /** Screen edge a `Sidebar` hugs - item labels render away from that edge. */
 type SidebarAnchor = 'left' | 'right';
+/**
+ * How a `Sidebar` lays its items out: `inline` (default) is the collapsible icon rail, a label
+ * beside its icon while open; `stacked` is a navigation rail - each label under its icon, always
+ * shown, in a rail of a fixed width.
+ */
+type SidebarLayout = 'inline' | 'stacked';
 /**
  * Visual style of a `SidebarItem`: borderless (`text`, default), `outlined`, or
  * `plain` - no fill and no hover or press feedback, so selection reads through
@@ -10,13 +15,16 @@ type SidebarItemVariant = 'outlined' | 'text' | 'plain';
 /**
  * State provided by `Sidebar` and consumed by `SidebarItem`: whether labels
  * are shown, which side the rail hugs (decides the label side), the rail-wide
- * default item variant (an item's own `variant` wins), and whether the rail
- * renders a panel column - which decides where an item's `children` go.
+ * default item variant (an item's own `variant` wins), how the items are laid
+ * out, and whether the rail renders a panel column - which decides where an
+ * item's `children` go.
  */
 interface SidebarContextValue {
   isOpen: boolean;
   anchor: SidebarAnchor;
   variant: SidebarItemVariant;
+  /** How the items are laid out - an inline row, or an icon with its label under it. */
+  layout: SidebarLayout;
   /** Whether the rail renders a panel column; items port their children into it. */
   hasPanel: boolean;
   /** `id` of the panel element, so the selected item can point `aria-controls` at it. */
@@ -33,5 +41,4 @@ interface SidebarContextValue {
   setPanelLabel?: (label: string | null) => void;
 }
 declare const SidebarContext: import("react").Context<SidebarContextValue>;
-//#endregion
-export { SidebarItemVariant as i, SidebarContext as n, SidebarContextValue as r, SidebarAnchor as t };
+export { SidebarLayout as a, SidebarItemVariant as i, SidebarContext as n, SidebarContextValue as r, SidebarAnchor as t };

package/dist/{SidebarContext-B1lWrt77.d.mts → SidebarContext-Bod_oUMi.d.mts}

@@ -1,6 +1,11 @@
-//#region src/Sidebar/SidebarContext.d.ts
 /** Screen edge a `Sidebar` hugs - item labels render away from that edge. */
 type SidebarAnchor = 'left' | 'right';
+/**
+ * How a `Sidebar` lays its items out: `inline` (default) is the collapsible icon rail, a label
+ * beside its icon while open; `stacked` is a navigation rail - each label under its icon, always
+ * shown, in a rail of a fixed width.
+ */
+type SidebarLayout = 'inline' | 'stacked';
 /**
  * Visual style of a `SidebarItem`: borderless (`text`, default), `outlined`, or
  * `plain` - no fill and no hover or press feedback, so selection reads through
@@ -10,13 +15,16 @@ type SidebarItemVariant = 'outlined' | 'text' | 'plain';
 /**
  * State provided by `Sidebar` and consumed by `SidebarItem`: whether labels
  * are shown, which side the rail hugs (decides the label side), the rail-wide
- * default item variant (an item's own `variant` wins), and whether the rail
- * renders a panel column - which decides where an item's `children` go.
+ * default item variant (an item's own `variant` wins), how the items are laid
+ * out, and whether the rail renders a panel column - which decides where an
+ * item's `children` go.
  */
 interface SidebarContextValue {
   isOpen: boolean;
   anchor: SidebarAnchor;
   variant: SidebarItemVariant;
+  /** How the items are laid out - an inline row, or an icon with its label under it. */
+  layout: SidebarLayout;
   /** Whether the rail renders a panel column; items port their children into it. */
   hasPanel: boolean;
   /** `id` of the panel element, so the selected item can point `aria-controls` at it. */
@@ -33,5 +41,4 @@ interface SidebarContextValue {
   setPanelLabel?: (label: string | null) => void;
 }
 declare const SidebarContext: import("react").Context<SidebarContextValue>;
-//#endregion
-export { SidebarItemVariant as i, SidebarContext as n, SidebarContextValue as r, SidebarAnchor as t };
+export { SidebarLayout as a, SidebarItemVariant as i, SidebarContext as n, SidebarContextValue as r, SidebarAnchor as t };

package/dist/{SidebarContext-DgSLwjur.mjs → SidebarContext-D3bF-Q4N.mjs}

@@ -1,10 +1,10 @@
 import { createContext } from "react";
-//#region src/Sidebar/SidebarContext.ts
+// src/Sidebar/SidebarContext.ts
 const SidebarContext = createContext({
 	isOpen: false,
 	anchor: "left",
 	variant: "text",
+	layout: "inline",
 	hasPanel: false
 });
-//#endregion
 export { SidebarContext as t };

package/dist/{SidebarContext-jG6OioC-.cjs → SidebarContext-mXrB4z8v.cjs}

@@ -1,11 +1,11 @@
-//#region src/Sidebar/SidebarContext.ts
+// src/Sidebar/SidebarContext.ts
 const SidebarContext = (0, require("react").createContext)({
 	isOpen: false,
 	anchor: "left",
 	variant: "text",
+	layout: "inline",
 	hasPanel: false
 });
-//#endregion
 Object.defineProperty(exports, "SidebarContext", {
 	enumerable: true,
 	get: function() {

package/dist/Skeleton.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 let _emotion_react = require("@emotion/react");
-//#region src/Skeleton/Skeleton.tsx
+// src/Skeleton/Skeleton.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
 	"variant",
@@ -78,5 +78,4 @@ function Skeleton({ variant = "text", animation = "pulse", width, height, childr
 		children: hasChildren ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenContent, { children }) : null
 	});
 }
-//#endregion
 exports.Skeleton = Skeleton;

package/dist/Skeleton.d.cts

@@ -1,7 +1,6 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
 import { HTMLAttributes } from "react";
 import { PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Skeleton/Skeleton.d.ts
 type SkeletonVariant = 'text' | 'circular' | 'rectangular';
 type SkeletonAnimation = 'pulse' | 'wave' | false;
 type SkeletonRadius = keyof Theme['radii'];
@@ -18,5 +17,4 @@ interface SkeletonProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps
   height?: number | string;
 }
 declare function Skeleton({ variant, animation, width, height, children, ...rest }: Readonly<SkeletonProps>): import("react").JSX.Element;
-//#endregion
 export { Skeleton, SkeletonAnimation, SkeletonProps, SkeletonRadius, SkeletonVariant };

package/dist/Skeleton.d.mts

@@ -1,7 +1,6 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
 import { PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
-//#region src/Skeleton/Skeleton.d.ts
 type SkeletonVariant = 'text' | 'circular' | 'rectangular';
 type SkeletonAnimation = 'pulse' | 'wave' | false;
 type SkeletonRadius = keyof Theme['radii'];
@@ -18,5 +17,4 @@ interface SkeletonProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps
   height?: number | string;
 }
 declare function Skeleton({ variant, animation, width, height, children, ...rest }: Readonly<SkeletonProps>): import("react").JSX.Element;
-//#endregion
 export { Skeleton, SkeletonAnimation, SkeletonProps, SkeletonRadius, SkeletonVariant };

package/dist/Skeleton.mjs

@@ -1,7 +1,7 @@
-import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Skeleton/Skeleton.tsx
+// src/Skeleton/Skeleton.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"variant",
@@ -75,5 +75,4 @@ function Skeleton({ variant = "text", animation = "pulse", width, height, childr
 		children: hasChildren ? /* @__PURE__ */ jsx(HiddenContent, { children }) : null
 	});
 }
-//#endregion
 export { Skeleton };

package/dist/Slide.cjs

@@ -0,0 +1,50 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
+const require_useTransitionChild = require("./useTransitionChild-COlRozbU.cjs");
+let react = require("react");
+// src/Slide/Slide.tsx
+const mirrored = {
+	up: "up",
+	down: "down",
+	left: "right",
+	right: "left"
+};
+const getOffset = (node, direction) => {
+	const rect = node.getBoundingClientRect();
+	const toward = require_isRtl.isRtl(node) ? mirrored[direction] : direction;
+	if (toward === "left") return `translateX(${-(rect.left + rect.width)}px)`;
+	if (toward === "right") return `translateX(${window.innerWidth - rect.left}px)`;
+	if (toward === "up") return `translateY(${-(rect.top + rect.height)}px)`;
+	return `translateY(${window.innerHeight - rect.top}px)`;
+};
+/**
+* @description Slides one child in from an edge of the window and back out. The child holds a
+* `ref` and takes a `style`; out, it is hidden. Its way out is measured as it starts, so it
+* leaves the window from wherever it sits. A user who asked for less motion sees it change at
+* once.
+*/
+function Slide({ direction = "down", ...props }) {
+	const offset = (0, react.useRef)("");
+	const measure = (node) => {
+		const { transform } = node.style;
+		node.style.transform = "none";
+		offset.current = getOffset(node, direction);
+		node.style.transform = transform;
+	};
+	return require_useTransitionChild.useTransitionChild(props, ({ status, duration, easing }) => ({
+		transform: status === "entering" || status === "entered" ? "none" : offset.current || void 0,
+		transition: `transform ${duration}ms ${easing}`,
+		visibility: status === "exited" ? "hidden" : void 0
+	}), {
+		onEnter: (node) => {
+			measure(node);
+			const { transition } = node.style;
+			node.style.transition = "none";
+			node.style.transform = offset.current;
+			node.getBoundingClientRect();
+			node.style.transition = transition;
+		},
+		onExit: measure
+	});
+}
+exports.Slide = Slide;

package/dist/Slide.d.cts

@@ -0,0 +1,15 @@
+import { n as TransitionProps } from "./useTransition-C89K0mS7.cjs";
+/** The edge of the window the child slides in from. */
+type SlideDirection = 'up' | 'down' | 'left' | 'right';
+interface SlideProps extends TransitionProps {
+  /** The edge it slides in from - and out to. Mirrored in right-to-left pages. Default: `'down'`. */
+  direction?: SlideDirection;
+}
+/**
+ * @description Slides one child in from an edge of the window and back out. The child holds a
+ * `ref` and takes a `style`; out, it is hidden. Its way out is measured as it starts, so it
+ * leaves the window from wherever it sits. A user who asked for less motion sees it change at
+ * once.
+ */
+declare function Slide({ direction, ...props }: Readonly<SlideProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export { Slide, SlideDirection, SlideProps };

package/dist/Slide.d.mts

@@ -0,0 +1,15 @@
+import { n as TransitionProps } from "./useTransition-3EoagwIe.mjs";
+/** The edge of the window the child slides in from. */
+type SlideDirection = 'up' | 'down' | 'left' | 'right';
+interface SlideProps extends TransitionProps {
+  /** The edge it slides in from - and out to. Mirrored in right-to-left pages. Default: `'down'`. */
+  direction?: SlideDirection;
+}
+/**
+ * @description Slides one child in from an edge of the window and back out. The child holds a
+ * `ref` and takes a `style`; out, it is hidden. Its way out is measured as it starts, so it
+ * leaves the window from wherever it sits. A user who asked for less motion sees it change at
+ * once.
+ */
+declare function Slide({ direction, ...props }: Readonly<SlideProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export { Slide, SlideDirection, SlideProps };

package/dist/Slide.mjs

@@ -0,0 +1,49 @@
+import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
+import { t as useTransitionChild } from "./useTransitionChild-CFhlMm65.mjs";
+import { useRef } from "react";
+// src/Slide/Slide.tsx
+const mirrored = {
+	up: "up",
+	down: "down",
+	left: "right",
+	right: "left"
+};
+const getOffset = (node, direction) => {
+	const rect = node.getBoundingClientRect();
+	const toward = isRtl(node) ? mirrored[direction] : direction;
+	if (toward === "left") return `translateX(${-(rect.left + rect.width)}px)`;
+	if (toward === "right") return `translateX(${window.innerWidth - rect.left}px)`;
+	if (toward === "up") return `translateY(${-(rect.top + rect.height)}px)`;
+	return `translateY(${window.innerHeight - rect.top}px)`;
+};
+/**
+* @description Slides one child in from an edge of the window and back out. The child holds a
+* `ref` and takes a `style`; out, it is hidden. Its way out is measured as it starts, so it
+* leaves the window from wherever it sits. A user who asked for less motion sees it change at
+* once.
+*/
+function Slide({ direction = "down", ...props }) {
+	const offset = useRef("");
+	const measure = (node) => {
+		const { transform } = node.style;
+		node.style.transform = "none";
+		offset.current = getOffset(node, direction);
+		node.style.transform = transform;
+	};
+	return useTransitionChild(props, ({ status, duration, easing }) => ({
+		transform: status === "entering" || status === "entered" ? "none" : offset.current || void 0,
+		transition: `transform ${duration}ms ${easing}`,
+		visibility: status === "exited" ? "hidden" : void 0
+	}), {
+		onEnter: (node) => {
+			measure(node);
+			const { transition } = node.style;
+			node.style.transition = "none";
+			node.style.transform = offset.current;
+			node.getBoundingClientRect();
+			node.style.transition = transition;
+		},
+		onExit: measure
+	});
+}
+export { Slide };

package/dist/Snackbar.cjs

@@ -0,0 +1,203 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_getSurfaceRadius = require("./getSurfaceRadius-DwOn3ALC.cjs");
+const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
+const require_getShapeRadius = require("./getShapeRadius-C2xXOKCl.cjs");
+const require_Portal = require("./Portal.cjs");
+const require_Grow = require("./Grow.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/Snackbar/hooks/useAutoHide.ts
+/**
+* The clock of a message that hides itself: it runs while the message is open, stops while the
+* pointer or the focus is on it, and starts again - for `resumeDuration` - once they leave.
+*/
+function useAutoHide({ isOpen, duration, resumeDuration, onHide }) {
+	const timer = (0, react.useRef)(void 0);
+	const hide = (0, react.useRef)(onHide);
+	(0, react.useEffect)(() => {
+		hide.current = onHide;
+	});
+	const stop = (0, react.useCallback)(() => window.clearTimeout(timer.current), []);
+	const start = (0, react.useCallback)((ms) => {
+		stop();
+		if (ms !== void 0) timer.current = window.setTimeout(() => hide.current(), ms);
+	}, [stop]);
+	(0, react.useEffect)(() => {
+		if (!isOpen) return void 0;
+		start(duration);
+		return stop;
+	}, [
+		isOpen,
+		duration,
+		start,
+		stop
+	]);
+	return {
+		pause: stop,
+		resume: (0, react.useCallback)(() => {
+			if (!isOpen || duration === void 0) return;
+			start(resumeDuration ?? duration / 2);
+		}, [
+			isOpen,
+			duration,
+			resumeDuration,
+			start
+		])
+	};
+}
+// src/Snackbar/Snackbar.tsx
+const DEFAULT_ANCHOR = {
+	vertical: "bottom",
+	horizontal: "start"
+};
+const SnackbarRoot = require_src.styled("div", {
+	name: "Snackbar",
+	label: "Snackbar",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["anchorOrigin", "layer"])
+})(({ theme, anchorOrigin, layer }) => {
+	const { vertical, horizontal } = anchorOrigin;
+	return {
+		position: "fixed",
+		zIndex: theme.zOrder[layer],
+		display: "flex",
+		pointerEvents: "none",
+		[vertical]: theme.space[3],
+		...horizontal === "center" ? {
+			left: 0,
+			right: 0,
+			justifyContent: "center"
+		} : { [horizontal === "start" ? "insetInlineStart" : "insetInlineEnd"]: theme.space[3] }
+	};
+});
+const SnackbarContent = require_src.styled("div", {
+	name: "Snackbar",
+	slot: "content",
+	label: "SnackbarContent",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"shape",
+		"borderRadius",
+		"bg",
+		"textColor"
+	])
+})(({ theme, shape, borderRadius, bg, textColor }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.space[2],
+	boxSizing: "border-box",
+	minWidth: "18rem",
+	maxWidth: `calc(100vw - ${theme.space[3]} - ${theme.space[3]})`,
+	padding: `${theme.space[1]} ${theme.space[2]}`,
+	pointerEvents: "auto",
+	borderRadius: require_getShapeRadius.getShapeRadius(shape, require_getSurfaceRadius.getSurfaceRadius(theme, borderRadius)),
+	boxShadow: theme.shadows[6],
+	backgroundColor: (0, require_src.src_exports.get)(theme, `background.${bg ?? "modal"}`),
+	color: (0, require_src.src_exports.get)(theme, `text.${textColor ?? require_themeDefault.themeDefault(theme, "textColor", "initial")}`),
+	fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
+	fontSize: theme.fontSizes[1],
+	lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base")
+}));
+const SnackbarMessage = require_src.styled("div", {
+	name: "Snackbar",
+	slot: "message",
+	label: "SnackbarMessage"
+})(({ theme }) => ({
+	flex: 1,
+	minWidth: 0,
+	padding: `${theme.space[1]} 0`
+}));
+const SnackbarAction = require_src.styled("div", {
+	name: "Snackbar",
+	slot: "action",
+	label: "SnackbarAction"
+})(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	flexShrink: 0,
+	gap: theme.space[1],
+	marginInlineStart: "auto"
+}));
+/**
+* @description A transient message in a corner of the window, through a `Portal`. It hides itself
+* after `autoHideDuration` - the clock stops while the pointer or the focus is on it - and asks to
+* close on Escape and on a click away, `onClose` told why. It is a `role="status"`, announced
+* politely, and never takes the focus. Several at once do not stack: the app queues them.
+*/
+function Snackbar({ isOpen: isOpenProp, defaultOpen = false, onClose, autoHideDuration: autoHideDurationProp, resumeHideDuration: resumeHideDurationProp, message, action, children, anchorOrigin: anchorOriginProp, transition: Transition = require_Grow.Grow, layer: layerProp, shape: shapeProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, container, className, "data-testid": dataTestid }) {
+	const dp = require_theme.useDefaultProps("Snackbar");
+	const autoHideDuration = autoHideDurationProp ?? dp.autoHideDuration;
+	const resumeHideDuration = resumeHideDurationProp ?? dp.resumeHideDuration;
+	const anchorOrigin = anchorOriginProp ?? dp.anchorOrigin ?? DEFAULT_ANCHOR;
+	const layer = layerProp ?? dp.layer ?? "snackbar";
+	const shape = shapeProp ?? dp.shape ?? "rounded";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const bg = bgProp ?? dp.bg;
+	const textColor = textColorProp ?? dp.textColor;
+	const [isOpen, setIsOpen] = require_useControlled.useControlled({
+		controlled: isOpenProp,
+		default: defaultOpen
+	});
+	const [isMounted, setIsMounted] = (0, react.useState)(isOpen);
+	if (isOpen && !isMounted) setIsMounted(true);
+	const close = (event, reason) => {
+		onClose?.(event, reason);
+		if (isOpenProp === void 0 && reason !== "clickaway") setIsOpen(false);
+	};
+	const latestClose = (0, react.useRef)(close);
+	(0, react.useEffect)(() => {
+		latestClose.current = close;
+	});
+	const { pause, resume } = useAutoHide({
+		isOpen,
+		duration: autoHideDuration,
+		resumeDuration: resumeHideDuration,
+		onHide: () => latestClose.current(new Event("timeout"), "timeout")
+	});
+	const contentRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (!isOpen) return void 0;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") latestClose.current(event, "escapeKeyDown");
+		};
+		const handlePointerDown = (event) => {
+			if (!contentRef.current?.contains(event.target)) latestClose.current(event, "clickaway");
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			document.removeEventListener("pointerdown", handlePointerDown);
+		};
+	}, [isOpen]);
+	if (!isMounted) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Portal.Portal, {
+		container,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarRoot, {
+			anchorOrigin,
+			layer,
+			className,
+			"data-testid": dataTestid,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Transition, {
+				isShown: isOpen,
+				onExited: () => setIsMounted(false),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarContent, {
+					ref: contentRef,
+					role: "status",
+					shape,
+					borderRadius,
+					bg,
+					textColor,
+					onMouseEnter: pause,
+					onMouseLeave: resume,
+					onFocus: pause,
+					onBlur: resume,
+					children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarMessage, { children: message }), action ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarAction, { children: action }) : null] })
+				})
+			})
+		})
+	});
+}
+exports.Snackbar = Snackbar;

package/dist/Snackbar.d.cts

@@ -0,0 +1,60 @@
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { n as TransitionProps } from "./useTransition-C89K0mS7.cjs";
+import { t as Shape } from "./getShapeRadius-CdCQb8OT.cjs";
+import { n as PortalProps } from "./index-UloRwym_.cjs";
+import { ComponentType, ReactNode, SyntheticEvent } from "react";
+/** Why a snackbar asks to close. */
+type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
+interface SnackbarAnchorOrigin {
+  vertical: 'top' | 'bottom';
+  /** `'start'` and `'end'` are the left and the right, and swap right to left. */
+  horizontal: 'start' | 'center' | 'end';
+}
+type SnackbarShape = Shape;
+interface SnackbarProps {
+  /**
+   * Corner shape: `'square'` is 0, `'pill'` a full round, `'rounded'` the radius of `borderRadius`.
+   * Default: `'rounded'`.
+   */
+  shape?: SnackbarShape;
+  /** The radius of a `'rounded'` snackbar, resolves against `theme.radii`. Default: `theme.defaults.surfaceRadius`, else square. Other shapes ignore it. */
+  borderRadius?: keyof Theme['radii'];
+  /** Background, resolves against `theme.background`. Default: `'modal'`. */
+  bg?: keyof Theme['background'];
+  /** Text color, resolves against `theme.text`. Default: `theme.defaults.textColor`, else `'initial'`. */
+  textColor?: keyof Theme['text'];
+  /** Whether it is shown. Controlled with `onClose`. */
+  isOpen?: boolean;
+  /** Whether it is shown at first, when uncontrolled. Default: `false`. */
+  defaultOpen?: boolean;
+  /** Fired when it asks to close, with why. Uncontrolled, it closes itself - but not on a click away. */
+  onClose?: (event: Event | SyntheticEvent, reason: SnackbarCloseReason) => void;
+  /** How long it stays, in milliseconds. Without it, it stays until it is closed. */
+  autoHideDuration?: number;
+  /** How long it stays once the pointer or focus has left it. Default: half of `autoHideDuration`. */
+  resumeHideDuration?: number;
+  /** The message. */
+  message?: ReactNode;
+  /** What sits after the message - a button. */
+  action?: ReactNode;
+  /** What it holds in place of the message and the action - an `Alert`. */
+  children?: ReactNode;
+  /** Which corner of the window it sits in. Default: `{ vertical: 'bottom', horizontal: 'start' }`. */
+  anchorOrigin?: SnackbarAnchorOrigin;
+  /** The transition that shows and hides it. Default: `Grow`. */
+  transition?: ComponentType<TransitionProps>;
+  /** Stacking layer from `theme.zOrder`. Default: `'snackbar'`. */
+  layer?: keyof Theme['zOrder'];
+  /** Portal target. Default: `document.body`. */
+  container?: Exclude<PortalProps['container'], undefined>;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A transient message in a corner of the window, through a `Portal`. It hides itself
+ * after `autoHideDuration` - the clock stops while the pointer or the focus is on it - and asks to
+ * close on Escape and on a click away, `onClose` told why. It is a `role="status"`, announced
+ * politely, and never takes the focus. Several at once do not stack: the app queues them.
+ */
+declare function Snackbar({ isOpen: isOpenProp, defaultOpen, onClose, autoHideDuration: autoHideDurationProp, resumeHideDuration: resumeHideDurationProp, message, action, children, anchorOrigin: anchorOriginProp, transition: Transition, layer: layerProp, shape: shapeProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, container, className, 'data-testid': dataTestid }: Readonly<SnackbarProps>): import("react").JSX.Element | null;
+export { Snackbar, SnackbarAnchorOrigin, SnackbarCloseReason, SnackbarProps, SnackbarShape };

package/dist/Snackbar.d.mts

@@ -0,0 +1,60 @@
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { n as TransitionProps } from "./useTransition-3EoagwIe.mjs";
+import { t as Shape } from "./getShapeRadius-CdCQb8OT.mjs";
+import { n as PortalProps } from "./index-UloRwym_.mjs";
+import { ComponentType, ReactNode, SyntheticEvent } from "react";
+/** Why a snackbar asks to close. */
+type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
+interface SnackbarAnchorOrigin {
+  vertical: 'top' | 'bottom';
+  /** `'start'` and `'end'` are the left and the right, and swap right to left. */
+  horizontal: 'start' | 'center' | 'end';
+}
+type SnackbarShape = Shape;
+interface SnackbarProps {
+  /**
+   * Corner shape: `'square'` is 0, `'pill'` a full round, `'rounded'` the radius of `borderRadius`.
+   * Default: `'rounded'`.
+   */
+  shape?: SnackbarShape;
+  /** The radius of a `'rounded'` snackbar, resolves against `theme.radii`. Default: `theme.defaults.surfaceRadius`, else square. Other shapes ignore it. */
+  borderRadius?: keyof Theme['radii'];
+  /** Background, resolves against `theme.background`. Default: `'modal'`. */
+  bg?: keyof Theme['background'];
+  /** Text color, resolves against `theme.text`. Default: `theme.defaults.textColor`, else `'initial'`. */
+  textColor?: keyof Theme['text'];
+  /** Whether it is shown. Controlled with `onClose`. */
+  isOpen?: boolean;
+  /** Whether it is shown at first, when uncontrolled. Default: `false`. */
+  defaultOpen?: boolean;
+  /** Fired when it asks to close, with why. Uncontrolled, it closes itself - but not on a click away. */
+  onClose?: (event: Event | SyntheticEvent, reason: SnackbarCloseReason) => void;
+  /** How long it stays, in milliseconds. Without it, it stays until it is closed. */
+  autoHideDuration?: number;
+  /** How long it stays once the pointer or focus has left it. Default: half of `autoHideDuration`. */
+  resumeHideDuration?: number;
+  /** The message. */
+  message?: ReactNode;
+  /** What sits after the message - a button. */
+  action?: ReactNode;
+  /** What it holds in place of the message and the action - an `Alert`. */
+  children?: ReactNode;
+  /** Which corner of the window it sits in. Default: `{ vertical: 'bottom', horizontal: 'start' }`. */
+  anchorOrigin?: SnackbarAnchorOrigin;
+  /** The transition that shows and hides it. Default: `Grow`. */
+  transition?: ComponentType<TransitionProps>;
+  /** Stacking layer from `theme.zOrder`. Default: `'snackbar'`. */
+  layer?: keyof Theme['zOrder'];
+  /** Portal target. Default: `document.body`. */
+  container?: Exclude<PortalProps['container'], undefined>;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A transient message in a corner of the window, through a `Portal`. It hides itself
+ * after `autoHideDuration` - the clock stops while the pointer or the focus is on it - and asks to
+ * close on Escape and on a click away, `onClose` told why. It is a `role="status"`, announced
+ * politely, and never takes the focus. Several at once do not stack: the app queues them.
+ */
+declare function Snackbar({ isOpen: isOpenProp, defaultOpen, onClose, autoHideDuration: autoHideDurationProp, resumeHideDuration: resumeHideDurationProp, message, action, children, anchorOrigin: anchorOriginProp, transition: Transition, layer: layerProp, shape: shapeProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, container, className, 'data-testid': dataTestid }: Readonly<SnackbarProps>): import("react").JSX.Element | null;
+export { Snackbar, SnackbarAnchorOrigin, SnackbarCloseReason, SnackbarProps, SnackbarShape };