@btndprojects/loam-ui-native 0.0.0-stage → 0.1.1

package/dist/chunk-AI4DWZCD.js

@@ -0,0 +1,162 @@
+import { useColorTransition } from './chunk-ITTYJZWX.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Easing, Animated, Text, Pressable, View } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function useForeground(variant, isSelected) {
+  const theme = useLoamTheme();
+  if (isSelected) return theme.color.accentOnSoft;
+  if (variant === "input") return theme.color.onSurface;
+  return theme.color.onSurface2;
+}
+function Chip({
+  children,
+  variant: variantProp,
+  size = "md",
+  selected = false,
+  onSelectedChange,
+  // Deprecated — when set (and no explicit variant is given) it selects the
+  // `filter` toggle, the pre-split meaning of `selectable`.
+  selectable: legacySelectable,
+  onPress,
+  removable = false,
+  onRemove,
+  removeLabel,
+  leadingIcon,
+  disabled = false,
+  motion = "full",
+  accessibilityLabel
+}) {
+  const resolvedMotion = useResolvedMotion(motion);
+  const animateColour = resolvedMotion !== "none";
+  const animatePress = resolvedMotion === "full";
+  const variant = variantProp === "filled" ? "input" : variantProp === "outline" ? "filter" : variantProp ?? (legacySelectable ? "filter" : "input");
+  const isFilter = variant === "filter";
+  const isSelected = isFilter && selected;
+  const { styles } = useStyles(sheet, { size, disabled });
+  const theme = useLoamTheme();
+  const fg = useForeground(variant, isSelected);
+  const iconSize = theme.ctl.icon[size];
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const bodyPressable = isFilter || variant === "suggestion" || onPress != null;
+  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const restingFill = variant === "input" ? theme.color.surface2 : theme.color.surface;
+  const backgroundColor = useColorTransition(
+    isSelected ? theme.color.accentSoft : restingFill,
+    theme.duration.fast,
+    easing,
+    animateColour
+  );
+  const edgeTarget = isSelected ? theme.color.accent : variant === "input" ? theme.color.border : theme.color.borderStrong;
+  const borderColor = useColorTransition(edgeTarget, theme.duration.fast, easing, animateColour);
+  const borderWidth = variant === "input" ? theme.borderWidth.base : theme.borderWidth.thick;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const spring = (to) => Animated.spring(scale, {
+    toValue: to,
+    useNativeDriver: true,
+    ...theme.spring.press
+  }).start();
+  const handlePress = () => {
+    if (isFilter) {
+      haptics.impact("light");
+      onSelectedChange?.(!selected);
+      return;
+    }
+    onPress?.();
+  };
+  const handleRemove = (event) => {
+    event.stopPropagation();
+    onRemove?.();
+  };
+  const leading = isSelected ? "check" : leadingIcon;
+  const resolvedRemoveLabel = removeLabel ?? (children ? `Remove ${children}` : "Remove");
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading ? /* @__PURE__ */ jsx(Icon, { name: leading, size: iconSize, color: fg }) : null,
+    children !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children }) : null
+  ] });
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      testID: "chip-base",
+      style: [styles.base, { backgroundColor, borderColor, borderWidth, transform: [{ scale }] }],
+      children: [
+        bodyPressable ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: accessibilityLabel ?? children,
+            accessibilityState: isFilter ? { selected: isSelected, disabled } : { disabled },
+            disabled,
+            onPress: disabled ? void 0 : handlePress,
+            onPressIn: disabled || !animatePress ? void 0 : () => spring(0.97),
+            onPressOut: disabled || !animatePress ? void 0 : () => spring(1),
+            hitSlop: { top: slopY, bottom: slopY },
+            style: styles.body,
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx(View, { accessibilityLabel: accessibilityLabel ?? children, style: styles.body, children: body }),
+        removable ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: resolvedRemoveLabel,
+            hitSlop: 8,
+            disabled,
+            onPress: disabled ? void 0 : handleRemove,
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: fg })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // `backgroundColor` / `borderColor` / `borderWidth` are supplied at the use
+  // site as animated values so the pill can travel between states over
+  // `duration.fast`.
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s2,
+    borderRadius: theme.radius.full,
+    variants: {
+      // Height + horizontal padding resolve from the control-size ramp; the pill
+      // keeps its `radius.full` corners (it is a pill, not a ramp-radius box).
+      size: {
+        xs: { height: theme.ctl.xs, paddingHorizontal: theme.ctl.px.xs },
+        sm: { height: theme.ctl.sm, paddingHorizontal: theme.ctl.px.sm },
+        md: { height: theme.ctl.md, paddingHorizontal: theme.ctl.px.md }
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  // The tap target: icon + label laid out with the same gap the pill uses, so
+  // splitting the remove affordance out as a sibling leaves spacing unchanged.
+  body: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    variants: {
+      size: {
+        xs: { fontSize: theme.fontSize[12] },
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[14] }
+      }
+    }
+  }
+}));
+
+export { Chip };

