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

package/dist/chunk-4YQOR7JM.js

@@ -0,0 +1,204 @@
+import { SearchExpand } from './chunk-47FWHGUN.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { Pressable, View, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function HeaderAction({
+  icon,
+  accessibilityLabel,
+  onPress,
+  disabled = false
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { align: "left", large: false });
+  const color = disabled ? theme.color.text3 : theme.color.text;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      disabled,
+      onPress: disabled ? void 0 : onPress,
+      style: ({ pressed }) => [styles.action, pressed && !disabled ? styles.actionPressed : null],
+      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color })
+    }
+  );
+}
+function Header({
+  title,
+  subtitle,
+  leading,
+  leadingLabel = "Back",
+  onLeadingPress,
+  leadingSlot,
+  trailing,
+  align = "left",
+  large = false,
+  search = false,
+  searchPlaceholder = "Search",
+  searchRecents = [],
+  searchValue,
+  onSearchChangeText,
+  onSearchCancel,
+  searchSlot
+}) {
+  const { styles } = useStyles(sheet, { align, large });
+  const showSearch = search || searchSlot != null;
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "header", style: styles.container, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.leftSide, children: leadingSlot != null ? leadingSlot : leading ? /* @__PURE__ */ jsx(
+        HeaderAction,
+        {
+          icon: leading,
+          accessibilityLabel: leadingLabel,
+          onPress: onLeadingPress
+        }
+      ) : null }),
+      /* @__PURE__ */ jsx(View, { style: styles.titleWrap, children: large ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.title, children: title }),
+        subtitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.subtitle, children: subtitle }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx(View, { style: styles.rightSide, children: trailing })
+    ] }),
+    large ? /* @__PURE__ */ jsxs(View, { style: styles.largeBlock, children: [
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.largeTitle, children: title }),
+      subtitle ? /* @__PURE__ */ jsx(Text, { style: styles.largeSubtitle, children: subtitle }) : null
+    ] }) : null,
+    showSearch ? /* @__PURE__ */ jsx(View, { style: styles.searchRow, children: searchSlot != null ? searchSlot : /* @__PURE__ */ jsx(
+      SearchExpand,
+      {
+        placeholder: searchPlaceholder,
+        recents: searchRecents,
+        value: searchValue,
+        onChangeText: onSearchChangeText,
+        onCancel: onSearchCancel
+      }
+    ) }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  container: {
+    backgroundColor: theme.color.surface,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  // `layout.appbarH` is the one metric that branches on platform: 44 on iOS
+  // (UINavigationBar), 64 on Android (Material top app bar). It replaces a flat
+  // 56px that was wrong on both.
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: theme.layout.appbarH,
+    paddingHorizontal: theme.space.s4,
+    gap: theme.space.s2
+  },
+  leftSide: {
+    alignItems: "flex-start",
+    justifyContent: "center",
+    variants: {
+      // Centered titles need matching gutters on both sides, or the title is
+      // only centred within whatever the actions left over.
+      align: { left: {}, center: { minWidth: theme.tapMin } },
+      large: { true: {}, false: {} }
+    }
+  },
+  rightSide: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: theme.space.s1,
+    variants: {
+      align: { left: {}, center: { minWidth: theme.tapMin } },
+      large: { true: {}, false: {} }
+    }
+  },
+  titleWrap: {
+    flex: 1,
+    justifyContent: "center",
+    variants: {
+      align: { left: { alignItems: "flex-start" }, center: { alignItems: "center" } },
+      large: { true: {}, false: {} }
+    }
+  },
+  // `type.headline` (17/22/600) is the nav-bar title role on both ramps (HIG
+  // headline / M3 title), is what `NavigationStack`'s own `NavBar` already uses
+  // for the same element, and is what the design reference draws (16/700). The
+  // deprecated `fontSize[20]` (20) it replaced was the web h3, and left no room
+  // for a subtitle inside the 44dp row.
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text,
+    variants: {
+      align: { left: { textAlign: "left" }, center: { textAlign: "center" } },
+      large: { true: {}, false: {} }
+    }
+  },
+  // A subtitle has to fit *under* the title inside the same bar row, so it is a
+  // footnote, not `fontSize[14]`: 13/18 plus 22 for the title is 40 of the 44.
+  subtitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.text2,
+    variants: {
+      align: { left: { textAlign: "left" }, center: { textAlign: "center" } },
+      large: { true: {}, false: {} }
+    }
+  },
+  largeBlock: {
+    paddingHorizontal: theme.space.s4,
+    paddingTop: theme.space.s2,
+    paddingBottom: theme.space.s4,
+    gap: theme.space.s1
+  },
+  // The integrated search row sits under the bar: reference `padding:0 12px 12px`
+  // (buildAppBar search size), mapped to the space scale (16 horizontal / 12
+  // bottom is close enough on the 4px grid; the field owns its own height).
+  searchRow: {
+    paddingHorizontal: theme.space.s4,
+    paddingBottom: theme.space.s3
+  },
+  // 34 is the intended iOS large title and is unchanged; it just moves from the
+  // deprecated size-only ramp (`fontSize[36]`) to the semantic role that
+  // owns that size, which also brings the 41 line box with it. Without an
+  // explicit `lineHeight` a 34px display-face line was laid out on `normal`.
+  largeTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.largeTitle.fontSize,
+    lineHeight: theme.type.largeTitle.lineHeight,
+    letterSpacing: theme.type.largeTitle.letterSpacing,
+    color: theme.color.text
+  },
+  // `type.callout` is 16 — the same size `fontSize[16]` resolved to, on the
+  // semantic ramp and with a line box.
+  largeSubtitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.callout.fontSize,
+    lineHeight: theme.type.callout.lineHeight,
+    letterSpacing: theme.type.callout.letterSpacing,
+    color: theme.color.text2
+  },
+  // A bar button is a touch target before it is a glyph: `tapMin` (44), not the
+  // 40 it used to hardcode.
+  action: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  actionPressed: {
+    backgroundColor: theme.color.surface2
+  }
+}));
+
+export { Header, HeaderAction };

