@cdx-ui/primitives 0.3.6 → 0.3.7

package/lib/commonjs/progress-bar/ProgressBarIndicator.js

@@ -6,13 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.ProgressBarIndicator = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _utils = require("@cdx-ui/utils");
 var _slot = require("../slot");
 var _dataAttributes = require("../utils/dataAttributes");
 var _context = require("./context");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * HeroUI indeterminate fill: a 2/5 segment translates from -100% to 350% of its
+ * own width over 1.5s (`progress-bar.css`). It enters off the start edge and
+ * exits off the end edge; the ease holds the slow parts of that travel off-screen.
+ */
+const INDETERMINATE_WIDTH = '40%';
+const INDETERMINATE_DURATION_MS = 1500;
+const INDETERMINATE_FROM = -1;
+const INDETERMINATE_TO = 3.5;
 const ProgressBarIndicator = exports.ProgressBarIndicator = /*#__PURE__*/(0, _react.forwardRef)(({
   asChild,
   style,
+  onLayout,
   ...rest
 }, ref) => {
   const {
@@ -21,7 +34,46 @@ const ProgressBarIndicator = exports.ProgressBarIndicator = /*#__PURE__*/(0, _re
     max,
     value
   } = (0, _context.useProgressContext)();
-  const filledStyle = (0, _react.useMemo)(() => {
+  const isIndeterminate = state === 'indeterminate';
+  const reducedMotion = (0, _reactNativeReanimated.useReducedMotion)();
+  const travel = (0, _reactNativeReanimated.useSharedValue)(0);
+  const segmentWidth = (0, _reactNativeReanimated.useSharedValue)(0);
+  const direction = _reactNative.I18nManager.isRTL ? -1 : 1;
+  (0, _react.useEffect)(() => {
+    if (!isIndeterminate) {
+      travel.set(0);
+      return;
+    }
+    if (reducedMotion) {
+      travel.set(0);
+      return;
+    }
+    travel.set(0);
+    travel.set((0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
+      duration: INDETERMINATE_DURATION_MS,
+      easing: _reactNativeReanimated.Easing.bezier(0.65, 0, 0.35, 1)
+    }), -1, false));
+  }, [isIndeterminate, reducedMotion, travel]);
+  const handleLayout = event => {
+    if (!isIndeterminate) return;
+    const next = event.nativeEvent.layout.width;
+    if (segmentWidth.get() !== next) {
+      segmentWidth.set(next);
+    }
+  };
+  const indeterminateStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const width = segmentWidth.get();
+    const span = INDETERMINATE_TO - INDETERMINATE_FROM;
+    const offset = reducedMotion ? 0 : width * (INDETERMINATE_FROM + travel.get() * span);
+    return {
+      width: INDETERMINATE_WIDTH,
+      height: '100%',
+      transform: [{
+        translateX: direction * offset
+      }]
+    };
+  }, [segmentWidth, travel, direction, reducedMotion]);
+  const determinateStyle = (0, _react.useMemo)(() => {
     const pct = `${String(percent)}%`;
     return {
       width: pct,
@@ -33,12 +85,13 @@ const ProgressBarIndicator = exports.ProgressBarIndicator = /*#__PURE__*/(0, _re
     value: value === null ? undefined : String(value),
     max: String(max)
   });
-  const Comp = asChild ? _slot.Slot : _reactNative.View;
+  const Comp = asChild ? _slot.Slot : _reactNativeReanimated.default.View;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
     ref: ref,
     ...rest,
     ...dataAttrs,
-    style: [filledStyle, style]
+    onLayout: (0, _utils.composeEventHandlers)(onLayout, handleLayout),
+    style: [isIndeterminate ? indeterminateStyle : determinateStyle, style]
   });
 });
 ProgressBarIndicator.displayName = 'ProgressBarIndicator';

