@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-AWJOCGFZ.js → chunk-YLRSRUPS.js}

@@ -1,14 +1,22 @@
 import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.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;
+var DEFAULT_LABELS = {
+  hint: "Press and hold to confirm. Releasing early cancels.",
+  confirmed: "Confirmed",
+  holding: "Keep holding to confirm",
+  cancelled: "Cancelled"
+};
+function useForeground(variant) {
+  const theme = useLoamTheme("hold-to-confirm");
   return variant === "primary" ? theme.color.accentInk : theme.color.dangerInk;
 }
 function HoldToConfirm({
@@ -16,18 +24,25 @@ function HoldToConfirm({
   onConfirm,
   duration = DEFAULT_DURATION,
   variant = "danger",
-  size = "md",
-  disabled = false,
+  size = "lg",
+  disabled: disabledProp = false,
   fullWidth = false,
   confirmingLabel,
   leadingIcon,
+  trailingIcon,
+  loading = false,
   motion = "full",
   accessibilityLabel,
-  onProgress
+  onProgress,
+  labels: labelsProp
 }) {
-  const { styles } = useStyles(sheet, { variant, size, disabled, fullWidth });
-  const theme = useLoamTheme();
-  const fg = useForeground(variant, disabled);
+  const labels = useLabels("holdToConfirm", DEFAULT_LABELS, labelsProp);
+  const inert = disabledProp || loading;
+  const disabled = inert;
+  const { styles } = useStyles(sheet, { variant, size, disabled: disabledProp, fullWidth });
+  const theme = useLoamTheme("hold-to-confirm");
+  const android = isAndroidIdiom(theme);
+  const fg = useForeground(variant);
   const iconSize = theme.ctl.icon[size];
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
   const [holding, setHolding] = React.useState(false);
@@ -60,14 +75,14 @@ function HoldToConfirm({
   const fireConfirm = React.useCallback(() => {
     clear();
     setHolding(false);
-    setMessage("Confirmed");
+    setMessage(labels.confirmed);
     haptics.impact("heavy");
     onConfirm();
-  }, [clear, onConfirm]);
+  }, [clear, onConfirm, labels.confirmed]);
   const start = React.useCallback(() => {
     if (disabled || timer.current !== void 0) return;
     setHolding(true);
-    setMessage("Keep holding to confirm");
+    setMessage(labels.holding);
     progress.stopAnimation();
     progress.setValue(0);
     Animated.timing(progress, {
@@ -77,18 +92,29 @@ function HoldToConfirm({
       useNativeDriver: false
     }).start();
     if (motion === "full") {
-      Animated.spring(scale, { toValue: 0.97, useNativeDriver: true, speed: 40, bounciness: 6 }).start();
+      if (!android)
+        Animated.spring(scale, {
+          toValue: 0.97,
+          useNativeDriver: true,
+          speed: 40,
+          bounciness: 6
+        }).start();
     }
     timer.current = setTimeout(fireConfirm, duration);
-  }, [disabled, duration, motion, progress, scale, fireConfirm]);
+  }, [android, disabled, duration, motion, progress, scale, fireConfirm, labels.holding]);
   const cancel = React.useCallback(() => {
     if (motion === "full") {
-      Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 6 }).start();
+      Animated.spring(scale, {
+        toValue: 1,
+        useNativeDriver: true,
+        speed: 40,
+        bounciness: 6
+      }).start();
     }
     if (timer.current === void 0) return;
     clear();
     setHolding(false);
-    setMessage("Cancelled");
+    setMessage(labels.cancelled);
     progress.stopAnimation();
     Animated.timing(progress, {
       toValue: 0,
@@ -96,7 +122,7 @@ function HoldToConfirm({
       easing: Easing.bezier(...theme.motion.exit.easing),
       useNativeDriver: false
     }).start();
-  }, [clear, motion, progress, scale, theme.motion.exit]);
+  }, [clear, motion, progress, scale, theme.motion.exit, labels.cancelled]);
   React.useEffect(() => clear, [clear]);
   const width = progress.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] });
   const label = holding && confirmingLabel ? confirmingLabel : children;
