@webority-technologies/mobile 0.0.23 → 0.0.25

package/lib/module/components/Accordion/Accordion.js

@@ -3,7 +3,7 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, LayoutAnimation, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionGroupContext = /*#__PURE__*/createContext(null);
@@ -90,7 +90,8 @@ const Accordion = props => {
     contentWrapperStyle,
     containerStyle,
     testID,
-    loading = false
+    loading = false,
+    haptic
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
@@ -137,9 +138,8 @@ const Accordion = props => {
   }, [measuredHeight]);
   const handlePress = useCallback(() => {
     if (disabled) return;
-    if (theme.components.accordion?.pressHaptic ?? false) {
-      triggerHaptic('selection');
-    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (group && id) {
       group.toggle(id);
       onChange?.(!expanded);
@@ -147,7 +147,7 @@ const Accordion = props => {
     }
     if (!isControlled) setInternalExpanded(!expanded);
     onChange?.(!expanded);
-  }, [disabled, group, id, expanded, isControlled, onChange, theme.components.accordion]);
+  }, [disabled, group, id, expanded, isControlled, onChange, haptic]);
   const rotate = rotateAnim.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '180deg']

package/lib/module/components/AnimatePresence/AnimatePresence.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import React from 'react';
+import Animated, { FadeIn, FadeInDown, FadeInUp, FadeOut, FadeOutDown, FadeOutUp, ZoomIn, ZoomOut } from 'react-native-reanimated';
+import { useTheme } from "../../theme/index.js";
+import { useReducedMotion } from "../../hooks/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Animates a single child in on mount and out on unmount. Thin, theme-aware
+ * wrapper over Reanimated's `entering`/`exiting` — Reanimated keeps the view
+ * alive to play the exit, so the parent only toggles a condition. Honors the OS
+ * Reduce Motion setting (renders instantly when reduced).
+ *
+ * For animating items inside a list, use Reanimated's `itemLayoutAnimation`
+ * on `Animated.FlatList` instead — this wrapper targets single conditional nodes.
+ */
+const AnimatePresence = ({
+  children,
+  preset = 'fade',
+  duration,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const reduceMotion = useReducedMotion();
+  const visible = children !== null && children !== undefined && children !== false;
+  if (!visible) return null;
+  const dur = duration ?? theme.motion.duration.normal;
+  let entering;
+  let exiting;
+  if (!reduceMotion) {
+    switch (preset) {
+      case 'scale':
+        entering = ZoomIn.duration(dur);
+        exiting = ZoomOut.duration(dur);
+        break;
+      case 'slide-up':
+        entering = FadeInUp.duration(dur);
+        exiting = FadeOutDown.duration(dur);
+        break;
+      case 'slide-down':
+        entering = FadeInDown.duration(dur);
+        exiting = FadeOutUp.duration(dur);
+        break;
+      case 'fade':
+      default:
+        entering = FadeIn.duration(dur);
+        exiting = FadeOut.duration(dur);
+        break;
+    }
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    entering: entering,
+    exiting: exiting,
+    style: style,
+    testID: testID,
+    children: children
+  });
+};
+AnimatePresence.displayName = 'AnimatePresence';
+export { AnimatePresence };
+export default AnimatePresence;
+//# sourceMappingURL=AnimatePresence.js.map

package/lib/module/components/AnimatePresence/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { AnimatePresence } from "./AnimatePresence.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/AppBar/AppBar.js

@@ -5,7 +5,7 @@ import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const variantSize = (theme, variant) => {
   switch (variant) {
@@ -36,7 +36,8 @@ const variantSize = (theme, variant) => {
 const ActionButton = ({
   action,
   side,
-  badgeStyle
+  badgeStyle,
+  haptic
 }) => {
   const theme = useTheme();
   const {
@@ -48,9 +49,8 @@ const ActionButton = ({
   });
   const styles = useMemo(() => buildActionStyles(theme), [theme]);
   const onPress = () => {
-    if (theme.components.appBar?.pressHaptic ?? false) {
-      triggerHaptic('selection');
-    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     action.onPress();
   };
   const badgeValue = action.badge;
@@ -108,6 +108,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     titleStyle,
     subtitleStyle,
     badgeStyle,
+    haptic,
     testID
   } = props;
   const theme = useTheme();
@@ -225,7 +226,8 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
         style: styles.sideSlot,
         children: leftAction ? /*#__PURE__*/_jsx(ActionButton, {
           action: leftAction,
-          side: "left"
+          side: "left",
+          haptic: haptic
         }) : null
       }), /*#__PURE__*/_jsx(View, {
         style: [styles.center, titleAlignment === 'center' ? styles.centerAligned : styles.centerLeft],
@@ -235,7 +237,8 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
         children: rightActions?.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
           action: action,
           side: "right",
-          badgeStyle: badgeStyle
+          badgeStyle: badgeStyle,
+          haptic: haptic
         }, `appbar-right-${index}`))
       })]
     })]

