@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/ChoiceGroup/ChoiceGroup.js

@@ -0,0 +1,332 @@
+"use strict";
+
+/**
+ * ChoiceGroup — headless single-choice group with templated options.
+ *
+ * The component owns the BEHAVIOUR: selection state (controlled or
+ * uncontrolled), per-option press handling, haptics, radio/radiogroup a11y,
+ * and row/column/wrap layout. Each option's LOOK comes from a template:
+ *
+ *   - `card` (default): a bordered card — label (+ optional icon /
+ *     description) with a RadioDot after the content (or before it, with
+ *     `indicatorPosition="leading"`), tinted with the option's colour when
+ *     selected. The "Hot / Warm / Cold" status-picker pattern works
+ *     zero-config.
+ *   - `chip`: an icon-and-label pill that hugs its content. Selection is the
+ *     pill itself, edged and tinted in the option's colour with the label and
+ *     icon in that colour; no dot, no description. The role / filter pattern.
+ *   - `renderOption`: full custom JSX per option. Receives
+ *     `{ option, index, selected, pressed, disabled, color }`; press handling
+ *     and a11y stay managed. Embed the exported RadioDot to keep the standard
+ *     indicator inside a custom layout.
+ *
+ * Cross-option visuals (a single indicator sliding BETWEEN options, joined
+ * segments) are out of scope by design — that's SegmentedControl.
+ *
+ * Same data contract as Select: `ChoiceOption[]` by default, `getOption*`
+ * accessors for custom shapes.
+ */
+
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { tintOf } from "../../utils/color.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { renderSlotIcon } from "../AppIcon/slotIcon.js";
+import { RadioDot } from "../Radio/RadioDot.js";
+
+/** Which side of the card the radio dot sits on. */
+
+/** Everything a custom option template needs to render one option. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const sizeTokens = {
+  sm: {
+    paddingHorizontal: 10,
+    chipPaddingHorizontal: 12,
+    paddingVertical: 6,
+    fontSize: 13,
+    minHeight: 32,
+    iconSize: 14
+  },
+  md: {
+    paddingHorizontal: 12,
+    chipPaddingHorizontal: 16,
+    paddingVertical: 8,
+    fontSize: 15,
+    minHeight: 40,
+    iconSize: 16
+  },
+  lg: {
+    paddingHorizontal: 16,
+    chipPaddingHorizontal: 20,
+    paddingVertical: 11,
+    fontSize: 16,
+    minHeight: 48,
+    iconSize: 18
+  }
+};
+
+// `unknown` keeps the forwardRef signature non-generic — same pattern as
+// Select/InlineSelect; re-type at the call site via `ChoiceGroupProps<T>`.
+const ChoiceGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled,
+    getOptionDescription,
+    getOptionIcon,
+    getOptionColor,
+    value,
+    defaultValue,
+    onChange,
+    renderOption,
+    variant = 'card',
+    indicatorPosition = 'trailing',
+    direction = 'row',
+    gap,
+    wrap = false,
+    fullWidth,
+    disabled = false,
+    size = 'md',
+    haptic,
+    accessibilityLabel,
+    style,
+    optionStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const dims = sizeTokens[size];
+  const labelOf = useCallback(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
+  const valueOf = useCallback(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
+  const disabledOf = useCallback(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
+  const descriptionOf = useCallback(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
+  const iconOf = useCallback(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
+  const colorOf = useCallback(o => getOptionColor ? getOptionColor(o) : o.color, [getOptionColor]);
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? undefined,
+    onChange: onChange
+  });
+  const handleSelect = useCallback(option => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setCurrent(valueOf(option));
+  }, [haptic, setCurrent, valueOf]);
+  const stretch = fullWidth ?? (variant === 'card' && direction === 'row' && !wrap);
+  const selectedFillOpacity = theme.components.choiceGroup?.selectedFillOpacity ?? 0.12;
+  const cardRadius = theme.components.choiceGroup?.borderRadius ?? theme.radius.md;
+
+  /**
+   * Edge and fill of a built-in option. Disabled is painted explicitly, in
+   * the theme's disabled surface with a grey edge and no opacity on top:
+   * the disabled ink alone is the cue, and a selected option that is also
+   * disabled gives its colour up so it reads as disabled first.
+   */
+  const surfaceFor = (selected, optDisabled, color) => {
+    if (optDisabled) {
+      return {
+        borderColor: theme.colors.border.primary,
+        backgroundColor: theme.colors.surface.disabled
+      };
+    }
+    return {
+      borderColor: selected ? color : theme.colors.border.primary,
+      backgroundColor: selected ? tintOf(color, selectedFillOpacity, theme.colors.surface.selected) : theme.colors.background.primary
+    };
+  };
+
+  /**
+   * The option's icon in its current ink. A bare name is drawn bold while
+   * selected, the same pairing the tab bar uses, so "selected" reads the
+   * same way everywhere in the library.
+   */
+  const renderIcon = (option, selected, color, optDisabled) => {
+    const icon = iconOf(option);
+    if (icon == null) {
+      return null;
+    }
+    const resolved = typeof icon === 'string' && selected ? {
+      name: icon,
+      variant: 'bold'
+    } : icon;
+    return renderSlotIcon(resolved, {
+      color,
+      size: dims.iconSize,
+      disabled: optDisabled
+    });
+  };
+  const renderChip = state => {
+    const {
+      option,
+      selected,
+      disabled: optDisabled,
+      color
+    } = state;
+    const ink = optDisabled ? theme.colors.text.disabled : selected ? color : theme.colors.text.primary;
+    const icon = renderIcon(option, selected, ink, optDisabled);
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.chip, {
+        minHeight: dims.minHeight,
+        paddingHorizontal: dims.chipPaddingHorizontal,
+        paddingVertical: dims.paddingVertical,
+        borderRadius: theme.radius.full,
+        ...smoothCorners,
+        borderWidth: theme.colors.border.width,
+        ...surfaceFor(selected, optDisabled, color),
+        columnGap: theme.spacing.xs
+      }],
+      children: [icon ? /*#__PURE__*/_jsx(View, {
+        children: icon
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: [styles.cardLabel, {
+          color: ink,
+          fontSize: dims.fontSize,
+          ...fontFor(theme, 'medium')
+        }],
+        numberOfLines: 1,
+        children: labelOf(option)
+      })]
+    });
+  };
+  const renderDefaultCard = state => {
+    const {
+      option,
+      selected,
+      disabled: optDisabled,
+      color
+    } = state;
+    const rawColor = colorOf(option);
+    const labelColor = optDisabled ? theme.colors.text.disabled : rawColor ?? theme.colors.text.primary;
+    const description = descriptionOf(option);
+    const icon = renderIcon(option, selected, labelColor, optDisabled);
+    const dot = /*#__PURE__*/_jsx(RadioDot, {
+      selected: selected,
+      color: color,
+      disabled: optDisabled,
+      size: size
+    });
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.card, {
+        minHeight: dims.minHeight,
+        paddingHorizontal: dims.paddingHorizontal,
+        paddingVertical: dims.paddingVertical,
+        borderRadius: cardRadius,
+        ...smoothCorners,
+        borderWidth: theme.colors.border.width,
+        ...surfaceFor(selected, optDisabled, color),
+        columnGap: theme.spacing.sm
+      }],
+      children: [indicatorPosition === 'leading' ? dot : null, icon ? /*#__PURE__*/_jsx(View, {
+        children: icon
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: styles.cardTextWrap,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.cardLabel, {
+            color: labelColor,
+            fontSize: dims.fontSize,
+            ...fontFor(theme, 'medium')
+          }],
+          numberOfLines: 1,
+          children: labelOf(option)
+        }), description ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.cardDescription, {
+            color: theme.colors.text.tertiary,
+            fontSize: theme.typography.fontSize.xs
+          }],
+          numberOfLines: 2,
+          children: description
+        }) : null]
+      }), indicatorPosition === 'trailing' ? dot : null]
+    });
+  };
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    accessibilityRole: "radiogroup",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled
+    },
+    testID: testID,
+    style: [{
+      flexDirection: direction,
+      gap: gap ?? theme.spacing.sm,
+      flexWrap: wrap ? 'wrap' : 'nowrap'
+    }, style],
+    children: options.map((option, index) => {
+      const optValue = valueOf(option);
+      const optDisabled = disabled || disabledOf(option);
+      const selected = current === optValue;
+      const color = colorOf(option) ?? theme.colors.primary;
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => {
+          if (optDisabled) {
+            return;
+          }
+          handleSelect(option);
+        },
+        disabled: optDisabled,
+        accessibilityRole: "radio",
+        accessibilityLabel: labelOf(option),
+        accessibilityState: {
+          checked: selected,
+          disabled: optDisabled
+        },
+        style: [stretch ? styles.stretchOption : null,
+        // The built-in templates paint disabled themselves; a custom
+        // template gets the fade, since the library does not own its look.
+        {
+          opacity: optDisabled && renderOption ? 0.55 : 1
+        }, optionStyle],
+        children: ({
+          pressed
+        }) => {
+          const state = {
+            option,
+            index,
+            selected,
+            pressed: pressed && !optDisabled,
+            disabled: optDisabled,
+            color
+          };
+          return /*#__PURE__*/_jsx(_Fragment, {
+            children: renderOption ? renderOption(state) : variant === 'chip' ? renderChip(state) : renderDefaultCard(state)
+          });
+        }
+      }, String(optValue));
+    })
+  });
+});
+ChoiceGroup.displayName = 'ChoiceGroup';
+const buildStyles = _theme => StyleSheet.create({
+  stretchOption: {
+    flex: 1
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  cardTextWrap: {
+    flex: 1
+  },
+  cardLabel: {
+    includeFontPadding: false
+  },
+  cardDescription: {
+    includeFontPadding: false,
+    marginTop: 2
+  }
+});
+export { ChoiceGroup };
+export default ChoiceGroup;
+//# sourceMappingURL=ChoiceGroup.js.map

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

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

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

@@ -0,0 +1,377 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import Animated, { cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import Svg, { Path, Polygon } from 'react-native-svg';
+import { useReducedMotion } from "../../hooks/index.js";
+import { useTheme } from "../../theme/index.js";
+
+/**
+ * Multipliers on the chosen preset, all defaulting to 1. They tune a preset
+ * rather than replace it, so `preset="pop" physics={{ fallSpeed: 2 }}` is still
+ * recognisably a pop.
+ */
+
+/**
+ * A piece carries its whole trajectory, so every preset is data rather than a
+ * separate code path and all pieces share one `progress` value.
+ *
+ * Velocities and the terminal speed are fractions of the container per unit of
+ * timeline, not pixels, so a mid-burst layout change rescales instead of
+ * stranding pieces off-screen.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const TAU = Math.PI * 2;
+const DEG = Math.PI / 180;
+const SPEED_FACTOR = {
+  slow: 1.6,
+  normal: 1,
+  fast: 0.6
+};
+export const DEFAULT_PHYSICS = {
+  velocity: 1,
+  drag: 1,
+  fallSpeed: 1,
+  spread: 0
+};
+
+/**
+ * Shape mixes per preset. Streamers are rare everywhere: they are the largest
+ * piece and the only one that draws a stroked path, so a burst made of them
+ * reads as clutter and costs the most to render.
+ */
+const PRESET_SHAPES = {
+  // Weighted by repetition rather than a weights table — the list IS the mix.
+  pop: ['strip', 'strip', 'strip', 'square', 'circle', 'triangle', 'star', 'streamer'],
+  rain: ['strip', 'strip', 'strip', 'circle', 'square'],
+  fireworks: ['circle', 'circle', 'star', 'star', 'triangle', 'strip']
+};
+const rand = (min, max) => min + Math.random() * (max - min);
+const pick = items => items[Math.floor(Math.random() * items.length)] ?? items[0];
+/** Everything a piece shares regardless of preset. */
+const commonPiece = (seed, index) => ({
+  color: seed.colors[index % seed.colors.length] ?? seed.colors[0],
+  size: seed.baseSize * rand(0.6, 1.4),
+  shape: pick(seed.shapes),
+  rotations: rand(1, 5),
+  rotateDir: Math.random() < 0.5 ? 1 : -1,
+  flutterFreq: rand(2, 5)
+});
+
+/**
+ * Launch outward from one point, mostly upward. The wide angle range is what
+ * makes the burst read as "opening" rather than as a jet.
+ */
+const popPiece = (seed, index) => {
+  const half = seed.physics.spread > 0 ? seed.physics.spread / 2 : 100;
+  const angle = (-90 + rand(-half, half)) * DEG;
+  const speed = rand(1.8, 4.2) * seed.physics.velocity;
+  return {
+    ...commonPiece(seed, index),
+    x0Frac: seed.originXFrac,
+    y0Frac: seed.originYFrac,
+    vxFrac: Math.cos(angle) * speed * 0.7,
+    vyFrac: Math.sin(angle) * speed,
+    drag: rand(5.5, 7.5) * seed.physics.drag,
+    terminalFrac: rand(0.22, 0.44) * seed.physics.fallSpeed,
+    delay: rand(0, 0.05),
+    swayAmp: rand(4, 16),
+    swayFreq: rand(1, 3)
+  };
+};
+
+/** Drift down from above the top edge, spread across the full width. */
+const rainPiece = (seed, index) => ({
+  ...commonPiece(seed, index),
+  x0Frac: Math.random(),
+  y0Frac: -0.05,
+  vxFrac: rand(-0.12, 0.12) * seed.physics.velocity,
+  vyFrac: rand(0.05, 0.25) * seed.physics.velocity,
+  drag: rand(2.5, 4) * seed.physics.drag,
+  terminalFrac: rand(0.95, 1.35) * seed.physics.fallSpeed,
+  delay: rand(0, 0.35),
+  swayAmp: rand(10, 30),
+  swayFreq: rand(1, 3)
+});
+const FIREWORK_BURSTS = 4;
+
+/**
+ * Several small pops at random points, staggered across the first half of the
+ * timeline. Burst centres are seeded per burst so each one reads as one shell.
+ */
+const buildFireworks = (count, seed) => {
+  const perBurst = Math.max(1, Math.round(count / FIREWORK_BURSTS));
+  const half = seed.physics.spread > 0 ? seed.physics.spread / 2 : 180;
+  const pieces = [];
+  for (let b = 0; b < FIREWORK_BURSTS && pieces.length < count; b += 1) {
+    const cx = rand(0.18, 0.82);
+    const cy = rand(0.18, 0.52);
+    const burstDelay = b / FIREWORK_BURSTS * 0.5 + rand(0, 0.06);
+    for (let i = 0; i < perBurst && pieces.length < count; i += 1) {
+      const angle = rand(-half, half) * DEG;
+      const speed = rand(1.4, 3.4) * seed.physics.velocity;
+      pieces.push({
+        ...commonPiece(seed, pieces.length),
+        x0Frac: cx,
+        y0Frac: cy,
+        vxFrac: Math.cos(angle) * speed * 0.7,
+        vyFrac: Math.sin(angle) * speed,
+        drag: rand(6.5, 8.5) * seed.physics.drag,
+        terminalFrac: rand(0.18, 0.38) * seed.physics.fallSpeed,
+        delay: burstDelay,
+        swayAmp: rand(3, 12),
+        swayFreq: rand(1, 3)
+      });
+    }
+  }
+  return pieces;
+};
+
+/**
+ * Exported for tests only, deliberately not re-exported from the barrel.
+ *
+ * The rendered transform cannot verify a preset's shape: the test-time
+ * reanimated mock resolves the timeline straight to its end value, so every
+ * piece reads at t = 1 and per-piece `delay` becomes invisible. Asserting the
+ * trajectory a preset SEEDS is the only way to test it honestly.
+ */
+export const buildPieces = (count, preset, seed) => {
+  if (preset === 'fireworks') {
+    return buildFireworks(count, seed);
+  }
+  const make = preset === 'rain' ? rainPiece : popPiece;
+  return Array.from({
+    length: count
+  }, (_, i) => make(seed, i));
+};
+
+/** Width and height of each shape, as multiples of the piece's own size. */
+const SHAPE_BOX = {
+  strip: {
+    w: 1,
+    h: 0.45
+  },
+  square: {
+    w: 1,
+    h: 1
+  },
+  circle: {
+    w: 1,
+    h: 1
+  },
+  triangle: {
+    w: 1,
+    h: 1
+  },
+  star: {
+    w: 1.2,
+    h: 1.2
+  },
+  streamer: {
+    w: 3,
+    h: 1.2
+  }
+};
+const TRIANGLE_POINTS = '50,4 96,96 4,96';
+const STAR_POINTS = '50,2 61,36 97,36 68,58 79,94 50,72 21,94 32,58 3,36 39,36';
+/** A half-curled ribbon: two opposing arcs, stroked rather than filled. */
+const STREAMER_PATH = 'M2,50 C20,6 44,94 62,50 S92,6 98,50';
+const ShapeBody = ({
+  shape,
+  color
+}) => {
+  if (shape === 'triangle' || shape === 'star') {
+    return /*#__PURE__*/_jsx(Svg, {
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 100 100",
+      children: /*#__PURE__*/_jsx(Polygon, {
+        points: shape === 'star' ? STAR_POINTS : TRIANGLE_POINTS,
+        fill: color
+      })
+    });
+  }
+  if (shape === 'streamer') {
+    return /*#__PURE__*/_jsx(Svg, {
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      children: /*#__PURE__*/_jsx(Path, {
+        d: STREAMER_PATH,
+        stroke: color,
+        strokeWidth: 22,
+        strokeLinecap: "round",
+        fill: "none"
+      })
+    });
+  }
+  return null;
+};
+const ConfettiPiece = ({
+  piece,
+  progress,
+  width,
+  height,
+  fadeOut
+}) => {
+  const animStyle = useAnimatedStyle(() => {
+    const span = 1 - piece.delay;
+    const t = span <= 0 ? 0 : Math.min(1, Math.max(0, (progress.value - piece.delay) / span));
+
+    // Velocity decays as e^(-drag*t), so this integral is the distance already
+    // travelled on the launch impulse. It approaches a limit, which is what
+    // makes a piece rise, slow to a stop and hang before gravity takes over.
+    const spent = (1 - Math.exp(-piece.drag * t)) / piece.drag;
+    const x = piece.x0Frac * width + piece.vxFrac * width * spent;
+    // Terminal velocity rather than free fall: pieces settle to a slow steady
+    // drift instead of accelerating off the bottom of the screen.
+    const y = piece.y0Frac * height + piece.terminalFrac * height * t + (piece.vyFrac - piece.terminalFrac) * height * spent;
+    const sway = Math.sin(t * piece.swayFreq * TAU) * piece.swayAmp;
+    const rotate = piece.rotateDir * piece.rotations * 360 * t;
+    // Paper-flutter on scaleY, never scaleX. A strip turning in the air
+    // foreshortens across its SHORT axis; squashing the long axis instead makes
+    // it contract end-to-end and read as a wriggling worm rather than 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.75) / 0.25) : 1;
+    return {
+      opacity,
+      transform: [{
+        translateX: x + sway
+      }, {
+        translateY: y
+      }, {
+        rotate: `${rotate}deg`
+      }, {
+        scaleY: flutter
+      }]
+    };
+  });
+  const box = SHAPE_BOX[piece.shape];
+  const isDrawn = piece.shape === 'triangle' || piece.shape === 'star' || piece.shape === 'streamer';
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      position: 'absolute',
+      width: piece.size * box.w,
+      height: piece.size * box.h,
+      borderRadius: piece.shape === 'circle' ? piece.size * box.h / 2 : 1,
+      // A drawn shape paints itself; only the plain boxes take a fill here.
+      backgroundColor: isDrawn ? 'transparent' : piece.color
+    }, animStyle],
+    children: /*#__PURE__*/_jsx(ShapeBody, {
+      shape: piece.shape,
+      color: piece.color
+    })
+  });
+};
+const Confetti = /*#__PURE__*/forwardRef(({
+  count = 80,
+  colors,
+  preset = 'pop',
+  shapes,
+  speed = 'normal',
+  physics,
+  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 effectiveDuration = duration * SPEED_FACTOR[speed];
+  const finish = useCallback(() => {
+    setActive(false);
+    onComplete?.();
+  }, [onComplete]);
+  const start = useCallback(() => {
+    if (reduceMotion) {
+      onComplete?.();
+      return;
+    }
+    cancelAnimation(progress);
+    progress.value = 0;
+    setPieces(buildPieces(count, preset, {
+      colors: palette,
+      baseSize: size,
+      originXFrac: origin ? origin.x / Math.max(1, layout.width) : 0.5,
+      originYFrac: origin ? origin.y / Math.max(1, layout.height) : 0.5,
+      physics: {
+        ...DEFAULT_PHYSICS,
+        ...physics
+      },
+      shapes: shapes ?? PRESET_SHAPES[preset]
+    }));
+    setActive(true);
+    const tween = withTiming(1, {
+      duration: effectiveDuration,
+      easing: Easing.linear
+    }, finished => {
+      'worklet';
+
+      if (finished && !recycle) {
+        runOnJS(finish)();
+      }
+    });
+    progress.value = recycle ? withRepeat(tween, -1, false) : tween;
+  }, [reduceMotion, progress, effectiveDuration, recycle, finish, onComplete, count, palette, preset, shapes, physics, size, origin, layout.width, layout.height]);
+  const stop = useCallback(() => {
+    cancelAnimation(progress);
+    setActive(false);
+  }, [progress]);
+  useImperativeHandle(ref, () => ({
+    start,
+    stop
+  }), [start, stop]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: autoStart is a mount-once decision; re-running on a changed `start` identity would re-fire the burst
+  useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+    return () => cancelAnimation(progress);
+  }, []);
+  const onLayout = useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setLayout({
+        width,
+        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,
+      fadeOut: fadeOut
+    }, i)) : null
+  });
+});
+Confetti.displayName = 'Confetti';
+export { Confetti };
+export default Confetti;
+//# sourceMappingURL=Confetti.js.map