@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-4CZMQDQL.js

@@ -0,0 +1,192 @@
+import { DEFAULT_LABELS, payBoxStyle, CardBrandMark, OrDivider } from './chunk-TDWWVJA4.js';
+import { usePayLabels } from './chunk-QNZII37O.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
+import { mask, methodsFor, methodText } from '@btndprojects/loam-pay';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function SavedCardChip({
+  brand,
+  last4,
+  expiry,
+  isDefault = false,
+  onUseAnother,
+  onManage,
+  useAnotherLabel,
+  manageLabel,
+  loading = false,
+  variant,
+  elevation,
+  padding,
+  tone,
+  interactive = false,
+  onPress,
+  error = false,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const labels = useLabels("paymentMethod", DEFAULT_LABELS, labelsProp);
+  const { styles, theme } = useStyles(sheet);
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { testID, accessibilityState: { busy: true }, "aria-busy": true, style, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.space[56], radius: "md" }) });
+  }
+  const box = payBoxStyle(theme, { variant, elevation, padding, tone, error: Boolean(error) });
+  const factsRow = /* @__PURE__ */ jsxs(View, { style: styles.chipFacts, children: [
+    /* @__PURE__ */ jsx(CardBrandMark, { brand, size: "md", labels: labelsProp }),
+    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipMask, children: mask(brand, last4) }),
+    expiry ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipExpiry, children: labels.expires(expiry) }) : null,
+    isDefault ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "neutral", size: "sm", children: labels.defaultBadge }) : null
+  ] });
+  const message = typeof error === "string" && error ? error : void 0;
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        testID,
+        "aria-invalid": error ? true : void 0,
+        style: [styles.chip, box, style],
+        children: [
+          interactive ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: [mask(brand, last4), expiry ? labels.expires(expiry) : null].filter(Boolean).join(", "),
+              onPress,
+              children: factsRow
+            }
+          ) : factsRow,
+          /* @__PURE__ */ jsxs(View, { style: styles.chipActions, children: [
+            onManage ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onManage, children: manageLabel ?? labels.manageCards }) : null,
+            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: onUseAnother, children: useAnotherLabel ?? labels.useDifferentCard })
+          ] })
+        ]
+      }
+    ),
+    message ? /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: message }) : null
+  ] });
+}
+function ExpressPayRow({
+  state,
+  platform,
+  label,
+  secondary,
+  dividerLabel,
+  resolvingLabel: resolvingLabelProp,
+  onExpressPay,
+  loading = false,
+  onInstalments,
+  size = "lg",
+  tone = "accent",
+  motion = "full",
+  error,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const labels = useLabels("paymentMethod", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const locale = useLoamLocale();
+  const resolvingLabel = resolvingLabelProp ?? labels.checkingWallet;
+  const { styles, theme } = useStyles(sheet);
+  const express = methodsFor({ platform }).find((m) => m.kind === "express");
+  const buttonLabel = label ?? (express ? labels.payWith(
+    (methodText(express.id, pay)?.label ?? express.label).toLocaleLowerCase(locale)
+  ) : labels.expressPay);
+  if (state === "unavailable") return null;
+  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.express, style], children: [
+    state === "resolving" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          testID: "express-skeleton",
+          variant: "rect",
+          height: theme.ctl.lg,
+          radius: "md",
+          accessibilityLabel: resolvingLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          role: "status",
+          accessibilityLiveRegion: "polite",
+          style: styles.srOnly,
+          ...{ "aria-live": "polite" },
+          children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: resolvingLabel })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(View, { style: styles.expressButtons, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size,
+          variant: tone === "danger" ? "danger" : tone === "neutral" ? "tonal" : "primary",
+          motion,
+          fullWidth: true,
+          leadingIcon: "lock",
+          loading,
+          onPress: onExpressPay,
+          children: buttonLabel
+        }
+      ),
+      onInstalments && secondary ? /* @__PURE__ */ jsx(Button, { variant: "outline", size, motion, fullWidth: true, onPress: onInstalments, children: secondary }) : null
+    ] }),
+    error ? /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: error }) : null,
+    /* @__PURE__ */ jsx(OrDivider, { label: dividerLabel ?? labels.orPayWithCard, labels: labelsProp })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  chip: {
+    gap: theme.space.s3,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  chipFacts: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  chipMask: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  chipExpiry: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  },
+  chipActions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  express: { gap: theme.space.s4 },
+  expressButtons: { gap: theme.space.s2 },
+  // A 1px clipped box, the same shape `board/` uses: present for assistive tech,
+  // invisible on screen, and never a `display: none` (which is not announced).
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  },
+  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
+  rowBadge: { alignSelf: "center" }
+}));
+
+export { ExpressPayRow, SavedCardChip };

