pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/fab/Fab.variants.js

@@ -0,0 +1,346 @@
+"use strict";
+
+/**
+ * Fab's style + behaviour resolution — same split as Button/Card:
+ *  - STRUCTURE (diameter/padding/radius) lives in the `createThemedVariants` resolvers below, static
+ *    per (brand, mode), registered once via `StyleSheet.create`.
+ *  - COLOUR is tone-driven and resolved from the theme's ROLE colours by `resolveFabTone` — the same
+ *    three-tone mapping `resolveButtonTone` uses for Button's `solid` variant (a Fab IS a solid
+ *    circular/pill button; there is no outline/ghost/link shape here). Duplicated, not imported —
+ *    modules stay isolated, the same status `Toast.variants.ts` documents for its own duplicated
+ *    `MIN_TOUCH_TARGET`.
+ *  - ACCESSIBILITY prop derivation is `resolveFabAccessibility`, the same disabled/loading→busy,
+ *    gated-onPress contract `resolveButtonAccessibility` establishes.
+ *  - POSITIONING (`resolveFabAnchorStyle`, `resolveFabBottomInset`, `resolveFabHorizontalInset`) is
+ *    pure so the safe-area-less approximation is unit-testable without rendering React Native — the
+ *    same idiom `Drawer.variants.ts`'s `resolveDrawerBottomInset` and `BottomNav.variants.ts`'s
+ *    `resolveBottomNavBottomInset` already establish (see MODULE.md "Known gaps" for why
+ *    `react-native-safe-area-context` isn't imported here either — it is an optional peer, not a
+ *    real dependency of this package).
+ *
+ * Free of React, lucide, and any Pressable/Animated import, so the WCAG + behaviour tests import it
+ * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+/** Both sizes already clear this floor directly (48dp / 56dp) — no `hitSlop` needed, unlike Button's
+ *  shorter sizes (WCAG 2.5.5 AAA / Apple HIG minimum). */
+export const MIN_TOUCH_TARGET = 44;
+export const FAB_SIZES = {
+  md: {
+    diameter: 48,
+    iconSize: 20,
+    fontSize: 14,
+    extendedPaddingHorizontal: 16
+  },
+  lg: {
+    diameter: 56,
+    iconSize: 24,
+    fontSize: 16,
+    extendedPaddingHorizontal: 20
+  }
+};
+
+/** A FabGroup mini action reads at one fixed size, independent of the trigger's own `size` — the
+ *  same "an action list's row size isn't a caller-facing choice" precedent `Menu`'s row size sets. */
+export const FAB_ACTION_SIZE = MIN_TOUCH_TARGET;
+export const FAB_ACTION_ICON_SIZE = 18;
+/**
+ * Maps `tone` onto the theme's role colours — identical to `resolveButtonTone`'s `solid` branch (a
+ * Fab has no outline/ghost/link shape, so only `fill`/`onFill` are needed). The whole reason the
+ * prop is a closed union and not `color?: string`: every colour a Fab can show is one of these role
+ * lookups, so it inverts light↔dark for free and can never be an off-palette value an app invented.
+ */
+export function resolveFabTone(colors, tone) {
+  switch (tone) {
+    case "accent":
+      return {
+        fill: colors.accent.solid,
+        onFill: colors.accent.onSolid
+      };
+    case "danger":
+      return {
+        fill: colors.status.danger.solid,
+        onFill: colors.status.danger.onSolid
+      };
+    case "neutral":
+      // Monochrome high-emphasis — the identical substitution Button's own "neutral" tone documents.
+      return {
+        fill: colors.fg.default,
+        onFill: colors.bg.canvas
+      };
+  }
+}
+/**
+ * Same disabled/loading→busy, gated-onPress derivation as `resolveButtonAccessibility` (WCAG 1.4.1
+ * busy announcement / 4.1.2 name-role-value), kept pure so it's testable without rendering RN.
+ *
+ * FLAT `aria-*`, not `accessibilityState={{…}}`: react-native-web 0.21 forwards a purely flat
+ * vocabulary and drops the object entirely, so the web build announced the role with no state at
+ * all. RN's own `Pressable` merges the flat props back INTO `accessibilityState`, so one flat form
+ * is correct on both platforms — the same migration `resolveCheckboxAccessibility` documents.
+ */
+export function resolveFabAccessibility(input) {
+  const isDisabled = input.disabled === true;
+  const isLoading = input.loading === true;
+  const blocked = isDisabled || isLoading;
+  return {
+    accessibilityRole: "button",
+    accessibilityLabel: input.accessibilityLabel ?? input.label,
+    "aria-disabled": blocked,
+    "aria-busy": isLoading,
+    disabled: blocked,
+    onPress: blocked ? undefined : input.onPress
+  };
+}
+
+/**
+ * iOS home-indicator approximation — same formula and value `Drawer.variants.ts`'s
+ * `DRAWER_IOS_HOME_INDICATOR_INSET` and `BottomNav.variants.ts`'s `BOTTOM_NAV_IOS_HOME_INDICATOR_INSET`
+ * each carry independently. `react-native-safe-area-context` is listed as an optional peer in
+ * `package.json`, but — as both of those modules' own MODULE.md already record — it is not actually
+ * installed as a dependency of THIS package, so importing `useSafeAreaInsets` here would resolve in
+ * this repo's dev sandbox and then fail in a consumer app that hasn't separately installed it. Carried
+ * a third time here rather than imported from a sibling module's `.variants.ts` — cross-module
+ * internals reach-in isn't a dependency this library's modules take on each other.
+ */
+export const FAB_IOS_HOME_INDICATOR_INSET = 20;
+
+/** Adds the static iOS home-indicator approximation, plus any caller-supplied `offset.bottom`, to a
+ *  base padding. Android's gesture/3-button nav already reserves its own space outside the app
+ *  window, so it gets no extra padding beyond the caller's own `offset`. */
+export function resolveFabBottomInset(basePadding, platformOS, extra = 0) {
+  const safeArea = platformOS === "ios" ? FAB_IOS_HOME_INDICATOR_INSET : 0;
+  return basePadding + safeArea + extra;
+}
+
+/** Adds any caller-supplied `offset.horizontal` to a base padding — no platform-specific inset on
+ *  this axis (the home-indicator approximation above is bottom-edge only). */
+export function resolveFabHorizontalInset(basePadding, extra = 0) {
+  return basePadding + extra;
+}
+/**
+ * The wrapper Fab/FabGroup render around their own control. `bottom-center` spans the full width
+ * (`left: 0, right: 0`) and centers via `alignItems` rather than a measured `translateX` — the same
+ * idiom `Toast.variants.ts`'s `toastOverlayStructure` already uses for its own centered card, which
+ * works regardless of the (possibly caller-length-driven) rendered width of an extended Fab.
+ * `bottom-right`/`bottom-left` edge-anchor directly; their `alignItems` also right/left-aligns
+ * FabGroup's mini-action rows (which vary in width) flush against the trigger's own edge. `static`
+ * renders no absolute positioning at all — the caller places it exactly like any other in-flow
+ * element, and gets no `zIndex` either (nothing to float above).
+ */
+export function resolveFabAnchorStyle(input) {
+  if (input.position === "static") return {
+    position: "relative"
+  };
+  const base = {
+    position: "absolute",
+    bottom: input.bottomInset,
+    zIndex: input.zIndex
+  };
+  switch (input.position) {
+    case "bottom-right":
+      return {
+        ...base,
+        right: input.horizontalInset,
+        alignItems: "flex-end"
+      };
+    case "bottom-left":
+      return {
+        ...base,
+        left: input.horizontalInset,
+        alignItems: "flex-start"
+      };
+    case "bottom-center":
+      return {
+        ...base,
+        left: 0,
+        right: 0,
+        alignItems: "center"
+      };
+  }
+}
+
+/** Whether a FabGroup action row reads label-then-icon or icon-then-label. The label always renders
+ *  toward screen CENTER, away from the edge the group is anchored to, so it can never clip off-screen
+ *  on a narrow device — `bottom-right`/`bottom-center`/`static` all read label-then-icon (nothing to
+ *  clip on the left); only `bottom-left` flips. */
+export function resolveFabGroupActionDirection(position) {
+  return position === "bottom-left" ? "row-reverse" : "row";
+}
+
+/** The mini-action stack's own cross-axis alignment — matches `resolveFabAnchorStyle`'s edge for the
+ *  floating positions; `static` defaults to the same trailing edge as `bottom-right` (an arbitrary
+ *  but documented default — see MODULE.md "Design decisions"), since a `static` group's actions have
+ *  no anchor edge of their own to read. */
+export function resolveFabGroupStackAlign(position) {
+  switch (position) {
+    case "bottom-left":
+      return "flex-start";
+    case "bottom-center":
+      return "center";
+    case "bottom-right":
+    case "static":
+      return "flex-end";
+  }
+}
+
+/** The speed-dial trigger's accessible name: the caller's own override, else "Open"/"Close actions
+ *  menu" swapping with `expanded` — the same fixed-default-with-override idiom Toast's close button
+ *  uses (`accessibilityLabel="Dismiss notification"`), reflecting the disclosure action itself since
+ *  the trigger has no visible label of its own to fall back to. */
+export function resolveFabGroupTriggerAccessibilityLabel(expanded, override) {
+  if (override !== undefined) return override;
+  return expanded ? "Close actions menu" : "Open actions menu";
+}
+
+/** Longest slice of the shared progress value the stagger may consume — the last row still gets
+ *  half the run, so a long action list never crawls. */
+const FAB_GROUP_STAGGER_SPAN = 0.5;
+const FAB_GROUP_STAGGER_STEP = 0.15;
+
+/**
+ * The slice of the speed-dial's single `progress` value one action row reveals over. Staggering by
+ * interpolation window rather than per-row animations costs no extra timers or Animated values, and
+ * reverses correctly on close. `staggered` is false whenever the device tier can't afford decorative
+ * motion, which collapses every row onto the same [0, 1] window.
+ */
+export function resolveFabGroupActionWindow(index, count, staggered) {
+  const step = staggered ? Math.min(FAB_GROUP_STAGGER_STEP, FAB_GROUP_STAGGER_SPAN / Math.max(count - 1, 1)) : 0;
+  const start = step * index;
+  return [start, start + (1 - step * Math.max(count - 1, 0))];
+}
+
+/** The focus ring sits a small gap OUTSIDE the control, on the canvas, because `border.focus` is the
+ *  role token proven ≥ 3:1 against the canvas (WCAG 2.4.11) — drawn over a solid fill it could fail. */
+export const FAB_FOCUS_RING_WIDTH = 2;
+export const FAB_FOCUS_RING_GAP = 2;
+/** The offset ring `Fab` and `FabGroup`'s trigger both draw on focus — one definition, since the two
+ *  are the same circular silhouette. Kept a pure function of the two role/scale values it needs, so
+ *  the ring geometry is unit-testable without rendering React Native. */
+export function resolveFabFocusRingStyle(borderColor, borderRadius) {
+  const offset = -(FAB_FOCUS_RING_GAP + FAB_FOCUS_RING_WIDTH);
+  return {
+    position: "absolute",
+    top: offset,
+    left: offset,
+    right: offset,
+    bottom: offset,
+    borderWidth: FAB_FOCUS_RING_WIDTH,
+    borderColor,
+    borderRadius
+  };
+}
+
+/** The dismiss scrim behind an expanded FabGroup — a design constant, not a role token: decorative,
+ *  same status `BACKDROP_SCRIM` (Menu/Select) and `DRAWER_BACKDROP` already have. */
+export const FAB_GROUP_SCRIM = "#00000080";
+
+/** Structural circle — the icon-only shape. Colour (fill) is tone-driven, applied inline over this. */
+export const fabCircleStructure = createThemedVariants(theme => ({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.full
+  },
+  variants: {
+    size: {
+      md: {
+        width: FAB_SIZES.md.diameter,
+        height: FAB_SIZES.md.diameter
+      },
+      lg: {
+        width: FAB_SIZES.lg.diameter,
+        height: FAB_SIZES.lg.diameter
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+}));
+
+/** Structural pill — the extended (icon + label) shape. Width hugs its content. */
+export const fabExtendedStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.full,
+    columnGap: theme.space[2]
+  },
+  variants: {
+    size: {
+      md: {
+        height: FAB_SIZES.md.diameter,
+        paddingHorizontal: FAB_SIZES.md.extendedPaddingHorizontal
+      },
+      lg: {
+        height: FAB_SIZES.lg.diameter,
+        paddingHorizontal: FAB_SIZES.lg.extendedPaddingHorizontal
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+}));
+
+/** The column of mini-action rows above the trigger. `align` mirrors `resolveFabGroupStackAlign` so
+ *  rows size to their own natural width (never stretched to the widest row) and align flush to the
+ *  correct edge — see MODULE.md "Design decisions" for the flexbox reasoning. */
+export const fabGroupActionsStackStructure = createThemedVariants(theme => ({
+  base: {
+    rowGap: theme.space[3],
+    marginBottom: theme.space[4]
+  },
+  variants: {
+    align: {
+      "flex-end": {
+        alignItems: "flex-end"
+      },
+      "flex-start": {
+        alignItems: "flex-start"
+      },
+      center: {
+        alignItems: "center"
+      }
+    }
+  },
+  defaultVariants: {
+    align: "flex-end"
+  }
+}));
+
+/** One FabGroup mini-action row: label chip + icon circle, laid out by `resolveFabGroupActionDirection`. */
+export const fabGroupActionRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: FAB_ACTION_SIZE,
+    columnGap: theme.space[2]
+  }
+}));
+
+/** The mini action's own circular icon backdrop. */
+export const fabGroupActionCircleStructure = createThemedVariants(theme => ({
+  base: {
+    width: FAB_ACTION_SIZE,
+    height: FAB_ACTION_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.full
+  }
+}));
+
+/** The mini action's label chip — a small elevated surface, never the action's own tone fill: labels
+ *  are read against one constant neutral surface regardless of the action's tone, the same
+ *  "selection/emphasis isn't conveyed by a background swap" reasoning `Select`'s row fill documents. */
+export const fabGroupActionLabelStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.base,
+    paddingHorizontal: theme.space[3],
+    paddingVertical: theme.space[2]
+  }
+}));
+//# sourceMappingURL=Fab.variants.js.map

