@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/navigation/Pagination.js

@@ -1,190 +1,210 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
-const Pagination = memo(function Pagination2({
-  currentPage,
-  totalPages,
-  onChange,
-  siblingCount = 1,
-  showFirstLast = true,
-  showPrevNext = true,
-  size = "medium",
-  displayMode = "buttons",
-  disabled = false,
-  className = ""
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const sizeConfig = {
-    small: { buttonSize: "28px", fontSize: tokens.typography.fontSize.xxs },
-    medium: { buttonSize: "34px", fontSize: tokens.typography.fontSize.xs }
-  };
-  const config = sizeConfig[size];
-  const pageNumbers = useMemo(() => {
-    const range = [];
-    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-    const showLeftEllipsis = leftSiblingIndex > 2;
-    const showRightEllipsis = rightSiblingIndex < totalPages - 1;
-    if (!showLeftEllipsis && showRightEllipsis) {
-      const leftRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => i + 1);
-      range.push(...leftRange, "ellipsis", totalPages);
-    } else if (showLeftEllipsis && !showRightEllipsis) {
-      const rightRange = Array.from(
-        { length: 3 + 2 * siblingCount },
-        (_, i) => totalPages - 3 - 2 * siblingCount + i + 1
-      );
-      range.push(1, "ellipsis", ...rightRange);
-    } else if (showLeftEllipsis && showRightEllipsis) {
-      const middleRange = Array.from(
-        { length: 2 * siblingCount + 1 },
-        (_, i) => leftSiblingIndex + i
-      );
-      range.push(1, "ellipsis", ...middleRange, "ellipsis", totalPages);
-    } else {
-      range.push(...Array.from({ length: totalPages }, (_, i) => i + 1));
-    }
-    return range;
-  }, [currentPage, totalPages, siblingCount]);
-  const buttonStyle = {
-    width: config.buttonSize,
-    height: config.buttonSize,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: config.fontSize,
-    fontFamily: tokens.typography.fontFamily.mono,
-    fontWeight: tokens.typography.fontWeight.medium,
-    backgroundColor: isTransparentTheme ? `${tokens.colors.background.surface}99` : "transparent",
-    border: `1px solid ${tokens.colors.border.muted}`,
-    borderRadius: tokens.borderRadius.md,
-    cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.5 : 1,
-    transition: `all ${tokens.animation.fast}`,
-    color: tokens.colors.text.primary,
-    backdropFilter: isTransparentTheme ? "blur(8px)" : void 0,
-    WebkitBackdropFilter: isTransparentTheme ? "blur(8px)" : void 0
-  };
-  const activeButtonStyle = {
-    ...buttonStyle,
-    backgroundColor: tokens.colors.accent.primary,
-    borderColor: tokens.colors.accent.primary,
-    color: tokens.colors.text.inverse,
-    boxShadow: `0 0 0 1px ${tokens.colors.accent.primary}55, 0 0 14px ${tokens.colors.accent.primary}55`
-  };
-  const handleClick = (page) => {
-    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {
-      onChange(page);
-    }
-  };
-  const NavButton = ({
-    direction,
-    targetPage,
-    children
-  }) => {
-    const isDisabled = disabled || (direction === "first" || direction === "prev" ? currentPage <= 1 : currentPage >= totalPages);
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => handleClick(targetPage),
-        disabled: isDisabled,
-        "aria-label": direction === "first" ? "Go to first page" : direction === "prev" ? "Go to previous page" : direction === "next" ? "Go to next page" : "Go to last page",
-        style: {
-          ...buttonStyle,
-          opacity: isDisabled ? 0.3 : 1,
-          cursor: isDisabled ? "not-allowed" : "pointer"
-        },
-        children
-      }
-    );
-  };
-  return /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      className: classNames("zendir-pagination", className),
-      "aria-label": "Pagination",
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: tokens.spacing.xs,
-        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-        borderRadius: tokens.borderRadius.lg,
-        ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
-        background: isTransparentTheme ? `${tokens.colors.background.surface}66` : `${tokens.colors.background.surface}66`,
-        backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
-        WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0
-      },
-      children: [
-        showFirstLast && /* @__PURE__ */ jsx(NavButton, { direction: "first", targetPage: 1, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" }) }) }),
-        showPrevNext && /* @__PURE__ */ jsx(NavButton, { direction: "prev", targetPage: currentPage - 1, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }) }),
-        displayMode === "text" ? /* @__PURE__ */ jsxs(
-          "span",
-          {
-            style: {
-              padding: `0 ${tokens.spacing.sm}`,
-              color: tokens.colors.text.secondary,
-              fontSize: tokens.typography.fontSize.xs,
-              fontFamily: tokens.typography.fontFamily.mono,
-              letterSpacing: "0.02em",
-              whiteSpace: "nowrap"
-            },
-            children: [
-              "Page ",
-              currentPage,
-              " of ",
-              totalPages
-            ]
-          }
-        ) : pageNumbers.map(
-          (page, index) => page === "ellipsis" ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                width: config.buttonSize,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                color: tokens.colors.text.muted
-              },
-              children: "..."
-            },
-            `ellipsis-${index}`
-          ) : /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleClick(page),
-              disabled,
-              "aria-current": page === currentPage ? "page" : void 0,
-              style: page === currentPage ? activeButtonStyle : buttonStyle,
-              onMouseEnter: (e) => {
-                if (!disabled && page !== currentPage) {
-                  e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}22`;
-                  e.currentTarget.style.borderColor = tokens.colors.accent.primary;
-                  e.currentTarget.style.transform = "translateY(-1px)";
-                }
-              },
-              onMouseLeave: (e) => {
-                if (!disabled && page !== currentPage) {
-                  e.currentTarget.style.backgroundColor = isTransparentTheme ? `${tokens.colors.background.surface}99` : "transparent";
-                  e.currentTarget.style.borderColor = tokens.colors.border.muted;
-                  e.currentTarget.style.transform = "translateY(0)";
-                }
-              },
-              children: page
-            },
-            page
-          )
-        ),
-        showPrevNext && /* @__PURE__ */ jsx(NavButton, { direction: "next", targetPage: currentPage + 1, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }) }),
-        showFirstLast && /* @__PURE__ */ jsx(NavButton, { direction: "last", targetPage: totalPages, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" }) }) })
-      ]
-    }
-  );
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/navigation/Pagination.tsx
+/**
+* @zendir/ui - Pagination Component
+*
+* Pagination following Astro UX Design System.
+*
+* @example
+* ```tsx
+* <Pagination
+*   currentPage={page}
+*   totalPages={10}
+*   onChange={setPage}
+* />
+* ```
+*/
+var Pagination = memo(function Pagination({ currentPage, totalPages, onChange, siblingCount = 1, showFirstLast = true, showPrevNext = true, size = "medium", displayMode = "buttons", disabled = false, className = "" }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const config = {
+		small: {
+			buttonSize: "28px",
+			fontSize: tokens.typography.fontSize.xxs
+		},
+		medium: {
+			buttonSize: "34px",
+			fontSize: tokens.typography.fontSize.xs
+		}
+	}[size];
+	const pageNumbers = useMemo(() => {
+		const range = [];
+		const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+		const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+		const showLeftEllipsis = leftSiblingIndex > 2;
+		const showRightEllipsis = rightSiblingIndex < totalPages - 1;
+		if (!showLeftEllipsis && showRightEllipsis) {
+			const leftRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => i + 1);
+			range.push(...leftRange, "ellipsis", totalPages);
+		} else if (showLeftEllipsis && !showRightEllipsis) {
+			const rightRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => totalPages - 3 - 2 * siblingCount + i + 1);
+			range.push(1, "ellipsis", ...rightRange);
+		} else if (showLeftEllipsis && showRightEllipsis) {
+			const middleRange = Array.from({ length: 2 * siblingCount + 1 }, (_, i) => leftSiblingIndex + i);
+			range.push(1, "ellipsis", ...middleRange, "ellipsis", totalPages);
+		} else range.push(...Array.from({ length: totalPages }, (_, i) => i + 1));
+		return range;
+	}, [
+		currentPage,
+		totalPages,
+		siblingCount
+	]);
+	const buttonStyle = {
+		width: config.buttonSize,
+		height: config.buttonSize,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: config.fontSize,
+		fontFamily: tokens.typography.fontFamily.mono,
+		fontWeight: tokens.typography.fontWeight.medium,
+		backgroundColor: isTransparentTheme ? `${tokens.colors.background.surface}99` : "transparent",
+		border: `1px solid ${tokens.colors.border.muted}`,
+		borderRadius: tokens.borderRadius.md,
+		cursor: disabled ? "not-allowed" : "pointer",
+		opacity: disabled ? .5 : 1,
+		transition: `all ${tokens.animation.fast}`,
+		color: tokens.colors.text.primary,
+		backdropFilter: isTransparentTheme ? "blur(8px)" : void 0,
+		WebkitBackdropFilter: isTransparentTheme ? "blur(8px)" : void 0
+	};
+	const activeButtonStyle = {
+		...buttonStyle,
+		backgroundColor: tokens.colors.accent.primary,
+		borderColor: tokens.colors.accent.primary,
+		color: tokens.colors.text.inverse,
+		boxShadow: `0 0 0 1px ${tokens.colors.accent.primary}55, 0 0 14px ${tokens.colors.accent.primary}55`
+	};
+	const handleClick = (page) => {
+		if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) onChange(page);
+	};
+	const NavButton = ({ direction, targetPage, children }) => {
+		const isDisabled = disabled || (direction === "first" || direction === "prev" ? currentPage <= 1 : currentPage >= totalPages);
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => handleClick(targetPage),
+			disabled: isDisabled,
+			"aria-label": direction === "first" ? "Go to first page" : direction === "prev" ? "Go to previous page" : direction === "next" ? "Go to next page" : "Go to last page",
+			style: {
+				...buttonStyle,
+				opacity: isDisabled ? .3 : 1,
+				cursor: isDisabled ? "not-allowed" : "pointer"
+			},
+			children
+		});
+	};
+	return /* @__PURE__ */ jsxs("nav", {
+		className: classNames("zendir-pagination", className),
+		"aria-label": "Pagination",
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing.xs,
+			padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+			borderRadius: tokens.borderRadius.lg,
+			...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+			background: isTransparentTheme ? `${tokens.colors.background.surface}66` : `${tokens.colors.background.surface}66`,
+			backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+			WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0
+		},
+		children: [
+			showFirstLast && /* @__PURE__ */ jsx(NavButton, {
+				direction: "first",
+				targetPage: 1,
+				children: /* @__PURE__ */ jsx("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "currentColor",
+					children: /* @__PURE__ */ jsx("path", { d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" })
+				})
+			}),
+			showPrevNext && /* @__PURE__ */ jsx(NavButton, {
+				direction: "prev",
+				targetPage: currentPage - 1,
+				children: /* @__PURE__ */ jsx("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "currentColor",
+					children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" })
+				})
+			}),
+			displayMode === "text" ? /* @__PURE__ */ jsxs("span", {
+				style: {
+					padding: `0 ${tokens.spacing.sm}`,
+					color: tokens.colors.text.secondary,
+					fontSize: tokens.typography.fontSize.xs,
+					fontFamily: tokens.typography.fontFamily.mono,
+					letterSpacing: "0.02em",
+					whiteSpace: "nowrap"
+				},
+				children: [
+					"Page ",
+					currentPage,
+					" of ",
+					totalPages
+				]
+			}) : pageNumbers.map((page, index) => page === "ellipsis" ? /* @__PURE__ */ jsx("span", {
+				style: {
+					width: config.buttonSize,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					color: tokens.colors.text.muted
+				},
+				children: "..."
+			}, `ellipsis-${index}`) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => handleClick(page),
+				disabled,
+				"aria-current": page === currentPage ? "page" : void 0,
+				style: page === currentPage ? activeButtonStyle : buttonStyle,
+				onMouseEnter: (e) => {
+					if (!disabled && page !== currentPage) {
+						e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}22`;
+						e.currentTarget.style.borderColor = tokens.colors.accent.primary;
+						e.currentTarget.style.transform = "translateY(-1px)";
+					}
+				},
+				onMouseLeave: (e) => {
+					if (!disabled && page !== currentPage) {
+						e.currentTarget.style.backgroundColor = isTransparentTheme ? `${tokens.colors.background.surface}99` : "transparent";
+						e.currentTarget.style.borderColor = tokens.colors.border.muted;
+						e.currentTarget.style.transform = "translateY(0)";
+					}
+				},
+				children: page
+			}, page)),
+			showPrevNext && /* @__PURE__ */ jsx(NavButton, {
+				direction: "next",
+				targetPage: currentPage + 1,
+				children: /* @__PURE__ */ jsx("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "currentColor",
+					children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })
+				})
+			}),
+			showFirstLast && /* @__PURE__ */ jsx(NavButton, {
+				direction: "last",
+				targetPage: totalPages,
+				children: /* @__PURE__ */ jsx("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "currentColor",
+					children: /* @__PURE__ */ jsx("path", { d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" })
+				})
+			})
+		]
+	});
 });
