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

package/dist/{Popover-TpwRSORC.cjs → Popover-CiZfgiKE.cjs}

@@ -1,6 +1,7 @@
 const require_src = require("./src-DU81aGy9.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_Paper = require("./Paper.cjs");
+const require_computePopoverPosition = require("./computePopoverPosition-DiyEOHnU.cjs");
 const require_Modal = require("./Modal-CM3osOqj.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -11,128 +12,6 @@ function resolveAnchorEl(anchorEl) {
 	return (typeof anchorEl === "function" ? anchorEl() : anchorEl) ?? null;
 }
 //#endregion
-//#region src/Popover/utils/getOffset.ts
-/** Vertical offset within a rect for an anchor/transform origin keyword or explicit px. */
-function getOffsetTop(rect, vertical) {
-	if (typeof vertical === "number") return vertical;
-	if (vertical === "center") return rect.height / 2;
-	if (vertical === "bottom") return rect.height;
-	return 0;
-}
-/** Horizontal offset within a rect for an anchor/transform origin keyword or explicit px. */
-function getOffsetLeft(rect, horizontal) {
-	if (typeof horizontal === "number") return horizontal;
-	if (horizontal === "center") return rect.width / 2;
-	if (horizontal === "right") return rect.width;
-	return 0;
-}
-//#endregion
-//#region src/Popover/utils/getTransformOriginValue.ts
-/** Serializes a resolved transform origin (in px) to a CSS `transform-origin` value. */
-function getTransformOriginValue(origin) {
-	return `${origin.horizontal}px ${origin.vertical}px`;
-}
-//#endregion
-//#region src/Popover/utils/computePopoverPosition.ts
-/** Mirrors a keyword origin to the opposite edge; numbers and `center` are unchanged. */
-function flipVertical(origin) {
-	if (origin === "top") return "bottom";
-	if (origin === "bottom") return "top";
-	return origin;
-}
-function flipHorizontal(origin) {
-	if (origin === "left") return "right";
-	if (origin === "right") return "left";
-	return origin;
-}
-function resolveAxis({ anchorStart, anchorSize, anchorOrigin, transformOrigin, paperSize, viewportSize, margin, offset, flip }) {
-	const preferredTransform = offset(paperSize, transformOrigin);
-	const preferredPosition = anchorStart + offset(anchorSize, anchorOrigin) - preferredTransform;
-	let position = preferredPosition;
-	let transformOffset = preferredTransform;
-	if (margin != null) {
-		const fits = (candidate) => candidate >= margin && candidate + paperSize <= viewportSize - margin;
-		if (!fits(preferredPosition)) {
-			const flippedTransform = offset(paperSize, flip(transformOrigin));
-			const flippedPosition = anchorStart + offset(anchorSize, flip(anchorOrigin)) - flippedTransform;
-			if (fits(flippedPosition)) {
-				position = flippedPosition;
-				transformOffset = flippedTransform;
-			}
-		}
-		if (position < margin) {
-			const diff = position - margin;
-			position -= diff;
-			transformOffset += diff;
-		} else if (position + paperSize > viewportSize - margin) {
-			const diff = position + paperSize - (viewportSize - margin);
-			position -= diff;
-			transformOffset += diff;
-		}
-	}
-	return {
-		position,
-		transformOffset
-	};
-}
-/**
-* Places the paper so its `transformOrigin` meets the anchor's `anchorOrigin`, flipping
-* to the opposite side at a viewport edge and clamping as a fallback. Returns `null`
-* coordinates for `anchorReference === 'none'`.
-*/
-function computePopoverPosition(params) {
-	const { anchorReference, anchorRect, anchorPosition, paperRect, anchorOrigin, transformOrigin, viewport, marginThreshold } = params;
-	if (anchorReference === "none") return {
-		top: null,
-		left: null,
-		transformOrigin: getTransformOriginValue({
-			vertical: getOffsetTop(paperRect, transformOrigin.vertical),
-			horizontal: getOffsetLeft(paperRect, transformOrigin.horizontal)
-		})
-	};
-	const rect = anchorReference === "anchorPosition" ? {
-		top: anchorPosition?.top ?? 0,
-		left: anchorPosition?.left ?? 0,
-		width: 0,
-		height: 0
-	} : anchorRect ?? {
-		top: 0,
-		left: 0,
-		width: 0,
-		height: 0
-	};
-	const vertical = resolveAxis({
-		anchorStart: rect.top,
-		anchorSize: rect.height,
-		anchorOrigin: anchorOrigin.vertical,
-		transformOrigin: transformOrigin.vertical,
-		paperSize: paperRect.height,
-		viewportSize: viewport.height,
-		margin: marginThreshold,
-		offset: (size, origin) => getOffsetTop({ height: size }, origin),
-		flip: (origin) => flipVertical(origin)
-	});
-	const horizontal = resolveAxis({
-		anchorStart: rect.left,
-		anchorSize: rect.width,
-		anchorOrigin: anchorOrigin.horizontal,
-		transformOrigin: transformOrigin.horizontal,
-		paperSize: paperRect.width,
-		viewportSize: viewport.width,
-		margin: marginThreshold,
-		offset: (size, origin) => getOffsetLeft({ width: size }, origin),
-		flip: (origin) => flipHorizontal(origin)
-	});
-	return {
-		top: Math.floor(vertical.position),
-		left: Math.floor(horizontal.position),
-		transformOrigin: getTransformOriginValue({
-			vertical: vertical.transformOffset,
-			horizontal: horizontal.transformOffset
-		})
-	};
-}
-//#endregion
 //#region src/Popover/Popover.tsx
 const ANCHOR_ORIGIN_DEFAULT = {
 	vertical: "top",
@@ -176,9 +55,10 @@ function Popover({ open, children, anchorEl = null, anchorReference = "anchorEl"
 		const element = positionerRef.current;
 		if (!element) return;
 		const resolved = resolveAnchorEl(anchorEl);
-		const positioning = computePopoverPosition({
+		const anchorRect = anchorReference === "anchorEl" && resolved ? resolved.getBoundingClientRect() : null;
+		const positioning = require_computePopoverPosition.computePopoverPosition({
 			anchorReference,
-			anchorRect: anchorReference === "anchorEl" && resolved ? resolved.getBoundingClientRect() : null,
+			anchorRect,
 			anchorPosition: anchorTop != null && anchorLeft != null ? {
 				top: anchorTop,
 				left: anchorLeft

package/dist/Popover-QjM5Z1CR.mjs

@@ -0,0 +1,133 @@
+import { o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
+import { Paper } from "./Paper.mjs";
+import { t as computePopoverPosition } from "./computePopoverPosition-BIprs_xo.mjs";
+import { t as Modal } from "./Modal-BcsyrrpH.mjs";
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Popover/utils/resolveAnchorEl.ts
+/** Resolves the `anchorEl` prop, which may be an element or a function returning one. */
+function resolveAnchorEl(anchorEl) {
+	return (typeof anchorEl === "function" ? anchorEl() : anchorEl) ?? null;
+}
+//#endregion
+//#region src/Popover/Popover.tsx
+const ANCHOR_ORIGIN_DEFAULT = {
+	vertical: "top",
+	horizontal: "left"
+};
+const Positioner = styled("div", {
+	name: "Popover",
+	slot: "positioner",
+	label: "PopoverPositioner",
+	shouldForwardProp: createShouldForwardProp(["isPositioned"])
+})(({ isPositioned }) => ({
+	position: "absolute",
+	...isPositioned ? {} : { opacity: 0 }
+}));
+const Surface = styled(Paper, {
+	name: "Popover",
+	label: "Popover"
+})({
+	overflowY: "auto",
+	overflowX: "hidden",
+	minWidth: 16,
+	minHeight: 16,
+	maxWidth: "calc(100vw - 32px)",
+	maxHeight: "calc(100vh - 32px)",
+	outline: 0
+});
+/**
+* @description Positions its content next to an anchor, portaled above the page.
+* Built on `Modal`, so it inherits the portal, optional backdrop, focus management,
+* scroll lock, and Escape/click-away close - then adds anchor positioning
+* (`anchorOrigin`/`transformOrigin`/`marginThreshold`).
+*/
+function Popover({ open, children, anchorEl = null, anchorReference = "anchorEl", anchorPosition, anchorOrigin = ANCHOR_ORIGIN_DEFAULT, transformOrigin = ANCHOR_ORIGIN_DEFAULT, onClose, elevation = 8, marginThreshold = 2, container, action, slotProps, hasBackdrop = false, disableScrollLock = false, disableAriaHidden = false, shouldAutoFocus = true, shouldTrapFocus = true, shouldEnforceFocus = true, shouldRestoreFocus = true, shouldKeepMounted = false, layer = "modal" }) {
+	const theme = useTheme();
+	const positionerRef = useRef(null);
+	const [isPositioned, setIsPositioned] = useState(false);
+	const anchorTop = anchorPosition?.top;
+	const anchorLeft = anchorPosition?.left;
+	const marginThresholdPx = marginThreshold == null ? null : Number.parseFloat(String(theme.space[marginThreshold]));
+	const setPositioningStyles = useCallback(() => {
+		const element = positionerRef.current;
+		if (!element) return;
+		const resolved = resolveAnchorEl(anchorEl);
+		const anchorRect = anchorReference === "anchorEl" && resolved ? resolved.getBoundingClientRect() : null;
+		const positioning = computePopoverPosition({
+			anchorReference,
+			anchorRect,
+			anchorPosition: anchorTop != null && anchorLeft != null ? {
+				top: anchorTop,
+				left: anchorLeft
+			} : void 0,
+			paperRect: {
+				width: element.offsetWidth,
+				height: element.offsetHeight
+			},
+			anchorOrigin,
+			transformOrigin,
+			viewport: {
+				width: window.innerWidth,
+				height: window.innerHeight
+			},
+			marginThreshold: marginThresholdPx
+		});
+		if (positioning.top !== null) element.style.top = `${positioning.top}px`;
+		if (positioning.left !== null) element.style.left = `${positioning.left}px`;
+		element.style.transformOrigin = positioning.transformOrigin;
+		setIsPositioned(true);
+	}, [
+		anchorEl,
+		anchorReference,
+		anchorTop,
+		anchorLeft,
+		anchorOrigin,
+		transformOrigin,
+		marginThresholdPx
+	]);
+	useLayoutEffect(() => {
+		if (open) setPositioningStyles();
+	});
+	useEffect(() => {
+		if (!open) return;
+		const handle = () => setPositioningStyles();
+		window.addEventListener("resize", handle);
+		if (disableScrollLock) window.addEventListener("scroll", handle, true);
+		return () => {
+			window.removeEventListener("resize", handle);
+			window.removeEventListener("scroll", handle, true);
+		};
+	}, [
+		open,
+		disableScrollLock,
+		setPositioningStyles
+	]);
+	useImperativeHandle(action, () => ({ updatePosition: setPositioningStyles }), [setPositioningStyles]);
+	return /* @__PURE__ */ jsx(Modal, {
+		isOpen: open,
+		onClose,
+		hasBackdrop,
+		shouldKeepMounted,
+		shouldLockScroll: !disableScrollLock,
+		disableAriaHidden,
+		shouldAutoFocus,
+		shouldTrapFocus,
+		shouldEnforceFocus,
+		shouldRestoreFocus,
+		portalContainer: container,
+		layer,
+		children: /* @__PURE__ */ jsx(Positioner, {
+			ref: positionerRef,
+			isPositioned,
+			children: /* @__PURE__ */ jsx(Surface, {
+				elevation,
+				...slotProps?.paper,
+				children
+			})
+		})
+	});
+}
+//#endregion
+export { Popover as t };

package/dist/Popover.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Popover = require("./Popover-TpwRSORC.cjs");
+const require_Popover = require("./Popover-CiZfgiKE.cjs");
 exports.Popover = require_Popover.Popover;

package/dist/Popover.d.cts

@@ -1,11 +1,7 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { n as PaperElevation, r as PaperProps } from "./index-DzQJSYIh.cjs";
-import { l as ModalCloseReason } from "./index-Belxmt1X.cjs";
+import { Gt as PaperElevation, Kt as PaperProps, W as Theme } from "./index-DJ0f69wh.cjs";
+import "./index-BxVTIMnB.cjs";
+import { l as ModalCloseReason } from "./index-nqUA_6J_.cjs";
 import { ReactNode, Ref } from "react";
-//#region src/Popover/utils/resolveAnchorEl.d.ts
-type PopoverAnchorEl = HTMLElement | (() => HTMLElement | null) | null;
-//#endregion
 //#region src/Popover/utils/getOffset.d.ts
 type PopoverVerticalOrigin = 'top' | 'center' | 'bottom' | number;
 type PopoverHorizontalOrigin = 'left' | 'center' | 'right' | number;
@@ -21,6 +17,9 @@ interface PopoverPosition {
   left: number;
 }
 //#endregion
+//#region src/Popover/utils/resolveAnchorEl.d.ts
+type PopoverAnchorEl = HTMLElement | (() => HTMLElement | null) | null;
+//#endregion
 //#region src/Popover/Popover.d.ts
 interface PopoverActions {
   /** Recomputes the popover's position against its anchor. */

package/dist/Popover.d.mts

@@ -1,11 +1,7 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { n as PaperElevation, r as PaperProps } from "./index-B_dKjEDR.mjs";
-import { l as ModalCloseReason } from "./index-Wnv6jCR3.mjs";
+import { Gt as PaperElevation, Kt as PaperProps, W as Theme } from "./index-CJhK7JND.mjs";
+import "./index-DaIIo5QU.mjs";
+import { l as ModalCloseReason } from "./index-Bx0-6yeX.mjs";
 import { ReactNode, Ref } from "react";
-//#region src/Popover/utils/resolveAnchorEl.d.ts
-type PopoverAnchorEl = HTMLElement | (() => HTMLElement | null) | null;
-//#endregion
 //#region src/Popover/utils/getOffset.d.ts
 type PopoverVerticalOrigin = 'top' | 'center' | 'bottom' | number;
 type PopoverHorizontalOrigin = 'left' | 'center' | 'right' | number;
@@ -21,6 +17,9 @@ interface PopoverPosition {
   left: number;
 }
 //#endregion
+//#region src/Popover/utils/resolveAnchorEl.d.ts
+type PopoverAnchorEl = HTMLElement | (() => HTMLElement | null) | null;
+//#endregion
 //#region src/Popover/Popover.d.ts
 interface PopoverActions {
   /** Recomputes the popover's position against its anchor. */

package/dist/Popover.mjs

@@ -1,2 +1,2 @@
-import { t as Popover } from "./Popover-DwnSLpp1.mjs";
+import { t as Popover } from "./Popover-QjM5Z1CR.mjs";
 export { Popover };

package/dist/Pressable.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.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");

package/dist/Pressable.d.cts

@@ -1,2 +1,2 @@
-import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-CxUsrlg1.cjs";
+import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-YKrfFC_I.cjs";
 export { Pressable, PressableColor, PressableFeedback, PressableProps };

package/dist/Pressable.d.mts

@@ -1,2 +1,2 @@
-import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-GpnmW6vu.mjs";
+import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-CUz2h5xY.mjs";
 export { Pressable, PressableColor, PressableFeedback, PressableProps };

package/dist/Pressable.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "./utils.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-CDVxig_g.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Pressable/Pressable.tsx

package/dist/Quote.d.cts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { s as ViewProps } from "./index-nB94D7UM.cjs";
+import { W as Theme, nn as ViewProps } from "./index-DJ0f69wh.cjs";
+import "./index-DchHf5cF.cjs";
 //#region src/Quote/Quote.d.ts
 type QuoteProps = ViewProps;
 /** A View with a 2px primary left-border - used for terminal readouts and markdown blockquotes. */

package/dist/Quote.d.mts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { s as ViewProps } from "./index-cuv3o-L7.mjs";
+import { W as Theme, nn as ViewProps } from "./index-CJhK7JND.mjs";
+import "./index-h4dYtVrp.mjs";
 //#region src/Quote/Quote.d.ts
 type QuoteProps = ViewProps;
 /** A View with a 2px primary left-border - used for terminal readouts and markdown blockquotes. */

package/dist/Radio.d.cts

@@ -1,5 +1,4 @@
-import { T as Theme, x as PaletteColor } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
+import { P as PaletteColor, W as Theme } from "./index-DJ0f69wh.cjs";
 import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Radio/Radio.d.ts

package/dist/Radio.d.mts

@@ -1,5 +1,4 @@
-import { T as Theme, x as PaletteColor } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
+import { P as PaletteColor, W as Theme } from "./index-CJhK7JND.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 //#region src/Radio/Radio.d.ts