@@ -106,28 +132,41 @@ function HoldToConfirm({
     {
       accessibilityRole: "button",
       accessibilityLabel: a11yLabel,
-      accessibilityHint: "Press and hold to confirm. Releasing early cancels.",
-      accessibilityState: { disabled },
+      accessibilityHint: labels.hint,
+      accessibilityState: { disabled, busy: loading },
+      "aria-busy": loading || void 0,
       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,
+      android_ripple: android && !disabled ? { color: theme.state.pressed, borderless: false, foreground: true } : void 0,
+      style: [
+        android ? { borderRadius: theme.ctl.r[size], overflow: "hidden" } : null,
+        // R5: disabled keeps the variant and dims to 0.38.
+        disabledProp ? { opacity: theme.state.disabledOpacity } : null,
+        fullWidth ? fullWidthStyle : null
+      ],
       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(
+            Animated.View,
+            {
+              "aria-hidden": true,
+              style: [
+                styles.fill,
+                {
+                  width,
+                  backgroundColor: variant === "primary" ? theme.color.accentFillPress : theme.color.dangerFillPress
+                }
+              ]
+            }
+          ),
+          loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", color: fg }) : 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,
+          trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: fg }) : null
         ] }),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            accessibilityLiveRegion: "polite",
-            style: visuallyHidden,
-            children: message
-          }
-        )
+        /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", style: visuallyHidden, children: message })
       ]
     }
   );
@@ -167,41 +206,28 @@ var sheet = createStyleSheet((theme) => ({
           borderRadius: theme.ctl.r.lg
         }
       },
-      disabled: {
-        true: { backgroundColor: theme.color.surface3 },
-        false: {}
-      },
+      // R5: disabled is the dim on the Pressable, never a repaint.
+      disabled: { true: {}, false: {} },
       fullWidth: { true: { alignSelf: "stretch" }, false: {} }
     }
   },
-  // Translucent state-layer fill, anchored to the start edge, behind the label.
+  // The hold fill, anchored to the start edge, behind the label. It is the
+  // tone's press step (set per variant at render), never a scrim: the press
+  // step moves away from the ink, so the label keeps 4.5:1 in every theme.
   fill: {
     position: "absolute",
     top: 0,
     bottom: 0,
-    start: 0,
-    backgroundColor: theme.state.pressed
+    start: 0
   },
+  // F13: the platform label role for the tier (600 iOS, 500 Android).
   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
-        }
+        sm: theme.ctl.label.sm,
+        md: theme.ctl.label.md,
+        lg: theme.ctl.label.lg
       },
       variant: {},
       disabled: {},

package/dist/chunk-YM6MPJ4A.js

@@ -0,0 +1 @@
+

package/dist/chunk-YV7KZENV.js

