@multiplatform.one/components 6.1.0 → 6.4.0

package/dist/esm/Pagination.mjs

@@ -1,35 +1,187 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { ArrowLeftIcon, ArrowRightIcon, CheckIcon } from "@phosphor-icons/react";
-import { useCallback } from "react";
+import { ArrowLeftIcon, ArrowRightIcon, CaretDoubleLeftIcon, CaretDoubleRightIcon, CaretLeftIcon, CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Button } from "@multiplatform.one/forms";
-import { View, XStack } from "tamagui";
+import { Text, View, XStack } from "tamagui";
 import { componentColors } from "./componentColors.mjs";
+import { useDirection } from "./hooks/useDirection.mjs";
+import { bidiIsolate, withInterp } from "./shared/t.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+const range = (start, end) => Array.from({
+  length: Math.max(end - start + 1, 0)
+}, (_, i) => start + i);
+function getPaginationItems(total, page, siblingCount = 1, boundaryCount = 1) {
+  if (total <= 0) return [];
+  const startPages = range(1, Math.min(boundaryCount, total));
+  const endPages = range(Math.max(total - boundaryCount + 1, boundaryCount + 1), total);
+  const siblingsStart = Math.max(Math.min(page - siblingCount, total - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+  const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : total - 1);
+  const items = [...startPages];
+  if (siblingsStart > boundaryCount + 2) {
+    items.push("ellipsis-start");
+  } else if (boundaryCount + 1 < total - boundaryCount) {
+    items.push(boundaryCount + 1);
+  }
+  items.push(...range(siblingsStart, siblingsEnd));
+  if (siblingsEnd < total - boundaryCount - 1) {
+    items.push("ellipsis-end");
+  } else if (total - boundaryCount > boundaryCount) {
+    items.push(total - boundaryCount);
+  }
+  items.push(...endPages);
+  return items;
+}
 function Pagination({
   total,
   activeIndex,
   onChange,
+  page,
+  defaultPage,
+  onPageChange,
   completedSteps,
   allowJumpTo = false,
   isLastStep = false,
   onSubmit,
   disabled = false,
   variant = "dots",
+  totalItems,
+  pageSize,
+  showSummary = false,
+  siblingCount = 1,
+  boundaryCount = 1,
+  showFirstLast = false,
   ...stackProps
 }) {
+  const {
+    t
+  } = useTranslation();
   const {
     knobProps
   } = useResolvedKnobs();
+  const motionTransition = knobProps.transition || "quick";
+  const isRTL = useDirection() === "rtl";
+  const PrevIcon = isRTL ? CaretRightIcon : CaretLeftIcon;
+  const NextIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
+  const FirstIcon = isRTL ? CaretDoubleRightIcon : CaretDoubleLeftIcon;
+  const LastIcon = isRTL ? CaretDoubleLeftIcon : CaretDoubleRightIcon;
+  const PrevArrowIcon = isRTL ? ArrowRightIcon : ArrowLeftIcon;
+  const NextArrowIcon = isRTL ? ArrowLeftIcon : ArrowRightIcon;
+  const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage ?? 1);
+  const controlledIndex = page != null ? page - 1 : activeIndex;
+  const index = controlledIndex ?? uncontrolledPage - 1;
+  const currentPage = index + 1;
+  const goTo = useCallback(nextIndex => {
+    const clamped = Math.max(0, Math.min(nextIndex, total - 1));
+    if (controlledIndex == null) setUncontrolledPage(clamped + 1);
+    onChange?.(clamped);
+    onPageChange?.(clamped + 1);
+  }, [controlledIndex, total, onChange, onPageChange]);
   const handlePrev = useCallback(() => {
-    if (activeIndex > 0) onChange(activeIndex - 1);
-  }, [activeIndex, onChange]);
+    if (index > 0) goTo(index - 1);
+  }, [index, goTo]);
   const handleNext = useCallback(() => {
     if (isLastStep && onSubmit) {
       onSubmit();
-    } else if (activeIndex < total - 1) {
-      onChange(activeIndex + 1);
+    } else if (index < total - 1) {
+      goTo(index + 1);
+    }
+  }, [index, total, isLastStep, onSubmit, goTo]);
+  const activateOnEnterSpace = (fn, enabled) => e => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (enabled) fn();
     }
