@soroush.tech/design-system 0.1.0

package/dist/Pagination.mjs

@@ -0,0 +1,130 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+import { PaginationItem } from "./Pagination/PaginationItem.mjs";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Pagination/hooks/usePagination.ts
+const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+/**
+* Headless pagination model — computes the item list (nav buttons, page numbers,
+* ellipses) with selection, boundary disabling, and controlled/uncontrolled paging.
+*/
+function usePagination({ count, page: pageProp, defaultPage = 1, siblingCount = 1, boundaryCount = 1, disabled = false, shouldShowFirstButton = false, shouldShowLastButton = false, shouldHidePrevButton = false, shouldHideNextButton = false, onChange }) {
+	const [pageState, setPageState] = useState(defaultPage);
+	const page = pageProp ?? pageState;
+	const handleClick = (value) => {
+		if (pageProp === void 0) setPageState(value);
+		onChange?.(value);
+	};
+	const startPages = range(1, Math.min(boundaryCount, count));
+	const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+	const siblingsStart = Math.max(Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+	const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : count - 1);
+	const startEllipsisFallback = boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : [];
+	const endEllipsisFallback = count - boundaryCount > boundaryCount ? [count - boundaryCount] : [];
+	const itemList = [
+		...shouldShowFirstButton ? ["first"] : [],
+		...shouldHidePrevButton ? [] : ["previous"],
+		...startPages,
+		...siblingsStart > boundaryCount + 2 ? ["start-ellipsis"] : startEllipsisFallback,
+		...range(siblingsStart, siblingsEnd),
+		...siblingsEnd < count - boundaryCount - 1 ? ["end-ellipsis"] : endEllipsisFallback,
+		...endPages,
+		...shouldHideNextButton ? [] : ["next"],
+		...shouldShowLastButton ? ["last"] : []
+	];
+	const navTargets = {
+		first: 1,
+		previous: page - 1,
+		next: page + 1,
+		last: count
+	};
+	return { items: itemList.map((item) => {
+		if (typeof item === "number") return {
+			type: "page",
+			page: item,
+			isSelected: item === page,
+			isDisabled: disabled,
+			onClick: () => handleClick(item)
+		};
+		if (item === "start-ellipsis" || item === "end-ellipsis") return {
+			type: item,
+			page: null,
+			isSelected: false,
+			isDisabled: true
+		};
+		const target = navTargets[item];
+		return {
+			type: item,
+			page: target,
+			isSelected: false,
+			isDisabled: disabled || (item === "first" || item === "previous" ? page <= 1 : page >= count),
+			onClick: () => handleClick(target)
+		};
+	}) };
+}
+//#endregion
+//#region src/Pagination/Pagination.tsx
+const defaultGetItemAriaLabel = (type, page, isSelected) => {
+	if (type === "page") return isSelected ? `page ${page}` : `Go to page ${page}`;
+	return `Go to ${type} page`;
+};
+const shouldForwardProp = createShouldForwardProp([...props]);
+const PaginationNav = styled("nav", {
+	name: "Pagination",
+	label: "PaginationNav",
+	shouldForwardProp,
+	systemProps: [src_exports.space]
+})();
+const PaginationList = styled("ul", {
+	name: "Pagination",
+	slot: "list",
+	label: "Pagination",
+	shouldForwardProp
+})({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: "0.25rem",
+	listStyle: "none",
+	margin: 0,
+	padding: 0
+});
+function Pagination({ count, page, defaultPage, siblingCount, boundaryCount, disabled, shouldShowFirstButton, shouldShowLastButton, shouldHidePrevButton, shouldHideNextButton, onChange, color, variant, shape, size, getItemAriaLabel = defaultGetItemAriaLabel, "aria-label": ariaLabel = "pagination navigation", ...rest }) {
+	const { items } = usePagination({
+		count,
+		page,
+		defaultPage,
+		siblingCount,
+		boundaryCount,
+		disabled,
+		shouldShowFirstButton,
+		shouldShowLastButton,
+		shouldHidePrevButton,
+		shouldHideNextButton,
+		onChange
+	});
+	return /* @__PURE__ */ jsx(PaginationNav, {
+		"aria-label": ariaLabel,
+		...rest,
+		children: /* @__PURE__ */ jsx(PaginationList, { children: items.map((item, index) => {
+			const isEllipsis = item.type === "start-ellipsis" || item.type === "end-ellipsis";
+			return /* @__PURE__ */ jsx("li", {
+				"aria-hidden": isEllipsis || void 0,
+				children: /* @__PURE__ */ jsx(PaginationItem, {
+					type: item.type,
+					page: item.page,
+					isSelected: item.isSelected,
+					disabled: item.isDisabled,
+					onClick: item.onClick,
+					color,
+					variant,
+					shape,
+					size,
+					"aria-label": isEllipsis ? void 0 : getItemAriaLabel(item.type, item.page, item.isSelected)
+				})
+			}, `${item.type}-${item.page ?? index}`);
+		}) })
+	});
+}
+//#endregion
+export { Pagination, PaginationItem, usePagination };

