@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/commonjs/components/FloatingActionButton/FloatingActionButton.js

@@ -1,696 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.FloatingActionButtonGroup = exports.FloatingActionButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _usePressAnimation = require("../../hooks/usePressAnimation.js");
-var _index = require("../../theme/index.js");
-var _color = require("../../utils/color.js");
-var _corners = require("../../utils/corners.js");
-var _hapticUtils = require("../../utils/hapticUtils.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); }
-// Local shape mirror — see types.ts FloatingActionButtonTokens for the canonical
-// definition. Declared here so the component can read tokens before types.ts is
-// regenerated; will collapse to a direct import once that lands.
-
-const sizeMap = {
-  sm: {
-    diameter: 40,
-    iconSize: 18,
-    fontSize: 13,
-    labelPaddingHorizontal: 14
-  },
-  md: {
-    diameter: 56,
-    iconSize: 22,
-    fontSize: 15,
-    labelPaddingHorizontal: 18
-  },
-  lg: {
-    diameter: 72,
-    iconSize: 28,
-    fontSize: 16,
-    labelPaddingHorizontal: 22
-  }
-};
-const toneBackground = (theme, tone) => {
-  switch (tone) {
-    case 'success':
-      return theme.colors.success;
-    case 'warning':
-      return theme.colors.warning;
-    case 'error':
-      return theme.colors.error;
-    case 'neutral':
-      return theme.colors.background.tertiary;
-    case 'primary':
-    default:
-      return theme.colors.primary;
-  }
-};
-
-/**
- * The tint painted over the fill while pressed. There is no platform ripple:
- * it spread the theme's surface tint, white in the dark theme, over a coloured
- * button. The neutral tone is a surface, so it keeps the theme's tint.
- */
-const pressedTintFor = (theme, tone) => tone === 'neutral' ? theme.colors.surface.pressed : _color.ACCENT_PRESSED_TINT;
-const toneForeground = (theme, tone) => {
-  if (tone === 'neutral') {
-    return theme.colors.text.primary;
-  }
-  return theme.colors.text.inverse;
-};
-const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    icon,
-    onPress,
-    label,
-    size = 'md',
-    tone = 'primary',
-    position,
-    bottomOffset,
-    disabled = false,
-    hideOnScroll = false,
-    isScrolling = false,
-    accessibilityLabel,
-    accessibilityHint,
-    haptic,
-    style,
-    containerStyle,
-    labelStyle,
-    testID
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  const sizeStyles = sizeMap[size];
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const {
-    scale,
-    pressIn,
-    pressOut
-  } = (0, _usePressAnimation.usePressAnimation)({
-    enabled: !disabled
-  });
-  const fabTokens = theme.components.floatingActionButton;
-  const edgeOffset = fabTokens?.edgeOffset ?? 24;
-  const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
-  const hideAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  (0, _react.useEffect)(() => {
-    if (!hideOnScroll) {
-      (0, _index.setNativeValue)(hideAnim, 0);
-      return;
-    }
-    const anim = _reactNative.Animated.timing(hideAnim, {
-      toValue: isScrolling ? 1 : 0,
-      duration: theme.motion.duration.normal,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [hideOnScroll, isScrolling, hideAnim, theme.motion.duration.normal, theme.motion.easing.standard]);
-  const hideTranslateY = hideAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, sizeStyles.diameter + (bottomOffset ?? defaultBottomOffset) + insets.bottom + edgeOffset]
-  });
-  const hideOpacity = hideAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, 0]
-  });
-  const handlePress = _event => {
-    if (disabled) {
-      return;
-    }
-    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'impactLight');
-    if (h) {
-      (0, _hapticUtils.triggerHaptic)(h);
-    }
-    onPress();
-  };
-  const renderedIcon = icon;
-  const isExtended = typeof label === 'string' && label.length > 0;
-  const backgroundColor = disabled ? theme.colors.surface.disabled : toneBackground(theme, tone);
-  const foregroundColor = disabled ? theme.colors.text.disabled : toneForeground(theme, tone);
-  const positionStyle = (0, _react.useMemo)(() => {
-    if (!position) {
-      return null;
-    }
-    const bottom = (bottomOffset ?? defaultBottomOffset) + insets.bottom;
-    switch (position) {
-      case 'bottomLeft':
-        return {
-          position: 'absolute',
-          bottom,
-          left: edgeOffset
-        };
-      case 'bottomCenter':
-        return {
-          position: 'absolute',
-          bottom,
-          alignSelf: 'center'
-        };
-      case 'bottomRight':
-      default:
-        return {
-          position: 'absolute',
-          bottom,
-          right: edgeOffset
-        };
-    }
-  }, [position, bottomOffset, insets.bottom, defaultBottomOffset, edgeOffset]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: [positionStyle, {
-      transform: [{
-        translateY: hideTranslateY
-      }, {
-        scale
-      }],
-      opacity: hideOpacity
-    }, containerStyle, style],
-    pointerEvents: hideOnScroll && isScrolling ? 'none' : 'auto',
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      ref: ref,
-      onPress: handlePress,
-      onPressIn: pressIn,
-      onPressOut: pressOut,
-      disabled: disabled,
-      accessibilityRole: "button",
-      accessibilityLabel: accessibilityLabel,
-      accessibilityHint: accessibilityHint,
-      accessibilityState: {
-        disabled
-      },
-      testID: testID,
-      style: [styles.base, isExtended ? {
-        height: sizeStyles.diameter,
-        paddingHorizontal: sizeStyles.labelPaddingHorizontal,
-        borderRadius: sizeStyles.diameter / 2,
-        ..._corners.smoothCorners
-      } : {
-        width: sizeStyles.diameter,
-        height: sizeStyles.diameter,
-        borderRadius: sizeStyles.diameter / 2,
-        ..._corners.smoothCorners
-      }, theme.shadows.lg, {
-        backgroundColor,
-        opacity: disabled ? 0.55 : 1
-      }],
-      children: ({
-        pressed
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [pressed && !disabled ?
-        /*#__PURE__*/
-        // Rounded to the button's own circle: a full-bleed child under
-        // the continuous-corner clip would show cut corners on iOS.
-        (0, _jsxRuntime.jsx)(_reactNative.View, {
-          pointerEvents: "none",
-          testID: "fab-pressed",
-          style: [styles.pressedTint, {
-            backgroundColor: pressedTintFor(theme, tone),
-            borderRadius: sizeStyles.diameter / 2,
-            ..._corners.smoothCorners
-          }]
-        }) : null, renderedIcon, isExtended ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.label, {
-            color: foregroundColor,
-            fontSize: sizeStyles.fontSize,
-            fontWeight: theme.typography.fontWeight.semibold,
-            marginLeft: theme.spacing.sm
-          }, labelStyle],
-          numberOfLines: 1,
-          children: label
-        }) : null]
-      })
-    })
-  });
-});
-FloatingActionButton.displayName = 'FloatingActionButton';
-const buildStyles = _theme => _reactNative.StyleSheet.create({
-  base: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden'
-  },
-  pressedTint: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  },
-  label: {
-    includeFontPadding: false
-  }
-});
-
-// =====================================================================
-// FloatingActionButtonGroup — speed-dial: primary button that expands radially upward into
-// N secondary buttons. Animations use the native driver (opacity, transform)
-// so they remain smooth during JS thread work.
-// =====================================================================
-
-const FloatingActionButtonGroup = props => {
-  const {
-    primaryIcon,
-    primaryActiveIcon,
-    actions,
-    open: controlledOpen,
-    defaultOpen = false,
-    onOpenChange,
-    position = 'bottomRight',
-    bottomOffset,
-    size = 'md',
-    accessibilityLabel = 'Quick actions',
-    haptic,
-    hideOnScroll = false,
-    isScrolling = false,
-    containerStyle,
-    secondaryActionStyle,
-    labelPillStyle,
-    labelStyle,
-    testID
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  const sizeStyles = sizeMap[size];
-  const styles = (0, _react.useMemo)(() => buildGroupStyles(theme), [theme]);
-  const fabTokens = theme.components.floatingActionButton;
-  const edgeOffset = fabTokens?.edgeOffset ?? 24;
-  const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
-  const secondaryGap = fabTokens?.secondaryGap ?? 16;
-  const staggerMs = fabTokens?.staggerMs ?? 50;
-  const isControlled = typeof controlledOpen === 'boolean';
-  const [internalOpen, setInternalOpen] = (0, _react.useState)(defaultOpen);
-  const isOpen = isControlled ? controlledOpen : internalOpen;
-
-  // Hide on scroll, the single button's value and timing: 0 shown, 1 off the
-  // bottom edge. The whole container moves, so open actions would travel with
-  // it; the effect below closes them first.
-  const hideAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  (0, _react.useEffect)(() => {
-    if (!hideOnScroll) {
-      (0, _index.setNativeValue)(hideAnim, 0);
-      return;
-    }
-    const anim = _reactNative.Animated.timing(hideAnim, {
-      toValue: isScrolling ? 1 : 0,
-      duration: theme.motion.duration.normal,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [hideOnScroll, isScrolling, hideAnim, theme.motion.duration.normal, theme.motion.easing.standard]);
-  const hidden = hideOnScroll && isScrolling;
-  (0, _react.useEffect)(() => {
-    if (hidden && isOpen) {
-      if (!isControlled) {
-        setInternalOpen(false);
-      }
-      onOpenChange?.(false);
-    }
-  }, [hidden, isOpen, isControlled, onOpenChange]);
-  const hideTranslateY = hideAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, sizeStyles.diameter + (bottomOffset ?? defaultBottomOffset) + insets.bottom + edgeOffset]
-  });
-  const hideOpacity = hideAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, 0]
-  });
-
-  // Animation drivers
-  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(isOpen ? 1 : 0)).current;
-  // Stable refs for per-item Animated.Values. Reconciled inside useEffect — never
-  // mutated during render — so re-renders don't recreate Animated.Value instances
-  // (previous implementation leaked one Animated.Value per re-render when the
-  // actions array length changed).
-  const itemAnims = (0, _react.useRef)([]);
-  // Bump this when the underlying refs array is re-shaped so downstream effects
-  // and mapping reads see the new length.
-  const [itemAnimsVersion, setItemAnimsVersion] = (0, _react.useState)(0);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: syncs the anim-value array to `actions.length`; `isOpen` is read only to seed values added this pass
-  (0, _react.useEffect)(() => {
-    const current = itemAnims.current;
-    if (current.length === actions.length) {
-      return;
-    }
-    if (current.length < actions.length) {
-      const next = current.slice();
-      for (let i = current.length; i < actions.length; i += 1) {
-        next.push(new _reactNative.Animated.Value(isOpen ? 1 : 0));
-      }
-      itemAnims.current = next;
-    } else {
-      // Drop stale refs when actions array shrinks.
-      itemAnims.current = current.slice(0, actions.length);
-    }
-    setItemAnimsVersion(v => v + 1);
-    // isOpen intentionally not in deps — only used to seed brand-new values; the
-    // open/close effect below will animate them to the correct target anyway.
-  }, [actions.length]);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: `actions.length` / `itemAnimsVersion` are TRIGGERS: they re-run this animation after the anim-value array is re-synced, so removing them would leave newly added items unanimated
-  (0, _react.useEffect)(() => {
-    const progressAnim = _reactNative.Animated.timing(progress, {
-      toValue: isOpen ? 1 : 0,
-      duration: theme.motion.duration.normal,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    });
-    progressAnim.start();
-    const animations = itemAnims.current.map(value => _reactNative.Animated.timing(value, {
-      toValue: isOpen ? 1 : 0,
-      duration: theme.motion.duration.normal,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    }));
-    // Reverse stagger order on close so items closest to primary collapse last
-    const ordered = isOpen ? animations : [...animations].reverse();
-    const staggerAnim = _reactNative.Animated.stagger(staggerMs, ordered);
-    staggerAnim.start();
-    return () => {
-      progressAnim.stop();
-      staggerAnim.stop();
-    };
-  }, [isOpen, progress, theme.motion.duration.normal, theme.motion.easing.standard, actions.length, itemAnimsVersion, staggerMs]);
-  const setOpen = (0, _react.useCallback)(next => {
-    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'impactLight');
-    if (h) {
-      (0, _hapticUtils.triggerHaptic)(h);
-    }
-    if (!isControlled) {
-      setInternalOpen(next);
-    }
-    onOpenChange?.(next);
-  }, [isControlled, onOpenChange, haptic]);
-  const handlePrimaryPress = (0, _react.useCallback)(() => {
-    setOpen(!isOpen);
-  }, [isOpen, setOpen]);
-  const handleActionPress = (0, _react.useCallback)(action => {
-    if (haptic !== false) {
-      (0, _hapticUtils.triggerHaptic)('selection');
-    }
-    action.onPress();
-    // Close after action runs
-    if (!isControlled) {
-      setInternalOpen(false);
-    }
-    onOpenChange?.(false);
-  }, [isControlled, onOpenChange, haptic]);
-  const handleBackdropPress = (0, _react.useCallback)(() => {
-    if (isOpen) {
-      setOpen(false);
-    }
-  }, [isOpen, setOpen]);
-  const positionStyle = (0, _react.useMemo)(() => {
-    const bottom = (bottomOffset ?? defaultBottomOffset) + insets.bottom;
-    switch (position) {
-      case 'bottomLeft':
-        return {
-          position: 'absolute',
-          bottom,
-          left: edgeOffset,
-          alignItems: 'flex-start'
-        };
-      case 'bottomCenter':
-        return {
-          position: 'absolute',
-          bottom,
-          alignSelf: 'center',
-          alignItems: 'center'
-        };
-      case 'bottomRight':
-      default:
-        return {
-          position: 'absolute',
-          bottom,
-          right: edgeOffset,
-          alignItems: 'flex-end'
-        };
-    }
-  }, [position, bottomOffset, insets.bottom, defaultBottomOffset, edgeOffset]);
-
-  // Vertical slot offset per index: secondary at index i sits (diameter + gap) * (i + 1) above primary
-  const slotOffset = index => -((sizeStyles.diameter + secondaryGap) * (index + 1));
-
-  // Each action row is absolute. Left to its own measured width it ended up
-  // beside the primary rather than on it: an absolute child with no
-  // horizontal inset is laid out from the container's start whatever its
-  // alignItems, and even pinned with `right: 0` the first layout after a
-  // cold start measured a row short and let its circle overflow. So every
-  // row spans the container (the primary's width) and justifies its content
-  // to the primary's edge; the label overflows the other way, which is fine.
-  const rowInset = (0, _react.useMemo)(() => {
-    switch (position) {
-      case 'bottomLeft':
-        return {
-          left: 0,
-          right: 0,
-          justifyContent: 'flex-start'
-        };
-      case 'bottomCenter':
-        return {
-          left: 0,
-          right: 0,
-          justifyContent: 'center'
-        };
-      case 'bottomRight':
-      default:
-        return {
-          left: 0,
-          right: 0,
-          justifyContent: 'flex-end'
-        };
-    }
-  }, [position]);
-  // The label pill is absolute beside the circle, not a flowing sibling: laid
-  // out inside the row's fixed width it would be measured against the space
-  // left beside the circle and truncate. Absolute, it measures freely and
-  // hangs off the circle on the side away from the primary's edge.
-  const secondaryDiameter = sizeStyles.diameter * 0.78;
-  const labelInset = (0, _react.useMemo)(() => {
-    const beside = secondaryDiameter + theme.spacing.sm;
-    switch (position) {
-      case 'bottomLeft':
-        return {
-          left: beside,
-          alignItems: 'flex-start'
-        };
-      case 'bottomCenter':
-        return {
-          right: sizeStyles.diameter / 2 + secondaryDiameter / 2 + theme.spacing.sm,
-          alignItems: 'flex-end'
-        };
-      case 'bottomRight':
-      default:
-        return {
-          right: beside,
-          alignItems: 'flex-end'
-        };
-    }
-  }, [position, secondaryDiameter, sizeStyles.diameter, theme.spacing.sm]);
-  const backdropOpacity = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.4]
-  });
-  const rotation = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '45deg']
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      pointerEvents: isOpen ? 'auto' : 'none',
-      style: [_reactNative.StyleSheet.absoluteFill, {
-        backgroundColor: theme.colors.background.overlay,
-        opacity: backdropOpacity
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        style: _reactNative.StyleSheet.absoluteFill,
-        onPress: handleBackdropPress,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no",
-        testID: testID ? `${testID}-backdrop` : undefined
-      })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-      // The container is absolutely positioned and sized to the primary FAB,
-      // while the secondary actions sit ABOVE it via negative translateY, so
-      // they render outside their parent's bounds. Without box-none the
-      // container is itself a touch target across its box, and on Android a
-      // child drawn outside the parent's bounds does not receive touches at
-      // all. box-none makes the container transparent to touches while its
-      // children stay interactive, which is what an expanded menu needs.
-      //
-      // A consumer app carried this as a patch-package fix against two
-      // published versions rather than it landing here, which is how the
-      // library kept shipping the bug.
-      pointerEvents: hidden ? 'none' : 'box-none',
-      style: [positionStyle, {
-        transform: [{
-          translateY: hideTranslateY
-        }],
-        opacity: hideOpacity
-      }, containerStyle],
-      accessibilityRole: 'menu',
-      testID: testID,
-      children: [actions.map((action, index) => {
-        const anim = itemAnims.current[index];
-        if (!anim) {
-          return null;
-        }
-        const translateY = anim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, slotOffset(index)]
-        });
-        const scale = anim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0.6, 1]
-        });
-        const itemBackground = toneBackground(theme, action.tone ?? 'primary');
-        const itemForeground = toneForeground(theme, action.tone ?? 'primary');
-        const labelPill = action.label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          pointerEvents: "none",
-          style: [styles.labelSlot, labelInset],
-          testID: testID ? `${testID}-label-${action.key}` : undefined,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.labelPill, theme.shadows.sm, {
-              backgroundColor: theme.colors.background.elevated,
-              paddingHorizontal: theme.spacing.sm,
-              paddingVertical: theme.spacing.xs,
-              borderRadius: theme.radius.sm,
-              ..._corners.smoothCorners
-            }, labelPillStyle],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [{
-                color: theme.colors.text.primary,
-                fontSize: theme.typography.fontSize.sm,
-                fontWeight: theme.typography.fontWeight.medium
-              }, labelStyle],
-              numberOfLines: 1,
-              children: action.label
-            })
-          })
-        }) : null;
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-          pointerEvents: isOpen ? 'auto' : 'none',
-          style: [styles.secondaryRow, rowInset, {
-            position: 'absolute',
-            bottom: 0,
-            opacity: anim,
-            transform: [{
-              translateY
-            }, {
-              scale
-            }]
-          }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-            onPress: () => handleActionPress(action),
-            accessibilityRole: 'menuitem',
-            accessibilityLabel: action.accessibilityLabel,
-            style: [styles.fabBase, theme.shadows.md, {
-              width: secondaryDiameter,
-              height: secondaryDiameter,
-              borderRadius: secondaryDiameter / 2,
-              ..._corners.smoothCorners,
-              backgroundColor: itemBackground
-            }, secondaryActionStyle],
-            testID: testID ? `${testID}-action-${action.key}` : undefined,
-            children: ({
-              pressed
-            }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [pressed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                pointerEvents: "none",
-                testID: "fab-pressed",
-                style: [styles.pressedTint, {
-                  backgroundColor: pressedTintFor(theme, action.tone ?? 'primary'),
-                  borderRadius: secondaryDiameter / 2,
-                  ..._corners.smoothCorners
-                }]
-              }) : null, /*#__PURE__*/_react.default.isValidElement(action.icon) ? action.icon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: {
-                  color: itemForeground
-                },
-                children: String(action.icon ?? '')
-              })]
-            })
-          }), labelPill]
-        }, action.key);
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        onPress: handlePrimaryPress,
-        accessibilityRole: "button",
-        accessibilityLabel: accessibilityLabel,
-        accessibilityState: {
-          expanded: isOpen
-        },
-        style: [styles.fabBase, theme.shadows.lg, {
-          width: sizeStyles.diameter,
-          height: sizeStyles.diameter,
-          borderRadius: sizeStyles.diameter / 2,
-          ..._corners.smoothCorners,
-          backgroundColor: theme.colors.primary
-        }],
-        testID: testID ? `${testID}-primary` : undefined,
-        children: ({
-          pressed
-        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [pressed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            pointerEvents: "none",
-            testID: "fab-pressed",
-            style: [styles.pressedTint, {
-              backgroundColor: _color.ACCENT_PRESSED_TINT,
-              borderRadius: sizeStyles.diameter / 2,
-              ..._corners.smoothCorners
-            }]
-          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-            style: primaryActiveIcon ? undefined : {
-              transform: [{
-                rotate: rotation
-              }]
-            },
-            children: isOpen && primaryActiveIcon ? primaryActiveIcon : primaryIcon
-          })]
-        })
-      })]
-    })]
-  });
-};
-exports.FloatingActionButtonGroup = FloatingActionButtonGroup;
-const buildGroupStyles = _theme => _reactNative.StyleSheet.create({
-  fabBase: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden'
-  },
-  pressedTint: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  },
-  secondaryRow: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  // Beside the circle, the row's height, its pill centred vertically.
-  labelSlot: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  },
-  labelPill: {
-    alignSelf: 'auto'
-  }
-});
-var _default = exports.default = FloatingActionButton;
-//# sourceMappingURL=FloatingActionButton.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.FloatingActionButtonGroup=exports.FloatingActionButton=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_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 i,o,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(i=t?n:r){if(i.has(e))return i.get(e);i.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?i(a,t,o):a[t]=e[t]);return a})(e,t)}const sizeMap={sm:{diameter:40,iconSize:18,fontSize:13,labelPaddingHorizontal:14},md:{diameter:56,iconSize:22,fontSize:15,labelPaddingHorizontal:18},lg:{diameter:72,iconSize:28,fontSize:16,labelPaddingHorizontal:22}},toneBackground=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;case"neutral":return e.colors.background.tertiary;default:return e.colors.primary}},pressedTintFor=(e,t)=>"neutral"===t?e.colors.surface.pressed:_color.ACCENT_PRESSED_TINT,toneForeground=(e,t)=>{if("neutral"===t)return e.colors.text.primary;switch(t){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}},FloatingActionButton=exports.FloatingActionButton=(0,_react.forwardRef)((e,t)=>{const{icon:r,onPress:n,label:i,size:o="md",tone:a="primary",position:s,bottomOffset:l,disabled:c=!1,hideOnScroll:u=!1,isScrolling:d=!1,accessibilityLabel:m,accessibilityHint:p,haptic:g,style:b,containerStyle:f,labelStyle:_,testID:h}=e,y=(0,_index.useTheme)(),x=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),v=sizeMap[o],R=(0,_react.useMemo)(()=>buildStyles(y),[y]),{scale:j,pressIn:S,pressOut:N}=(0,_usePressAnimation.usePressAnimation)({enabled:!c}),A=y.components.floatingActionButton,w=A?.edgeOffset??24,C=A?.bottomOffset??24,P=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current;(0,_react.useEffect)(()=>{if(!u)return void(0,_index.setNativeValue)(P,0);const e=_reactNative.Animated.timing(P,{toValue:d?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[u,d,P,y.motion.duration.normal,y.motion.easing.standard]);const I=P.interpolate({inputRange:[0,1],outputRange:[0,v.diameter+(l??C)+x.bottom+w]}),k=P.interpolate({inputRange:[0,1],outputRange:[1,0]}),E=r,z="string"==typeof i&&i.length>0,F=c?y.colors.surface.disabled:toneBackground(y,a),V=c?y.colors.text.disabled:toneForeground(y,a),D=(0,_react.useMemo)(()=>{if(!s)return null;const e=(l??C)+x.bottom;switch(s){case"bottomLeft":return{position:"absolute",bottom:e,left:w};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center"};default:return{position:"absolute",bottom:e,right:w}}},[s,l,x.bottom,C,w]);return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[D,{transform:[{translateY:I},{scale:j}],opacity:k},f,b],pointerEvents:u&&d?"none":"auto",children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:t,onPress:e=>{if(c)return;const t=(0,_hapticUtils.resolveHaptic)(g,"impactLight");t&&(0,_hapticUtils.triggerHaptic)(t),n()},onPressIn:S,onPressOut:N,disabled:c,accessibilityRole:"button",accessibilityLabel:m,accessibilityHint:p,accessibilityState:{disabled:c},testID:h,style:[R.base,z?{height:v.diameter,paddingHorizontal:v.labelPaddingHorizontal,borderRadius:v.diameter/2,..._corners.smoothCorners}:{width:v.diameter,height:v.diameter,borderRadius:v.diameter/2,..._corners.smoothCorners},y.shadows.lg,{backgroundColor:F,opacity:c?.55:1}],children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[e&&!c?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:pressedTintFor(y,a),borderRadius:v.diameter/2,..._corners.smoothCorners}]}):null,E,z?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[R.label,{color:V,fontSize:v.fontSize,fontWeight:y.typography.fontWeight.semibold,marginLeft:y.spacing.sm},_],numberOfLines:1,children:i}):null]})})})});FloatingActionButton.displayName="FloatingActionButton";const buildStyles=e=>_reactNative.StyleSheet.create({base:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},label:{includeFontPadding:!1}}),FloatingActionButtonGroup=e=>{const{primaryIcon:t,primaryActiveIcon:r,actions:n,open:i,defaultOpen:o=!1,onOpenChange:a,position:s="bottomRight",bottomOffset:l,size:c="md",accessibilityLabel:u="Quick actions",haptic:d,hideOnScroll:m=!1,isScrolling:p=!1,containerStyle:g,secondaryActionStyle:b,labelPillStyle:f,labelStyle:_,testID:h}=e,y=(0,_index.useTheme)(),x=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),v=sizeMap[c],R=(0,_react.useMemo)(()=>buildGroupStyles(y),[y]),j=y.components.floatingActionButton,S=j?.edgeOffset??24,N=j?.bottomOffset??24,A=j?.secondaryGap??16,w=j?.staggerMs??50,C="boolean"==typeof i,[P,I]=(0,_react.useState)(o),k=C?i:P,E=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current;(0,_react.useEffect)(()=>{if(!m)return void(0,_index.setNativeValue)(E,0);const e=_reactNative.Animated.timing(E,{toValue:p?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[m,p,E,y.motion.duration.normal,y.motion.easing.standard]);const z=m&&p;(0,_react.useEffect)(()=>{z&&k&&(C||I(!1),a?.(!1))},[z,k,C,a]);const F=E.interpolate({inputRange:[0,1],outputRange:[0,v.diameter+(l??N)+x.bottom+S]}),V=E.interpolate({inputRange:[0,1],outputRange:[1,0]}),D=(0,_react.useRef)((0,_index.createAnimatedValue)(k?1:0)).current,O=(0,_react.useRef)([]),[T,B]=(0,_react.useState)(0);(0,_react.useEffect)(()=>{const e=O.current;if(e.length!==n.length){if(e.length<n.length){const t=e.slice();for(let r=e.length;r<n.length;r+=1)t.push(new _reactNative.Animated.Value(k?1:0));O.current=t}else O.current=e.slice(0,n.length);B(e=>e+1)}},[n.length]),(0,_react.useEffect)(()=>{const e=_reactNative.Animated.timing(D,{toValue:k?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});e.start();const t=O.current.map(e=>_reactNative.Animated.timing(e,{toValue:k?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0})),r=k?t:[...t].reverse(),n=_reactNative.Animated.stagger(w,r);return n.start(),()=>{e.stop(),n.stop()}},[k,D,y.motion.duration.normal,y.motion.easing.standard,n.length,T,w]);const L=(0,_react.useCallback)(e=>{const t=(0,_hapticUtils.resolveHaptic)(d,"impactLight");t&&(0,_hapticUtils.triggerHaptic)(t),C||I(e),a?.(e)},[C,a,d]),M=(0,_react.useCallback)(()=>{L(!k)},[k,L]),H=(0,_react.useCallback)(e=>{!1!==d&&(0,_hapticUtils.triggerHaptic)("selection"),e.onPress(),C||I(!1),a?.(!1)},[C,a,d]),q=(0,_react.useCallback)(()=>{k&&L(!1)},[k,L]),W=(0,_react.useMemo)(()=>{const e=(l??N)+x.bottom;switch(s){case"bottomLeft":return{position:"absolute",bottom:e,left:S,alignItems:"flex-start"};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center",alignItems:"center"};default:return{position:"absolute",bottom:e,right:S,alignItems:"flex-end"}}},[s,l,x.bottom,N,S]),slotOffset=e=>-(v.diameter+A)*(e+1),G=(0,_react.useMemo)(()=>{switch(s){case"bottomLeft":return{left:0,right:0,justifyContent:"flex-start"};case"bottomCenter":return{left:0,right:0,justifyContent:"center"};default:return{left:0,right:0,justifyContent:"flex-end"}}},[s]),U=.78*v.diameter,$=(0,_react.useMemo)(()=>{const e=U+y.spacing.sm;switch(s){case"bottomLeft":return{left:e,alignItems:"flex-start"};case"bottomCenter":return{right:v.diameter/2+U/2+y.spacing.sm,alignItems:"flex-end"};default:return{right:e,alignItems:"flex-end"}}},[s,U,v.diameter,y.spacing.sm]),Y=D.interpolate({inputRange:[0,1],outputRange:[0,.4]}),Q=D.interpolate({inputRange:[0,1],outputRange:["0deg","45deg"]});return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[k?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:k?"auto":"none",style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:y.colors.background.overlay,opacity:Y}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:q,accessibilityElementsHidden:!0,importantForAccessibility:"no",testID:h?`${h}-backdrop`:void 0})}):null,(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{pointerEvents:z?"none":"box-none",style:[W,{transform:[{translateY:F}],opacity:V},g],accessibilityRole:"menu",testID:h,children:[n.map((e,t)=>{const r=O.current[t];if(!r)return null;const n=r.interpolate({inputRange:[0,1],outputRange:[0,slotOffset(t)]}),i=r.interpolate({inputRange:[0,1],outputRange:[.6,1]}),o=toneBackground(y,e.tone??"primary"),a=toneForeground(y,e.tone??"primary"),s=e.label?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[R.labelSlot,$],testID:h?`${h}-label-${e.key}`:void 0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[R.labelPill,y.shadows.sm,{backgroundColor:y.colors.background.elevated,paddingHorizontal:y.spacing.sm,paddingVertical:y.spacing.xs,borderRadius:y.radius.sm,..._corners.smoothCorners},f],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:y.colors.text.primary,fontSize:y.typography.fontSize.sm,fontWeight:y.typography.fontWeight.medium},_],numberOfLines:1,children:e.label})})}):null;return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{pointerEvents:k?"auto":"none",style:[R.secondaryRow,G,{position:"absolute",bottom:0,opacity:r,transform:[{translateY:n},{scale:i}]}],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>H(e),accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel,style:[R.fabBase,y.shadows.md,{width:U,height:U,borderRadius:U/2,..._corners.smoothCorners,backgroundColor:o},b],testID:h?`${h}-action-${e.key}`:void 0,children:({pressed:t})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[t?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:pressedTintFor(y,e.tone??"primary"),borderRadius:U/2,..._corners.smoothCorners}]}):null,_react.default.isValidElement(e.icon)?e.icon:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:a},children:String(e.icon??"")})]})}),s]},e.key)}),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:M,accessibilityRole:"button",accessibilityLabel:u,accessibilityState:{expanded:k},style:[R.fabBase,y.shadows.lg,{width:v.diameter,height:v.diameter,borderRadius:v.diameter/2,..._corners.smoothCorners,backgroundColor:y.colors.primary}],testID:h?`${h}-primary`:void 0,children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[e?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:_color.ACCENT_PRESSED_TINT,borderRadius:v.diameter/2,..._corners.smoothCorners}]}):null,(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:r?void 0:{transform:[{rotate:Q}]},children:k&&r?r:t})]})})]})]})};exports.FloatingActionButtonGroup=FloatingActionButtonGroup;const buildGroupStyles=e=>_reactNative.StyleSheet.create({fabBase:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},secondaryRow:{flexDirection:"row",alignItems:"center"},labelSlot:{position:"absolute",top:0,bottom:0,justifyContent:"center"},labelPill:{alignSelf:"auto"}});var _default=exports.default=FloatingActionButton;