@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-LUZFCCSD.js

@@ -0,0 +1,271 @@
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { Animated, Easing, View, Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  label: "Thinking\u2026",
+  accessibleLabel: "Thinking",
+  cancel: "Cancel",
+  elapsed: (s) => `${s}s`,
+  thoughtFor: (s) => `Thought for ${s} s`
+};
+var DOT_BOX = { sm: 6, md: 8, lg: 10 };
+function useThinkingPulse(active) {
+  const theme = useLoamTheme("thinking");
+  const p = React.useRef(new Animated.Value(0)).current;
+  const { duration, easing } = theme.motion.loop;
+  React.useEffect(() => {
+    if (!active) {
+      p.setValue(0);
+      return;
+    }
+    const bezier = Easing.bezier(...easing);
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(p, { toValue: 1, duration, easing: bezier, useNativeDriver: true }),
+        Animated.timing(p, { toValue: 0, duration, easing: bezier, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [active, p, duration, easing]);
+  return active ? {
+    opacity: p.interpolate({ inputRange: [0, 1], outputRange: [1, 0.55] }),
+    transform: [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, 0.9] }) }]
+  } : null;
+}
+function useElapsed(active) {
+  const start = React.useRef(Date.now());
+  const [elapsed, setElapsed] = React.useState(0);
+  React.useEffect(() => {
+    if (!active) return;
+    const id = setInterval(() => setElapsed(Date.now() - start.current), 1e3);
+    return () => clearInterval(id);
+  }, [active]);
+  return elapsed;
+}
+function useShimmer(active) {
+  const theme = useLoamTheme("thinking");
+  const v = React.useRef(new Animated.Value(1)).current;
+  const { duration, easing } = theme.motion.loop;
+  React.useEffect(() => {
+    if (!active) {
+      v.setValue(1);
+      return;
+    }
+    const bezier = Easing.bezier(...easing);
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(v, { toValue: 0.45, duration, easing: bezier, useNativeDriver: true }),
+        Animated.timing(v, { toValue: 1, duration, easing: bezier, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [active, v, duration, easing]);
+  return v;
+}
+function Thinking({
+  label: labelProp,
+  size = "md",
+  tone = "working",
+  motion = "full",
+  announce = true,
+  accessibleLabel: accessibleLabelProp,
+  labels: labelsProp,
+  shimmer = false,
+  showElapsed = false,
+  onCancel,
+  cancelAfter = 1e4,
+  loading = true,
+  indicator = "dot",
+  cancelTone = "neutral",
+  thoughtFor,
+  reasoning,
+  defaultOpen = false,
+  platform,
+  style,
+  testID
+}) {
+  const labels = useLabels("thinking", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.label;
+  const accessibleLabel = accessibleLabelProp ?? labels.accessibleLabel;
+  const { styles } = useStyles(sheet, { tone, size });
+  const theme = useLoamTheme("thinking");
+  const android = isAndroidIdiom(theme, platform);
+  const pulse = loading && motion === "full" && !theme.reduceMotion;
+  const pulseStyle = useThinkingPulse(pulse);
+  const shimmerOpacity = useShimmer(shimmer && pulse);
+  const elapsedAfter = showElapsed === true ? 5e3 : showElapsed === false ? Infinity : showElapsed;
+  const elapsed = useElapsed(loading && (Number.isFinite(elapsedAfter) || Boolean(onCancel)));
+  const seconds = loading && elapsed >= elapsedAfter ? Math.floor(elapsed / 1e3) : null;
+  const canCancel = loading && Boolean(onCancel) && elapsed >= cancelAfter;
+  const [open, setOpen] = React.useState(defaultOpen);
+  if (thoughtFor !== void 0) {
+    return /* @__PURE__ */ jsxs(View, { style: [styles.done, style], testID, children: [
+      /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: { expanded: open },
+          onPress: () => setOpen((o) => !o),
+          hitSlop: theme.space.s2,
+          style: styles.doneToggle,
+          children: [
+            /* @__PURE__ */ jsx(View, { style: open ? styles.chevronOpen : null, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12, color: theme.color.text2 }) }),
+            /* @__PURE__ */ jsx(Text, { style: styles.doneLabel, children: labels.thoughtFor(thoughtFor) })
+          ]
+        }
+      ),
+      open ? typeof reasoning === "string" ? /* @__PURE__ */ jsx(Text, { style: styles.reasoning, children: reasoning }) : /* @__PURE__ */ jsx(View, { style: styles.reasoningBox, children: reasoning }) : null
+    ] });
+  }
+  const hasLabel = label !== "";
+  const box = DOT_BOX[size];
+  const dotColor = tone === "accent" ? theme.color.accent : tone === "neutral" ? theme.color.text2 : theme.status.working;
+  const name = hasLabel ? label : accessibleLabel;
+  const liveProps = announce ? { accessibilityLiveRegion: "polite", role: "status", accessibilityLabel: name } : {};
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ...liveProps,
+      "aria-busy": loading || void 0,
+      testID,
+      style: [styles.root, style],
+      children: [
+        indicator === "ring" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", color: dotColor, motion, accessibilityLabel: name }) : /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              { width: box, height: box, borderRadius: theme.radius.full, backgroundColor: dotColor },
+              pulseStyle
+            ]
+          }
+        ),
+        hasLabel ? /* @__PURE__ */ jsx(
+          Animated.Text,
+          {
+            style: [styles.label, shimmer && pulse ? { opacity: shimmerOpacity } : null],
+            children: label
+          }
+        ) : null,
+        seconds !== null ? (
+          // Hidden from the live region: a count that re-announces every second
+          // would drown out everything else.
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              style: styles.elapsed,
+              children: labels.elapsed(seconds)
+            }
+          )
+        ) : null,
+        canCancel ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.cancel,
+            onPress: onCancel,
+            hitSlop: Math.max(0, Math.round((theme.tapMin - theme.ctl.sm) / 2)),
+            android_ripple: android ? { color: theme.state.pressed } : void 0,
+            style: ({ pressed }) => [
+              styles.cancelBox,
+              pressed && !android && { backgroundColor: theme.state.hover }
+            ],
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: [
+                  styles.cancel,
+                  android && { fontWeight: theme.fontWeight.medium },
+                  cancelTone === "accent" && { color: theme.color.accentStrong }
+                ],
+                children: labels.cancel
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  done: { alignSelf: "flex-start", alignItems: "flex-start", gap: theme.space.s1 },
+  doneToggle: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    paddingHorizontal: theme.space.s1,
+    borderRadius: theme.radius.sm
+  },
+  chevronOpen: { transform: [{ rotate: "90deg" }] },
+  doneLabel: { ...theme.type.footnote, color: theme.color.text2 },
+  reasoningBox: { paddingStart: theme.space.s5 },
+  reasoning: { ...theme.type.footnote, color: theme.color.text2, paddingStart: theme.space.s5 },
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s2
+  },
+  // The count style: mono 12 / 500 tabular text-2.
+  elapsed: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.type.caption1.lineHeight,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"]
+  },
+  // Cancel is the shared text action — 12 / 600 text-2 (was accent 700), on the
+  // 30 status row (F43).
+  cancelBox: {
+    minHeight: theme.ctl.sm,
+    justifyContent: "center",
+    paddingHorizontal: theme.space[6],
+    borderRadius: theme.radius.sm
+  },
+  cancel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.type.caption1.lineHeight,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text2
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    variants: {
+      tone: {
+        working: { color: theme.color.text },
+        accent: { color: theme.color.text },
+        neutral: { color: theme.color.text2 }
+      },
+      size: {
+        sm: {
+          fontSize: theme.type.caption1.fontSize,
+          lineHeight: theme.type.caption1.lineHeight,
+          letterSpacing: theme.type.caption1.letterSpacing
+        },
+        md: {
+          fontSize: theme.type.footnote.fontSize,
+          lineHeight: theme.type.footnote.lineHeight,
+          letterSpacing: theme.type.footnote.letterSpacing
+        },
+        lg: {
+          fontSize: theme.type.subheadline.fontSize,
+          lineHeight: theme.type.subheadline.lineHeight,
+          letterSpacing: theme.type.subheadline.letterSpacing
+        }
+      }
+    }
+  }
+}));
+
+export { Thinking, useThinkingPulse };

