@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.90

package/dist/chunk-WRW4JBB4.js

@@ -0,0 +1,1309 @@
+import {
+  useAnchorRef
+} from "./chunk-734MFAX4.js";
+import {
+  containsElementOfType
+} from "./chunk-7J3M62W5.js";
+import {
+  useRotation
+} from "./chunk-3GFRSZYR.js";
+import {
+  useAnchoredPosition
+} from "./chunk-Z6FRP4EV.js";
+import {
+  Portal,
+  PortalContext
+} from "./chunk-2PMXMKS5.js";
+import {
+  anchoredEntering,
+  anchoredExiting,
+  overlayEntering,
+  overlayExiting
+} from "./chunk-64MXEVT3.js";
+import {
+  useMergedRef
+} from "./chunk-NCTOTTVW.js";
+import {
+  useControllableState
+} from "./chunk-F6W3JQ7K.js";
+import {
+  PressableFeedback
+} from "./chunk-XZ42OWKC.js";
+import {
+  usePressState
+} from "./chunk-423RQBOX.js";
+import {
+  Icon,
+  IconContext
+} from "./chunk-JN6IRT2M.js";
+import {
+  childrenToString
+} from "./chunk-WFZDAXDI.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-DKVXTMIJ.js";
+import {
+  createSlotContext
+} from "./chunk-TTZOIXKE.js";
+import {
+  useXAUITheme
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/fab/fab-discovery.tsx
+import { useCallback, useContext, useMemo, useState } from "react";
+import { I18nManager, useWindowDimensions } from "react-native";
+
+// src/utils/discovery.ts
+var INSET = 16;
+var TEXT_INSET = 24;
+var TARGET_GAP = 8;
+var MIN_WIDTH = 280;
+var MIN_HEIGHT = 140;
+var TOP_HALF = 0.55;
+var ESTIMATED_MESSAGE_HEIGHT = 180;
+function discoveryGeometry({
+  target,
+  window,
+  scale,
+  padding,
+  messageHeight
+}) {
+  const x = clamp(
+    target.x,
+    INSET,
+    Math.max(INSET, window.width - target.width - INSET)
+  );
+  const y = clamp(
+    target.y,
+    INSET,
+    Math.max(INSET, window.height - target.height - INSET)
+  );
+  const centreX = x + target.width / 2;
+  const centreY = y + target.height / 2;
+  const diameter = window.width * scale;
+  const radius = diameter / 2;
+  const haloSize = Math.max(target.width, target.height) + padding * 2;
+  const isBelow = centreY < window.height * TOP_HALF;
+  const pinned = isBelow ? { top: y + target.height + TARGET_GAP } : { bottom: window.height - (y - TARGET_GAP) };
+  const blockHeight = Math.max(MIN_HEIGHT, messageHeight ?? ESTIMATED_MESSAGE_HEIGHT);
+  const farY = isBelow ? (pinned.top ?? 0) + blockHeight : y - TARGET_GAP - blockHeight;
+  const dy = farY - centreY;
+  const halfChord = Math.abs(dy) < radius ? Math.sqrt(radius ** 2 - dy ** 2) : 0;
+  const isOnStartSide = centreX < window.width / 2;
+  const floor = Math.min(MIN_WIDTH, window.width - TEXT_INSET * 2);
+  const insideStart = Math.max(TEXT_INSET, centreX - halfChord + TEXT_INSET);
+  const insideEnd = Math.max(
+    TEXT_INSET,
+    window.width - (centreX + halfChord - TEXT_INSET)
+  );
+  const insideWidth = window.width - insideStart - insideEnd;
+  const setsFromEdge = insideWidth < floor;
+  return {
+    circle: {
+      size: diameter,
+      top: centreY - radius,
+      start: centreX - radius
+    },
+    halo: {
+      size: haloSize,
+      top: centreY - haloSize / 2,
+      start: centreX - haloSize / 2
+    },
+    target: { top: y, start: x, width: target.width, height: target.height },
+    message: {
+      ...pinned,
+      start: setsFromEdge ? isOnStartSide ? TEXT_INSET : window.width - TEXT_INSET - floor : insideStart,
+      width: setsFromEdge ? floor : insideWidth,
+      // As far as the block may grow before it leaves the disc — down to the disc's foot
+      // for a block that grows down, up to its crown for one that grows up. Past that a
+      // long description scrolls rather than running out of the curve.
+      maxHeight: Math.max(
+        MIN_HEIGHT,
+        isBelow ? centreY + radius - TEXT_INSET - (pinned.top ?? 0) : y - TARGET_GAP - (centreY - radius + TEXT_INSET)
+      ),
+      // The text hugs the side the target is on, so the two read as one thing.
+      align: isOnStartSide ? "start" : "end"
+    }
+  };
+}
+function clamp(value, low, high) {
+  return Math.min(Math.max(value, low), high);
+}
+
+// src/components/fab/fab-discovery.context.ts
+var [FabDiscoveryProvider, useFabDiscovery] = createSlotContext("FabDiscovery");
+
+// src/components/fab/fab-discovery.recipe.ts
+var SLOTS = [
+  "overlay",
+  "circle",
+  "halo",
+  "content",
+  "title",
+  "description",
+  "action"
+];
+var VARIANT_TOKENS = {
+  default: { bg: "accent", fg: "accentForeground" }
+};
+var HALO_WIDTH = 1;
+var HALO_OPACITY = 0.35;
+var DESCRIPTION_OPACITY = 0.86;
+var fabDiscoveryRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    overlay: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      start: 0,
+      end: 0,
+      backgroundColor: theme.colors.backdrop
+    },
+    // Every part is placed by `discoveryGeometry`, so all any of them carries here is what
+    // it is made of. The `top`, `start` and `size` arrive from the measurement.
+    circle: { position: "absolute" },
+    halo: {
+      position: "absolute",
+      borderWidth: theme.borderWidth.default * HALO_WIDTH,
+      opacity: HALO_OPACITY
+    },
+    content: { position: "absolute", gap: theme.spacing(2.5) },
+    title: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.bold,
+      fontSize: theme.fontSizes["2xl"],
+      lineHeight: theme.lineHeights["2xl"]
+    },
+    description: {
+      fontFamily: theme.fontFamilies.body,
+      fontSize: theme.fontSizes.md,
+      lineHeight: theme.lineHeights.md,
+      opacity: DESCRIPTION_OPACITY
+    },
+    action: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold,
+      fontSize: theme.fontSizes.sm,
+      lineHeight: theme.lineHeights.sm,
+      // Underlined rather than boxed: a button on the disc would be a second surface on a
+      // surface, and this is the one place in the library where a link is the right shape.
+      textDecorationLine: "underline"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * The disc takes the fill and everything drawn **on** it takes the contrast colour — the
+   * ring included, which is that colour at a third, so it reads as a lit edge round the
+   * target rather than as a second stroke.
+   */
+  paint: (_theme, colors) => ({
+    circle: { backgroundColor: colors.bg },
+    halo: { borderColor: colors.fg },
+    title: { color: colors.fg },
+    description: { color: colors.fg },
+    action: { color: colors.fg }
+  }),
+  // `variant` is named even though the table has one entry: without it the selection
+  // resolves to `undefined` and `paint` is handed no colours at all.
+  defaultVariants: { variant: "default" }
+});
+
+// src/components/fab/fab-discovery.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_SCALE = 1.65;
+var DEFAULT_PADDING = 14;
+function FabDiscovery({
+  children,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  color,
+  scale = DEFAULT_SCALE,
+  padding = DEFAULT_PADDING
+}) {
+  const theme = useXAUITheme();
+  const window = useWindowDimensions();
+  const origin = useContext(PortalContext)?.origin;
+  const [anchor, setAnchor] = useState(null);
+  const [messageHeight, setMessageHeightState] = useState();
+  const [isOpen, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const styles = fabDiscoveryRecipe.resolve({ theme });
+  const tint = color ? fabDiscoveryRecipe.tint({ theme, color }) : void 0;
+  const open = useCallback(() => setOpen(true), [setOpen]);
+  const close = useCallback(() => setOpen(false), [setOpen]);
+  const setMessageHeight = useCallback((height) => {
+    setMessageHeightState(
+      (previous) => previous === void 0 || Math.abs(previous - height) >= 1 ? height : previous
+    );
+  }, []);
+  const geometry = useMemo(() => {
+    if (anchor === null) return null;
+    const x = origin?.x ?? 0;
+    const y = origin?.y ?? 0;
+    return discoveryGeometry({
+      target: { ...anchor, x: anchor.x - x, y: anchor.y - y },
+      window: { width: window.width - x, height: window.height - y },
+      scale,
+      padding,
+      messageHeight
+    });
+  }, [
+    anchor,
+    origin?.x,
+    origin?.y,
+    window.width,
+    window.height,
+    scale,
+    padding,
+    messageHeight
+  ]);
+  const context = useMemo(
+    () => ({
+      overlayStyle: styles.overlay,
+      circleStyle: tint ? [styles.circle, tint.circle] : styles.circle,
+      haloStyle: tint ? [styles.halo, tint.halo] : styles.halo,
+      contentStyle: styles.content,
+      titleStyle: tint ? [styles.title, tint.title] : styles.title,
+      descriptionStyle: tint ? [styles.description, tint.description] : styles.description,
+      actionStyle: tint ? [styles.action, tint.action] : styles.action,
+      geometry,
+      setMessageHeight,
+      // The block hugs the side the target is on, and its lines have to follow it — see
+      // `textAlign` on the context. `I18nManager` because the geometry speaks in leading
+      // and trailing and `textAlign` only speaks in left and right.
+      textAlign: geometry?.message.align === "end" !== I18nManager.isRTL ? "right" : "left",
+      isOpen,
+      open,
+      close,
+      anchor,
+      setAnchor
+    }),
+    [styles, tint, geometry, setMessageHeight, isOpen, open, close, anchor]
+  );
+  return /* @__PURE__ */ jsx(FabDiscoveryProvider, { value: context, children });
+}
+FabDiscovery.displayName = "XAUI.FabDiscovery.Root";
+
+// src/components/fab/fab-discovery-action.tsx
+import { forwardRef, useCallback as useCallback2 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FabDiscoveryAction = forwardRef(
+  function FabDiscoveryAction2({
+    children,
+    closesOnPress = true,
+    asChild = false,
+    accessibilityRole = "button",
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const { actionStyle, close } = useFabDiscovery();
+    const [styleProps, rest] = useStyleProps(props);
+    const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+    const handlePress = useCallback2(
+      (event) => {
+        onPress?.(event);
+        if (closesOnPress) close();
+      },
+      [close, closesOnPress, onPress]
+    );
+    const text = childrenToString(children);
+    return /* @__PURE__ */ jsx2(
+      PressableFeedback,
+      {
+        ref,
+        isPressed,
+        asChild,
+        accessibilityRole,
+        ...rest,
+        style: [
+          styleProps,
+          typeof style === "function" ? style({ pressed: isPressed }) : style
+        ],
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children: text !== null ? /* @__PURE__ */ jsx2(Text, { style: actionStyle, children: text }) : children
+      }
+    );
+  }
+);
+FabDiscoveryAction.displayName = "XAUI.FabDiscovery.Action";
+
+// src/components/fab/fab-discovery-content.tsx
+import { forwardRef as forwardRef2, useCallback as useCallback3 } from "react";
+import Animated, { FadeIn, FadeOut, ZoomIn } from "react-native-reanimated";
+
+// src/components/fab/fab-discovery.style.ts
+import { StyleSheet } from "react-native";
+var DISC = 0;
+var TARGET = 2;
+var fabDiscoverySheet = StyleSheet.create({
+  disc: { zIndex: DISC },
+  target: { position: "absolute", zIndex: TARGET, elevation: TARGET },
+  /** The node left in the flow while the FAB is lifted: it holds the space, invisibly. */
+  placeholder: { opacity: 0 }
+});
+
+// src/components/fab/fab-discovery-content.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var DISC_DURATION = 260;
+var TEXT_DELAY = 120;
+var FabDiscoveryContent = forwardRef2(
+  function FabDiscoveryContent2({ children, style, onLayout, ...props }, ref) {
+    const context = useFabDiscovery();
+    const {
+      circleStyle,
+      haloStyle,
+      contentStyle,
+      geometry,
+      isOpen,
+      setMessageHeight
+    } = context;
+    const [styleProps, rest] = useStyleProps(props);
+    const handleLayout = useCallback3(
+      (event) => {
+        setMessageHeight(event.nativeEvent.layout.height);
+        onLayout?.(event);
+      },
+      [onLayout, setMessageHeight]
+    );
+    if (!isOpen || geometry === null) return null;
+    const { circle, halo, message } = geometry;
+    return /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsxs(FabDiscoveryProvider, { value: context, children: [
+      /* @__PURE__ */ jsx3(
+        Animated.View,
+        {
+          entering: ZoomIn.duration(DISC_DURATION),
+          exiting: FadeOut,
+          pointerEvents: "none",
+          style: [
+            circleStyle,
+            fabDiscoverySheet.disc,
+            {
+              width: circle.size,
+              height: circle.size,
+              borderRadius: circle.size / 2,
+              top: circle.top,
+              start: circle.start
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Animated.View,
+        {
+          entering: FadeIn.duration(DISC_DURATION),
+          exiting: FadeOut,
+          pointerEvents: "none",
+          style: [
+            haloStyle,
+            fabDiscoverySheet.disc,
+            {
+              width: halo.size,
+              height: halo.size,
+              borderRadius: halo.size / 2,
+              top: halo.top,
+              start: halo.start
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Animated.View,
+        {
+          ref,
+          entering: FadeIn.delay(TEXT_DELAY),
+          exiting: FadeOut,
+          pointerEvents: "box-none",
+          onLayout: handleLayout,
+          ...rest,
+          style: [
+            contentStyle,
+            fabDiscoverySheet.disc,
+            {
+              // One of the two, never both: pinned by the edge nearest the target, so a
+              // block above it grows upwards as the text runs long instead of down into
+              // the FAB. React Native ignores the one that is `undefined`.
+              top: message.top,
+              bottom: message.bottom,
+              start: message.start,
+              width: message.width,
+              maxHeight: message.maxHeight,
+              // The lines set from the side the target is on, so the words and the thing
+              // they describe read as one. R13: `flex-start` and `flex-end` are logical.
+              alignItems: message.align === "start" ? "flex-start" : "flex-end"
+            },
+            styleProps,
+            style
+          ],
+          children
+        }
+      )
+    ] }) });
+  }
+);
+FabDiscoveryContent.displayName = "XAUI.FabDiscovery.Content";
+
+// src/components/fab/fab-discovery-description.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { Text as Text2 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FabDiscoveryDescription = forwardRef3(function FabDiscoveryDescription2({ children, style, ...props }, ref) {
+  const { descriptionStyle, textAlign } = useFabDiscovery();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */ jsx4(
+    Text2,
+    {
+      ref,
+      ...rest,
+      style: [descriptionStyle, { textAlign }, styleProps, style],
+      children
+    }
+  );
+});
+FabDiscoveryDescription.displayName = "XAUI.FabDiscovery.Description";
+
+// src/components/fab/fab-discovery-overlay.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { Pressable } from "react-native";
+import Animated2 from "react-native-reanimated";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var AnimatedPressable = Animated2.createAnimatedComponent(Pressable);
+var FabDiscoveryOverlay = forwardRef4(
+  function FabDiscoveryOverlay2({ children, isDismissable = true, style, ...props }, ref) {
+    const context = useFabDiscovery();
+    const { overlayStyle, isOpen, close } = context;
+    const [styleProps, rest] = useStyleProps(props);
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx5(Portal, { children: /* @__PURE__ */ jsx5(FabDiscoveryProvider, { value: context, children: /* @__PURE__ */ jsx5(
+      AnimatedPressable,
+      {
+        ref,
+        entering: overlayEntering,
+        exiting: overlayExiting,
+        accessibilityRole: "none",
+        importantForAccessibility: "no",
+        onPress: isDismissable ? close : void 0,
+        ...rest,
+        style: [overlayStyle, styleProps, style],
+        children
+      }
+    ) }) });
+  }
+);
+FabDiscoveryOverlay.displayName = "XAUI.FabDiscovery.Overlay";
+
+// src/components/fab/fab-discovery-target.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { View as View3 } from "react-native";
+
+// src/components/fab/fab.tsx
+import { forwardRef as forwardRef6, useMemo as useMemo2 } from "react";
+import { StyleSheet as StyleSheet3 } from "react-native";
+
+// src/components/fab/fab.context.ts
+var [FabProvider, useFab] = createSlotContext("Fab");
+
+// src/components/fab/fab.recipe.ts
+var SLOTS2 = ["root", "label", "icon", "spinner"];
+var VARIANT_TOKENS2 = {
+  primary: { bg: "accent", fg: "accentForeground" },
+  secondary: { bg: "default", fg: "defaultForeground" },
+  tertiary: { fg: "foreground", border: "border" },
+  ghost: { fg: "foreground" },
+  success: { bg: "success", fg: "successForeground" },
+  "success-soft": { bg: "successSoft", fg: "success" },
+  warning: { bg: "warning", fg: "warningForeground" },
+  "warning-soft": { bg: "warningSoft", fg: "warning" },
+  danger: { bg: "danger", fg: "dangerForeground" },
+  "danger-soft": { bg: "dangerSoft", fg: "danger" }
+};
+var SIZES = {
+  sm: { side: 40, paddingHorizontal: 4, gap: 2, label: "sm", glyph: 18 },
+  md: { side: 56, paddingHorizontal: 5, gap: 2.5, label: "md", glyph: 24 },
+  lg: { side: 72, paddingHorizontal: 6, gap: 3, label: "lg", glyph: 28 }
+};
+function fabGlyph(size) {
+  return SIZES[size].glyph;
+}
+function ring(theme, size) {
+  return {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    borderWidth: theme.borderWidth.default * 2,
+    borderTopColor: "transparent"
+  };
+}
+function sizeAxis(step) {
+  return (theme) => ({
+    // A fixed side both ways, which is what makes it round. An extended one keeps the
+    // height and gives up the width — the compound below is where that happens.
+    root: {
+      width: step.side,
+      height: step.side,
+      gap: theme.spacing(step.gap)
+    },
+    label: {
+      fontSize: theme.fontSizes[step.label],
+      lineHeight: theme.lineHeights[step.label]
+    },
+    spinner: ring(theme, step.glyph)
+  });
+}
+var fabRecipe = createRecipe({
+  slots: SLOTS2,
+  base: (theme) => ({
+    root: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      // It hugs its content rather than filling its parent, which is where a FAB parts
+      // company with a `Button`: a button in a column stretching to the column's width is
+      // RN's own behaviour and the right one, and a full-width FAB is a button. The legacy
+      // said the same thing in the same line.
+      alignSelf: "flex-start",
+      borderCurve: "continuous",
+      // At rest, and that is the difference from a button: a FAB floats over the content it
+      // acts on, and a shadow is what says so before it is touched.
+      ...theme.shadows.overlay
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium
+    }
+  }),
+  variantTokens: VARIANT_TOKENS2,
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    label: { color: colors.fg },
+    // A slot read as a value rather than applied: `Icon` and `Spinner` take a colour as a
+    // prop, and this is where the recipe names it.
+    icon: { color: colors.fg },
+    spinner: { borderColor: colors.fg }
+  }),
+  variants: {
+    size: { sm: sizeAxis(SIZES.sm), md: sizeAxis(SIZES.md), lg: sizeAxis(SIZES.lg) },
+    radius: radiusAxis("root"),
+    /**
+     * Wider than it is tall. The width is given up — `auto`, so the box is its content plus
+     * its inset — and the height stays the size's own, which is what keeps an extended FAB
+     * and a round one on the same line at the same height.
+     */
+    extended: {
+      true: () => ({ root: { width: "auto" } })
+    }
+  },
+  compoundVariants: [
+    // The inset belongs to the pair, not to either axis: a round FAB has none at all — its
+    // mark is centred in a fixed square — and an extended one's grows with the size.
+    ...["sm", "md", "lg"].map((size) => ({
+      when: { size, extended: "true" },
+      style: (theme) => ({
+        root: { paddingHorizontal: theme.spacing(SIZES[size].paddingHorizontal) }
+      })
+    }))
+  ],
+  states: {
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "primary", size: "md", radius: "full" }
+});
+
+// src/components/fab/fab-label.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { Text as Text3 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var FabLabel = forwardRef5(function FabLabel2({ children, numberOfLines = 1, style, ...props }, ref) {
+  const { labelStyle } = useFab();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */ jsx6(
+    Text3,
+    {
+      ref,
+      numberOfLines,
+      ...rest,
+      style: [labelStyle, styleProps, style],
+      children
+    }
+  );
+});
+FabLabel.displayName = "XAUI.Fab.Label";
+
+// src/components/fab/fab-spinner.tsx
+import { View } from "react-native";
+import Animated3 from "react-native-reanimated";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function FabSpinner({ style, animation = true, ...props }) {
+  const { spinnerStyle } = useFab();
+  const [styleProps] = useStyleProps(props);
+  const ringStyle = [spinnerStyle, styleProps, style];
+  if (!animation) return /* @__PURE__ */ jsx7(View, { style: ringStyle });
+  return /* @__PURE__ */ jsx7(SpinningRing, { style: ringStyle });
+}
+FabSpinner.displayName = "XAUI.Fab.Spinner";
+function SpinningRing({ style }) {
+  const turn = useRotation();
+  return /* @__PURE__ */ jsx7(Animated3.View, { style: [style, turn] });
+}
+
+// src/components/fab/fab.style.ts
+import { StyleSheet as StyleSheet2 } from "react-native";
+var fabSheet = StyleSheet2.create({
+  round: { paddingHorizontal: 0, overflow: "hidden" }
+});
+
+// src/components/fab/fab.tsx
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_OFFSET = 16;
+var FabRoot = forwardRef6(function Fab({
+  children,
+  variant,
+  size = "md",
+  radius,
+  color,
+  isExtended = false,
+  placement,
+  offset = DEFAULT_OFFSET,
+  isDisabled = false,
+  isLoading = false,
+  asChild = false,
+  accessibilityRole = "button",
+  accessibilityState,
+  style,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+  const selection = {
+    variant,
+    size,
+    radius,
+    extended: isExtended ? "true" : void 0
+  };
+  const styles = fabRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled || isLoading }
+  });
+  const tint = color ? fabRecipe.tint({ theme, color, selection }) : void 0;
+  const context = useMemo2(() => {
+    const ink = StyleSheet3.flatten([styles.icon, tint?.icon]);
+    return {
+      labelStyle: [styles.label, tint?.label],
+      spinnerStyle: [styles.spinner, tint?.spinner],
+      icon: {
+        size: fabGlyph(size),
+        color: typeof ink.color === "string" ? ink.color : void 0
+      },
+      isDisabled,
+      isLoading
+    };
+  }, [styles, tint, size, isDisabled, isLoading]);
+  const float = placement === void 0 ? void 0 : placement === "bottom-center" ? { position: "absolute", bottom: offset, alignSelf: "center" } : {
+    position: "absolute",
+    bottom: offset,
+    [placement === "bottom-end" ? "end" : "start"]: offset
+  };
+  const text = childrenToString(children);
+  const showSpinner = isLoading && !containsElementOfType(children, FabSpinner);
+  const rootStyle = [
+    styles.root,
+    tint?.root,
+    float,
+    // A round FAB centres one mark in a fixed square, so its children must not spread.
+    isExtended ? null : fabSheet.round,
+    styleProps,
+    typeof style === "function" ? style({ pressed: isPressed }) : style
+  ];
+  return /* @__PURE__ */ jsx8(FabProvider, { value: context, children: /* @__PURE__ */ jsxs2(
+    PressableFeedback,
+    {
+      ref,
+      isPressed,
+      asChild,
+      accessibilityRole,
+      accessibilityState: {
+        disabled: isDisabled,
+        busy: isLoading,
+        ...accessibilityState
+      },
+      isDisabled: isDisabled || isLoading,
+      ...rest,
+      style: rootStyle,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: [
+        showSpinner ? /* @__PURE__ */ jsx8(FabSpinner, {}) : null,
+        text !== null ? /* @__PURE__ */ jsx8(FabLabel, { children: text }) : children
+      ]
+    }
+  ) });
+});
+FabRoot.displayName = "XAUI.Fab.Root";
+
+// src/components/fab/fab-discovery-target.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var FabDiscoveryTarget = forwardRef7(
+  function FabDiscoveryTarget2({ children, style, onLayout, placement, offset, ...props }, ref) {
+    const { isOpen, geometry, setAnchor } = useFabDiscovery();
+    const anchor = useAnchorRef({ isOpen, onAnchor: setAnchor, onLayout });
+    const refs = useMergedRef(anchor.node, ref);
+    const isLifted = isOpen && geometry !== null;
+    return /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx9(
+        FabRoot,
+        {
+          ref: isLifted ? anchor.node : refs,
+          placement,
+          offset,
+          accessibilityElementsHidden: isLifted || void 0,
+          importantForAccessibility: isLifted ? "no-hide-descendants" : void 0,
+          focusable: !isLifted,
+          ...props,
+          onLayout: anchor.onLayout,
+          style: typeof style === "function" ? (state) => [isLifted && fabDiscoverySheet.placeholder, style(state)] : [isLifted && fabDiscoverySheet.placeholder, style],
+          children
+        }
+      ),
+      isLifted ? /* @__PURE__ */ jsx9(Portal, { children: /* @__PURE__ */ jsx9(
+        View3,
+        {
+          style: [
+            fabDiscoverySheet.target,
+            {
+              top: geometry.target.top,
+              start: geometry.target.start,
+              width: geometry.target.width,
+              height: geometry.target.height
+            }
+          ],
+          children: /* @__PURE__ */ jsx9(FabRoot, { ref, ...props, style, children })
+        }
+      ) }) : null
+    ] });
+  }
+);
+FabDiscoveryTarget.displayName = "XAUI.FabDiscovery.Target";
+
+// src/components/fab/fab-discovery-title.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { Text as Text4 } from "react-native";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var FabDiscoveryTitle = forwardRef8(
+  function FabDiscoveryTitle2({ children, style, ...props }, ref) {
+    const { titleStyle, textAlign } = useFabDiscovery();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx10(
+      Text4,
+      {
+        ref,
+        accessibilityRole: "header",
+        ...rest,
+        style: [titleStyle, { textAlign }, styleProps, style],
+        children
+      }
+    );
+  }
+);
+FabDiscoveryTitle.displayName = "XAUI.FabDiscovery.Title";
+
+// src/components/fab/fab-icon.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function FabIcon({ size, color, ...rest }) {
+  const { icon } = useFab();
+  return /* @__PURE__ */ jsx11(Icon, { size: size ?? icon.size, color: color ?? icon.color, ...rest });
+}
+FabIcon.displayName = "XAUI.Fab.Icon";
+
+// src/components/fab/fab-menu.tsx
+import { useCallback as useCallback4, useMemo as useMemo3, useState as useState2 } from "react";
+import { StyleSheet as StyleSheet4 } from "react-native";
+
+// src/components/fab/fab-menu.context.ts
+var [FabMenuProvider, useFabMenu] = createSlotContext("FabMenu");
+
+// src/components/fab/fab-menu.recipe.ts
+var SLOTS3 = ["overlay", "content", "item", "itemLabel"];
+var VARIANT_TOKENS3 = {
+  // A single entry, and it is still a table: `resolveTint` only maps roles a variant
+  // declared, so this is what carries a raw `color` onto the pill.
+  default: { bg: "overlay", fg: "overlayForeground" }
+};
+var SIZES2 = {
+  sm: { paddingHorizontal: 3.5, paddingVertical: 2, gap: 2, label: "sm" },
+  md: { paddingHorizontal: 4, paddingVertical: 2.5, gap: 3, label: "md" },
+  lg: { paddingHorizontal: 5, paddingVertical: 3, gap: 3, label: "lg" }
+};
+function sizeAxis2(step) {
+  const { paddingHorizontal, paddingVertical, gap, label } = step;
+  return (theme) => ({
+    content: { gap: theme.spacing(gap) },
+    item: {
+      paddingHorizontal: theme.spacing(paddingHorizontal),
+      paddingVertical: theme.spacing(paddingVertical),
+      gap: theme.spacing(gap - 1)
+    },
+    itemLabel: {
+      fontSize: theme.fontSizes[label],
+      lineHeight: theme.lineHeights[label]
+    }
+  });
+}
+var fabMenuRecipe = createRecipe({
+  slots: SLOTS3,
+  base: (theme) => ({
+    /**
+     * **It dims, where a `Menu`'s and a `Select`'s do not.** Those drop out of a field and
+     * leave the page alone, because the page is still the context for the answer they are
+     * asking for. A FAB floats over everything and its actions replace the screen's one
+     * thing to do with three — that is a `Dialog`'s situation, and it takes the `Dialog`'s
+     * backdrop. It is also what puts the pills on a dimmed ground, which is where a white
+     * pill reads as white.
+     *
+     * `backgroundColor="transparent"` on the slot takes it back off (R14).
+     */
+    overlay: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      start: 0,
+      end: 0,
+      backgroundColor: theme.colors.backdrop
+    },
+    /**
+     * A column with no surface of its own: the pills are the surface, and a background
+     * here would be the panel this component exists not to be.
+     *
+     * Which edge the pills line up on is **not** here — it follows `align`, which is a
+     * prop of `FabMenu.Content` and so is never seen by a recipe resolving on the root.
+     * See `fabMenuAlignment`.
+     */
+    content: { position: "absolute" },
+    item: {
+      flexDirection: "row",
+      alignItems: "center",
+      // The pill, and what makes it one. `full` on a box whose height is intrinsic is a
+      // capsule at every size without a radius per size.
+      borderRadius: theme.radius.full,
+      borderCurve: "continuous",
+      // The `surface` shadow rather than the `overlay` one a `Menu` panel wears: three
+      // pills twelve points apart, each carrying a sixteen-point blur, pool into one grey
+      // smudge behind the lot of them.
+      ...theme.shadows.surface
+    },
+    itemLabel: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium
+    }
+  }),
+  variantTokens: VARIANT_TOKENS3,
+  paint: (_theme, colors) => ({
+    item: { backgroundColor: colors.bg },
+    itemLabel: { color: colors.fg }
+  }),
+  variants: {
+    size: { sm: sizeAxis2(SIZES2.sm), md: sizeAxis2(SIZES2.md), lg: sizeAxis2(SIZES2.lg) },
+    /** Declared after `size`, so it overrides the capsule the pill chose. */
+    radius: radiusAxis("item")
+  },
+  /**
+   * No `pressed` face, unlike the `Menu`'s row.
+   *
+   * A menu row is a full-width strip inside a panel, where the shared scale treatment
+   * reads as the panel twitching, so it darkens instead. A pill is a small floating button
+   * — the same object the FAB above it is — and `PressableFeedback`'s treatment is exactly
+   * right on it. Touch feedback is written once in this library, and this is one of the
+   * places that means not writing it again.
+   *
+   * The `disabled` face is resolved on its own and handed to the pill rather than folded
+   * into the root's pass, so an action that is spent dims once whether it was the action
+   * or the whole menu that said so.
+   */
+  states: {
+    disabled: (theme) => ({ item: { opacity: theme.opacity.disabled } })
+  },
+  // `variant` is named even though the table has one entry: without it the selection
+  // resolves to `undefined`, `paint` is handed an empty set of colours, and the pill ends
+  // up with `backgroundColor: undefined` — a hole showing the backdrop through it rather
+  // than a white pill. `createRecipe` warns about exactly this now.
+  defaultVariants: { variant: "default", size: "md" }
+});
+
+// src/components/fab/fab-menu.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function FabMenu({
+  children,
+  size = "md",
+  radius,
+  color,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  isDisabled = false
+}) {
+  const theme = useXAUITheme();
+  const [anchor, setAnchor] = useState2(null);
+  const [isOpen, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const selection = { size, radius };
+  const styles = fabMenuRecipe.resolve({ theme, selection });
+  const spent = fabMenuRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: true }
+  });
+  const tint = color ? fabMenuRecipe.tint({ theme, color, selection }) : void 0;
+  const open = useCallback4(() => {
+    if (!isDisabled) setOpen(true);
+  }, [isDisabled, setOpen]);
+  const close = useCallback4(() => setOpen(false), [setOpen]);
+  const toggle = useCallback4(() => {
+    if (!isDisabled) setOpen((current) => !current);
+  }, [isDisabled, setOpen]);
+  const context = useMemo3(() => {
+    const itemLabelStyle = tint ? [styles.itemLabel, tint.itemLabel] : styles.itemLabel;
+    const label = StyleSheet4.flatten(itemLabelStyle);
+    return {
+      overlayStyle: styles.overlay,
+      contentStyle: styles.content,
+      itemStyle: tint ? [styles.item, tint.item] : styles.item,
+      itemDisabledStyle: spent.item,
+      itemLabelStyle,
+      glyph: {
+        size: label.fontSize,
+        // `ColorValue` also covers the platform's opaque colours, which `Icon` cannot hand
+        // to a third-party component expecting a string.
+        color: typeof label.color === "string" ? label.color : void 0
+      },
+      size,
+      isOpen,
+      isDisabled,
+      open,
+      close,
+      toggle,
+      anchor,
+      setAnchor
+    };
+  }, [styles, spent, tint, size, isOpen, isDisabled, open, close, toggle, anchor]);
+  return /* @__PURE__ */ jsx12(FabMenuProvider, { value: context, children });
+}
+FabMenu.displayName = "XAUI.FabMenu.Root";
+
+// src/components/fab/fab-menu-content.tsx
+import { forwardRef as forwardRef9 } from "react";
+import Animated4 from "react-native-reanimated";
+
+// src/components/fab/fab-menu.style.ts
+import { StyleSheet as StyleSheet5 } from "react-native";
+var fabMenuAlignment = StyleSheet5.create({
+  start: { alignItems: "flex-start" },
+  center: { alignItems: "center" },
+  end: { alignItems: "flex-end" }
+});
+
+// src/components/fab/fab-menu-content.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var DEFAULT_OFFSET2 = 12;
+var DEFAULT_INSETS = {
+  top: 12,
+  bottom: 12,
+  start: 12,
+  end: 12
+};
+var FabMenuContent = forwardRef9(
+  function FabMenuContent2({
+    children,
+    placement = "top",
+    align = "end",
+    width = "content-fit",
+    offset = DEFAULT_OFFSET2,
+    alignOffset = 0,
+    avoidCollisions = true,
+    insets,
+    accessibilityRole = "menu",
+    style,
+    onLayout,
+    ...props
+  }, ref) {
+    const context = useFabMenu();
+    const { contentStyle, isOpen, anchor } = context;
+    const [styleProps, rest] = useStyleProps(props);
+    const { position, onContentLayout, measuringStyle } = useAnchoredPosition({
+      anchor,
+      isOpen,
+      placement,
+      align,
+      width,
+      offset,
+      alignOffset,
+      avoidCollisions,
+      insets: { ...DEFAULT_INSETS, ...insets },
+      onLayout
+    });
+    if (!isOpen || anchor === null) return null;
+    return /* @__PURE__ */ jsx13(Portal, { children: /* @__PURE__ */ jsx13(FabMenuProvider, { value: context, children: /* @__PURE__ */ jsx13(
+      Animated4.View,
+      {
+        ref,
+        entering: position ? anchoredEntering(position.placement) : void 0,
+        exiting: position ? anchoredExiting(position.placement) : void 0,
+        accessibilityRole,
+        onLayout: onContentLayout,
+        ...rest,
+        style: [
+          contentStyle,
+          // The pills line up on the edge the column was anchored to — see
+          // `fabMenuAlignment`. It is `align`'s, so it cannot come from the recipe.
+          fabMenuAlignment[align],
+          position === null ? measuringStyle : {
+            top: position.top,
+            start: position.start,
+            width: position.width,
+            maxHeight: position.maxHeight
+          },
+          styleProps,
+          style
+        ],
+        children
+      },
+      position?.placement ?? "measuring"
+    ) }) });
+  }
+);
+FabMenuContent.displayName = "XAUI.FabMenu.Content";
+
+// src/components/fab/fab-menu-icon.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function FabMenuIcon(props) {
+  return /* @__PURE__ */ jsx14(Icon, { ...props });
+}
+FabMenuIcon.displayName = "XAUI.FabMenu.Icon";
+
+// src/components/fab/fab-menu-item.tsx
+import { forwardRef as forwardRef11, useCallback as useCallback5 } from "react";
+
+// src/components/fab/fab-menu-label.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { Text as Text5 } from "react-native";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var FabMenuLabel = forwardRef10(
+  function FabMenuLabel2({ children, numberOfLines = 1, style, ...props }, ref) {
+    const { itemLabelStyle } = useFabMenu();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx15(
+      Text5,
+      {
+        ref,
+        numberOfLines,
+        ...rest,
+        style: [itemLabelStyle, styleProps, style],
+        children
+      }
+    );
+  }
+);
+FabMenuLabel.displayName = "XAUI.FabMenu.Label";
+
+// src/components/fab/fab-menu-item.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var FabMenuItem = forwardRef11(function FabMenuItem2({
+  children,
+  isDisabled = false,
+  closesOnPress = true,
+  asChild = false,
+  accessibilityRole = "menuitem",
+  accessibilityState,
+  style,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const {
+    itemStyle,
+    itemDisabledStyle,
+    glyph,
+    isDisabled: menuDisabled,
+    close
+  } = useFabMenu();
+  const [styleProps, rest] = useStyleProps(props);
+  const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+  const isSpent = isDisabled || menuDisabled;
+  const handlePress = useCallback5(
+    (event) => {
+      onPress?.(event);
+      if (closesOnPress) close();
+    },
+    [close, closesOnPress, onPress]
+  );
+  const text = childrenToString(children);
+  return /* @__PURE__ */ jsx16(IconContext.Provider, { value: glyph, children: /* @__PURE__ */ jsx16(
+    PressableFeedback,
+    {
+      ref,
+      isPressed,
+      isDisabled: isSpent,
+      asChild,
+      accessibilityRole,
+      accessibilityState: { disabled: isSpent, ...accessibilityState },
+      ...rest,
+      style: [
+        itemStyle,
+        isSpent && itemDisabledStyle,
+        styleProps,
+        typeof style === "function" ? style({ pressed: isPressed }) : style
+      ],
+      onPress: handlePress,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: text !== null ? /* @__PURE__ */ jsx16(FabMenuLabel, { children: text }) : children
+    }
+  ) });
+});
+FabMenuItem.displayName = "XAUI.FabMenu.Item";
+
+// src/components/fab/fab-menu-overlay.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { Pressable as Pressable2 } from "react-native";
+import Animated5 from "react-native-reanimated";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var AnimatedPressable2 = Animated5.createAnimatedComponent(Pressable2);
+var FabMenuOverlay = forwardRef12(
+  function FabMenuOverlay2({ children, isDismissable = true, style, ...props }, ref) {
+    const context = useFabMenu();
+    const { overlayStyle, isOpen, close } = context;
+    const [styleProps, rest] = useStyleProps(props);
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx17(Portal, { children: /* @__PURE__ */ jsx17(FabMenuProvider, { value: context, children: /* @__PURE__ */ jsx17(
+      AnimatedPressable2,
+      {
+        ref,
+        entering: overlayEntering,
+        exiting: overlayExiting,
+        accessibilityRole: "none",
+        importantForAccessibility: "no",
+        onPress: isDismissable ? close : void 0,
+        ...rest,
+        style: [overlayStyle, styleProps, style],
+        children
+      }
+    ) }) });
+  }
+);
+FabMenuOverlay.displayName = "XAUI.FabMenu.Overlay";
+
+// src/components/fab/fab-menu-trigger.tsx
+import { forwardRef as forwardRef13, useCallback as useCallback6 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var FabMenuTrigger = forwardRef13(
+  function FabMenuTrigger2({ children, accessibilityState, isDisabled, onLayout, onPress, ...props }, ref) {
+    const {
+      size,
+      isOpen,
+      isDisabled: menuDisabled,
+      toggle,
+      setAnchor
+    } = useFabMenu();
+    const anchor = useAnchorRef({ isOpen, onAnchor: setAnchor, onLayout });
+    const refs = useMergedRef(anchor.node, ref);
+    const handlePress = useCallback6(
+      (event) => {
+        onPress?.(event);
+        anchor.measure();
+        toggle();
+      },
+      [anchor, onPress, toggle]
+    );
+    return /* @__PURE__ */ jsx18(
+      FabRoot,
+      {
+        ref: refs,
+        size,
+        isDisabled: isDisabled ?? menuDisabled,
+        accessibilityState: { expanded: isOpen, ...accessibilityState },
+        ...props,
+        onLayout: anchor.onLayout,
+        onPress: handlePress,
+        children
+      }
+    );
+  }
+);
+FabMenuTrigger.displayName = "XAUI.FabMenu.Trigger";
+
+// src/components/fab/index.ts
+var FabMenu2 = Object.assign(FabMenu, {
+  Trigger: FabMenuTrigger,
+  Overlay: FabMenuOverlay,
+  Content: FabMenuContent,
+  Item: FabMenuItem,
+  Label: FabMenuLabel,
+  Icon: FabMenuIcon
+});
+var FabDiscovery2 = Object.assign(FabDiscovery, {
+  Target: FabDiscoveryTarget,
+  Overlay: FabDiscoveryOverlay,
+  Content: FabDiscoveryContent,
+  Title: FabDiscoveryTitle,
+  Description: FabDiscoveryDescription,
+  Action: FabDiscoveryAction
+});
+var Fab2 = Object.assign(FabRoot, {
+  Icon: FabIcon,
+  Label: FabLabel,
+  Spinner: FabSpinner
+});
+
+export {
+  useFabDiscovery,
+  fabDiscoveryRecipe,
+  FabDiscovery,
+  FabDiscoveryAction,
+  FabDiscoveryContent,
+  FabDiscoveryDescription,
+  FabDiscoveryOverlay,
+  useFab,
+  fabRecipe,
+  FabLabel,
+  FabSpinner,
+  FabRoot,
+  FabDiscoveryTarget,
+  FabDiscoveryTitle,
+  FabIcon,
+  useFabMenu,
+  fabMenuRecipe,
+  FabMenu,
+  FabMenuContent,
+  FabMenuIcon,
+  FabMenuLabel,
+  FabMenuItem,
+  FabMenuOverlay,
+  FabMenuTrigger,
+  FabMenu2,
+  FabDiscovery2,
+  Fab2 as Fab
+};