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

package/dist/{NumberField.mjs → NumberInput.mjs}

@@ -1,16 +1,16 @@
-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 { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
 import { clamp } from "./utils.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
-import { t as Icon } from "./Icon-BihOAP4u.mjs";
-import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
+import { t as Icon } from "./Icon-XpXU-SuF.mjs";
+import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-DCGRUY9c.mjs";
+import { t as FormControlContext } from "./FormControlContext-Dg_ommiF.mjs";
 import { useFormControl } from "./FormControl.mjs";
-import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
-import { i as snapToStep, n as getDecimalPrecision, t as addExact } from "./precision-B1lhxnnO.mjs";
-import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
+import { i as snapToStep, n as getDecimalPrecision, t as addExact } from "./precision-DrmFmgMd.mjs";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/NumberField/hooks/useHoldRepeat.ts
+// src/NumberInput/hooks/useHoldRepeat.ts
 /**
 * Runs `action` at once on a press, then again and again while it is held - after a pause, so a
 * tap is one step. `start` begins it, `stop` ends it, and it ends by itself when the component
@@ -44,8 +44,7 @@ function useHoldRepeat(action, { delay = 400, interval = 60 } = {}) {
 		stop
 	};
 }
-//#endregion
-//#region src/NumberField/utils/number.ts
+// src/NumberInput/utils/number.ts
 /** What a number is shown as unless told otherwise: all its digits, ungrouped, so typing round-trips. */
 const DEFAULT_FORMAT = {
 	useGrouping: false,
@@ -98,15 +97,14 @@ function parseNumber(text, syntax) {
 	const signed = isNegative ? -parsed : parsed;
 	return syntax.isPercent ? Number((signed / 100).toFixed(getDecimalPrecision(parsed) + 2)) : signed;
 }
-//#endregion
-//#region src/NumberField/hooks/useNumberField.ts
+// src/NumberInput/hooks/useNumberInput.ts
 const clampTo = (value, min, max) => clamp(value, min ?? Number.NEGATIVE_INFINITY, max ?? Number.POSITIVE_INFINITY);
 /**
 * A number field's state: the number (controlled or not), the text the user is typing - which
 * is theirs until it is committed on blur or Enter - and the steps by key and by button. A
 * number typed is told at once; one outside the range is clamped when it is committed.
 */
-function useNumberField({ value: valueProp, defaultValue, onChange, onChangeCommitted, min, max, step, smallStep, largeStep, format, locale, shouldSnapOnStep, isFrozen }) {
+function useNumberInput({ value: valueProp, defaultValue, onChange, onChangeCommitted, min, max, step, smallStep, largeStep, format, locale, shouldSnapOnStep, isFrozen }) {
 	const [value, setValue] = useControlled({
 		controlled: valueProp,
 		default: defaultValue ?? null
@@ -175,8 +173,7 @@ function useNumberField({ value: valueProp, defaultValue, onChange, onChangeComm
 		stepBy
 	};
 }
-//#endregion
-//#region src/NumberField/hooks/useWheelStep.ts
+// src/NumberInput/hooks/useWheelStep.ts
 /**
 * Steps a focused field by the mouse wheel - up for a wheel up. A native listener, since the
 * page must not scroll as it turns, and a React one can't prevent that.
@@ -198,8 +195,7 @@ function useWheelStep(ref, isEnabled, onStep) {
 		return () => element.removeEventListener("wheel", handleWheel);
 	}, [ref, isEnabled]);
 }
-//#endregion
-//#region src/NumberField/NumberField.tsx
+// src/NumberInput/NumberInput.tsx
 const widthStyles = (0, src_exports.system)({
 	width: true,
 	minWidth: true,
@@ -213,6 +209,7 @@ const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth,
 		display: isFullWidth || isInField ? "flex" : "inline-flex",
 		...isFullWidth && { width: "100%" },
 		...isInField && !isFullWidth && { width: "fit-content" },
+		minWidth: getInputMinWidth(theme),
 		alignItems: "stretch",
 		transition: "border-color 0.15s ease",
 		backgroundColor: (0, src_exports.get)(theme, `background.${themeDefault(theme, "inputBg", "terminal")}`),
@@ -221,10 +218,7 @@ const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth,
 		lineHeight: (0, src_exports.get)(theme, "lineHeights.base"),
 		borderColor: border,
 		"&:focus-within": { borderColor: focusBorder },
-		"&:has(input:focus-visible)": {
-			outline: `2px solid ${main}`,
-			outlineOffset: "2px"
-		},
+		"&:has(:focus-visible)": getFocusRing(theme, color, isError),
 		...isDisabled && {
 			opacity: .5,
 			cursor: "not-allowed",
@@ -232,9 +226,9 @@ const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth,
 		}
 	};
 };
-const NumberFieldRoot = styled("div", {
-	name: "NumberField",
-	label: "NumberField",
+const NumberInputRoot = styled("div", {
+	name: "NumberInput",
+	label: "NumberInput",
 	shouldForwardProp: createShouldForwardProp([
 		...props,
 		"color",
@@ -247,17 +241,17 @@ const NumberFieldRoot = styled("div", {
 	]),
 	systemProps: [src_exports.space, widthStyles]
 })(inputVariantStyles, frameStyle);
-const NumberFieldInput = styled("input", {
-	name: "NumberField",
+const NumberInputInput = styled("input", {
+	name: "NumberInput",
 	slot: "input",
-	label: "NumberFieldInput",
+	label: "NumberInputInput",
 	shouldForwardProp: createShouldForwardProp(["sizeToken", "isCentered"])
 })(({ theme, sizeToken, isCentered }) => {
 	const s = theme.sizes[sizeToken];
 	return {
-		flex: 1,
+		flex: "1 1 0",
 		minWidth: 0,
-		width: "100%",
+		width: 0,
 		border: "none",
 		outline: "none",
 		background: "transparent",
@@ -277,10 +271,26 @@ const NumberFieldInput = styled("input", {
 		"&:disabled": { cursor: "not-allowed" }
 	};
 });
-const NumberFieldSpinButtons = styled("span", {
-	name: "NumberField",
+const NumberInputContent = styled("span", {
+	name: "NumberInput",
+	slot: "content",
+	label: "NumberInputContent",
+	shouldForwardProp: createShouldForwardProp(["edge", "sizeToken"])
+})(({ theme, edge, sizeToken }) => {
+	const s = theme.sizes[sizeToken];
+	return {
+		display: "inline-flex",
+		alignItems: "center",
+		flexShrink: 0,
+		gap: theme.space[.5],
+		color: "inherit",
+		...edge === "start" ? { paddingInlineStart: theme.space[s.paddingLeft] } : { paddingInlineEnd: theme.space[s.paddingRight] }
+	};
+});
+const NumberInputSpinButtons = styled("span", {
+	name: "NumberInput",
 	slot: "spinButtons",
-	label: "NumberFieldSpinButtons"
+	label: "NumberInputSpinButtons"
 })(({ theme }) => ({
 	display: "flex",
 	flexDirection: "column",
@@ -293,7 +303,8 @@ const spinStyle = ({ theme, color, isSide }) => {
 		appearance: "none",
 		display: "grid",
 		placeItems: "center",
-		flex: isSide ? "0 0 auto" : 1,
+		flex: isSide ? "0 0 auto" : "1 1 0px",
+		...!isSide && { minHeight: 0 },
 		minWidth: isSide ? theme.space[5] : theme.icon.lg,
 		padding: 0,
 		border: "none",
@@ -314,29 +325,29 @@ const sideDivider = (edge) => {
 		borderColor: "inherit"
 	} : {};
 };
-const NumberFieldIncrement = styled("button", {
-	name: "NumberField",
+const NumberInputIncrement = styled("button", {
+	name: "NumberInput",
 	slot: "increment",
-	label: "NumberFieldIncrement",
+	label: "NumberInputIncrement",
 	shouldForwardProp: spinProps
 })(spinStyle, sideDivider("borderInlineStart"));
-const NumberFieldDecrement = styled("button", {
-	name: "NumberField",
+const NumberInputDecrement = styled("button", {
+	name: "NumberInput",
 	slot: "decrement",
-	label: "NumberFieldDecrement",
+	label: "NumberInputDecrement",
 	shouldForwardProp: spinProps
 })(spinStyle, sideDivider("borderInlineEnd"));
 const getSpinIcon = (direction, isSide) => {
 	if (isSide) return direction === 1 ? "add" : "remove";
 	return direction === 1 ? "expand_less" : "expand_more";
 };
-function SpinButton({ direction, label, isSide, isDisabled, color, onStep }) {
+function SpinButton({ direction, label, isSide, isDisabled, color, size, onStep }) {
 	const hold = useHoldRepeat(() => onStep(direction));
 	const { stop } = hold;
 	useEffect(() => {
 		if (isDisabled) stop();
 	}, [isDisabled, stop]);
-	return /* @__PURE__ */ jsx(direction === 1 ? NumberFieldIncrement : NumberFieldDecrement, {
+	return /* @__PURE__ */ jsx(direction === 1 ? NumberInputIncrement : NumberInputDecrement, {
 		type: "button",
 		tabIndex: -1,
 		"aria-label": label,
@@ -351,7 +362,7 @@ function SpinButton({ direction, label, isSide, isDisabled, color, onStep }) {
 		onClick: (event) => event.detail === 0 && onStep(direction),
 		children: /* @__PURE__ */ jsx(Icon, {
 			name: getSpinIcon(direction, isSide),
-			size: "sm",
+			size,
 			color: "inherit"
 		})
 	});
@@ -364,9 +375,9 @@ function SpinButton({ direction, label, isSide, isDisabled, color, onStep }) {
 * number to a form. In a `FormControl` it takes the field's size, color, error, disabled and
 * required state, and its `FormLabel` targets the field.
 */
-function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, smallStep: smallStepProp, largeStep: largeStepProp, format, locale, shouldSnapOnStep: shouldSnapProp, shouldScrubOnWheel: shouldScrubProp, spinButtons: spinButtonsProp, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, error: errorProp, disabled: disabledProp, readOnly = false, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, placeholder, autoFocus, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
+function NumberInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, smallStep: smallStepProp, largeStep: largeStepProp, format, locale, shouldSnapOnStep: shouldSnapProp, shouldScrubOnWheel: shouldScrubProp, spinButtons: spinButtonsProp, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, error: errorProp, disabled: disabledProp, readOnly = false, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, placeholder, autoFocus, startContent, endContent, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
 	const theme = useTheme();
-	const dp = useDefaultProps("NumberField");
+	const dp = useDefaultProps("NumberInput");
 	const isInField = useContext(FormControlContext) !== null;
 	const fc = useFormControl({
 		id: idProp,
@@ -384,7 +395,7 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 	const spinButtons = spinButtonsProp ?? dp.spinButtons ?? "stacked";
 	const step = stepProp ?? dp.step ?? 1;
 	const isFrozen = fc.disabled || readOnly;
-	const field = useNumberField({
+	const field = useNumberInput({
 		value,
 		defaultValue,
 		onChange,
@@ -405,6 +416,7 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 	const buttonProps = {
 		isSide,
 		color,
+		size: fc.size,
 		onStep: field.stepBy
 	};
 	const decrement = /* @__PURE__ */ jsx(SpinButton, {
@@ -420,7 +432,7 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 		...buttonProps
 	});
 	const inputMode = (min ?? -1) >= 0 && Number.isInteger(step) ? "numeric" : "decimal";
-	return /* @__PURE__ */ jsxs(NumberFieldRoot, {
+	return /* @__PURE__ */ jsxs(NumberInputRoot, {
 		color,
 		textColor,
 		variant,
@@ -433,7 +445,12 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 		...rest,
 		children: [
 			isSide && decrement,
-			/* @__PURE__ */ jsx(NumberFieldInput, {
+			startContent != null && /* @__PURE__ */ jsx(NumberInputContent, {
+				edge: "start",
+				sizeToken: fc.size,
+				children: startContent
+			}),
+			/* @__PURE__ */ jsx(NumberInputInput, {
 				ref: inputRef,
 				type: "text",
 				role: "spinbutton",
@@ -465,10 +482,14 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 				value: field.value ?? "",
 				disabled: fc.disabled
 			}),
-			spinButtons === "stacked" && /* @__PURE__ */ jsxs(NumberFieldSpinButtons, { children: [increment, decrement] }),
+			endContent != null && /* @__PURE__ */ jsx(NumberInputContent, {
+				edge: "end",
+				sizeToken: fc.size,
+				children: endContent
+			}),
+			spinButtons === "stacked" && /* @__PURE__ */ jsxs(NumberInputSpinButtons, { children: [increment, decrement] }),
 			isSide && increment
 		]
 	});
 }
-//#endregion
-export { NumberField };
+export { NumberInput };

package/dist/Pagination/PaginationItem.cjs

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
 const require_utils = require("../utils.cjs");
-const require_Icon = require("../Icon-D-EWsBVg.cjs");
+const require_themeDefault = require("../themeDefault-DbPHBbNO.cjs");
+const require_Icon = require("../Icon-C5Iz5ekp.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");
-//#region src/Pagination/PaginationItem/PaginationItem.tsx
+// src/Pagination/PaginationItem/PaginationItem.tsx
 /** Nav item type → registry icon. */
 const NAV_ICONS = {
 	first: "first_page",
@@ -112,5 +112,4 @@ function PaginationItem({ type = "page", page, isSelected = false, color, varian
 		})
 	});
 }
-//#endregion
 exports.PaginationItem = PaginationItem;

package/dist/Pagination/PaginationItem.d.cts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-ChXeKJCk.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-Dxu6Ks2A.cjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.d.mts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-BGbTuHP9.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-CKywwIep.mjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.mjs

@@ -1,10 +1,10 @@
-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 { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
 import { alpha } from "../utils.mjs";
-import { t as Icon } from "../Icon-BihOAP4u.mjs";
+import { t as themeDefault } from "../themeDefault-BeZJzqJj.mjs";
+import { t as Icon } from "../Icon-XpXU-SuF.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Pagination/PaginationItem/PaginationItem.tsx
+// src/Pagination/PaginationItem/PaginationItem.tsx
 /** Nav item type → registry icon. */
 const NAV_ICONS = {
 	first: "first_page",
@@ -110,5 +110,4 @@ function PaginationItem({ type = "page", page, isSelected = false, color, varian
 		})
 	});
 }
-//#endregion
 export { PaginationItem };

package/dist/Pagination.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_Pagination_PaginationItem = require("./Pagination/PaginationItem.cjs");
 let react = 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");
-//#region src/Pagination/hooks/usePagination.ts
+// 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,
@@ -64,8 +64,7 @@ function usePagination({ count, page: pageProp, defaultPage = 1, siblingCount =
 		};
 	}) };
 }
-//#endregion
-//#region src/Pagination/Pagination.tsx
+// 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`;
@@ -128,7 +127,6 @@ function Pagination({ count, page, defaultPage, siblingCount, boundaryCount, dis
 		}) })
 	});
 }
-//#endregion
 exports.Pagination = Pagination;
 exports.PaginationItem = require_Pagination_PaginationItem.PaginationItem;
 exports.usePagination = usePagination;

package/dist/Pagination.d.cts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-ChXeKJCk.cjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BHKgEOZJ.cjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-Dxu6Ks2A.cjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-DBF5n3ey.cjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Pagination.d.mts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-BGbTuHP9.mjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BQWjh4rK.mjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-CKywwIep.mjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BXlBouWV.mjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Pagination.mjs

@@ -1,8 +1,8 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
 import { PaginationItem } from "./Pagination/PaginationItem.mjs";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Pagination/hooks/usePagination.ts
+// 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,
@@ -62,8 +62,7 @@ function usePagination({ count, page: pageProp, defaultPage = 1, siblingCount =
 		};
 	}) };
 }
-//#endregion
-//#region src/Pagination/Pagination.tsx
+// 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`;
@@ -126,5 +125,4 @@ function Pagination({ count, page, defaultPage, siblingCount, boundaryCount, dis
 		}) })
 	});
 }
