@multiplatform.one/components 6.1.0 → 6.4.0

package/dist/esm/Carousel/index.native.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect, Children } from "react";
+import { useTranslation } from "react-i18next";
 import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { View, XStack, ScrollView, styled } from "tamagui";
+import { zIndex } from "@multiplatform.one/forms";
+import { MIN_PRESS_TARGET, useResolvedKnobs } from "@multiplatform.one/theme";
+import { View, XStack, ScrollView, getTokens, styled } from "tamagui";
 import { DotIndicator } from "../DotIndicator/index.native.js";
+import { useDirection } from "../hooks/useDirection.native.js";
 var CarouselContainer = styled(View, {
   name: "Carousel",
   position: "relative",
@@ -21,18 +24,13 @@ var ArrowButton = styled(View, {
   transform: [{
     translateY: "-50%"
   }],
-  zIndex: 10,
-  width: 40,
-  height: 40,
-  borderRadius: 1e3,
-  backgroundColor: "$background",
+  // Local tier top (Axiom 14): arrows float over slides within the carousel.
+  zIndex: zIndex.localTop,
   alignItems: "center",
   justifyContent: "center",
+  backgroundColor: "transparent",
   cursor: "pointer",
   opacity: 0.9,
-  shadowColor: "$shadowColor",
-  shadowRadius: 8,
-  shadowOpacity: 0.15,
   hoverStyle: {
     opacity: 1,
     scale: 1.05
@@ -41,14 +39,6 @@ var ArrowButton = styled(View, {
     scale: 0.95
   },
   variants: {
-    side: {
-      left: {
-        left: 8
-      },
-      right: {
-        right: 8
-      }
-    },
     disabled: {
       true: {
         opacity: 0.3,
@@ -57,6 +47,16 @@ var ArrowButton = styled(View, {
     }
   }
 });
+var ArrowVisual = styled(View, {
+  name: "CarouselArrowVisual",
+  borderRadius: 1e3,
+  backgroundColor: "$background",
+  alignItems: "center",
+  justifyContent: "center",
+  shadowColor: "$shadowColor",
+  shadowRadius: 8,
+  shadowOpacity: 0.15
+});
 var DotsWrapper = styled(View, {
   name: "CarouselDotsWrapper",
   paddingVertical: "$3",
@@ -69,13 +69,24 @@ function Carousel(param) {
     showDots = true,
     autoPlay = 0,
     loop = false,
-    gap = "$3",
+    gap: gapProp,
     onSlideChange,
     initialSlide = 0
   } = param;
+  var _ref;
+  var _getTokens_size_knobProps_sizeToken, _getTokens_size;
+  var {
+    t
+  } = useTranslation();
   var {
-    knobProps
+    knobProps,
+    control
   } = useResolvedKnobs();
+  var gap = gapProp !== null && gapProp !== void 0 ? gapProp : knobProps.gap.gap;
+  var arrowSize = (_ref = (_getTokens_size = getTokens().size) === null || _getTokens_size === void 0 ? void 0 : (_getTokens_size_knobProps_sizeToken = _getTokens_size[knobProps.sizeToken]) === null || _getTokens_size_knobProps_sizeToken === void 0 ? void 0 : _getTokens_size_knobProps_sizeToken.val) !== null && _ref !== void 0 ? _ref : 40;
+  var arrowGlyphSize = Math.round(arrowSize / 2);
+  var arrowTargetSize = Math.max(arrowSize, MIN_PRESS_TARGET);
+  var arrowEdgeInset = Math.max(0, 8 - Math.round((arrowTargetSize - arrowSize) / 2));
   var [activeIndex, setActiveIndex] = useState(initialSlide);
   var trackRef = useRef(null);
   var slideCount = Children.count(children);
@@ -137,6 +148,11 @@ function Carousel(param) {
   }, [initialSlide, scrollToSlide]);
   var canGoPrev = loop || activeIndex > 0;
   var canGoNext = loop || activeIndex < slideCount - 1;
+  var isRTL = useDirection() === "rtl";
+  var prevSide = isRTL ? "right" : "left";
+  var nextSide = isRTL ? "left" : "right";
+  var PrevGlyph = isRTL ? CaretRightIcon : CaretLeftIcon;
+  var NextGlyph = isRTL ? CaretLeftIcon : CaretRightIcon;
   return /* @__PURE__ */_jsxs(View, {
     children: [/* @__PURE__ */_jsxs(CarouselContainer, {
       ...knobProps.borderRadius,
@@ -166,22 +182,64 @@ function Carousel(param) {
         })
       }), showArrows && slideCount > 1 && /* @__PURE__ */_jsxs(_Fragment, {
         children: [/* @__PURE__ */_jsx(ArrowButton, {
-          side: "left",
+          [prevSide]: arrowEdgeInset,
           disabled: !canGoPrev,
+          width: arrowTargetSize,
+          height: arrowTargetSize,
+          ...(knobProps.transition ? {
+            transition: knobProps.transition
+          } : {}),
           onPress: canGoPrev ? goPrev : void 0,
-          accessibilityRole: "button",
-          accessibilityLabel: "Previous slide",
-          children: /* @__PURE__ */_jsx(CaretLeftIcon, {
-            size: 20
+          role: "button",
+          "aria-label": t("Previous slide"),
+          "aria-disabled": !canGoPrev || void 0,
+          // Keyboard floor (Axiom 12): div[role=button] gets no native
+          // focus or Enter/Space activation — supply both + house ring.
+          tabIndex: canGoPrev ? 0 : -1,
+          focusVisibleStyle: {
+            ...control.focusVisibleKnobProps
+          },
+          onKeyDown: function onKeyDown(e) {
+            if ((e.key === "Enter" || e.key === " ") && canGoPrev) {
+              e.preventDefault();
+              goPrev();
+            }
+          },
+          children: /* @__PURE__ */_jsx(ArrowVisual, {
+            width: arrowSize,
+            height: arrowSize,
+            children: /* @__PURE__ */_jsx(PrevGlyph, {
+              size: arrowGlyphSize
+            })
           })
         }), /* @__PURE__ */_jsx(ArrowButton, {
-          side: "right",
+          [nextSide]: arrowEdgeInset,
           disabled: !canGoNext,
+          width: arrowTargetSize,
+          height: arrowTargetSize,
+          ...(knobProps.transition ? {
+            transition: knobProps.transition
+          } : {}),
           onPress: canGoNext ? goNext : void 0,
-          accessibilityRole: "button",
-          accessibilityLabel: "Next slide",
-          children: /* @__PURE__ */_jsx(CaretRightIcon, {
-            size: 20
+          role: "button",
+          "aria-label": t("Next slide"),
+          "aria-disabled": !canGoNext || void 0,
+          tabIndex: canGoNext ? 0 : -1,
+          focusVisibleStyle: {
+            ...control.focusVisibleKnobProps
+          },
+          onKeyDown: function onKeyDown(e) {
+            if ((e.key === "Enter" || e.key === " ") && canGoNext) {
+              e.preventDefault();
+              goNext();
+            }
+          },
+          children: /* @__PURE__ */_jsx(ArrowVisual, {
+            width: arrowSize,
+            height: arrowSize,
+            children: /* @__PURE__ */_jsx(NextGlyph, {
+              size: arrowGlyphSize
+            })
           })
         })]
       })]

package/dist/esm/Carousel/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useState","useRef","useCallback","useEffect","Children","CaretLeftIcon","CaretRightIcon","useResolvedKnobs","View","XStack","ScrollView","styled","DotIndicator","CarouselContainer","name","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","zIndex","height","borderRadius","backgroundColor","alignItems","justifyContent","cursor","opacity","shadowColor","shadowRadius","shadowOpacity","hoverStyle","scale","pressStyle","variants","side","left","right","disabled","true","DotsWrapper","paddingVertical","Carousel","param","children","showArrows","showDots","autoPlay","loop","gap","onSlideChange","initialSlide","knobProps","activeIndex","setActiveIndex","trackRef","slideCount","count","slideWidthRef","autoPlayRef","scrollToSlide","index","current","offset","scrollTo","x","animated","goToSlide","targetIndex","Math","max","min","goNext","goPrev","handleScroll","event","scrollX","nativeEvent","contentOffset","newIndex","round","setInterval","clearInterval","canGoPrev","canGoNext","ref","horizontal","showsHorizontalScrollIndicator","style","scrollSnapType","onScroll","scrollEventThrottle","onLayout","e","layout","map","child","scrollSnapAlign"],"sources":["../../../src/Carousel/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useState","useRef","useCallback","useEffect","Children","useTranslation","CaretLeftIcon","CaretRightIcon","zIndex","MIN_PRESS_TARGET","useResolvedKnobs","View","XStack","ScrollView","getTokens","styled","DotIndicator","useDirection","CarouselContainer","name","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","localTop","alignItems","justifyContent","backgroundColor","cursor","opacity","hoverStyle","scale","pressStyle","variants","disabled","true","ArrowVisual","borderRadius","shadowColor","shadowRadius","shadowOpacity","DotsWrapper","paddingVertical","Carousel","param","children","showArrows","showDots","autoPlay","loop","gap","gapProp","onSlideChange","initialSlide","_ref","_getTokens_size_knobProps_sizeToken","_getTokens_size","t","knobProps","control","arrowSize","size","sizeToken","val","arrowGlyphSize","Math","round","arrowTargetSize","max","arrowEdgeInset","activeIndex","setActiveIndex","trackRef","slideCount","count","slideWidthRef","autoPlayRef","scrollToSlide","index","current","offset","scrollTo","x","animated","goToSlide","targetIndex","min","goNext","goPrev","handleScroll","event","scrollX","nativeEvent","contentOffset","newIndex","setInterval","clearInterval","canGoPrev","canGoNext","isRTL","prevSide","nextSide","PrevGlyph","NextGlyph","ref","horizontal","showsHorizontalScrollIndicator","style","scrollSnapType","onScroll","scrollEventThrottle","onLayout","e","layout","map","child","scrollSnapAlign","height","transition","onPress","role","tabIndex","focusVisibleStyle","focusVisibleKnobProps","onKeyDown"],"sources":["../../../src/Carousel/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/Chip/index.mjs

@@ -1,3 +1,3 @@
-import { Chip } from "@multiplatform.one/forms";
-export { Chip };
+import { Chip, ChipFrame, ChipText, chipIconSize } from "@multiplatform.one/forms";
+export { Chip, ChipFrame, ChipText, chipIconSize };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/Chip/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Chip"],"sources":["../../../src/Chip/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SACEA,IAAA,QAMK","ignoreList":[]}
+{"version":3,"names":["Chip","ChipFrame","ChipText","chipIconSize"],"sources":["../../../src/Chip/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SACEA,IAAA,EACAC,SAAA,EACAC,QAAA,EACAC,YAAA,QAMK","ignoreList":[]}

package/dist/esm/Chip/index.native.js

@@ -1,3 +1,3 @@
-import { Chip } from "@multiplatform.one/forms";
-export { Chip };
+import { Chip, ChipFrame, ChipText, chipIconSize } from "@multiplatform.one/forms";
+export { Chip, ChipFrame, ChipText, chipIconSize };
 //# sourceMappingURL=index.native.js.map

package/dist/esm/Chip/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Chip"],"sources":["../../../src/Chip/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAAA,IAAA;AAAA,SACEA,IAAA","ignoreList":[]}
+{"version":3,"names":["Chip","ChipFrame","ChipText","chipIconSize"],"sources":["../../../src/Chip/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAAA,IAAA,EAAAC,SAAA,EAAAC,QAAA,EAAAC,YAAA;AAAA,SAEEH,IAAA,EACAC,SAAA,EACAC,QAAA,EAAAC,YAMK","ignoreList":[]}

package/dist/esm/DotIndicator/index.mjs

@@ -1,18 +1,53 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { View, XStack, styled } from "tamagui";
+import { MIN_PRESS_TARGET, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useTranslation } from "react-i18next";
+import { View, XStack, getTokens, styled } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
+import { withInterp } from "../shared/t.mjs";
 import { jsx } from "react/jsx-runtime";
+const dotGapMap = {
+  small: "$1",
+  medium: "$2",
+  large: "$3"
+};
+const dotGeometryMap = {
+  $3: {
+    dot: 6,
+    bar: 5,
+    active: 18
+  },
+  $4: {
+    dot: 8,
+    bar: 6,
+    active: 24
+  },
+  $5: {
+    dot: 10,
+    bar: 8,
+    active: 30
+  }
+};
 const DotsContainer = styled(XStack, {
   name: "DotIndicator",
   alignItems: "center",
   justifyContent: "center",
   gap: "$2"
 });
+const DotTarget = styled(View, {
+  name: "DotTarget",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "transparent",
+  focusVisibleStyle: {
+    outlineColor: "$outlineColor",
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineOffset: 1
+  }
+});
 const Dot = styled(View, {
   name: "Dot",
   borderRadius: 1e3,
   backgroundColor: componentColors.indicator.inactive,
-  cursor: "pointer",
   hoverStyle: {
     backgroundColor: componentColors.indicator.hover
   },
@@ -49,7 +84,6 @@ const Dot = styled(View, {
     },
     disabled: {
       true: {
-        cursor: "not-allowed",
         opacity: 0.5
       }
     }
@@ -60,27 +94,62 @@ function DotIndicator({
   activeIndex,
   onChange,
   variant = "dots",
-  gap = "$2",
+  gap: gapProp,
   disabled = false
 }) {
+  const {
+    t
+  } = useTranslation();
   const {
     knobProps
   } = useResolvedKnobs();
+  const gap = gapProp ?? dotGapMap[knobProps.space] ?? "$2";
+  const geometry = dotGeometryMap[knobProps.sizeToken] ?? dotGeometryMap.$4;
+  const itemSize = variant === "bars" ? geometry.bar : geometry.dot;
+  const gapPx = typeof gap === "number" ? gap : getTokens().space?.[gap]?.val ?? 7;
+  const slopX = Math.max(0, Math.floor((gapPx - 1) / 2));
+  const outsetY = Math.ceil((MIN_PRESS_TARGET - itemSize) / 2);
+  const interactive = !disabled && !!onChange;
   return /* @__PURE__ */jsx(DotsContainer, {
-    ...knobProps.gap,
     gap,
     children: Array.from({
       length: total
     }).map((_, index) => {
       const isActive = index === activeIndex;
-      return /* @__PURE__ */jsx(Dot, {
-        variant,
-        active: isActive,
-        activeVariant: isActive ? variant : void 0,
-        disabled: disabled || !onChange,
-        onPress: disabled || !onChange ? void 0 : () => onChange(index),
-        accessibilityRole: "button",
-        accessibilityLabel: `Go to item ${index + 1}`
+      const dotWidth = isActive ? geometry.active : itemSize;
+      return /* @__PURE__ */jsx(DotTarget, {
+        width: dotWidth + slopX * 2,
+        minHeight: MIN_PRESS_TARGET,
+        marginHorizontal: -slopX,
+        marginVertical: -outsetY,
+        cursor: interactive ? "pointer" : disabled ? "not-allowed" : "default",
+        onPress: interactive ? () => onChange?.(index) : void 0,
+        "aria-label": withInterp(t("Go to item {{number}}"), {
+          number: index + 1
+        }),
+        ...(isActive ? {
+          "aria-current": "true"
+        } : void 0),
+        ...(interactive ? {
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: e => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onChange?.(index);
+            }
+          }
+        } : disabled ? {
+          role: "button"
+        } : void 0),
+        children: /* @__PURE__ */jsx(Dot, {
+          variant,
+          active: isActive,
+          activeVariant: isActive ? variant : void 0,
+          width: dotWidth,
+          height: itemSize,
+          disabled
+        })
       }, index);
     })
   });

package/dist/esm/DotIndicator/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useResolvedKnobs","View","XStack","styled","componentColors","jsx","DotsContainer","name","alignItems","justifyContent","gap","Dot","borderRadius","backgroundColor","indicator","inactive","cursor","hoverStyle","hover","variants","active","true","variant","dots","width","height","bars","pills","activeVariant","disabled","opacity","DotIndicator","total","activeIndex","onChange","knobProps","children","Array","from","length","map","_","index","isActive","onPress","accessibilityRole","accessibilityLabel"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,QAAwB;AAEjC,SAASC,IAAA,EAAMC,MAAA,EAAQC,MAAA,QAAc;AACrC,SAASC,eAAA,QAAuB;AA+FtB,SAAAC,GAAA;AAxEV,MAAMC,aAAA,GAAgBH,MAAA,CAAOD,MAAA,EAAQ;EACnCK,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,cAAA,EAAgB;EAChBC,GAAA,EAAK;AACP,CAAC;AAED,MAAMC,GAAA,GAAMR,MAAA,CAAOF,IAAA,EAAM;EACvBM,IAAA,EAAM;EACNK,YAAA,EAAc;EACdC,eAAA,EAAiBT,eAAA,CAAgBU,SAAA,CAAUC,QAAA;EAC3CC,MAAA,EAAQ;EACRC,UAAA,EAAY;IACVJ,eAAA,EAAiBT,eAAA,CAAgBU,SAAA,CAAUI;EAC7C;EACAC,QAAA,EAAU;IACRC,MAAA,EAAQ;MACNC,IAAA,EAAM;QACJR,eAAA,EAAiBT,eAAA,CAAgBU,SAAA,CAAUM;MAC7C;IACF;IACAE,OAAA,EAAS;MACPC,IAAA,EAAM;QACJC,KAAA,EAAO;QACPC,MAAA,EAAQ;MACV;MACAC,IAAA,EAAM;QACJF,KAAA,EAAO;QACPC,MAAA,EAAQ;MACV;MACAE,KAAA,EAAO;QACLH,KAAA,EAAO;QACPC,MAAA,EAAQ;MACV;IACF;IACAG,aAAA,EAAe;MACbL,IAAA,EAAM;QACJC,KAAA,EAAO;MACT;MACAE,IAAA,EAAM;QACJF,KAAA,EAAO;MACT;MACAG,KAAA,EAAO;QACLH,KAAA,EAAO;MACT;IACF;IACAK,QAAA,EAAU;MACRR,IAAA,EAAM;QACJL,MAAA,EAAQ;QACRc,OAAA,EAAS;MACX;IACF;EACF;AACF,CAAC;AAIM,SAASC,aAAa;EAC3BC,KAAA;EACAC,WAAA;EACAC,QAAA;EACAZ,OAAA,GAAU;EACVZ,GAAA,GAAM;EACNmB,QAAA,GAAW;AACb,GAAsB;EACpB,MAAM;IAAEM;EAAU,IAAInC,gBAAA,CAAiB;EAEvC,OACE,eAAAK,GAAA,CAACC,aAAA;IAAe,GAAG6B,SAAA,CAAUzB,GAAA;IAAKA,GAAA;IAC/B0B,QAAA,EAAAC,KAAA,CAAMC,IAAA,CAAK;MAAEC,MAAA,EAAQP;IAAM,CAAC,EAAEQ,GAAA,CAAI,CAACC,CAAA,EAAGC,KAAA,KAAU;MAC/C,MAAMC,QAAA,GAAWD,KAAA,KAAUT,WAAA;MAC3B,OACE,eAAA5B,GAAA,CAACM,GAAA;QAECW,OAAA;QACAF,MAAA,EAAQuB,QAAA;QACRf,aAAA,EAAee,QAAA,GAAWrB,OAAA,GAAU;QACpCO,QAAA,EAAUA,QAAA,IAAY,CAACK,QAAA;QACvBU,OAAA,EAASf,QAAA,IAAY,CAACK,QAAA,GAAW,SAAY,MAAMA,QAAA,CAASQ,KAAK;QACjEG,iBAAA,EAAkB;QAClBC,kBAAA,EAAoB,cAAcJ,KAAA,GAAQ,CAAC;MAAA,GAPtCA,KAQP;IAEJ,CAAC;EAAA,CACH;AAEJ","ignoreList":[]}
+{"version":3,"names":["MIN_PRESS_TARGET","useResolvedKnobs","useTranslation","View","XStack","getTokens","styled","componentColors","withInterp","jsx","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","DotsContainer","name","alignItems","justifyContent","gap","DotTarget","backgroundColor","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","Dot","borderRadius","indicator","inactive","hoverStyle","hover","variants","true","variant","dots","width","height","bars","pills","activeVariant","disabled","opacity","DotIndicator","total","activeIndex","onChange","gapProp","t","knobProps","space","geometry","sizeToken","itemSize","gapPx","val","slopX","Math","max","floor","outsetY","ceil","interactive","children","Array","from","length","map","_","index","isActive","dotWidth","minHeight","marginHorizontal","marginVertical","cursor","onPress","number","role","tabIndex","onKeyDown","e","key","preventDefault"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/DotIndicator/index.native.js

@@ -1,18 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { View, XStack, styled } from "tamagui";
+import { MIN_PRESS_TARGET, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useTranslation } from "react-i18next";
+import { View, XStack, getTokens, styled } from "tamagui";
 import { componentColors } from "../componentColors.native.js";
+import { withInterp } from "../shared/t.native.js";
+var dotGapMap = {
+  small: "$1",
+  medium: "$2",
+  large: "$3"
+};
+var dotGeometryMap = {
+  $3: {
+    dot: 6,
+    bar: 5,
+    active: 18
+  },
+  $4: {
+    dot: 8,
+    bar: 6,
+    active: 24
+  },
+  $5: {
+    dot: 10,
+    bar: 8,
+    active: 30
+  }
+};
 var DotsContainer = styled(XStack, {
   name: "DotIndicator",
   alignItems: "center",
   justifyContent: "center",
   gap: "$2"
 });
+var DotTarget = styled(View, {
+  name: "DotTarget",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "transparent",
+  focusVisibleStyle: {
+    outlineColor: "$outlineColor",
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineOffset: 1
+  }
+});
 var Dot = styled(View, {
   name: "Dot",
   borderRadius: 1e3,
   backgroundColor: componentColors.indicator.inactive,
-  cursor: "pointer",
   hoverStyle: {
     backgroundColor: componentColors.indicator.hover
   },
@@ -49,7 +84,6 @@ var Dot = styled(View, {
     },
     disabled: {
       true: {
-        cursor: "not-allowed",
         opacity: 0.5
       }
     }
@@ -61,29 +95,66 @@ function DotIndicator(param) {
     activeIndex,
     onChange,
     variant = "dots",
-    gap = "$2",
+    gap: gapProp,
     disabled = false
   } = param;
+  var _ref, _dotGeometryMap_knobProps_sizeToken, _ref1;
+  var _getTokens_space_gap, _getTokens_space;
+  var {
+    t
+  } = useTranslation();
   var {
     knobProps
   } = useResolvedKnobs();
+  var gap = (_ref = gapProp !== null && gapProp !== void 0 ? gapProp : dotGapMap[knobProps.space]) !== null && _ref !== void 0 ? _ref : "$2";
+  var geometry = (_dotGeometryMap_knobProps_sizeToken = dotGeometryMap[knobProps.sizeToken]) !== null && _dotGeometryMap_knobProps_sizeToken !== void 0 ? _dotGeometryMap_knobProps_sizeToken : dotGeometryMap.$4;
+  var itemSize = variant === "bars" ? geometry.bar : geometry.dot;
+  var gapPx = typeof gap === "number" ? gap : (_ref1 = (_getTokens_space = getTokens().space) === null || _getTokens_space === void 0 ? void 0 : (_getTokens_space_gap = _getTokens_space[gap]) === null || _getTokens_space_gap === void 0 ? void 0 : _getTokens_space_gap.val) !== null && _ref1 !== void 0 ? _ref1 : 7;
+  var slopX = Math.max(0, Math.floor((gapPx - 1) / 2));
+  var outsetY = Math.ceil((MIN_PRESS_TARGET - itemSize) / 2);
+  var interactive = !disabled && !!onChange;
   return /* @__PURE__ */_jsx(DotsContainer, {
-    ...knobProps.gap,
     gap,
     children: Array.from({
       length: total
     }).map(function (_, index) {
       var isActive = index === activeIndex;
-      return /* @__PURE__ */_jsx(Dot, {
-        variant,
-        active: isActive,
-        activeVariant: isActive ? variant : void 0,
-        disabled: disabled || !onChange,
-        onPress: disabled || !onChange ? void 0 : function () {
-          return onChange(index);
-        },
-        accessibilityRole: "button",
-        accessibilityLabel: `Go to item ${index + 1}`
+      var dotWidth = isActive ? geometry.active : itemSize;
+      return /* @__PURE__ */_jsx(DotTarget, {
+        width: dotWidth + slopX * 2,
+        minHeight: MIN_PRESS_TARGET,
+        marginHorizontal: -slopX,
+        marginVertical: -outsetY,
+        cursor: interactive ? "pointer" : disabled ? "not-allowed" : "default",
+        onPress: interactive ? function () {
+          return onChange === null || onChange === void 0 ? void 0 : onChange(index);
+        } : void 0,
+        "aria-label": withInterp(t("Go to item {{number}}"), {
+          number: index + 1
+        }),
+        ...(isActive ? {
+          "aria-current": "true"
+        } : void 0),
+        ...(interactive ? {
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: function onKeyDown(e) {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onChange === null || onChange === void 0 ? void 0 : onChange(index);
+            }
+          }
+        } : disabled ? {
+          role: "button"
+        } : void 0),
+        children: /* @__PURE__ */_jsx(Dot, {
+          variant,
+          active: isActive,
+          activeVariant: isActive ? variant : void 0,
+          width: dotWidth,
+          height: itemSize,
+          disabled
+        })
       }, index);
     })
   });

package/dist/esm/DotIndicator/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","useResolvedKnobs","View","XStack","styled","componentColors","DotsContainer","name","alignItems","justifyContent","gap","Dot","borderRadius","backgroundColor","indicator","inactive","cursor","hoverStyle","hover","variants","active","true","variant","dots","width","height","bars","pills","activeVariant","disabled","opacity","DotIndicator","param","total","activeIndex","onChange","knobProps","children","Array","from","length","map","_","index","isActive","onPress","accessibilityRole","accessibilityLabel"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAAwB;AAEjC,SAASC,gBAAc,kCAAc;AACrC,SAASC,IAAA,EAAAC,MAAA,EAAAC,MAAA,QAAuB;AA+FtB,SAAAC,eAAA;AAxEV,IAAAC,aAAM,GAAAF,MAAgB,CAAAD,MAAO;EAC3BI,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,cAAA,EAAgB;EAChBC,GAAA,EAAK;AACP,CAAC;AAED,IAAAC,GAAM,GAAAP,MAAM,CAAAF,IAAO;EACjBK,IAAA,EAAM;EACNK,YAAA,EAAc;EACdC,eAAA,EAAiBR,eAAA,CAAgBS,SAAA,CAAUC,QAAA;EAC3CC,MAAA,EAAQ;EACRC,UAAA,EAAY;IACVJ,eAAA,EAAiBR,eAAA,CAAgBS,SAAA,CAAUI;EAC7C;EACAC,QAAA,EAAU;IACRC,MAAA,EAAQ;MACNC,IAAA,EAAM;QACJR,eAAA,EAAiBR,eAAA,CAAgBS,SAAA,CAAUM;MAC7C;IACF;IACAE,OAAA,EAAS;MACPC,IAAA,EAAM;QACJC,KAAA,EAAO;QACPC,MAAA,EAAQ;MACV;MACAC,IAAA,EAAM;QACJF,KAAA,EAAO;QACPC,MAAA,EAAQ;MACV;MACAE,KAAA,EAAO;QACLH,KAAA,EAAO;QACPC,MAAA,EAAQ;MACV;IACF;IACAG,aAAA,EAAe;MACbL,IAAA,EAAM;QACJC,KAAA,EAAO;MACT;MACAE,IAAA,EAAM;QACJF,KAAA,EAAO;MACT;MACAG,KAAA,EAAO;QACLH,KAAA,EAAO;MACT;IACF;IACAK,QAAA,EAAU;MACRR,IAAA,EAAM;QACJL,MAAA,EAAQ;QACRc,OAAA,EAAS;MACX;IACF;EACF;AACF,CAAC;AAIM,SAASC,aAAaC,KAAA;EAC3B;IAAAC,KAAA;IAAAC,WAAA;IAAAC,QAAA;IAAAb,OAAA;IAAAZ,GAAA;IAAAmB,QAAA;EAAA,IAAAG,KAAA;EACA;IAAAI;EAAA,IAAAnC,gBAAA;EACA,sBAAAD,IAAA,CAAAM,aAAA;IACA,GAAA8B,SAAU,CAAA1B,GAAA;IACVA,GAAA;IACA2B,QAAA,EAAWC,KAAA,CAAAC,IAAA;MACSC,MAAA,EAAAP;IACpB,GAAAQ,GAAQ,WAAUC,CAAA,EAAAC,KAAI;MAEtB,IACEC,QAAA,GAAAD,KAAA,KAACT,WAAA;MAEG,OAAM,eAAWlC,IAAU,CAAAW,GAAA;QAC3BW,OACE;QAACF,MAAA,EAAAwB,QAAA;QAAAhB,aAAA,EAAAgB,QAAA,GAAAtB,OAAA;QAECO,QAAA,EAAAA,QAAA,KAAAM,QAAA;QACAU,OAAA,EAAQhB,QAAA,KAAAM,QAAA;UACR,OAAAA,QAAe,CAAAQ,KAAA;QACf;QACAG,iBAAS,UAAa;QACtBC,kBAAA,EAAkB,cAAAJ,KAAA;MAAA,GAClBA,KAAA;IAA2C;EAAA;AAPtC;AAQP,SAKVZ,YAAA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","MIN_PRESS_TARGET","useResolvedKnobs","useTranslation","View","XStack","getTokens","styled","componentColors","withInterp","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","DotsContainer","name","alignItems","justifyContent","gap","DotTarget","backgroundColor","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","Dot","borderRadius","indicator","inactive","hoverStyle","hover","variants","true","variant","dots","width","height","bars","pills","activeVariant","disabled","opacity","DotIndicator","param","total","activeIndex","onChange","gapProp","_ref","_dotGeometryMap_knobProps_sizeToken","_ref1","_getTokens_space_gap","_getTokens_space","t","knobProps","space","geometry","sizeToken","itemSize","gapPx","val","slopX","Math","max","floor","outsetY","ceil","interactive","children","Array","from","length","map","_","index","isActive","dotWidth","minHeight","marginHorizontal","marginVertical","cursor","onPress","number","role","tabIndex","onKeyDown","e","key","preventDefault"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAkB;AAE3B,SAASC,gBAAA,EAAAC,gBAAsB;AAE/B,SAASC,cAAc,uBAAW;AAClC,SAASC,IAAA,EAAAC,MAAA,EAAAC,SAAuB,EAAAC,MAAA;AAChC,SAASC,eAAA,QAAkB;AA4Kf,SAAAC,UAAA;AAnJZ,IAAAC,SAAM;EACJC,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,KAAA,EAAO;AACT;AAIA,IAAAC,cAAM;EACJC,EAAA,EAAI;IACJC,GAAI,EAAE;IACNC,GAAI,EAAE;IACRC,MAAA;EAIA;EACEC,EAAA;IACAH,GAAA;IACAC,GAAA;IACAC,MAAK;EACN;EAQDE,EAAA,EAAM;IACJJ,GAAA,EAAM;IACNC,GAAA;IACAC,MAAA;EACA;AAAiB;AACE,IACjBG,aAAA,GAAcd,MAAA,CAAAF,MAAA;EAAAiB,IACd,gBAAc;EAAAC,UACd,UAAc;EAAAC,cACd,UAAe;EACjBC,GAAA;AACF,CAAC;AAED,IAAAC,SAAY,GAAAnB,MAAO,CAAAH,IAAM;EACvBkB,IAAA,EAAM;EACNC,UAAA,UAAc;EACdC,cAAA,UAAiB;EACjBG,eAAY;EAAAC,iBACV,EAAiB;IACnBC,YAAA;IACAC,YAAU;IACRC,YAAQ;IAAAC,aACA;EAAA;AACuC;AAC7C,IACFC,GAAA,GAAA1B,MAAA,CAAAH,IAAA;EAAAkB,IACA,OAAS;EAAAY,YACD;EAAAP,eACG,EAAAnB,eAAA,CAAA2B,SAAA,CAAAC,QAAA;EAAAC,UACP;IAAQV,eACV,EAAAnB,eAAA,CAAA2B,SAAA,CAAAG;EAAA;EACMC,QACJ;IAAOrB,MACP;MACFsB,IAAA;QACAb,eAAO,EAAAnB,eAAA,CAAA2B,SAAA,CAAAjB;MAAA;IACE;IACCuB,OACV;MACFC,IAAA;QACAC,KAAA;QACEC,MAAM;MAAA;MAENC,IAAA;QACAF,KAAM;QACJC,MAAA,EAAO;MACT;MACAE,KAAA,EAAO;QACLH,KAAA,EAAO;QACTC,MAAA;MACF;IACA;IAAUG,aACF;MAAAL,IACJ;QACFC,KAAA;MACF;MACFE,IAAA;QACDF,KAAA;MAIM;MACLG,KAAA;QACAH,KAAA;MACA;IACA;IACAK,QAAK;MACLR,IAAA;QACoBS,OAAA;MACpB;IACA;EAEA;AACA;AACA,SAAMC,YAAWA,CAAAC,KAAA;EAIjB;IAAMC,KAAA;IAAAC,WACG;IAAAC,QAAQ;IAAAb,OAAW,GAAQ;IAAAhB,GAAU,EAAE8B,OAAgB;IAAAP,QAAM,GAAO;EAAA,IAAAG,KAAA;EAC7E,IAAAK,IAAM,EAAAC,mCAAgC,EAAQC,KAAM;EACpD,IAAAC,oBAAqB,EAAAC,gBAAM;EAI3B;IAAMC;EAAA,IAAA1D,cAAe;EAErB;IAAA2D;EACE,IAAA5D,gBAAC;EAEG,IAAAuB,GAAA,GAAM,CAAA+B,IAAA,GAAAD,OAAW,KAAU,QAAAA,OAAA,cAAAA,OAAA,GAAA7C,SAAA,CAAAoD,SAAA,CAAAC,KAAA,eAAAP,IAAA,cAAAA,IAAA;EAC3B,IAAAQ,QAAM,IAAAP,mCAAwC,GAAA3C,cAAA,CAAAgD,SAAA,CAAAG,SAAA,eAAAR,mCAAA,cAAAA,mCAAA,GAAA3C,cAAA,CAAAK,EAAA;EAC9C,IAAA+C,QACE,GAAAzB,OAAA,cAAAuB,QAAA,CAAA/C,GAAA,GAAA+C,QAAA,CAAAhD,GAAA;EAAA,IAACmD,KAAA,UAAA1C,GAAA,gBAAAA,GAAA,IAAAiC,KAAA,IAAAE,gBAAA,GAAAtD,SAAA,GAAAyD,KAAA,cAAAH,gBAAA,wBAAAD,oBAAA,GAAAC,gBAAA,CAAAnC,GAAA,eAAAkC,oBAAA,uBAAAA,oBAAA,CAAAS,GAAA,cAAAV,KAAA,cAAAA,KAAA;EAAA,IAAAW,KAAA,GAAAC,IAAA,CAAAC,GAAA,IAAAD,IAAA,CAAAE,KAAA,EAAAL,KAAA;EAAA,IAAAM,OAEC,GAAOH,IAAA,CAAAI,IAAA,CAAW,CAAAzE,gBAAQ,GAAAiE,QAAA;EAAA,IAAAS,WAC1B,GAAW,CAAA3B,QAAA,MAAAM,QAAA;EAAA,OACX,eAAAtD,IAAmB,CAAAqB,aAAA;IAAAI,GAAA;IACFmD,QACjB,EAAAC,KAAQ,CAAAC,IAAA;MAAqDC,MAC7D,EAAA3B;IAAiD,GAAA4B,GACjD,WAAAC,CAAA,EAAYC,KAAA;MAA4D,IACvEC,QAAI,GAAAD,KAAc,KAAA7B,WAAgB;MAAuC,IACzE+B,QAAI,GAAAD,QACD,GAAAnB,QAAA,CAAA9C,MAAA,GAAAgD,QAAA;MAAA,OACE,eAAMlE,IAAA,CAAA0B,SAAA;QAAAiB,KACN,EAAAyC,QAAU,GAAAf,KAAA;QAAAgB,SACV,EAAApF,gBAAwC;QACtCqF,gBAAM,EAAQ,CAAAjB,KAAA;QACZkB,cAAE,GAAAd,OAAe;QACjBe,MAAA,EAAAb,WAAW,GAAK,YAAA3B,QAAA;QAAAyC,OAClB,EAAAd,WAAA;UACF,OAAArB,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAA4B,KAAA;QACF,IACA;QAIJ,cAAAzE,UAAA,CAAAoD,CAAA;UAAC6B,MAAA,EAAAR,KAAA;QAAA;QAAA,IAAAC,QACC;UAAA,cACQ;QAAA,IACR;QAAoC,IAAAR,WAC7B;UAAAgB,IACP,UAAQ;UAAAC,QACR;UAAAC,SAAA,WAAAA,UAAAC,CAAA;YACF,IAAAA,CAAA,CAAAC,GAAA,gBAAAD,CAAA,CAAAC,GAAA;cAAAD,CAAA,CAAAE,cAAA;cA/BK1C,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAA4B,KAAA;YAgCP;UAGN;QAEJ,IAAAlC,QAAA","ignoreList":[]}