@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-PID3NJB7.js

@@ -0,0 +1,405 @@
+import { Sheet } from './chunk-QYPE5JX3.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Platform, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var MIN_SCALE = 0.85;
+var TILT = 50;
+function WheelPicker({
+  items,
+  value,
+  onValueChange,
+  visibleRows = 5,
+  accessibilityLabel,
+  motion = "full",
+  style,
+  testID
+}) {
+  const theme = useLoamTheme("picker");
+  const { styles } = useStyles(sheet);
+  const level = useResolvedMotion(motion, "picker");
+  const row = theme.tapMin;
+  const pad = row * (visibleRows - 1) / 2;
+  const selectedIndex = Math.max(
+    0,
+    items.findIndex((item) => item.value === value)
+  );
+  const scrollY = React.useRef(new Animated.Value(selectedIndex * row)).current;
+  const scroller = React.useRef(null);
+  const live = React.useRef(selectedIndex);
+  const settled = React.useRef(selectedIndex);
+  const indexAt = (y) => Math.min(items.length - 1, Math.max(0, Math.round(y / row)));
+  React.useLayoutEffect(() => {
+    if (Platform.OS === "web")
+      scroller.current?.scrollTo({ y: selectedIndex * row, animated: false });
+  }, []);
+  React.useEffect(() => {
+    if (selectedIndex === settled.current) return;
+    settled.current = selectedIndex;
+    live.current = selectedIndex;
+    scroller.current?.scrollTo({ y: selectedIndex * row, animated: level === "full" });
+  }, [selectedIndex, row, level]);
+  const commit = (index) => {
+    settled.current = index;
+    const item = items[index];
+    if (item && item.value !== value) onValueChange?.(item.value);
+  };
+  const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+    useNativeDriver: true,
+    listener: (e) => {
+      const i = indexAt(e.nativeEvent.contentOffset.y);
+      if (i !== live.current) {
+        live.current = i;
+        haptics.selection();
+      }
+      if (idle.current) clearTimeout(idle.current);
+      idle.current = setTimeout(() => commit(i), 150);
+    }
+  });
+  const idle = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      if (idle.current) clearTimeout(idle.current);
+    },
+    []
+  );
+  const onEnd = (e) => {
+    if (idle.current) clearTimeout(idle.current);
+    commit(indexAt(e.nativeEvent.contentOffset.y));
+  };
+  const step = (delta) => {
+    const next = Math.min(items.length - 1, Math.max(0, settled.current + delta));
+    if (next === settled.current) return;
+    haptics.selection();
+    live.current = next;
+    scroller.current?.scrollTo({ y: next * row, animated: level === "full" });
+    commit(next);
+  };
+  const current = items[selectedIndex];
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel,
+      accessibilityValue: { text: current?.label },
+      ...{ role: "slider", "aria-valuetext": current?.label },
+      accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+      onAccessibilityAction: (e) => step(e.nativeEvent.actionName === "increment" ? 1 : -1),
+      style: [styles.wheel, { height: row * visibleRows }, style],
+      children: [
+        /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.band, { top: pad, height: row }] }),
+        /* @__PURE__ */ jsx(
+          Animated.ScrollView,
+          {
+            ref: scroller,
+            showsVerticalScrollIndicator: false,
+            snapToInterval: row,
+            decelerationRate: "fast",
+            contentOffset: { x: 0, y: selectedIndex * row },
+            contentContainerStyle: { paddingVertical: pad },
+            scrollEventThrottle: 16,
+            onScroll,
+            onMomentumScrollEnd: onEnd,
+            style: Platform.OS === "web" ? { scrollSnapType: "y mandatory" } : void 0,
+            ...{ "aria-hidden": true },
+            children: items.map((item, i) => {
+              const at = i * row;
+              const range = [at - 2 * row, at - row, at, at + row, at + 2 * row];
+              const opacity = scrollY.interpolate({
+                inputRange: range,
+                outputRange: [0.3, 0.6, 1, 0.6, 0.3],
+                extrapolate: "clamp"
+              });
+              const turn = level === "full" ? [
+                { perspective: row * 8 },
+                {
+                  rotateX: scrollY.interpolate({
+                    inputRange: range,
+                    outputRange: [
+                      `${-TILT}deg`,
+                      `${-TILT / 2}deg`,
+                      "0deg",
+                      `${TILT / 2}deg`,
+                      `${TILT}deg`
+                    ],
+                    extrapolate: "clamp"
+                  })
+                },
+                {
+                  scale: scrollY.interpolate({
+                    inputRange: range,
+                    outputRange: [
+                      MIN_SCALE,
+                      (1 + MIN_SCALE) / 2,
+                      1,
+                      (1 + MIN_SCALE) / 2,
+                      MIN_SCALE
+                    ],
+                    extrapolate: "clamp"
+                  })
+                }
+              ] : [];
+              return /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  style: [
+                    styles.row,
+                    { height: row, opacity, transform: turn },
+                    Platform.OS === "web" ? { scrollSnapAlign: "center" } : null
+                  ],
+                  children: /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: [styles.label, i === selectedIndex && styles.labelSelected],
+                      numberOfLines: 1,
+                      children: item.label
+                    }
+                  )
+                },
+                item.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  wheel: { alignSelf: "stretch", overflow: "hidden" },
+  band: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.accentSoft,
+    // The tint collapses to the surface under `contrast: 'more'`, where
+    // `edge.accent` turns opaque and keeps the selection band drawn.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent
+  },
+  row: { alignItems: "center", justifyContent: "center" },
+  label: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[20],
+    color: theme.color.text
+  },
+  labelSelected: { fontWeight: theme.fontWeight.semibold, color: theme.color.accentOnSoft }
+}));
+var DEFAULT_LABELS = {
+  select: "Select\u2026",
+  done: "Done"
+};
+function Picker({
+  items,
+  value,
+  onValueChange,
+  placeholder: placeholderProp,
+  title,
+  disabled = false,
+  size = "md",
+  accessibilityLabel,
+  variant = "list",
+  motion = "full",
+  labels: labelsProp
+}) {
+  const labels = useLabels("picker", DEFAULT_LABELS, labelsProp);
+  const placeholder = placeholderProp ?? labels.select;
+  const [open, setOpen] = React.useState(false);
+  const [draft, setDraft] = React.useState(value);
+  React.useEffect(() => {
+    if (open) setDraft(value ?? items[0]?.value);
+  }, [open]);
+  const theme = useLoamTheme("picker");
+  const selected = items.find((item) => item.value === value);
+  const isPlaceholder = selected == null;
+  const displayText = selected?.label ?? placeholder;
+  const { styles } = useStyles(sheet2, { size, disabled, placeholder: isPlaceholder });
+  const iconSize = theme.ctl.icon[size];
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const handleSelect = (next) => {
+    haptics.selection();
+    onValueChange?.(next);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, ${displayText}` : displayText,
+        accessibilityState: { disabled, expanded: open },
+        ...expandedProps(open),
+        disabled,
+        onPress: disabled ? void 0 : () => setOpen(true),
+        hitSlop: { top: slopY, bottom: slopY },
+        style: styles.trigger,
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.value, numberOfLines: 1, children: displayText }),
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: iconSize, color: theme.color.text3 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Sheet,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title,
+        footer: variant === "wheel" ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            fullWidth: true,
+            onPress: () => {
+              if (draft != null && draft !== value) onValueChange?.(draft);
+              setOpen(false);
+            },
+            children: labels.done
+          }
+        ) : void 0,
+        children: [
+          variant === "wheel" ? /* @__PURE__ */ jsx(
+            WheelPicker,
+            {
+              items,
+              value: draft,
+              onValueChange: setDraft,
+              accessibilityLabel: title ?? accessibilityLabel ?? placeholder,
+              motion
+            }
+          ) : null,
+          variant === "wheel" ? null : items.map((item) => {
+            const isSelected = item.value === value;
+            return /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: item.label,
+                accessibilityState: { selected: isSelected },
+                onPress: () => handleSelect(item.value),
+                style: ({ pressed }) => [
+                  styles.option,
+                  isSelected ? styles.optionSelected : null,
+                  pressed ? styles.optionPressed : null
+                ],
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: [styles.optionLabel, isSelected ? styles.optionLabelSelected : null],
+                      children: item.label
+                    }
+                  ),
+                  isSelected ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accentOnSoft }) : null
+                ]
+              },
+              item.value
+            );
+          })
+        ]
+      }
+    )
+  ] });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.surface2,
+    // The reference draws a `1.5px` field edge — the static `w2` weight.
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    variants: {
+      // Height, padding, gap and corner radius all resolve from one control-size
+      // tier (26 / 30 / 36 / 44), matching {@link Input}.
+      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
+        }
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  value: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    variants: {
+      size: {
+        xs: { fontSize: theme.fontSize[14] },
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[16] },
+        lg: { fontSize: theme.fontSize[16] }
+      },
+      placeholder: {
+        true: { color: theme.color.text3 },
+        false: { color: theme.color.text }
+      }
+    }
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.space[48],
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2,
+    borderRadius: theme.radius.md,
+    // Every row carries the edge weight so selecting one does not shift the text.
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent"
+  },
+  // The reference's selection band: an `accentSoft` `radius.md` plate behind the
+  // centred option. `-soft` tints collapse at high contrast, so it carries the
+  // matching tone edge.
+  optionSelected: {
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent
+  },
+  optionPressed: { backgroundColor: theme.color.surface2 },
+  optionLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    color: theme.color.text2
+  },
+  optionLabelSelected: {
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.accentOnSoft
+  }
+}));
+
+export { Picker, WheelPicker };

package/dist/{chunk-66SG2H23.js → chunk-PMMTGBBS.js}

@@ -1,11 +1,13 @@
-import { Skeleton } from './chunk-RIBDXGUG.js';
-import { CardBrandMark, OrDivider } from './chunk-PUPM2YGF.js';
-import { Badge } from './chunk-SBMNWWBV.js';
-import { Button } from './chunk-3ARE4TES.js';
+import { Skeleton } from './chunk-PNF3NKB5.js';
+import { DEFAULT_LABELS, CardBrandMark, OrDivider } from './chunk-ROCUG24E.js';
+import { usePayLabels } from './chunk-GEIGMWNF.js';
+import { Badge } from './chunk-TN2ZNJUI.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
 import 'react';
 import { View, Text } from 'react-native';
 import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
-import { mask, methodsFor } from '@btndprojects/loam-pay';
+import { mask, methodsFor, methodText } from '@btndprojects/loam-pay';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function SavedCardChip({
@@ -15,22 +17,24 @@ function SavedCardChip({
   isDefault = false,
   onUseAnother,
   onManage,
-  useAnotherLabel = "Use a different card",
-  manageLabel = "Manage cards",
+  useAnotherLabel,
+  manageLabel,
+  labels: labelsProp,
   style,
   testID
 }) {
+  const labels = useLabels("paymentMethod", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
   return /* @__PURE__ */ jsxs(View, { testID, style: [styles.chip, style], children: [
     /* @__PURE__ */ jsxs(View, { style: styles.chipFacts, children: [
-      /* @__PURE__ */ jsx(CardBrandMark, { brand, size: "md" }),
+      /* @__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: `Expires ${expiry}` }) : null,
-      isDefault ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "neutral", size: "sm", children: "default" }) : null
+      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
     ] }),
     /* @__PURE__ */ jsxs(View, { style: styles.chipActions, children: [
-      onManage ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onManage, children: manageLabel }) : null,
-      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: onUseAnother, children: useAnotherLabel })
+      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 })
     ] })
   ] });
 }
@@ -39,16 +43,22 @@ function ExpressPayRow({
   platform,
   label,
   secondary,
-  dividerLabel = "or pay with card",
-  resolvingLabel = "Checking for a wallet on this device",
+  dividerLabel,
+  resolvingLabel: resolvingLabelProp,
   onExpressPay,
+  loading = false,
   onInstalments,
+  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 ? `Pay with ${express.label.toLowerCase()}` : "Express pay");
+  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: [
@@ -73,10 +83,10 @@ function ExpressPayRow({
         }
       )
     ] }) : /* @__PURE__ */ jsxs(View, { style: styles.expressButtons, children: [
-      /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, leadingIcon: "lock", onPress: onExpressPay, children: buttonLabel }),
+      /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, leadingIcon: "lock", loading, onPress: onExpressPay, children: buttonLabel }),
       onInstalments && secondary ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, onPress: onInstalments, children: secondary }) : null
     ] }),
-    /* @__PURE__ */ jsx(OrDivider, { label: dividerLabel })
+    /* @__PURE__ */ jsx(OrDivider, { label: dividerLabel ?? labels.orPayWithCard, labels: labelsProp })
   ] });
 }
 var sheet = createStyleSheet((theme) => ({

package/dist/{chunk-RIBDXGUG.js → chunk-PNF3NKB5.js}

@@ -1,9 +1,12 @@
+import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
 import { Animated, Easing, AccessibilityInfo, View } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx } from 'react/jsx-runtime';
 
-// src/skeleton/skeleton.tsx
+var DEFAULT_LABELS = {
+  loading: "Loading"
+};
 var CIRCLE_DEFAULT = 40;
 var TEXT_HEIGHT = 14;
 var RECT_HEIGHT = 120;
@@ -13,10 +16,14 @@ function Skeleton({
   height,
   radius,
   style,
-  accessibilityLabel = "Loading",
+  accessibilityLabel: accessibilityLabelProp,
+  decorative = false,
+  labels: labelsProp,
   testID
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("skeleton");
+  const labels = useLabels("skeleton", DEFAULT_LABELS, labelsProp);
+  const accessibilityLabel = accessibilityLabelProp ?? labels.loading;
   const { styles } = useStyles(sheet, { variant });
   let resolvedWidth;
   let resolvedHeight;
@@ -61,9 +68,16 @@ function Skeleton({
   return /* @__PURE__ */ jsx(
     Animated.View,
     {
-      accessibilityRole: "image",
-      accessibilityLabel,
-      accessibilityState: { busy: true },
+      ...decorative ? {
+        accessible: false,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        "aria-hidden": true
+      } : {
+        accessibilityRole: "image",
+        accessibilityLabel,
+        accessibilityState: { busy: true }
+      },
       testID,
       style: [
         styles.base,
@@ -79,18 +93,37 @@ function SkeletonText({
   lastLineWidth = "60%",
   lineHeight = TEXT_HEIGHT,
   style,
+  accessibilityLabel: accessibilityLabelProp,
+  labels: labelsProp,
   testID
 }) {
-  const theme = useLoamTheme();
-  return /* @__PURE__ */ jsx(View, { style: [{ gap: theme.space.s2 }, style], testID, children: Array.from({ length: Math.max(0, lines) }).map((_, i) => /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      variant: "text",
-      height: lineHeight,
-      style: i === lines - 1 ? { width: lastLineWidth } : void 0
-    },
-    i
-  )) });
+  const theme = useLoamTheme("skeleton");
+  const labels = useLabels("skeleton", DEFAULT_LABELS, labelsProp);
+  const accessibilityLabel = accessibilityLabelProp ?? labels.loading;
+  return (
+    // One labelled "Loading" image for the group; the bones are hidden.
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        accessible: true,
+        accessibilityRole: "image",
+        accessibilityLabel,
+        accessibilityState: { busy: true },
+        style: [{ gap: theme.space.s2 }, style],
+        testID,
+        children: Array.from({ length: Math.max(0, lines) }).map((_, i) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "text",
+            decorative: true,
+            height: lineHeight,
+            style: i === lines - 1 ? { width: lastLineWidth } : void 0
+          },
+          i
+        ))
+      }
+    )
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   base: {