package/lib/module/modules/fab/FabGroup.js

@@ -0,0 +1,334 @@
+"use strict";
+
+/**
+ * FabGroup — a speed-dial: a Fab-shaped trigger that expands into a vertical stack of labeled mini
+ * actions above itself, behind a dismiss scrim. Deliberately NOT React Native's own `<Modal>` (unlike
+ * Menu/Select/Drawer) — a speed dial must stay visually anchored exactly where its own trigger sits
+ * on screen, and RN's `<Modal>` can only present a new, unrelated native surface. The scrim and the
+ * trigger+actions anchor are declared as SIBLINGS at this component's own root (no wrapping node of
+ * its own), so both resolve their `position: "absolute"` against the SAME nearest positioned ancestor
+ * — ordinarily the screen's own root container — the scrim covering it edge-to-edge while the anchor
+ * still hugs its own corner/edge. Declaring the scrim first and the anchor second puts the anchor
+ * visibly on top with no `zIndex` needed between the two, the same source-order idiom `Menu.tsx`'s
+ * own backdrop-then-sheet pair already relies on.
+ *
+ * Not being a `<Modal>` costs the one thing a Modal gives for free, though: RN's `<Modal>` presents
+ * its own native surface, so what it covers leaves the accessibility tree by construction. Nothing
+ * does that here, so the anchor declares `accessibilityViewIsModal` (+ `onAccessibilityEscape`) for
+ * itself while the scrim is mounted — otherwise the screen the scrim covers stays swipeable.
+ *
+ * The expand/collapse lifecycle mirrors `Drawer.tsx`'s exactly: `mounted` stays true through the exit
+ * animation (driven by a `useEffect` reacting to the resolved `expanded` value, not to who changed
+ * it) so the fade/slide can actually play before the tree unmounts, using the same plain-`setTimeout`
+ * determinism fix `Drawer`'s own top comment explains (an `Animated.timing` completion callback rides
+ * `requestAnimationFrame`, which doesn't resolve on a predictable jest-fake-timer tick). Driving the
+ * animation from an effect on `expanded` — rather than only inside the trigger's own press handler —
+ * is what makes a CONTROLLED caller flipping `open` externally (not via this trigger) animate too.
+ *
+ * Uncontrolled by default (`open`/`onOpenChange` both omitted → internal state); controlled the
+ * instant a caller passes `open`, the conventional React controlled/uncontrolled split.
+ */
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
+import { Icon } from "../../core/icon/index.js";
+import { useAnimatedValue, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { fabCircleStructure, FAB_ACTION_ICON_SIZE, fabGroupActionCircleStructure, fabGroupActionLabelStructure, fabGroupActionRowStructure, fabGroupActionsStackStructure, FAB_GROUP_SCRIM, FAB_SIZES, resolveFabAccessibility, resolveFabAnchorStyle, resolveFabBottomInset, resolveFabFocusRingStyle, resolveFabGroupActionDirection, resolveFabGroupActionWindow, resolveFabGroupStackAlign, resolveFabGroupTriggerAccessibilityLabel, resolveFabHorizontalInset, resolveFabTone } from "./Fab.variants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const ICON_STROKE = 2;
+const ACTION_ICON_STROKE = 2;
+const DEFAULT_ICON = "plus";
+const styles = StyleSheet.create({
+  dimmed: {
+    opacity: 0.5
+  },
+  // The trigger is declared FIRST so Tab reaches it before the actions it opened, and action 0 is
+  // declared first so Tab walks outward from the trigger. `column-reverse` on both restores the
+  // painted layout: trigger at the bottom, action 0 the row just above it.
+  anchorFlow: {
+    flexDirection: "column-reverse"
+  },
+  actionsFlow: {
+    flexDirection: "column-reverse"
+  }
+});
+function FabGroupActionRowImpl({
+  action,
+  fallbackTone,
+  direction,
+  progress,
+  window,
+  onSelect,
+  testID
+}) {
+  const theme = useTheme();
+  const motion = useMotion();
+  const pressMotion = usePressMotion();
+  const colors = resolveFabTone(theme.colors, action.tone ?? fallbackTone);
+  const handlePress = useCallback(() => onSelect(action), [onSelect, action]);
+  const [start, end] = window;
+  const revealOpacity = useMemo(() => progress.interpolate({
+    inputRange: [start, end],
+    outputRange: [0, 1],
+    extrapolate: "clamp"
+  }), [progress, start, end]);
+  const translateY = useMemo(() => progress.interpolate({
+    inputRange: [start, end],
+    outputRange: [motion.transform.offsetY, 0],
+    extrapolate: "clamp"
+  }), [progress, start, end, motion.transform.offsetY]);
+  const pressOpacity = pressMotion.style.opacity;
+  const pressScale = pressMotion.style.transform[0].scale;
+  const opacity = useMemo(() => Animated.multiply(revealOpacity, pressOpacity), [revealOpacity, pressOpacity]);
+  const transform = useMemo(() => [{
+    translateY
+  }, {
+    scale: pressScale
+  }], [translateY, pressScale]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: action.label,
+    onPress: handlePress,
+    onPressIn: pressMotion.onPressIn,
+    onPressOut: pressMotion.onPressOut,
+    style: [fabGroupActionRowStructure(theme), {
+      flexDirection: direction,
+      opacity,
+      transform
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [fabGroupActionLabelStructure(theme), {
+        backgroundColor: theme.colors.bg.raised
+      }, theme.elevation.sm],
+      children: /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+          fontSize: theme.fontSizes.sm,
+          color: theme.colors.fg.default
+        }],
+        children: action.label
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [fabGroupActionCircleStructure(theme), {
+        backgroundColor: colors.fill
+      }, theme.elevation.md],
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: action.icon,
+        size: FAB_ACTION_ICON_SIZE,
+        color: colors.onFill,
+        strokeWidth: ACTION_ICON_STROKE
+      })
+    })]
+  });
+}
+const FabGroupActionRow = /*#__PURE__*/memo(FabGroupActionRowImpl);
+function FabGroupImpl({
+  actions,
+  icon = DEFAULT_ICON,
+  open,
+  onOpenChange,
+  tone = "accent",
+  size = "lg",
+  position = "bottom-right",
+  disabled = false,
+  accessibilityLabel,
+  offset,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const motion = useMotion();
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = open !== undefined;
+  const expanded = isControlled ? open : internalOpen;
+  const duration = motion.duration("normal");
+
+  // Kept mounted through the exit animation — see the file-level comment for why this can't just
+  // follow `expanded` directly.
+  const [mounted, setMounted] = useState(expanded);
+  const mountedRef = useRef(mounted);
+  mountedRef.current = mounted;
+  const progress = useAnimatedValue(expanded ? 1 : 0);
+  const running = useRef(null);
+  const unmountTimer = useRef(null);
+  useEffect(() => {
+    const clearUnmountTimer = () => {
+      if (unmountTimer.current !== null) {
+        clearTimeout(unmountTimer.current);
+        unmountTimer.current = null;
+      }
+    };
+    clearUnmountTimer();
+    running.current?.stop();
+    if (expanded) {
+      setMounted(true);
+      if (!motion.enabled || duration === 0) {
+        progress.setValue(1);
+        return;
+      }
+      running.current = motion.timing(progress, 1, {
+        easing: "decelerate"
+      });
+      running.current.start();
+      return clearUnmountTimer;
+    }
+    if (!mountedRef.current) return;
+    if (!motion.enabled || duration === 0) {
+      progress.setValue(0);
+      setMounted(false);
+      return;
+    }
+    running.current = motion.timing(progress, 0, {
+      easing: "accelerate"
+    });
+    running.current.start();
+    unmountTimer.current = setTimeout(() => {
+      unmountTimer.current = null;
+      setMounted(false);
+    }, duration);
+    return clearUnmountTimer;
+  }, [expanded, duration, motion, progress]);
+  useEffect(() => () => {
+    running.current?.stop();
+    if (unmountTimer.current !== null) clearTimeout(unmountTimer.current);
+  }, []);
+  const requestExpandedChange = useCallback(next => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isControlled, onOpenChange]);
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    requestExpandedChange(!expanded);
+  }, [disabled, expanded, requestExpandedChange]);
+  const closeGroup = useCallback(() => requestExpandedChange(false), [requestExpandedChange]);
+
+  // No <Modal> here (see the file header), so nothing else supplies these on web: Escape to collapse,
+  // Tab confined to trigger+actions while the scrim is up, and focus back on the trigger afterwards —
+  // including after an action runs, since `runAction` collapses the group.
+  const anchorRef = useRef(null);
+  useDismissOnEscape(mounted, closeGroup);
+  useFocusTrap(anchorRef, mounted);
+  const runAction = useCallback(action => {
+    closeGroup();
+    action.onPress();
+  }, [closeGroup]);
+  const spec = FAB_SIZES[size];
+  const triggerColors = resolveFabTone(theme.colors, tone);
+  const a11y = resolveFabAccessibility({
+    accessibilityLabel: resolveFabGroupTriggerAccessibilityLabel(expanded, accessibilityLabel),
+    disabled,
+    onPress: toggle
+  });
+  const bottomInset = resolveFabBottomInset(theme.space[4], Platform.OS, offset?.bottom ?? 0);
+  const horizontalInset = resolveFabHorizontalInset(theme.space[4], offset?.horizontal ?? 0);
+  const anchor = resolveFabAnchorStyle({
+    position,
+    bottomInset,
+    horizontalInset,
+    zIndex: theme.zIndices.overlay
+  });
+  const actionDirection = resolveFabGroupActionDirection(position);
+  const stackAlign = resolveFabGroupStackAlign(position);
+  const rotate = useMemo(() => progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "45deg"]
+  }), [progress]);
+  const triggerPress = usePressMotion(disabled);
+
+  // Keyboard / external-keyboard / assistive-tech focus, identical to `Fab`'s — the trigger is the
+  // same circular control, so the ring geometry is shared rather than re-derived.
+  const [focused, setFocused] = useState(false);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  const focusRingStyle = useMemo(() => resolveFabFocusRingStyle(theme.colors.border.focus, theme.radii.full), [theme.colors.border.focus, theme.radii.full]);
+  const rows = useMemo(() => actions.map((action, index) => ({
+    action,
+    index,
+    window: resolveFabGroupActionWindow(index, actions.length, motion.decorative)
+  })), [actions, motion.decorative]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [mounted && /*#__PURE__*/_jsx(Pressable, {
+      testID: testID ? `${testID}-scrim` : undefined,
+      accessible: false,
+      tabIndex: -1,
+      style: StyleSheet.absoluteFill,
+      onPress: closeGroup,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [StyleSheet.absoluteFill, {
+          backgroundColor: FAB_GROUP_SCRIM,
+          opacity: progress
+        }]
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      ref: anchorRef,
+      testID: testID ? `${testID}-anchor` : undefined,
+      style: [anchor, styles.anchorFlow, style]
+      // Modal exactly while the scrim is mounted, and on the anchor rather than the action stack
+      // so the trigger — the close affordance — stays inside the modal view with the actions.
+      // Both spellings: RN's View has no `aria-modal`, react-native-web has no
+      // `accessibilityViewIsModal`, and this node has to be modal on both.
+      ,
+      accessibilityViewIsModal: mounted,
+      "aria-modal": mounted,
+      onAccessibilityEscape: mounted ? closeGroup : undefined,
+      pointerEvents: "box-none",
+      children: [/*#__PURE__*/_jsxs(AnimatedPressable, {
+        testID: testID ? `${testID}-trigger` : undefined,
+        accessibilityRole: a11y.accessibilityRole,
+        accessibilityLabel: a11y.accessibilityLabel,
+        "aria-disabled": a11y["aria-disabled"],
+        "aria-expanded": expanded,
+        disabled: a11y.disabled,
+        onPress: a11y.onPress,
+        onPressIn: triggerPress.onPressIn,
+        onPressOut: triggerPress.onPressOut,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: [fabCircleStructure(theme, {
+          size
+        }), {
+          backgroundColor: triggerColors.fill,
+          opacity: triggerPress.style.opacity,
+          transform: triggerPress.style.transform
+        }, disabled && styles.dimmed, theme.elevation.lg],
+        children: [focused && /*#__PURE__*/_jsx(View, {
+          pointerEvents: "none",
+          testID: testID ? `${testID}-trigger-focus-ring` : undefined,
+          style: focusRingStyle
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: {
+            transform: [{
+              rotate
+            }]
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: icon,
+            size: spec.iconSize,
+            color: triggerColors.onFill,
+            strokeWidth: ICON_STROKE
+          })
+        })]
+      }), mounted && /*#__PURE__*/_jsx(View, {
+        style: [fabGroupActionsStackStructure(theme, {
+          align: stackAlign
+        }), styles.actionsFlow],
+        children: rows.map(row => /*#__PURE__*/_jsx(FabGroupActionRow, {
+          testID: testID ? `${testID}-action-${row.index}` : undefined,
+          action: row.action,
+          fallbackTone: tone,
+          direction: actionDirection,
+          progress: progress,
+          window: row.window,
+          onSelect: runAction
+        }, `${row.action.label}-${row.index}`))
+      })]
+    })]
+  });
+}
+export const FabGroup = /*#__PURE__*/memo(FabGroupImpl);
+//# sourceMappingURL=FabGroup.js.map