@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/chunk-DW3L54DQ.js

@@ -0,0 +1,305 @@
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import { DEFAULT_DATE_LABELS, localeNames, monthGrid, weekdayOrder, dayDisabled, dayLabel } from '@btndprojects/loam-date';
+import * as React from 'react';
+import { ScrollView, View, Text, Animated, Pressable, StyleSheet } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  ...DEFAULT_DATE_LABELS,
+  pickDate: "Pick a date",
+  pickRange: "Pick a range",
+  triggerNamed: (label, value) => `${label}, ${value}`,
+  triggerHint: "Double tap to change the date range",
+  startTime: "Start time, 24-hour",
+  endTime: "End time, 24-hour",
+  timeTo: "to",
+  clearButton: "Clear",
+  goToToday: "Go to today",
+  cancel: "Cancel",
+  apply: "Apply",
+  pickOtherEnd: (stamp) => `${stamp} \u2014 pick the other end`,
+  reResolvesNote: "Re-resolves on load",
+  dayToday: "today",
+  dayWholeRange: "the whole range",
+  dayRangeStart: "range start",
+  dayRangeEnd: "range end",
+  dayInRange: "in the range",
+  dayUnavailable: (reason) => `unavailable: ${reason}`
+};
+function MonthList({
+  Z,
+  anchorMs,
+  radius,
+  ctx,
+  from,
+  to,
+  constraints,
+  dayMeta,
+  weekNumbers = false,
+  onPick,
+  scrollNonce = 0,
+  motion = "full",
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("dateRangePicker", DEFAULT_LABELS, labelsProp);
+  const names = localeNames(ctx.locale);
+  const level = useResolvedMotion(motion, "date-range-picker");
+  const months = React.useMemo(() => {
+    const out = [];
+    for (let i = -radius; i <= radius; i += 1) {
+      out.push(monthGrid(Z, Z.addMonths(Z.startOfMonth(anchorMs), i), ctx));
+    }
+    return out;
+  }, [Z, anchorMs, radius, ctx]);
+  const order = weekdayOrder(ctx.weekStartsOn ?? 1);
+  const scroller = React.useRef(null);
+  const offsets = React.useRef([]);
+  const anchorKey = Z.monthKey(anchorMs);
+  React.useEffect(() => {
+    const y = offsets.current[radius];
+    if (y != null) scroller.current?.scrollTo({ y, animated: false });
+  }, [anchorKey, radius, scrollNonce]);
+  const [snaps, setSnaps] = React.useState(void 0);
+  const measure = (index) => (event) => {
+    offsets.current[index] = event.nativeEvent.layout.y;
+    const all = offsets.current;
+    if (all.length === months.length && all.every((y) => y != null)) {
+      setSnaps(
+        (prev) => prev && prev.length === all.length && prev.every((y, i) => y === all[i]) ? prev : [...all]
+      );
+    }
+    if (index === radius)
+      scroller.current?.scrollTo({ y: event.nativeEvent.layout.y, animated: false });
+  };
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      ref: scroller,
+      showsVerticalScrollIndicator: true,
+      snapToOffsets: snaps,
+      snapToEnd: false,
+      decelerationRate: "fast",
+      testID: "date-range-month-list",
+      children: months.map((item, index) => /* @__PURE__ */ jsxs(View, { style: styles.month, onLayout: measure(index), children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.monthLabel, role: "heading", ...{ "aria-level": 3 }, children: item.label }),
+        /* @__PURE__ */ jsxs(View, { style: styles.weekdayRow, children: [
+          weekNumbers ? /* @__PURE__ */ jsx(View, { style: styles.weekNumber }) : null,
+          order.map((dow) => /* @__PURE__ */ jsx(View, { style: styles.weekdayCell, children: /* @__PURE__ */ jsx(Text, { style: styles.weekdayText, ...{ "aria-hidden": true }, children: names.dayAbbr[dow] }) }, dow))
+        ] }),
+        item.weeks.map((week) => /* @__PURE__ */ jsxs(View, { style: styles.weekRow, children: [
+          weekNumbers ? /* @__PURE__ */ jsx(View, { style: styles.weekNumber, children: /* @__PURE__ */ jsx(Text, { style: styles.weekNumberText, children: week.week }) }) : null,
+          week.days.map(
+            (day) => (
+              // A day borrowed from the neighbouring month is **not** rendered
+              // as a cell here, unlike in the web picker's two-month view. In a
+              // continuous scroll that month is a thumb-flick away, so a
+              // borrowed day is not a shortcut — it is the same date appearing
+              // twice, pickable twice, and announced twice. The blank keeps the
+              // six-row height so the grid does not jump.
+              day.inMonth ? /* @__PURE__ */ jsx(
+                DayCell,
+                {
+                  Z,
+                  day,
+                  ctx,
+                  from,
+                  to,
+                  constraints,
+                  meta: dayMeta?.(day.ms),
+                  level,
+                  labels,
+                  names: names.days,
+                  onPick
+                },
+                day.key
+              ) : /* @__PURE__ */ jsx(View, { style: styles.dayBlank }, day.key)
+            )
+          )
+        ] }, `${week.week}-${week.days[0].key}`))
+      ] }, `${item.y}-${item.mo}`))
+    }
+  );
+}
+function DayCell({
+  Z,
+  day,
+  ctx,
+  from,
+  to,
+  constraints,
+  meta,
+  level,
+  labels,
+  names,
+  onPick
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("date-range-picker");
+  const reason = dayDisabled(Z, day.ms, constraints, ctx, meta);
+  const disabled = reason !== false || meta?.loading === true;
+  const today = Z.sameDay(day.ms, ctx.now ?? Date.now());
+  const dayEnd = Z.endOfDay(day.ms);
+  const isStart = from != null && Z.sameDay(day.ms, from);
+  const isEnd = to != null && Z.sameDay(day.ms, to - 1);
+  const inside = from != null && to != null && day.ms >= from && dayEnd < to;
+  const selection = isStart && isEnd ? "both" : isStart ? "start" : isEnd ? "end" : inside ? "inside" : "none";
+  const wash = React.useRef(new Animated.Value(inside ? 1 : 0)).current;
+  const land = React.useRef(new Animated.Value(1)).current;
+  const endpoint = isStart || isEnd;
+  const daysIn = inside && from != null ? Math.round((day.ms - from) / 864e5) : 0;
+  React.useEffect(() => {
+    if (level !== "full") {
+      wash.setValue(inside ? 1 : 0);
+      return;
+    }
+    const run = Animated.sequence([
+      // loam-audit-ignore raw-duration — the shared 30ms stagger, capped at 8
+      Animated.delay(inside ? Math.min(daysIn, 8) * 30 : 0),
+      Animated.spring(wash, {
+        ...springConfig(theme, "fe"),
+        toValue: inside ? 1 : 0,
+        useNativeDriver: true
+      })
+    ]);
+    run.start();
+    return () => run.stop();
+  }, [inside, level]);
+  const wasEnd = React.useRef(endpoint);
+  React.useEffect(() => {
+    if (endpoint && !wasEnd.current && level === "full") {
+      land.setValue(0);
+      Animated.spring(land, {
+        ...springConfig(theme, "fs"),
+        toValue: 1,
+        useNativeDriver: true
+      }).start();
+    }
+    wasEnd.current = endpoint;
+  }, [endpoint, level]);
+  const parts = [
+    `${names[day.dow]} ${dayLabel(Z, day.ms, { longMonth: true, locale: ctx.locale })}`
+  ];
+  if (today) parts.push(labels.dayToday);
+  if (selection === "both") parts.push(labels.dayWholeRange);
+  else if (selection === "start") parts.push(labels.dayRangeStart);
+  else if (selection === "end") parts.push(labels.dayRangeEnd);
+  else if (selection === "inside") parts.push(labels.dayInRange);
+  if (reason) parts.push(labels.dayUnavailable(reason));
+  const name = parts.join(", ");
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: name,
+      accessibilityState: { selected: selection !== "none", disabled },
+      disabled,
+      onPress: () => onPick(day.ms),
+      style: ({ pressed }) => [styles.day, pressed && !disabled && styles.pressed],
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            pointerEvents: "none",
+            style: [StyleSheet.absoluteFill, styles.dayInside, { opacity: wash }]
+          }
+        ),
+        endpoint ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            pointerEvents: "none",
+            style: [
+              StyleSheet.absoluteFill,
+              styles.dayEnd,
+              {
+                transform: [
+                  { scale: land.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] }) }
+                ]
+              }
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.dayText,
+              today && styles.dayToday,
+              (isStart || isEnd) && styles.dayEndText,
+              disabled && styles.dayDisabled
+            ],
+            children: day.day
+          }
+        ),
+        meta?.density != null && meta.density > 0 ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.densityBar,
+              {
+                height: Math.max(theme.borderWidth.heavy, Math.round(meta.density * theme.space.s2))
+              }
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  month: { gap: theme.space.s1, paddingBottom: theme.space.s4 },
+  monthLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    fontWeight: theme.type.headline.fontWeight,
+    color: theme.color.text,
+    paddingVertical: theme.space.s1
+  },
+  weekdayRow: { flexDirection: "row" },
+  weekdayCell: { flex: 1, alignItems: "center", paddingVertical: theme.space[2] },
+  weekdayText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text2
+  },
+  weekRow: { flexDirection: "row", alignItems: "stretch" },
+  weekNumber: { width: theme.space.s6, alignItems: "center", justifyContent: "center" },
+  weekNumberText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3
+  },
+  day: {
+    flex: 1,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[1]
+  },
+  // The in-range wash is a state layer, not a tint: it has to composite over the
+  // sheet surface and over a pressed cell without either turning muddy.
+  dayInside: { backgroundColor: theme.state.selected },
+  dayEnd: { backgroundColor: theme.color.accent, borderRadius: theme.radius.md },
+  dayText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  dayBlank: { flex: 1, minHeight: theme.tapMin },
+  dayToday: { fontWeight: theme.fontWeight.bold, color: theme.color.accentOnSoft },
+  dayEndText: { color: theme.color.accentInk, fontWeight: theme.fontWeight.bold },
+  dayDisabled: { color: theme.color.text3, textDecorationLine: "line-through" },
+  densityBar: {
+    width: theme.space.s3,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+
+export { DEFAULT_LABELS, MonthList };

package/dist/{chunk-3ARE4TES.js → chunk-E2E3I5W2.js}

@@ -1,15 +1,21 @@
-import { HoldToConfirm } from './chunk-AWJOCGFZ.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { HoldToConfirm } from './chunk-M656FYNH.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Pressable, ActivityIndicator, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  loading: "Loading"
+};
 function holdSizeFor(size) {
   return size === "xs" ? "sm" : size;
 }
 function useForeground(variant, disabled) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("button");
   if (disabled) return theme.color.text3;
   switch (variant) {
     case "primary":
@@ -30,20 +36,44 @@ function Button({
   loading = false,
   disabled = false,
   fullWidth = false,
+  softDisabled = false,
+  disabledReason,
+  onDisabledPress,
   leadingIcon,
   trailingIcon,
   onPress,
   accessibilityLabel,
   motion = "full",
   hold = false,
+  haptic,
   onConfirm,
   holdDuration,
-  confirmingLabel
+  confirmingLabel,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet, { variant, size, disabled, fullWidth });
-  const fg = useForeground(variant, disabled);
+  const labels = useLabels("button", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("button");
+  const soft = softDisabled && !disabled;
+  const { styles } = useStyles(sheet, { variant, size, disabled: disabled || soft, fullWidth });
+  const fg = useForeground(variant, disabled || soft);
   const scale = React.useRef(new Animated.Value(1)).current;
+  const kick = React.useRef(new Animated.Value(0)).current;
+  const [checked, setChecked] = React.useState(false);
+  const [pending, setPending] = React.useState(false);
+  const [spin, setSpin] = React.useState(false);
+  React.useEffect(() => {
+    if (!pending) {
+      setSpin(false);
+      return;
+    }
+    const t = setTimeout(() => setSpin(true), 500);
+    return () => clearTimeout(t);
+  }, [pending]);
+  React.useEffect(() => {
+    if (!checked) return;
+    const t = setTimeout(() => setChecked(false), 1500);
+    return () => clearTimeout(t);
+  }, [checked]);
   if (hold && variant === "danger") {
     return /* @__PURE__ */ jsx(
       HoldToConfirm,
@@ -63,33 +93,54 @@ function Button({
       }
     );
   }
-  const busy = loading;
-  const interactive = !disabled && !busy;
+  const busy = loading || pending;
+  const interactive = !disabled && !busy && !soft;
   const iconSize = theme.ctl.icon[size];
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
   const animatePress = motion === "full" && !theme.reduceMotion;
+  const tapHaptic = haptic ?? (variant === "primary" || variant === "danger");
   const spring = (to) => Animated.spring(scale, {
+    ...springConfig(theme, "fs"),
     toValue: to,
-    useNativeDriver: true,
-    speed: 40,
-    bounciness: 6
+    useNativeDriver: true
   }).start();
+  const press = () => {
+    const result = onPress?.();
+    if (!result || typeof result.then !== "function") return;
+    setPending(true);
+    result.then(
+      () => {
+        setPending(false);
+        if (motion !== "none") setChecked(true);
+      },
+      () => {
+        setPending(false);
+        if (!animatePress) return;
+        kick.setValue(4);
+        Animated.spring(kick, { ...springConfig(theme, "fs", { thrown: true }), toValue: 0, useNativeDriver: true }).start();
+      }
+    );
+  };
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       accessibilityRole: "button",
       accessibilityLabel,
-      accessibilityState: { disabled, busy },
+      accessibilityHint: soft ? disabledReason : void 0,
+      accessibilityState: { disabled: disabled || soft, busy },
       disabled,
-      onPress: interactive ? onPress : void 0,
-      onPressIn: interactive && animatePress ? () => spring(0.97) : void 0,
+      onPress: soft && !busy ? onDisabledPress : interactive ? press : void 0,
+      onPressIn: interactive && (animatePress || tapHaptic) ? () => {
+        if (tapHaptic) haptics.impact(variant === "danger" ? "medium" : "light");
+        if (animatePress) spring(0.96);
+      } : void 0,
       onPressOut: interactive && animatePress ? () => spring(1) : void 0,
       hitSlop: { top: slopY, bottom: slopY },
       style: fullWidth ? fullWidthStyle : void 0,
-      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, { transform: [{ scale }] }], children: [
-        loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: fg, accessibilityLabel: "Loading" }) : leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: fg }) : null,
+      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, { transform: [{ scale }, { translateX: kick }] }], children: [
+        checked ? /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: fg }) : loading || pending && spin ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: fg, accessibilityLabel: labels.loading }) : leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: fg }) : null,
         typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children }) : children,