package/dist/chunk-4ZAHCY44.js

@@ -0,0 +1,177 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Easing, Pressable, View, Text, AccessibilityInfo } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function CopyButton({
+  onCopy,
+  label,
+  variant = "ghost",
+  size = "sm",
+  timeout = 2e3,
+  motion = "full",
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(sheet, { variant, size });
+  const theme = useLoamTheme();
+  const fg = theme.color.text;
+  const iconSize = theme.ctl.icon[size];
+  const slop = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const reduced = theme.reduceMotion || motion === "reduced" || motion === "none";
+  const [copied, setCopied] = React.useState(false);
+  const timer = React.useRef();
+  const progress = React.useRef(new Animated.Value(0)).current;
+  const pressScale = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (reduced) {
+      progress.setValue(copied ? 1 : 0);
+      return;
+    }
+    Animated.timing(progress, {
+      toValue: copied ? 1 : 0,
+      duration: theme.motion.swap.duration,
+      easing: Easing.bezier(...theme.motion.swap.easing),
+      useNativeDriver: true
+    }).start();
+  }, [copied, reduced, progress, theme.motion.swap]);
+  React.useEffect(() => () => clearTimeout(timer.current), []);
+  const press = (to) => Animated.spring(pressScale, {
+    toValue: to,
+    useNativeDriver: true,
+    speed: 40,
+    bounciness: 6
+  }).start();
+  const handlePress = () => {
+    onCopy?.();
+    setCopied(true);
+    AccessibilityInfo.announceForAccessibility("Copied");
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), timeout);
+  };
+  const copyOpacity = progress.interpolate({ inputRange: [0, 1], outputRange: [1, 0] });
+  const checkOpacity = progress;
+  const copyScale = progress.interpolate({ inputRange: [0, 1], outputRange: [1, 0.9] });
+  const checkScale = progress.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] });
+  const glyphBox = { width: iconSize, height: iconSize };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label ?? "Copy",
+      onPress: handlePress,
+      onPressIn: () => press(0.97),
+      onPressOut: () => press(1),
+      hitSlop: { top: slop, bottom: slop, left: slop, right: slop },
+      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, { transform: [{ scale: pressScale }] }], children: [
+        /* @__PURE__ */ jsxs(View, { style: glyphBox, children: [
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              testID: "copy-glyph",
+              style: [
+                styles.glyph,
+                reduced ? { opacity: copied ? 0 : 1 } : { opacity: copyOpacity, transform: [{ scale: copyScale }] }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "copy", size: iconSize, color: fg })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              testID: "check-glyph",
+              style: [
+                styles.glyph,
+                reduced ? { opacity: copied ? 1 : 0 } : { opacity: checkOpacity, transform: [{ scale: checkScale }] }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: fg })
+            }
+          )
+        ] }),
+        label ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: label }) : null
+      ] })
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      variant: {
+        ghost: { backgroundColor: "transparent" },
+        outline: {
+          backgroundColor: "transparent",
+          borderWidth: theme.borderWidth.thin,
+          borderColor: theme.color.borderStrong
+        }
+      },
+      // Height, horizontal padding, gap and radius all resolve from the same
+      // control-size tier — one ramp, four steps.
+      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
+        }
+      }
+    }
+  },
+  // Both glyphs share the one box so they can crossfade in place.
+  glyph: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    variants: {
+      size: {
+        xs: {
+          fontSize: theme.type.caption1.fontSize,
+          lineHeight: theme.type.caption1.lineHeight,
+          letterSpacing: theme.type.caption1.letterSpacing
+        },
+        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
+        }
+      },
+      variant: {}
+    }
+  }
+}));
+
+export { CopyButton };