-//#endregion
 export { Pagination, PaginationItem, usePagination };

package/dist/Paper.cjs

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_Flex = require("./Flex.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Paper/Paper.tsx
+// src/Paper/Paper.tsx
 const shouldForwardProp = (0, require("@soroush.tech/styled-system/should-forward-prop").createShouldForwardProp)([
 	"elevation",
 	"transition",
@@ -44,5 +44,4 @@ function Paper({ elevation = 1, p = 2, bg, borderRadius, ...rest }) {
 		...rest
 	});
 }
-//#endregion
 exports.Paper = Paper;

package/dist/Paper.d.cts

@@ -1,3 +1,3 @@
-import { Gt as PaperElevation, Kt as PaperProps, Wt as Paper } from "./index-DJ0f69wh.cjs";
-import "./index-BxVTIMnB.cjs";
+import { cn as PaperElevation, ln as PaperProps, sn as Paper } from "./index-Lsm4v8fB.cjs";
+import "./index-323PrYLR.cjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.d.mts

@@ -1,3 +1,3 @@
-import { Gt as PaperElevation, Kt as PaperProps, Wt as Paper } from "./index-CJhK7JND.mjs";
-import "./index-DaIIo5QU.mjs";
+import { cn as PaperElevation, ln as PaperProps, sn as Paper } from "./index-CR8qkP8U.mjs";
+import "./index-1Xzj0iAs.mjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.mjs

@@ -1,10 +1,10 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { Flex } from "./Flex.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Paper/Paper.tsx
+// src/Paper/Paper.tsx
 const shouldForwardProp = createShouldForwardProp([
 	"elevation",
 	"transition",
@@ -43,5 +43,4 @@ function Paper({ elevation = 1, p = 2, bg, borderRadius, ...rest }) {
 		...rest
 	});
 }
-//#endregion
 export { Paper };

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

@@ -1,18 +1,17 @@
-const require_src = require("./src-DU81aGy9.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_computePopoverPosition = require("./computePopoverPosition-C2W1FcYE.cjs");
 const require_Paper = require("./Paper.cjs");
-const require_computePopoverPosition = require("./computePopoverPosition-DiyEOHnU.cjs");
-const require_Modal = require("./Modal-CM3osOqj.cjs");
+const require_Modal = require("./Modal-gQcAJAKH.cjs");
 let react = 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");
-//#region src/Popover/utils/resolveAnchorEl.ts
+// 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
+// src/Popover/Popover.tsx
 const ANCHOR_ORIGIN_DEFAULT = {
 	vertical: "top",
 	horizontal: "left"
@@ -130,7 +129,6 @@ function Popover({ open, children, anchorEl = null, anchorReference = "anchorEl"
 		})
 	});
 }
