@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-NY2U3PBI.js

@@ -0,0 +1,59 @@
+import { Platform, Vibration } from 'react-native';
+
+// src/interactions/haptics.ts
+var isSupported = Platform.OS !== "web" && typeof Vibration !== "undefined" && typeof Vibration.vibrate === "function";
+function buzz(pattern) {
+  if (!isSupported) return;
+  try {
+    Vibration.vibrate(pattern, false);
+  } catch {
+  }
+}
+var IMPACT_MS = {
+  light: 10,
+  medium: 20,
+  heavy: 35
+};
+var NOTIFY_PATTERN = {
+  success: [0, 18, 60, 18],
+  warning: [0, 28, 80, 28],
+  error: [0, 40, 60, 40, 60, 40]
+};
+var haptics = {
+  /**
+   * A crisp, minimal tick — for selection changes (segments, chips, pickers).
+   * @example
+   * ```ts
+   * haptics.selection();
+   * ```
+   */
+  selection() {
+    buzz(6);
+  },
+  /**
+   * A single tap whose firmness scales with `style`. Use for button presses,
+   * toggles and drag detents.
+   * @param style - Tap strength. @defaultValue `'medium'`
+   * @example
+   * ```ts
+   * haptics.impact();        // medium
+   * haptics.impact('light');
+   * ```
+   */
+  impact(style = "medium") {
+    buzz(IMPACT_MS[style]);
+  },
+  /**
+   * A short multi-pulse pattern signaling the outcome of an operation.
+   * @param type - Outcome flavor. @defaultValue `'success'`
+   * @example
+   * ```ts
+   * haptics.notify('error');
+   * ```
+   */
+  notify(type = "success") {
+    buzz(NOTIFY_PATTERN[type]);
+  }
+};
+
+export { haptics };

package/dist/chunk-O4AEHWII.js