-export {
-  Pagination
-};
-//# sourceMappingURL=Pagination.js.map
+//#endregion
+export { Pagination, Pagination as default };
+
+//# sourceMappingURL=Pagination.js.map

package/dist/react/core/navigation/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/react/core/navigation/Pagination.tsx"],"sourcesContent":["/**\n * @zendir/ui - Pagination Component\n * \n * Pagination following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Pagination\n *   currentPage={page}\n *   totalPages={10}\n *   onChange={setPage}\n * />\n * ```\n */\n\nimport React, { memo, useMemo } from 'react';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\n\nexport interface PaginationProps {\n  /** Current page (1-indexed) */\n  currentPage: number;\n  /** Total number of pages */\n  totalPages: number;\n  /** Change handler */\n  onChange: (page: number) => void;\n  /** Number of page buttons to show */\n  siblingCount?: number;\n  /** Show first/last buttons */\n  showFirstLast?: boolean;\n  /** Show prev/next buttons */\n  showPrevNext?: boolean;\n  /** Size variant */\n  size?: 'small' | 'medium';\n  /**\n   * Display mode.\n   * - `'buttons'` — numbered page buttons with ellipsis (default).\n   * - `'text'`    — compact \"Page X of Y\" label with prev/next arrows.\n   */\n  displayMode?: 'buttons' | 'text';\n  /** Disabled state */\n  disabled?: boolean;\n  /** Custom className */\n  className?: string;\n}\n\nexport const Pagination = memo(function Pagination({\n  currentPage,\n  totalPages,\n  onChange,\n  siblingCount = 1,\n  showFirstLast = true,\n  showPrevNext = true,\n  size = 'medium',\n  displayMode = 'buttons',\n  disabled = false,\n  className = '',\n}: PaginationProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  \n  const sizeConfig = {\n    small: { buttonSize: '28px', fontSize: tokens.typography.fontSize.xxs },\n    medium: { buttonSize: '34px', fontSize: tokens.typography.fontSize.xs },\n  };\n  const config = sizeConfig[size];\n  \n  // Calculate visible page numbers\n  const pageNumbers = useMemo(() => {\n    const range: (number | 'ellipsis')[] = [];\n    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\n    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\n    \n    const showLeftEllipsis = leftSiblingIndex > 2;\n    const showRightEllipsis = rightSiblingIndex < totalPages - 1;\n    \n    if (!showLeftEllipsis && showRightEllipsis) {\n      const leftRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => i + 1);\n      range.push(...leftRange, 'ellipsis', totalPages);\n    } else if (showLeftEllipsis && !showRightEllipsis) {\n      const rightRange = Array.from(\n        { length: 3 + 2 * siblingCount },\n        (_, i) => totalPages - 3 - 2 * siblingCount + i + 1\n      );\n      range.push(1, 'ellipsis', ...rightRange);\n    } else if (showLeftEllipsis && showRightEllipsis) {\n      const middleRange = Array.from(\n        { length: 2 * siblingCount + 1 },\n        (_, i) => leftSiblingIndex + i\n      );\n      range.push(1, 'ellipsis', ...middleRange, 'ellipsis', totalPages);\n    } else {\n      range.push(...Array.from({ length: totalPages }, (_, i) => i + 1));\n    }\n    \n    return range;\n  }, [currentPage, totalPages, siblingCount]);\n  \n  const buttonStyle: React.CSSProperties = {\n    width: config.buttonSize,\n    height: config.buttonSize,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: config.fontSize,\n    fontFamily: tokens.typography.fontFamily.mono,\n    fontWeight: tokens.typography.fontWeight.medium,\n    backgroundColor: isTransparentTheme ? `${tokens.colors.background.surface}99` : 'transparent',\n    border: `1px solid ${tokens.colors.border.muted}`,\n    borderRadius: tokens.borderRadius.md,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    transition: `all ${tokens.animation.fast}`,\n    color: tokens.colors.text.primary,\n    backdropFilter: isTransparentTheme ? 'blur(8px)' : undefined,\n    WebkitBackdropFilter: isTransparentTheme ? 'blur(8px)' : undefined,\n  };\n  \n  const activeButtonStyle: React.CSSProperties = {\n    ...buttonStyle,\n    backgroundColor: tokens.colors.accent.primary,\n    borderColor: tokens.colors.accent.primary,\n    color: tokens.colors.text.inverse,\n    boxShadow: `0 0 0 1px ${tokens.colors.accent.primary}55, 0 0 14px ${tokens.colors.accent.primary}55`,\n  };\n  \n  const handleClick = (page: number) => {\n    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n      onChange(page);\n    }\n  };\n  \n  const NavButton = ({ \n    direction, \n    targetPage, \n    children \n  }: { \n    direction: 'first' | 'prev' | 'next' | 'last'; \n    targetPage: number;\n    children: React.ReactNode;\n  }) => {\n    const isDisabled = disabled || \n      (direction === 'first' || direction === 'prev' ? currentPage <= 1 : currentPage >= totalPages);\n    \n    return (\n      <button\n        type=\"button\"\n        onClick={() => handleClick(targetPage)}\n        disabled={isDisabled}\n        aria-label={\n        direction === 'first' ? 'Go to first page' :\n        direction === 'prev' ? 'Go to previous page' :\n        direction === 'next' ? 'Go to next page' :\n        'Go to last page'\n      }\n        style={{\n          ...buttonStyle,\n          opacity: isDisabled ? 0.3 : 1,\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n        }}\n      >\n        {children}\n      </button>\n    );\n  };\n  \n  return (\n    <nav\n      className={classNames('zendir-pagination', className)}\n      aria-label=\"Pagination\"\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: tokens.spacing.xs,\n        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n        borderRadius: tokens.borderRadius.lg,\n        ...(tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }),\n        background: isTransparentTheme ? `${tokens.colors.background.surface}66` : `${tokens.colors.background.surface}66`,\n        backdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n      }}\n    >\n      {showFirstLast && (\n        <NavButton direction=\"first\" targetPage={1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z\" />\n          </svg>\n        </NavButton>\n      )}\n      \n      {showPrevNext && (\n        <NavButton direction=\"prev\" targetPage={currentPage - 1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n          </svg>\n        </NavButton>\n      )}\n      \n      {displayMode === 'text' ? (\n        <span\n          style={{\n            padding: `0 ${tokens.spacing.sm}`,\n            color: tokens.colors.text.secondary,\n            fontSize: tokens.typography.fontSize.xs,\n            fontFamily: tokens.typography.fontFamily.mono,\n            letterSpacing: '0.02em',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          Page {currentPage} of {totalPages}\n        </span>\n      ) : (\n        pageNumbers.map((page, index) => \n          page === 'ellipsis' ? (\n            <span\n              key={`ellipsis-${index}`}\n              style={{\n                width: config.buttonSize,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                color: tokens.colors.text.muted,\n              }}\n            >\n              ...\n            </span>\n          ) : (\n            <button\n              key={page}\n              type=\"button\"\n              onClick={() => handleClick(page)}\n              disabled={disabled}\n              aria-current={page === currentPage ? 'page' : undefined}\n              style={page === currentPage ? activeButtonStyle : buttonStyle}\n              onMouseEnter={(e) => {\n                if (!disabled && page !== currentPage) {\n                  e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}22`;\n                  e.currentTarget.style.borderColor = tokens.colors.accent.primary;\n                  e.currentTarget.style.transform = 'translateY(-1px)';\n                }\n              }}\n              onMouseLeave={(e) => {\n                if (!disabled && page !== currentPage) {\n                  e.currentTarget.style.backgroundColor = isTransparentTheme ? `${tokens.colors.background.surface}99` : 'transparent';\n                  e.currentTarget.style.borderColor = tokens.colors.border.muted;\n                  e.currentTarget.style.transform = 'translateY(0)';\n                }\n              }}\n            >\n              {page}\n            </button>\n          )\n        )\n      )}\n      \n      {showPrevNext && (\n        <NavButton direction=\"next\" targetPage={currentPage + 1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n          </svg>\n        </NavButton>\n      )}\n      \n      {showFirstLast && (\n        <NavButton direction=\"last\" targetPage={totalPages}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z\" />\n          </svg>\n        </NavButton>\n      )}\n    </nav>\n  );\n});\n\nexport default Pagination;\n"],"names":["Pagination"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/react/core/navigation/Pagination.tsx"],"sourcesContent":["/**\n * @zendir/ui - Pagination Component\n *\n * Pagination following Astro UX Design System.\n *\n * @example\n * ```tsx\n * <Pagination\n *   currentPage={page}\n *   totalPages={10}\n *   onChange={setPage}\n * />\n * ```\n */\n\nimport React, { memo, useMemo } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { classNames } from \"../../utils\";\n\nexport interface PaginationProps {\n  /** Current page (1-indexed) */\n  currentPage: number;\n  /** Total number of pages */\n  totalPages: number;\n  /** Change handler */\n  onChange: (page: number) => void;\n  /** Number of page buttons to show */\n  siblingCount?: number;\n  /** Show first/last buttons */\n  showFirstLast?: boolean;\n  /** Show prev/next buttons */\n  showPrevNext?: boolean;\n  /** Size variant */\n  size?: \"small\" | \"medium\";\n  /**\n   * Display mode.\n   * - `'buttons'` — numbered page buttons with ellipsis (default).\n   * - `'text'`    — compact \"Page X of Y\" label with prev/next arrows.\n   */\n  displayMode?: \"buttons\" | \"text\";\n  /** Disabled state */\n  disabled?: boolean;\n  /** Custom className */\n  className?: string;\n}\n\nexport const Pagination = memo(function Pagination({\n  currentPage,\n  totalPages,\n  onChange,\n  siblingCount = 1,\n  showFirstLast = true,\n  showPrevNext = true,\n  size = \"medium\",\n  displayMode = \"buttons\",\n  disabled = false,\n  className = \"\",\n}: PaginationProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n\n  const sizeConfig = {\n    small: { buttonSize: \"28px\", fontSize: tokens.typography.fontSize.xxs },\n    medium: { buttonSize: \"34px\", fontSize: tokens.typography.fontSize.xs },\n  };\n  const config = sizeConfig[size];\n\n  // Calculate visible page numbers\n  const pageNumbers = useMemo(() => {\n    const range: (number | \"ellipsis\")[] = [];\n    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\n    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\n\n    const showLeftEllipsis = leftSiblingIndex > 2;\n    const showRightEllipsis = rightSiblingIndex < totalPages - 1;\n\n    if (!showLeftEllipsis && showRightEllipsis) {\n      const leftRange = Array.from(\n        { length: 3 + 2 * siblingCount },\n        (_, i) => i + 1,\n      );\n      range.push(...leftRange, \"ellipsis\", totalPages);\n    } else if (showLeftEllipsis && !showRightEllipsis) {\n      const rightRange = Array.from(\n        { length: 3 + 2 * siblingCount },\n        (_, i) => totalPages - 3 - 2 * siblingCount + i + 1,\n      );\n      range.push(1, \"ellipsis\", ...rightRange);\n    } else if (showLeftEllipsis && showRightEllipsis) {\n      const middleRange = Array.from(\n        { length: 2 * siblingCount + 1 },\n        (_, i) => leftSiblingIndex + i,\n      );\n      range.push(1, \"ellipsis\", ...middleRange, \"ellipsis\", totalPages);\n    } else {\n      range.push(...Array.from({ length: totalPages }, (_, i) => i + 1));\n    }\n\n    return range;\n  }, [currentPage, totalPages, siblingCount]);\n\n  const buttonStyle: React.CSSProperties = {\n    width: config.buttonSize,\n    height: config.buttonSize,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: config.fontSize,\n    fontFamily: tokens.typography.fontFamily.mono,\n    fontWeight: tokens.typography.fontWeight.medium,\n    backgroundColor: isTransparentTheme\n      ? `${tokens.colors.background.surface}99`\n      : \"transparent\",\n    border: `1px solid ${tokens.colors.border.muted}`,\n    borderRadius: tokens.borderRadius.md,\n    cursor: disabled ? \"not-allowed\" : \"pointer\",\n    opacity: disabled ? 0.5 : 1,\n    transition: `all ${tokens.animation.fast}`,\n    color: tokens.colors.text.primary,\n    backdropFilter: isTransparentTheme ? \"blur(8px)\" : undefined,\n    WebkitBackdropFilter: isTransparentTheme ? \"blur(8px)\" : undefined,\n  };\n\n  const activeButtonStyle: React.CSSProperties = {\n    ...buttonStyle,\n    backgroundColor: tokens.colors.accent.primary,\n    borderColor: tokens.colors.accent.primary,\n    color: tokens.colors.text.inverse,\n    boxShadow: `0 0 0 1px ${tokens.colors.accent.primary}55, 0 0 14px ${tokens.colors.accent.primary}55`,\n  };\n\n  const handleClick = (page: number) => {\n    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n      onChange(page);\n    }\n  };\n\n  const NavButton = ({\n    direction,\n    targetPage,\n    children,\n  }: {\n    direction: \"first\" | \"prev\" | \"next\" | \"last\";\n    targetPage: number;\n    children: React.ReactNode;\n  }) => {\n    const isDisabled =\n      disabled ||\n      (direction === \"first\" || direction === \"prev\"\n        ? currentPage <= 1\n        : currentPage >= totalPages);\n\n    return (\n      <button\n        type=\"button\"\n        onClick={() => handleClick(targetPage)}\n        disabled={isDisabled}\n        aria-label={\n          direction === \"first\"\n            ? \"Go to first page\"\n            : direction === \"prev\"\n              ? \"Go to previous page\"\n              : direction === \"next\"\n                ? \"Go to next page\"\n                : \"Go to last page\"\n        }\n        style={{\n          ...buttonStyle,\n          opacity: isDisabled ? 0.3 : 1,\n          cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n        }}\n      >\n        {children}\n      </button>\n    );\n  };\n\n  return (\n    <nav\n      className={classNames(\"zendir-pagination\", className)}\n      aria-label=\"Pagination\"\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: tokens.spacing.xs,\n        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n        borderRadius: tokens.borderRadius.lg,\n        ...(tokens.colors.border.cardStyle ?? {\n          border: `1px solid ${tokens.colors.border.muted}`,\n        }),\n        background: isTransparentTheme\n          ? `${tokens.colors.background.surface}66`\n          : `${tokens.colors.background.surface}66`,\n        backdropFilter: isTransparentTheme ? \"blur(10px)\" : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? \"blur(10px)\" : undefined,\n      }}\n    >\n      {showFirstLast && (\n        <NavButton direction=\"first\" targetPage={1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z\" />\n          </svg>\n        </NavButton>\n      )}\n\n      {showPrevNext && (\n        <NavButton direction=\"prev\" targetPage={currentPage - 1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n          </svg>\n        </NavButton>\n      )}\n\n      {displayMode === \"text\" ? (\n        <span\n          style={{\n            padding: `0 ${tokens.spacing.sm}`,\n            color: tokens.colors.text.secondary,\n            fontSize: tokens.typography.fontSize.xs,\n            fontFamily: tokens.typography.fontFamily.mono,\n            letterSpacing: \"0.02em\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          Page {currentPage} of {totalPages}\n        </span>\n      ) : (\n        pageNumbers.map((page, index) =>\n          page === \"ellipsis\" ? (\n            <span\n              key={`ellipsis-${index}`}\n              style={{\n                width: config.buttonSize,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                color: tokens.colors.text.muted,\n              }}\n            >\n              ...\n            </span>\n          ) : (\n            <button\n              key={page}\n              type=\"button\"\n              onClick={() => handleClick(page)}\n              disabled={disabled}\n              aria-current={page === currentPage ? \"page\" : undefined}\n              style={page === currentPage ? activeButtonStyle : buttonStyle}\n              onMouseEnter={(e) => {\n                if (!disabled && page !== currentPage) {\n                  e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}22`;\n                  e.currentTarget.style.borderColor =\n                    tokens.colors.accent.primary;\n                  e.currentTarget.style.transform = \"translateY(-1px)\";\n                }\n              }}\n              onMouseLeave={(e) => {\n                if (!disabled && page !== currentPage) {\n                  e.currentTarget.style.backgroundColor = isTransparentTheme\n                    ? `${tokens.colors.background.surface}99`\n                    : \"transparent\";\n                  e.currentTarget.style.borderColor =\n                    tokens.colors.border.muted;\n                  e.currentTarget.style.transform = \"translateY(0)\";\n                }\n              }}\n            >\n              {page}\n            </button>\n          ),\n        )\n      )}\n\n      {showPrevNext && (\n        <NavButton direction=\"next\" targetPage={currentPage + 1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n          </svg>\n        </NavButton>\n      )}\n\n      {showFirstLast && (\n        <NavButton direction=\"last\" targetPage={totalPages}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z\" />\n          </svg>\n        </NavButton>\n      )}\n    </nav>\n  );\n});\n\nexport default Pagination;\n"],"mappings":"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"}

package/dist/react/core/navigation/SideNav.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { IconName } from '../display/Icon';
-
 export interface SideNavProps {
     /** Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. */
     collapsed?: boolean;
@@ -18,13 +17,13 @@ export interface SideNavProps {
      * label — matching the v2.3 operator/admin secondary-nav mock. Default
      * `'default'`. (TODO: row inset + mono section headings for full mock parity.)
      */
-    density?: 'default' | 'compact';
+    density?: "default" | "compact";
     /**
      * Mobile viewport behavior.
      * - `'drawer'` (default): hamburger button with slide-out overlay drawer.
      * - `'collapsed'`: persistent collapsed icon-only strip (same as tablet).
      */
-    mobileVariant?: 'drawer' | 'collapsed';
+    mobileVariant?: "drawer" | "collapsed";
     /** Children (SideNav.Header, SideNav.Item, SideNav.Section, SideNav.Footer) */
     children?: React.ReactNode;
     /** Custom style */
@@ -45,7 +44,7 @@ export interface SideNavHeaderProps {
     /** Role badge (e.g., "Operator", "Admin") */
     badge?: string;
     /** Badge variant for color */
-    badgeVariant?: 'info' | 'success' | 'warning' | 'caution';
+    badgeVariant?: "info" | "success" | "warning" | "caution";
     /**
      * Fixed height (px) for the top logo band. Title, subtitle, and badge render below this band
      * so different logo assets still line up across apps (dashboard vs operator).
@@ -65,7 +64,7 @@ export interface SideNavItemProps {
     /** Small tag/chip displayed after the label (e.g. "v2", "NEW", "BETA") */
     tag?: string;
     /** Tag color variant */
-    tagVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger';
+    tagVariant?: "default" | "info" | "success" | "warning" | "danger";
     /** Link href (renders <a>) */
     href?: string;
     /** Click handler (renders <button>) */
@@ -83,7 +82,7 @@ export interface SideNavItemProps {
      * Shapes per official Astro UXDS: normal = ● filled circle, standby = ◎ ring,
      * caution = ■ square, serious = ◆ diamond, critical = ▼ triangle, off = · small circle.
      */
-    status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';
+    status?: "off" | "standby" | "normal" | "caution" | "serious" | "critical";
     /** Optional status label shown as tooltip or text next to status shape */
     statusLabel?: string;
     /** Right-side slot — arbitrary ReactNode rendered at the end of the item row */