-  }, [activeIndex, total, isLastStep, onSubmit, onChange]);
+  };
+  if (variant === "numbered") {
+    const items = getPaginationItems(total, currentPage, siblingCount, boundaryCount);
+    const canPrev = !disabled && currentPage > 1;
+    const canNext = !disabled && currentPage < total;
+    const summary = showSummary && totalItems != null && pageSize != null ? bidiIsolate(totalItems === 0 ? t("0 of 0") : withInterp(t("{{start}}\u2013{{end}} of {{total}}"), {
+      start: (currentPage - 1) * pageSize + 1,
+      end: Math.min(currentPage * pageSize, totalItems),
+      total: totalItems
+    })) : void 0;
+    return /* @__PURE__ */jsxs(XStack, {
+      alignItems: "center",
+      justifyContent: "center",
+      role: "navigation",
+      "aria-label": t("Pagination"),
+      ...knobProps.gap,
+      ...stackProps,
+      children: [showFirstLast && /* @__PURE__ */jsx(Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        icon: FirstIcon,
+        onPress: () => goTo(0),
+        disabled: !canPrev,
+        "aria-label": t("Go to first page"),
+        onKeyDown: activateOnEnterSpace(() => goTo(0), canPrev)
+      }), /* @__PURE__ */jsx(Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        icon: PrevIcon,
+        onPress: handlePrev,
+        disabled: !canPrev,
+        "aria-label": t("Go to previous page"),
+        onKeyDown: activateOnEnterSpace(handlePrev, canPrev)
+      }), /* @__PURE__ */jsx(XStack, {
+        alignItems: "center",
+        gap: "$1",
+        children: items.map(item => {
+          if (typeof item !== "number") {
+            return /* @__PURE__ */jsx(Text, {
+              "aria-hidden": true,
+              userSelect: "none",
+              textAlign: "center",
+              minWidth: "$2",
+              ...knobProps.body,
+              color: componentColors.text.muted,
+              children: "\u2026"
+            }, item);
+          }
+          const isCurrent = item === currentPage;
+          return /* @__PURE__ */jsx(Button, {
+            size: knobProps.sizeToken,
+            minWidth: knobProps.sizeToken,
+            paddingHorizontal: "$2",
+            accent: isCurrent,
+            chromeless: !isCurrent,
+            disabled,
+            onPress: () => goTo(item - 1),
+            "aria-label": withInterp(t("Page {{number}}"), {
+              number: item
+            }),
+            "aria-current": isCurrent ? "page" : void 0,
+            onKeyDown: activateOnEnterSpace(() => goTo(item - 1), !disabled),
+            children: String(item)
+          }, item);
+        })
+      }), /* @__PURE__ */jsx(Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        icon: NextIcon,
+        onPress: handleNext,
+        disabled: !canNext,
+        "aria-label": t("Go to next page"),
+        onKeyDown: activateOnEnterSpace(handleNext, canNext)
+      }), showFirstLast && /* @__PURE__ */jsx(Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        icon: LastIcon,
+        onPress: () => goTo(total - 1),
+        disabled: !canNext,
+        "aria-label": t("Go to last page"),
+        onKeyDown: activateOnEnterSpace(() => goTo(total - 1), canNext)
+      }), summary && /* @__PURE__ */jsx(Text, {
+        ...knobProps.body,
+        color: componentColors.text.muted,
+        "aria-live": "polite",
+        userSelect: "none",
+        children: summary
+      })]
+    });
+  }
   const dotSize = variant === "bars" ? "$1.5" : "$0.75";
   const activeDotSize = variant === "bars" ? "$3" : "$2";
   return /* @__PURE__ */jsxs(XStack, {
@@ -40,11 +192,12 @@ function Pagination({
     children: [/* @__PURE__ */jsx(Button, {
       size: knobProps.sizeToken,
       circular: true,
-      icon: ArrowLeftIcon,
+      icon: PrevArrowIcon,
       onPress: handlePrev,
-      disabled: disabled || activeIndex === 0,
+      disabled: disabled || index === 0,
       variant: "outlined",
-      opacity: activeIndex === 0 ? 0.3 : 1
+      "aria-label": t("Previous page"),
+      onKeyDown: activateOnEnterSpace(handlePrev, !(disabled || index === 0))
     }), /* @__PURE__ */jsx(XStack, {
       alignItems: "center",
       justifyContent: "center",
@@ -55,21 +208,45 @@ function Pagination({
       borderRadius: "$10",
       children: Array.from({
         length: total
-      }).map((_, index) => {
-        const isActive = index === activeIndex;
-        const isCompleted = completedSteps?.has(index);
+      }).map((_, dotIndex) => {
+        const isActive = dotIndex === index;
+        const isCompleted = completedSteps?.has(dotIndex);
         const canJump = allowJumpTo && !disabled;
         const dotProps = {
           width: isActive ? activeDotSize : dotSize,
           height: dotSize,
           borderRadius: "$10",
           backgroundColor: isCompleted && !isActive ? componentColors.indicator.completed : isActive ? componentColors.indicator.current : componentColors.indicator.track,
-          animation: "quick",
+          transition: motionTransition,
           cursor: canJump ? "pointer" : void 0,
           alignItems: "center",
           justifyContent: "center",
+          "aria-current": isActive ? "step" : void 0,
+          "data-pagination-dot": isActive ? "active" : "idle",
+          // Belt-and-suspenders for the CSS driver: named `transition` covers
+          // Tamagui layout props; explicit width/bg ensures measurable intermediates.
+          style: {
+            transition: `width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease`
+          },
           ...(canJump ? {
-            onPress: () => onChange(index)
+            onPress: () => goTo(dotIndex),
+            role: "button",
+            "aria-label": withInterp(t("Go to step {{number}}"), {
+              number: dotIndex + 1
+            }),
+            tabIndex: 0,
+            focusVisibleStyle: {
+              outlineColor: "$outlineColor",
+              outlineWidth: 2,
+              outlineStyle: "solid",
+              outlineOffset: 1
+            },
+            onKeyDown: e => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                goTo(dotIndex);
+              }
+            }
           } : {})
         };
         return /* @__PURE__ */jsx(View, {
@@ -79,18 +256,20 @@ function Pagination({
             color: "white",
             weight: "bold"
           })
-        }, index);
+        }, dotIndex);
       })
     }), /* @__PURE__ */jsx(Button, {
       size: knobProps.sizeToken,
       circular: true,
-      icon: isLastStep ? CheckIcon : ArrowRightIcon,
+      icon: isLastStep ? CheckIcon : NextArrowIcon,
       onPress: handleNext,
-      disabled: disabled || !isLastStep && activeIndex >= total - 1 && !onSubmit,
+      disabled: disabled || !isLastStep && index >= total - 1 && !onSubmit,
       variant: isLastStep ? void 0 : "outlined",
-      theme: isLastStep ? "active" : void 0
+      theme: isLastStep ? "active" : void 0,
+      "aria-label": isLastStep ? t("Submit") : t("Next page"),
+      onKeyDown: activateOnEnterSpace(handleNext, !(disabled || !isLastStep && index >= total - 1 && !onSubmit))
     })]
   });
 }