@@ -0,0 +1,464 @@
+import { CardBrandMark } from './chunk-PUPM2YGF.js';
+import { Checkbox } from './chunk-JXJB2X6M.js';
+import { TextField, useColorTransition } from './chunk-ITTYJZWX.js';
+import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Text, useWindowDimensions, View, Easing, Animated, TextInput } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { formatCard, formatExpiry, validCardNumber, CARD_COPY, validExpiry, validCvc } from '@btndprojects/loam-pay';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var TEST_HINT = "Test with 4242 4242 4242 4242 \xB7 12/34 \xB7 any code";
+var CardRunContext = React.createContext(null);
+function onlyDigits(text) {
+  return String(text).replace(/\D/g, "");
+}
+function ExpiryHint({
+  hint,
+  error,
+  nativeID,
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet, { invalid: Boolean(error) });
+  const message = error ?? hint;
+  if (message === void 0 || message === "") return null;
+  return /* @__PURE__ */ jsx(Text, { nativeID, testID, style: [styles.message, style], children: message });
+}
+function DigitsField({
+  field,
+  label,
+  digits,
+  format,
+  normalize,
+  onDigits,
+  onBackspaceOut,
+  autoComplete,
+  placeholder,
+  maxLength,
+  hint,
+  error,
+  onBlur,
+  motion = "full",
+  testHintText,
+  trailing,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const hasError = Boolean(error);
+  const { styles } = useStyles(sheet, { invalid: hasError });
+  const labelId = React.useId();
+  const messageId = React.useId();
+  const testId = React.useId();
+  const [focused, setFocused] = React.useState(false);
+  const run = React.useContext(CardRunContext);
+  const inputRef = React.useRef(null);
+  const focusRef = React.useRef(() => {
+  });
+  focusRef.current = () => inputRef.current?.focus();
+  const register = run?.register;
+  React.useEffect(() => register?.(field, () => focusRef.current()), [register, field]);
+  const tone = hasError ? { 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 animate = useResolvedMotion(motion) === "full";
+  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const borderColor = useColorTransition(tone.border, theme.duration.base, easing, animate);
+  const backgroundColor = useColorTransition(tone.fill, theme.duration.base, easing, animate);
+  const handleKeyPress = (event) => {
+    if (event.nativeEvent.key === "Backspace" && digits.length === 0) onBackspaceOut?.();
+  };
+  const describedBy = [hasError || hint ? messageId : null, testHintText ? testId : null].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(View, { style: [styles.field, style], children: [
+    /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: styles.label, children: label }),
+    /* @__PURE__ */ jsxs(Animated.View, { style: [styles.box, { borderColor, backgroundColor }], children: [
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ref: inputRef,
+          testID,
+          value: format(digits),
+          onChangeText: (typed) => onDigits(normalize(typed)),
+          onKeyPress: handleKeyPress,
+          onFocus: () => setFocused(true),
+          onBlur: () => {
+            setFocused(false);
+            onBlur?.();
+          },
+          autoComplete,
+          inputMode: "numeric",
+          keyboardType: "number-pad",
+          placeholder,
+          placeholderTextColor: theme.color.text3,
+          maxLength,
+          "aria-labelledby": labelId,
+          style: [styles.input, NO_UA_FOCUS_RING],
+          ...{
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": describedBy || void 0
+          }
+        }
+      ),
+      hasError ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.ctl.icon.lg, color: theme.color.dangerOnSoft }) }) : trailing
+    ] }),
+    /* @__PURE__ */ jsx(ExpiryHint, { nativeID: messageId, hint, error }),
+    testHintText ? /* @__PURE__ */ jsx(Text, { nativeID: testId, style: styles.testHint, children: testHintText }) : null
+  ] });
+}
+function CardNumberField({
+  value,
+  brand,
+  complete,
+  label = "Card number",
+  hint,
+  error,
+  testHint = false,
+  onChange,
+  onComplete,
+  onBlur,
+  motion,
+  style,
+  testID
+}) {
+  const result = formatCard(value);
+  const resolvedBrand = brand ?? result.brand;
+  const isComplete = complete ?? result.complete;
+  const wasComplete = React.useRef(isComplete);
+  React.useEffect(() => {
+    if (isComplete && !wasComplete.current) onComplete?.();
+    wasComplete.current = isComplete;
+  }, [isComplete, onComplete]);
+  const testHintText = testHint === true ? TEST_HINT : testHint || void 0;
+  return /* @__PURE__ */ jsx(
+    DigitsField,
+    {
+      field: "number",
+      label,
+      digits: result.digits,
+      format: (d) => formatCard(d).text,
+      normalize: (typed) => formatCard(onlyDigits(typed)).digits,
+      onDigits: onChange,
+      hint,
+      error,
+      onBlur,
+      motion,
+      autoComplete: "cc-number",
+      placeholder: "1234 5678 9012 3456",
+      testHintText: testHintText || void 0,
+      trailing: /* @__PURE__ */ jsx(CardBrandMark, { brand: resolvedBrand.id }),
+      style,
+      testID
+    }
+  );
+}
+function ExpiryField({
+  value,
+  label = "Expiry",
+  hint = "MM/YY",
+  error,
+  onChange,
+  onComplete,
+  onBackspaceOut,
+  onBlur,
+  motion,
+  style,
+  testID
+}) {
+  const digits = onlyDigits(formatExpiry(value));
+  const wasComplete = React.useRef(digits.length === 4);
+  React.useEffect(() => {
+    const isComplete = digits.length === 4;
+    if (isComplete && !wasComplete.current) onComplete?.();
+    wasComplete.current = isComplete;
+  }, [digits, onComplete]);
+  return /* @__PURE__ */ jsx(
+    DigitsField,
+    {
+      field: "expiry",
+      label,
+      digits,
+      format: (d) => formatExpiry(d),
+      normalize: (typed) => onlyDigits(formatExpiry(onlyDigits(typed))),
+      onDigits: onChange,
+      onBackspaceOut,
+      hint,
+      error,
+      onBlur,
+      motion,
+      autoComplete: "cc-exp",
+      placeholder: "MM/YY",
+      maxLength: 5,
+      style,
+      testID
+    }
+  );
+}
+function CvcField({
+  value,
+  digits = 3,
+  label = "Security code",
+  hint,
+  error,
+  onChange,
+  onComplete,
+  onBackspaceOut,
+  onBlur,
+  motion,
+  style,
+  testID
+}) {
+  const clamp = React.useCallback(
+    (typed) => onlyDigits(typed).slice(0, digits),
+    [digits]
+  );
+  const machine = clamp(value);
+  const wasComplete = React.useRef(machine.length === digits);
+  React.useEffect(() => {
+    const isComplete = machine.length === digits;
+    if (isComplete && !wasComplete.current) onComplete?.();
+    wasComplete.current = isComplete;
+  }, [machine, digits, onComplete]);
+  return /* @__PURE__ */ jsx(
+    DigitsField,
+    {
+      field: "cvc",
+      label,
+      digits: machine,
+      format: (d) => d,
+      normalize: clamp,
+      onDigits: onChange,
+      onBackspaceOut,
+      hint,
+      error,
+      onBlur,
+      motion,
+      autoComplete: "cc-csc",
+      placeholder: digits === 4 ? "1234" : "123",
+      maxLength: digits,
+      style,
+      testID
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  field: { flexShrink: 1, flexGrow: 1, gap: theme.space.s2 },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[12],
+    variants: {
+      // The label turns danger with the field, so the failure is carried by the
+      // label, the edge, the glyph and the message — never colour alone.
+      invalid: { true: { color: theme.color.danger }, false: { color: theme.color.text2 } }
+    }
+  },
+  // `borderColor` / `backgroundColor` arrive at the use site as animated values,
+  // so the field can travel between its resting, focused and invalid tones. The
+  // `lg` tier is the 44 box whose 16px text iOS will not zoom.
+  box: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: theme.ctl.lg,
+    paddingHorizontal: theme.ctl.px.lg,
+    gap: theme.ctl.gap.lg,
+    borderRadius: theme.ctl.r.lg,
+    // The reference draws a 1.5px field edge — the static `thick` weight.
+    borderWidth: theme.borderWidth.thick,
+    variants: {
+      invalid: { true: {}, false: {} }
+    }
+  },
+  input: {
+    flexGrow: 1,
+    // react-native-web renders a real `<input>`, whose `min-width: auto`
+    // resolves to its intrinsic text-box measure and would stop the field
+    // shrinking inside a narrow row.
+    minWidth: 0,
+    padding: 0,
+    color: theme.color.text,
+    fontFamily: theme.font.sans,
+    fontSize: theme.ctl.fs.lg,
+    // P11: a card number is a run of figures and lines up like one.
+    fontVariant: ["tabular-nums"],
+    variants: {
+      invalid: { true: {}, false: {} }
+    }
+  },
+  message: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    // Reserve the line so showing a message does not shift what sits below it.
+    minHeight: theme.fontSize[12] * theme.lineHeight.normal,
+    variants: {
+      invalid: {
+        true: { fontWeight: theme.fontWeight.bold, color: theme.color.danger },
+        false: { color: theme.color.text3 }
+      }
+    }
+  },
+  testHint: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    color: theme.color.text3
+  }
+}));
+function validateCard(value, brand, now = 0) {
+  const resolved = brand ?? formatCard(value.number).brand;
+  const errors = {};
+  const number = validCardNumber(value.number);
+  if (!number.ok) errors.number = number.why;
+  if (value.expiry.length === 0) {
+    errors.expiry = CARD_COPY.expiryEmpty;
+  } else {
+    const expiry = validExpiry(formatExpiry(value.expiry), now);
+    if (!expiry.ok) errors.expiry = expiry.why;
+  }
+  const cvc = validCvc(value.cvc, resolved);
+  if (!cvc.ok) errors.cvc = cvc.why;
+  const order = ["number", "expiry", "cvc"];
+  const firstBlocking = order.find((field) => errors[field] !== void 0) ?? null;
+  return { errors, firstBlocking };
+}
+function CardForm({
+  value,
+  brand,
+  errors,
+  showName = false,
+  showSave = false,
+  save = false,
+  layout = "auto",
+  testHint = false,
+  now = 0,
+  saveLabel = "Save this card for next time",
+  onChange,
+  onFieldBlur,
+  onSaveChange,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { width } = useWindowDimensions();
+  const asRow = layout === "row" || layout === "auto" && width >= theme.breakpoint.tablet;
+  const { styles } = useStyles(sheet2, { asRow });
+  const resolvedBrand = brand ?? formatCard(value.number).brand;
+  const [shown, setShown] = React.useState([]);
+  const isShown = (field) => shown.includes(field);
+  const focusers = React.useRef(/* @__PURE__ */ new Map());
+  const run = React.useMemo(
+    () => ({
+      register: (field, focus2) => {
+        focusers.current.set(field, focus2);
+        return () => {
+          if (focusers.current.get(field) === focus2) focusers.current.delete(field);
+        };
+      }
+    }),
+    []
+  );
+  const focus = (field) => focusers.current.get(field)?.();
+  const own = validateCard(value, resolvedBrand, now).errors;
+  const errorFor = (field) => errors?.[field] ?? (isShown(field) ? own[field] : void 0);
+  const handleBlur = (field) => () => {
+    setShown((current) => {
+      const failing = own[field] !== void 0;
+      if (failing) return current.includes(field) ? current : [...current, field];
+      return current.includes(field) ? current.filter((f) => f !== field) : current;
+    });
+    onFieldBlur?.(field);
+  };
+  return /* @__PURE__ */ jsx(CardRunContext.Provider, { value: run, children: /* @__PURE__ */ jsxs(View, { testID, style: [styles.form, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.fields, children: [
+      /* @__PURE__ */ jsx(
+        CardNumberField,
+        {
+          value: value.number,
+          brand: resolvedBrand,
+          error: errorFor("number"),
+          testHint,
+          style: styles.numberField,
+          onChange: (raw) => onChange({ number: raw }),
+          onComplete: () => focus("expiry"),
+          onBlur: handleBlur("number")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ExpiryField,
+        {
+          value: value.expiry,
+          error: errorFor("expiry"),
+          onChange: (raw) => onChange({ expiry: raw }),
+          onComplete: () => focus("cvc"),
+          onBackspaceOut: () => focus("number"),
+          onBlur: handleBlur("expiry")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CvcField,
+        {
+          value: value.cvc,
+          digits: resolvedBrand.cvc,
+          error: errorFor("cvc"),
+          onChange: (raw) => onChange({ cvc: raw }),
+          onBackspaceOut: () => focus("expiry"),
+          onBlur: handleBlur("cvc")
+        }
+      )
+    ] }),
+    showName ? /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label: "Name on card",
+        autoComplete: "cc-name",
+        size: "lg",
+        value: value.name ?? "",
+        error: errors?.name,
+        onChangeText: (next) => onChange({ name: next }),
+        onBlur: handleBlur("name")
+      }
+    ) : null,
+    showSave ? /* @__PURE__ */ jsxs(View, { style: styles.saveRow, children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: save,
+          onCheckedChange: (next) => onSaveChange?.(next),
+          accessibilityLabel: saveLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { style: styles.saveLabel, children: saveLabel })
+    ] }) : null
+  ] }) });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  form: { gap: theme.space.s3 },
+  fields: {
+    gap: theme.space.s3,
+    variants: {
+      // Number · MM/YY · code on one line, or each on its own. Nothing else
+      // about the fields changes between the two.
+      asRow: { true: { flexDirection: "row", alignItems: "flex-start" }, false: {} }
+    }
+  },
+  numberField: {
+    variants: {
+      // The number is twice the width of the two short fields beside it — the
+      // 2:1:1 split the web grid draws with four columns.
+      asRow: { true: { flexGrow: 2 }, false: {} }
+    }
+  },
+  saveRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.tapMin
+  },
+  saveLabel: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  }
+}));
+
+export { CardForm, CardNumberField, CvcField, ExpiryField, ExpiryHint, validateCard };

