@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-OJQUBQWA.js → chunk-JCXFFK64.js}

@@ -1,13 +1,17 @@
-import { Card } from './chunk-YXOAPXMU.js';
+import { WIDGET_SIZE, WIDGET_CORNER } from './chunk-XWGXVQF6.js';
+import { Card } from './chunk-PWFRDRGS.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import * as React from 'react';
-import { Animated, View, Text, Pressable, StyleSheet } from 'react-native';
+import { Animated, Text, View, Pressable, StyleSheet } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var FAMILY = {
-  small: { width: 168, aspectRatio: 1 },
-  medium: { width: 344, aspectRatio: 2 },
-  large: { width: 344, aspectRatio: 0.86 }
+  small: { width: WIDGET_SIZE.small.width, aspectRatio: 1 },
+  medium: { width: WIDGET_SIZE.medium.width, aspectRatio: 2 },
+  large: { width: WIDGET_SIZE.large.width, aspectRatio: 0.86 }
 };
 function useToneStyles(tone, accent) {
   const theme = useLoamTheme("widget");
@@ -42,23 +46,67 @@ function Widget({
   footer,
   onPress,
   motion = "full",
-  accessibilityLabel
+  accessibilityLabel,
+  variant,
+  elevation,
+  padding,
+  loading = false,
+  layout = "default",
+  figure,
+  animateValue = false,
+  format
 }) {
   const { styles } = useStyles(sheet, { size });
   const theme = useLoamTheme("widget");
-  const { surface, titleColor } = useToneStyles(tone, accent);
+  const { surface: surfaceTone, titleColor } = useToneStyles(tone, accent);
   const announced = accessibilityLabel ?? title;
+  const osCorner = isAndroidIdiom(theme) ? WIDGET_CORNER.android : WIDGET_CORNER.iOS;
+  const inset = padding === void 0 ? void 0 : { padding: { sm: theme.space.s2, md: theme.space.s4, lg: theme.space.s6 }[padding] };
+  const surface = React.useMemo(() => {
+    const shadow = elevation === void 0 ? void 0 : elevation === "none" ? { shadowOpacity: 0, elevation: 0, boxShadow: "none" } : elevation === "sm" ? theme.shadow.sm : theme.shadow.md;
+    return [surfaceTone, shadow, { borderRadius: osCorner }];
+  }, [surfaceTone, elevation, theme, osCorner]);
   const pressScale = theme.reduceMotion ? 1 : motion === "full" ? 0.97 : motion === "reduced" ? 0.99 : 1;
   const scale = React.useRef(new Animated.Value(1)).current;
-  const spring = (to) => Animated.spring(scale, { toValue: to, useNativeDriver: true, speed: 40, bounciness: 6 }).start();
-  const body = /* @__PURE__ */ jsxs(View, { "aria-hidden": true, style: styles.content, children: [
-    title !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.title, { color: titleColor }], numberOfLines: size === "small" ? 2 : 3, children: title }) : null,
-    /* @__PURE__ */ jsx(View, { style: styles.glance, children }),
+  const spring = (to) => Animated.spring(scale, {
+    toValue: to,
+    useNativeDriver: true,
+    speed: 40,
+    bounciness: 6
+  }).start();
+  const eyebrow = layout === "eyebrow";
+  const figureStyle = [styles.figure, { color: titleColor }];
+  const figureNode = figure === void 0 ? null : typeof figure === "number" ? animateValue && motion !== "none" && motion !== "reduced" ? /* @__PURE__ */ jsx(
+    NumberRoll,
+    {
+      value: figure,
+      format,
+      textStyle: figureStyle,
+      motion,
+      decorative: true
+    }
+  ) : /* @__PURE__ */ jsx(Text, { style: figureStyle, children: format ? figure.toLocaleString(void 0, format) : figure }) : /* @__PURE__ */ jsx(Text, { style: figureStyle, children: figure });
+  const body = /* @__PURE__ */ jsxs(View, { "aria-hidden": true, style: [styles.content, inset], children: [
+    title !== void 0 && eyebrow ? /* @__PURE__ */ jsx(Text, { style: styles.eyebrow, numberOfLines: 1, children: title }) : title !== void 0 ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [styles.title, { color: titleColor }],
+        numberOfLines: size === "small" ? 2 : 3,
+        children: title
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(View, { style: styles.glance, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", decorative: true }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: theme.space[96], decorative: true })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      eyebrow ? figureNode : null,
+      children
+    ] }) }),
     footer !== void 0 ? /* @__PURE__ */ jsx(View, { style: styles.footer, children: footer }) : null
   ] });