package/dist/chunk-5DTKORLI.js

@@ -0,0 +1,255 @@
+import { HoldToConfirm } from './chunk-YLRSRUPS.js';
+import { haptics } from './chunk-NY2U3PBI.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 { Animated, Pressable, ActivityIndicator, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  loading: "Loading"
+};
+function holdSizeFor(size) {
+  return size === "xs" ? "sm" : size;
+}
+function useForeground(variant) {
+  const theme = useLoamTheme("button");
+  switch (variant) {
+    case "primary":
+      return theme.color.accentInk;
+    case "tonal":
+      return theme.color.accentOnSoft;
+    // v2 on-inks: measured against the danger fill instead of assuming white.
+    case "danger":
+      return theme.color.dangerInk;
+    default:
+      return theme.color.text;
+  }
+}
+function Button({
+  children,
+  variant = "primary",
+  size = "lg",
+  loading = false,
+  disabled = false,
+  fullWidth = false,
+  softDisabled = false,
+  disabledReason,
+  onDisabledPress,
+  leadingIcon,
+  trailingIcon,
+  onPress,
+  accessibilityLabel,
+  motion = "full",
+  hold = false,
+  haptic,
+  onConfirm,
+  holdDuration,
+  confirmingLabel,
+  labels: labelsProp
+}) {
+  const labels = useLabels("button", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("button");
+  const soft = softDisabled && !disabled;
+  const { styles } = useStyles(sheet, { variant, size, disabled: disabled || soft, fullWidth });
+  const fg = useForeground(variant);
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const kick = React.useRef(new Animated.Value(0)).current;
+  const [checked, setChecked] = React.useState(false);
+  const [pending, setPending] = React.useState(false);
+  const [spin, setSpin] = React.useState(false);
+  React.useEffect(() => {
+    if (!pending) {
+      setSpin(false);
+      return;
+    }
+    const t = setTimeout(() => setSpin(true), 500);
+    return () => clearTimeout(t);
+  }, [pending]);
+  React.useEffect(() => {
+    if (!checked) return;
+    const t = setTimeout(() => setChecked(false), 1500);
+    return () => clearTimeout(t);
+  }, [checked]);
+  const focusRing = useFocusRing(theme.ctl.r[size], isAndroidIdiom(theme));
+  if (hold && variant === "danger") {
+    return /* @__PURE__ */ jsx(
+      HoldToConfirm,
+      {
+        variant: "danger",
+        size: holdSizeFor(size),
+        fullWidth,
+        disabled,
+        leadingIcon,
+        motion,
+        duration: holdDuration,
+        confirmingLabel,
+        accessibilityLabel,
+        onConfirm: onConfirm ?? (() => {
+        }),
+        children
+      }
+    );
+  }
+  const busy = loading || pending;
+  const interactive = !disabled && !busy && !soft;
+  const iconSize = theme.ctl.icon[size];
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const android = isAndroidIdiom(theme);
+  const animatePress = !android && motion === "full" && !theme.reduceMotion;
+  const pressFill = android ? void 0 : variant === "primary" ? theme.color.accentFillPress : variant === "danger" ? theme.color.dangerFillPress : variant === "outline" || variant === "ghost" ? theme.state.pressed : void 0;
+  const tapHaptic = haptic ?? (variant === "primary" || variant === "danger");
+  const spring = (to) => Animated.spring(scale, {
+    ...springConfig(theme, "fs"),
+    toValue: to,
+    useNativeDriver: true
+  }).start();
+  const press = () => {
+    const result = onPress?.();
+    if (!result || typeof result.then !== "function") return;
+    setPending(true);
+    result.then(
+      () => {
+        setPending(false);
+        if (motion !== "none") setChecked(true);
+      },
+      () => {
+        setPending(false);
+        if (!animatePress) return;
+        kick.setValue(4);
+        Animated.spring(kick, {
+          ...springConfig(theme, "fs", { thrown: true }),
+          toValue: 0,
+          useNativeDriver: true
+        }).start();
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityHint: soft ? disabledReason : void 0,
+      accessibilityState: { disabled: disabled || soft, busy },
+      "aria-disabled": soft ? true : void 0,
+      disabled,
+      onPress: soft && !busy ? onDisabledPress : interactive ? press : void 0,
+      onPressIn: interactive && (animatePress || tapHaptic) ? () => {
+        if (tapHaptic) haptics.impact(variant === "danger" ? "medium" : "light");
+        if (animatePress) spring(0.97);
+      } : void 0,
+      onPressOut: interactive && animatePress ? () => spring(1) : void 0,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      hitSlop: { top: slopY, bottom: slopY },
+      android_ripple: android && interactive ? { color: theme.state.pressed, borderless: false, foreground: true } : void 0,
+      style: [
+        // The ripple is drawn on the Pressable, so it carries the corner and
+        // clips to it; the dim covers the whole control (R5).
+        android ? { borderRadius: theme.ctl.r[size], overflow: "hidden" } : null,
+        disabled || soft ? { opacity: theme.state.disabledOpacity } : null,
+        fullWidth ? fullWidthStyle : null,
+        focusRing.style
+      ],
+      children: ({ pressed }) => /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          style: [
+            styles.base,
+            pressed && interactive && pressFill ? { backgroundColor: pressFill } : null,
+            { transform: [{ scale }, { translateX: kick }] }
+          ],
+          children: [
+            checked ? /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: fg }) : loading || pending && spin ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: fg, accessibilityLabel: labels.loading }) : leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: fg }) : null,
+            typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children }) : children,
+            !loading && !checked && trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: fg }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+var fullWidthStyle = { alignSelf: "stretch" };
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      variant: {
+        primary: { backgroundColor: theme.color.accent },
+        // `accentSoft` collapses to the plain surface under high contrast, which
+        // would leave a tonal button indistinguishable from a ghost one. The
+        // accent edge is what separates them there; it is `transparent` at
+        // normal contrast, and gives `tonal` the same bordered box as `outline`.
+        tonal: {
+          backgroundColor: theme.color.accentSoft,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.edge.accent
+        },
+        outline: {
+          backgroundColor: "transparent",
+          // R3: a pressable edge is the strong 1.5 rule.
+          borderWidth: theme.borderWidth.strong,
+          borderColor: theme.color.borderStrong
+        },
+        ghost: { backgroundColor: "transparent" },
+        danger: { backgroundColor: theme.color.danger }
+      },
+      // Height, horizontal padding, gap and radius all resolve from the same
+      // control-size tier — one ramp, four steps (26 / 30 / 36 / 44).
+      size: {
+        xs: {
+          height: theme.ctl.xs,
+          paddingHorizontal: theme.ctl.px.xs,
+          gap: theme.ctl.gap.xs,
+          borderRadius: theme.ctl.r.xs
+        },
+        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
+        }
+      },
+      // R5: disabled is a dim (opacity on the Pressable), never a repaint.
+      disabled: { true: {}, false: {} },
+      fullWidth: { true: { alignSelf: "stretch" }, false: {} }
+    }
+  },
+  // F13: the label reads the platform role for its tier (iOS caption 1 →
+  // body at 600, Android label large 14 / 500), from `theme.ctl.label`.
+  label: {
+    fontFamily: theme.font.sans,
+    variants: {
+      size: {
+        xs: theme.ctl.label.xs,
+        sm: theme.ctl.label.sm,
+        md: theme.ctl.label.md,
+        lg: theme.ctl.label.lg
+      },
+      variant: {},
+      disabled: {},
+      fullWidth: {}
+    }
+  }
+}));
+
+export { Button };