package/lib/commonjs/progress-bar/ProgressBarIndicator.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNative","_slot","_dataAttributes","_context","_jsxRuntime","ProgressBarIndicator","exports","forwardRef","asChild","style","rest","ref","percent","state","max","value","useProgressContext","filledStyle","useMemo","pct","String","width","height","dataAttrs","dataAttributes","undefined","Comp","Slot","View","jsx","displayName"],"sourceRoot":"../../../src","sources":["progress-bar/ProgressBarIndicator.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAQxC,MAAMM,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,gBAAG,IAAAE,iBAAU,EAC5C,CAAC;EAAEC,OAAO;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACpC,MAAM;IAAEC,OAAO;IAAEC,KAAK;IAAEC,GAAG;IAAEC;EAAM,CAAC,GAAG,IAAAC,2BAAkB,EAAC,CAAC;EAE3D,MAAMC,WAAW,GAAG,IAAAC,cAAO,EAAC,MAAiB;IAC3C,MAAMC,GAAG,GAAG,GAAGC,MAAM,CAACR,OAAO,CAAC,GAAoB;IAClD,OAAO;MAAES,KAAK,EAAEF,GAAG;MAAEG,MAAM,EAAE;IAAO,CAAC;EACvC,CAAC,EAAE,CAACV,OAAO,CAAC,CAAC;EAEb,MAAMW,SAAS,GAAG,IAAAC,8BAAc,EAAC;IAC/BX,KAAK;IACLE,KAAK,EAAEA,KAAK,KAAK,IAAI,GAAGU,SAAS,GAAGL,MAAM,CAACL,KAAK,CAAC;IACjDD,GAAG,EAAEM,MAAM,CAACN,GAAG;EACjB,CAAC,CAAC;EAEF,MAAMY,IAAI,GAAGlB,OAAO,GAAGmB,UAAI,GAAGC,iBAAI;EAElC,oBAAO,IAAAxB,WAAA,CAAAyB,GAAA,EAACH,IAAI;IAACf,GAAG,EAAEA,GAAI;IAAA,GAAKD,IAAI;IAAA,GAAMa,SAAS;IAAEd,KAAK,EAAE,CAACQ,WAAW,EAAER,KAAK;EAAE,CAAE,CAAC;AACjF,CACF,CAAC;AAEDJ,oBAAoB,CAACyB,WAAW,GAAG,sBAAsB","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_utils","_slot","_dataAttributes","_context","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","INDETERMINATE_WIDTH","INDETERMINATE_DURATION_MS","INDETERMINATE_FROM","INDETERMINATE_TO","ProgressBarIndicator","exports","forwardRef","asChild","style","onLayout","rest","ref","percent","state","max","value","useProgressContext","isIndeterminate","reducedMotion","useReducedMotion","travel","useSharedValue","segmentWidth","direction","I18nManager","isRTL","useEffect","withRepeat","withTiming","duration","easing","Easing","bezier","handleLayout","event","next","nativeEvent","layout","width","indeterminateStyle","useAnimatedStyle","span","offset","height","transform","translateX","determinateStyle","useMemo","pct","String","dataAttrs","dataAttributes","undefined","Comp","Slot","Animated","View","jsx","composeEventHandlers","displayName"],"sourceRoot":"../../../src","sources":["progress-bar/ProgressBarIndicator.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAOA,IAAAE,sBAAA,GAAAC,uBAAA,CAAAH,OAAA;AAQA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,eAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAP,OAAA;AAA+C,IAAAQ,WAAA,GAAAR,OAAA;AAAA,SAAAG,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAI/C;AACA;AACA;AACA;AACA;AACA,MAAMkB,mBAAmB,GAAG,KAAK;AACjC,MAAMC,yBAAyB,GAAG,IAAI;AACtC,MAAMC,kBAAkB,GAAG,CAAC,CAAC;AAC7B,MAAMC,gBAAgB,GAAG,GAAG;AAMrB,MAAMC,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,gBAAG,IAAAE,iBAAU,EAC5C,CAAC;EAAEC,OAAO;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC9C,MAAM;IAAEC,OAAO;IAAEC,KAAK;IAAEC,GAAG;IAAEC;EAAM,CAAC,GAAG,IAAAC,2BAAkB,EAAC,CAAC;EAC3D,MAAMC,eAAe,GAAGJ,KAAK,KAAK,eAAe;EACjD,MAAMK,aAAa,GAAG,IAAAC,uCAAgB,EAAC,CAAC;EACxC,MAAMC,MAAM,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAChC,MAAMC,YAAY,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EACtC,MAAME,SAAS,GAAGC,wBAAW,CAACC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;EAE5C,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAI,CAACT,eAAe,EAAE;MACpBG,MAAM,CAAC1B,GAAG,CAAC,CAAC,CAAC;MACb;IACF;IACA,IAAIwB,aAAa,EAAE;MACjBE,MAAM,CAAC1B,GAAG,CAAC,CAAC,CAAC;MACb;IACF;IACA0B,MAAM,CAAC1B,GAAG,CAAC,CAAC,CAAC;IACb0B,MAAM,CAAC1B,GAAG,CACR,IAAAiC,iCAAU,EACR,IAAAC,iCAAU,EAAC,CAAC,EAAE;MACZC,QAAQ,EAAE5B,yBAAyB;MACnC6B,MAAM,EAAEC,6BAAM,CAACC,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC;IACxC,CAAC,CAAC,EACF,CAAC,CAAC,EACF,KACF,CACF,CAAC;EACH,CAAC,EAAE,CAACf,eAAe,EAAEC,aAAa,EAAEE,MAAM,CAAC,CAAC;EAE5C,MAAMa,YAAY,GAAIC,KAAwB,IAAK;IACjD,IAAI,CAACjB,eAAe,EAAE;IACtB,MAAMkB,IAAI,GAAGD,KAAK,CAACE,WAAW,CAACC,MAAM,CAACC,KAAK;IAC3C,IAAIhB,YAAY,CAAC7B,GAAG,CAAC,CAAC,KAAK0C,IAAI,EAAE;MAC/Bb,YAAY,CAAC5B,GAAG,CAACyC,IAAI,CAAC;IACxB;EACF,CAAC;EAED,MAAMI,kBAAkB,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IAChD,MAAMF,KAAK,GAAGhB,YAAY,CAAC7B,GAAG,CAAC,CAAC;IAChC,MAAMgD,IAAI,GAAGtC,gBAAgB,GAAGD,kBAAkB;IAClD,MAAMwC,MAAM,GAAGxB,aAAa,GAAG,CAAC,GAAGoB,KAAK,IAAIpC,kBAAkB,GAAGkB,MAAM,CAAC3B,GAAG,CAAC,CAAC,GAAGgD,IAAI,CAAC;IACrF,OAAO;MACLH,KAAK,EAAEtC,mBAAmB;MAC1B2C,MAAM,EAAE,MAAM;MACdC,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEtB,SAAS,GAAGmB;MAAO,CAAC;IAChD,CAAC;EACH,CAAC,EAAE,CAACpB,YAAY,EAAEF,MAAM,EAAEG,SAAS,EAAEL,aAAa,CAAC,CAAC;EAEpD,MAAM4B,gBAAgB,GAAG,IAAAC,cAAO,EAAC,MAAiB;IAChD,MAAMC,GAAG,GAAG,GAAGC,MAAM,CAACrC,OAAO,CAAC,GAAoB;IAClD,OAAO;MAAE0B,KAAK,EAAEU,GAAG;MAAEL,MAAM,EAAE;IAAO,CAAC;EACvC,CAAC,EAAE,CAAC/B,OAAO,CAAC,CAAC;EAEb,MAAMsC,SAAS,GAAG,IAAAC,8BAAc,EAAC;IAC/BtC,KAAK;IACLE,KAAK,EAAEA,KAAK,KAAK,IAAI,GAAGqC,SAAS,GAAGH,MAAM,CAAClC,KAAK,CAAC;IACjDD,GAAG,EAAEmC,MAAM,CAACnC,GAAG;EACjB,CAAC,CAAC;EAEF,MAAMuC,IAAI,GAAG9C,OAAO,GAAG+C,UAAI,GAAGC,8BAAQ,CAACC,IAAI;EAE3C,oBACE,IAAA5E,WAAA,CAAA6E,GAAA,EAACJ,IAAI;IACH1C,GAAG,EAAEA,GAAI;IAAA,GACLD,IAAI;IAAA,GACJwC,SAAS;IACbzC,QAAQ,EAAE,IAAAiD,2BAAoB,EAACjD,QAAQ,EAAEwB,YAAY,CAAE;IACvDzB,KAAK,EAAE,CAACS,eAAe,GAAGsB,kBAAkB,GAAGO,gBAAgB,EAAEtC,KAAK;EAAE,CACzE,CAAC;AAEN,CACF,CAAC;AAEDJ,oBAAoB,CAACuD,WAAW,GAAG,sBAAsB","ignoreList":[]}

