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

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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/design-system",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.4",
   "description": "Emotion + @soroush.tech/styled-system React component library - token-driven light/dark themes, layout primitives, forms, and overlays.",
   "keywords": [
     "design-system",
@@ -38,6 +38,26 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./Accordion": {
+      "import": {
+        "types": "./dist/Accordion.d.mts",
+        "default": "./dist/Accordion.mjs"
+      },
+      "require": {
+        "types": "./dist/Accordion.d.cts",
+        "default": "./dist/Accordion.cjs"
+      }
+    },
+    "./Alert": {
+      "import": {
+        "types": "./dist/Alert.d.mts",
+        "default": "./dist/Alert.mjs"
+      },
+      "require": {
+        "types": "./dist/Alert.d.cts",
+        "default": "./dist/Alert.cjs"
+      }
+    },
     "./AppBar": {
       "import": {
         "types": "./dist/AppBar.d.mts",
@@ -48,6 +68,16 @@
         "default": "./dist/AppBar.cjs"
       }
     },
+    "./Autocomplete": {
+      "import": {
+        "types": "./dist/Autocomplete.d.mts",
+        "default": "./dist/Autocomplete.mjs"
+      },
+      "require": {
+        "types": "./dist/Autocomplete.d.cts",
+        "default": "./dist/Autocomplete.cjs"
+      }
+    },
     "./Avatar": {
       "import": {
         "types": "./dist/Avatar.d.mts",
@@ -68,6 +98,16 @@
         "default": "./dist/Backdrop.cjs"
       }
     },
+    "./Badge": {
+      "import": {
+        "types": "./dist/Badge.d.mts",
+        "default": "./dist/Badge.mjs"
+      },
+      "require": {
+        "types": "./dist/Badge.d.cts",
+        "default": "./dist/Badge.cjs"
+      }
+    },
     "./Breadcrumbs": {
       "import": {
         "types": "./dist/Breadcrumbs.d.mts",
@@ -118,6 +158,16 @@
         "default": "./dist/Checkbox.cjs"
       }
     },
+    "./Chip": {
+      "import": {
+        "types": "./dist/Chip.d.mts",
+        "default": "./dist/Chip.mjs"
+      },
+      "require": {
+        "types": "./dist/Chip.d.cts",
+        "default": "./dist/Chip.cjs"
+      }
+    },
     "./CircularProgress": {
       "import": {
         "types": "./dist/CircularProgress.d.mts",
@@ -128,6 +178,16 @@
         "default": "./dist/CircularProgress.cjs"
       }
     },
+    "./Collapse": {
+      "import": {
+        "types": "./dist/Collapse.d.mts",
+        "default": "./dist/Collapse.mjs"
+      },
+      "require": {
+        "types": "./dist/Collapse.d.cts",
+        "default": "./dist/Collapse.cjs"
+      }
+    },
     "./Drawer": {
       "import": {
         "types": "./dist/Drawer.d.mts",
@@ -138,6 +198,36 @@
         "default": "./dist/Drawer.cjs"
       }
     },
+    "./Fab": {
+      "import": {
+        "types": "./dist/Fab.d.mts",
+        "default": "./dist/Fab.mjs"
+      },
+      "require": {
+        "types": "./dist/Fab.d.cts",
+        "default": "./dist/Fab.cjs"
+      }
+    },
+    "./FabMenu": {
+      "import": {
+        "types": "./dist/FabMenu.d.mts",
+        "default": "./dist/FabMenu.mjs"
+      },
+      "require": {
+        "types": "./dist/FabMenu.d.cts",
+        "default": "./dist/FabMenu.cjs"
+      }
+    },
+    "./Fade": {
+      "import": {
+        "types": "./dist/Fade.d.mts",
+        "default": "./dist/Fade.mjs"
+      },
+      "require": {
+        "types": "./dist/Fade.d.cts",
+        "default": "./dist/Fade.cjs"
+      }
+    },
     "./Flex": {
       "import": {
         "types": "./dist/Flex.d.mts",
@@ -208,6 +298,16 @@
         "default": "./dist/Grid.cjs"
       }
     },
+    "./Grow": {
+      "import": {
+        "types": "./dist/Grow.d.mts",
+        "default": "./dist/Grow.mjs"
+      },
+      "require": {
+        "types": "./dist/Grow.d.cts",
+        "default": "./dist/Grow.cjs"
+      }
+    },
     "./Icon": {
       "import": {
         "types": "./dist/Icon.d.mts",
@@ -228,14 +328,14 @@
         "default": "./dist/Image.cjs"
       }
     },
-    "./InputRange": {
+    "./RangeInput": {
       "import": {
-        "types": "./dist/InputRange.d.mts",
-        "default": "./dist/InputRange.mjs"
+        "types": "./dist/RangeInput.d.mts",
+        "default": "./dist/RangeInput.mjs"
       },
       "require": {
-        "types": "./dist/InputRange.d.cts",
-        "default": "./dist/InputRange.cjs"
+        "types": "./dist/RangeInput.d.cts",
+        "default": "./dist/RangeInput.cjs"
       }
     },
     "./LinearProgress": {
@@ -298,14 +398,14 @@
         "default": "./dist/NativeSelect.cjs"
       }
     },