package/dist/{chunk-XTORZWRF.js → chunk-LXJCP4PL.js}

@@ -1,5 +1,7 @@
+import { alignItemsStyle } from './chunk-TUACVJNG.js';
+import { useInputPlatform } from './chunk-KXLDK6HB.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React2 from 'react';
 import { Platform, Easing, Keyboard, Animated, View, Pressable, Text, useWindowDimensions, ScrollView } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
@@ -85,13 +87,21 @@ var DEFAULT_LABELS = {
   previous: "Previous field",
   next: "Next field"
 };
-var PREVIOUS_ICON = "arrow-up";
-var NEXT_ICON = "arrow-down";
+var PREVIOUS_ICON = "chevron-up";
+var NEXT_ICON = "chevron-down";
 var ACCESSORY_NAV_MIN_FIELDS = 3;
+var SELF_ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
 function KeyboardSpacer({
   extra = 0,
   enabled = true,
-  testID
+  testID,
+  orientation = "vertical",
+  align
 }) {
   const { inset } = useAnimatedKeyboardInset(extra);
   return /* @__PURE__ */ jsx(
@@ -99,7 +109,10 @@ function KeyboardSpacer({
     {
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
-      style: { height: enabled ? inset : 0 },
+      style: [
+        orientation === "horizontal" ? { width: enabled ? inset : 0 } : { height: enabled ? inset : 0 },
+        align ? { alignSelf: SELF_ALIGN[align] } : null
+      ],
       testID
     }
   );
@@ -109,7 +122,9 @@ function KeyboardStickyView({
   offset = 0,
   enabled = true,
   style,
-  testID
+  testID,
+  align,
+  orientation = "vertical"
 }) {
   const { styles } = useStyles(sheet);
   const { inset } = useAnimatedKeyboardInset(offset);
@@ -117,7 +132,13 @@ function KeyboardStickyView({
   return /* @__PURE__ */ jsx(
     Animated.View,
     {
-      style: [styles.stickyBar, { transform: [{ translateY: enabled ? lift : 0 }] }, style],
+      style: [
+        styles.stickyBar,
+        orientation === "horizontal" ? { flexDirection: "row" } : null,
+        alignItemsStyle(align),
+        { transform: [{ translateY: enabled ? lift : 0 }] },
+        style
+      ],
       testID,
       children
     }
@@ -138,23 +159,41 @@ function KeyboardAccessoryBar({
   children,
   sticky = false,
   style,
-  testID
+  testID,
+  platform,
+  variant = "default",
+  size,
+  density,
+  orientation = "horizontal"
 }) {
+  const os = useInputPlatform(platform);
   const labels = useLabels("keyboard", DEFAULT_LABELS, labelsProp);
   const doneLabel = doneLabelProp ?? labels.done;
   const previousLabel = previousLabelProp ?? labels.previous;
   const nextLabel = nextLabelProp ?? labels.next;
-  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("keyboard");
+  const { styles } = useStyles(sheet, { os });
+  const vertical = orientation === "vertical";
+  const compact = density === "compact";
   const showNav = navigable && (fieldCount == null || fieldCount > ACCESSORY_NAV_MIN_FIELDS);
-  const bar = /* @__PURE__ */ jsxs(View, { accessibilityRole: "toolbar", style: [styles.accessoryBar, style], testID, children: [
-    showNav ? /* @__PURE__ */ jsxs(View, { style: styles.accessoryNav, children: [
+  const bar = /* @__PURE__ */ jsxs(View, { accessibilityRole: "toolbar", style: [
+    styles.accessoryBar,
+    variant === "plain" ? styles.accessoryBarPlain : null,
+    size ? { height: theme.ctl[size] } : null,
+    compact ? { paddingHorizontal: theme.space.s1 } : null,
+    vertical ? styles.accessoryBarVertical : null,
+    style
+  ], testID, children: [
+    showNav ? /* @__PURE__ */ jsxs(View, { style: [styles.accessoryNav, compact ? { gap: theme.space.s1 } : null], children: [
       /* @__PURE__ */ jsx(
         AccessoryButton,
         {
           icon: PREVIOUS_ICON,
           label: previousLabel,
           disabled: !canGoPrevious,
-          onPress: onPrevious
+          onPress: onPrevious,
+          os,
+          size
         }
       ),
       /* @__PURE__ */ jsx(
@@ -163,7 +202,9 @@ function KeyboardAccessoryBar({
           icon: NEXT_ICON,
           label: nextLabel,
           disabled: !canGoNext,
-          onPress: onNext
+          onPress: onNext,
+          os,
+          size
         }
       )
     ] }) : /* @__PURE__ */ jsx(View, {}),
@@ -185,10 +226,12 @@ function AccessoryButton({
   icon,
   label,
   disabled,
-  onPress
+  onPress,
+  os,
+  size
 }) {
   const theme = useLoamTheme("keyboard");
-  const { styles } = useStyles(sheet, { disabled });
+  const { styles } = useStyles(sheet, { disabled, os });
   return /* @__PURE__ */ jsx(
     Pressable,
     {
@@ -199,9 +242,17 @@ function AccessoryButton({
       onPress: disabled ? void 0 : onPress,
       style: ({ pressed }) => [
         styles.accessoryButton,
+        size ? { width: theme.ctl[size], height: theme.ctl[size] } : null,
         pressed && !disabled ? { backgroundColor: theme.state.pressed } : null
       ],
-      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color: disabled ? theme.color.text3 : theme.color.text2 })
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: icon,
+          size: theme.ctl.icon.lg,
+          color: disabled ? theme.color.text3 : theme.color.text2
+        }
+      )
     }
   );
 }
@@ -213,6 +264,8 @@ function KeyboardAvoidingScrollView({
   contentContainerStyle,
   onScroll,
   testID,
+  align,
+  orientation = "vertical",
   ...rest
 }) {
   const theme = useLoamTheme("keyboard");
@@ -223,8 +276,9 @@ function KeyboardAvoidingScrollView({
   const offset = React2.useRef(0);
   const restoreTo = React2.useRef(null);
   const pendingNode = React2.useRef(null);
-  const latest = React2.useRef({ inset, windowHeight, clearance });
-  latest.current = { inset, windowHeight, clearance };
+  const horizontal = orientation === "horizontal";
+  const latest = React2.useRef({ inset, windowHeight, clearance, horizontal });
+  latest.current = { inset, windowHeight, clearance, horizontal };
   const handleScroll = React2.useCallback(
     (event) => {
       offset.current = event.nativeEvent.contentOffset.y;
@@ -234,6 +288,7 @@ function KeyboardAvoidingScrollView({
   );
   const bringIntoView = React2.useCallback((node) => {
     if (!node || typeof node.measureInWindow !== "function") return;
+    if (latest.current.horizontal) return;
     const { inset: kbd, windowHeight: winH, clearance: pad } = latest.current;
     if (!kbd.visible) {
       pendingNode.current = node;
@@ -268,11 +323,16 @@ function KeyboardAvoidingScrollView({
     ScrollView,
     {
       ref: scrollRef,
+      horizontal,
       keyboardDismissMode,
       keyboardShouldPersistTaps: "handled",
       scrollEventThrottle: 16,
       onScroll: handleScroll,
-      contentContainerStyle: [{ paddingBottom: inset.height + clearance }, contentContainerStyle],
+      contentContainerStyle: [
+        { paddingBottom: inset.height + clearance },
+        alignItemsStyle(align),
+        contentContainerStyle
+      ],
       testID,
       ...rest,
       children
@@ -288,10 +348,14 @@ function useScrollIntoView() {
   return { ref, onFocus };
 }
 var sheet = createStyleSheet((theme) => ({
-  // The reference draws the accessory bar 42 dp tall; `toolbarH` (44) is the
-  // token for exactly this surface and also clears `tapMin`.
+  // F64: the bar is 44 on iOS (the keyboard accessory) and 48 on Android.
   accessoryBar: {
-    minHeight: theme.layout.toolbarH,
+    variants: {
+      os: {
+        ios: { height: theme.space[44] },
+        android: { height: theme.space[48] }
+      }
+    },
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
@@ -300,19 +364,33 @@ var sheet = createStyleSheet((theme) => ({
     borderTopWidth: theme.borderWidth.base,
     borderTopColor: theme.color.border
   },
+  // `orientation="vertical"`: a column that grows to its content.
+  accessoryBarVertical: {
+    flexDirection: "column",
+    alignItems: "stretch",
+    height: "auto",
+    paddingVertical: theme.space.s2,
+    gap: theme.space.s2
+  },
+  accessoryBarPlain: {
+    backgroundColor: theme.color.bg,
+    borderTopWidth: 0
+  },
   accessoryNav: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space.s2
   },
   accessoryMiddle: { flex: 1, alignItems: "center" },
+  // Ghost icon button on the lg tier.
   accessoryButton: {
-    minWidth: theme.tapMin,
-    minHeight: theme.tapMin,
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radius.sm,
+    borderRadius: theme.ctl.r.lg,
     variants: {
+      os: { ios: {}, android: {} },
       disabled: {
         true: { opacity: theme.state.disabledOpacity },
         false: {}
@@ -326,13 +404,16 @@ var sheet = createStyleSheet((theme) => ({
     justifyContent: "center",
     paddingHorizontal: theme.space.s1
   },
+  // Done is a link: 17 / 600 on iOS, 14 / 500 on Android.
   accessoryDoneLabel: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing,
-    color: theme.color.accentStrong
+    color: theme.color.accentStrong,
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[17], fontWeight: theme.fontWeight.semibold },
+        android: { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium }
+      }
+    }
   },
   stickyBar: {
     flexDirection: "column",