@webority-technologies/mobile 0.0.24 → 0.0.25

package/lib/commonjs/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Autocomplete = Autocomplete;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _index3 = require("../../hooks/index.js");
+var _index4 = require("../Input/index.js");
+var _index5 = require("../Spinner/index.js");
+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); }
+const defaultGetLabel = o => typeof o === 'string' ? o : String(o);
+function Autocomplete(props) {
+  const {
+    options,
+    value,
+    defaultValue,
+    onChangeText,
+    onSelect,
+    getOptionLabel,
+    getOptionKey,
+    filter,
+    minChars = 1,
+    maxResults = 8,
+    emptyText = 'No matches',
+    loading = false,
+    filterMode = 'client',
+    loadingText = 'Searching…',
+    placeholder,
+    label,
+    error,
+    helperText,
+    disabled = false,
+    size = 'md',
+    variant,
+    haptic,
+    style,
+    listStyle,
+    optionTextStyle,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const [text, setText] = (0, _index3.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? '',
+    onChange: onChangeText
+  });
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const [fieldHeight, setFieldHeight] = (0, _react.useState)(0);
+  const blurTimer = (0, _react.useRef)(null);
+  const labelOf = (0, _react.useCallback)(o => getOptionLabel ? getOptionLabel(o) : defaultGetLabel(o), [getOptionLabel]);
+  const filtered = (0, _react.useMemo)(() => {
+    // Server-side search: trust the provided options, don't re-filter them away.
+    if (filterMode === 'none') return options.slice(0, maxResults);
+    const q = text.trim();
+    if (q.length < minChars) return [];
+    const lower = q.toLowerCase();
+    const match = filter ? o => filter(o, q) : o => labelOf(o).toLowerCase().includes(lower);
+    return options.filter(match).slice(0, maxResults);
+  }, [options, text, minChars, maxResults, filter, labelOf, filterMode]);
+  const showList = focused && (loading || text.trim().length >= minChars);
+  const handleSelect = (0, _react.useCallback)(o => {
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
+    if (blurTimer.current) clearTimeout(blurTimer.current);
+    setText(labelOf(o));
+    setFocused(false);
+    _reactNative.Keyboard.dismiss();
+    onSelect(o);
+  }, [haptic, setText, labelOf, onSelect]);
+  _react.default.useEffect(() => () => {
+    if (blurTimer.current) clearTimeout(blurTimer.current);
+  }, []);
+  const onFieldLayout = (0, _react.useCallback)(e => {
+    setFieldHeight(e.nativeEvent.layout.height);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onLayout: onFieldLayout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Input, {
+        value: text,
+        onChangeText: setText,
+        onFocus: () => {
+          if (blurTimer.current) clearTimeout(blurTimer.current);
+          setFocused(true);
+        },
+        onBlur: () => {
+          blurTimer.current = setTimeout(() => setFocused(false), 120);
+        },
+        placeholder: placeholder,
+        label: label,
+        error: error,
+        helperText: helperText,
+        editable: !disabled,
+        size: size,
+        variant: variant,
+        autoCorrect: false,
+        autoCapitalize: "none"
+      })
+    }), showList ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.list, {
+        top: fieldHeight,
+        backgroundColor: theme.colors.background.elevated,
+        borderColor: theme.colors.border.primary,
+        borderRadius: theme.radius.md,
+        ...theme.shadows.lg
+      }, listStyle],
+      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.loadingRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Spinner, {
+          size: "sm"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.loadingText, {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          children: loadingText
+        })]
+      }) : filtered.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.empty, {
+          color: theme.colors.text.tertiary,
+          fontSize: theme.typography.fontSize.sm
+        }],
+        children: emptyText
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        keyboardShouldPersistTaps: "handled",
+        style: styles.scroll,
+        children: filtered.map((o, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          onPress: () => handleSelect(o),
+          android_ripple: {
+            color: theme.colors.surface.pressed
+          },
+          style: ({
+            pressed
+          }) => [styles.option, {
+            paddingHorizontal: theme.spacing.md,
+            paddingVertical: theme.spacing.sm,
+            backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+          }],
+          accessibilityRole: "button",
+          accessibilityLabel: labelOf(o),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.optionText, {
+              color: theme.colors.text.primary,
+              fontSize: theme.typography.fontSize.base
+            }, optionTextStyle],
+            numberOfLines: 1,
+            children: labelOf(o)
+          })
+        }, getOptionKey ? getOptionKey(o) : `${labelOf(o)}-${i}`))
+      })
+    }) : null]
+  });
+}
+Autocomplete.displayName = 'Autocomplete';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative',
+    zIndex: 10
+  },
+  list: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    overflow: 'hidden',
+    zIndex: 20,
+    maxHeight: 240
+  },
+  scroll: {
+    maxHeight: 240
+  },
+  option: {
+    width: '100%'
+  },
+  optionText: {
+    includeFontPadding: false
+  },
+  empty: {
+    padding: theme.spacing.md,
+    textAlign: 'center',
+    includeFontPadding: false
+  },
+  loadingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.sm,
+    padding: theme.spacing.md
+  },
+  loadingText: {
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = Autocomplete;
+//# sourceMappingURL=Autocomplete.js.map

package/lib/commonjs/components/Autocomplete/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Autocomplete", {
+  enumerable: true,
+  get: function () {
+    return _Autocomplete.Autocomplete;
+  }
+});
+var _Autocomplete = require("./Autocomplete.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/BottomNavigation/BottomNavigation.js

@@ -159,7 +159,7 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
             translateX: indicatorTranslateX
           }]
         }, indicatorStyle]