-    "./NumberField": {
+    "./NumberInput": {
       "import": {
-        "types": "./dist/NumberField.d.mts",
-        "default": "./dist/NumberField.mjs"
+        "types": "./dist/NumberInput.d.mts",
+        "default": "./dist/NumberInput.mjs"
       },
       "require": {
-        "types": "./dist/NumberField.d.cts",
-        "default": "./dist/NumberField.cjs"
+        "types": "./dist/NumberInput.d.cts",
+        "default": "./dist/NumberInput.cjs"
       }
     },
     "./Pagination": {
@@ -388,6 +488,16 @@
         "default": "./dist/Rating.cjs"
       }
     },
+    "./ScrollArea": {
+      "import": {
+        "types": "./dist/ScrollArea.d.mts",
+        "default": "./dist/ScrollArea.mjs"
+      },
+      "require": {
+        "types": "./dist/ScrollArea.d.cts",
+        "default": "./dist/ScrollArea.cjs"
+      }
+    },
     "./Select": {
       "import": {
         "types": "./dist/Select.d.mts",
@@ -418,6 +528,26 @@
         "default": "./dist/Skeleton.cjs"
       }
     },
+    "./Slide": {
+      "import": {
+        "types": "./dist/Slide.d.mts",
+        "default": "./dist/Slide.mjs"
+      },
+      "require": {
+        "types": "./dist/Slide.d.cts",
+        "default": "./dist/Slide.cjs"
+      }
+    },
+    "./Snackbar": {
+      "import": {
+        "types": "./dist/Snackbar.d.mts",
+        "default": "./dist/Snackbar.mjs"
+      },
+      "require": {
+        "types": "./dist/Snackbar.d.cts",
+        "default": "./dist/Snackbar.cjs"
+      }
+    },
     "./Switch": {
       "import": {
         "types": "./dist/Switch.d.mts",
@@ -458,6 +588,26 @@
         "default": "./dist/TextInput.cjs"
       }
     },
+    "./Tooltip": {
+      "import": {
+        "types": "./dist/Tooltip.d.mts",
+        "default": "./dist/Tooltip.mjs"
+      },
+      "require": {
+        "types": "./dist/Tooltip.d.cts",
+        "default": "./dist/Tooltip.cjs"
+      }
+    },
+    "./Zoom": {
+      "import": {
+        "types": "./dist/Zoom.d.mts",
+        "default": "./dist/Zoom.mjs"
+      },
+      "require": {
+        "types": "./dist/Zoom.d.cts",
+        "default": "./dist/Zoom.cjs"
+      }
+    },
     "./catalog": {
       "import": {
         "types": "./dist/catalog.d.mts",
@@ -567,11 +717,11 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@soroush.tech/styled-system": "^6.0.0-rc.3"
+    "@soroush.tech/styled-system": "^6.0.0-rc.4"
   },
   "peerDependencies": {
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@emotion/css": "^11.13.5",

package/dist/index-BxVTIMnB.d.cts

@@ -1 +0,0 @@
-import "./index-DJ0f69wh.cjs";

package/dist/index-DaIIo5QU.d.mts

@@ -1 +0,0 @@
-import "./index-CJhK7JND.mjs";

package/dist/inputVariantStyles-BBkkYQtE.cjs

@@ -1,32 +0,0 @@
-//#region src/utils/inputVariantStyles.ts
-const inputVariantStyles = (0, require("@soroush.tech/styled-system").variant)({
-	prop: "variant",
-	variants: {
-		outlined: {
-			borderRadius: "sq",
-			borderWidth: "thin",
-			borderStyle: "solid"
-		},
-		default: {
-			borderRadius: "sq",
-			borderStyle: "none"
-		},
-		underline: {
-			borderRadius: "sq",
-			borderStyle: "none",
-			borderBottomWidth: "thin",
-			borderBottomStyle: "solid"
-		},
-		text: {
-			borderRadius: "sq",
-			borderStyle: "none"
-		}
-	}
-});
-//#endregion
-Object.defineProperty(exports, "inputVariantStyles", {
-	enumerable: true,
-	get: function() {
-		return inputVariantStyles;
-	}
-});

package/dist/inputVariantStyles-CcqpGfuP.mjs

@@ -1,28 +0,0 @@
-import { variant } from "@soroush.tech/styled-system";
-//#region src/utils/inputVariantStyles.ts
-const inputVariantStyles = variant({
-	prop: "variant",
-	variants: {
-		outlined: {
-			borderRadius: "sq",
-			borderWidth: "thin",
-			borderStyle: "solid"
-		},
-		default: {
-			borderRadius: "sq",
-			borderStyle: "none"
-		},
-		underline: {
-			borderRadius: "sq",
-			borderStyle: "none",
-			borderBottomWidth: "thin",
-			borderBottomStyle: "solid"
-		},
-		text: {
-			borderRadius: "sq",
-			borderStyle: "none"
-		}
-	}
-});
-//#endregion
-export { inputVariantStyles as t };