@multiplatform.one/components 6.4.2 → 6.6.0

package/dist/cjs/Pagination.cjs

@@ -32,6 +32,7 @@ var import_react2 = require("react");
 var import_react_i18next = require("react-i18next");
 var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
+var import_DotIndicator = require("./DotIndicator/index.cjs");
 var import_componentColors = require("./componentColors.cjs");
 var import_useDirection = require("./hooks/useDirection.cjs");
 var import_t = require("./shared/t.cjs");
@@ -60,6 +61,16 @@ function getPaginationItems(total, page, siblingCount = 1, boundaryCount = 1) {
   items.push(...endPages);
   return items;
 }
+const stripSteps = {
+  base: {
+    mark: "$0.75",
+    active: "$2"
+  },
+  large: {
+    mark: "$1.5",
+    active: "$3"
+  }
+};
 function Pagination({
   total,
   activeIndex,
@@ -121,181 +132,119 @@ function Pagination({
       if (enabled) fn();
     }
   };
-  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 ? (0, import_t.bidiIsolate)(totalItems === 0 ? t("0 of 0") : (0, import_t.withInterp)(t("{{start}}\u2013{{end}} of {{total}}"), {
-      start: (currentPage - 1) * pageSize + 1,
-      end: Math.min(currentPage * pageSize, totalItems),
-      total: totalItems
-    })) : void 0;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      alignItems: "center",
-      justifyContent: "center",
-      role: "navigation",
-      "aria-label": t("Pagination"),
-      ...knobProps.gap,
-      ...stackProps,
-      children: [showFirstLast && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.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__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
-        icon: PrevIcon,
-        onPress: handlePrev,
-        disabled: !canPrev,
-        "aria-label": t("Go to previous page"),
-        onKeyDown: activateOnEnterSpace(handlePrev, canPrev)
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-        alignItems: "center",
-        gap: "$1",
-        children: items.map(item => {
-          if (typeof item !== "number") {
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              "aria-hidden": true,
-              userSelect: "none",
-              textAlign: "center",
-              minWidth: "$2",
-              ...knobProps.body,
-              color: import_componentColors.componentColors.text.muted,
-              children: "\u2026"
-            }, item);
-          }
-          const isCurrent = item === currentPage;
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: knobProps.sizeToken,
-            minWidth: knobProps.sizeToken,
-            paddingHorizontal: "$2",
-            accent: isCurrent,
-            chromeless: !isCurrent,
-            disabled,
-            onPress: () => goTo(item - 1),
-            "aria-label": (0, import_t.withInterp)(t("Page {{number}}"), {
-              number: item
-            }),
-            "aria-current": isCurrent ? "page" : void 0,
-            onKeyDown: activateOnEnterSpace(() => goTo(item - 1), !disabled),
-            children: String(item)
-          }, item);
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.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__ */(0, import_jsx_runtime.jsx)(import_forms.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        ...knobProps.body,
-        color: import_componentColors.componentColors.text.muted,
-        "aria-live": "polite",
-        userSelect: "none",
-        children: summary
-      })]
-    });
-  }
-  const dotSize = variant === "bars" ? "$1.5" : "$0.75";
-  const activeDotSize = variant === "bars" ? "$3" : "$2";
+  const isNumbered = variant === "numbered";
+  const canPrev = !disabled && index > 0;
+  const canNext = isNumbered ? !disabled && currentPage < total :
+  // dots/bars: an onSubmit makes the last step actionable, so the forward
+  // control is not dead there.
+  !(disabled || !isLastStep && index >= total - 1 && !onSubmit);
+  const submits = !isNumbered && isLastStep;
+  const items = isNumbered ? getPaginationItems(total, currentPage, siblingCount, boundaryCount) : [];
+  const summary = isNumbered && showSummary && totalItems != null && pageSize != null ? (0, import_t.bidiIsolate)(totalItems === 0 ? t("0 of 0") : (0, import_t.withInterp)(t("{{start}}\u2013{{end}} of {{total}}"), {
+    start: (currentPage - 1) * pageSize + 1,
+    end: Math.min(currentPage * pageSize, totalItems),
+    total: totalItems
+  })) : void 0;
+  const step = variant === "bars" ? stripSteps.large : stripSteps.base;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     alignItems: "center",
     justifyContent: "center",