package/dist/{chunk-LOE5YNN3.js → chunk-5J4WFXFA.js}

@@ -1,7 +1,8 @@
 import { overscrollIntent, bandIndicator, overscrollOffset, GESTURE_SLOP_PX, SCROLL_TOP_SLOP_PX, isReachExitArmed, REACH_ARM_PX } from './chunk-HU2EQNRZ.js';
-import { expandedProps } from './chunk-RQ3HASCC.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
 import { useWindowDimensions, Animated, Easing, AccessibilityInfo, PanResponder, View, Pressable, ScrollView } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -38,23 +39,41 @@ function reachShift(windowHeight, reachZone = 0.62) {
   if (!Number.isFinite(windowHeight) || windowHeight <= 0) return REFERENCE_SHIFT;
   return Math.round(windowHeight * (1 - reachZone));
 }
+var DEFAULT_LABELS = {
+  exit: "Exit one-handed reach",
+  exitHint: "Drag up or tap to move the content back",
+  indicator: "Pull down to refresh, keep pulling for one-handed reach",
+  refreshing: "Refreshing",
+  enterAnnouncement: "One-handed reach on. Content moved down.",
+  exitAnnouncement: "One-handed reach off."
+};
 function OneHanded({
   active,
   onActiveChange,
   onRefresh,
   refreshing,
   shift,
-  exitLabel = "Exit one-handed reach",
-  exitHint = "Drag up or tap to move the content back",
-  indicatorLabel = "Pull down to refresh, keep pulling for one-handed reach",
-  refreshingLabel = "Refreshing",
-  enterAnnouncement = "One-handed reach on. Content moved down.",
-  exitAnnouncement = "One-handed reach off.",
+  align = "stretch",
+  orientation = "vertical",
+  exitLabel: exitLabelProp,
+  exitHint: exitHintProp,
+  indicatorLabel: indicatorLabelProp,
+  refreshingLabel: refreshingLabelProp,
+  enterAnnouncement: enterAnnouncementProp,
+  exitAnnouncement: exitAnnouncementProp,
+  labels: labelsProp,
   children,
   ...rest
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("one-handed");
+  const labels = useLabels("oneHanded", DEFAULT_LABELS, labelsProp);
+  const exitLabel = exitLabelProp ?? labels.exit;
+  const exitHint = exitHintProp ?? labels.exitHint;
+  const indicatorLabel = indicatorLabelProp ?? labels.indicator;
+  const refreshingLabel = refreshingLabelProp ?? labels.refreshing;
+  const enterAnnouncement = enterAnnouncementProp ?? labels.enterAnnouncement;
+  const exitAnnouncement = exitAnnouncementProp ?? labels.exitAnnouncement;
   const { height: windowHeight } = useWindowDimensions();
   const dropDistance = shift ?? reachShift(windowHeight, theme.layout.reachZone);
   const bandHeight = Math.max(dropDistance, EXIT_BAR_MIN_HEIGHT);
@@ -120,7 +139,15 @@ function OneHanded({
       springTo(dropScaleX, 1),
       springTo(dropScaleY, 1)
     ]).start();
-  }, [dropOpacity, dropY, dropScaleX, dropScaleY, springTo, exitEasing, theme.motion.exit.duration]);
+  }, [
+    dropOpacity,
+    dropY,
+    dropScaleX,
+    dropScaleY,
+    springTo,
+    exitEasing,
+    theme.motion.exit.duration
+  ]);
   const onRefreshRef = React.useRef(onRefresh);
   onRefreshRef.current = onRefresh;
   const controlledRefreshing = refreshing != null;
