@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-SBMNWWBV.js → chunk-LGNTP5XA.js}

@@ -1,12 +1,29 @@
-import { NumberRoll } from './chunk-CUMUNPXY.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { View, Animated, Text } from 'react-native';
+import { NumberRoll } from './chunk-IMMALLRU.js';
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, StyleSheet, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function useForeground(variant) {
-  const theme = useLoamTheme();
+function useForeground(variant, solid = false) {
+  const theme = useLoamTheme("badge");
+  if (solid) {
+    switch (variant) {
+      case "accent":
+        return theme.color.accentInk;
+      case "good":
+        return theme.color.goodInk;
+      case "warn":
+        return theme.color.warnInk;
+      case "danger":
+        return theme.color.dangerInk;
+      case "info":
+        return theme.color.infoInk;
+    }
+  }
   switch (variant) {
     case "accent":
       return theme.color.accentOnSoft;
@@ -28,6 +45,7 @@ function Badge({
   variant = "neutral",
   size = "md",
   outline = false,
+  solid = false,
   leadingIcon,
   dot = false,
   dotStyle,
@@ -37,26 +55,69 @@ function Badge({
   announce = false,
   motion = "full",
   animateCount = false,
+  onPress,
   accessibilityLabel,
   style
 }) {
   const { styles } = useStyles(sheet, { variant, size, outline });
-  const theme = useLoamTheme();
-  const fg = useForeground(variant);
+  const theme = useLoamTheme("badge");
+  const fg = useForeground(variant, solid);
+  const focusRing = useFocusRing(theme.radius.full);
   const iconSize = size === "sm" ? 12 : 14;
-  const dotSize = size === "sm" ? theme.space[6] : theme.space[7];
+  const dotSize = theme.space[6];
   const label = typeof children === "string" ? children : void 0;
+  const level = useResolvedMotion(motion, "badge");
+  const appear = React.useRef(new Animated.Value(level === "full" ? 0.5 : 1)).current;
+  React.useEffect(() => {
+    if (level !== "full") return;
+    Animated.spring(appear, {
+      ...springConfig(theme, "fs"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, []);
+  const [ghost, setGhost] = React.useState(null);
+  const lastVariant = React.useRef(variant);
+  const ghostFade = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    const was = lastVariant.current;
+    lastVariant.current = variant;
+    if (was === variant || level === "none") return;
+    setGhost(was);
+    ghostFade.setValue(1);
+    const anim = Animated.timing(ghostFade, {
+      toValue: 0,
+      ...motionTiming("reduced"),
+      useNativeDriver: true
+    });
+    anim.start(({ finished }) => finished && setGhost(null));
+    return () => anim.stop();
+  }, [variant]);
+  const { styles: ghostStyles } = useStyles(sheet, { variant: ghost ?? variant, size, outline });
   const isCount = count !== void 0;
   if (isCount && count === 0 && !showZero) return null;
   const display = isCount ? count > max ? `${max}+` : String(count) : void 0;
-  return /* @__PURE__ */ jsxs(
-    View,
+  const pill = /* @__PURE__ */ jsxs(
+    Animated.View,
     {
-      accessibilityRole: "text",
+      accessibilityRole: onPress ? void 0 : NAMED_ROLE,
       accessibilityLabel: accessibilityLabel ?? (isCount ? String(count) : label),
       accessibilityLiveRegion: announce && isCount ? "polite" : "none",
-      style: [styles.base, style],
+      style: [
+        styles.base,
+        solid && variant !== "neutral" && !outline ? { backgroundColor: theme.color[variant], borderColor: theme.color[variant] } : null,
+        style,
+        { transform: [{ scale: appear }] }
+      ],
       children: [
+        ghost ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            testID: "loam-badge-ghost",
+            pointerEvents: "none",
+            style: [ghostStyles.base, StyleSheet.absoluteFill, { opacity: ghostFade, margin: 0 }]
+          }
+        ) : null,
         dot && !isCount ? (
           // `Animated.View` rather than `View` so `dotStyle` can carry an
           // `Animated.Value`. With no override it behaves as a plain view — this
@@ -91,6 +152,19 @@ function Badge({
       ]
     }
   );
+  if (!onPress) return pill;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "link",
+      accessibilityLabel: accessibilityLabel ?? (isCount ? String(count) : label),
+      onPress,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      style: [{ alignSelf: "flex-start", borderRadius: theme.radius.full }, focusRing.style],
+      children: pill
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   base: {
@@ -119,9 +193,8 @@ var sheet = createStyleSheet((theme) => ({
       },
       size: {
         sm: { height: theme.space[20], paddingHorizontal: theme.space.s2 },
-        // Reference (buildWidgets chip): `padding:7px 13px` — 13px is a step of the spacing ramp.
-        // height is derived from padding + content (no fixed height in spec).
-        md: { paddingVertical: theme.space[7], paddingHorizontal: theme.space[13] }
+        // Final 03 (R10): md is pinned at 24 with 10 padding, like web.
+        md: { height: theme.space[24], paddingHorizontal: theme.space[10] }
       },
       outline: {
         true: {
@@ -139,7 +212,6 @@ var sheet = createStyleSheet((theme) => ({
     variants: {
       size: {
         sm: { fontSize: theme.fontSize[12] },
-        // Reference (buildWidgets chip): `font-size:13px` — 13px, read from the ramp rather than hardcoded.
         md: { fontSize: theme.fontSize[13] }
       },
       variant: {},

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 };