package/dist/chunk-AWJOCGFZ.js

@@ -0,0 +1,213 @@
+import { haptics } from './chunk-NY2U3PBI.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, AccessibilityInfo, Easing, Pressable, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_DURATION = 1200;
+function useForeground(variant, disabled) {
+  const theme = useLoamTheme();
+  if (disabled) return theme.color.text3;
+  return variant === "primary" ? theme.color.accentInk : theme.color.dangerInk;
+}
+function HoldToConfirm({
+  children,
+  onConfirm,
+  duration = DEFAULT_DURATION,
+  variant = "danger",
+  size = "md",
+  disabled = false,
+  fullWidth = false,
+  confirmingLabel,
+  leadingIcon,
+  motion = "full",
+  accessibilityLabel,
+  onProgress
+}) {
+  const { styles } = useStyles(sheet, { variant, size, disabled, fullWidth });
+  const theme = useLoamTheme();
+  const fg = useForeground(variant, disabled);
+  const iconSize = theme.ctl.icon[size];
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const [holding, setHolding] = React.useState(false);
+  const [message, setMessage] = React.useState("");
+  const [srEnabled, setSrEnabled] = React.useState(false);
+  const timer = React.useRef(void 0);
+  const progress = React.useRef(new Animated.Value(0)).current;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isScreenReaderEnabled().then((v) => mounted && setSrEnabled(v)).catch(() => {
+    });
+    const sub = AccessibilityInfo.addEventListener("screenReaderChanged", setSrEnabled);
+    return () => {
+      mounted = false;
+      sub?.remove?.();
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!onProgress) return;
+    const id = progress.addListener(({ value }) => onProgress(value));
+    return () => progress.removeListener(id);
+  }, [onProgress, progress]);
+  const clear = React.useCallback(() => {
+    if (timer.current !== void 0) {
+      clearTimeout(timer.current);
+      timer.current = void 0;
+    }
+  }, []);
+  const fireConfirm = React.useCallback(() => {
+    clear();
+    setHolding(false);
+    setMessage("Confirmed");
+    haptics.impact("heavy");
+    onConfirm();
+  }, [clear, onConfirm]);
+  const start = React.useCallback(() => {
+    if (disabled || timer.current !== void 0) return;
+    setHolding(true);
+    setMessage("Keep holding to confirm");
+    progress.stopAnimation();
+    progress.setValue(0);
+    Animated.timing(progress, {
+      toValue: 1,
+      duration,
+      easing: Easing.linear,
+      useNativeDriver: false
+    }).start();
+    if (motion === "full") {
+      Animated.spring(scale, { toValue: 0.97, useNativeDriver: true, speed: 40, bounciness: 6 }).start();
+    }
+    timer.current = setTimeout(fireConfirm, duration);
+  }, [disabled, duration, motion, progress, scale, fireConfirm]);
+  const cancel = React.useCallback(() => {
+    if (motion === "full") {
+      Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 6 }).start();
+    }
+    if (timer.current === void 0) return;
+    clear();
+    setHolding(false);
+    setMessage("Cancelled");
+    progress.stopAnimation();
+    Animated.timing(progress, {
+      toValue: 0,
+      duration: theme.motion.exit.duration,
+      easing: Easing.bezier(...theme.motion.exit.easing),
+      useNativeDriver: false
+    }).start();
+  }, [clear, motion, progress, scale, theme.motion.exit]);
+  React.useEffect(() => clear, [clear]);
+  const width = progress.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] });
+  const label = holding && confirmingLabel ? confirmingLabel : children;
+  const a11yLabel = accessibilityLabel ?? (typeof children === "string" ? children : void 0);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      accessibilityHint: "Press and hold to confirm. Releasing early cancels.",
+      accessibilityState: { disabled },
+      disabled,
+      onPress: disabled || !srEnabled ? void 0 : fireConfirm,
+      onPressIn: disabled ? void 0 : start,
+      onPressOut: disabled ? void 0 : cancel,
+      hitSlop: { top: slopY, bottom: slopY },
+      style: fullWidth ? fullWidthStyle : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, { transform: [{ scale }] }], children: [
+          /* @__PURE__ */ jsx(Animated.View, { "aria-hidden": true, style: [styles.fill, { width }] }),
+          leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: fg }) : null,
+          typeof label === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: label }) : label
+        ] }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityLiveRegion: "polite",
+            style: visuallyHidden,
+            children: message
+          }
+        )
+      ]
+    }
+  );
+}
+var fullWidthStyle = { alignSelf: "stretch" };
+var visuallyHidden = { position: "absolute", width: 1, height: 1, overflow: "hidden" };
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    position: "relative",
+    overflow: "hidden",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      variant: {
+        danger: { backgroundColor: theme.color.danger },
+        primary: { backgroundColor: theme.color.accent }
+      },
+      // Height, horizontal padding, gap and radius all resolve from one tier.
+      size: {
+        sm: {
+          height: theme.ctl.sm,
+          paddingHorizontal: theme.ctl.px.sm,
+          gap: theme.ctl.gap.sm,
+          borderRadius: theme.ctl.r.sm
+        },
+        md: {
+          height: theme.ctl.md,
+          paddingHorizontal: theme.ctl.px.md,
+          gap: theme.ctl.gap.md,
+          borderRadius: theme.ctl.r.md
+        },
+        lg: {
+          height: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.ctl.gap.lg,
+          borderRadius: theme.ctl.r.lg
+        }
+      },
+      disabled: {
+        true: { backgroundColor: theme.color.surface3 },
+        false: {}
+      },
+      fullWidth: { true: { alignSelf: "stretch" }, false: {} }
+    }
+  },
+  // Translucent state-layer fill, anchored to the start edge, behind the label.
+  fill: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    backgroundColor: theme.state.pressed
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    variants: {
+      size: {
+        sm: {
+          fontSize: theme.type.footnote.fontSize,
+          lineHeight: theme.type.footnote.lineHeight,
+          letterSpacing: theme.type.footnote.letterSpacing
+        },
+        md: {
+          fontSize: theme.type.subheadline.fontSize,
+          lineHeight: theme.type.subheadline.lineHeight,
+          letterSpacing: theme.type.subheadline.letterSpacing
+        },
+        lg: {
+          fontSize: theme.type.body.fontSize,
+          lineHeight: theme.type.body.lineHeight,
+          letterSpacing: theme.type.body.letterSpacing
+        }
+      },
+      variant: {},
+      disabled: {},
+      fullWidth: {}
+    }
+  }
+}));
+
+export { HoldToConfirm };