-      }) : null, tabs.map((tab, index) => {
+      }) : null, tabs.map(tab => {
         const isActive = tab.key === activeTab;
         const color = isActive ? theme.colors.primary : theme.colors.text.tertiary;
         const renderIcon = isActive && tab.activeIcon ? tab.activeIcon : tab.icon;

package/lib/commonjs/components/Confetti/Confetti.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Confetti = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../../theme/index.js");
+var _index2 = require("../../hooks/index.js");
+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); }
+const TAU = Math.PI * 2;
+const rand = (min, max) => min + Math.random() * (max - min);
+const buildPieces = (count, colors, mode, baseSize) => Array.from({
+  length: count
+}, (_, i) => {
+  const isCannon = mode === 'cannon';
+  return {
+    color: colors[i % colors.length] ?? colors[0],
+    size: baseSize * rand(0.6, 1.4),
+    isCircle: Math.random() < 0.35,
+    baseXFrac: isCannon ? 0.5 : Math.random(),
+    vxFrac: isCannon ? rand(-0.7, 0.7) : rand(-0.15, 0.15),
+    vy0Frac: isCannon ? rand(-1.5, -1.0) : rand(0, 0.15),
+    rotations: rand(1, 5),
+    rotateDir: Math.random() < 0.5 ? 1 : -1,
+    swayAmp: rand(8, 28),
+    swayFreq: rand(1, 3),
+    flutterFreq: rand(2, 5)
+  };
+});
+const ConfettiPiece = ({
+  piece,
+  progress,
+  width,
+  height,
+  originX,
+  originY,
+  mode,
+  fadeOut
+}) => {
+  const animStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const t = progress.value;
+    const startX = mode === 'cannon' ? originX : piece.baseXFrac * width;
+    const startY = mode === 'cannon' ? originY : -piece.size * 2;
+    const gravity = height * (mode === 'cannon' ? 1.8 : 1.5);
+    const x = startX + piece.vxFrac * width * t + Math.sin(t * piece.swayFreq * TAU) * piece.swayAmp;
+    const y = startY + piece.vy0Frac * height * t + gravity * t * t;
+    const rotate = piece.rotateDir * piece.rotations * 360 * t;
+    // Paper-flutter: oscillate scaleX so pieces read as thin spinning paper.
+    const flutter = 0.35 + 0.65 * Math.abs(Math.cos(t * piece.flutterFreq * TAU));
+    const opacity = fadeOut ? Math.max(0, 1 - Math.max(0, t - 0.8) / 0.2) : 1;
+    return {
+      opacity,
+      transform: [{
+        translateX: x
+      }, {
+        translateY: y
+      }, {
+        rotate: `${rotate}deg`
+      }, {
+        scaleX: flutter
+      }]
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [{
+      position: 'absolute',
+      width: piece.size,
+      height: piece.isCircle ? piece.size : piece.size * 0.5,
+      borderRadius: piece.isCircle ? piece.size / 2 : 1,
+      backgroundColor: piece.color
+    }, animStyle]
+  });
+};
+const Confetti = exports.Confetti = /*#__PURE__*/(0, _react.forwardRef)(({
+  count = 80,
+  colors,
+  mode = 'rain',
+  origin,
+  duration = 2800,
+  fadeOut = true,
+  autoStart = false,
+  recycle = false,
+  size = 10,
+  onComplete,
+  style,
+  testID
+}, ref) => {
+  const theme = (0, _index.useTheme)();
+  const reduceMotion = (0, _index2.useReducedMotion)();
+  const window = (0, _reactNative.useWindowDimensions)();
+  const [layout, setLayout] = (0, _react.useState)({
+    width: window.width,
+    height: window.height
+  });
+  const [active, setActive] = (0, _react.useState)(false);
+  const [pieces, setPieces] = (0, _react.useState)([]);
+  const palette = (0, _react.useMemo)(() => colors ?? [theme.colors.primary, theme.colors.secondary, theme.colors.success, theme.colors.warning, theme.colors.error, theme.colors.info], [colors, theme.colors]);
+  const progress = (0, _reactNativeReanimated.useSharedValue)(0);
+  const finish = (0, _react.useCallback)(() => {
+    setActive(false);
+    onComplete?.();
+  }, [onComplete]);
+  const start = (0, _react.useCallback)(() => {
+    if (reduceMotion) {
+      onComplete?.();
+      return;
+    }
+    (0, _reactNativeReanimated.cancelAnimation)(progress);
+    progress.value = 0;
+    setPieces(buildPieces(count, palette, mode, size));
+    setActive(true);
+    const tween = (0, _reactNativeReanimated.withTiming)(1, {
+      duration,
+      easing: _reactNativeReanimated.Easing.linear
+    }, finished => {
+      'worklet';
+
+      if (finished && !recycle) (0, _reactNativeReanimated.runOnJS)(finish)();
+    });
+    progress.value = recycle ? (0, _reactNativeReanimated.withRepeat)(tween, -1, false) : tween;
+  }, [reduceMotion, progress, duration, recycle, finish, onComplete, count, palette, mode, size]);
+  const stop = (0, _react.useCallback)(() => {
+    (0, _reactNativeReanimated.cancelAnimation)(progress);
+    setActive(false);
+  }, [progress]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    start,
+    stop
+  }), [start, stop]);
+  (0, _react.useEffect)(() => {
+    if (autoStart) start();
+    return () => (0, _reactNativeReanimated.cancelAnimation)(progress);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onLayout = (0, _react.useCallback)(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    if (width > 0 && height > 0) setLayout({
+      width,
+      height
+    });
+  }, []);
+  const originX = origin?.x ?? layout.width / 2;
+  const originY = origin?.y ?? layout.height;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    onLayout: onLayout,
+    testID: testID,
+    children: active ? pieces.map((piece, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfettiPiece, {
+      piece: piece,
+      progress: progress,
+      width: layout.width,
+      height: layout.height,
+      originX: originX,
+      originY: originY,
+      mode: mode,
+      fadeOut: fadeOut
+    }, i)) : null
+  });
+});
+Confetti.displayName = 'Confetti';
+var _default = exports.default = Confetti;
+//# sourceMappingURL=Confetti.js.map

