@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-67IZZ2MJ.js → chunk-U3ETF22F.js}

@@ -1,8 +1,9 @@
-import { useColorTransition } from './chunk-7BUIKDD6.js';
 import { announce } from './chunk-W23G6JLF.js';
+import { useInputPlatform, useColorTransition } from './chunk-KXLDK6HB.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
 import { haptics } from './chunk-NY2U3PBI.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Easing, View, Pressable, TextInput, Platform, Text } from 'react-native';
@@ -11,7 +12,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var DEFAULT_LABELS = {
   field: "One-time code",
-  incorrect: "Incorrect code",
+  clear: "Clear code",
   errorAnnouncement: (field, message) => `${field}: ${message}`
 };
 var MASK = "\u2022";
@@ -24,10 +25,12 @@ function OTPBox({
   borderTarget,
   fillTarget,
   caret,
-  pop
+  pop,
+  size
 }) {
   const theme = useLoamTheme("otp");
-  const { styles } = useStyles(sheet, { disabled: false });
+  const os = useInputPlatform();
+  const { styles } = useStyles(sheet, { disabled: false, os });
   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);
@@ -35,28 +38,37 @@ function OTPBox({
     Animated.View,
     {
       testID: "otp-box",
-      style: [styles.box, { borderColor, backgroundColor, transform: [{ scale: pop }] }],
+      style: [styles.box, size !== "lg" && { width: size === "md" ? theme.space[32] : theme.space[28], height: theme.ctl[size], borderRadius: theme.ctl.r[size] }, { 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,
+  surface = "filled",
   value,
   defaultValue = "",
   onChangeText,
   onComplete,
   disabled = false,
-  error = false,
-  errorMessage: errorMessageProp,
+  error: errorMessage,
+  success = false,
+  loading = false,
+  readOnly = false,
   secure = false,
   keyboardType = "number-pad",
+  size = "lg",
+  motion = "full",
+  clearable = false,
+  leading,
+  trailing,
   accessibilityLabel: accessibilityLabelProp,
   labels: labelsProp,
   style
 }) {
   const labels = useLabels("otp", DEFAULT_LABELS, labelsProp);
-  const errorMessage = errorMessageProp ?? labels.incorrect;
+  const error = !!errorMessage;
+  const isLoading = loading && !disabled;
   const accessibilityLabel = accessibilityLabelProp ?? labels.field;
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(() => defaultValue.slice(0, length));
@@ -65,6 +77,7 @@ function OTP({
   const inputRef = React.useRef(null);
   const { styles } = useStyles(sheet, { disabled });
   const theme = useLoamTheme("otp");
+  const os = useInputPlatform();
   const caret = React.useRef(new Animated.Value(1)).current;
   React.useEffect(() => {
     if (!focused || disabled || theme.reduceMotion) {
@@ -94,7 +107,7 @@ function OTP({
     }
   };
   const focus = () => {
-    if (!disabled) inputRef.current?.focus();
+    if (!disabled && !readOnly) inputRef.current?.focus();
   };
   const activeIndex = current.length;
   const isComplete = length > 0 && current.length === length;
@@ -104,7 +117,7 @@ function OTP({
   }
   const pops = popsRef.current;
   React.useEffect(() => {
-    if (!isComplete || disabled) return;
+    if (!isComplete || disabled || motion !== "full") return;
     const easing = Easing.bezier(...theme.easing.base);
     const anim = Animated.stagger(
       COMPLETE_STAGGER,
@@ -127,14 +140,14 @@ function OTP({
     );
     anim.start();
     return () => anim.stop();
-  }, [isComplete, disabled, pops, theme.duration.base, theme.easing.base]);
+  }, [isComplete, disabled, motion, pops, theme.duration.base, theme.easing.base]);
   const kick = React.useRef(new Animated.Value(0)).current;
   const wasError = React.useRef(error);
   React.useEffect(() => {
     if (error && !wasError.current) {
       haptics.notify("error");
-      announce(labels.errorAnnouncement(accessibilityLabel, errorMessage), "assertive");
-      if (!theme.reduceMotion) {
+      announce(labels.errorAnnouncement(accessibilityLabel, errorMessage ?? ""), "assertive");
+      if (!theme.reduceMotion && motion === "full") {
         kick.setValue(theme.space[4]);
         Animated.spring(kick, {
           ...springConfig(theme, "fs", { thrown: true }),
@@ -144,11 +157,12 @@ function OTP({
       }
     }
     wasError.current = error;
-  }, [error, kick, theme, accessibilityLabel, errorMessage, labels]);
+  }, [error, kick, motion, theme, accessibilityLabel, errorMessage, labels]);
   const errorId = React.useId();
-  const showError = error && !!errorMessage;
+  const showError = error;
   return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
     /* @__PURE__ */ jsxs(Pressable, { onPress: focus, disabled, accessibilityRole: "none", style: styles.row, children: [
+      leading ? /* @__PURE__ */ jsx(Icon, { name: leading, size: theme.icon.md, color: theme.color.text3 }) : null,
       /* @__PURE__ */ jsx(
         Animated.View,
         {
@@ -158,7 +172,7 @@ function OTP({
           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;
+            const borderTarget = error ? theme.color.danger : isComplete || success ? theme.color.good : isLoading ? theme.focus.ringColor : char || isActive ? theme.color.accent : theme.color.borderStrong;
             return /* @__PURE__ */ jsx(
               OTPBox,
               {
@@ -166,15 +180,31 @@ function OTP({
                 secure,
                 active: isActive,
                 borderTarget,
-                fillTarget: isActive ? theme.color.surface : theme.color.surface2,
+                fillTarget: isActive ? theme.color.surface : fieldSurfaceFill(theme, surface),
                 caret,
-                pop: pops[i]
+                pop: pops[i],
+                size
               },
               i
             );
           })
         }
       ),
+      trailing ? /* @__PURE__ */ jsx(Icon, { name: trailing, size: theme.icon.md, color: theme.color.text3 }) : null,
+      clearable && current.length > 0 && !disabled && !readOnly ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.clear,
+          hitSlop: theme.space.s2,
+          onPress: () => {
+            if (!isControlled) setInternal("");
+            onChangeText?.("");
+            inputRef.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.color.text3 })
+        }
+      ) : null,
       /* @__PURE__ */ jsx(
         TextInput,
         {
@@ -183,10 +213,11 @@ function OTP({
           onChangeText: handleChange,
           onFocus: () => setFocused(true),
           onBlur: () => setFocused(false),
-          editable: !disabled,
+          editable: !disabled && !readOnly,
+          "aria-busy": isLoading || void 0,
           keyboardType,
           textContentType: "oneTimeCode",
-          autoComplete: "one-time-code",
+          autoComplete: os === "android" ? "sms-otp" : "one-time-code",
           maxLength: length,
           caretHidden: true,
           accessibilityLabel,
@@ -221,15 +252,19 @@ function OTP({
 var sheet = createStyleSheet((theme) => ({
   root: { alignSelf: "flex-start", gap: theme.space.s2 },
   errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  // Field helper / error: 12, the same step as Input's hint and error.
   errorText: {
     fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
     color: theme.color.danger
   },
   row: {
     position: "relative",
     alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
     variants: {
       disabled: {
         true: { opacity: theme.state.disabledOpacity },
@@ -244,26 +279,36 @@ var sheet = createStyleSheet((theme) => ({
   // `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],
+    // The lg field shell: 40 × 44 (F68; was 48 × 58).
+    width: theme.space[40],
+    height: theme.ctl.lg,
     alignItems: "center",
     justifyContent: "center",
     // The reference draws a `1.5px` cell edge — the static `w2` weight.
     borderWidth: theme.borderWidth.thick,
-    borderRadius: theme.radius.md,
+    borderRadius: theme.ctl.r.lg,
     variants: {
       disabled: { true: {}, false: {} }
     }
   },
+  // 22 tabular at the label weight in the system face: 600 on iOS, 500 on
+  // Android (F68; was 26 bold).
   digit: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.fontSize[26],
-    color: theme.color.text
+    fontSize: theme.fontSize[22],
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: { fontWeight: theme.fontWeight.semibold },
+        android: { fontWeight: theme.fontWeight.medium }
+      }
+    }
   },
+  // 2 × 22, accent.
   caret: {
     width: theme.space[2],
-    height: theme.space[24],
+    height: theme.space[22],
     borderRadius: theme.radius.sm,
     backgroundColor: theme.color.accent
   },

package/dist/{chunk-EDCBJV7J.js → chunk-U6BYHD2N.js}

@@ -1,5 +1,7 @@
+import { Avatar } from './chunk-JWCVBFDU.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
 import { NAMED_ROLE } from './chunk-W23G6JLF.js';
-import { Avatar } from './chunk-V2OEB75Z.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
 import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
@@ -7,7 +9,7 @@ import { Animated, Easing, View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var SIZE_PX = { xs: 28, sm: 36, md: 48, lg: 60, xl: 76 };
+var SIZE_PX = { xs: 24, sm: 30, md: 36, lg: 48, xl: 60 };
 var DEFAULT_LABELS = {
   none: "No people",
   summary: (total, names, hidden) => {
@@ -25,23 +27,39 @@ function AvatarGroup({
   avatars,
   children,
   max = 3,
-  size = "md",
+  size = "sm",
+  shape,
   onPress,
   ring = true,
   motion = "reduced",
   label,
-  labels: labelsProp
+  labels: labelsProp,
+  platform,
+  tone,
+  status
 }) {
   const labels = useLabels("avatarGroup", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { size });
   const theme = useLoamTheme("avatar-group");
+  const android = isAndroidIdiom(theme, platform);
   const dim = SIZE_PX[size];
   const overlap = Math.round(dim * 0.3);
-  const ringWidth = theme.borderWidth.thick;
-  const cells = avatars ? avatars.map((a) => ({ key: a.id, name: a.name, node: /* @__PURE__ */ jsx(Avatar, { name: a.name, src: a.src, size }) })) : React.Children.toArray(children).filter(React.isValidElement).map((child, i) => ({
+  const ringWidth = theme.borderWidth.heavy;
+  const cornerOf = (s) => s === "circle" ? theme.radius.full : s === "rounded" ? dim < theme.space[48] ? theme.radius.sm : theme.radius.md : Math.round(dim * 0.32);
+  const chipRadius = cornerOf(shape ?? "circle");
+  const skin = tone ? softToneSkin(theme, tone) : null;
+  const cells = avatars ? avatars.map((a) => ({
+    key: a.id,
+    name: a.name,
+    node: /* @__PURE__ */ jsx(Avatar, { name: a.name, src: a.src, size, shape, status: a.status ?? status })
+  })) : React.Children.toArray(children).filter(React.isValidElement).map((child, i) => ({
     key: child.key ?? i,
     name: child.props.name ?? "",
-    node: React.cloneElement(child, { size })
+    node: React.cloneElement(child, {
+      size,
+      ...shape ? { shape } : null,
+      ...status && !child.props.status ? { status } : null
+    })
   }));
   const visible = cells.slice(0, Math.max(0, max));
   const hidden = cells.length - visible.length;
@@ -53,7 +71,11 @@ function AvatarGroup({
   const cellCount = visible.length + (hidden > 0 ? 1 : 0);
   const pressAnimated = Boolean(onPress) && motion !== "none" && !theme.reduceMotion;
   const scale = React.useRef(new Animated.Value(1)).current;
-  const springTo = (to) => Animated.spring(scale, { ...springConfig(theme, "fs"), toValue: to, useNativeDriver: true }).start();
+  const springTo = (to) => Animated.spring(scale, {
+    ...springConfig(theme, "fs"),
+    toValue: to,
+    useNativeDriver: true
+  }).start();
   const staggerAnimated = motion === "full" && !theme.reduceMotion;
   const enter = React.useMemo(
     () => Array.from({ length: cellCount }, () => new Animated.Value(staggerAnimated ? 0 : 1)),
@@ -80,8 +102,8 @@ function AvatarGroup({
   const cellStyle = (index) => ({
     marginStart: index === 0 ? 0 : -overlap,
     ...ring ? {
-      backgroundColor: theme.color.surface,
-      borderRadius: theme.radius.full,
+      backgroundColor: skin ? skin.edge : theme.color.surface,
+      borderRadius: shape && shape !== "circle" ? chipRadius + ringWidth : theme.radius.full,
       padding: ringWidth
     } : null
   });
@@ -95,10 +117,30 @@ function AvatarGroup({
   };
   const content = /* @__PURE__ */ jsxs(Animated.View, { style: [styles.row, pressAnimated ? { transform: [{ scale }] } : null], children: [
     visible.map((c, i) => /* @__PURE__ */ jsx(Animated.View, { style: [cellStyle(i), enterStyle(i)], children: c.node }, c.key)),
-    hidden > 0 ? /* @__PURE__ */ jsx(Animated.View, { style: [cellStyle(visible.length), enterStyle(visible.length)], children: /* @__PURE__ */ jsx(View, { style: styles.chip, children: /* @__PURE__ */ jsxs(Text, { style: styles.chipText, children: [
-      "+",
-      hidden
-    ] }) }) }) : null
+    hidden > 0 ? /* @__PURE__ */ jsx(Animated.View, { style: [cellStyle(visible.length), enterStyle(visible.length)], children: /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.chip,
+          shape ? { borderRadius: chipRadius } : null,
+          skin ? { backgroundColor: skin.fill } : null
+        ],
+        children: /* @__PURE__ */ jsxs(
+          Text,
+          {
+            style: [
+              styles.chipText,
+              skin ? { color: skin.ink } : null,
+              { fontWeight: android ? theme.fontWeight.medium : theme.fontWeight.semibold }
+            ],
+            children: [
+              "+",
+              hidden
+            ]
+          }
+        )
+      }
+    ) }) : null
   ] });
   if (onPress) {
     return /* @__PURE__ */ jsx(
@@ -109,46 +151,60 @@ function AvatarGroup({
         onPress,
         onPressIn: pressAnimated ? () => springTo(0.97) : void 0,
         onPressOut: pressAnimated ? () => springTo(1) : void 0,
-        style: styles.pressable,
+        style: ({ pressed }) => [
+          styles.pressable,
+          pressed ? { backgroundColor: theme.state.pressed } : null
+        ],
         children: content
       }
     );
   }
-  return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: NAMED_ROLE, accessibilityLabel: summary, style: styles.pressable, children: content });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessible: true,
+      accessibilityRole: NAMED_ROLE,
+      accessibilityLabel: summary,
+      style: styles.pressable,
+      children: content
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   // `alignSelf: 'flex-start'` so the stack hugs its avatars instead of stretching
   // across the parent and letting taps land on empty space.
-  pressable: { alignSelf: "flex-start" },
+  pressable: { alignSelf: "flex-start", borderRadius: theme.radius.full },
   row: { flexDirection: "row", alignItems: "center" },
-  // The `+N` chip: a same-sized circle in the neutral surface-2 fill.
+  // The `+N` chip: a same-sized circle on surface-3.
   chip: {
     alignItems: "center",
     justifyContent: "center",
     overflow: "hidden",
     borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface2,
+    backgroundColor: theme.color.surface3,
     variants: {
       size: {
-        xs: { width: theme.space[28], height: theme.space[28] },
-        sm: { width: theme.space[36], height: theme.space[36] },
-        md: { width: theme.space[48], height: theme.space[48] },
-        lg: { width: theme.space[60], height: theme.space[60] },
-        xl: { width: theme.space[76], height: theme.space[76] }
+        xs: { width: theme.space[24], height: theme.space[24] },
+        sm: { width: theme.space[30], height: theme.space[30] },
+        md: { width: theme.space[36], height: theme.space[36] },
+        lg: { width: theme.space[48], height: theme.space[48] },
+        xl: { width: theme.space[60], height: theme.space[60] }
       }
     }
   },
   chipText: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    color: theme.color.text2,
+    // Label weight, 12, tabular, at every size (Final 06); the weight is set per OS.
+    fontSize: theme.fontSize[12],
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text,
     variants: {
       size: {
-        xs: { fontSize: theme.fontSize[9] },
-        sm: { fontSize: theme.fontSize[12] },
-        md: { fontSize: theme.fontSize[16] },
-        lg: { fontSize: theme.fontSize[20] },
-        xl: { fontSize: theme.fontSize[25] }
+        xs: { fontSize: theme.fontSize[10] },
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {}
       }
     }
   }

package/dist/{chunk-ENP3BMZU.js → chunk-UF6EJXPQ.js}

@@ -1,3 +1,4 @@
+import { softToneSkin } from './chunk-PJLTKDVY.js';
 import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Easing, Text } from 'react-native';
@@ -60,9 +61,13 @@ function StreamingText({
   children,
   streaming = false,
   motion = "full",
+  size = "md",
+  tone = "default",
+  variant = "plain",
   style
 }) {
   const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("streaming-text");
   const resolved = useResolvedMotion(motion, "streaming-text");
   const animate = resolved === "full";
   const content = text ?? (typeof children === "string" ? children : void 0);
@@ -70,7 +75,17 @@ function StreamingText({
   React.useEffect(() => {
     if (content !== void 0) prevRef.current = content;
   });
-  const rootStyle = [styles.root, style];
+  const softTone = tone === "default" || tone === "working" || tone === "neutral" ? "accent" : tone;
+  const skin = tone === "default" && variant === "plain" ? null : softToneSkin(theme, softTone);
+  const toneInk = tone === "working" ? theme.color.text : tone === "neutral" ? theme.color.text2 : skin?.ink;
+  const t = size === "sm" ? theme.type.footnote : size === "lg" ? theme.type.title3 : null;
+  const rootStyle = [
+    styles.root,
+    t && { fontSize: t.fontSize, lineHeight: t.lineHeight, letterSpacing: t.letterSpacing },
+    tone !== "default" && toneInk ? { color: toneInk } : null,
+    variant === "soft" && skin && { backgroundColor: skin.fill },
+    style
+  ];
   if (!animate || content === void 0) {
     return /* @__PURE__ */ jsx(Text, { style: rootStyle, "aria-busy": streaming || void 0, children: content ?? children });
   }