@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-U6BYHD2N.js

@@ -0,0 +1,213 @@
+import { Avatar } from './chunk-JWCVBFDU.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.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 { jsx, jsxs } from 'react/jsx-runtime';
+
+var SIZE_PX = { xs: 24, sm: 30, md: 36, lg: 48, xl: 60 };
+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 AvatarGroup({
+  avatars,
+  children,
+  max = 3,
+  size = "sm",
+  shape,
+  onPress,
+  ring = true,
+  motion = "reduced",
+  label,
+  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.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,
+      ...shape ? { shape } : null,
+      ...status && !child.props.status ? { status } : null
+    })
+  }));
+  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, {
+    ...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)),
+    [cellCount, staggerAnimated]
+  );
+  const enterEasing = React.useMemo(
+    () => Easing.bezier(...theme.motion.enter.easing),
+    [theme.motion.enter.easing]
+  );
+  React.useEffect(() => {
+    if (!staggerAnimated) return;
+    Animated.stagger(
+      Math.max(1, theme.motion.enter.duration / 3),
+      enter.map(
+        (v) => Animated.timing(v, {
+          toValue: 1,
+          duration: theme.motion.enter.duration,
+          easing: enterEasing,
+          useNativeDriver: true
+        })
+      )
+    ).start();
+  }, [staggerAnimated, enter, enterEasing, theme.motion.enter.duration]);
+  const cellStyle = (index) => ({
+    marginStart: index === 0 ? 0 : -overlap,
+    ...ring ? {
+      backgroundColor: skin ? skin.edge : theme.color.surface,
+      borderRadius: shape && shape !== "circle" ? chipRadius + ringWidth : theme.radius.full,
+      padding: ringWidth
+    } : null
+  });
+  const enterStyle = (index) => {
+    const v = enter[index];
+    if (!staggerAnimated || !v) return {};
+    return {
+      opacity: v,
+      transform: [{ translateX: v.interpolate({ inputRange: [0, 1], outputRange: [overlap, 0] }) }]
+    };
+  };
+  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,
+          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(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: summary,
+        onPress,
+        onPressIn: pressAnimated ? () => springTo(0.97) : void 0,
+        onPressOut: pressAnimated ? () => springTo(1) : void 0,
+        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
+    }
+  );
+}
+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", borderRadius: theme.radius.full },
+  row: { flexDirection: "row", alignItems: "center" },
+  // The `+N` chip: a same-sized circle on surface-3.
+  chip: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3,
+    variants: {
+      size: {
+        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,
+    // 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[10] },
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {}
+      }
+    }
+  }
+}));
+
+export { AvatarGroup };

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

@@ -1,11 +1,12 @@
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { softToneSkin } from './chunk-PJLTKDVY.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 +20,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(() => {
@@ -60,17 +61,31 @@ function StreamingText({
   children,
   streaming = false,
   motion = "full",
+  size = "md",
+  tone = "default",
+  variant = "plain",
   style
 }) {
   const { styles } = useStyles(sheet);
-  const resolved = useResolvedMotion(motion);
+  const theme = useLoamTheme("streaming-text");
+  const resolved = useResolvedMotion(motion, "streaming-text");
   const animate = resolved === "full";
   const content = text ?? (typeof children === "string" ? children : void 0);
   const prevRef = React.useRef("");
   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 });
   }