+    role: "navigation",
+    "aria-label": t("Pagination"),
     ...knobProps.gap,
     ...stackProps,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+    children: [isNumbered && showFirstLast && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
       size: knobProps.sizeToken,
-      circular: true,
-      icon: PrevArrowIcon,
-      onPress: handlePrev,
-      disabled: disabled || index === 0,
       variant: "outlined",
-      "aria-label": t("Previous page"),
-      onKeyDown: activateOnEnterSpace(handlePrev, !(disabled || index === 0))
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      icon: FirstIcon,
+      onPress: () => goTo(0),
+      disabled: !canPrev,
+      "aria-label": t("Go to first page"),
+      onKeyDown: activateOnEnterSpace(() => goTo(0), canPrev)
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: knobProps.sizeToken,
+      circular: !isNumbered,
+      variant: "outlined",
+      icon: isNumbered ? PrevIcon : PrevArrowIcon,
+      onPress: handlePrev,
+      disabled: !canPrev,
+      "aria-label": isNumbered ? t("Go to previous page") : t("Previous page"),
+      onKeyDown: activateOnEnterSpace(handlePrev, canPrev)
+    }), isNumbered ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       alignItems: "center",
-      justifyContent: "center",
-      gap: "$2",
-      backgroundColor: import_componentColors.componentColors.interactive.background,
-      paddingHorizontal: knobProps.panelPadding.padding,
-      height: knobProps.sizeToken,
-      borderRadius: "$10",
-      children: Array.from({
-        length: total
-      }).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 ? import_componentColors.componentColors.indicator.completed : isActive ? import_componentColors.componentColors.indicator.current : import_componentColors.componentColors.indicator.track,
-          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: () => goTo(dotIndex),
-            role: "button",
-            "aria-label": (0, import_t.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          ...dotProps,
-          children: isCompleted && !isActive && variant === "dots" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
-            size: 8,
-            color: "white",
-            weight: "bold"
-          })
-        }, dotIndex);
+      gap: "$1",
+      children: items.map(item => {
+        if (typeof item !== "number") {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            "aria-hidden": true,
+            userSelect: "none",
+            textAlign: "center",
+            minWidth: "$2",
+            ...knobProps.body,
+            color: import_componentColors.componentColors.text.muted,
+            children: "\u2026"
+          }, item);
+        }
+        const isCurrent = item === currentPage;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          minWidth: knobProps.sizeToken,
+          paddingHorizontal: "$2",
+          accent: isCurrent,
+          chromeless: !isCurrent,
+          disabled,
+          onPress: () => goTo(item - 1),
+          "aria-label": (0, import_t.withInterp)(t("Page {{number}}"), {
+            number: item
+          }),
+          "aria-current": isCurrent ? "page" : void 0,
+          onKeyDown: activateOnEnterSpace(() => goTo(item - 1), !disabled),
+          children: String(item)
+        }, item);
       })
+    }) :
+    // LC-16: the dot strip IS `DotIndicator` — this component owns the
+    // pager frame around it, not a second strip. `completedSteps`, the
+    // wizard a11y idiom and the rail all ride the primitive, so the two
+    // strips in the catalog cannot drift apart again.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_DotIndicator.DotIndicator, {
+      total,
+      activeIndex: index,
+      variant,
+      idiom: "step",
+      rail: true,
+      completedSteps,
+      dotSize: step.mark,
+      activeDotSize: step.active,
+      transition: motionTransition,
+      dotStateAttribute: "data-pagination-dot",
+      onChange: allowJumpTo && !disabled ? goTo : void 0,
+      disabled: allowJumpTo && disabled
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
       size: knobProps.sizeToken,
-      circular: true,
-      icon: isLastStep ? import_react.CheckIcon : NextArrowIcon,
+      circular: !isNumbered,
+      variant: submits ? void 0 : "outlined",
+      theme: submits ? "active" : void 0,
+      icon: isNumbered ? NextIcon : submits ? import_react.CheckIcon : NextArrowIcon,
       onPress: handleNext,
-      disabled: disabled || !isLastStep && index >= total - 1 && !onSubmit,
-      variant: isLastStep ? void 0 : "outlined",
-      theme: isLastStep ? "active" : void 0,
-      "aria-label": isLastStep ? t("Submit") : t("Next page"),
-      onKeyDown: activateOnEnterSpace(handleNext, !(disabled || !isLastStep && index >= total - 1 && !onSubmit))
+      disabled: !canNext,
+      "aria-label": isNumbered ? t("Go to next page") : submits ? t("Submit") : t("Next page"),
+      onKeyDown: activateOnEnterSpace(handleNext, canNext)
+    }), isNumbered && showFirstLast && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...knobProps.body,
+      color: import_componentColors.componentColors.text.muted,
+      "aria-live": "polite",
+      userSelect: "none",
+      children: summary
     })]
   });
 }