-export { Pagination };
+export { Pagination, getPaginationItems };
 //# sourceMappingURL=Pagination.mjs.map

package/dist/esm/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useResolvedKnobs","ArrowLeftIcon","ArrowRightIcon","CheckIcon","useCallback","Button","View","XStack","componentColors","jsx","jsxs","Pagination","total","activeIndex","onChange","completedSteps","allowJumpTo","isLastStep","onSubmit","disabled","variant","stackProps","knobProps","handlePrev","handleNext","dotSize","activeDotSize","alignItems","justifyContent","gap","children","size","sizeToken","circular","icon","onPress","opacity","backgroundColor","interactive","background","paddingHorizontal","panelPadding","padding","height","borderRadius","Array","from","length","map","_","index","isActive","isCompleted","has","canJump","dotProps","width","indicator","completed","current","track","animation","cursor","color","weight","theme"],"sources":["../../src/Pagination.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useResolvedKnobs","ArrowLeftIcon","ArrowRightIcon","CaretDoubleLeftIcon","CaretDoubleRightIcon","CaretLeftIcon","CaretRightIcon","CheckIcon","useCallback","useState","useTranslation","Button","Text","View","XStack","componentColors","useDirection","bidiIsolate","withInterp","jsx","jsxs","range","start","end","Array","from","length","Math","max","_","i","getPaginationItems","total","page","siblingCount","boundaryCount","startPages","min","endPages","siblingsStart","siblingsEnd","items","push","Pagination","activeIndex","onChange","defaultPage","onPageChange","completedSteps","allowJumpTo","isLastStep","onSubmit","disabled","variant","totalItems","pageSize","showSummary","showFirstLast","stackProps","t","knobProps","motionTransition","transition","isRTL","PrevIcon","NextIcon","FirstIcon","LastIcon","PrevArrowIcon","NextArrowIcon","uncontrolledPage","setUncontrolledPage","controlledIndex","index","currentPage","goTo","nextIndex","clamped","handlePrev","handleNext","activateOnEnterSpace","fn","enabled","e","key","preventDefault","canPrev","canNext","summary","alignItems","justifyContent","role","gap","children","size","sizeToken","icon","onPress","onKeyDown","map","item","userSelect","textAlign","minWidth","body","color","text","muted","isCurrent","paddingHorizontal","accent","chromeless","number","String","dotSize","activeDotSize","circular","backgroundColor","interactive","background","panelPadding","padding","height","borderRadius","dotIndex","isActive","isCompleted","has","canJump","dotProps","width","indicator","completed","current","track","cursor","style","tabIndex","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","weight","theme"],"sources":["../../src/Pagination.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/Pagination.native.js