-        !loading && trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: fg }) : null
+        !loading && !checked && trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: fg }) : null
       ] })
     }
   );

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

@@ -1,45 +1,59 @@
-import { Avatar } from './chunk-QDYDBCFP.js';
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { Avatar } from './chunk-V2OEB75Z.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Easing, View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var SIZE_PX = { xs: 28, sm: 36, md: 48, lg: 60, xl: 76 };
-function summarise(avatars, visibleCount) {
-  const total = avatars.length;
-  if (total === 0) return "No people";
-  const noun = total === 1 ? "person" : "people";
-  const names = avatars.slice(0, visibleCount).map((a) => a.name);
-  const hidden = total - visibleCount;
-  const parts = hidden > 0 ? [...names, `+${hidden}`] : names;
-  return `${total} ${noun}: ${parts.join(", ")}`;
+var DEFAULT_LABELS = {
+  none: "No people",
+  summary: (total, names, hidden) => {
+    const noun = total === 1 ? "person" : "people";
+    const parts = hidden > 0 ? [...names, `+${hidden}`] : names;
+    return `${total} ${noun}: ${parts.join(", ")}`;
+  }
+};
+function summarise(names, visibleCount, labels) {
+  const total = names.length;
+  if (total === 0) return labels.none;
+  return labels.summary(total, names.slice(0, visibleCount), total - visibleCount);
 }
-function AvatarStack({
+function AvatarGroup({
   avatars,
-  max = 4,
+  children,
+  max = 3,
   size = "md",
   onPress,
   ring = true,
   motion = "reduced",
-  label
+  label,
+  labels: labelsProp
 }) {
+  const labels = useLabels("avatarGroup", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { size });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("avatar-group");
   const dim = SIZE_PX[size];
   const overlap = Math.round(dim * 0.3);
   const ringWidth = theme.borderWidth.thick;
-  const visible = avatars.slice(0, Math.max(0, max));
-  const hidden = avatars.length - visible.length;
-  const summary = label ?? summarise(avatars, visible.length);
+  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) => ({
+    key: child.key ?? i,
+    name: child.props.name ?? "",
+    node: React.cloneElement(child, { size })
+  }));
+  const visible = cells.slice(0, Math.max(0, max));
+  const hidden = cells.length - visible.length;
+  const summary = label ?? summarise(
+    cells.map((c) => c.name),
+    visible.length,
+    labels
+  );
   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, {
-    toValue: to,
-    useNativeDriver: true,
-    speed: 40,
-    bounciness: 6
-  }).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,7 +94,7 @@ function AvatarStack({
     };
   };
   const content = /* @__PURE__ */ jsxs(Animated.View, { style: [styles.row, pressAnimated ? { transform: [{ scale }] } : null], children: [
-    visible.map((a, i) => /* @__PURE__ */ jsx(Animated.View, { style: [cellStyle(i), enterStyle(i)], children: /* @__PURE__ */ jsx(Avatar, { name: a.name, src: a.src, size }) }, a.id)),
+    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
@@ -100,15 +114,14 @@ function AvatarStack({
       }
     );
   }
-  return /* @__PURE__ */ jsx(View, { accessible: true, 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" },
   row: { flexDirection: "row", alignItems: "center" },
-  // The `+N` chip: a same-sized circle in the neutral surface-2 fill, mirroring
-  // the overflow bubble the lightweight AvatarGroup draws.
+  // The `+N` chip: a same-sized circle in the neutral surface-2 fill.
   chip: {
     alignItems: "center",
     justifyContent: "center",
@@ -141,4 +154,4 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { AvatarStack };
+export { AvatarGroup };

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

@@ -1,11 +1,11 @@
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Easing, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function StreamFade({ children, inline = false, style }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("streaming-text");
   const opacity = React.useRef(new Animated.Value(0)).current;
   React.useEffect(() => {
     Animated.timing(opacity, {
@@ -19,7 +19,7 @@ function StreamFade({ children, inline = false, style }) {
   return /* @__PURE__ */ jsx(Comp, { style: [{ opacity }, style], children });
 }
 function Caret() {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("streaming-text");
   const opacity = React.useRef(new Animated.Value(1)).current;
   const blink = theme.duration[500];
   React.useEffect(() => {
@@ -63,7 +63,7 @@ function StreamingText({
   style
 }) {
   const { styles } = useStyles(sheet);
-  const resolved = useResolvedMotion(motion);
+  const resolved = useResolvedMotion(motion, "streaming-text");
   const animate = resolved === "full";
   const content = text ?? (typeof children === "string" ? children : void 0);
   const prevRef = React.useRef("");