package/dist/chunk-52X2VYTD.js

@@ -0,0 +1,228 @@
+import { useColorTransition } from './chunk-ITTYJZWX.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import * as React from 'react';
+import { Animated, Easing, Pressable, View, TextInput, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MASK = "\u2022";
+var COMPLETE_POP = 1.08;
+var COMPLETE_STAGGER = 55;
+function OTPBox({
+  char,
+  secure,
+  active,
+  borderTarget,
+  fillTarget,
+  caret,
+  pop
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { disabled: false });
+  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const borderColor = useColorTransition(borderTarget, theme.duration.base, easing);
+  const backgroundColor = useColorTransition(fillTarget, theme.duration.base, easing);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID: "otp-box",
+      style: [styles.box, { borderColor, backgroundColor, transform: [{ scale: pop }] }],
+      children: char ? /* @__PURE__ */ jsx(Text, { style: styles.digit, children: secure ? MASK : char }) : active ? /* @__PURE__ */ jsx(Animated.View, { style: [styles.caret, { opacity: caret }] }) : null
+    }
+  );
+}
+function OTP({
+  length = 6,
+  value,
+  defaultValue = "",
+  onChangeText,
+  onComplete,
+  disabled = false,
+  error = false,
+  secure = false,
+  keyboardType = "number-pad",
+  accessibilityLabel = "One-time code",
+  style
+}) {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(() => defaultValue.slice(0, length));
+  const current = (isControlled ? value : internal) ?? "";
+  const [focused, setFocused] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const { styles } = useStyles(sheet, { disabled });
+  const theme = useLoamTheme();
+  const caret = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (!focused || disabled || theme.reduceMotion) {
+      caret.setValue(1);
+      return;
+    }
+    const half = theme.loop.spin / 2;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(caret, { toValue: 0, duration: half, useNativeDriver: true }),
+        Animated.timing(caret, { toValue: 1, duration: half, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [focused, disabled, caret, theme.reduceMotion, theme.loop.spin]);
+  const numeric = keyboardType === "number-pad" || keyboardType === "numeric" || keyboardType === "phone-pad";
+  const handleChange = (text) => {
+    let next = numeric ? text.replace(/\D/g, "") : text;
+    next = next.slice(0, length);
+    if (next.length > current.length) haptics.impact("light");
+    if (!isControlled) setInternal(next);
+    onChangeText?.(next);
+    if (next.length === length) {
+      haptics.notify("success");
+      onComplete?.(next);
+    }
+  };
+  const focus = () => {
+    if (!disabled) inputRef.current?.focus();
+  };
+  const activeIndex = current.length;
+  const isComplete = length > 0 && current.length === length;
+  const popsRef = React.useRef([]);
+  if (popsRef.current.length !== length) {
+    popsRef.current = Array.from({ length }, (_, i) => popsRef.current[i] ?? new Animated.Value(1));
+  }
+  const pops = popsRef.current;
+  React.useEffect(() => {
+    if (!isComplete || disabled) return;
+    const easing = Easing.bezier(...theme.easing.base);
+    const anim = Animated.stagger(
+      COMPLETE_STAGGER,
+      pops.map(
+        (p) => Animated.sequence([
+          Animated.timing(p, {
+            toValue: COMPLETE_POP,
+            duration: theme.duration.base,
+            easing,
+            useNativeDriver: true
+          }),
+          Animated.timing(p, {
+            toValue: 1,
+            duration: theme.duration.base,
+            easing,
+            useNativeDriver: true
+          })
+        ])
+      )
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [isComplete, disabled, pops, theme.duration.base, theme.easing.base]);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      onPress: focus,
+      disabled,
+      accessibilityRole: "none",
+      style: [styles.row, style],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: styles.boxes,
+            importantForAccessibility: "no-hide-descendants",
+            accessibilityElementsHidden: true,
+            children: Array.from({ length }).map((_, i) => {
+              const char = current[i];
+              const isActive = focused && !disabled && !error && i === activeIndex && i < length;
+              const borderTarget = error ? theme.color.danger : isComplete ? theme.color.good : char || isActive ? theme.color.accent : theme.color.borderStrong;
+              return /* @__PURE__ */ jsx(
+                OTPBox,
+                {
+                  char,
+                  secure,
+                  active: isActive,
+                  borderTarget,
+                  fillTarget: isActive ? theme.color.surface : theme.color.surface2,
+                  caret,
+                  pop: pops[i]
+                },
+                i
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ref: inputRef,
+            value: current,
+            onChangeText: handleChange,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+            editable: !disabled,
+            keyboardType,
+            textContentType: "oneTimeCode",
+            autoComplete: "one-time-code",
+            maxLength: length,
+            caretHidden: true,
+            accessibilityLabel,
+            accessibilityState: { disabled },
+            style: styles.hiddenInput
+          }
+        )
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  row: {
+    position: "relative",
+    alignSelf: "flex-start",
+    variants: {
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  boxes: {
+    flexDirection: "row",
+    gap: theme.space.s2
+  },
+  // `borderColor` / `backgroundColor` are supplied at the use site as animated
+  // values so a box can travel between states over `duration.base`.
+  box: {
+    width: theme.space[48],
+    height: theme.space[58],
+    alignItems: "center",
+    justifyContent: "center",
+    // The reference draws a `1.5px` cell edge — the static `w2` weight.
+    borderWidth: theme.borderWidth.thick,
+    borderRadius: theme.radius.md,
+    variants: {
+      disabled: { true: {}, false: {} }
+    }
+  },
+  digit: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[26],
+    color: theme.color.text
+  },
+  caret: {
+    width: theme.space[2],
+    height: theme.space[24],
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.accent
+  },
+  // Transparent overlay: fills the row so any tap focuses it and the OS can
+  // route autofill/paste here, while the visible UI is the boxes underneath.
+  hiddenInput: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    opacity: 0,
+    color: "transparent"
+  }
+}));
+
+export { OTP };

package/dist/chunk-5P26LBDL.js

@@ -0,0 +1 @@
+

package/dist/chunk-5XLRYDAX.js

@@ -0,0 +1 @@
+