@@ -1,36 +1,208 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { ArrowLeftIcon, ArrowRightIcon, CheckIcon } from "@phosphor-icons/react";
-import { useCallback } from "react";
+import { ArrowLeftIcon, ArrowRightIcon, CaretDoubleLeftIcon, CaretDoubleRightIcon, CaretLeftIcon, CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Button } from "@multiplatform.one/forms";
-import { View, XStack } from "tamagui";
+import { Text, View, XStack } from "tamagui";
 import { componentColors } from "./componentColors.native.js";
+import { useDirection } from "./hooks/useDirection.native.js";
+import { bidiIsolate, withInterp } from "./shared/t.native.js";
+var range = function range2(start, end) {
+  return Array.from({
+    length: Math.max(end - start + 1, 0)
+  }, function (_, i) {
+    return start + i;
+  });
+};
+function getPaginationItems(total, page) {
+  var siblingCount = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1,
+    boundaryCount = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 1;
+  if (total <= 0) return [];
+  var startPages = range(1, Math.min(boundaryCount, total));
+  var endPages = range(Math.max(total - boundaryCount + 1, boundaryCount + 1), total);
+  var siblingsStart = Math.max(Math.min(page - siblingCount, total - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+  var siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : total - 1);
+  var items = [...startPages];
+  if (siblingsStart > boundaryCount + 2) {
+    items.push("ellipsis-start");
+  } else if (boundaryCount + 1 < total - boundaryCount) {
+    items.push(boundaryCount + 1);
+  }
+  items.push(...range(siblingsStart, siblingsEnd));
+  if (siblingsEnd < total - boundaryCount - 1) {
+    items.push("ellipsis-end");
+  } else if (total - boundaryCount > boundaryCount) {
+    items.push(total - boundaryCount);
+  }
+  items.push(...endPages);
+  return items;
+}
 function Pagination(param) {
   var {
     total,
     activeIndex,
     onChange,
+    page,
+    defaultPage,
+    onPageChange,
     completedSteps,
     allowJumpTo = false,
     isLastStep = false,
     onSubmit,
     disabled = false,
     variant = "dots",
+    totalItems,
+    pageSize,
+    showSummary = false,
+    siblingCount = 1,
+    boundaryCount = 1,
+    showFirstLast = false,
     ...stackProps
   } = param;
+  var {
+    t
+  } = useTranslation();
   var {
     knobProps
   } = useResolvedKnobs();
+  var motionTransition = knobProps.transition || "quick";
+  var isRTL = useDirection() === "rtl";
+  var PrevIcon = isRTL ? CaretRightIcon : CaretLeftIcon;
+  var NextIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
+  var FirstIcon = isRTL ? CaretDoubleRightIcon : CaretDoubleLeftIcon;
+  var LastIcon = isRTL ? CaretDoubleLeftIcon : CaretDoubleRightIcon;
+  var PrevArrowIcon = isRTL ? ArrowRightIcon : ArrowLeftIcon;
+  var NextArrowIcon = isRTL ? ArrowLeftIcon : ArrowRightIcon;
+  var [uncontrolledPage, setUncontrolledPage] = useState(defaultPage !== null && defaultPage !== void 0 ? defaultPage : 1);
+  var controlledIndex = page != null ? page - 1 : activeIndex;
+  var index = controlledIndex !== null && controlledIndex !== void 0 ? controlledIndex : uncontrolledPage - 1;
+  var currentPage = index + 1;
+  var goTo = useCallback(function (nextIndex) {
+    var clamped = Math.max(0, Math.min(nextIndex, total - 1));
+    if (controlledIndex == null) setUncontrolledPage(clamped + 1);
+    onChange === null || onChange === void 0 ? void 0 : onChange(clamped);
+    onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(clamped + 1);
+  }, [controlledIndex, total, onChange, onPageChange]);
   var handlePrev = useCallback(function () {
-    if (activeIndex > 0) onChange(activeIndex - 1);
-  }, [activeIndex, onChange]);
+    if (index > 0) goTo(index - 1);
+  }, [index, goTo]);
   var handleNext = useCallback(function () {
     if (isLastStep && onSubmit) {
       onSubmit();
-    } else if (activeIndex < total - 1) {
-      onChange(activeIndex + 1);
+    } else if (index < total - 1) {
+      goTo(index + 1);
     }
-  }, [activeIndex, total, isLastStep, onSubmit, onChange]);
+  }, [index, total, isLastStep, onSubmit, goTo]);
+  var activateOnEnterSpace = function activateOnEnterSpace2(fn, enabled) {
+    return function (e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (enabled) fn();
+      }
+    };
+  };
+  if (variant === "numbered") {
+    var items = getPaginationItems(total, currentPage, siblingCount, boundaryCount);
+    var canPrev = !disabled && currentPage > 1;
+    var canNext = !disabled && currentPage < total;
+    var summary = showSummary && totalItems != null && pageSize != null ? bidiIsolate(totalItems === 0 ? t("0 of 0") : withInterp(t("{{start}}\u2013{{end}} of {{total}}"), {
+      start: (currentPage - 1) * pageSize + 1,
+      end: Math.min(currentPage * pageSize, totalItems),
+      total: totalItems
+    })) : void 0;
+    return /* @__PURE__ */_jsxs(XStack, {
+      alignItems: "center",
+      justifyContent: "center",
+      role: "navigation",
+      "aria-label": t("Pagination"),
+      ...knobProps.gap,
+      ...stackProps,
+      children: [showFirstLast && /* @__PURE__ */_jsx(Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        icon: FirstIcon,
+        onPress: function onPress() {
+          return goTo(0);
+        },
+        disabled: !canPrev,
+        "aria-label": t("Go to first page"),
+        onKeyDown: activateOnEnterSpace(function () {
+          return goTo(0);
+        }, canPrev)
+      }), /* @__PURE__ */_jsx(Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        icon: PrevIcon,
+        onPress: handlePrev,
+        disabled: !canPrev,
+        "aria-label": t("Go to previous page"),
+        onKeyDown: activateOnEnterSpace(handlePrev, canPrev)
+      }), /* @__PURE__ */_jsx(XStack, {
+        alignItems: "center",
+        gap: "$1",
+        children: items.map(function (item) {
+          if (typeof item !== "number") {
+            return /* @__PURE__ */_jsx(Text, {
+              "aria-hidden": true,
+              userSelect: "none",
+              textAlign: "center",
+              minWidth: "$2",
+              ...knobProps.body,
+              color: componentColors.text.muted,
+              children: "\u2026"
+            }, item);
+          }
+          var isCurrent = item === currentPage;
+          return /* @__PURE__ */_jsx(Button, {
+            size: knobProps.sizeToken,
+            minWidth: knobProps.sizeToken,
+            paddingHorizontal: "$2",
+            accent: isCurrent,
+            chromeless: !isCurrent,
+            disabled,
+            onPress: function onPress() {
+              return goTo(item - 1);
+            },
+            "aria-label": withInterp(t("Page {{number}}"), {
+              number: item
+            }),
+            "aria-current": isCurrent ? "page" : void 0,
+            onKeyDown: activateOnEnterSpace(function () {
+              return goTo(item - 1);
+            }, !disabled),
+            children: String(item)
+          }, item);
+        })
+      }), /* @__PURE__ */_jsx(Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        icon: NextIcon,
+        onPress: handleNext,
+        disabled: !canNext,
+        "aria-label": t("Go to next page"),
+        onKeyDown: activateOnEnterSpace(handleNext, canNext)
+      }), showFirstLast && /* @__PURE__ */_jsx(Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        icon: LastIcon,
+        onPress: function onPress() {
+          return goTo(total - 1);
+        },
+        disabled: !canNext,
+        "aria-label": t("Go to last page"),
+        onKeyDown: activateOnEnterSpace(function () {
+          return goTo(total - 1);
+        }, canNext)
+      }), summary && /* @__PURE__ */_jsx(Text, {
+        ...knobProps.body,
+        color: componentColors.text.muted,
+        "aria-live": "polite",
+        userSelect: "none",
+        children: summary
+      })]
+    });
+  }
   var dotSize = variant === "bars" ? "$1.5" : "$0.75";
   var activeDotSize = variant === "bars" ? "$3" : "$2";
   return /* @__PURE__ */_jsxs(XStack, {
@@ -41,11 +213,14 @@ function Pagination(param) {
     children: [/* @__PURE__ */_jsx(Button, {
       size: knobProps.sizeToken,
       circular: true,
-      icon: ArrowLeftIcon,
+      icon: PrevArrowIcon,
       onPress: handlePrev,
-      disabled: disabled || activeIndex === 0,
+      disabled: disabled || index === 0,
       variant: "outlined",
-      opacity: activeIndex === 0 ? 0.3 : 1
+      // LC-40: the Button's own disabled wash owns the treatment — the
+      // legacy opacity 0.3 dim stacked on top of it (double-dim).
+      "aria-label": t("Previous page"),
+      onKeyDown: activateOnEnterSpace(handlePrev, !(disabled || index === 0))
     }), /* @__PURE__ */_jsx(XStack, {
       alignItems: "center",
       justifyContent: "center",
@@ -56,22 +231,46 @@ function Pagination(param) {
       borderRadius: "$10",
       children: Array.from({
         length: total
-      }).map(function (_, index) {
-        var isActive = index === activeIndex;
-        var isCompleted = completedSteps === null || completedSteps === void 0 ? void 0 : completedSteps.has(index);
+      }).map(function (_, dotIndex) {
+        var isActive = dotIndex === index;
+        var isCompleted = completedSteps === null || completedSteps === void 0 ? void 0 : completedSteps.has(dotIndex);
         var canJump = allowJumpTo && !disabled;
         var dotProps = {
           width: isActive ? activeDotSize : dotSize,
           height: dotSize,
           borderRadius: "$10",
           backgroundColor: isCompleted && !isActive ? componentColors.indicator.completed : isActive ? componentColors.indicator.current : componentColors.indicator.track,
-          animation: "quick",
+          transition: motionTransition,
           cursor: canJump ? "pointer" : void 0,
           alignItems: "center",
           justifyContent: "center",
+          "aria-current": isActive ? "step" : void 0,
+          "data-pagination-dot": isActive ? "active" : "idle",
+          // Belt-and-suspenders for the CSS driver: named `transition` covers
+          // Tamagui layout props; explicit width/bg ensures measurable intermediates.
+          style: {
+            transition: `width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease`
+          },
           ...(canJump ? {
             onPress: function onPress() {
-              return onChange(index);
+              return goTo(dotIndex);
+            },
+            role: "button",
+            "aria-label": withInterp(t("Go to step {{number}}"), {
+              number: dotIndex + 1
+            }),
+            tabIndex: 0,
+            focusVisibleStyle: {
+              outlineColor: "$outlineColor",
+              outlineWidth: 2,
+              outlineStyle: "solid",
+              outlineOffset: 1
+            },
+            onKeyDown: function onKeyDown(e) {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                goTo(dotIndex);
+              }
             }
           } : {})
         };
@@ -82,18 +281,20 @@ function Pagination(param) {
             color: "white",
             weight: "bold"
           })
-        }, index);
+        }, dotIndex);
       })
     }), /* @__PURE__ */_jsx(Button, {
       size: knobProps.sizeToken,
       circular: true,
-      icon: isLastStep ? CheckIcon : ArrowRightIcon,
+      icon: isLastStep ? CheckIcon : NextArrowIcon,
       onPress: handleNext,
-      disabled: disabled || !isLastStep && activeIndex >= total - 1 && !onSubmit,
+      disabled: disabled || !isLastStep && index >= total - 1 && !onSubmit,
       variant: isLastStep ? void 0 : "outlined",
-      theme: isLastStep ? "active" : void 0
+      theme: isLastStep ? "active" : void 0,
+      "aria-label": isLastStep ? t("Submit") : t("Next page"),
+      onKeyDown: activateOnEnterSpace(handleNext, !(disabled || !isLastStep && index >= total - 1 && !onSubmit))
     })]
   });
 }
-export { Pagination };
+export { Pagination, getPaginationItems };
 //# sourceMappingURL=Pagination.native.js.map