@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-JUYWSSKW.js

@@ -0,0 +1,335 @@
+import { Chip } from './chunk-2SY63FCH.js';
+import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Text, Pressable, TextInput, Animated, LayoutAnimation, AccessibilityInfo } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { MOTION_MOVE } from '@btndprojects/loam-tokens';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  remove: (tag) => `Remove ${tag}`,
+  added: (tag) => `${tag} added`,
+  removed: (tag) => `${tag} removed`,
+  duplicate: (tag) => `${tag} is already added`,
+  maxReached: (max) => `No more than ${max} tags`,
+  invalid: (tag) => `${tag} is not valid`
+};
+var CHIP_SIZE = { xs: "xs", sm: "xs", md: "sm", lg: "md" };
+function TagSlot({
+  animate,
+  style,
+  children
+}) {
+  const theme = useLoamTheme("tags-input");
+  const t = React.useRef(new Animated.Value(animate ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!animate) return;
+    const run = Animated.spring(t, {
+      ...springConfig(theme, "fs"),
+      toValue: 1,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID: "tag",
+      style: [
+        style,
+        {
+          opacity: t,
+          transform: [{ scale: t.interpolate({ inputRange: [0, 1], outputRange: [SCALE_IN, 1] }) }]
+        }
+      ],
+      children
+    }
+  );
+}
+var SCALE_IN = 1 - MOTION_MOVE.scaleIn;
+function splitText(text, chars) {
+  let parts = text.split(/\r?\n/);
+  for (const c of chars) parts = parts.flatMap((p) => p.split(c));
+  return parts;
+}
+function TagsInput({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  size = "md",
+  delimiters = [","],
+  addOnBlur = false,
+  validate,
+  max,
+  allowDuplicates = false,
+  transform,
+  normalize,
+  labels: labelsProp,
+  renderTag,
+  label,
+  description,
+  error,
+  invalid = false,
+  readOnly = false,
+  disabled = false,
+  containerStyle,
+  onBlur,
+  onFocus,
+  onKeyPress,
+  motion = "full",
+  ...rest
+}) {
+  const level = useResolvedMotion(motion, "tags-input");
+  const mounted = React.useRef(false);
+  React.useEffect(() => {
+    mounted.current = true;
+  }, []);
+  const flowNext = () => {
+    if (level !== "full") return;
+    const fs = theme.spring.fs;
+    LayoutAnimation.configureNext({
+      duration: fs.duration,
+      update: { type: "spring", springDamping: fs.dampingRatio },
+      delete: { type: "easeInEaseOut", property: "opacity" }
+    });
+  };
+  const labels = useLabels("tagsInput", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { size });
+  const theme = useLoamTheme("tags-input");
+  const [inner, setInner] = React.useState(defaultValue ?? []);
+  const controlled = valueProp !== void 0;
+  const tags = controlled ? valueProp : inner;
+  const [text, setText] = React.useState("");
+  const [rejection, setRejection] = React.useState(null);
+  const [highlight, setHighlight] = React.useState(null);
+  const [focused, setFocused] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const inert = disabled || readOnly;
+  const labelId = React.useId();
+  const emit = (next) => {
+    if (!controlled) setInner(next);
+    onValueChange?.(next);
+  };
+  const announce = (message2) => {
+    AccessibilityInfo.announceForAccessibility?.(message2);
+  };
+  const keyOf = normalize ?? ((t) => t);
+  const commit = (candidates) => {
+    let next = tags;
+    let problem = null;
+    const added = [];
+    for (const raw of candidates) {
+      let tag = raw.trim();
+      if (transform) tag = transform(tag).trim();
+      if (!tag) continue;
+      if (max !== void 0 && next.length >= max) {
+        problem ??= labels.maxReached(max);
+        break;
+      }
+      if (!allowDuplicates && next.some((t) => keyOf(t) === keyOf(tag))) {
+        problem ??= labels.duplicate(tag);
+        continue;
+      }
+      if (validate) {
+        const verdict = validate(tag, next);
+        if (verdict !== true) {
+          problem ??= typeof verdict === "string" && verdict ? verdict : labels.invalid(tag);
+          continue;
+        }
+      }
+      next = [...next, tag];
+      added.push(tag);
+    }
+    setRejection(problem);
+    if (added.length > 0) {
+      flowNext();
+      emit(next);
+      announce(added.map((t) => labels.added(t)).join(". "));
+    }
+    return problem;
+  };
+  const removeAt = (index) => {
+    if (inert) return;
+    const tag = tags[index];
+    if (tag === void 0) return;
+    flowNext();
+    emit(tags.filter((_, i) => i !== index));
+    setRejection(null);
+    setHighlight(null);
+    announce(labels.removed(tag));
+    inputRef.current?.focus();
+  };
+  const commitText = () => {
+    if (text.trim() === "") {
+      setText("");
+      return;
+    }
+    if (commit([text]) === null) setText("");
+  };
+  const handleChangeText = (next) => {
+    setRejection(null);
+    setHighlight(null);
+    if (delimiters.some((d) => next.includes(d))) {
+      const parts = splitText(next, delimiters);
+      const tail = parts.pop() ?? "";
+      commit(parts);
+      setText(tail);
+      return;
+    }
+    setText(next);
+  };
+  const handleKeyPress = (e) => {
+    onKeyPress?.(e);
+    if (inert || e.nativeEvent.key !== "Backspace" || text !== "" || tags.length === 0) return;
+    if (highlight === tags.length - 1) removeAt(highlight);
+    else setHighlight(tags.length - 1);
+  };
+  const tone = disabled ? { border: theme.color.border, fill: theme.color.surface3 } : invalid || error || rejection ? { border: theme.color.danger, fill: theme.color.dangerSoft } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : { border: theme.color.borderStrong, fill: theme.color.surface2 };
+  const message = error ?? rejection ?? void 0;
+  const hasError = invalid || Boolean(message);
+  const shown = message ?? description;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.field, containerStyle], children: [
+    label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: [styles.label, hasError && { color: theme.color.danger }], children: label }) : null,
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        testID: "tags-input-container",
+        accessible: false,
+        disabled: inert,
+        onPress: () => inputRef.current?.focus(),
+        style: [styles.container, { borderColor: tone.border, backgroundColor: tone.fill }],
+        children: [
+          tags.map((tag, index) => /* @__PURE__ */ jsx(
+            TagSlot,
+            {
+              animate: mounted.current && level === "full",
+              style: [styles.tag, highlight === index && { borderColor: theme.focus.ringColor }],
+              children: renderTag ? renderTag(tag, { remove: () => removeAt(index), disabled: inert }) : /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  variant: "input",
+                  size: CHIP_SIZE[size],
+                  removable: !inert,
+                  disabled,
+                  removeLabel: labels.remove(tag),
+                  onRemove: () => removeAt(index),
+                  children: tag
+                }
+              )
+            },
+            `${tag}#${tags.slice(0, index).filter((t) => t === tag).length}`
+          )),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ...rest,
+              ref: inputRef,
+              value: text,
+              editable: !inert,
+              placeholder: tags.length === 0 ? rest.placeholder : void 0,
+              placeholderTextColor: theme.color.text3,
+              "aria-labelledby": label ? labelId : rest["aria-labelledby"],
+              "aria-invalid": hasError || void 0,
+              blurOnSubmit: false,
+              onChangeText: handleChangeText,
+              onSubmitEditing: commitText,
+              onKeyPress: handleKeyPress,
+              onFocus: (e) => {
+                setFocused(true);
+                onFocus?.(e);
+              },
+              onBlur: (e) => {
+                setFocused(false);
+                setHighlight(null);
+                onBlur?.(e);
+                if (addOnBlur && !inert) commitText();
+              },
+              style: [styles.input, NO_UA_FOCUS_RING]
+            }
+          )
+        ]
+      }
+    ),
+    shown ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        accessibilityLiveRegion: "polite",
+        style: [styles.message, { color: hasError ? theme.color.danger : theme.color.text3 }],
+        children: shown
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  field: { gap: theme.space.s2 },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  },
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    borderWidth: theme.borderWidth.thick,
+    variants: {
+      size: {
+        xs: {
+          minHeight: theme.ctl.xs,
+          paddingHorizontal: theme.ctl.px.xs,
+          gap: theme.ctl.gap.xs,
+          borderRadius: theme.ctl.r.xs
+        },
+        sm: {
+          minHeight: theme.ctl.sm,
+          paddingHorizontal: theme.ctl.px.sm,
+          gap: theme.ctl.gap.sm,
+          borderRadius: theme.ctl.r.sm
+        },
+        md: {
+          minHeight: theme.ctl.md,
+          paddingHorizontal: theme.ctl.px.md,
+          gap: theme.ctl.gap.md,
+          borderRadius: theme.ctl.r.md
+        },
+        lg: {
+          minHeight: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.ctl.gap.lg,
+          borderRadius: theme.ctl.r.lg
+        }
+      }
+    }
+  },
+  // A transparent edge that the highlight fills in, so the row never shifts.
+  tag: {
+    borderWidth: theme.borderWidth.thick,
+    borderColor: "transparent",
+    borderRadius: theme.radius.full
+  },
+  input: {
+    flexGrow: 1,
+    minWidth: theme.tapMin * 2,
+    padding: 0,
+    color: theme.color.text,
+    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] }
+      }
+    }
+  },
+  message: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12]
+  }
+}));
+
+export { TagsInput };