@@ -138,6 +165,7 @@ function OneHanded({
     const changed = wasRefreshing.current !== isRefreshing;
     wasRefreshing.current = isRefreshing;
     if (isRefreshing) {
+      if (changed) AccessibilityInfo.announceForAccessibility(refreshingLabel);
       spinnerOpacity.setValue(1);
       Animated.parallel([
         Animated.timing(dropOpacity, {
@@ -383,6 +411,7 @@ function OneHanded({
       {
         accessibilityRole: "progressbar",
         accessibilityLabel: isRefreshing ? refreshingLabel : indicatorLabel,
+        accessibilityState: { busy: isRefreshing },
         style: [
           styles.droplet,
           {
@@ -409,23 +438,38 @@ function OneHanded({
         )
       }
     ),
-    /* @__PURE__ */ jsx(Animated.View, { style: [styles.content, { transform: [{ translateY: contentY }] }], children: /* @__PURE__ */ jsx(
-      ScrollView,
+    /* @__PURE__ */ jsx(
+      Animated.View,
       {
-        ...rest,
-        focusable: true,
-        scrollEventThrottle: 16,
-        contentContainerStyle: [
-          rest.contentContainerStyle,
-          bandMounted ? { paddingBottom: dropDistance } : null
+        testID: "one-handed-content",
+        style: [
+          styles.content,
+          align !== "stretch" && bandMounted ? {
+            width: `${theme.layout.reachZone * 100}%`,
+            alignSelf: align === "start" ? "flex-start" : "flex-end"
+          } : null,
+          { transform: [{ translateY: contentY }] }
         ],
-        onScroll: (e) => {
-          scrollTop.current = e.nativeEvent.contentOffset.y;
-          rest.onScroll?.(e);
-        },
-        children
+        children: /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            ...rest,
+            horizontal: orientation === "horizontal" ? true : rest.horizontal,
+            focusable: true,
+            scrollEventThrottle: 16,
+            contentContainerStyle: [
+              rest.contentContainerStyle,
+              bandMounted ? { paddingBottom: dropDistance } : null
+            ],
+            onScroll: (e) => {
+              scrollTop.current = e.nativeEvent.contentOffset.y;
+              rest.onScroll?.(e);
+            },
+            children
+          }
+        )
       }
-    ) })
+    )
   ] });
 }
 var sheet = createStyleSheet((theme) => ({