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

package/dist/{themeDefault-Cebi08Cv.cjs → themeDefault-DbPHBbNO.cjs}

@@ -1,4 +1,4 @@
-//#region src/theme/utils/themeDefault.ts
+// src/theme/utils/themeDefault.ts
 /**
 * Resolves a component's default token/variant key: the theme's optional
 * `defaults` override wins, otherwise the component's literal `fallback`.
@@ -7,7 +7,6 @@
 * yet overridable per theme or via `ThemeProvider`'s `defaults` prop.
 */
 const themeDefault = (theme, key, fallback) => theme.defaults?.[key] ?? fallback;
-//#endregion
 Object.defineProperty(exports, "themeDefault", {
 	enumerable: true,
 	get: function() {

package/dist/{themes-gd6tcmqS.cjs → themes-C2oyu8gK.cjs}

@@ -1,9 +1,8 @@
 const require_utils = require("./utils.cjs");
 let _soroush_tech_styled_system = require("@soroush.tech/styled-system");
-//#region src/theme/utils/spacing.ts
+// src/theme/utils/spacing.ts
 const spacing = (units) => units === 0 ? "0px" : `${Math.max(1, Math.round(8 * units))}px`;
-//#endregion
-//#region src/theme/breakpoints.ts
+// src/theme/breakpoints.ts
 /**
 * The scale with its helpers attached as non-enumerable methods: the engine, the theme's JSON
 * and a spread see only the sizes, while `theme.breakpoints.up('md')` works. `createTheme`
@@ -22,8 +21,7 @@ const withBreakpointHelpers = (scale) => {
 	});
 	return sizes;
 };
-//#endregion
-//#region src/theme/themes.ts
+// src/theme/themes.ts
 const shadow = {
 	color: "#000000",
 	opacity: .4
@@ -44,7 +42,21 @@ const borderWidths = {
 const zOrder = {
 	appBar: 1100,
 	drawer: 1200,
-	modal: 1300
+	modal: 1300,
+	snackbar: 1400,
+	tooltip: 1500
+};
+const transitions = {
+	duration: {
+		short: 150,
+		standard: 250,
+		long: 375
+	},
+	easing: {
+		standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+		enter: "cubic-bezier(0, 0, 0.2, 1)",
+		exit: "cubic-bezier(0.4, 0, 1, 1)"
+	}
 };
 const fontSizes = [
 	12,
@@ -295,6 +307,7 @@ const baseTheme = {
 	breakpoints,
 	layout,
 	zOrder,
+	transitions,
 	blur: "12px",
 	colorScheme: "dark",
 	palette: {
@@ -352,7 +365,9 @@ const baseTheme = {
 		paper: "#131313",
 		terminal: "#000000",
 		grid: require_utils.alpha("#00FC40", .06),
-		transparent: "#00000000"
+		transparent: "#00000000",
+		scrollbar: "#B3B3B380",
+		scrollbarTrack: "#38383880"
 	},
 	text: {
 		inherit: "inherit",
@@ -383,7 +398,6 @@ const baseTheme = {
 * breakpoints has the same helpers on `theme.breakpoints`.
 */
 const { up, down, only, between, not, containerQueries } = breakpoints;
-//#endregion
 Object.defineProperty(exports, "avatar", {
 	enumerable: true,
 	get: function() {
@@ -498,6 +512,12 @@ Object.defineProperty(exports, "space", {
 		return space;
 	}
 });
+Object.defineProperty(exports, "transitions", {
+	enumerable: true,
+	get: function() {
+		return transitions;
+	}
+});
 Object.defineProperty(exports, "typography", {
 	enumerable: true,
 	get: function() {

package/dist/{themes-L-dE7_ck.mjs → themes-D-knykK0.mjs}

@@ -1,9 +1,8 @@
 import { alpha, generateBoxShadow } from "./utils.mjs";
 import { createContainerQueries, createMediaHelpers } from "@soroush.tech/styled-system";
-//#region src/theme/utils/spacing.ts
+// src/theme/utils/spacing.ts
 const spacing = (units) => units === 0 ? "0px" : `${Math.max(1, Math.round(8 * units))}px`;
-//#endregion
-//#region src/theme/breakpoints.ts
+// src/theme/breakpoints.ts
 /**
 * The scale with its helpers attached as non-enumerable methods: the engine, the theme's JSON
 * and a spread see only the sizes, while `theme.breakpoints.up('md')` works. `createTheme`
@@ -22,8 +21,7 @@ const withBreakpointHelpers = (scale) => {
 	});
 	return sizes;
 };
-//#endregion
-//#region src/theme/themes.ts
+// src/theme/themes.ts
 const shadow$1 = {
 	color: "#000000",
 	opacity: .4
@@ -44,7 +42,21 @@ const borderWidths = {
 const zOrder = {
 	appBar: 1100,
 	drawer: 1200,
-	modal: 1300
+	modal: 1300,
+	snackbar: 1400,
+	tooltip: 1500
+};
+const transitions = {
+	duration: {
+		short: 150,
+		standard: 250,
+		long: 375
+	},
+	easing: {
+		standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+		enter: "cubic-bezier(0, 0, 0.2, 1)",
+		exit: "cubic-bezier(0.4, 0, 1, 1)"
+	}
 };
 const fontSizes = [
 	12,
@@ -295,6 +307,7 @@ const baseTheme = {
 	breakpoints,
 	layout: layout$1,
 	zOrder,
+	transitions,
 	blur: "12px",
 	colorScheme: "dark",
 	palette: {
@@ -352,7 +365,9 @@ const baseTheme = {
 		paper: "#131313",
 		terminal: "#000000",
 		grid: alpha("#00FC40", .06),
-		transparent: "#00000000"
+		transparent: "#00000000",
+		scrollbar: "#B3B3B380",
+		scrollbarTrack: "#38383880"
 	},
 	text: {
 		inherit: "inherit",
@@ -383,5 +398,4 @@ const baseTheme = {
 * breakpoints has the same helpers on `theme.breakpoints`.
 */
 const { up, down, only, between, not, containerQueries } = breakpoints;
-//#endregion
-export { withBreakpointHelpers as C, zOrder as S, radii as _, breakpoints as a, typography$1 as b, fontSizes as c, icon as d, layout$1 as f, only as g, not as h, borderWidths as i, fontWeights as l, lineHeights as m, baseTheme as n, containerQueries as o, letterSpacings as p, between as r, down as s, avatar as t, fonts as u, sizes as v, up as x, space$1 as y };
+export { zOrder as C, up as S, radii as _, breakpoints as a, transitions as b, fontSizes as c, icon as d, layout$1 as f, only as g, not as h, borderWidths as i, fontWeights as l, lineHeights as m, baseTheme as n, containerQueries as o, letterSpacings as p, between as r, down as s, avatar as t, fonts as u, sizes as v, withBreakpointHelpers as w, typography$1 as x, space$1 as y };

package/dist/tonalRadius-CU9GHoHx.cjs

@@ -0,0 +1,9 @@
+// src/Tabs/utils/tonalRadius.ts
+/** The tonal look's radius: a pill, for the container and the selected tab. */
+const TONAL_RADIUS = "999px";
+Object.defineProperty(exports, "TONAL_RADIUS", {
+	enumerable: true,
+	get: function() {
+		return TONAL_RADIUS;
+	}
+});

package/dist/tonalRadius-CvXRueqT.mjs

@@ -0,0 +1,4 @@
+// src/Tabs/utils/tonalRadius.ts
+/** The tonal look's radius: a pill, for the container and the selected tab. */
+const TONAL_RADIUS = "999px";
+export { TONAL_RADIUS as t };

package/dist/useAnchoredPlacement-COrXZxhm.mjs

@@ -0,0 +1,105 @@
+import { t as computePopoverPosition } from "./computePopoverPosition-qii46Z6p.mjs";
+import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
+import { useCallback, useEffect, useLayoutEffect } from "react";
+// src/utils/useAnchoredPlacement.ts
+const OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/**
+* Places a `position: fixed` surface in the window next to its anchor - so a scrolling panel's
+* overflow never clips it, while it stays in its owner's box in the DOM. It is placed before
+* paint on every render while open, and again on resize and on any scroll. The surface starts
+* `visibility: hidden` and is shown here, as it is placed - in the same layout pass, so it is
+* visible by the time anything inside it takes focus. Where it flips to the other side for want
+* of room, and how it is kept inside the margin, is `computePopoverPosition`'s.
+*/
+function useAnchoredPlacement({ isOpen, anchorRef, surfaceRef, getOrigins, margin, gap = 0, anchorPosition = null, onPlaced }) {
+	const pointTop = anchorPosition?.top;
+	const pointLeft = anchorPosition?.left ?? 0;
+	const place = useCallback(() => {
+		const anchor = anchorRef.current;
+		const surface = surfaceRef.current;
+		if (!anchor || !surface) return;
+		const isPoint = pointTop !== void 0;
+		const rect = anchor.getBoundingClientRect();
+		const surfaceSize = {
+			width: surface.offsetWidth,
+			height: surface.offsetHeight
+		};
+		const viewport = {
+			width: window.innerWidth,
+			height: window.innerHeight
+		};
+		const context = {
+			anchorRect: rect,
+			surfaceSize,
+			viewport,
+			isRtl: isRtl(anchor)
+		};
+		const origins = getOrigins(context);
+		const isBesideVertically = OPPOSITE[origins.anchorOrigin.vertical] === origins.transformOrigin.vertical;
+		const isBesideHorizontally = OPPOSITE[origins.anchorOrigin.horizontal] === origins.transformOrigin.horizontal;
+		const isBeside = isBesideVertically || isBesideHorizontally;
+		const gapY = isBesideVertically || !isBeside ? gap : 0;
+		const gapX = isBesideHorizontally || !isBeside ? gap : 0;
+		const anchorRect = {
+			top: rect.top - gapY,
+			left: rect.left - gapX,
+			width: rect.width + 2 * gapX,
+			height: rect.height + 2 * gapY
+		};
+		const { top, left } = computePopoverPosition({
+			anchorReference: isPoint ? "anchorPosition" : "anchorEl",
+			anchorPosition: isPoint ? {
+				top: pointTop,
+				left: pointLeft
+			} : void 0,
+			anchorRect,
+			paperRect: surfaceSize,
+			...origins,
+			viewport,
+			marginThreshold: margin
+		});
+		surface.style.top = `${top}px`;
+		surface.style.left = `${left}px`;
+		const landed = surface.getBoundingClientRect();
+		const isOwnBox = surfaceSize.width > 0 && Math.round(landed.width) === surfaceSize.width;
+		const shiftTop = Math.round(landed.top - top);
+		const shiftLeft = Math.round(landed.left - left);
+		if (isOwnBox && (shiftTop !== 0 || shiftLeft !== 0)) {
+			surface.style.top = `${top - shiftTop}px`;
+			surface.style.left = `${left - shiftLeft}px`;
+		}
+		surface.style.visibility = "visible";
+		onPlaced?.({
+			...context,
+			top,
+			left
+		});
+	}, [
+		anchorRef,
+		surfaceRef,
+		getOrigins,
+		margin,
+		gap,
+		pointTop,
+		pointLeft,
+		onPlaced
+	]);
+	useLayoutEffect(() => {
+		if (isOpen) place();
+	});
+	useEffect(() => {
+		if (!isOpen) return void 0;
+		window.addEventListener("resize", place);
+		window.addEventListener("scroll", place, true);
+		return () => {
+			window.removeEventListener("resize", place);
+			window.removeEventListener("scroll", place, true);
+		};
+	}, [isOpen, place]);
+}
+export { useAnchoredPlacement as t };

package/dist/useAnchoredPlacement-ee6KzG3t.cjs

@@ -0,0 +1,110 @@
+const require_computePopoverPosition = require("./computePopoverPosition-C2W1FcYE.cjs");
+const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
+let react = require("react");
+// src/utils/useAnchoredPlacement.ts
+const OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/**
+* Places a `position: fixed` surface in the window next to its anchor - so a scrolling panel's
+* overflow never clips it, while it stays in its owner's box in the DOM. It is placed before
+* paint on every render while open, and again on resize and on any scroll. The surface starts
+* `visibility: hidden` and is shown here, as it is placed - in the same layout pass, so it is
+* visible by the time anything inside it takes focus. Where it flips to the other side for want
+* of room, and how it is kept inside the margin, is `computePopoverPosition`'s.
+*/
+function useAnchoredPlacement({ isOpen, anchorRef, surfaceRef, getOrigins, margin, gap = 0, anchorPosition = null, onPlaced }) {
+	const pointTop = anchorPosition?.top;
+	const pointLeft = anchorPosition?.left ?? 0;
+	const place = (0, react.useCallback)(() => {
+		const anchor = anchorRef.current;
+		const surface = surfaceRef.current;
+		if (!anchor || !surface) return;
+		const isPoint = pointTop !== void 0;
+		const rect = anchor.getBoundingClientRect();
+		const surfaceSize = {
+			width: surface.offsetWidth,
+			height: surface.offsetHeight
+		};
+		const viewport = {
+			width: window.innerWidth,
+			height: window.innerHeight
+		};
+		const context = {
+			anchorRect: rect,
+			surfaceSize,
+			viewport,
+			isRtl: require_isRtl.isRtl(anchor)
+		};
+		const origins = getOrigins(context);
+		const isBesideVertically = OPPOSITE[origins.anchorOrigin.vertical] === origins.transformOrigin.vertical;
+		const isBesideHorizontally = OPPOSITE[origins.anchorOrigin.horizontal] === origins.transformOrigin.horizontal;
+		const isBeside = isBesideVertically || isBesideHorizontally;
+		const gapY = isBesideVertically || !isBeside ? gap : 0;
+		const gapX = isBesideHorizontally || !isBeside ? gap : 0;
+		const anchorRect = {
+			top: rect.top - gapY,
+			left: rect.left - gapX,
+			width: rect.width + 2 * gapX,
+			height: rect.height + 2 * gapY
+		};
+		const { top, left } = require_computePopoverPosition.computePopoverPosition({
+			anchorReference: isPoint ? "anchorPosition" : "anchorEl",
+			anchorPosition: isPoint ? {
+				top: pointTop,
+				left: pointLeft
+			} : void 0,
+			anchorRect,
+			paperRect: surfaceSize,
+			...origins,
+			viewport,
+			marginThreshold: margin
+		});
+		surface.style.top = `${top}px`;
+		surface.style.left = `${left}px`;
+		const landed = surface.getBoundingClientRect();
+		const isOwnBox = surfaceSize.width > 0 && Math.round(landed.width) === surfaceSize.width;
+		const shiftTop = Math.round(landed.top - top);
+		const shiftLeft = Math.round(landed.left - left);
+		if (isOwnBox && (shiftTop !== 0 || shiftLeft !== 0)) {
+			surface.style.top = `${top - shiftTop}px`;
+			surface.style.left = `${left - shiftLeft}px`;
+		}
+		surface.style.visibility = "visible";
+		onPlaced?.({
+			...context,
+			top,
+			left
+		});
+	}, [
+		anchorRef,
+		surfaceRef,
+		getOrigins,
+		margin,
+		gap,
+		pointTop,
+		pointLeft,
+		onPlaced
+	]);
+	(0, react.useLayoutEffect)(() => {
+		if (isOpen) place();
+	});
+	(0, react.useEffect)(() => {
+		if (!isOpen) return void 0;
+		window.addEventListener("resize", place);
+		window.addEventListener("scroll", place, true);
+		return () => {
+			window.removeEventListener("resize", place);
+			window.removeEventListener("scroll", place, true);
+		};
+	}, [isOpen, place]);
+}
+Object.defineProperty(exports, "useAnchoredPlacement", {
+	enumerable: true,
+	get: function() {
+		return useAnchoredPlacement;
+	}
+});

package/dist/{useControlled-CBRLsO-H.mjs → useControlled-B4uQ9Bj6.mjs}

@@ -1,5 +1,5 @@
 import { useState } from "react";
-//#region src/utils/useControlled.ts
+// src/utils/useControlled.ts
 /**
 * A value a control owns until its owner takes it over: the controlled value when there is one,
 * otherwise its own state. The setter keeps that state moving either way, so a control that
@@ -9,5 +9,4 @@ function useControlled({ controlled, default: defaultValue }) {
 	const [state, setState] = useState(defaultValue);
 	return [controlled !== void 0 ? controlled : state, setState];
 }
-//#endregion
 export { useControlled as t };

package/dist/{useControlled-C666KpQ0.cjs → useControlled-CzCxM4J3.cjs}

@@ -1,5 +1,5 @@
 let react = require("react");
-//#region src/utils/useControlled.ts
+// src/utils/useControlled.ts
 /**
 * A value a control owns until its owner takes it over: the controlled value when there is one,
 * otherwise its own state. The setter keeps that state moving either way, so a control that
@@ -9,7 +9,6 @@ function useControlled({ controlled, default: defaultValue }) {
 	const [state, setState] = (0, react.useState)(defaultValue);
 	return [controlled !== void 0 ? controlled : state, setState];
 }
-//#endregion
 Object.defineProperty(exports, "useControlled", {
 	enumerable: true,
 	get: function() {

package/dist/useMergedRefs-BtctsnmX.cjs

@@ -0,0 +1,26 @@
+let react = require("react");
+// src/Modal/hooks/useMergedRefs.ts
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+/**
+* Merges two refs into a single stable ref callback so one DOM node can be
+* tracked by both an internal ref and a forwarded `ref`. Returns `null` when
+* both refs are absent, so React skips attaching a callback ref entirely.
+*/
+function useMergedRefs(refA, refB) {
+	return (0, react.useMemo)(() => {
+		if (refA == null && refB == null) return null;
+		return (value) => {
+			assignRef(refA, value);
+			assignRef(refB, value);
+		};
+	}, [refA, refB]);
+}
+Object.defineProperty(exports, "useMergedRefs", {
+	enumerable: true,
+	get: function() {
+		return useMergedRefs;
+	}
+});

package/dist/useMergedRefs-CdfwtmUd.mjs

@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+// src/Modal/hooks/useMergedRefs.ts
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+/**
+* Merges two refs into a single stable ref callback so one DOM node can be
+* tracked by both an internal ref and a forwarded `ref`. Returns `null` when
+* both refs are absent, so React skips attaching a callback ref entirely.
+*/
+function useMergedRefs(refA, refB) {
+	return useMemo(() => {
+		if (refA == null && refB == null) return null;
+		return (value) => {
+			assignRef(refA, value);
+			assignRef(refB, value);
+		};
+	}, [refA, refB]);
+}
+export { useMergedRefs as t };

package/dist/{useTablePagination-D-39ZmQh.d.mts → useTablePagination-BlD8mK8k.d.mts}

@@ -1,5 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-pTNq3iQn.mjs";
-//#region src/Table/hooks/useTableSort.d.ts
+import { n as TableSortLabelDirection } from "./index-76zijQoi.mjs";
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {
   isActive: boolean;
@@ -21,8 +20,6 @@ type TableSortMap<K extends string = string> = Record<K, TableSortEntry>;
  * ```
  */
 declare function useTableSort<K extends string>(keys: readonly K[], onChange?: (key: K, direction: TableSortLabelDirection) => void): TableSortMap<K>;
-//#endregion
-//#region src/Table/hooks/useTablePagination.d.ts
 interface UseTablePaginationOptions {
   /** Initial zero-based page. Default: `0`. */
   defaultPage?: number;
@@ -47,5 +44,4 @@ interface TablePaginationState {
  * ```
  */
 declare function useTablePagination({ defaultPage, defaultRowsPerPage }?: UseTablePaginationOptions): TablePaginationState;
-//#endregion
 export { TableSortMap as a, TableSortEntry as i, UseTablePaginationOptions as n, useTableSort as o, useTablePagination as r, TablePaginationState as t };

package/dist/{useTablePagination-C-u3ru4N.d.cts → useTablePagination-CGjb_jPX.d.cts}

@@ -1,5 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-DYF8sRE-.cjs";
-//#region src/Table/hooks/useTableSort.d.ts
+import { n as TableSortLabelDirection } from "./index-RaDENVX_.cjs";
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {
   isActive: boolean;
@@ -21,8 +20,6 @@ type TableSortMap<K extends string = string> = Record<K, TableSortEntry>;
  * ```
  */
 declare function useTableSort<K extends string>(keys: readonly K[], onChange?: (key: K, direction: TableSortLabelDirection) => void): TableSortMap<K>;
-//#endregion
-//#region src/Table/hooks/useTablePagination.d.ts
 interface UseTablePaginationOptions {
   /** Initial zero-based page. Default: `0`. */
   defaultPage?: number;
@@ -47,5 +44,4 @@ interface TablePaginationState {
  * ```
  */
 declare function useTablePagination({ defaultPage, defaultRowsPerPage }?: UseTablePaginationOptions): TablePaginationState;
-//#endregion
 export { TableSortMap as a, TableSortEntry as i, UseTablePaginationOptions as n, useTableSort as o, useTablePagination as r, TablePaginationState as t };

package/dist/useTransition-3EoagwIe.d.mts

@@ -0,0 +1,40 @@
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { ReactElement } from "react";
+/** How long a transition takes in milliseconds - one for both ways, or one for each. */
+type TransitionTimeout = number | {
+  enter: number;
+  exit: number;
+};
+/** The lifecycle callbacks every transition component takes, each told the node it moves. */
+interface TransitionCallbacks {
+  /** Fired before it starts to enter - the node is still in its out state. */
+  onEnter?: (node: HTMLElement) => void;
+  /** Fired as it starts to enter. */
+  onEntering?: (node: HTMLElement) => void;
+  /** Fired when it is in. */
+  onEntered?: (node: HTMLElement) => void;
+  /** Fired before it starts to exit - the node is still in its in state. */
+  onExit?: (node: HTMLElement) => void;
+  /** Fired as it starts to exit. */
+  onExiting?: (node: HTMLElement) => void;
+  /** Fired when it is out. */
+  onExited?: (node: HTMLElement) => void;
+}
+/** The props every transition takes: one child, and when and how it moves. */
+interface TransitionProps extends TransitionCallbacks {
+  /** The one element that moves - it holds a `ref` and takes a `style`. */
+  children: ReactElement;
+  /** Whether the child is shown. Default: `false`. */
+  isShown?: boolean;
+  /** Moves on the first render too, when shown. Default: `true`. */
+  shouldAppear?: boolean;
+  /** Keeps the child out of the tree until it is first shown. Default: `false`. */
+  shouldMountOnEnter?: boolean;
+  /** Takes the child out of the tree once it is out. Default: `false`. */
+  shouldUnmountOnExit?: boolean;
+  /** How long it takes in milliseconds, in or out. Default: `theme.transitions.duration.standard`. */
+  timeout?: TransitionTimeout;
+  /** Which of `theme.transitions.easing` it moves by. Default: `'standard'`. */
+  easing?: keyof Theme['transitions']['easing'];
+}
+export { TransitionProps as n, TransitionTimeout as r, TransitionCallbacks as t };

package/dist/useTransition-B0V2fAq5.cjs

@@ -0,0 +1,82 @@
+let react = require("react");
+// src/utils/useTransition.ts
+const getInitialStatus = ({ isShown, shouldAppear, shouldMountOnEnter, shouldUnmountOnExit }) => {
+	if (isShown) return shouldAppear ? "exited" : "entered";
+	return shouldMountOnEnter || shouldUnmountOnExit ? "unmounted" : "exited";
+};
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+const prefersReducedMotion = () => typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches;
+const subscribeToReducedMotion = (notify) => {
+	if (typeof window.matchMedia !== "function") return () => {};
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", notify);
+	return () => query.removeEventListener("change", notify);
+};
+const getServerReducedMotion = () => false;
+const getDuration = (timeout, isEntering) => {
+	if (typeof timeout === "number") return timeout;
+	return isEntering ? timeout.enter : timeout.exit;
+};
+/**
+* The state of a show-and-hide transition. `isShown` asks for it in or out and the status follows:
+* out (`exited`) to `entering` to `entered`, and back through `exiting`. The component draws each
+* status; the hook only keeps time, mounts and unmounts, and tells the callbacks. A node that is
+* not yet shown renders in its out state first, so the browser has a start to move from.
+*/
+function useTransition(params) {
+	const { isShown, shouldUnmountOnExit, nodeRef } = params;
+	const [state, setState] = (0, react.useState)(() => getInitialStatus(params));
+	const status = isShown && state === "unmounted" ? "exited" : state;
+	const isReduced = (0, react.useSyncExternalStore)(subscribeToReducedMotion, prefersReducedMotion, getServerReducedMotion);
+	const timer = (0, react.useRef)(void 0);
+	const latest = (0, react.useRef)(params);
+	(0, react.useEffect)(() => {
+		latest.current = params;
+	});
+	const isMovingIn = isShown && (status === "exited" || status === "exiting");
+	const isMovingOut = !isShown && (status === "entering" || status === "entered");
+	(0, react.useEffect)(() => {
+		if (!isMovingIn && !isMovingOut) return void 0;
+		const begin = window.setTimeout(() => {
+			const { timeout, onEnter, onEntering, onExit, onExiting } = latest.current;
+			const node = nodeRef.current;
+			window.clearTimeout(timer.current);
+			if (isMovingIn) {
+				const ms = prefersReducedMotion() ? 0 : getDuration(timeout, true);
+				if (node) onEnter?.(node);
+				setState("entering");
+				if (node) onEntering?.(node);
+				timer.current = window.setTimeout(() => {
+					setState("entered");
+					if (node) latest.current.onEntered?.(node);
+				}, ms);
+			} else {
+				const ms = prefersReducedMotion() ? 0 : getDuration(timeout, false);
+				if (node) onExit?.(node);
+				setState("exiting");
+				if (node) onExiting?.(node);
+				timer.current = window.setTimeout(() => {
+					setState(shouldUnmountOnExit ? "unmounted" : "exited");
+					if (node) latest.current.onExited?.(node);
+				}, ms);
+			}
+		}, 0);
+		return () => window.clearTimeout(begin);
+	}, [
+		isMovingIn,
+		isMovingOut,
+		shouldUnmountOnExit,
+		nodeRef
+	]);
+	(0, react.useEffect)(() => () => window.clearTimeout(timer.current), []);
+	return {
+		status,
+		duration: isReduced ? 0 : getDuration(params.timeout, isShown)
+	};
+}
+Object.defineProperty(exports, "useTransition", {
+	enumerable: true,
+	get: function() {
+		return useTransition;
+	}
+});