@btndprojects/loam-ui-native 0.1.1 → 0.3.1

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

@@ -1,16 +1,20 @@
-import { Card } from './chunk-KMI5ML5I.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();
+  const theme = useLoamTheme("widget");
   if (tone === "neutral") {
     return { surface: void 0, titleColor: theme.color.text };
   }
@@ -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();
-  const { surface, titleColor } = useToneStyles(tone, accent);
+  const theme = useLoamTheme("widget");
+  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-JWCVBFDU.js

@@ -0,0 +1,236 @@
+import { useLabels } from './chunk-APCWFOZW.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: 24, sm: 30, md: 36, lg: 48, xl: 60 };
+var DEFAULT_LABELS = {
+  avatar: "Avatar",
+  online: "online",
+  offline: "offline",
+  busy: "busy",
+  away: "away",
+  working: "working"
+};
+function useStatusColor(status) {
+  const theme = useLoamTheme("avatar");
+  if (!status) return void 0;
+  switch (status) {
+    case "online":
+      return theme.color.good;
+    case "offline":
+      return theme.color.text3;
+    case "busy":
+      return theme.color.danger;
+    case "away":
+      return theme.color.warn;
+    case "working":
+      return theme.status.working;
+  }
+}
+function hashToChartIndex(seed) {
+  const s = seed ?? "";
+  let h = 0;
+  for (let i = 0; i < s.length; i += 1) h = h * 31 + s.charCodeAt(i) >>> 0;
+  return h % 6;
+}
+function hashedColors(theme, seed) {
+  const fills = [
+    { bg: theme.chart.c1, ink: theme.chart.c1Ink },
+    { bg: theme.chart.c2, ink: theme.chart.c2Ink },
+    { bg: theme.chart.c3, ink: theme.chart.c3Ink },
+    { bg: theme.chart.c4, ink: theme.chart.c4Ink },
+    { bg: theme.chart.c5, ink: theme.chart.c5Ink },
+    { bg: theme.chart.c6, ink: theme.chart.c6Ink }
+  ];
+  return fills[hashToChartIndex(seed)];
+}
+function initialsFromName(name) {
+  const words = (name ?? "").trim().split(/\s+/).filter(Boolean);
+  const first = words[0];
+  if (!first) return "";
+  if (words.length === 1) return first.slice(0, 2).toUpperCase();
+  const last = words[words.length - 1] ?? first;
+  return (first[0] + last[0]).toUpperCase();
+}
+function Avatar({
+  src,
+  name,
+  id,
+  size = "md",
+  status,
+  presence = "dot",
+  shape: shapeProp = "circle",
+  kind = "person",
+  accent = false,
+  hashed = false,
+  motion = "full",
+  labels: labelsProp
+}) {
+  const labels = useLabels("avatar", DEFAULT_LABELS, labelsProp);
+  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);
+  const level = useResolvedMotion(motion, "avatar");
+  const photo = React.useRef(new Animated.Value(0)).current;
+  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();
+  }, []);
+  const onLoad = () => {
+    if (level === "none") photo.setValue(1);
+    else
+      Animated.timing(photo, { ...motionTiming(level), toValue: 1, useNativeDriver: true }).start();
+  };
+  const dim = SIZE_PX[size];
+  const showImage = Boolean(src) && !errored;
+  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 : 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 dotStyle = {
+    position: "absolute",
+    right: 0,
+    bottom: 0,
+    width: dotSize,
+    height: dotSize,
+    borderRadius: theme.radius.full,
+    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
+    // never rest on red-versus-green alone: online a solid disc, offline a
+    // hollow one, busy a diamond, away a square.
+    ...status === "offline" ? { backgroundColor: theme.color.surface, borderColor: statusColor } : status === "busy" ? { borderRadius: theme.radius.sm, transform: [{ rotate: "45deg" }] } : status === "away" ? { borderRadius: 0 } : null
+  };
+  const ringStyle = {
+    position: "absolute",
+    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,
+          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 }
+            ]
+          }
+        ],
+        accessibilityRole: "image",
+        accessibilityLabel: statusLabel
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { position: "relative" },
+  circle: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: theme.radius.full,
+    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] }
+      },
+      // 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
+      // initials would be left floating. Every size sets an explicit width and
+      // height, so the border draws inside the box and changes no layout.
+      accent: {
+        true: {
+          backgroundColor: theme.color.accentSoft,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.edge.accent
+        },
+        false: {
+          backgroundColor: theme.color.surface2,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.edge.neutral
+        }
+      }
+    }
+  },
+  image: { width: "100%", height: "100%" },
+  initials: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    variants: {
+      size: {
+        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 },
+        false: { color: theme.color.text2 }
+      }
+    }
+  }
+}));
+
+export { Avatar, hashToChartIndex, initialsFromName };