-//#endregion
 Object.defineProperty(exports, "Popover", {
 	enumerable: true,
 	get: function() {

package/dist/{Popover-QjM5Z1CR.mjs → Popover-Dnmeo0Av.mjs}

@@ -1,17 +1,16 @@
-import { o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { r as useTheme } from "./theme-Z9_QludW.mjs";
+import { o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as computePopoverPosition } from "./computePopoverPosition-qii46Z6p.mjs";
 import { Paper } from "./Paper.mjs";
-import { t as computePopoverPosition } from "./computePopoverPosition-BIprs_xo.mjs";
-import { t as Modal } from "./Modal-BcsyrrpH.mjs";
+import { t as Modal } from "./Modal-DR4TRQSH.mjs";
 import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Popover/utils/resolveAnchorEl.ts
+// 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
+// src/Popover/Popover.tsx
 const ANCHOR_ORIGIN_DEFAULT = {
 	vertical: "top",
 	horizontal: "left"
@@ -129,5 +128,4 @@ function Popover({ open, children, anchorEl = null, anchorReference = "anchorEl"
 		})
 	});
 }
-//#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-CiZfgiKE.cjs");
+const require_Popover = require("./Popover-BniabG7D.cjs");
 exports.Popover = require_Popover.Popover;

package/dist/Popover.d.cts

@@ -1,12 +1,9 @@
-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 { cn as PaperElevation, ln as PaperProps, nt as Theme } from "./index-Lsm4v8fB.cjs";
+import "./index-323PrYLR.cjs";
+import { l as ModalCloseReason } from "./index-BC9S8Fpr.cjs";
 import { ReactNode, Ref } from "react";
-//#region src/Popover/utils/getOffset.d.ts
 type PopoverVerticalOrigin = 'top' | 'center' | 'bottom' | number;
 type PopoverHorizontalOrigin = 'left' | 'center' | 'right' | number;
-//#endregion
-//#region src/Popover/utils/computePopoverPosition.d.ts
 interface PopoverOrigin {
   vertical: PopoverVerticalOrigin;
   horizontal: PopoverHorizontalOrigin;
@@ -16,11 +13,7 @@ interface PopoverPosition {
   top: number;
   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. */
   updatePosition: () => void;
@@ -80,5 +73,4 @@ interface PopoverProps {
  * (`anchorOrigin`/`transformOrigin`/`marginThreshold`).
  */
 declare function Popover({ open, children, anchorEl, anchorReference, anchorPosition, anchorOrigin, transformOrigin, onClose, elevation, marginThreshold, container, action, slotProps, hasBackdrop, disableScrollLock, disableAriaHidden, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus, shouldKeepMounted, layer }: Readonly<PopoverProps>): import("react").JSX.Element;
-//#endregion
 export { Popover, PopoverActions, type PopoverAnchorEl, type PopoverOrigin, type PopoverPosition, PopoverProps, type PopoverReference };

package/dist/Popover.d.mts

@@ -1,12 +1,9 @@
-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 { cn as PaperElevation, ln as PaperProps, nt as Theme } from "./index-CR8qkP8U.mjs";
+import "./index-1Xzj0iAs.mjs";
+import { l as ModalCloseReason } from "./index-4maWM1H8.mjs";
 import { ReactNode, Ref } from "react";
-//#region src/Popover/utils/getOffset.d.ts
 type PopoverVerticalOrigin = 'top' | 'center' | 'bottom' | number;
 type PopoverHorizontalOrigin = 'left' | 'center' | 'right' | number;
-//#endregion
-//#region src/Popover/utils/computePopoverPosition.d.ts
 interface PopoverOrigin {
   vertical: PopoverVerticalOrigin;
   horizontal: PopoverHorizontalOrigin;
@@ -16,11 +13,7 @@ interface PopoverPosition {
   top: number;
   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. */
   updatePosition: () => void;
@@ -80,5 +73,4 @@ interface PopoverProps {
  * (`anchorOrigin`/`transformOrigin`/`marginThreshold`).
  */
 declare function Popover({ open, children, anchorEl, anchorReference, anchorPosition, anchorOrigin, transformOrigin, onClose, elevation, marginThreshold, container, action, slotProps, hasBackdrop, disableScrollLock, disableAriaHidden, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus, shouldKeepMounted, layer }: Readonly<PopoverProps>): import("react").JSX.Element;
-//#endregion
 export { Popover, PopoverActions, type PopoverAnchorEl, type PopoverOrigin, type PopoverPosition, PopoverProps, type PopoverReference };

package/dist/Popover.mjs

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

package/dist/Portal.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react");
 let react_dom = require("react-dom");
-//#region src/Portal/Portal.tsx
+// src/Portal/Portal.tsx
 function resolveContainer(container) {
 	return (typeof container === "function" ? container() : container) ?? null;
 }
@@ -16,5 +16,4 @@ function Portal({ children, container }) {
 	if (typeof document === "undefined") return null;
 	return (0, react_dom.createPortal)(children, resolveContainer(container) ?? document.body);
 }
-//#endregion
 exports.Portal = Portal;