@@ -0,0 +1,200 @@
+import { haptics } from './chunk-NY2U3PBI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { StyleSheet, Animated, Pressable, View, ActivityIndicator, Easing } from 'react-native';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function surfaceFor(theme, variant, tone) {
+  const t = variant === "danger" ? "danger" : tone ?? (variant === "outline" || variant === "ghost" ? "neutral" : "accent");
+  const c = theme.color;
+  const plain = {
+    neutral: c.text2,
+    accent: c.accentStrong,
+    good: c.good,
+    warn: c.warn,
+    danger: c.danger
+  }[t];
+  if (!variant) return { style: null, ink: tone ? plain : c.text2 };
+  const solid = {
+    neutral: { fill: c.text, ink: c.bg },
+    accent: { fill: c.accent, ink: c.accentInk },
+    good: { fill: c.good, ink: c.goodInk },
+    warn: { fill: c.warn, ink: c.warnInk },
+    danger: { fill: c.danger, ink: c.dangerInk }
+  }[t];
+  const soft = {
+    neutral: { fill: c.surface2, ink: c.text2, edge: theme.edge.neutral },
+    accent: { fill: c.accentSoft, ink: c.accentOnSoft, edge: theme.edge.accent },
+    good: { fill: c.goodSoft, ink: c.goodOnSoft, edge: theme.edge.good },
+    warn: { fill: c.warnSoft, ink: c.warnOnSoft, edge: theme.edge.warn },
+    danger: { fill: c.dangerSoft, ink: c.dangerOnSoft, edge: theme.edge.danger }
+  }[t];
+  switch (variant) {
+    case "primary":
+    case "danger":
+      return { style: { backgroundColor: solid.fill }, ink: solid.ink };
+    case "tonal":
+      return {
+        style: { backgroundColor: soft.fill, borderWidth: theme.borderWidth.base, borderColor: soft.edge },
+        ink: soft.ink
+      };
+    case "outline":
+      return {
+        style: {
+          backgroundColor: "transparent",
+          borderWidth: theme.borderWidth.strong,
+          borderColor: t === "neutral" ? c.borderStrong : c[t]
+        },
+        ink: plain
+      };
+    default:
+      return { style: { backgroundColor: "transparent" }, ink: plain };
+  }
+}
+function Touchable({
+  children,
+  onPress,
+  scaleTo = 0.97,
+  ripple = "auto",
+  hapticOnPress = false,
+  disabled = false,
+  style,
+  accessibilityLabel,
+  loading = false,
+  leading,
+  trailing,
+  fullWidth = false,
+  variant,
+  tone,
+  size
+}) {
+  const theme = useLoamTheme("interactions");
+  const android = isAndroidIdiom(theme);
+  const surface = surfaceFor(theme, variant, tone);
+  const slopY = size ? Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2) : 0;
+  const nativeRipple = android && ripple === "auto";
+  const overlay = ripple === true || ripple === "auto" && !android;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const focusRing = useFocusRing(
+    StyleSheet.flatten(style)?.borderRadius,
+    nativeRipple
+  );
+  const highlight = React.useRef(new Animated.Value(0)).current;
+  const layerIn = theme.motion.hover;
+  const layerOut = theme.motion.exit;
+  const animateScale = !android && !theme.reduceMotion;
+  const pressIn = () => {
+    if (animateScale) {
+      Animated.spring(scale, {
+        ...springConfig(theme, "fs"),
+        toValue: scaleTo,
+        useNativeDriver: true
+      }).start();
+    }
+    if (overlay) {
+      Animated.timing(highlight, {
+        toValue: 1,
+        duration: layerIn.duration,
+        easing: Easing.bezier(...layerIn.easing),
+        useNativeDriver: true
+      }).start();
+    }
+  };
+  const pressOut = () => {
+    if (animateScale) {
+      Animated.spring(scale, {
+        ...springConfig(theme, "fs"),
+        toValue: 1,
+        useNativeDriver: true
+      }).start();
+    }
+    if (overlay) {
+      Animated.timing(highlight, {
+        toValue: 0,
+        duration: layerOut.duration,
+        easing: Easing.bezier(...layerOut.easing),
+        useNativeDriver: true
+      }).start();
+    }
+  };
+  const handlePress = () => {
+    if (loading) return;
+    if (hapticOnPress) haptics.selection();
+    onPress?.();
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      hitSlop: size ? { top: slopY, bottom: slopY } : void 0,
+      accessibilityLabel,
+      accessibilityState: { disabled, busy: loading },
+      "aria-busy": loading || void 0,
+      disabled,
+      onPress: disabled ? void 0 : handlePress,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      onPressIn: disabled ? void 0 : pressIn,
+      onPressOut: disabled ? void 0 : pressOut,
+      android_ripple: nativeRipple && !disabled ? { color: theme.state.pressed, borderless: false, foreground: true } : void 0,
+      style: [
+        nativeRipple ? [styles.base, pickRadius(style)] : null,
+        // R5: disabled is a dim of the whole control, never a repaint.
+        disabled ? { opacity: theme.state.disabledOpacity } : null,
+        fullWidth ? styles.full : null,
+        focusRing.style
+      ],
+      children: /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          style: [
+            styles.base,
+            surface.style,
+            size ? { minHeight: theme.ctl[size], justifyContent: "center" } : null,
+            style,
+            leading != null || trailing != null ? { flexDirection: "row", alignItems: "center", gap: theme.space.s2 } : null,
+            { transform: [{ scale }] }
+          ],
+          children: [
+            leading,
+            children,
+            trailing,
+            loading ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFillObject, styles.spinner], pointerEvents: "none", children: /* @__PURE__ */ jsx(ActivityIndicator, { "aria-hidden": true, size: "small", color: surface.ink }) }) : null,
+            overlay ? /* @__PURE__ */ jsx(
+              Animated.View,
+              {
+                style: [
+                  StyleSheet.absoluteFillObject,
+                  styles.highlight,
+                  {
+                    // The neutral state layer, never an accent tint (F63).
+                    backgroundColor: theme.state.pressed,
+                    opacity: highlight,
+                    pointerEvents: "none"
+                  }
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+function pickRadius(style) {
+  const flat = StyleSheet.flatten(style);
+  return flat?.borderRadius == null ? void 0 : { borderRadius: flat.borderRadius };
+}
+var styles = StyleSheet.create({
+  // Clips the highlight overlay to the container's own border radius.
+  base: { overflow: "hidden", position: "relative" },
+  // Kept subtle — the animated `opacity` tops out well below this ceiling.
+  highlight: { opacity: 0 },
+  full: { alignSelf: "stretch" },
+  spinner: { alignItems: "center", justifyContent: "center" }
+});
+
+export { Touchable };