package/dist/{chunk-7CFF4HXS.js → chunk-JV5YOTOB.js}

@@ -1,16 +1,38 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import 'react';
 import { View, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+// src/checkout/checkout-labels.ts
+var DEFAULT_LABELS = {
+  paying: "Paying\u2026",
+  checking: "Checking\u2026",
+  paid: "Paid",
+  orderSummary: "Order summary",
+  summaryHeading: (title, currency) => `${title} \xB7 ${currency}`,
+  total: "Total",
+  discountCode: "Discount code",
+  remove: "Remove",
+  apply: "Apply",
+  encrypted: "Encrypted",
+  cardDetailsNeverTouch: "Card details never touch our servers",
+  pciDss: "PCI DSS SAQ-A",
+  refundWindow: "30-day refund",
+  cart: "Cart",
+  cartCount: (name, count) => `${name}, ${count} ${count === 1 ? "item" : "items"}`,
+  mandateTitle: "Direct debit mandate",
+  mandateAuthorise: (merchant) => `By giving your IBAN and confirming this payment you authorise ${merchant} to send instructions to your bank to debit your account, and your bank to debit your account in accordance with those instructions.`,
+  mandateRefund: (weeks) => `You are entitled to a refund from your bank under the terms of your agreement with it. A refund must be claimed within ${weeks} weeks of the date your account was debited.`
+};
 function SecurePayLabel({
   label,
   showLock = true,
   size = "sm",
   style
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("checkout");
   const { styles } = useStyles(sheet);
   return /* @__PURE__ */ jsxs(View, { style: [styles.secureRow, style], children: [
     showLock ? /* @__PURE__ */ jsx(
@@ -31,13 +53,27 @@ var TRUST_ROW = [
   { icon: "shield", label: "PCI DSS SAQ-A" },
   { icon: "refresh", label: "30-day refund" }
 ];
-function TrustRow({ level, items, style }) {
-  const theme = useLoamTheme();
+var trustInline = (labels) => [{ icon: "lock", label: labels.encrypted }];
+var trustRow = (labels) => [
+  { icon: "lock", label: labels.cardDetailsNeverTouch },
+  { icon: "shield", label: labels.pciDss },
+  { icon: "refresh", label: labels.refundWindow }
+];
+function TrustRow({ level, items, labels: labelsProp, style }) {
+  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("checkout");
   const { styles } = useStyles(sheet);
-  const resolved = items ?? (level === "inline" ? TRUST_INLINE : TRUST_ROW);
+  const resolved = items === void 0 || items === TRUST_INLINE || items === TRUST_ROW ? level === "inline" ? trustInline(labels) : trustRow(labels) : items;
   if (level === "inline") {
     const first = resolved[0];
-    return /* @__PURE__ */ jsx(SecurePayLabel, { label: first?.label ?? "", showLock: first?.icon !== void 0, style });
+    return /* @__PURE__ */ jsx(
+      SecurePayLabel,
+      {
+        label: first?.label ?? "",
+        showLock: first?.icon !== void 0,
+        style
+      }
+    );
   }
   return (
     // A real list, so three facts are announced as three.
@@ -58,14 +94,16 @@ function TrustRow({ level, items, style }) {
 function MandateNotice({
   merchantLegalName,
   weeks = 8,
-  title = "Direct debit mandate",
+  title,
+  labels: labelsProp,
   style
 }) {
+  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
   return /* @__PURE__ */ jsxs(View, { style: [styles.mandate, style], children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.overline, children: title }),
-    /* @__PURE__ */ jsx(Text, { style: styles.mandateBody, children: `By giving your IBAN and confirming this payment you authorise ${merchantLegalName} to send instructions to your bank to debit your account, and your bank to debit your account in accordance with those instructions.` }),
-    /* @__PURE__ */ jsx(Text, { style: styles.mandateBody, children: `You are entitled to a refund from your bank under the terms of your agreement with it. A refund must be claimed within ${weeks} weeks of the date your account was debited.` })
+    /* @__PURE__ */ jsx(Text, { style: styles.overline, children: title ?? labels.mandateTitle }),
+    /* @__PURE__ */ jsx(Text, { style: styles.mandateBody, children: labels.mandateAuthorise(merchantLegalName) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.mandateBody, children: labels.mandateRefund(weeks) })
   ] });
 }
 var sheet = createStyleSheet((theme) => ({
@@ -123,4 +161,4 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { MandateNotice, SecurePayLabel, TRUST_INLINE, TRUST_ROW, TrustRow };
+export { DEFAULT_LABELS, MandateNotice, SecurePayLabel, TRUST_INLINE, TRUST_ROW, TrustRow };

package/dist/{chunk-LZLHELAG.js → chunk-KFJGFLMW.js}

@@ -1,6 +1,7 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { View, Text, Pressable } from 'react-native';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -21,7 +22,7 @@ var VARIANT_ICON = {
   stale: "clock"
 };
 function useForeground(kind) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("empty-state");
   switch (kind) {
     case "muted":
       return theme.color.text2;
@@ -42,16 +43,36 @@ function EmptyState({
   description,
   actionLabel,
   onAction,
-  // Inert (see prop docs); destructured so it never reaches a native element.
-  motion: _motion = "full"
+  motion = "full"
 }) {
   const kind = VARIANT_KIND[variant];
   const { styles } = useStyles(sheet, { kind });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("empty-state");
   const fg = useForeground(kind);
   const iconName = icon ?? VARIANT_ICON[variant];
   const pillInk = kind === "muted" ? theme.color.text : theme.color.accentInk;
-  return /* @__PURE__ */ jsxs(View, { style: styles.base, children: [
+  const level = useResolvedMotion(motion, "empty-state");
+  const rise = React.useRef(new Animated.Value(level === "none" ? 1 : 0)).current;
+  React.useEffect(() => {
+    if (level === "none") return;
+    Animated.spring(rise, {
+      ...springConfig(theme, "ds"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, []);
+  const riseStyle = {
+    opacity: rise,
+    transform: level === "full" ? [
+      {
+        translateY: rise.interpolate({
+          inputRange: [0, 1],
+          outputRange: [theme.space.s3, 0]
+        })
+      }
+    ] : []
+  };
+  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, riseStyle], children: [
     /* @__PURE__ */ jsx(View, { style: styles.tile, children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: 30, color: fg }) }),
     /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
     description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,

package/dist/{chunk-O7AE6DAF.js → chunk-KQZ3GLHR.js}

@@ -1,10 +1,10 @@
+import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
 import { StyleSheet, Animated, Easing, View, Text } from 'react-native';
 import { Svg, Circle } from 'react-native-svg';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/spinner/spinner.tsx
 var RING = {
   sm: { diameter: 16, stroke: 2 },
   md: { diameter: 20, stroke: 2.5 },
@@ -12,13 +12,20 @@ var RING = {
   xl: { diameter: 40, stroke: 4 }
 };
 var ARC_FRACTION = 0.7;
+var DEFAULT_LABELS = {
+  loading: "Loading",
+  stillWorking: "Still working\u2026"
+};
 function Spinner({
   size = "md",
   color,
-  accessibilityLabel = "Loading",
-  motion = "full"
+  accessibilityLabel: accessibilityLabelProp,
+  motion = "full",
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("spinner");
+  const labels = useLabels("spinner", DEFAULT_LABELS, labelsProp);
+  const accessibilityLabel = accessibilityLabelProp ?? labels.loading;
   const stroke = color ?? theme.color.accent;
   const { diameter, stroke: strokeWidth } = RING[size];
   const spinning = motion === "full" && !theme.reduceMotion;
@@ -69,17 +76,20 @@ function Spinner({
     }
   );
 }
-var DEFAULT_LATE_LABEL = "Still working\u2026";
 function LoadingOverlay({
   active = true,
   size = "lg",
   color,
-  accessibilityLabel = "Loading",
+  accessibilityLabel: accessibilityLabelProp,
   late = false,
-  lateLabel = DEFAULT_LATE_LABEL,
+  lateLabel: lateLabelProp,
   scrim = "default",
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("spinner", DEFAULT_LABELS, labelsProp);
+  const accessibilityLabel = accessibilityLabelProp ?? labels.loading;
+  const lateLabel = lateLabelProp ?? labels.stillWorking;
   const { styles } = useStyles(sheet, { scrim: scrim === "light" ? "light" : void 0 });
   if (!active) return null;
   return /* @__PURE__ */ jsx(