package/lib/commonjs/components/Confetti/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Confetti", {
+  enumerable: true,
+  get: function () {
+    return _Confetti.Confetti;
+  }
+});
+var _Confetti = require("./Confetti.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/FieldBase/FieldBase.js

@@ -33,8 +33,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *   - Shake-on-error or any cross-field animation.
  */
 
-const SIDES = ['top', 'right', 'bottom', 'left'];
-
 /** Map a single colour string to all four sides (shorthand expansion). */
 const expandColorSides = value => {
   if (typeof value === 'string') {

package/lib/commonjs/components/IconButton/IconButton.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _usePressAnimation = require("../../hooks/usePressAnimation.js");
+var _index2 = require("../../utils/index.js");
+var _index3 = require("../Spinner/index.js");
+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); }
+const SIZE_MAP = {
+  sm: {
+    diameter: 32,
+    icon: 16
+  },
+  md: {
+    diameter: 40,
+    icon: 20
+  },
+  lg: {
+    diameter: 48,
+    icon: 24
+  }
+};
+const toneFor = (theme, tone) => {
+  switch (tone) {
+    case 'secondary':
+      return {
+        base: theme.colors.secondary,
+        on: theme.colors.onSecondary,
+        fg: theme.colors.secondary
+      };
+    case 'success':
+      return {
+        base: theme.colors.success,
+        on: theme.colors.onSuccess,
+        fg: theme.colors.success
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        on: theme.colors.onWarning,
+        fg: theme.colors.warning
+      };
+    case 'error':
+      return {
+        base: theme.colors.error,
+        on: theme.colors.onError,
+        fg: theme.colors.error
+      };
+    case 'neutral':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.text.primary,
+        fg: theme.colors.text.primary
+      };
+    case 'primary':
+    default:
+      return {
+        base: theme.colors.primary,
+        on: theme.colors.onPrimary,
+        fg: theme.colors.primary
+      };
+  }
+};
+const IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    icon,
+    onPress,
+    accessibilityLabel,
+    tone = 'primary',
+    variant = 'solid',
+    size = 'md',
+    shape = 'circle',
+    active = false,
+    disabled = false,
+    loading = false,
+    haptic,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const sizeCfg = SIZE_MAP[size];
+  const isDisabled = disabled || loading;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = (0, _usePressAnimation.usePressAnimation)({
+    scaleTo: 0.92,
+    enabled: !isDisabled
+  });
+  const {
+    base,
+    on,
+    fg
+  } = toneFor(theme, tone);
+  const effectiveVariant = active ? 'solid' : variant;
+  let backgroundColor = 'transparent';
+  let borderColor = 'transparent';
+  let borderWidth = 0;
+  let iconColor = isDisabled ? theme.colors.text.disabled : fg;
+  if (effectiveVariant === 'solid') {
+    backgroundColor = isDisabled ? theme.colors.surface.disabled : base;
+    iconColor = isDisabled ? theme.colors.text.disabled : on;
+  } else if (effectiveVariant === 'soft') {
+    backgroundColor = isDisabled ? theme.colors.surface.disabled : `${base}22`;
+  } else if (effectiveVariant === 'outline') {
+    borderColor = isDisabled ? theme.colors.border.primary : base;
+    borderWidth = theme.colors.border.width;
+  }
+  const radius = shape === 'circle' ? sizeCfg.diameter / 2 : theme.radius.md;
+  const handlePress = e => {
+    if (isDisabled) return;
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
+    onPress?.(e);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    onPressIn: pressIn,
+    onPressOut: pressOut,
+    disabled: isDisabled,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled: isDisabled,
+      selected: active
+    },
+    hitSlop: 6,
+    testID: testID,
+    style: ({
+      pressed
+    }) => [styles.base, {
+      width: sizeCfg.diameter,
+      height: sizeCfg.diameter,
+      borderRadius: radius,
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      opacity: pressed && effectiveVariant !== 'solid' ? 0.7 : 1
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.content, {
+        transform: [{
+          scale
+        }]
+      }],
+      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Spinner, {
+        size: "sm",
+        color: iconColor
+      }) : typeof icon === 'function' ? icon({
+        color: iconColor,
+        size: sizeCfg.icon
+      }) : icon
+    })
+  });
+});
+IconButton.displayName = 'IconButton';
+const styles = _reactNative.StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = IconButton;
+//# sourceMappingURL=IconButton.js.map