package/lib/module/progress-bar/ProgressBarIndicator.js

@@ -1,14 +1,26 @@
 "use strict";
 
-import { forwardRef, useMemo } from 'react';
-import { View } from 'react-native';
+import { forwardRef, useEffect, useMemo } from 'react';
+import { I18nManager } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import { composeEventHandlers } from '@cdx-ui/utils';
 import { Slot } from '../slot';
 import { dataAttributes } from '../utils/dataAttributes';
 import { useProgressContext } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * HeroUI indeterminate fill: a 2/5 segment translates from -100% to 350% of its
+ * own width over 1.5s (`progress-bar.css`). It enters off the start edge and
+ * exits off the end edge; the ease holds the slow parts of that travel off-screen.
+ */
+const INDETERMINATE_WIDTH = '40%';
+const INDETERMINATE_DURATION_MS = 1500;
+const INDETERMINATE_FROM = -1;
+const INDETERMINATE_TO = 3.5;
 export const ProgressBarIndicator = /*#__PURE__*/forwardRef(({
   asChild,
   style,
+  onLayout,
   ...rest
 }, ref) => {
   const {
@@ -17,7 +29,46 @@ export const ProgressBarIndicator = /*#__PURE__*/forwardRef(({
     max,
     value
   } = useProgressContext();
-  const filledStyle = useMemo(() => {
+  const isIndeterminate = state === 'indeterminate';
+  const reducedMotion = useReducedMotion();
+  const travel = useSharedValue(0);
+  const segmentWidth = useSharedValue(0);
+  const direction = I18nManager.isRTL ? -1 : 1;
+  useEffect(() => {
+    if (!isIndeterminate) {
+      travel.set(0);
+      return;
+    }
+    if (reducedMotion) {
+      travel.set(0);
+      return;
+    }
+    travel.set(0);
+    travel.set(withRepeat(withTiming(1, {
+      duration: INDETERMINATE_DURATION_MS,
+      easing: Easing.bezier(0.65, 0, 0.35, 1)
+    }), -1, false));
+  }, [isIndeterminate, reducedMotion, travel]);
+  const handleLayout = event => {
+    if (!isIndeterminate) return;
+    const next = event.nativeEvent.layout.width;
+    if (segmentWidth.get() !== next) {
+      segmentWidth.set(next);
+    }
+  };
+  const indeterminateStyle = useAnimatedStyle(() => {
+    const width = segmentWidth.get();
+    const span = INDETERMINATE_TO - INDETERMINATE_FROM;
+    const offset = reducedMotion ? 0 : width * (INDETERMINATE_FROM + travel.get() * span);
+    return {
+      width: INDETERMINATE_WIDTH,
+      height: '100%',
+      transform: [{
+        translateX: direction * offset
+      }]
+    };
+  }, [segmentWidth, travel, direction, reducedMotion]);
+  const determinateStyle = useMemo(() => {
     const pct = `${String(percent)}%`;
     return {
       width: pct,
@@ -29,12 +80,13 @@ export const ProgressBarIndicator = /*#__PURE__*/forwardRef(({
     value: value === null ? undefined : String(value),
     max: String(max)
   });
-  const Comp = asChild ? Slot : View;
+  const Comp = asChild ? Slot : Animated.View;
   return /*#__PURE__*/_jsx(Comp, {
     ref: ref,
     ...rest,
     ...dataAttrs,
-    style: [filledStyle, style]
+    onLayout: composeEventHandlers(onLayout, handleLayout),
+    style: [isIndeterminate ? indeterminateStyle : determinateStyle, style]
   });
 });
 ProgressBarIndicator.displayName = 'ProgressBarIndicator';

package/lib/module/progress-bar/ProgressBarIndicator.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useMemo","View","Slot","dataAttributes","useProgressContext","jsx","_jsx","ProgressBarIndicator","asChild","style","rest","ref","percent","state","max","value","filledStyle","pct","String","width","height","dataAttrs","undefined","Comp","displayName"],"sourceRoot":"../../../src","sources":["progress-bar/ProgressBarIndicator.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC3C,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,kBAAkB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ/C,OAAO,MAAMC,oBAAoB,gBAAGR,UAAU,CAC5C,CAAC;EAAES,OAAO;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACpC,MAAM;IAAEC,OAAO;IAAEC,KAAK;IAAEC,GAAG;IAAEC;EAAM,CAAC,GAAGX,kBAAkB,CAAC,CAAC;EAE3D,MAAMY,WAAW,GAAGhB,OAAO,CAAC,MAAiB;IAC3C,MAAMiB,GAAG,GAAG,GAAGC,MAAM,CAACN,OAAO,CAAC,GAAoB;IAClD,OAAO;MAAEO,KAAK,EAAEF,GAAG;MAAEG,MAAM,EAAE;IAAO,CAAC;EACvC,CAAC,EAAE,CAACR,OAAO,CAAC,CAAC;EAEb,MAAMS,SAAS,GAAGlB,cAAc,CAAC;IAC/BU,KAAK;IACLE,KAAK,EAAEA,KAAK,KAAK,IAAI,GAAGO,SAAS,GAAGJ,MAAM,CAACH,KAAK,CAAC;IACjDD,GAAG,EAAEI,MAAM,CAACJ,GAAG;EACjB,CAAC,CAAC;EAEF,MAAMS,IAAI,GAAGf,OAAO,GAAGN,IAAI,GAAGD,IAAI;EAElC,oBAAOK,IAAA,CAACiB,IAAI;IAACZ,GAAG,EAAEA,GAAI;IAAA,GAAKD,IAAI;IAAA,GAAMW,SAAS;IAAEZ,KAAK,EAAE,CAACO,WAAW,EAAEP,KAAK;EAAE,CAAE,CAAC;AACjF,CACF,CAAC;AAEDF,oBAAoB,CAACiB,WAAW,GAAG,sBAAsB","ignoreList":[]}
+{"version":3,"names":["forwardRef","useEffect","useMemo","I18nManager","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withRepeat","withTiming","composeEventHandlers","Slot","dataAttributes","useProgressContext","jsx","_jsx","INDETERMINATE_WIDTH","INDETERMINATE_DURATION_MS","INDETERMINATE_FROM","INDETERMINATE_TO","ProgressBarIndicator","asChild","style","onLayout","rest","ref","percent","state","max","value","isIndeterminate","reducedMotion","travel","segmentWidth","direction","isRTL","set","duration","easing","bezier","handleLayout","event","next","nativeEvent","layout","width","get","indeterminateStyle","span","offset","height","transform","translateX","determinateStyle","pct","String","dataAttrs","undefined","Comp","View","displayName"],"sourceRoot":"../../../src","sources":["progress-bar/ProgressBarIndicator.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/progress-bar/ProgressBarIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarIndicator.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/ProgressBarIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAC;AAOpE,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,oBAAoB,4GAmBhC,CAAC"}
+{"version":3,"file":"ProgressBarIndicator.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/ProgressBarIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,IAAI,EAEJ,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AA0BtB,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,oBAAoB,4GAyEhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -69,8 +69,8 @@
     "@react-stately/disclosure": "3.1.1",
     "@react-stately/radio": "3.12.0",
     "@react-stately/toggle": "3.9.4",
-    "@cdx-ui/formatters": "0.3.6",
-    "@cdx-ui/utils": "0.3.6"
+    "@cdx-ui/formatters": "0.3.7",
+    "@cdx-ui/utils": "0.3.7"
   },
   "devDependencies": {
     "@types/react": "19.2.14",

package/src/progress-bar/ProgressBarIndicator.tsx

@@ -1,20 +1,91 @@
-import { forwardRef, useMemo } from 'react';
-import { View, type ViewProps, type ViewStyle } from 'react-native';
+import { forwardRef, useEffect, useMemo } from 'react';
+import {
+  I18nManager,
+  View,
+  type LayoutChangeEvent,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { composeEventHandlers } from '@cdx-ui/utils';
 import { Slot } from '../slot';
 import { dataAttributes } from '../utils/dataAttributes';
 import { useProgressContext } from './context';
 
 type PercentString = `${number}%`;
 
+/**
+ * HeroUI indeterminate fill: a 2/5 segment translates from -100% to 350% of its
+ * own width over 1.5s (`progress-bar.css`). It enters off the start edge and
+ * exits off the end edge; the ease holds the slow parts of that travel off-screen.
+ */
+const INDETERMINATE_WIDTH = '40%';
+const INDETERMINATE_DURATION_MS = 1500;
+const INDETERMINATE_FROM = -1;
+const INDETERMINATE_TO = 3.5;
+
 export interface ProgressBarIndicatorProps extends ViewProps {
   readonly asChild?: boolean;
 }
 
 export const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
-  ({ asChild, style, ...rest }, ref) => {
+  ({ asChild, style, onLayout, ...rest }, ref) => {
     const { percent, state, max, value } = useProgressContext();
+    const isIndeterminate = state === 'indeterminate';
+    const reducedMotion = useReducedMotion();
+    const travel = useSharedValue(0);
+    const segmentWidth = useSharedValue(0);
+    const direction = I18nManager.isRTL ? -1 : 1;
+
+    useEffect(() => {
+      if (!isIndeterminate) {
+        travel.set(0);
+        return;
+      }
+      if (reducedMotion) {
+        travel.set(0);
+        return;
+      }
+      travel.set(0);
+      travel.set(
+        withRepeat(
+          withTiming(1, {
+            duration: INDETERMINATE_DURATION_MS,
+            easing: Easing.bezier(0.65, 0, 0.35, 1),
+          }),
+          -1,
+          false,
+        ),
+      );
+    }, [isIndeterminate, reducedMotion, travel]);
+
+    const handleLayout = (event: LayoutChangeEvent) => {
+      if (!isIndeterminate) return;
+      const next = event.nativeEvent.layout.width;
+      if (segmentWidth.get() !== next) {
+        segmentWidth.set(next);
+      }
+    };
+
+    const indeterminateStyle = useAnimatedStyle(() => {
+      const width = segmentWidth.get();
+      const span = INDETERMINATE_TO - INDETERMINATE_FROM;
+      const offset = reducedMotion ? 0 : width * (INDETERMINATE_FROM + travel.get() * span);
+      return {
+        width: INDETERMINATE_WIDTH,
+        height: '100%',
+        transform: [{ translateX: direction * offset }],
+      };
+    }, [segmentWidth, travel, direction, reducedMotion]);
 
-    const filledStyle = useMemo((): ViewStyle => {
+    const determinateStyle = useMemo((): ViewStyle => {
       const pct = `${String(percent)}%` as PercentString;
       return { width: pct, height: '100%' };
     }, [percent]);
@@ -25,9 +96,17 @@ export const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
       max: String(max),
     });
 
-    const Comp = asChild ? Slot : View;
+    const Comp = asChild ? Slot : Animated.View;
 
-    return <Comp ref={ref} {...rest} {...dataAttrs} style={[filledStyle, style]} />;
+    return (
+      <Comp
+        ref={ref}
+        {...rest}
+        {...dataAttrs}
+        onLayout={composeEventHandlers(onLayout, handleLayout)}
+        style={[isIndeterminate ? indeterminateStyle : determinateStyle, style]}
+      />
+    );
   },
 );