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

package/dist/useControlled-C666KpQ0.cjs

@@ -0,0 +1,18 @@
+let react = require("react");
+//#region 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
+* stays uncontrolled needs no branch.
+*/
+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() {
+		return useControlled;
+	}
+});

package/dist/useControlled-CBRLsO-H.mjs

@@ -0,0 +1,13 @@
+import { useState } from "react";
+//#region 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
+* stays uncontrolled needs no branch.
+*/
+function useControlled({ controlled, default: defaultValue }) {
+	const [state, setState] = useState(defaultValue);
+	return [controlled !== void 0 ? controlled : state, setState];
+}
+//#endregion
+export { useControlled as t };

package/dist/useMergedRefs-2zTDXgPO.cjs

@@ -0,0 +1,27 @@
+let react = require("react");
+//#region 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]);
+}
+//#endregion
+Object.defineProperty(exports, "useMergedRefs", {
+	enumerable: true,
+	get: function() {
+		return useMergedRefs;
+	}
+});

package/dist/useMergedRefs-BfBckwRY.mjs

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+//#region 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]);
+}
+//#endregion
+export { useMergedRefs as t };

package/dist/{useTablePagination-C5VKtqDp.d.cts → useTablePagination-CFb_FYA9.d.cts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-DXhMkjQ6.cjs";
+import { n as TableSortLabelDirection } from "./index-CR0akDlJ.cjs";
 //#region src/Table/hooks/useTableSort.d.ts
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {

package/dist/{useTablePagination-C6LSlt3w.d.mts → useTablePagination-_-bzuXJO.d.mts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-DeDxYlSQ.mjs";
+import { n as TableSortLabelDirection } from "./index-D05fSuF1.mjs";
 //#region src/Table/hooks/useTableSort.d.ts
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {

package/dist/useTransition-C1F7MuHO.d.mts

@@ -0,0 +1,42 @@
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { ReactElement } from "react";
+//#region src/utils/useTransition.d.ts
+/** 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'];
+}
+//#endregion
+export { TransitionProps as n, TransitionTimeout as r, TransitionCallbacks as t };

package/dist/useTransition-DAQd1PX3.cjs

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

package/dist/useTransition-DP1k0irI.mjs

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region 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] = useState(() => getInitialStatus(params));
+	const status = isShown && state === "unmounted" ? "exited" : state;
+	const isReduced = useSyncExternalStore(subscribeToReducedMotion, prefersReducedMotion, getServerReducedMotion);
+	const timer = useRef(void 0);
+	const latest = useRef(params);
+	useEffect(() => {
+		latest.current = params;
+	});
+	const isMovingIn = isShown && (status === "exited" || status === "exiting");
+	const isMovingOut = !isShown && (status === "entering" || status === "entered");
+	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
+	]);
+	useEffect(() => () => window.clearTimeout(timer.current), []);
+	return {
+		status,
+		duration: isReduced ? 0 : getDuration(params.timeout, isShown)
+	};
+}
+//#endregion
+export { useTransition as t };

package/dist/useTransition-l9dv83-Y.d.cts

@@ -0,0 +1,42 @@
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { ReactElement } from "react";
+//#region src/utils/useTransition.d.ts
+/** 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'];
+}
+//#endregion
+export { TransitionProps as n, TransitionTimeout as r, TransitionCallbacks as t };

package/dist/useTransitionChild-CikpU0Yh.cjs

@@ -0,0 +1,54 @@
+const require_theme = require("./theme-DzfwuzMZ.cjs");
+const require_useTransition = require("./useTransition-DAQd1PX3.cjs");
+const require_useMergedRefs = require("./useMergedRefs-2zTDXgPO.cjs");
+let react = require("react");
+//#region src/utils/useTransitionChild.ts
+const chain = (own, given) => (node) => {
+	own?.(node);
+	given?.(node);
+};
+/**
+* The part every transition that wraps one child shares: the status, the child's ref, and the
+* child cloned with the transition's style over its own. `own` are the transition's callbacks (a
+* `Slide` measures on enter); the callbacks given in the props follow them. Null while unmounted.
+*/
+function useTransitionChild(props, getStyle, own = {}) {
+	const theme = require_theme.useTheme();
+	const { children, isShown = false, shouldAppear = true, shouldMountOnEnter = false, shouldUnmountOnExit = false, timeout = theme.transitions.duration.standard, easing = "standard", onEnter, onEntering, onEntered, onExit, onExiting, onExited } = props;
+	const nodeRef = (0, react.useRef)(null);
+	const ref = require_useMergedRefs.useMergedRefs(nodeRef, children.props.ref);
+	const { status, duration } = require_useTransition.useTransition({
+		isShown,
+		shouldAppear,
+		shouldMountOnEnter,
+		shouldUnmountOnExit,
+		timeout,
+		nodeRef,
+		onEnter: chain(own.onEnter, onEnter),
+		onEntering: chain(own.onEntering, onEntering),
+		onEntered: chain(own.onEntered, onEntered),
+		onExit: chain(own.onExit, onExit),
+		onExiting: chain(own.onExiting, onExiting),
+		onExited: chain(own.onExited, onExited)
+	});
+	if (status === "unmounted") return null;
+	const style = getStyle({
+		status,
+		duration,
+		easing: theme.transitions.easing[easing]
+	});
+	return (0, react.cloneElement)(children, {
+		ref,
+		style: {
+			...children.props.style,
+			...style
+		}
+	});
+}
+//#endregion
+Object.defineProperty(exports, "useTransitionChild", {
+	enumerable: true,
+	get: function() {
+		return useTransitionChild;
+	}
+});

package/dist/useTransitionChild-Dvg9hO-F.mjs

@@ -0,0 +1,49 @@
+import { r as useTheme } from "./theme-oBfFhJm9.mjs";
+import { t as useTransition } from "./useTransition-DP1k0irI.mjs";
+import { t as useMergedRefs } from "./useMergedRefs-BfBckwRY.mjs";
+import { cloneElement, useRef } from "react";
+//#region src/utils/useTransitionChild.ts
+const chain = (own, given) => (node) => {
+	own?.(node);
+	given?.(node);
+};
+/**
+* The part every transition that wraps one child shares: the status, the child's ref, and the
+* child cloned with the transition's style over its own. `own` are the transition's callbacks (a
+* `Slide` measures on enter); the callbacks given in the props follow them. Null while unmounted.
+*/
+function useTransitionChild(props, getStyle, own = {}) {
+	const theme = useTheme();
+	const { children, isShown = false, shouldAppear = true, shouldMountOnEnter = false, shouldUnmountOnExit = false, timeout = theme.transitions.duration.standard, easing = "standard", onEnter, onEntering, onEntered, onExit, onExiting, onExited } = props;
+	const nodeRef = useRef(null);
+	const ref = useMergedRefs(nodeRef, children.props.ref);
+	const { status, duration } = useTransition({
+		isShown,
+		shouldAppear,
+		shouldMountOnEnter,
+		shouldUnmountOnExit,
+		timeout,
+		nodeRef,
+		onEnter: chain(own.onEnter, onEnter),
+		onEntering: chain(own.onEntering, onEntering),
+		onEntered: chain(own.onEntered, onEntered),
+		onExit: chain(own.onExit, onExit),
+		onExiting: chain(own.onExiting, onExiting),
+		onExited: chain(own.onExited, onExited)
+	});
+	if (status === "unmounted") return null;
+	const style = getStyle({
+		status,
+		duration,
+		easing: theme.transitions.easing[easing]
+	});
+	return cloneElement(children, {
+		ref,
+		style: {
+			...children.props.style,
+			...style
+		}
+	});
+}
+//#endregion
+export { useTransitionChild as t };