package/lib/commonjs/components/IconButton/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function () {
+    return _IconButton.IconButton;
+  }
+});
+var _IconButton = require("./IconButton.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Modal/Modal.js

@@ -18,7 +18,6 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     visible,
     onRequestClose,
     presentation = 'centered',
-    backdropOpacity = 0.5,
     backdropPressClose = true,
     animationDuration,
     accessibilityLabel,

package/lib/commonjs/components/ProgressBar/ProgressBar.js

@@ -38,6 +38,8 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
     tone = 'primary',
     trackColor,
     barColor,
+    gradient,
+    segments,
     animated = true,
     style,
     containerStyle,
@@ -58,6 +60,12 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
   const resolvedRadius = radius ?? theme.radius.full;
   const resolvedTrack = trackColor ?? theme.colors.surface.disabled;
   const resolvedBar = barColor ?? toneColor(theme, tone);
+  const resolvedGradient = (0, _react.useMemo)(() => {
+    if (!gradient) return null;
+    if (typeof gradient === 'string') return theme.gradients[gradient] ?? null;
+    return gradient;
+  }, [gradient, theme.gradients]);
+  const hasSegments = Array.isArray(segments) && segments.length > 0;
   (0, _react.useEffect)(() => {
     if (isIndeterminate) return;
     if (!animated) {
@@ -116,7 +124,18 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
       borderRadius: resolvedRadius,
       backgroundColor: resolvedTrack
     }, style, containerStyle],
-    children: isIndeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    children: hasSegments ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.segments, {
+        height
+      }],
+      children: (segments ?? []).map((s, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: `${clampProgress(s.value) * 100}%`,
+          height,
+          backgroundColor: s.color ?? toneColor(theme, s.tone ?? 'primary')
+        }
+      }, i))
+    }) : isIndeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: [styles.indeterminateBar, {
         height,
         borderRadius: resolvedRadius,
@@ -130,9 +149,14 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
       style: [styles.determinateBar, {
         height,
         borderRadius: resolvedRadius,
-        backgroundColor: resolvedBar,
-        width: determinateWidth
-      }, barStyle]
+        backgroundColor: resolvedGradient ? 'transparent' : resolvedBar,
+        width: determinateWidth,
+        overflow: resolvedGradient ? 'hidden' : undefined
+      }, barStyle],
+      children: resolvedGradient ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Gradient, {
+        gradient: resolvedGradient,
+        style: _reactNative.StyleSheet.absoluteFill
+      }) : null
     })
   });
 });
@@ -151,6 +175,10 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0
+  },
+  segments: {
+    flexDirection: 'row',
+    width: '100%'
   }
 });
 var _default = exports.default = ProgressBar;