package/lib/module/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,199 @@
+"use strict";
+
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Keyboard, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { useControllableState } from "../../hooks/index.js";
+import { Input } from "../Input/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const [text, setText] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? '',
+    onChange: onChangeText
+  });
+  const [focused, setFocused] = useState(false);
+  const [fieldHeight, setFieldHeight] = useState(0);
+  const blurTimer = useRef(null);
+  const labelOf = useCallback(o => getOptionLabel ? getOptionLabel(o) : defaultGetLabel(o), [getOptionLabel]);
+  const filtered = 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 = useCallback(o => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
+    if (blurTimer.current) clearTimeout(blurTimer.current);
+    setText(labelOf(o));
+    setFocused(false);
+    Keyboard.dismiss();
+    onSelect(o);
+  }, [haptic, setText, labelOf, onSelect]);
+  React.useEffect(() => () => {
+    if (blurTimer.current) clearTimeout(blurTimer.current);
+  }, []);
+  const onFieldLayout = useCallback(e => {
+    setFieldHeight(e.nativeEvent.layout.height);
+  }, []);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(View, {
+      onLayout: onFieldLayout,
+      children: /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsxs(View, {
+        style: styles.loadingRow,
+        children: [/*#__PURE__*/_jsx(Spinner, {
+          size: "sm"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.loadingText, {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          children: loadingText
+        })]
+      }) : filtered.length === 0 ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.empty, {
+          color: theme.colors.text.tertiary,
+          fontSize: theme.typography.fontSize.sm
+        }],
+        children: emptyText
+      }) : /*#__PURE__*/_jsx(ScrollView, {
+        keyboardShouldPersistTaps: "handled",
+        style: styles.scroll,
+        children: filtered.map((o, i) => /*#__PURE__*/_jsx(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__*/_jsx(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 => StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative',
+    zIndex: 10
+  },
+  list: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    borderWidth: 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
+  }
+});
+export { Autocomplete };
+export default Autocomplete;
+//# sourceMappingURL=Autocomplete.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Autocomplete } from "./Autocomplete.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Banner/Banner.js

@@ -3,6 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton, SkeletonText } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Banner = /*#__PURE__*/forwardRef((props, ref) => {
@@ -14,6 +15,7 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
     actions,
     dismissible = false,
     onDismiss,
+    haptic,
     visible = true,
     animateMount = true,
     loading = false,
@@ -143,7 +145,11 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
       }), dismissible ? /*#__PURE__*/_jsx(Pressable, {
         accessibilityRole: "button",
         accessibilityLabel: "Dismiss banner",
-        onPress: onDismiss,
+        onPress: () => {
+          const h = resolveHaptic(haptic, 'selection');
+          if (h) triggerHaptic(h);
+          onDismiss?.();
+        },
         hitSlop: 8,
         style: ({
           pressed
@@ -168,7 +174,11 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
         return /*#__PURE__*/_jsx(Pressable, {
           accessibilityRole: "button",
           accessibilityLabel: action.label,
-          onPress: action.onPress,
+          onPress: () => {
+            const h = resolveHaptic(haptic, 'selection');
+            if (h) triggerHaptic(h);
+            action.onPress();
+          },
           style: ({
             pressed
           }) => [styles.actionBtn, {

package/lib/module/components/BottomNavigation/BottomNavigation.js

@@ -154,7 +154,7 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
             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/module/components/Card/Card.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { Animated, Image, Pressable, StyleSheet, View } from 'react-native';
 import { Gradient, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton, SkeletonText } from "../Skeleton/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const paddingMap = {
@@ -31,6 +31,7 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
     loading = false,
     gradient,
     onPress,
+    haptic,
     accessibilityLabel,
     accessibilityHint,
     accessibilityRole,
@@ -150,9 +151,8 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
   let rendered;
   if (isInteractive) {
     const handlePress = event => {
-      if (theme.components.card?.pressHaptic ?? false) {
-        triggerHaptic('selection');
-      }
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) triggerHaptic(h);
       onPress?.(event);
     };
     rendered = /*#__PURE__*/_jsx(Animated.View, {

package/lib/module/components/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { useControllableState } from "../../hooks/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
   sm: 16,
@@ -35,7 +35,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     size = 'md',
     tone = 'primary',
     accessibilityLabel,
-    haptic = 'selection',
+    haptic,
     style,
     boxStyle,
     checkIconStyle,
@@ -75,7 +75,8 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = event => {
     if (disabled) return;
-    if (haptic !== false && theme.components.checkbox?.pressHaptic) triggerHaptic(haptic);
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setCurrent(!current);
     rest.onPressOut?.(event);
   };

package/lib/module/components/Chip/Chip.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { fontFor, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const toneFor = (theme, tone) => {
@@ -99,6 +99,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     disabled = false,
     loading = false,
     accessibilityLabel,
+    haptic,
     style,
     textStyle,
     containerStyle,
@@ -145,12 +146,13 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
   const borderWidth = isFilled ? 0 : theme.colors.border.width;
   const handlePress = () => {
     if (!isPressable) return;
-    if (theme.components.chip?.pressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     onPress?.();
   };
   const handleClose = () => {
     if (disabled) return;
-    if (theme.components.chip?.closeHaptic) triggerHaptic('impactLight');
+    if (haptic !== false) triggerHaptic('impactLight');
     onClose?.();
   };
   const a11yLabel = accessibilityLabel ?? label;

package/lib/module/components/Confetti/Confetti.js

@@ -0,0 +1,166 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import Animated, { Easing, cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import { useTheme } from "../../theme/index.js";
+import { useReducedMotion } from "../../hooks/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 = 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__*/_jsx(Animated.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 = /*#__PURE__*/forwardRef(({
+  count = 80,
+  colors,
+  mode = 'rain',
+  origin,
+  duration = 2800,
+  fadeOut = true,
+  autoStart = false,
+  recycle = false,
+  size = 10,
+  onComplete,
+  style,
+  testID
+}, ref) => {
+  const theme = useTheme();
+  const reduceMotion = useReducedMotion();
+  const window = useWindowDimensions();
+  const [layout, setLayout] = useState({
+    width: window.width,
+    height: window.height
+  });
+  const [active, setActive] = useState(false);
+  const [pieces, setPieces] = useState([]);
+  const palette = 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 = useSharedValue(0);
+  const finish = useCallback(() => {
+    setActive(false);
+    onComplete?.();
+  }, [onComplete]);
+  const start = useCallback(() => {
+    if (reduceMotion) {
+      onComplete?.();
+      return;
+    }
+    cancelAnimation(progress);
+    progress.value = 0;
+    setPieces(buildPieces(count, palette, mode, size));
+    setActive(true);
+    const tween = withTiming(1, {
+      duration,
+      easing: Easing.linear
+    }, finished => {
+      'worklet';
+
+      if (finished && !recycle) runOnJS(finish)();
+    });
+    progress.value = recycle ? withRepeat(tween, -1, false) : tween;
+  }, [reduceMotion, progress, duration, recycle, finish, onComplete, count, palette, mode, size]);
+  const stop = useCallback(() => {
+    cancelAnimation(progress);
+    setActive(false);
+  }, [progress]);
+  useImperativeHandle(ref, () => ({
+    start,
+    stop
+  }), [start, stop]);
+  useEffect(() => {
+    if (autoStart) start();
+    return () => cancelAnimation(progress);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onLayout = 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__*/_jsx(View, {
+    style: [StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    onLayout: onLayout,
+    testID: testID,
+    children: active ? pieces.map((piece, i) => /*#__PURE__*/_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';
+export { Confetti };
+export default Confetti;
+//# sourceMappingURL=Confetti.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Confetti } from "./Confetti.js";
+//# sourceMappingURL=index.js.map