-  if (onPress) {
+  if (onPress && !loading) {
     return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.box, { transform: [{ scale }] }], children: [
-      /* @__PURE__ */ jsx(Card, { style: [styles.surface, surface], children: body }),
+      /* @__PURE__ */ jsx(Card, { variant, style: [styles.surface, surface], children: body }),
       /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -72,7 +120,7 @@ function Widget({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx(View, { style: styles.box, children: /* @__PURE__ */ jsx(Card, { style: [styles.surface, surface], accessibilityLabel: announced, children: body }) });
+  return /* @__PURE__ */ jsx(View, { style: styles.box, "aria-busy": loading || void 0, children: /* @__PURE__ */ jsx(Card, { variant, style: [styles.surface, surface], accessibilityLabel: announced, children: body }) });
 }
 var sheet = createStyleSheet((theme) => ({
   // The family box. `width` + `aspectRatio` give the fixed-ratio tile; `maxWidth`
@@ -87,7 +135,7 @@ var sheet = createStyleSheet((theme) => ({
       }
     }
   },
-  // Fill the box; the Card recipe (surface, hairline border, radius.xl, subtle
+  // Fill the box; the Card recipe (surface, hairline border, subtle
   // shadow) comes from the Card component's own base style.
   surface: { flex: 1 },
   // Column: title pins to the top, the glance takes the slack, the footer sits at
@@ -126,6 +174,15 @@ var sheet = createStyleSheet((theme) => ({
       }
     }
   },
+  // The eyebrow layout: the section overline (caps, text3) over a display figure.
+  eyebrow: { ...theme.type.overline, fontFamily: theme.font.sans, color: theme.color.text3 },
+  figure: {
+    fontFamily: theme.font.display,
+    fontWeight: `${theme.font.displayWeight}`,
+    fontSize: theme.type.title1.fontSize,
+    lineHeight: theme.type.title1.lineHeight,
+    letterSpacing: theme.type.title1.letterSpacing
+  },
   // Takes the slack between title and footer so the glance sits where the family
   // has room for it.
   glance: { flex: 1, justifyContent: "center" },

package/dist/{chunk-V2OEB75Z.js → chunk-JWCVBFDU.js}

@@ -1,18 +1,19 @@
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, View, Text, StyleSheet, Image } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } 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 = {
   avatar: "Avatar",
   online: "online",
   offline: "offline",
   busy: "busy",
-  away: "away"
+  away: "away",
+  working: "working"
 };
 function useStatusColor(status) {
   const theme = useLoamTheme("avatar");
@@ -26,6 +27,8 @@ function useStatusColor(status) {
       return theme.color.danger;
     case "away":
       return theme.color.warn;
+    case "working":
+      return theme.status.working;
   }
 }
 function hashToChartIndex(seed) {
@@ -60,14 +63,17 @@ function Avatar({
   size = "md",
   status,
   presence = "dot",
-  shape = "circle",
+  shape: shapeProp = "circle",
+  kind = "person",
   accent = false,
   hashed = false,
   motion = "full",
   labels: labelsProp
 }) {
   const labels = useLabels("avatar", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet, { size, accent });
+  const agent = kind === "agent";
+  const shape = agent ? "rounded" : shapeProp;
+  const { styles } = useStyles(sheet, { size, accent: agent ? false : accent });
   const theme = useLoamTheme("avatar");
   const [errored, setErrored] = React.useState(false);
   const statusColor = useStatusColor(status);
@@ -76,26 +82,33 @@ function Avatar({
   const pop = React.useRef(new Animated.Value(level === "full" ? 0 : 1)).current;
   React.useEffect(() => {
     if (level !== "full") return;
-    Animated.spring(pop, { ...springConfig(theme, "fs"), toValue: 1, useNativeDriver: true }).start();
+    Animated.spring(pop, {
+      ...springConfig(theme, "fs"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
   }, []);
   const onLoad = () => {
     if (level === "none") photo.setValue(1);
-    else Animated.timing(photo, { ...motionTiming(level), toValue: 1, useNativeDriver: true }).start();
+    else
+      Animated.timing(photo, { ...motionTiming(level), toValue: 1, useNativeDriver: true }).start();
   };
   const dim = SIZE_PX[size];
   const showImage = Boolean(src) && !errored;
-  const initials = initialsFromName(name);
-  const hashPair = hashed && initials ? hashedColors(theme, id ?? name) : void 0;
-  const fg = hashPair ? hashPair.ink : accent ? theme.color.accentOnSoft : theme.color.text2;
+  const initials = agent ? "" : initialsFromName(name);
+  const hashPair = !agent && hashed && initials ? hashedColors(theme, id ?? name) : void 0;
+  const fg = hashPair ? hashPair.ink : !agent && accent ? theme.color.accentOnSoft : theme.color.text2;
   const label = name ?? labels.avatar;
   const statusLabel = status ? labels[status] : void 0;
-  const shapeRadius = shape === "circle" ? theme.radius.full : shape === "rounded" ? theme.radius.lg : Math.round(dim * 0.32);
+  const shapeRadius = shape === "circle" ? theme.radius.full : agent || shape === "rounded" ? (
+    // The control corner ramp (Final 06): 8 up to md, 12 from lg.
+    dim < theme.space[48] ? theme.radius.sm : theme.radius.md
+  ) : Math.round(dim * 0.32);
   const shapeStyle = {
     borderRadius: shapeRadius,
     ...shape === "squircle" ? { borderCurve: "continuous" } : null
   };
   const dotSize = Math.round(dim * 0.28);
-  const ring = 2.5;
   const dotStyle = {
     position: "absolute",
     right: 0,
@@ -103,7 +116,7 @@ function Avatar({
     width: dotSize,
     height: dotSize,
     borderRadius: theme.radius.full,
-    borderWidth: ring,
+    borderWidth: theme.borderWidth.heavy,
     borderColor: theme.color.surface,
     backgroundColor: statusColor,
     // Each state has its own silhouette as well as its own hue, so online/busy
@@ -113,27 +126,54 @@ function Avatar({
   };
   const ringStyle = {
     position: "absolute",
-    top: -ring - 1,
-    left: -ring - 1,
-    right: -ring - 1,
-    bottom: -ring - 1,
-    borderRadius: shape === "circle" ? theme.radius.full : shapeRadius + ring + 1,
-    borderWidth: ring,
+    top: -(theme.borderWidth.heavy + theme.borderWidth.thin),
+    left: -(theme.borderWidth.heavy + theme.borderWidth.thin),
+    right: -(theme.borderWidth.heavy + theme.borderWidth.thin),
+    bottom: -(theme.borderWidth.heavy + theme.borderWidth.thin),
+    borderRadius: shape === "circle" ? theme.radius.full : shapeRadius + theme.borderWidth.heavy + theme.borderWidth.thin,
+    borderWidth: theme.borderWidth.heavy,
     borderColor: statusColor,
     // Line style carries the state alongside the hue.
     borderStyle: status === "offline" ? "dashed" : status === "away" ? "dotted" : "solid",
     ...shape === "squircle" ? { borderCurve: "continuous" } : null
   };
   return /* @__PURE__ */ jsxs(View, { style: styles.root, accessibilityRole: "image", accessibilityLabel: label, children: [
-    /* @__PURE__ */ jsxs(View, { style: [styles.circle, shapeStyle, hashPair ? { backgroundColor: hashPair.bg } : null], children: [
-      initials ? /* @__PURE__ */ jsx(Text, { style: [styles.initials, { color: fg }], children: initials }) : /* @__PURE__ */ jsx(Icon, { name: "user", size: Math.round(dim * 0.5), color: fg }),
-      showImage ? /* @__PURE__ */ jsx(Animated.View, { style: [StyleSheet.absoluteFill, { opacity: photo }], children: /* @__PURE__ */ jsx(Image, { source: { uri: src }, style: styles.image, onLoad, onError: () => setErrored(true) }) }) : null
-    ] }),
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles.circle,
+          shapeStyle,
+          hashPair ? { backgroundColor: hashPair.bg } : null,
+          agent ? { backgroundColor: theme.color.surface3, borderColor: theme.color.surface3 } : null
+        ],
+        children: [
+          agent ? /* @__PURE__ */ jsx(Icon, { name: "sparkle", size: Math.round(dim * 0.5), color: theme.color.text2 }) : initials ? /* @__PURE__ */ jsx(Text, { style: [styles.initials, { color: fg }], children: initials }) : /* @__PURE__ */ jsx(Icon, { name: "user", size: Math.round(dim * 0.5), color: fg }),
+          showImage ? /* @__PURE__ */ jsx(Animated.View, { style: [StyleSheet.absoluteFill, { opacity: photo }], children: /* @__PURE__ */ jsx(
+            Image,
+            {
+              source: { uri: src },
+              style: styles.image,
+              onLoad,
+              onError: () => setErrored(true)
+            }
+          ) }) : null
+        ]
+      }
+    ),
     statusColor && presence === "ring" ? /* @__PURE__ */ jsx(View, { style: ringStyle, accessibilityRole: "image", accessibilityLabel: statusLabel }) : null,
     statusColor && presence === "dot" ? /* @__PURE__ */ jsx(
       Animated.View,
       {
-        style: [dotStyle, { transform: [...dotStyle.transform ?? [], { scale: pop }] }],
+        style: [
+          dotStyle,
+          {
+            transform: [
+              ...dotStyle.transform ?? [],
+              { scale: pop }
+            ]
+          }
+        ],
         accessibilityRole: "image",
         accessibilityLabel: statusLabel
       }
@@ -149,11 +189,11 @@ var sheet = createStyleSheet((theme) => ({
     borderRadius: theme.radius.full,
     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] }
       },
       // The disc *is* the avatar, so it needs an edge that outlives its fill:
       // `accentSoft` collapses to the plain surface under high contrast and the
@@ -176,14 +216,14 @@ var sheet = createStyleSheet((theme) => ({
   image: { width: "100%", height: "100%" },
   initials: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.semibold,
     variants: {
       size: {
-        xs: { fontSize: theme.fontSize[11] },
-        sm: { fontSize: theme.fontSize[14] },
-        md: { fontSize: theme.fontSize[19] },
-        lg: { fontSize: theme.fontSize[24] },
-        xl: { fontSize: theme.fontSize[30] }
+        xs: { fontSize: theme.fontSize[10] },
+        sm: { fontSize: theme.fontSize[13] },
+        md: { fontSize: theme.fontSize[14] },
+        lg: { fontSize: theme.fontSize[20] },
+        xl: { fontSize: theme.fontSize[24] }
       },
       accent: {
         true: { color: theme.color.accentOnSoft },