package/dist/chunk-O7AE6DAF.js

@@ -0,0 +1,146 @@
+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 },
+  lg: { diameter: 28, stroke: 3 },
+  xl: { diameter: 40, stroke: 4 }
+};
+var ARC_FRACTION = 0.7;
+function Spinner({
+  size = "md",
+  color,
+  accessibilityLabel = "Loading",
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const stroke = color ?? theme.color.accent;
+  const { diameter, stroke: strokeWidth } = RING[size];
+  const spinning = motion === "full" && !theme.reduceMotion;
+  const radius = (diameter - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const arc = circumference * ARC_FRACTION;
+  const rotate = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (!spinning) {
+      rotate.setValue(0);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(rotate, {
+          toValue: 1,
+          duration: theme.loop.spin,
+          // A rotation that never settles has no start or end to ease, so it runs
+          // at a constant rate — there is no ramp token to reach for here.
+          easing: Easing.linear,
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [rotate, theme.loop.spin, spinning]);
+  const spin = rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessibilityRole: "progressbar",
+      accessibilityLabel,
+      accessibilityState: { busy: true },
+      style: { width: diameter, height: diameter, transform: [{ rotate: spin }] },
+      children: /* @__PURE__ */ jsx(Svg, { width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, fill: "none", children: /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: diameter / 2,
+          cy: diameter / 2,
+          r: radius,
+          stroke,
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeDasharray: `${arc} ${circumference}`
+        }
+      ) })
+    }
+  );
+}
+var DEFAULT_LATE_LABEL = "Still working\u2026";
+function LoadingOverlay({
+  active = true,
+  size = "lg",
+  color,
+  accessibilityLabel = "Loading",
+  late = false,
+  lateLabel = DEFAULT_LATE_LABEL,
+  scrim = "default",
+  motion = "full"
+}) {
+  const { styles } = useStyles(sheet, { scrim: scrim === "light" ? "light" : void 0 });
+  if (!active) return null;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: styles.overlay,
+      "aria-busy": true,
+      accessibilityViewIsModal: true,
+      accessibilityState: { busy: true },
+      children: /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+        /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            size,
+            color,
+            accessibilityLabel,
+            motion
+          }
+        ),
+        late ? (
+          // `role="status"` (polite on rn-web) announces the copy when work goes late.
+          /* @__PURE__ */ jsx(View, { accessibilityRole: "text", role: "status", style: styles.latePill, children: /* @__PURE__ */ jsx(Text, { style: styles.lateText, children: lateLabel }) })
+        ) : null
+      ] })
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      scrim: {
+        default: { backgroundColor: theme.color.scrim },
+        light: { backgroundColor: theme.color.scrimLight }
+      }
+    }
+  },
+  content: {
+    alignItems: "center",
+    gap: theme.space.s3
+  },
+  latePill: {
+    alignSelf: "center",
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.warnSoft,
+    borderColor: theme.edge.warn,
+    borderWidth: theme.borderWidth.base,
+    borderRadius: theme.radius.full,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2]
+  },
+  lateText: {
+    fontFamily: theme.font.sans,
+    color: theme.color.warnOnSoft,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing
+  }
+}));
+
+export { LoadingOverlay, Spinner };