package/dist/chunk-AZRX6SAC.js

@@ -0,0 +1,285 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { StyleSheet, Animated, Easing, View, Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function foreground(theme, variant) {
+  switch (variant) {
+    case "primary":
+      return theme.color.accentInk;
+    case "tonal":
+      return theme.color.accentOnSoft;
+    case "surface":
+      return theme.color.accentStrong;
+  }
+}
+function highContrastEdge(theme, variant) {
+  switch (variant) {
+    case "primary":
+      return theme.color.accentStrong;
+    case "tonal":
+      return theme.edge.accent;
+    // the accent tone once contrast is `more`
+    case "surface":
+      return theme.color.borderStrong;
+  }
+}
+function Fab({
+  icon,
+  label,
+  onPress,
+  variant = "primary",
+  size = "regular",
+  actions,
+  defaultOpen = false,
+  position = "bottom-end",
+  motion = "full",
+  safeAreaBottom = 0,
+  accessibilityLabel
+}) {
+  const theme = useLoamTheme();
+  const isExtended = typeof label === "string" && label.length > 0;
+  const { styles } = useStyles(sheet, {
+    variant,
+    size,
+    extended: isExtended
+  });
+  const hasActions = !!actions && actions.length > 0;
+  const name = label ?? accessibilityLabel;
+  if (process.env.NODE_ENV !== "production" && !name) {
+    console.warn(
+      "Fab: `accessibilityLabel` is required when no `label` is provided (icon-only FAB has no accessible name)."
+    );
+  }
+  const reduced = motion === "reduced" || theme.reduceMotion;
+  const animatePress = motion !== "none";
+  const animateOpen = motion === "full" && !reduced;
+  const fg = foreground(theme, variant);
+  const iconSize = size === "regular" ? theme.icon.lg : theme.icon.md;
+  const bottom = theme.layout.screenPad + safeAreaBottom;
+  const highContrast = theme.contrast === "more";
+  const elevation = size === "regular" ? theme.shadow.lg : theme.shadow.md;
+  const edgeStyle = highContrast ? { borderWidth: theme.borderWidth.base, borderColor: highContrastEdge(theme, variant) } : null;
+  const initialOpen = hasActions && defaultOpen;
+  const [open, setOpen] = React.useState(initialOpen);
+  const [mounted, setMounted] = React.useState(initialOpen);
+  const progress = React.useRef(new Animated.Value(initialOpen ? 1 : 0)).current;
+  React.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      if (animateOpen) {
+        Animated.timing(progress, {
+          toValue: 1,
+          duration: theme.motion.expand.duration,
+          easing: Easing.bezier(...theme.motion.expand.easing),
+          useNativeDriver: true
+        }).start();
+      } else {
+        progress.setValue(1);
+      }
+    } else if (mounted) {
+      if (animateOpen) {
+        Animated.timing(progress, {
+          toValue: 0,
+          // Exit is always faster than enter.
+          duration: theme.motion.exit.duration,
+          easing: Easing.bezier(...theme.motion.exit.easing),
+          useNativeDriver: true
+        }).start(({ finished }) => {
+          if (finished) setMounted(false);
+        });
+      } else {
+        progress.setValue(0);
+        setMounted(false);
+      }
+    }
+  }, [open]);
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const spring = (to) => {
+    if (!animatePress) return;
+    Animated.spring(scale, { toValue: to, useNativeDriver: true, speed: 40, bounciness: 6 }).start();
+  };
+  const handleMainPress = () => {
+    if (hasActions) setOpen((o) => !o);
+    else onPress?.();
+  };
+  const handleActionPress = (action) => {
+    action.onPress?.();
+    setOpen(false);
+  };
+  React.useEffect(() => {
+    if (!open || typeof document === "undefined") return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  const rotate = animateOpen ? progress.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "45deg"] }) : "0deg";
+  const positionStyle = position === "bottom-start" ? { start: theme.layout.screenPad, bottom } : position === "bottom-center" ? { left: 0, right: 0, bottom, alignItems: "center" } : { end: theme.layout.screenPad, bottom };
+  const stackAlign = position === "bottom-start" ? "flex-start" : position === "bottom-center" ? "center" : "flex-end";
+  const rowDirection = position === "bottom-start" ? "row-reverse" : "row";
+  return /* @__PURE__ */ jsxs(View, { pointerEvents: "box-none", style: [styles.anchor, positionStyle], children: [
+    mounted ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Close menu",
+        onPress: () => setOpen(false),
+        style: styles.scrim
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(View, { pointerEvents: "box-none", style: [styles.stack, { alignItems: stackAlign }], children: [
+      mounted && actions ? /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: styles.actions, children: actions.map((action, i) => {
+        const start = animateOpen ? Math.min(i / (actions.length + 1) * 0.6, 0.6) : 0;
+        const itemOpacity = progress.interpolate({
+          inputRange: [start, Math.min(start + 0.4, 1)],
+          outputRange: [0, 1],
+          extrapolate: "clamp"
+        });
+        const itemTranslate = progress.interpolate({
+          inputRange: [start, Math.min(start + 0.4, 1)],
+          outputRange: [12, 0],
+          extrapolate: "clamp"
+        });
+        return /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            pointerEvents: "box-none",
+            style: [
+              styles.actionRow,
+              { flexDirection: rowDirection, opacity: itemOpacity },
+              { transform: [{ translateY: itemTranslate }] }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(View, { style: [styles.chip, edgeStyle, elevation], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, numberOfLines: 1, children: action.label }) }),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: action.accessibilityLabel ?? action.label,
+                  onPress: () => handleActionPress(action),
+                  style: [styles.mini, edgeStyle, theme.shadow.md],
+                  children: /* @__PURE__ */ jsx(Icon, { name: action.icon, size: theme.icon.md, color: theme.color.text })
+                }
+              )
+            ]
+          },
+          `${action.label}-${i}`
+        );
+      }) }) : null,
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: name,
+          accessibilityState: hasActions ? { expanded: open } : void 0,
+          onPress: handleMainPress,
+          onPressIn: () => spring(0.97),
+          onPressOut: () => spring(1),
+          children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.fab, edgeStyle, elevation, { transform: [{ scale }] }], children: [
+            /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ rotate }] }, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize, color: fg }) }),
+            isExtended ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: label }) : null
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // Absolute anchor; the concrete corner offsets are applied at the use site so
+  // they can fold in the live safe-area inset.
+  anchor: {
+    position: "absolute",
+    zIndex: theme.z.modal
+  },
+  scrim: {
+    ...StyleSheet.absoluteFillObject,
+    // The dial's backdrop stretches well past the anchor so a tap anywhere closes it.
+    top: -2e3,
+    left: -2e3,
+    right: -2e3,
+    bottom: -2e3,
+    backgroundColor: theme.color.scrim
+  },
+  stack: {
+    gap: theme.space.s3
+  },
+  actions: {
+    // Nearest-to-FAB action sits at the bottom of the column, just above it.
+    flexDirection: "column-reverse",
+    gap: theme.space.s3
+  },
+  actionRow: {
+    alignItems: "center",
+    gap: theme.space.s3
+  },
+  chip: {
+    backgroundColor: theme.color.surface,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s1,
+    borderRadius: theme.radius.sm
+  },
+  chipLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.snug,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.text
+  },
+  mini: {
+    width: theme.space.s7,
+    height: theme.space.s7,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fab: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      size: {
+        regular: {
+          height: theme.layout.fabSize,
+          minWidth: theme.layout.fabSize,
+          borderRadius: theme.radius.full
+        },
+        small: {
+          height: theme.space.s7,
+          minWidth: theme.space.s7,
+          borderRadius: theme.radius.full
+        }
+      },
+      variant: {
+        primary: { backgroundColor: theme.color.accent },
+        // The tonal FAB is a soft fill and nothing else, so it needs the accent
+        // edge to survive a re-resolved palette. Height and minWidth are fixed
+        // per size, so the border draws inside the circle.
+        tonal: {
+          backgroundColor: theme.color.accentSoft,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.edge.accent
+        },
+        surface: { backgroundColor: theme.color.surface }
+      },
+      // Circle → pill: only the extended FAB gets horizontal padding + a gap.
+      extended: {
+        true: { paddingHorizontal: theme.space.s5, gap: theme.space.s2 },
+        false: {}
+      }
+    }
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing
+  }
+}));
+
+export { Fab };

package/dist/chunk-B54QE2FN.js

@@ -0,0 +1 @@
+

package/dist/chunk-BC475SJH.js

@@ -0,0 +1 @@
+