@soroush.tech/design-system 0.1.0

package/dist/NativeSelect.mjs

@@ -0,0 +1,186 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { t as Icon } from "./Icon-CAKRmFz3.mjs";
+import { useFormControl } from "./FormControl.mjs";
+import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/NativeSelect/NativeSelect.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"color",
+	"textColor",
+	"variant",
+	"error",
+	"disabled",
+	"fullWidth"
+]);
+const baseStyle = {
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	transition: "border-color 0.15s ease"
+};
+const backgroundStyle = ({ theme, textColor = themeDefault(theme, "accentTextColor", "primary"), bg = themeDefault(theme, "inputBg", "terminal") }) => {
+	return {
+		backgroundColor: (0, src_exports.get)(theme, `background.${bg}`),
+		color: (0, src_exports.get)(theme, `text.${textColor}`),
+		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
+		fontSize: (0, src_exports.get)(theme, "fontSizes.1"),
+		lineHeight: (0, src_exports.get)(theme, "lineHeights.base")
+	};
+};
+const colorBorder = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
+	return { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.light`) };
+};
+const focusWithinColor = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
+	return { "&:focus-within": { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`) } };
+};
+const focusVisibleRing = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
+	return { "&:has(:focus-visible)": {
+		outline: `2px solid ${error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`)}`,
+		outlineOffset: "2px"
+	} };
+};
+const borderRadiusStyle = ({ variant: v = "default", borderRadius, theme }) => {
+	if (v === "underline" || v === "text" || !borderRadius) return {};
+	return { borderRadius: (0, src_exports.get)(theme, `radii.${borderRadius}`) };
+};
+const layoutStyles = ({ fullWidth, disabled }) => ({
+	...fullWidth ? {
+		display: "flex",
+		width: "100%"
+	} : {},
+	...disabled ? {
+		opacity: .5,
+		cursor: "not-allowed",
+		pointerEvents: "none"
+	} : {}
+});
+const NativeSelectRoot = styled("div", {
+	name: "NativeSelect",
+	label: "NativeSelect",
+	shouldForwardProp,
+	systemProps: [src_exports.space, (0, src_exports.system)({
+		width: true,
+		minWidth: true,
+		maxWidth: true
+	})]
+})(baseStyle, inputVariantStyles, borderRadiusStyle, colorBorder, focusWithinColor, focusVisibleRing, backgroundStyle, layoutStyles);
+const shouldForwardNativeSelectProps = (prop) => prop !== "sizeToken" && prop !== "bg" && prop !== "textColor";
+const sizeVariants = ({ theme, sizeToken }) => {
+	const s = theme.sizes[sizeToken];
+	return {
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: `calc(${theme.space[s.paddingRight]} + 1.5rem)`,
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const selectSurface = ({ theme, bg = themeDefault(theme, "inputBg", "terminal"), textColor }) => {
+	const backgroundColor = (0, src_exports.get)(theme, `background.${bg}`);
+	const color = (0, src_exports.get)(theme, `text.${textColor}`);
+	return {
+		backgroundColor,
+		color,
+		"& option": {
+			backgroundColor,
+			color
+		}
+	};
+};
+const StyledNativeSelect = styled("select", {
+	name: "NativeSelect",
+	slot: "select",
+	label: "NativeSelectSelect",
+	shouldForwardProp: shouldForwardNativeSelectProps
+})({
+	appearance: "none",
+	flex: 1,
+	minWidth: 0,
+	width: "100%",
+	border: "none",
+	borderRadius: "inherit",
+	outline: "none",
+	fontFamily: "inherit",
+	lineHeight: "inherit",
+	cursor: "pointer",
+	"&:disabled": { cursor: "not-allowed" }
+}, sizeVariants, selectSurface);
+const DropdownIcon = styled(Icon, {
+	name: "NativeSelect",
+	slot: "icon",
+	label: "NativeSelectIcon"
+})({
+	position: "absolute",
+	right: "0.375rem",
+	top: "50%",
+	transform: "translateY(-50%)",
+	pointerEvents: "none"
+});
+function NativeSelect({ options, value, defaultValue, onChange, placeholder, borderRadius, color: colorProp, textColor: textColorProp, bg, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, iconName = "expand_more", iconProps, selectProps, id: idProp, name, required: requiredProp, size: sizeProp, variant: variantProp, className, "data-testid": dataTestid, ...spaceProps }) {
+	const fc = useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp,
+		fullWidth: fullWidthProp,
+		color: colorProp,
+		textColor: textColorProp
+	});
+	const { id, error, disabled, required, size, fullWidth } = fc;
+	const theme = useTheme();
+	const color = fc.color ?? themeDefault(theme, "color", "primary");
+	const textColor = fc.textColor ?? themeDefault(theme, "accentTextColor", "primary");
+	const variant = variantProp ?? themeDefault(theme, "inputVariant", "default");
+	const handleChange = (event) => {
+		const match = options.find((option) => String(option.value) === event.target.value);
+		onChange?.(match ? match.value : event.target.value);
+	};
+	const uncontrolledDefault = value === void 0 ? defaultValue ?? (placeholder !== void 0 ? "" : void 0) : void 0;
+	return /* @__PURE__ */ jsxs(NativeSelectRoot, {
+		color,
+		textColor,
+		bg,
+		variant,
+		error,
+		disabled,
+		fullWidth,
+		borderRadius,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [/* @__PURE__ */ jsxs(StyledNativeSelect, {
+			...selectProps,
+			id,
+			name,
+			disabled,
+			required,
+			sizeToken: size,
+			bg,
+			textColor,
+			value,
+			defaultValue: uncontrolledDefault,
+			onChange: handleChange,
+			"aria-describedby": selectProps?.["aria-describedby"] ?? fc["aria-describedby"],
+			children: [placeholder !== void 0 && /* @__PURE__ */ jsx("option", {
+				value: "",
+				disabled: true,
+				hidden: true,
+				children: placeholder
+			}), options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: String(option.value),
+				children: option.label
+			}, String(option.value)))]
+		}), /* @__PURE__ */ jsx(DropdownIcon, {
+			name: iconName,
+			size: "1.25rem",
+			color: "secondary",
+			...iconProps
+		})]
+	});
+}
+//#endregion
+export { NativeSelect };

package/dist/Pagination/PaginationItem.cjs

@@ -0,0 +1,116 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_themeDefault = require("../themeDefault-B-QjpGEO.cjs");
+const require_utils = require("../utils.cjs");
+const require_Icon = require("../Icon-1YtNCUKo.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
+/** Nav item type → registry icon. */
+const NAV_ICONS = {
+	first: "first_page",
+	previous: "chevron_left",
+	next: "chevron_right",
+	last: "last_page"
+};
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"isSelected",
+	"variant",
+	"shape",
+	"size"
+]);
+const ITEM_DIMENSIONS = {
+	sm: "1.75rem",
+	md: "2rem",
+	lg: "2.5rem"
+};
+const baseStyles = {
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: 0,
+	outline: "none",
+	cursor: "pointer",
+	backgroundColor: "transparent",
+	fontFamily: "inherit",
+	transition: "background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease",
+	"&:disabled": {
+		cursor: "not-allowed",
+		opacity: .5
+	}
+};
+const sizeStyles = ({ theme, size = require_themeDefault.themeDefault(theme, "size", "md") }) => {
+	return {
+		minWidth: ITEM_DIMENSIONS[size] ?? ITEM_DIMENSIONS.md,
+		height: ITEM_DIMENSIONS[size] ?? ITEM_DIMENSIONS.md,
+		fontSize: theme.fontSizes[theme.sizes[size].fontSize]
+	};
+};
+const shapeStyles = ({ theme, shape = require_themeDefault.themeDefault(theme, "paginationShape", "circular") }) => shape === "rounded" ? { borderRadius: theme.radii[require_themeDefault.themeDefault(theme, "borderRadius", "md")] } : { borderRadius: "9999px" };
+const colorStyles = ({ theme, variant: v = require_themeDefault.themeDefault(theme, "paginationVariant", "text"), color = require_themeDefault.themeDefault(theme, "color", "primary"), isSelected }) => {
+	const c = theme.palette[color];
+	if (isSelected) return {
+		backgroundColor: c.main,
+		color: c.contrastText,
+		border: `${theme.borderWidths.thin} solid ${v === "outlined" ? c.main : "transparent"}`,
+		"&:hover:not(:disabled)": { backgroundColor: c.dark }
+	};
+	return {
+		color: (0, require_src.src_exports.get)(theme, "text.primary"),
+		border: `${theme.borderWidths.thin} solid ${v === "outlined" ? (0, require_src.src_exports.get)(theme, "border.light") : "transparent"}`,
+		"&:hover:not(:disabled)": { backgroundColor: require_utils.alpha(c.main, .08) }
+	};
+};
+const focusVisibleStyles = ({ theme }) => ({ "&:focus-visible": {
+	outline: `2px solid ${theme.palette.primary.main}`,
+	outlineOffset: "2px"
+} });
+const ItemRoot = require_src.styled("button", {
+	name: "PaginationItem",
+	label: "PaginationItem",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space]
+})(baseStyles, sizeStyles, shapeStyles, colorStyles, focusVisibleStyles);
+const Ellipsis = require_src.styled("span", {
+	name: "PaginationItem",
+	slot: "ellipsis",
+	label: "PaginationEllipsis",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space]
+})({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center"
+}, sizeStyles, ({ theme }) => ({ color: (0, require_src.src_exports.get)(theme, "text.secondary") }));
+function PaginationItem({ type = "page", page, isSelected = false, color, variant, shape, size, as, ...rest }) {
+	if (type === "start-ellipsis" || type === "end-ellipsis") {
+		const { disabled: _disabled, onClick: _onClick, ...ellipsisRest } = rest;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Ellipsis, {
+			as,
+			size,
+			...ellipsisRest,
+			children: "…"
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemRoot, {
+		as,
+		type: as === void 0 ? "button" : void 0,
+		isSelected,
+		color,
+		variant,
+		shape,
+		size,
+		"aria-current": isSelected ? "page" : void 0,
+		...rest,
+		children: type === "page" ? page : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			name: NAV_ICONS[type],
+			size: "1.25em",
+			color: "inherit"
+		})
+	});
+}
+//#endregion
+exports.PaginationItem = PaginationItem;

package/dist/Pagination/PaginationItem.d.cts

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

package/dist/Pagination/PaginationItem.d.mts

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

package/dist/Pagination/PaginationItem.mjs

@@ -0,0 +1,114 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "../src-DcNT2aIK.mjs";
+import { t as themeDefault } from "../themeDefault-CjXaY3ok.mjs";
+import { alpha } from "../utils.mjs";
+import { t as Icon } from "../Icon-CAKRmFz3.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Pagination/PaginationItem/PaginationItem.tsx
+/** Nav item type → registry icon. */
+const NAV_ICONS = {
+	first: "first_page",
+	previous: "chevron_left",
+	next: "chevron_right",
+	last: "last_page"
+};
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"isSelected",
+	"variant",
+	"shape",
+	"size"
+]);
+const ITEM_DIMENSIONS = {
+	sm: "1.75rem",
+	md: "2rem",
+	lg: "2.5rem"
+};
+const baseStyles = {
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: 0,
+	outline: "none",
+	cursor: "pointer",
+	backgroundColor: "transparent",
+	fontFamily: "inherit",
+	transition: "background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease",
+	"&:disabled": {
+		cursor: "not-allowed",
+		opacity: .5
+	}
+};
+const sizeStyles = ({ theme, size = themeDefault(theme, "size", "md") }) => {
+	return {
+		minWidth: ITEM_DIMENSIONS[size] ?? ITEM_DIMENSIONS.md,
+		height: ITEM_DIMENSIONS[size] ?? ITEM_DIMENSIONS.md,
+		fontSize: theme.fontSizes[theme.sizes[size].fontSize]
+	};
+};
+const shapeStyles = ({ theme, shape = themeDefault(theme, "paginationShape", "circular") }) => shape === "rounded" ? { borderRadius: theme.radii[themeDefault(theme, "borderRadius", "md")] } : { borderRadius: "9999px" };
+const colorStyles = ({ theme, variant: v = themeDefault(theme, "paginationVariant", "text"), color = themeDefault(theme, "color", "primary"), isSelected }) => {
+	const c = theme.palette[color];
+	if (isSelected) return {
+		backgroundColor: c.main,
+		color: c.contrastText,
+		border: `${theme.borderWidths.thin} solid ${v === "outlined" ? c.main : "transparent"}`,
+		"&:hover:not(:disabled)": { backgroundColor: c.dark }
+	};
+	return {
+		color: (0, src_exports.get)(theme, "text.primary"),
+		border: `${theme.borderWidths.thin} solid ${v === "outlined" ? (0, src_exports.get)(theme, "border.light") : "transparent"}`,
+		"&:hover:not(:disabled)": { backgroundColor: alpha(c.main, .08) }
+	};
+};
+const focusVisibleStyles = ({ theme }) => ({ "&:focus-visible": {
+	outline: `2px solid ${theme.palette.primary.main}`,
+	outlineOffset: "2px"
+} });
+const ItemRoot = styled("button", {
+	name: "PaginationItem",
+	label: "PaginationItem",
+	shouldForwardProp,
+	systemProps: [src_exports.space]
+})(baseStyles, sizeStyles, shapeStyles, colorStyles, focusVisibleStyles);
+const Ellipsis = styled("span", {
+	name: "PaginationItem",
+	slot: "ellipsis",
+	label: "PaginationEllipsis",
+	shouldForwardProp,
+	systemProps: [src_exports.space]
+})({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center"
+}, sizeStyles, ({ theme }) => ({ color: (0, src_exports.get)(theme, "text.secondary") }));
+function PaginationItem({ type = "page", page, isSelected = false, color, variant, shape, size, as, ...rest }) {
+	if (type === "start-ellipsis" || type === "end-ellipsis") {
+		const { disabled: _disabled, onClick: _onClick, ...ellipsisRest } = rest;
+		return /* @__PURE__ */ jsx(Ellipsis, {
+			as,
+			size,
+			...ellipsisRest,
+			children: "…"
+		});
+	}
+	return /* @__PURE__ */ jsx(ItemRoot, {
+		as,
+		type: as === void 0 ? "button" : void 0,
+		isSelected,
+		color,
+		variant,
+		shape,
+		size,
+		"aria-current": isSelected ? "page" : void 0,
+		...rest,
+		children: type === "page" ? page : /* @__PURE__ */ jsx(Icon, {
+			name: NAV_ICONS[type],
+			size: "1.25em",
+			color: "inherit"
+		})
+	});
+}
+//#endregion
+export { PaginationItem };

package/dist/Pagination.cjs

@@ -0,0 +1,134 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.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
+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] = (0, react.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 = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]);
+const PaginationNav = require_src.styled("nav", {
+	name: "Pagination",
+	label: "PaginationNav",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space]
+})();
+const PaginationList = require_src.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__ */ (0, react_jsx_runtime.jsx)(PaginationNav, {
+		"aria-label": ariaLabel,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationList, { children: items.map((item, index) => {
+			const isEllipsis = item.type === "start-ellipsis" || item.type === "end-ellipsis";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				"aria-hidden": isEllipsis || void 0,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pagination_PaginationItem.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
+exports.Pagination = Pagination;
+exports.PaginationItem = require_Pagination_PaginationItem.PaginationItem;
+exports.usePagination = usePagination;

package/dist/Pagination.d.cts

@@ -0,0 +1,23 @@
+import { l as index_d_exports, o as Theme } from "./index-Bihpwn75.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-CeYkEXU2.cjs";
+import { HTMLAttributes } from "react";
+//#region src/Pagination/Pagination.d.ts
+type PaginationColor = PaginationItemColor;
+type PaginationVariant = PaginationItemVariant;
+type PaginationShape = PaginationItemShape;
+type PaginationSize = PaginationItemSize;
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onChange'>, UsePaginationProps, index_d_exports.SpaceProps<Theme> {
+  /** Selected-item color — resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: PaginationColor;
+  /** Item style — `text` or `outlined`. Default: `'text'`. */
+  variant?: PaginationVariant;
+  /** Item corner shape. Default: `'circular'`. */
+  shape?: PaginationShape;
+  /** Item density — resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: PaginationSize;
+  /** Accessible name per item — important for screen readers. A sensible default is provided. */
+  getItemAriaLabel?: (type: PaginationItemType, page: number | null, isSelected: boolean) => string;
+}
+declare function Pagination({ count, page, defaultPage, siblingCount, boundaryCount, disabled, shouldShowFirstButton, shouldShowLastButton, shouldHidePrevButton, shouldHideNextButton, onChange, color, variant, shape, size, getItemAriaLabel, 'aria-label': ariaLabel, ...rest }: Readonly<PaginationProps>): import("react").JSX.Element;
+//#endregion
+export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Pagination.d.mts

@@ -0,0 +1,23 @@
+import { l as index_d_exports, o as Theme } from "./index-Dm9HfgV6.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-CxSNNzBT2.mjs";
+import { HTMLAttributes } from "react";
+//#region src/Pagination/Pagination.d.ts
+type PaginationColor = PaginationItemColor;
+type PaginationVariant = PaginationItemVariant;
+type PaginationShape = PaginationItemShape;
+type PaginationSize = PaginationItemSize;
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onChange'>, UsePaginationProps, index_d_exports.SpaceProps<Theme> {
+  /** Selected-item color — resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: PaginationColor;
+  /** Item style — `text` or `outlined`. Default: `'text'`. */
+  variant?: PaginationVariant;
+  /** Item corner shape. Default: `'circular'`. */
+  shape?: PaginationShape;
+  /** Item density — resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: PaginationSize;
+  /** Accessible name per item — important for screen readers. A sensible default is provided. */
+  getItemAriaLabel?: (type: PaginationItemType, page: number | null, isSelected: boolean) => string;
+}
+declare function Pagination({ count, page, defaultPage, siblingCount, boundaryCount, disabled, shouldShowFirstButton, shouldShowLastButton, shouldHidePrevButton, shouldHideNextButton, onChange, color, variant, shape, size, getItemAriaLabel, 'aria-label': ariaLabel, ...rest }: Readonly<PaginationProps>): import("react").JSX.Element;
+//#endregion
+export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };