@multiplatform.one/components 6.4.2 → 6.6.0

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

@@ -78,7 +78,6 @@ var ArrowButton = (0, import_tamagui.styled)(import_tamagui.View, {
 });
 var ArrowVisual = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "CarouselArrowVisual",
-  borderRadius: 1e3,
   backgroundColor: "$background",
   alignItems: "center",
   justifyContent: "center",
@@ -102,8 +101,8 @@ function Carousel(param) {
     onSlideChange,
     initialSlide = 0
   } = param;
-  var _ref;
-  var _getTokens_size_knobProps_sizeToken, _getTokens_size;
+  var _ref, _ref1;
+  var _getTokens_space_gap, _getTokens_space, _getTokens_size_knobProps_sizeToken, _getTokens_size;
   var {
     t
   } = (0, import_react_i18next.useTranslation)();
@@ -112,24 +111,26 @@ function Carousel(param) {
     control
   } = (0, import_theme.useResolvedKnobs)();
   var gap = gapProp !== null && gapProp !== void 0 ? gapProp : knobProps.gap.gap;
-  var arrowSize = (_ref = (_getTokens_size = (0, import_tamagui.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 gapPx = typeof gap === "number" ? gap : (_ref = (_getTokens_space = (0, import_tamagui.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 && _ref !== void 0 ? _ref : 0;
+  var arrowSize = (_ref1 = (_getTokens_size = (0, import_tamagui.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 && _ref1 !== void 0 ? _ref1 : 40;
   var arrowGlyphSize = Math.round(arrowSize / 2);
+  var arrowRadius = knobProps.pointy ? 0 : 1e3;
   var arrowTargetSize = Math.max(arrowSize, import_theme.MIN_PRESS_TARGET);
   var arrowEdgeInset = Math.max(0, 8 - Math.round((arrowTargetSize - arrowSize) / 2));
   var [activeIndex, setActiveIndex] = (0, import_react.useState)(initialSlide);
   var trackRef = (0, import_react.useRef)(null);
   var slideCount = import_react.Children.count(children);
-  var slideWidthRef = (0, import_react.useRef)(0);
+  var [slideWidth, setSlideWidth] = (0, import_react.useState)(0);
   var autoPlayRef = (0, import_react.useRef)(null);
   var scrollToSlide = (0, import_react.useCallback)(function (index) {
     if (!trackRef.current) return;
     if (index < 0 || index >= slideCount) return;
-    var offset = index * slideWidthRef.current;
+    var offset = index * (slideWidth + gapPx);
     trackRef.current.scrollTo({
       x: offset,
       animated: true
     });
-  }, [slideCount]);
+  }, [slideCount, slideWidth, gapPx]);
   var goToSlide = (0, import_react.useCallback)(function (index) {
     var targetIndex = index;
     if (loop) {
@@ -150,14 +151,13 @@ function Carousel(param) {
   }, [activeIndex, goToSlide]);
   var handleScroll = (0, import_react.useCallback)(function (event) {
     var scrollX = event.nativeEvent.contentOffset.x;
-    var width = slideWidthRef.current;
-    if (!width) return;
-    var newIndex = Math.round(scrollX / width);
+    if (!slideWidth) return;
+    var newIndex = Math.round(scrollX / (slideWidth + gapPx));
     if (newIndex !== activeIndex && newIndex >= 0 && newIndex < slideCount) {
       setActiveIndex(newIndex);
       onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(newIndex);
     }
-  }, [activeIndex, slideCount, onSlideChange]);
+  }, [activeIndex, slideCount, onSlideChange, slideWidth, gapPx]);
   (0, import_react.useEffect)(function () {
     if (autoPlay > 0) {
       autoPlayRef.current = setInterval(function () {
@@ -170,11 +170,16 @@ function Carousel(param) {
       };
     }
   }, [autoPlay, goNext]);
+  var activeIndexRef = (0, import_react.useRef)(activeIndex);
+  activeIndexRef.current = activeIndex;
   (0, import_react.useEffect)(function () {
-    if (initialSlide > 0) {
-      scrollToSlide(initialSlide);
-    }
-  }, [initialSlide, scrollToSlide]);
+    if (!slideWidth || slideCount === 0 || !trackRef.current) return;
+    var index = Math.max(0, Math.min(activeIndexRef.current, slideCount - 1));
+    trackRef.current.scrollTo({
+      x: index * (slideWidth + gapPx),
+      animated: false
+    });
+  }, [slideWidth, gapPx, slideCount]);
   var canGoPrev = loop || activeIndex > 0;
   var canGoNext = loop || activeIndex < slideCount - 1;
   var isRTL = (0, import_useDirection.useDirection)() === "rtl";
@@ -184,7 +189,7 @@ function Carousel(param) {
   var NextGlyph = isRTL ? import_react2.CaretLeftIcon : import_react2.CaretRightIcon;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(CarouselContainer, {
-      ...knobProps.borderRadius,
+      ...knobProps.containerRadius,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
         ref: trackRef,
         horizontal: true,
@@ -195,16 +200,26 @@ function Carousel(param) {
         onScroll: handleScroll,
         scrollEventThrottle: 16,
         onLayout: function onLayout(e) {
-          slideWidthRef.current = e.nativeEvent.layout.width;
+          return setSlideWidth(e.nativeEvent.layout.width);
+        },
+        ...{
+          dataSet: {
+            carouselTrack: "true"
+          }
         },
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
           gap,
           children: import_react.Children.map(children, function (child, index) {
             return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CarouselSlide, {
-              width: "100%",
+              // Measured-viewport width (LC-62), never a percentage; slides
+              // stay content-sized only for the pre-measure frame.
+              width: slideWidth > 0 ? slideWidth : void 0,
               style: {
                 scrollSnapAlign: "start"
               },
+              ...{
+                "data-carousel-slide": index
+              },
               children: child
             }, index);
           })
@@ -237,6 +252,7 @@ function Carousel(param) {
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowVisual, {
             width: arrowSize,
             height: arrowSize,
+            borderRadius: arrowRadius,
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PrevGlyph, {
               size: arrowGlyphSize
             })
@@ -266,6 +282,7 @@ function Carousel(param) {
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowVisual, {
             width: arrowSize,
             height: arrowSize,
+            borderRadius: arrowRadius,
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(NextGlyph, {
               size: arrowGlyphSize
             })

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

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","Carousel_exports","Carousel","module","exports","import_jsx_runtime","require","import_react","import_react_i18next","import_react2","import_forms","import_theme","import_tamagui","import_DotIndicator","import_useDirection","CarouselContainer","styled","View","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","zIndex","localTop","alignItems","justifyContent","backgroundColor","cursor","opacity","hoverStyle","scale","pressStyle","variants","disabled","true","ArrowVisual","borderRadius","shadowColor","shadowRadius","shadowOpacity","DotsWrapper","paddingVertical","param","children","showArrows","showDots","autoPlay","loop","gap","gapProp","onSlideChange","initialSlide","_ref","_getTokens_size_knobProps_sizeToken","_getTokens_size","t","useTranslation","knobProps","control","useResolvedKnobs","arrowSize","getTokens","size","sizeToken","val","arrowGlyphSize","Math","round","arrowTargetSize","max","MIN_PRESS_TARGET","arrowEdgeInset","activeIndex","setActiveIndex","useState","trackRef","useRef","slideCount","Children","count","slideWidthRef","autoPlayRef","scrollToSlide","useCallback","index","current","offset","scrollTo","x","animated","goToSlide","targetIndex","min","goNext","goPrev","handleScroll","event","scrollX","nativeEvent","contentOffset","newIndex","useEffect","setInterval","clearInterval","canGoPrev","canGoNext","isRTL","useDirection","prevSide","nextSide","PrevGlyph","CaretRightIcon","CaretLeftIcon","NextGlyph","jsxs","jsx","ScrollView","ref","horizontal","showsHorizontalScrollIndicator","style","scrollSnapType","onScroll","scrollEventThrottle","onLayout","e","layout","XStack","map","child","scrollSnapAlign"],"sources":["../../../src/Carousel/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","Carousel_exports","Carousel","module","exports","import_jsx_runtime","require","import_react","import_react_i18next","import_react2","import_forms","import_theme","import_tamagui","import_DotIndicator","import_useDirection","CarouselContainer","styled","View","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","zIndex","localTop","alignItems","justifyContent","backgroundColor","cursor","opacity","hoverStyle","scale","pressStyle","variants","disabled","true","ArrowVisual","shadowColor","shadowRadius","shadowOpacity","DotsWrapper","paddingVertical","param","children","showArrows","showDots","autoPlay","loop","gap","gapProp","onSlideChange","initialSlide","_ref","_ref1","_getTokens_space_gap","_getTokens_space","_getTokens_size_knobProps_sizeToken","_getTokens_size","t","useTranslation","knobProps","control","useResolvedKnobs","gapPx","getTokens","space","val","arrowSize","size","sizeToken","arrowGlyphSize","Math","round","arrowRadius","pointy","arrowTargetSize","max","MIN_PRESS_TARGET","arrowEdgeInset","activeIndex","setActiveIndex","useState","trackRef","useRef","slideCount","Children","count","slideWidth","setSlideWidth","autoPlayRef","scrollToSlide","useCallback","index","current","offset","scrollTo","x","animated","goToSlide","targetIndex","min","goNext","goPrev","handleScroll","event","scrollX","nativeEvent","contentOffset","newIndex","useEffect","setInterval","clearInterval","activeIndexRef","canGoPrev","canGoNext","isRTL","useDirection","prevSide","nextSide","PrevGlyph","CaretRightIcon","CaretLeftIcon","NextGlyph","jsxs","containerRadius","jsx","ScrollView","ref","horizontal","showsHorizontalScrollIndicator","style","scrollSnapType","onScroll","scrollEventThrottle","onLayout","e","layout","dataSet","carouselTrack","XStack","map","child"],"sources":["../../../src/Carousel/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/DotIndicator/index.mjs

@@ -1,4 +1,5 @@
-import { MIN_PRESS_TARGET, useResolvedKnobs } from "@multiplatform.one/theme";
+import { MIN_PRESS_TARGET, radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { CheckIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { View, XStack, getTokens, styled } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
@@ -26,11 +27,36 @@ const dotGeometryMap = {
     active: 30
   }
 };
+const CHECK_MIN_DOT = 8;
+function sizePx(value, fallback) {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const token = getTokens().size?.[value]?.val;
+    if (typeof token === "number") return token;
+  }
+  return fallback;
+}
 const DotsContainer = styled(XStack, {
   name: "DotIndicator",
   alignItems: "center",
   justifyContent: "center",
-  gap: "$2"
+  gap: "$2",
+  variants: {
+    // A rail seats the strip on a filled capsule instead of the page. It is a
+    // variant of the strip rather than host chrome because the rail and the
+    // idle dot color are ONE decision: idle dots have to step up the ramp to
+    // stay visible on the rail's fill, and split across two files that pairing
+    // drifts (LC-16).
+    rail: {
+      true: {
+        backgroundColor: componentColors.interactive.background,
+        // R-PILL (D-09 / LC-60): the rail is a capsule at every radius value,
+        // like the dots it holds.
+        ...radiusClassProps("R-PILL", "DotIndicator rail"),
+        borderRadius: "$10"
+      }
+    }
+  }
 });
 const DotTarget = styled(View, {
   name: "DotTarget",
@@ -46,6 +72,13 @@ const DotTarget = styled(View, {
 });
 const Dot = styled(View, {
   name: "Dot",
+  // R-PILL (D-09 / LC-60): an ornamental dot is a circle at every radius
+  // value — the knob moves its size, never its shape — so it declares the
+  // class the `radius:none` sweep licenses it under.
+  ...radiusClassProps("R-PILL", "DotIndicator dot"),
+  // Centers the completion checkmark; inert for the empty dots.
+  alignItems: "center",
+  justifyContent: "center",
   borderRadius: 1e3,
   backgroundColor: componentColors.indicator.inactive,
   hoverStyle: {
@@ -54,34 +87,16 @@ const Dot = styled(View, {
   variants: {
     active: {
       true: {
-        backgroundColor: componentColors.indicator.active
-      }
-    },
-    variant: {
-      dots: {
-        width: 8,
-        height: 8
-      },
-      bars: {
-        width: 6,
-        height: 6
-      },
-      pills: {
-        width: 8,
-        height: 8
-      }
-    },
-    activeVariant: {
-      dots: {
-        width: 24
-      },
-      bars: {
-        width: 24
-      },
-      pills: {
-        width: 24
+        // LC-05: the active dot is the selected mark, so it carries the accent
+        // (it read $color9 neutral — indistinguishable from idle chrome).
+        backgroundColor: componentColors.indicator.selected
       }
     },
+    // No `variant` geometry here: the mark's width/height are always passed
+    // explicitly from the one size channel below, so a per-variant pixel table
+    // on the styled component could only ever be a second, silently-losing
+    // definition of the same thing (it already disagreed with the scale at
+    // size knob `$3`, where a tick is 5px, not 6).
     disabled: {
       true: {
         opacity: 0.5
@@ -95,7 +110,14 @@ function DotIndicator({
   onChange,
   variant = "dots",
   gap: gapProp,
-  disabled = false
+  disabled = false,
+  completedSteps,
+  idiom = "item",
+  rail = false,
+  dotSize,
+  activeDotSize,
+  transition,
+  dotStateAttribute = "data-dot-state"
 }) {
   const {
     t
@@ -105,18 +127,36 @@ function DotIndicator({
   } = useResolvedKnobs();
   const gap = gapProp ?? dotGapMap[knobProps.space] ?? "$2";
   const geometry = dotGeometryMap[knobProps.sizeToken] ?? dotGeometryMap.$4;
-  const itemSize = variant === "bars" ? geometry.bar : geometry.dot;
+  const isTick = variant === "bars";
+  const itemSize = sizePx(dotSize, isTick ? geometry.bar : geometry.dot);
+  const activeSize = sizePx(activeDotSize, geometry.active);
   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 outsetY = Math.max(0, Math.ceil((MIN_PRESS_TARGET - itemSize) / 2));
   const interactive = !disabled && !!onChange;
+  const isStep = idiom === "step";
+  const label = isStep ? t("Go to step {{number}}") : t("Go to item {{number}}");
+  const currentValue = isStep ? "step" : "true";
+  const motionStyle = transition ? {
+    transition: "width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease"
+  } : void 0;
   return /* @__PURE__ */jsx(DotsContainer, {
     gap,
+    rail,
+    ...(rail ? {
+      paddingHorizontal: knobProps.panelPadding.padding,
+      height: knobProps.sizeToken
+    } : void 0),
     children: Array.from({
       length: total
     }).map((_, index) => {
       const isActive = index === activeIndex;
-      const dotWidth = isActive ? geometry.active : itemSize;
+      const isCompleted = !isActive && !!completedSteps?.has(index);
+      const dotWidth = isActive ? activeSize : itemSize;
+      const restingFill = isCompleted ? componentColors.indicator.completed : rail ?
+      // Idle chrome steps up the ramp on a rail so the dot still
+      // separates from the capsule fill it sits on.
+      componentColors.indicator.track : componentColors.indicator.inactive;
       return /* @__PURE__ */jsx(DotTarget, {
         width: dotWidth + slopX * 2,
         minHeight: MIN_PRESS_TARGET,
@@ -124,11 +164,11 @@ function DotIndicator({
         marginVertical: -outsetY,
         cursor: interactive ? "pointer" : disabled ? "not-allowed" : "default",
         onPress: interactive ? () => onChange?.(index) : void 0,
-        "aria-label": withInterp(t("Go to item {{number}}"), {
+        "aria-label": withInterp(label, {
           number: index + 1
         }),
         ...(isActive ? {
-          "aria-current": "true"
+          "aria-current": currentValue
         } : void 0),
         ...(interactive ? {
           role: "button",
@@ -143,12 +183,31 @@ function DotIndicator({
           role: "button"
         } : void 0),
         children: /* @__PURE__ */jsx(Dot, {
-          variant,
           active: isActive,
-          activeVariant: isActive ? variant : void 0,
+          ...(isActive ? void 0 : {
+            backgroundColor: restingFill,
+            // A completed dot and a rail dot both hold their fill on
+            // hover: the neutral hover step is PALER than either, so
+            // the page-level hover would read as a dim.
+            ...(isCompleted || rail ? {
+              hoverStyle: {
+                backgroundColor: restingFill
+              }
+            } : void 0)
+          }),
           width: dotWidth,
           height: itemSize,
-          disabled
+          disabled,
+          transition,
+          style: motionStyle,
+          ...{
+            [dotStateAttribute]: isActive ? "active" : "idle"
+          },
+          children: isCompleted && !isTick && itemSize >= CHECK_MIN_DOT && /* @__PURE__ */jsx(CheckIcon, {
+            size: 8,
+            color: "white",
+            weight: "bold"
+          })
         })
       }, index);
     })

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"names":["MIN_PRESS_TARGET","radiusClassProps","useResolvedKnobs","CheckIcon","useTranslation","View","XStack","getTokens","styled","componentColors","withInterp","jsx","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","CHECK_MIN_DOT","sizePx","value","fallback","token","size","val","DotsContainer","name","alignItems","justifyContent","gap","variants","rail","true","backgroundColor","interactive","background","borderRadius","DotTarget","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","Dot","indicator","inactive","hoverStyle","hover","selected","disabled","opacity","DotIndicator","total","activeIndex","onChange","variant","gapProp","completedSteps","idiom","dotSize","activeDotSize","transition","dotStateAttribute","t","knobProps","space","geometry","sizeToken","isTick","itemSize","activeSize","gapPx","slopX","Math","max","floor","outsetY","ceil","isStep","label","currentValue","motionStyle","paddingHorizontal","panelPadding","padding","height","children","Array","from","length","map","_","index","isActive","isCompleted","has","dotWidth","restingFill","completed","track","width","minHeight","marginHorizontal","marginVertical","cursor","onPress","number","role","tabIndex","onKeyDown","e","key","preventDefault","style","color","weight"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,EAAkBC,gBAAA,EAAkBC,gBAAA,QAAwB;AACrE,SAASC,SAAA,QAAiB;AAE1B,SAASC,cAAA,QAAsB;AAE/B,SAASC,IAAA,EAAMC,MAAA,EAAQC,SAAA,EAAWC,MAAA,QAAc;AAChD,SAASC,eAAA,QAAuB;AAChC,SAASC,UAAA,QAAkB;AAuTX,SAAAC,GAAA;AAnPhB,MAAMC,SAAA,GAAoC;EACxCC,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,KAAA,EAAO;AACT;AASA,MAAMC,cAAA,GAA+E;EACnFC,EAAA,EAAI;IAAEC,GAAA,EAAK;IAAGC,GAAA,EAAK;IAAGC,MAAA,EAAQ;EAAG;EACjCC,EAAA,EAAI;IAAEH,GAAA,EAAK;IAAGC,GAAA,EAAK;IAAGC,MAAA,EAAQ;EAAG;EACjCE,EAAA,EAAI;IAAEJ,GAAA,EAAK;IAAIC,GAAA,EAAK;IAAGC,MAAA,EAAQ;EAAG;AACpC;AAOA,MAAMG,aAAA,GAAgB;AAGtB,SAASC,OAAOC,KAAA,EAAoCC,QAAA,EAA0B;EAC5E,IAAI,OAAOD,KAAA,KAAU,UAAU,OAAOA,KAAA;EACtC,IAAI,OAAOA,KAAA,KAAU,UAAU;IAC7B,MAAME,KAAA,GAASpB,SAAA,CAAU,EAAEqB,IAAA,GAAwDH,KAAK,GAAGI,GAAA;IAC3F,IAAI,OAAOF,KAAA,KAAU,UAAU,OAAOA,KAAA;EACxC;EACA,OAAOD,QAAA;AACT;AAIA,MAAMI,aAAA,GAAgBtB,MAAA,CAAOF,MAAA,EAAQ;EACnCyB,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,cAAA,EAAgB;EAChBC,GAAA,EAAK;EACLC,QAAA,EAAU;IAAA;IAAA;IAAA;IAAA;IAAA;IAMRC,IAAA,EAAM;MACJC,IAAA,EAAM;QACJC,eAAA,EAAiB7B,eAAA,CAAgB8B,WAAA,CAAYC,UAAA;QAAA;QAAA;QAG7C,GAAGvC,gBAAA,CAAiB,UAAU,mBAAmB;QACjDwC,YAAA,EAAc;MAChB;IACF;EACF;AACF,CAAC;AAQD,MAAMC,SAAA,GAAYlC,MAAA,CAAOH,IAAA,EAAM;EAC7B0B,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,cAAA,EAAgB;EAChBK,eAAA,EAAiB;EACjBK,iBAAA,EAAmB;IACjBC,YAAA,EAAc;IACdC,YAAA,EAAc;IACdC,YAAA,EAAc;IACdC,aAAA,EAAe;EACjB;AACF,CAAC;AAED,MAAMC,GAAA,GAAMxC,MAAA,CAAOH,IAAA,EAAM;EACvB0B,IAAA,EAAM;EAAA;EAAA;EAAA;EAIN,GAAG9B,gBAAA,CAAiB,UAAU,kBAAkB;EAAA;EAEhD+B,UAAA,EAAY;EACZC,cAAA,EAAgB;EAChBQ,YAAA,EAAc;EACdH,eAAA,EAAiB7B,eAAA,CAAgBwC,SAAA,CAAUC,QAAA;EAC3CC,UAAA,EAAY;IACVb,eAAA,EAAiB7B,eAAA,CAAgBwC,SAAA,CAAUG;EAC7C;EACAjB,QAAA,EAAU;IACRf,MAAA,EAAQ;MACNiB,IAAA,EAAM;QAAA;QAAA;QAGJC,eAAA,EAAiB7B,eAAA,CAAgBwC,SAAA,CAAUI;MAC7C;IACF;IAAA;IAAA;IAAA;IAAA;IAAA;IAMAC,QAAA,EAAU;MACRjB,IAAA,EAAM;QACJkB,OAAA,EAAS;MACX;IACF;EACF;AACF,CAAC;AAIM,SAASC,aAAa;EAC3BC,KAAA;EACAC,WAAA;EACAC,QAAA;EACAC,OAAA,GAAU;EACV1B,GAAA,EAAK2B,OAAA;EACLP,QAAA,GAAW;EACXQ,cAAA;EACAC,KAAA,GAAQ;EACR3B,IAAA,GAAO;EACP4B,OAAA;EACAC,aAAA;EACAC,UAAA;EACAC,iBAAA,GAAoB;AACtB,GAAsB;EACpB,MAAM;IAAEC;EAAE,IAAIhE,cAAA,CAAe;EAC7B,MAAM;IAAEiE;EAAU,IAAInE,gBAAA,CAAiB;EAEvC,MAAMgC,GAAA,GAAM2B,OAAA,IAAWjD,SAAA,CAAUyD,SAAA,CAAUC,KAAK,KAAK;EACrD,MAAMC,QAAA,GAAWvD,cAAA,CAAeqD,SAAA,CAAUG,SAAS,KAAKxD,cAAA,CAAeK,EAAA;EAIvE,MAAMoD,MAAA,GAASb,OAAA,KAAY;EAG3B,MAAMc,QAAA,GAAWlD,MAAA,CAAOwC,OAAA,EAASS,MAAA,GAASF,QAAA,CAASpD,GAAA,GAAMoD,QAAA,CAASrD,GAAG;EACrE,MAAMyD,UAAA,GAAanD,MAAA,CAAOyC,aAAA,EAAeM,QAAA,CAASnD,MAAM;EAIxD,MAAMwD,KAAA,GAAQ,OAAO1C,GAAA,KAAQ,WAAWA,GAAA,GAAQ3B,SAAA,CAAU,EAAE+D,KAAA,GAAgBpC,GAAG,GAAGL,GAAA,IAAO;EACzF,MAAMgD,KAAA,GAAQC,IAAA,CAAKC,GAAA,CAAI,GAAGD,IAAA,CAAKE,KAAA,EAAOJ,KAAA,GAAQ,KAAK,CAAC,CAAC;EACrD,MAAMK,OAAA,GAAUH,IAAA,CAAKC,GAAA,CAAI,GAAGD,IAAA,CAAKI,IAAA,EAAMlF,gBAAA,GAAmB0E,QAAA,IAAY,CAAC,CAAC;EAIxE,MAAMnC,WAAA,GAAc,CAACe,QAAA,IAAY,CAAC,CAACK,QAAA;EACnC,MAAMwB,MAAA,GAASpB,KAAA,KAAU;EACzB,MAAMqB,KAAA,GAAQD,MAAA,GAASf,CAAA,CAAE,uBAAuB,IAAIA,CAAA,CAAE,uBAAuB;EAC7E,MAAMiB,YAAA,GAAeF,MAAA,GAAS,SAAS;EAIvC,MAAMG,WAAA,GAAcpB,UAAA,GAChB;IACEA,UAAA,EACE;EACJ,IACA;EAEJ,OACE,eAAAvD,GAAA,CAACmB,aAAA;IACCI,GAAA;IACAE,IAAA;IACC,IAAIA,IAAA,GACD;MAAEmD,iBAAA,EAAmBlB,SAAA,CAAUmB,YAAA,CAAaC,OAAA;MAASC,MAAA,EAAQrB,SAAA,CAAUG;IAAU,IACjF;IAEHmB,QAAA,EAAAC,KAAA,CAAMC,IAAA,CAAK;MAAEC,MAAA,EAAQrC;IAAM,CAAC,EAAEsC,GAAA,CAAI,CAACC,CAAA,EAAGC,KAAA,KAAU;MAC/C,MAAMC,QAAA,GAAWD,KAAA,KAAUvC,WAAA;MAE3B,MAAMyC,WAAA,GAAc,CAACD,QAAA,IAAY,CAAC,CAACpC,cAAA,EAAgBsC,GAAA,CAAIH,KAAK;MAC5D,MAAMI,QAAA,GAAWH,QAAA,GAAWvB,UAAA,GAAaD,QAAA;MAIzC,MAAM4B,WAAA,GAAcH,WAAA,GAChB1F,eAAA,CAAgBwC,SAAA,CAAUsD,SAAA,GAC1BnE,IAAA;MAAA;MAAA;MAGE3B,eAAA,CAAgBwC,SAAA,CAAUuD,KAAA,GAC1B/F,eAAA,CAAgBwC,SAAA,CAAUC,QAAA;MAChC,OACE,eAAAvC,GAAA,CAAC+B,SAAA;QAEC+D,KAAA,EAAOJ,QAAA,GAAWxB,KAAA,GAAQ;QAC1B6B,SAAA,EAAW1G,gBAAA;QACX2G,gBAAA,EAAkB,CAAC9B,KAAA;QACnB+B,cAAA,EAAgB,CAAC3B,OAAA;QACjB4B,MAAA,EAAQtE,WAAA,GAAc,YAAYe,QAAA,GAAW,gBAAgB;QAC7DwD,OAAA,EAASvE,WAAA,GAAc,MAAMoB,QAAA,GAAWsC,KAAK,IAAI;QACjD,cAAYvF,UAAA,CAAW0E,KAAA,EAAO;UAAE2B,MAAA,EAAQd,KAAA,GAAQ;QAAE,CAAC;QAClD,IAAIC,QAAA,GACA;UAAE,gBAAgBb;QAAa,IAChC;QACH,IAAI9C,WAAA,GACD;UACEyE,IAAA,EAAM;UACNC,QAAA,EAAU;UACVC,SAAA,EAAaC,CAAA,IAA2B;YACtC,IAAIA,CAAA,CAAEC,GAAA,KAAQ,WAAWD,CAAA,CAAEC,GAAA,KAAQ,KAAK;cACtCD,CAAA,CAAEE,cAAA,CAAe;cACjB1D,QAAA,GAAWsC,KAAK;YAClB;UACF;QACF,IACA3C,QAAA,GACE;UAAE0D,IAAA,EAAM;QAAkB,IAC1B;QAENrB,QAAA,iBAAAhF,GAAA,CAACqC,GAAA;UACC5B,MAAA,EAAQ8E,QAAA;UACP,IAAIA,QAAA,GACD,SACA;YACE5D,eAAA,EAAiBgE,WAAA;YAAA;YAAA;YAAA;YAIjB,IAAIH,WAAA,IAAe/D,IAAA,GACf;cAAEe,UAAA,EAAY;gBAAEb,eAAA,EAAiBgE;cAAY;YAAE,IAC/C;UACN;UACJG,KAAA,EAAOJ,QAAA;UACPX,MAAA,EAAQhB,QAAA;UACRpB,QAAA;UACAY,UAAA;UACAoD,KAAA,EAAOhC,WAAA;UACN,GAAI;YAAE,CAACnB,iBAAiB,GAAG+B,QAAA,GAAW,WAAW;UAAO;UAKxDP,QAAA,EAAAQ,WAAA,IAAe,CAAC1B,MAAA,IAAUC,QAAA,IAAYnD,aAAA,IACrC,eAAAZ,GAAA,CAACR,SAAA;YAAUyB,IAAA,EAAM;YAAG2F,KAAA,EAAM;YAAQC,MAAA,EAAO;UAAA,CAAO;QAAA,CAEpD;MAAA,GApDKvB,KAqDP;IAEJ,CAAC;EAAA,CACH;AAEJ","ignoreList":[]}

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

@@ -29,6 +29,7 @@ __export(DotIndicator_exports, {
 module.exports = __toCommonJS(DotIndicator_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
 var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.native.js");
@@ -55,11 +56,37 @@ var dotGeometryMap = {
     active: 30
   }
 };
+var CHECK_MIN_DOT = 8;
+function sizePx(value, fallback) {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    var _getTokens_size_value, _getTokens_size;
+    var token = (_getTokens_size = (0, import_tamagui.getTokens)().size) === null || _getTokens_size === void 0 ? void 0 : (_getTokens_size_value = _getTokens_size[value]) === null || _getTokens_size_value === void 0 ? void 0 : _getTokens_size_value.val;
+    if (typeof token === "number") return token;
+  }
+  return fallback;
+}
 var DotsContainer = (0, import_tamagui.styled)(import_tamagui.XStack, {
   name: "DotIndicator",
   alignItems: "center",
   justifyContent: "center",
-  gap: "$2"
+  gap: "$2",
+  variants: {
+    // A rail seats the strip on a filled capsule instead of the page. It is a
+    // variant of the strip rather than host chrome because the rail and the
+    // idle dot color are ONE decision: idle dots have to step up the ramp to
+    // stay visible on the rail's fill, and split across two files that pairing
+    // drifts (LC-16).
+    rail: {
+      true: {
+        backgroundColor: import_componentColors.componentColors.interactive.background,
+        // R-PILL (D-09 / LC-60): the rail is a capsule at every radius value,
+        // like the dots it holds.
+        ...(0, import_theme.radiusClassProps)("R-PILL", "DotIndicator rail"),
+        borderRadius: "$10"
+      }
+    }
+  }
 });
 var DotTarget = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "DotTarget",
@@ -75,6 +102,13 @@ var DotTarget = (0, import_tamagui.styled)(import_tamagui.View, {
 });
 var Dot = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "Dot",
+  // R-PILL (D-09 / LC-60): an ornamental dot is a circle at every radius
+  // value — the knob moves its size, never its shape — so it declares the
+  // class the `radius:none` sweep licenses it under.
+  ...(0, import_theme.radiusClassProps)("R-PILL", "DotIndicator dot"),
+  // Centers the completion checkmark; inert for the empty dots.
+  alignItems: "center",
+  justifyContent: "center",
   borderRadius: 1e3,
   backgroundColor: import_componentColors.componentColors.indicator.inactive,
   hoverStyle: {
@@ -83,34 +117,16 @@ var Dot = (0, import_tamagui.styled)(import_tamagui.View, {
   variants: {
     active: {
       true: {
-        backgroundColor: import_componentColors.componentColors.indicator.active
-      }
-    },
-    variant: {
-      dots: {
-        width: 8,
-        height: 8
-      },
-      bars: {
-        width: 6,
-        height: 6
-      },
-      pills: {
-        width: 8,
-        height: 8
-      }
-    },
-    activeVariant: {
-      dots: {
-        width: 24
-      },
-      bars: {
-        width: 24
-      },
-      pills: {
-        width: 24
+        // LC-05: the active dot is the selected mark, so it carries the accent
+        // (it read $color9 neutral — indistinguishable from idle chrome).
+        backgroundColor: import_componentColors.componentColors.indicator.selected
       }
     },
+    // No `variant` geometry here: the mark's width/height are always passed
+    // explicitly from the one size channel below, so a per-variant pixel table
+    // on the styled component could only ever be a second, silently-losing
+    // definition of the same thing (it already disagreed with the scale at
+    // size knob `$3`, where a tick is 5px, not 6).
     disabled: {
       true: {
         opacity: 0.5
@@ -125,7 +141,14 @@ function DotIndicator(param) {
     onChange,
     variant = "dots",
     gap: gapProp,
-    disabled = false
+    disabled = false,
+    completedSteps,
+    idiom = "item",
+    rail = false,
+    dotSize,
+    activeDotSize,
+    transition,
+    dotStateAttribute = "data-dot-state"
   } = param;
   var _ref, _dotGeometryMap_knobProps_sizeToken, _ref1;
   var _getTokens_space_gap, _getTokens_space;
@@ -137,18 +160,36 @@ function DotIndicator(param) {
   } = (0, import_theme.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 isTick = variant === "bars";
+  var itemSize = sizePx(dotSize, isTick ? geometry.bar : geometry.dot);
+  var activeSize = sizePx(activeDotSize, geometry.active);
   var gapPx = typeof gap === "number" ? gap : (_ref1 = (_getTokens_space = (0, import_tamagui.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((import_theme.MIN_PRESS_TARGET - itemSize) / 2);
+  var outsetY = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - itemSize) / 2));
   var interactive = !disabled && !!onChange;
+  var isStep = idiom === "step";
+  var label = isStep ? t("Go to step {{number}}") : t("Go to item {{number}}");
+  var currentValue = isStep ? "step" : "true";
+  var motionStyle = transition ? {
+    transition: "width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease"
+  } : void 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DotsContainer, {
     gap,
+    rail,
+    ...(rail ? {
+      paddingHorizontal: knobProps.panelPadding.padding,
+      height: knobProps.sizeToken
+    } : void 0),
     children: Array.from({
       length: total
     }).map(function (_, index) {
       var isActive = index === activeIndex;
-      var dotWidth = isActive ? geometry.active : itemSize;
+      var isCompleted = !isActive && !!(completedSteps === null || completedSteps === void 0 ? void 0 : completedSteps.has(index));
+      var dotWidth = isActive ? activeSize : itemSize;
+      var restingFill = isCompleted ? import_componentColors.componentColors.indicator.completed : rail ?
+      // Idle chrome steps up the ramp on a rail so the dot still
+      // separates from the capsule fill it sits on.
+      import_componentColors.componentColors.indicator.track : import_componentColors.componentColors.indicator.inactive;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DotTarget, {
         width: dotWidth + slopX * 2,
         minHeight: import_theme.MIN_PRESS_TARGET,
@@ -158,11 +199,11 @@ function DotIndicator(param) {
         onPress: interactive ? function () {
           return onChange === null || onChange === void 0 ? void 0 : onChange(index);
         } : void 0,
-        "aria-label": (0, import_t.withInterp)(t("Go to item {{number}}"), {
+        "aria-label": (0, import_t.withInterp)(label, {
           number: index + 1
         }),
         ...(isActive ? {
-          "aria-current": "true"
+          "aria-current": currentValue
         } : void 0),
         ...(interactive ? {
           role: "button",
@@ -177,12 +218,31 @@ function DotIndicator(param) {
           role: "button"
         } : void 0),
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Dot, {
-          variant,
           active: isActive,
-          activeVariant: isActive ? variant : void 0,
+          ...(isActive ? void 0 : {
+            backgroundColor: restingFill,
+            // A completed dot and a rail dot both hold their fill on
+            // hover: the neutral hover step is PALER than either, so
+            // the page-level hover would read as a dim.
+            ...(isCompleted || rail ? {
+              hoverStyle: {
+                backgroundColor: restingFill
+              }
+            } : void 0)
+          }),
           width: dotWidth,
           height: itemSize,
-          disabled
+          disabled,
+          transition,
+          style: motionStyle,
+          ...{
+            [dotStateAttribute]: isActive ? "active" : "idle"
+          },
+          children: isCompleted && !isTick && itemSize >= CHECK_MIN_DOT && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
+            size: 8,
+            color: "white",
+            weight: "bold"
+          })
         })
       }, index);
     })