@multiplatform.one/components 6.4.3 → 6.7.0

package/dist/cjs/DotIndicator/index.cjs

@@ -26,6 +26,7 @@ __export(DotIndicator_exports, {
 });
 module.exports = __toCommonJS(DotIndicator_exports);
 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.cjs");
@@ -53,11 +54,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 = (0, import_tamagui.getTokens)().size?.[value]?.val;
+    if (typeof token === "number") return token;
+  }
+  return fallback;
+}
 const 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"
+      }
+    }
+  }
 });
 const DotTarget = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "DotTarget",
@@ -73,6 +99,13 @@ const DotTarget = (0, import_tamagui.styled)(import_tamagui.View, {
 });
 const 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: {
@@ -86,31 +119,11 @@ const Dot = (0, import_tamagui.styled)(import_tamagui.View, {
         backgroundColor: import_componentColors.componentColors.indicator.selected
       }
     },
-    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
-      }
-    },
+    // 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
@@ -124,7 +137,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
@@ -134,18 +154,36 @@ function DotIndicator({
   } = (0, import_theme.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 : (0, import_tamagui.getTokens)().space?.[gap]?.val ?? 7;
   const slopX = Math.max(0, Math.floor((gapPx - 1) / 2));
-  const outsetY = Math.ceil((import_theme.MIN_PRESS_TARGET - itemSize) / 2);
+  const outsetY = Math.max(0, Math.ceil((import_theme.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__ */(0, import_jsx_runtime.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 ? 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,
@@ -153,11 +191,11 @@ function DotIndicator({
         marginVertical: -outsetY,
         cursor: interactive ? "pointer" : disabled ? "not-allowed" : "default",
         onPress: interactive ? () => 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",
@@ -172,12 +210,31 @@ function DotIndicator({
           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);
     })

package/dist/cjs/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: {
@@ -88,31 +122,11 @@ var Dot = (0, import_tamagui.styled)(import_tamagui.View, {
         backgroundColor: import_componentColors.componentColors.indicator.selected
       }
     },
-    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
-      }
-    },
+    // 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
@@ -127,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;
@@ -139,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,
@@ -160,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",
@@ -179,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);
     })

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DotIndicator_exports","__export","DotIndicator","module","exports","import_jsx_runtime","require","import_theme","import_react_i18next","import_tamagui","import_componentColors","import_t","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","DotsContainer","styled","XStack","name","alignItems","justifyContent","gap","DotTarget","View","backgroundColor","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","Dot","borderRadius","componentColors","indicator","inactive","hoverStyle","hover","variants","true","selected","variant","dots","width","height","bars","pills","activeVariant","disabled","opacity","param","total","activeIndex","onChange","gapProp","_ref","_dotGeometryMap_knobProps_sizeToken","_ref1","_getTokens_space_gap","_getTokens_space","t","useTranslation","knobProps","useResolvedKnobs","space","geometry","sizeToken","itemSize","gapPx","getTokens","val","slopX","Math","max","floor","outsetY","ceil","MIN_PRESS_TARGET","interactive","jsx","children","Array","from","length","map","_","index","isActive","dotWidth","minHeight","marginHorizontal","marginVertical","cursor","onPress","withInterp","number","role","tabIndex","onKeyDown","e","key","preventDefault"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DotIndicator_exports","__export","DotIndicator","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react_i18next","import_tamagui","import_componentColors","import_t","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","CHECK_MIN_DOT","sizePx","fallback","_getTokens_size_value","_getTokens_size","token","getTokens","size","val","DotsContainer","styled","XStack","name","alignItems","justifyContent","gap","variants","rail","true","backgroundColor","componentColors","interactive","background","radiusClassProps","borderRadius","DotTarget","View","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","Dot","indicator","inactive","hoverStyle","hover","selected","disabled","opacity","param","total","activeIndex","onChange","variant","gapProp","completedSteps","idiom","dotSize","activeDotSize","transition","dotStateAttribute","_ref","_dotGeometryMap_knobProps_sizeToken","_ref1","_getTokens_space_gap","_getTokens_space","t","useTranslation","knobProps","useResolvedKnobs","space","geometry","sizeToken","isTick","itemSize","activeSize","gapPx","slopX","Math","max","floor","outsetY","ceil","MIN_PRESS_TARGET","isStep","label","currentValue","motionStyle","jsx","paddingHorizontal","panelPadding","padding","height","children","Array","from","length","map","_","index","isActive","isCompleted","has","dotWidth","restingFill","completed","track","width","minHeight","marginHorizontal","marginVertical","cursor","onPress","withInterp","number","role","tabIndex","onKeyDown","e","key","preventDefault"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}