@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-AZRX6SAC.js → chunk-CXPQMA6Z.js}

@@ -1,9 +1,16 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { StyleSheet, Animated, Easing, View, Pressable, Text } from 'react-native';
+import { StyleSheet, Animated, Easing, View, Pressable, Text, ActivityIndicator } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  closeMenu: "Close menu"
+};
 function foreground(theme, variant) {
   switch (variant) {
     case "primary":
@@ -29,16 +36,28 @@ function Fab({
   icon,
   label,
   onPress,
-  variant = "primary",
+  variant = "tonal",
   size = "regular",
   actions,
   defaultOpen = false,
   position = "bottom-end",
   motion = "full",
+  disabled = false,
   safeAreaBottom = 0,
-  accessibilityLabel
+  bottomOffset = 0,
+  accessibilityLabel,
+  labels: labelsProp,
+  loading = false,
+  trailingIcon,
+  fullWidth = false,
+  tone
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("fab", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("fab");
+  const android = isAndroidIdiom(theme);
+  const focusRing = useFocusRing(theme.radius.full);
+  const slop = Math.max(0, (theme.tapMin - MINI) / 2);
+  const miniSlop = { top: slop, bottom: slop, left: slop, right: slop };
   const isExtended = typeof label === "string" && label.length > 0;
   const { styles } = useStyles(sheet, {
     variant,
@@ -55,9 +74,9 @@ function Fab({
   const reduced = motion === "reduced" || theme.reduceMotion;
   const animatePress = motion !== "none";
   const animateOpen = motion === "full" && !reduced;
-  const fg = foreground(theme, variant);
+  const fg = tone ? theme.color[`${tone}Ink`] : foreground(theme, variant);
   const iconSize = size === "regular" ? theme.icon.lg : theme.icon.md;
-  const bottom = theme.layout.screenPad + safeAreaBottom;
+  const bottom = theme.layout.screenPad + safeAreaBottom + bottomOffset;
   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;
@@ -98,9 +117,14 @@ function Fab({
   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();
+    Animated.spring(scale, {
+      ...springConfig(theme, "fs"),
+      toValue: to,
+      useNativeDriver: true
+    }).start();
   };
   const handleMainPress = () => {
+    if (disabled || loading) return;
     if (hasActions) setOpen((o) => !o);
     else onPress?.();
   };
@@ -117,15 +141,15 @@ function Fab({
     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 positionStyle = fullWidth ? { start: theme.layout.screenPad, end: theme.layout.screenPad, bottom } : 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 = fullWidth ? "stretch" : 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",
+        accessibilityLabel: labels.closeMenu,
         onPress: () => setOpen(false),
         style: styles.scrim
       }
@@ -153,13 +177,13 @@ function Fab({
               { 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(View, { style: [styles.chip, edgeStyle, theme.shadow.md], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, numberOfLines: 1, children: action.label }) }),
               /* @__PURE__ */ jsx(
-                Pressable,
+                MiniFab,
                 {
-                  accessibilityRole: "button",
-                  accessibilityLabel: action.accessibilityLabel ?? action.label,
+                  label: action.accessibilityLabel ?? action.label,
                   onPress: () => handleActionPress(action),
+                  hitSlop: miniSlop,
                   style: [styles.mini, edgeStyle, theme.shadow.md],
                   children: /* @__PURE__ */ jsx(Icon, { name: action.icon, size: theme.icon.md, color: theme.color.text })
                 }
@@ -174,19 +198,72 @@ function Fab({
         {
           accessibilityRole: "button",
           accessibilityLabel: name,
-          accessibilityState: hasActions ? { expanded: open } : void 0,
+          accessibilityState: hasActions || disabled || loading ? {
+            ...hasActions ? { expanded: open } : null,
+            ...disabled ? { disabled: true } : null,
+            ...loading ? { busy: true } : null
+          } : void 0,
+          disabled,
+          "aria-busy": loading || 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
-          ] })
+          onPressIn: android ? void 0 : () => spring(0.97),
+          onPressOut: android ? void 0 : () => spring(1),
+          android_ripple: android ? { color: theme.state.pressed, borderless: false, foreground: true } : void 0,
+          onFocus: focusRing.handlers.onFocus,
+          onBlur: focusRing.handlers.onBlur,
+          hitSlop: size === "small" ? miniSlop : void 0,
+          style: [
+            android ? { borderRadius: theme.radius.full } : null,
+            focusRing.style,
+            disabled ? { opacity: theme.state.disabledOpacity } : null
+          ],
+          children: /* @__PURE__ */ jsxs(
+            Animated.View,
+            {
+              style: [
+                styles.fab,
+                tone ? { backgroundColor: theme.color[tone], borderWidth: 0 } : null,
+                fullWidth && isExtended ? { alignSelf: "stretch" } : null,
+                edgeStyle,
+                elevation,
+                { transform: [{ scale }] }
+              ],
+              children: [
+                loading ? /* @__PURE__ */ jsx(ActivityIndicator, { "aria-hidden": true, size: "small", color: fg }) : /* @__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,
+                isExtended && trailingIcon && !loading ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: fg }) : null
+              ]
+            }
+          )
         }
       )
     ] })
   ] });
 }
+function MiniFab({
+  label,
+  onPress,
+  hitSlop,
+  style,
+  children
+}) {
+  const theme = useLoamTheme();
+  const focusRing = useFocusRing(theme.radius.full);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      onPress,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      hitSlop,
+      style: [style, focusRing.style],
+      children
+    }
+  );
+}
+var MINI = 40;
 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.
@@ -215,23 +292,23 @@ var sheet = createStyleSheet((theme) => ({
     alignItems: "center",
     gap: theme.space.s3
   },
+  // The Chip sm box: the sm tier, pill corner, label sm role.
   chip: {
     backgroundColor: theme.color.surface,
-    paddingHorizontal: theme.space.s3,
-    paddingVertical: theme.space.s1,
-    borderRadius: theme.radius.sm
+    height: theme.ctl.sm,
+    justifyContent: "center",
+    paddingHorizontal: theme.ctl.px.sm,
+    borderRadius: theme.radius.full
   },
   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,
+    ...theme.ctl.label.sm,
     color: theme.color.text
   },
+  // Mini FAB 40 (Material small FAB); hitSlop grows the touch to tapMin.
   mini: {
-    width: theme.space.s7,
-    height: theme.space.s7,
+    width: MINI,
+    height: MINI,
     borderRadius: theme.radius.full,
     backgroundColor: theme.color.surface,
     alignItems: "center",
@@ -249,8 +326,8 @@ var sheet = createStyleSheet((theme) => ({
           borderRadius: theme.radius.full
         },
         small: {
-          height: theme.space.s7,
-          minWidth: theme.space.s7,
+          height: MINI,
+          minWidth: MINI,
           borderRadius: theme.radius.full
         }
       },
@@ -273,12 +350,10 @@ var sheet = createStyleSheet((theme) => ({
       }
     }
   },
+  // Extended label = label lg (iOS 17 / 600, Android 14 / 500; F62).
   label: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.subheadline.fontSize,
-    lineHeight: theme.type.subheadline.lineHeight,
-    letterSpacing: theme.type.subheadline.letterSpacing
+    ...theme.ctl.label.lg
   }
 }));