package/dist/cjs/Pagination.native.js

@@ -35,6 +35,7 @@ var import_react2 = require("react");
 var import_react_i18next = require("react-i18next");
 var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
+var import_DotIndicator = require("./DotIndicator/index.native.js");
 var import_componentColors = require("./componentColors.native.js");
 var import_useDirection = require("./hooks/useDirection.native.js");
 var import_t = require("./shared/t.native.js");
@@ -68,6 +69,16 @@ function getPaginationItems(total, page) {
   items.push(...endPages);
   return items;
 }
+var stripSteps = {
+  base: {
+    mark: "$0.75",
+    active: "$2"
+  },
+  large: {
+    mark: "$1.5",
+    active: "$3"
+  }
+};
 function Pagination(param) {
   var {
     total,
@@ -132,197 +143,135 @@ function Pagination(param) {
       }
     };
   };
-  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 ? (0, import_t.bidiIsolate)(totalItems === 0 ? t("0 of 0") : (0, import_t.withInterp)(t("{{start}}\u2013{{end}} of {{total}}"), {
-      start: (currentPage - 1) * pageSize + 1,
-      end: Math.min(currentPage * pageSize, totalItems),
-      total: totalItems
-    })) : void 0;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      alignItems: "center",
-      justifyContent: "center",
-      role: "navigation",
-      "aria-label": t("Pagination"),
-      ...knobProps.gap,
-      ...stackProps,
-      children: [showFirstLast && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.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__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
-        icon: PrevIcon,
-        onPress: handlePrev,
-        disabled: !canPrev,
-        "aria-label": t("Go to previous page"),
-        onKeyDown: activateOnEnterSpace(handlePrev, canPrev)
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-        alignItems: "center",
-        gap: "$1",
-        children: items.map(function (item) {
-          if (typeof item !== "number") {
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              "aria-hidden": true,
-              userSelect: "none",
-              textAlign: "center",
-              minWidth: "$2",
-              ...knobProps.body,
-              color: import_componentColors.componentColors.text.muted,
-              children: "\u2026"
-            }, item);
-          }
-          var isCurrent = item === currentPage;
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: knobProps.sizeToken,
-            minWidth: knobProps.sizeToken,
-            paddingHorizontal: "$2",
-            accent: isCurrent,
-            chromeless: !isCurrent,
-            disabled,
-            onPress: function onPress() {
-              return goTo(item - 1);
-            },
-            "aria-label": (0, import_t.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__ */(0, import_jsx_runtime.jsx)(import_forms.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__ */(0, import_jsx_runtime.jsx)(import_forms.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        ...knobProps.body,
-        color: import_componentColors.componentColors.text.muted,
-        "aria-live": "polite",
-        userSelect: "none",
-        children: summary
-      })]
-    });
-  }
-  var dotSize = variant === "bars" ? "$1.5" : "$0.75";
-  var activeDotSize = variant === "bars" ? "$3" : "$2";
+  var isNumbered = variant === "numbered";
+  var canPrev = !disabled && index > 0;
+  var canNext = isNumbered ? !disabled && currentPage < total :
+  // dots/bars: an onSubmit makes the last step actionable, so the forward
+  // control is not dead there.
+  !(disabled || !isLastStep && index >= total - 1 && !onSubmit);
+  var submits = !isNumbered && isLastStep;
+  var items = isNumbered ? getPaginationItems(total, currentPage, siblingCount, boundaryCount) : [];
+  var summary = isNumbered && showSummary && totalItems != null && pageSize != null ? (0, import_t.bidiIsolate)(totalItems === 0 ? t("0 of 0") : (0, import_t.withInterp)(t("{{start}}\u2013{{end}} of {{total}}"), {
+    start: (currentPage - 1) * pageSize + 1,
+    end: Math.min(currentPage * pageSize, totalItems),
+    total: totalItems
+  })) : void 0;
+  var step = variant === "bars" ? stripSteps.large : stripSteps.base;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     alignItems: "center",
     justifyContent: "center",
