@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/module/components/FloatingActionButton/FloatingActionButton.js

@@ -1,691 +1 @@
-"use strict";
-
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { createAnimatedValue, setNativeValue, useTheme } from "../../theme/index.js";
-import { ACCENT_PRESSED_TINT } from "../../utils/color.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
-
-// 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.
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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 : ACCENT_PRESSED_TINT;
-const toneForeground = (theme, tone) => {
-  if (tone === 'neutral') {
-    return theme.colors.text.primary;
-  }
-  return theme.colors.text.inverse;
-};
-const FloatingActionButton = /*#__PURE__*/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 = useTheme();
-  const insets = useSafeAreaInsets();
-  const sizeStyles = sizeMap[size];
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const {
-    scale,
-    pressIn,
-    pressOut
-  } = usePressAnimation({
-    enabled: !disabled
-  });
-  const fabTokens = theme.components.floatingActionButton;
-  const edgeOffset = fabTokens?.edgeOffset ?? 24;
-  const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
-  const hideAnim = useRef(createAnimatedValue(0)).current;
-  useEffect(() => {
-    if (!hideOnScroll) {
-      setNativeValue(hideAnim, 0);
-      return;
-    }
-    const anim = Animated.timing(hideAnim, {
-      toValue: isScrolling ? 1 : 0,
-      duration: theme.motion.duration.normal,
-      easing: 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 = resolveHaptic(haptic, 'impactLight');
-    if (h) {
-      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 = 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__*/_jsx(Animated.View, {
-    style: [positionStyle, {
-      transform: [{
-        translateY: hideTranslateY
-      }, {
-        scale
-      }],
-      opacity: hideOpacity
-    }, containerStyle, style],
-    pointerEvents: hideOnScroll && isScrolling ? 'none' : 'auto',
-    children: /*#__PURE__*/_jsx(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,
-        ...smoothCorners
-      } : {
-        width: sizeStyles.diameter,
-        height: sizeStyles.diameter,
-        borderRadius: sizeStyles.diameter / 2,
-        ...smoothCorners
-      }, theme.shadows.lg, {
-        backgroundColor,
-        opacity: disabled ? 0.55 : 1
-      }],
-      children: ({
-        pressed
-      }) => /*#__PURE__*/_jsxs(_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.
-        _jsx(View, {
-          pointerEvents: "none",
-          testID: "fab-pressed",
-          style: [styles.pressedTint, {
-            backgroundColor: pressedTintFor(theme, tone),
-            borderRadius: sizeStyles.diameter / 2,
-            ...smoothCorners
-          }]
-        }) : null, renderedIcon, isExtended ? /*#__PURE__*/_jsx(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 => 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 = useTheme();
-  const insets = useSafeAreaInsets();
-  const sizeStyles = sizeMap[size];
-  const styles = 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] = 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 = useRef(createAnimatedValue(0)).current;
-  useEffect(() => {
-    if (!hideOnScroll) {
-      setNativeValue(hideAnim, 0);
-      return;
-    }
-    const anim = Animated.timing(hideAnim, {
-      toValue: isScrolling ? 1 : 0,
-      duration: theme.motion.duration.normal,
-      easing: 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;
-  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 = useRef(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 = useRef([]);
-  // Bump this when the underlying refs array is re-shaped so downstream effects
-  // and mapping reads see the new length.
-  const [itemAnimsVersion, setItemAnimsVersion] = 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
-  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 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
-  useEffect(() => {
-    const progressAnim = Animated.timing(progress, {
-      toValue: isOpen ? 1 : 0,
-      duration: theme.motion.duration.normal,
-      easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    });
-    progressAnim.start();
-    const animations = itemAnims.current.map(value => Animated.timing(value, {
-      toValue: isOpen ? 1 : 0,
-      duration: theme.motion.duration.normal,
-      easing: 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 = 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 = useCallback(next => {
-    const h = resolveHaptic(haptic, 'impactLight');
-    if (h) {
-      triggerHaptic(h);
-    }
-    if (!isControlled) {
-      setInternalOpen(next);
-    }
-    onOpenChange?.(next);
-  }, [isControlled, onOpenChange, haptic]);
-  const handlePrimaryPress = useCallback(() => {
-    setOpen(!isOpen);
-  }, [isOpen, setOpen]);
-  const handleActionPress = useCallback(action => {
-    if (haptic !== false) {
-      triggerHaptic('selection');
-    }
-    action.onPress();
-    // Close after action runs
-    if (!isControlled) {
-      setInternalOpen(false);
-    }
-    onOpenChange?.(false);
-  }, [isControlled, onOpenChange, haptic]);
-  const handleBackdropPress = useCallback(() => {
-    if (isOpen) {
-      setOpen(false);
-    }
-  }, [isOpen, setOpen]);
-  const positionStyle = 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 = 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 = 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__*/_jsxs(_Fragment, {
-    children: [isOpen ? /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: isOpen ? 'auto' : 'none',
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: theme.colors.background.overlay,
-        opacity: backdropOpacity
-      }],
-      children: /*#__PURE__*/_jsx(Pressable, {
-        style: StyleSheet.absoluteFill,
-        onPress: handleBackdropPress,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no",
-        testID: testID ? `${testID}-backdrop` : undefined
-      })
-    }) : null, /*#__PURE__*/_jsxs(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__*/_jsx(View, {
-          pointerEvents: "none",
-          style: [styles.labelSlot, labelInset],
-          testID: testID ? `${testID}-label-${action.key}` : undefined,
-          children: /*#__PURE__*/_jsx(View, {
-            style: [styles.labelPill, theme.shadows.sm, {
-              backgroundColor: theme.colors.background.elevated,
-              paddingHorizontal: theme.spacing.sm,
-              paddingVertical: theme.spacing.xs,
-              borderRadius: theme.radius.sm,
-              ...smoothCorners
-            }, labelPillStyle],
-            children: /*#__PURE__*/_jsx(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__*/_jsxs(Animated.View, {
-          pointerEvents: isOpen ? 'auto' : 'none',
-          style: [styles.secondaryRow, rowInset, {
-            position: 'absolute',
-            bottom: 0,
-            opacity: anim,
-            transform: [{
-              translateY
-            }, {
-              scale
-            }]
-          }],
-          children: [/*#__PURE__*/_jsx(Pressable, {
-            onPress: () => handleActionPress(action),
-            accessibilityRole: 'menuitem',
-            accessibilityLabel: action.accessibilityLabel,
-            style: [styles.fabBase, theme.shadows.md, {
-              width: secondaryDiameter,
-              height: secondaryDiameter,
-              borderRadius: secondaryDiameter / 2,
-              ...smoothCorners,
-              backgroundColor: itemBackground
-            }, secondaryActionStyle],
-            testID: testID ? `${testID}-action-${action.key}` : undefined,
-            children: ({
-              pressed
-            }) => /*#__PURE__*/_jsxs(_Fragment, {
-              children: [pressed ? /*#__PURE__*/_jsx(View, {
-                pointerEvents: "none",
-                testID: "fab-pressed",
-                style: [styles.pressedTint, {
-                  backgroundColor: pressedTintFor(theme, action.tone ?? 'primary'),
-                  borderRadius: secondaryDiameter / 2,
-                  ...smoothCorners
-                }]
-              }) : null, /*#__PURE__*/React.isValidElement(action.icon) ? action.icon : /*#__PURE__*/_jsx(Text, {
-                style: {
-                  color: itemForeground
-                },
-                children: String(action.icon ?? '')
-              })]
-            })
-          }), labelPill]
-        }, action.key);
-      }), /*#__PURE__*/_jsx(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,
-          ...smoothCorners,
-          backgroundColor: theme.colors.primary
-        }],
-        testID: testID ? `${testID}-primary` : undefined,
-        children: ({
-          pressed
-        }) => /*#__PURE__*/_jsxs(_Fragment, {
-          children: [pressed ? /*#__PURE__*/_jsx(View, {
-            pointerEvents: "none",
-            testID: "fab-pressed",
-            style: [styles.pressedTint, {
-              backgroundColor: ACCENT_PRESSED_TINT,
-              borderRadius: sizeStyles.diameter / 2,
-              ...smoothCorners
-            }]
-          }) : null, /*#__PURE__*/_jsx(Animated.View, {
-            style: primaryActiveIcon ? undefined : {
-              transform: [{
-                rotate: rotation
-              }]
-            },
-            children: isOpen && primaryActiveIcon ? primaryActiveIcon : primaryIcon
-          })]
-        })
-      })]
-    })]
-  });
-};
-const buildGroupStyles = _theme => 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'
-  }
-});
-export { FloatingActionButton, FloatingActionButtonGroup };
-export default FloatingActionButton;
-//# sourceMappingURL=FloatingActionButton.js.map
+import t,{forwardRef as e,useCallback as o,useEffect as n,useMemo as r,useRef as i,useState as s}from"react";import{Animated as a,Easing as l,Pressable as c,StyleSheet as d,Text as u,View as m}from"react-native";import{useSafeAreaInsets as p}from"react-native-safe-area-context";import{usePressAnimation as g}from"../../hooks/usePressAnimation.js";import{createAnimatedValue as b,setNativeValue as f,useTheme as y}from"../../theme/index.js";import{ACCENT_PRESSED_TINT as h}from"../../utils/color.js";import{smoothCorners as v}from"../../utils/corners.js";import{resolveHaptic as R,triggerHaptic as w}from"../../utils/hapticUtils.js";import{jsx as S,Fragment as I,jsxs as x}from"react/jsx-runtime";const z={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=(t,e)=>{switch(e){case"success":return t.colors.success;case"warning":return t.colors.warning;case"error":return t.colors.error;case"neutral":return t.colors.background.tertiary;default:return t.colors.primary}},pressedTintFor=(t,e)=>"neutral"===e?t.colors.surface.pressed:h,toneForeground=(t,e)=>{if("neutral"===e)return t.colors.text.primary;switch(e){case"success":return t.colors.onSuccess;case"warning":return t.colors.onWarning;case"error":return t.colors.onError;default:return t.colors.onPrimary}},C=e((t,e)=>{const{icon:o,onPress:s,label:d,size:h="md",tone:C="primary",position:D,bottomOffset:P,disabled:k=!1,hideOnScroll:L=!1,isScrolling:j=!1,accessibilityLabel:O,accessibilityHint:V,haptic:E,style:H,containerStyle:A,labelStyle:B,testID:F}=t,$=y(),N=p(),T=z[h],W=r(()=>buildStyles($),[$]),{scale:Y,pressIn:G,pressOut:M}=g({enabled:!k}),Q=$.components.floatingActionButton,U=Q?.edgeOffset??24,q=Q?.bottomOffset??24,J=i(b(0)).current;n(()=>{if(!L)return void f(J,0);const t=a.timing(J,{toValue:j?1:0,duration:$.motion.duration.normal,easing:l.bezier(...$.motion.easing.standard),useNativeDriver:!0});return t.start(),()=>t.stop()},[L,j,J,$.motion.duration.normal,$.motion.easing.standard]);const K=J.interpolate({inputRange:[0,1],outputRange:[0,T.diameter+(P??q)+N.bottom+U]}),X=J.interpolate({inputRange:[0,1],outputRange:[1,0]}),Z=o,_="string"==typeof d&&d.length>0,tt=k?$.colors.surface.disabled:toneBackground($,C),et=k?$.colors.text.disabled:toneForeground($,C),ot=r(()=>{if(!D)return null;const t=(P??q)+N.bottom;switch(D){case"bottomLeft":return{position:"absolute",bottom:t,left:U};case"bottomCenter":return{position:"absolute",bottom:t,alignSelf:"center"};default:return{position:"absolute",bottom:t,right:U}}},[D,P,N.bottom,q,U]);return S(a.View,{style:[ot,{transform:[{translateY:K},{scale:Y}],opacity:X},A,H],pointerEvents:L&&j?"none":"auto",children:S(c,{ref:e,onPress:t=>{if(k)return;const e=R(E,"impactLight");e&&w(e),s()},onPressIn:G,onPressOut:M,disabled:k,accessibilityRole:"button",accessibilityLabel:O,accessibilityHint:V,accessibilityState:{disabled:k},testID:F,style:[W.base,_?{height:T.diameter,paddingHorizontal:T.labelPaddingHorizontal,borderRadius:T.diameter/2,...v}:{width:T.diameter,height:T.diameter,borderRadius:T.diameter/2,...v},$.shadows.lg,{backgroundColor:tt,opacity:k?.55:1}],children:({pressed:t})=>x(I,{children:[t&&!k?S(m,{pointerEvents:"none",testID:"fab-pressed",style:[W.pressedTint,{backgroundColor:pressedTintFor($,C),borderRadius:T.diameter/2,...v}]}):null,Z,_?S(u,{style:[W.label,{color:et,fontSize:T.fontSize,fontWeight:$.typography.fontWeight.semibold,marginLeft:$.spacing.sm},B],numberOfLines:1,children:d}):null]})})})});C.displayName="FloatingActionButton";const buildStyles=t=>d.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:g,primaryActiveIcon:C,actions:D,open:P,defaultOpen:k=!1,onOpenChange:L,position:j="bottomRight",bottomOffset:O,size:V="md",accessibilityLabel:E="Quick actions",haptic:H,hideOnScroll:A=!1,isScrolling:B=!1,containerStyle:F,secondaryActionStyle:$,labelPillStyle:N,labelStyle:T,testID:W}=e,Y=y(),G=p(),M=z[V],Q=r(()=>buildGroupStyles(Y),[Y]),U=Y.components.floatingActionButton,q=U?.edgeOffset??24,J=U?.bottomOffset??24,K=U?.secondaryGap??16,X=U?.staggerMs??50,Z="boolean"==typeof P,[_,tt]=s(k),et=Z?P:_,ot=i(b(0)).current;n(()=>{if(!A)return void f(ot,0);const t=a.timing(ot,{toValue:B?1:0,duration:Y.motion.duration.normal,easing:l.bezier(...Y.motion.easing.standard),useNativeDriver:!0});return t.start(),()=>t.stop()},[A,B,ot,Y.motion.duration.normal,Y.motion.easing.standard]);const nt=A&&B;n(()=>{nt&&et&&(Z||tt(!1),L?.(!1))},[nt,et,Z,L]);const rt=ot.interpolate({inputRange:[0,1],outputRange:[0,M.diameter+(O??J)+G.bottom+q]}),it=ot.interpolate({inputRange:[0,1],outputRange:[1,0]}),st=i(b(et?1:0)).current,at=i([]),[lt,ct]=s(0);n(()=>{const t=at.current;if(t.length!==D.length){if(t.length<D.length){const e=t.slice();for(let o=t.length;o<D.length;o+=1)e.push(new a.Value(et?1:0));at.current=e}else at.current=t.slice(0,D.length);ct(t=>t+1)}},[D.length]),n(()=>{const t=a.timing(st,{toValue:et?1:0,duration:Y.motion.duration.normal,easing:l.bezier(...Y.motion.easing.standard),useNativeDriver:!0});t.start();const e=at.current.map(t=>a.timing(t,{toValue:et?1:0,duration:Y.motion.duration.normal,easing:l.bezier(...Y.motion.easing.standard),useNativeDriver:!0})),o=et?e:[...e].reverse(),n=a.stagger(X,o);return n.start(),()=>{t.stop(),n.stop()}},[et,st,Y.motion.duration.normal,Y.motion.easing.standard,D.length,lt,X]);const dt=o(t=>{const e=R(H,"impactLight");e&&w(e),Z||tt(t),L?.(t)},[Z,L,H]),ut=o(()=>{dt(!et)},[et,dt]),mt=o(t=>{!1!==H&&w("selection"),t.onPress(),Z||tt(!1),L?.(!1)},[Z,L,H]),pt=o(()=>{et&&dt(!1)},[et,dt]),gt=r(()=>{const t=(O??J)+G.bottom;switch(j){case"bottomLeft":return{position:"absolute",bottom:t,left:q,alignItems:"flex-start"};case"bottomCenter":return{position:"absolute",bottom:t,alignSelf:"center",alignItems:"center"};default:return{position:"absolute",bottom:t,right:q,alignItems:"flex-end"}}},[j,O,G.bottom,J,q]),slotOffset=t=>-(M.diameter+K)*(t+1),bt=r(()=>{switch(j){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"}}},[j]),ft=.78*M.diameter,yt=r(()=>{const t=ft+Y.spacing.sm;switch(j){case"bottomLeft":return{left:t,alignItems:"flex-start"};case"bottomCenter":return{right:M.diameter/2+ft/2+Y.spacing.sm,alignItems:"flex-end"};default:return{right:t,alignItems:"flex-end"}}},[j,ft,M.diameter,Y.spacing.sm]),ht=st.interpolate({inputRange:[0,1],outputRange:[0,.4]}),vt=st.interpolate({inputRange:[0,1],outputRange:["0deg","45deg"]});return x(I,{children:[et?S(a.View,{pointerEvents:et?"auto":"none",style:[d.absoluteFill,{backgroundColor:Y.colors.background.overlay,opacity:ht}],children:S(c,{style:d.absoluteFill,onPress:pt,accessibilityElementsHidden:!0,importantForAccessibility:"no",testID:W?`${W}-backdrop`:void 0})}):null,x(a.View,{pointerEvents:nt?"none":"box-none",style:[gt,{transform:[{translateY:rt}],opacity:it},F],accessibilityRole:"menu",testID:W,children:[D.map((e,o)=>{const n=at.current[o];if(!n)return null;const r=n.interpolate({inputRange:[0,1],outputRange:[0,slotOffset(o)]}),i=n.interpolate({inputRange:[0,1],outputRange:[.6,1]}),s=toneBackground(Y,e.tone??"primary"),l=toneForeground(Y,e.tone??"primary"),d=e.label?S(m,{pointerEvents:"none",style:[Q.labelSlot,yt],testID:W?`${W}-label-${e.key}`:void 0,children:S(m,{style:[Q.labelPill,Y.shadows.sm,{backgroundColor:Y.colors.background.elevated,paddingHorizontal:Y.spacing.sm,paddingVertical:Y.spacing.xs,borderRadius:Y.radius.sm,...v},N],children:S(u,{style:[{color:Y.colors.text.primary,fontSize:Y.typography.fontSize.sm,fontWeight:Y.typography.fontWeight.medium},T],numberOfLines:1,children:e.label})})}):null;return x(a.View,{pointerEvents:et?"auto":"none",style:[Q.secondaryRow,bt,{position:"absolute",bottom:0,opacity:n,transform:[{translateY:r},{scale:i}]}],children:[S(c,{onPress:()=>mt(e),accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel,style:[Q.fabBase,Y.shadows.md,{width:ft,height:ft,borderRadius:ft/2,...v,backgroundColor:s},$],testID:W?`${W}-action-${e.key}`:void 0,children:({pressed:o})=>x(I,{children:[o?S(m,{pointerEvents:"none",testID:"fab-pressed",style:[Q.pressedTint,{backgroundColor:pressedTintFor(Y,e.tone??"primary"),borderRadius:ft/2,...v}]}):null,t.isValidElement(e.icon)?e.icon:S(u,{style:{color:l},children:String(e.icon??"")})]})}),d]},e.key)}),S(c,{onPress:ut,accessibilityRole:"button",accessibilityLabel:E,accessibilityState:{expanded:et},style:[Q.fabBase,Y.shadows.lg,{width:M.diameter,height:M.diameter,borderRadius:M.diameter/2,...v,backgroundColor:Y.colors.primary}],testID:W?`${W}-primary`:void 0,children:({pressed:t})=>x(I,{children:[t?S(m,{pointerEvents:"none",testID:"fab-pressed",style:[Q.pressedTint,{backgroundColor:h,borderRadius:M.diameter/2,...v}]}):null,S(a.View,{style:C?void 0:{transform:[{rotate:vt}]},children:et&&C?C:g})]})})]})]})},buildGroupStyles=t=>d.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"}});export{C as FloatingActionButton,FloatingActionButtonGroup};export default C;