package/dist/Paper.cjs

@@ -0,0 +1,51 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_Flex = require("./Flex.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/Paper/Paper.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	"elevation",
+	"aspectRatio",
+	"transition",
+	"borderColor",
+	"borderWidth",
+	"borderStyle"
+]);
+const paperSystem = (0, require_src.src_exports.system)({
+	elevation: {
+		property: "boxShadow",
+		scale: "shadows"
+	},
+	aspectRatio: { property: "aspectRatio" },
+	transition: { property: "transition" },
+	borderColor: {
+		property: "borderColor",
+		scale: "border"
+	},
+	borderWidth: {
+		property: "borderWidth",
+		scale: "borderWidths"
+	},
+	borderStyle: { property: "borderStyle" }
+});
+const PaperRoot = require_src.styled(require_Flex.Flex, {
+	name: "Paper",
+	label: "paper",
+	shouldForwardProp
+})(paperSystem);
+function Paper({ elevation = 1, p = 2, bg, borderRadius, ...rest }) {
+	const theme = (0, _emotion_react.useTheme)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaperRoot, {
+		elevation,
+		p,
+		bg: bg ?? require_themeDefault.themeDefault(theme, "surfaceBg", "paper"),
+		borderRadius: borderRadius ?? require_themeDefault.themeDefault(theme, "surfaceRadius", "sq"),
+		...rest
+	});
+}
+//#endregion
+exports.Paper = Paper;

package/dist/Paper.d.cts

@@ -0,0 +1,2 @@
+import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-x80UG39F.cjs";
+export { Paper, PaperElevation, PaperProps };

package/dist/Paper.d.mts

@@ -0,0 +1,2 @@
+import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-BLRMuO_x.mjs";
+export { Paper, PaperElevation, PaperProps };

package/dist/Paper.mjs

@@ -0,0 +1,48 @@
+import { a as createShouldForwardProp, d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { Flex } from "./Flex.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Paper/Paper.tsx
+const shouldForwardProp = createShouldForwardProp([
+	"elevation",
+	"aspectRatio",
+	"transition",
+	"borderColor",
+	"borderWidth",
+	"borderStyle"
+]);
+const paperSystem = (0, src_exports.system)({
+	elevation: {
+		property: "boxShadow",
+		scale: "shadows"
+	},
+	aspectRatio: { property: "aspectRatio" },
+	transition: { property: "transition" },
+	borderColor: {
+		property: "borderColor",
+		scale: "border"
+	},
+	borderWidth: {
+		property: "borderWidth",
+		scale: "borderWidths"
+	},
+	borderStyle: { property: "borderStyle" }
+});
+const PaperRoot = styled(Flex, {
+	name: "Paper",
+	label: "paper",
+	shouldForwardProp
+})(paperSystem);
+function Paper({ elevation = 1, p = 2, bg, borderRadius, ...rest }) {
+	const theme = useTheme();
+	return /* @__PURE__ */ jsx(PaperRoot, {
+		elevation,
+		p,
+		bg: bg ?? themeDefault(theme, "surfaceBg", "paper"),
+		borderRadius: borderRadius ?? themeDefault(theme, "surfaceRadius", "sq"),
+		...rest
+	});
+}
+//#endregion
+export { Paper };

package/dist/Popover-B61J7C79.mjs

@@ -0,0 +1,252 @@
+import { a as createShouldForwardProp, d as styled, u as useTheme } from "./src-DcNT2aIK.mjs";
+import { Paper } from "./Paper.mjs";
+import { t as Modal } from "./Modal-DR60peRg.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/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",
+	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 positioning = computePopoverPosition({
+			anchorReference,
+			anchorRect: anchorReference === "anchorEl" && resolved ? resolved.getBoundingClientRect() : null,
+			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 };