+    role: "navigation",
+    "aria-label": t("Pagination"),
     ...knobProps.gap,
     ...stackProps,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+    children: [isNumbered && showFirstLast && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
       size: knobProps.sizeToken,
-      circular: true,
-      icon: PrevArrowIcon,
-      onPress: handlePrev,
-      disabled: disabled || index === 0,
       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__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: knobProps.sizeToken,
+      circular: !isNumbered,
+      variant: "outlined",
+      icon: isNumbered ? PrevIcon : PrevArrowIcon,
+      onPress: handlePrev,
+      disabled: !canPrev,
       // 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__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      "aria-label": isNumbered ? t("Go to previous page") : t("Previous page"),
+      onKeyDown: activateOnEnterSpace(handlePrev, canPrev)
+    }), isNumbered ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       alignItems: "center",
-      justifyContent: "center",
-      gap: "$2",
-      backgroundColor: import_componentColors.componentColors.interactive.background,
-      paddingHorizontal: knobProps.panelPadding.padding,
-      height: knobProps.sizeToken,
-      borderRadius: "$10",
-      children: Array.from({
-        length: total
-      }).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 ? import_componentColors.componentColors.indicator.completed : isActive ? import_componentColors.componentColors.indicator.current : import_componentColors.componentColors.indicator.track,
-          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`
+      gap: "$1",
+      children: items.map(function (item) {
+        if (typeof item !== "number") {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            "aria-hidden": true,
+            userSelect: "none",
+            textAlign: "center",
+            minWidth: "$2",
+            ...knobProps.body,
+            color: import_componentColors.componentColors.text.muted,
+            children: "\u2026"
+          }, item);
+        }
+        var isCurrent = item === currentPage;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          minWidth: knobProps.sizeToken,
+          paddingHorizontal: "$2",
+          accent: isCurrent,
+          chromeless: !isCurrent,
+          disabled,
+          onPress: function onPress() {
+            return goTo(item - 1);
           },
-          ...(canJump ? {
-            onPress: function onPress() {
-              return goTo(dotIndex);
-            },
-            role: "button",
-            "aria-label": (0, import_t.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);
-              }
-            }
-          } : {})
-        };
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          ...dotProps,
-          children: isCompleted && !isActive && variant === "dots" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
-            size: 8,
-            color: "white",
-            weight: "bold"
-          })
-        }, dotIndex);
+          "aria-label": (0, import_t.withInterp)(t("Page {{number}}"), {
+            number: item
+          }),
+          "aria-current": isCurrent ? "page" : void 0,
+          onKeyDown: activateOnEnterSpace(function () {
+            return goTo(item - 1);
+          }, !disabled),
+          children: String(item)
+        }, item);
       })
+    }) :
+    // LC-16: the dot strip IS `DotIndicator` — this component owns the
+    // pager frame around it, not a second strip. `completedSteps`, the
+    // wizard a11y idiom and the rail all ride the primitive, so the two
+    // strips in the catalog cannot drift apart again.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_DotIndicator.DotIndicator, {
+      total,
+      activeIndex: index,
+      variant,
+      idiom: "step",
+      rail: true,
+      completedSteps,
+      dotSize: step.mark,
+      activeDotSize: step.active,
+      transition: motionTransition,
+      dotStateAttribute: "data-pagination-dot",
+      onChange: allowJumpTo && !disabled ? goTo : void 0,
+      // A strip nobody can press has no disabled state — only a jumpable
+      // one is "interactive but blocked".
+      disabled: allowJumpTo && disabled
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
       size: knobProps.sizeToken,
-      circular: true,
-      icon: isLastStep ? import_react.CheckIcon : NextArrowIcon,
+      circular: !isNumbered,
+      variant: submits ? void 0 : "outlined",
+      theme: submits ? "active" : void 0,
+      icon: isNumbered ? NextIcon : submits ? import_react.CheckIcon : NextArrowIcon,
       onPress: handleNext,
-      disabled: disabled || !isLastStep && index >= total - 1 && !onSubmit,
-      variant: isLastStep ? void 0 : "outlined",
-      theme: isLastStep ? "active" : void 0,
-      "aria-label": isLastStep ? t("Submit") : t("Next page"),
-      onKeyDown: activateOnEnterSpace(handleNext, !(disabled || !isLastStep && index >= total - 1 && !onSubmit))
+      disabled: !canNext,
+      "aria-label": isNumbered ? t("Go to next page") : submits ? t("Submit") : t("Next page"),
+      onKeyDown: activateOnEnterSpace(handleNext, canNext)
+    }), isNumbered && showFirstLast && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...knobProps.body,
+      color: import_componentColors.componentColors.text.muted,
+      "aria-live": "polite",
+      userSelect: "none",
+      children: summary
     })]
   });
 }