@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-C2NTXVWM.js

@@ -1,98 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.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';
-
-function ErrorSummary({
-  errors,
-  title = "There's a problem",
-  onFocusField,
-  motion = "full"
-}) {
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  const animated = motion === "full" && !theme.reduceMotion;
-  const progress = React.useRef(new Animated.Value(animated ? 0 : 1)).current;
-  const enterEasing = React.useMemo(
-    () => Easing.bezier(...theme.motion.enter.easing),
-    [theme.motion.enter.easing]
-  );
-  React.useEffect(() => {
-    if (!animated) {
-      progress.setValue(1);
-      return;
-    }
-    Animated.timing(progress, {
-      toValue: 1,
-      duration: theme.motion.enter.duration,
-      easing: enterEasing,
-      useNativeDriver: true
-    }).start();
-  }, [animated, progress, enterEasing, theme.motion.enter.duration]);
-  if (errors.length === 0) return null;
-  const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [-4, 0] });
-  return /* @__PURE__ */ jsxs(
-    Animated.View,
-    {
-      accessibilityRole: "alert",
-      accessibilityLabel: title,
-      style: [styles.region, { opacity: progress, transform: [{ translateY }] }],
-      children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-          /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.dangerOnSoft }),
-          /* @__PURE__ */ jsx(Text, { style: styles.title, children: title })
-        ] }),
-        /* @__PURE__ */ jsx(View, { style: styles.list, children: errors.map((err) => /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "link",
-            accessibilityLabel: err.message,
-            onPress: () => onFocusField?.(err.fieldId),
-            hitSlop: { top: theme.space[6], bottom: theme.space[6] },
-            children: /* @__PURE__ */ jsx(Text, { style: styles.link, children: err.message })
-          },
-          err.fieldId
-        )) })
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  // Danger tone via the soft tint + on-soft ink (clears AA), with the tone edge
-  // that carries the meaning under high contrast (where the tint collapses).
-  region: {
-    gap: theme.space.s2,
-    padding: theme.space.s3,
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.dangerSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.danger
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s2
-  },
-  title: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.subheadline.fontSize,
-    lineHeight: theme.type.subheadline.lineHeight,
-    color: theme.color.dangerOnSoft
-  },
-  list: {
-    gap: theme.space.s1,
-    paddingStart: theme.space.s1
-  },
-  link: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.medium,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.dangerOnSoft,
-    textDecorationLine: "underline"
-  }
-}));
-
-export { ErrorSummary };

package/dist/chunk-CDRZHT42.js

@@ -1,424 +0,0 @@
-import { DRAG_CURSOR } from './chunk-KTAC4MGE.js';
-import { Input } from './chunk-ITTYJZWX.js';
-import { haptics } from './chunk-NY2U3PBI.js';
-import * as React from 'react';
-import { PanResponder, View, StyleSheet } from 'react-native';
-import { Svg, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var GEOMETRY = {
-  sm: { plane: 120, hue: 12, thumb: 16 },
-  md: { plane: 160, hue: 14, thumb: 18 }
-};
-function clamp(n, lo, hi) {
-  return Math.max(lo, Math.min(hi, n));
-}
-function hsvToRgb({ h, s, v }) {
-  const sat = s / 100;
-  const val = v / 100;
-  const c = val * sat;
-  const hp = h % 360 / 60;
-  const x = c * (1 - Math.abs(hp % 2 - 1));
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  if (hp >= 0 && hp < 1) [r, g, b] = [c, x, 0];
-  else if (hp < 2) [r, g, b] = [x, c, 0];
-  else if (hp < 3) [r, g, b] = [0, c, x];
-  else if (hp < 4) [r, g, b] = [0, x, c];
-  else if (hp < 5) [r, g, b] = [x, 0, c];
-  else [r, g, b] = [c, 0, x];
-  const m = val - c;
-  return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
-}
-function rgbToHsv(r, g, b) {
-  const rn = r / 255;
-  const gn = g / 255;
-  const bn = b / 255;
-  const max = Math.max(rn, gn, bn);
-  const min = Math.min(rn, gn, bn);
-  const d = max - min;
-  let h = 0;
-  if (d !== 0) {
-    if (max === rn) h = (gn - bn) / d % 6;
-    else if (max === gn) h = (bn - rn) / d + 2;
-    else h = (rn - gn) / d + 4;
-    h *= 60;
-    if (h < 0) h += 360;
-  }
-  const s = max === 0 ? 0 : d / max * 100;
-  return { h, s, v: max * 100 };
-}
-function byteHex(n) {
-  return clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0").toUpperCase();
-}
-function rgbToHex(r, g, b) {
-  return `#${byteHex(r)}${byteHex(g)}${byteHex(b)}`;
-}
-function normalizeHex(input) {
-  const raw = input.trim().replace(/^#/, "");
-  if (/^[0-9a-fA-F]{3}$/.test(raw)) {
-    const [a, b, c] = raw;
-    return `#${a}${a}${b}${b}${c}${c}`.toUpperCase();
-  }
-  if (/^[0-9a-fA-F]{6}$/.test(raw)) return `#${raw.toUpperCase()}`;
-  return null;
-}
-function hexToRgb(input) {
-  const hex = normalizeHex(input);
-  if (!hex) return null;
-  return [
-    parseInt(hex.slice(1, 3), 16),
-    parseInt(hex.slice(3, 5), 16),
-    parseInt(hex.slice(5, 7), 16)
-  ];
-}
-function hsvToHex(hsv) {
-  return rgbToHex(...hsvToRgb(hsv));
-}
-function hexToHsv(hex, prevHue) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return null;
-  const hsv = rgbToHsv(...rgb);
-  if (hsv.s === 0) hsv.h = prevHue;
-  return hsv;
-}
-function ColorField({
-  value,
-  defaultValue = "#4A7C59",
-  onValueChange,
-  showInput = true,
-  disabled = false,
-  size = "md",
-  accessibilityLabel,
-  style
-}) {
-  const isControlled = value !== void 0;
-  const initialHsv = React.useMemo(
-    () => hexToHsv(value ?? defaultValue, 0) ?? { h: 0, s: 0, v: 0 },
-    // Initial only — later syncing is handled by the effect below.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const [hsv, setHsv] = React.useState(initialHsv);
-  const [hexText, setHexText] = React.useState(() => hsvToHex(initialHsv));
-  const { styles } = useStyles(sheet, { size, disabled });
-  const theme = useLoamTheme();
-  const hex = hsvToHex(hsv);
-  const hueColor = hsvToHex({ h: hsv.h, s: 100, v: 100 });
-  const planeRef = React.useRef(null);
-  const hueRef = React.useRef(null);
-  const planeBox = React.useRef({ w: 0, h: 0, x: 0, y: 0 });
-  const hueBox = React.useRef({ w: 0, x: 0 });
-  const hsvRef = React.useRef(hsv);
-  hsvRef.current = hsv;
-  const disabledRef = React.useRef(disabled);
-  disabledRef.current = disabled;
-  const editingHex = React.useRef(false);
-  const [planeW, setPlaneW] = React.useState(0);
-  const [hueW, setHueW] = React.useState(0);
-  const commit = React.useCallback(
-    (next, syncText = true) => {
-      hsvRef.current = next;
-      if (!isControlled) setHsv(next);
-      if (syncText) setHexText(hsvToHex(next));
-      onValueChange?.(hsvToHex(next));
-    },
-    [isControlled, onValueChange]
-  );
-  React.useEffect(() => {
-    if (!isControlled || value === void 0) return;
-    const next = hexToHsv(value, hsvRef.current.h);
-    if (!next || hsvToHex(next) === hsvToHex(hsvRef.current)) return;
-    setHsv(next);
-    if (!editingHex.current) setHexText(hsvToHex(next));
-  }, [value]);
-  const planeFromXY = React.useRef(() => {
-  });
-  planeFromXY.current = (pageX, pageY) => {
-    const { w, h, x, y } = planeBox.current;
-    if (!w || !h) return;
-    const s = clamp((pageX - x) / w * 100, 0, 100);
-    const v = clamp((1 - (pageY - y) / h) * 100, 0, 100);
-    commit({ ...hsvRef.current, s, v });
-  };
-  const hueFromX = React.useRef(() => {
-  });
-  hueFromX.current = (pageX) => {
-    const { w, x } = hueBox.current;
-    if (!w) return;
-    const h = clamp((pageX - x) / w * 360, 0, 360);
-    commit({ ...hsvRef.current, h });
-  };
-  const planePan = React.useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => !disabledRef.current,
-      onMoveShouldSetPanResponder: () => !disabledRef.current,
-      onPanResponderGrant: (e) => {
-        haptics.impact("light");
-        planeFromXY.current(e.nativeEvent.pageX, e.nativeEvent.pageY);
-      },
-      onPanResponderMove: (e) => planeFromXY.current(e.nativeEvent.pageX, e.nativeEvent.pageY)
-    })
-  ).current;
-  const huePan = React.useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => !disabledRef.current,
-      onMoveShouldSetPanResponder: () => !disabledRef.current,
-      onPanResponderGrant: (e) => {
-        haptics.impact("light");
-        hueFromX.current(e.nativeEvent.pageX);
-      },
-      onPanResponderMove: (e) => hueFromX.current(e.nativeEvent.pageX)
-    })
-  ).current;
-  const onPlaneLayout = (e) => {
-    const { width, height } = e.nativeEvent.layout;
-    planeBox.current.w = width;
-    planeBox.current.h = height;
-    setPlaneW(width);
-    planeRef.current?.measureInWindow?.((x, y) => {
-      planeBox.current.x = x;
-      planeBox.current.y = y;
-    });
-  };
-  const onHueLayout = (e) => {
-    const { width } = e.nativeEvent.layout;
-    hueBox.current.w = width;
-    setHueW(width);
-    hueRef.current?.measureInWindow?.((x) => {
-      hueBox.current.x = x;
-    });
-  };
-  const onHexChange = (text) => {
-    setHexText(text);
-    const next = hexToHsv(text, hsvRef.current.h);
-    if (next) commit(next, false);
-  };
-  const geo = GEOMETRY[size];
-  const planeThumbX = hsv.s / 100 * planeW - geo.thumb / 2;
-  const planeThumbY = (1 - hsv.v / 100) * geo.plane - geo.thumb / 2;
-  const hueThumbX = hsv.h / 360 * hueW - geo.thumb / 2;
-  const hexValid = normalizeHex(hexText) !== null;
-  return /* @__PURE__ */ jsxs(View, { style: [styles.wrap, style], children: [
-    /* @__PURE__ */ jsxs(
-      View,
-      {
-        ref: planeRef,
-        onLayout: onPlaneLayout,
-        accessibilityRole: "adjustable",
-        accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, saturation and brightness` : "Saturation and brightness",
-        accessibilityValue: {
-          text: `Saturation ${Math.round(hsv.s)} percent, brightness ${Math.round(hsv.v)} percent`
-        },
-        accessibilityState: { disabled },
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        "aria-valuenow": Math.round(hsv.v),
-        "aria-valuetext": `Saturation ${Math.round(hsv.s)} percent, brightness ${Math.round(hsv.v)} percent`,
-        style: [styles.plane, !disabled && DRAG_CURSOR],
-        ...disabled ? {} : planePan.panHandlers,
-        children: [
-          planeW > 0 ? /* @__PURE__ */ jsxs(Svg, { width: planeW, height: geo.plane, style: StyleSheet.absoluteFill, children: [
-            /* @__PURE__ */ jsxs(Defs, { children: [
-              /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cf-sat", x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: "#ffffff", stopOpacity: 1 }),
-                /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: "#ffffff", stopOpacity: 0 })
-              ] }),
-              /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cf-val", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: "#000000", stopOpacity: 0 }),
-                /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: "#000000", stopOpacity: 1 })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: planeW, height: geo.plane, fill: hueColor }),
-            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: planeW, height: geo.plane, fill: "url(#loam-cf-sat)" }),
-            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: planeW, height: geo.plane, fill: "url(#loam-cf-val)" })
-          ] }) : null,
-          /* @__PURE__ */ jsx(
-            View,
-            {
-              style: [
-                styles.thumb,
-                { transform: [{ translateX: planeThumbX }, { translateY: planeThumbY }] }
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      View,
-      {
-        ref: hueRef,
-        onLayout: onHueLayout,
-        accessibilityRole: "adjustable",
-        accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, hue` : "Hue",
-        accessibilityValue: { min: 0, max: 360, now: Math.round(hsv.h) },
-        accessibilityState: { disabled },
-        "aria-valuemin": 0,
-        "aria-valuemax": 360,
-        "aria-valuenow": Math.round(hsv.h),
-        style: [styles.hue, !disabled && DRAG_CURSOR],
-        ...disabled ? {} : huePan.panHandlers,
-        children: [
-          hueW > 0 ? /* @__PURE__ */ jsxs(Svg, { width: hueW, height: geo.hue, style: StyleSheet.absoluteFill, children: [
-            /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cf-hue", x1: "0", y1: "0", x2: "1", y2: "0", children: [
-              /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: "#ff0000" }),
-              /* @__PURE__ */ jsx(Stop, { offset: "0.17", stopColor: "#ffff00" }),
-              /* @__PURE__ */ jsx(Stop, { offset: "0.33", stopColor: "#00ff00" }),
-              /* @__PURE__ */ jsx(Stop, { offset: "0.5", stopColor: "#00ffff" }),
-              /* @__PURE__ */ jsx(Stop, { offset: "0.67", stopColor: "#0000ff" }),
-              /* @__PURE__ */ jsx(Stop, { offset: "0.83", stopColor: "#ff00ff" }),
-              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: "#ff0000" })
-            ] }) }),
-            /* @__PURE__ */ jsx(
-              Rect,
-              {
-                x: "0",
-                y: "0",
-                width: hueW,
-                height: geo.hue,
-                rx: geo.hue / 2,
-                fill: "url(#loam-cf-hue)"
-              }
-            )
-          ] }) : null,
-          /* @__PURE__ */ jsx(View, { style: [styles.thumb, styles.hueThumb, { transform: [{ translateX: hueThumbX }] }] })
-        ]
-      }
-    ),
-    showInput ? /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
-      /* @__PURE__ */ jsx(View, { style: [styles.preview, { backgroundColor: hex }] }),
-      /* @__PURE__ */ jsx(View, { style: styles.inputWrap, children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          value: hexText,
-          onChangeText: onHexChange,
-          onFocus: () => {
-            editingHex.current = true;
-          },
-          onBlur: () => {
-            editingHex.current = false;
-            setHexText(hex);
-          },
-          editable: !disabled,
-          autoCapitalize: "characters",
-          autoCorrect: false,
-          maxLength: 7,
-          size: size === "sm" ? "sm" : "md",
-          validationState: hexValid ? "default" : "invalid",
-          showStatusIcon: false,
-          accessibilityLabel: "Hex colour",
-          style: { fontFamily: theme.font.mono }
-        }
-      ) })
-    ] }) : null
-  ] });
-}
-var HEAVY_SHADOW_RATIO = 1.2;
-var sheet = createStyleSheet((theme) => ({
-  // The per-size `width` is the picker's preferred measure: a plane a little wider
-  // than it is tall, which also leaves the swatch and the hex field a line they
-  // both fit on. The caller's `style` merges after it, so it is a default rather
-  // than a floor, and `maxWidth` keeps it from overflowing a narrower container.
-  wrap: {
-    flexDirection: "column",
-    gap: theme.space.s3,
-    maxWidth: "100%",
-    variants: {
-      size: {
-        sm: { width: GEOMETRY.sm.plane + theme.space[20] },
-        md: { width: GEOMETRY.md.plane + theme.space[40] }
-      },
-      disabled: {
-        true: { opacity: theme.state.disabledOpacity },
-        false: {}
-      }
-    }
-  },
-  plane: {
-    width: "100%",
-    borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border,
-    overflow: "hidden",
-    variants: {
-      size: {
-        sm: { height: GEOMETRY.sm.plane },
-        md: { height: GEOMETRY.md.plane }
-      },
-      disabled: {}
-    }
-  },
-  hue: {
-    width: "100%",
-    justifyContent: "center",
-    borderRadius: theme.radius.full,
-    variants: {
-      size: {
-        sm: { height: GEOMETRY.sm.hue },
-        md: { height: GEOMETRY.md.hue }
-      },
-      disabled: {}
-    }
-  },
-  // A hollow ring so the colour underneath shows through; positioned at 0,0 and
-  // moved with translate transforms.
-  thumb: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    // Let drags fall through to the plane/rail underneath.
-    pointerEvents: "none",
-    borderRadius: theme.radius.full,
-    backgroundColor: "transparent",
-    borderWidth: theme.borderWidth.thick,
-    borderColor: theme.color.knob,
-    // The reference's thumb elevation is tighter and more opaque than the
-    // switch knob's (`0 1px 3px` at .3 vs `0 2px 5px` at .25), so the geometry
-    // is overridden — but the *colour* comes from the theme's knob shadow,
-    // which carries the accent tint that `--sh-*` does on the web. A hardcoded
-    // `#000000` here made this one of the only shadows in the system that
-    // ignored the tint.
-    ...theme.shadow.knob,
-    shadowOffset: { width: 0, height: theme.space[1] },
-    shadowOpacity: theme.shadow.knob.shadowOpacity * HEAVY_SHADOW_RATIO,
-    shadowRadius: theme.space[3],
-    variants: {
-      size: {
-        sm: { width: GEOMETRY.sm.thumb, height: GEOMETRY.sm.thumb },
-        md: { width: GEOMETRY.md.thumb, height: GEOMETRY.md.thumb }
-      },
-      disabled: {}
-    }
-  },
-  // The hue thumb rides the vertical centre of the (short) rail.
-  hueThumb: {
-    top: "50%",
-    variants: {
-      size: {
-        sm: { marginTop: -16 / 2 },
-        md: { marginTop: -18 / 2 }
-      },
-      disabled: {}
-    }
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s2
-  },
-  preview: {
-    width: theme.space[32],
-    height: theme.space[32],
-    borderRadius: theme.radius.sm,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border
-  },
-  inputWrap: {
-    flex: 1
-  }
-}));
-
-export { ColorField };

package/dist/chunk-DHWADYZX.js

@@ -1,144 +0,0 @@
-import { Avatar } from './chunk-QDYDBCFP.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';
-
-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(", ")}`;
-}
-function AvatarStack({
-  avatars,
-  max = 4,
-  size = "md",
-  onPress,
-  ring = true,
-  motion = "reduced",
-  label
-}) {
-  const { styles } = useStyles(sheet, { size });
-  const theme = useLoamTheme();
-  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 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 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: theme.color.surface,
-      borderRadius: 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((a, i) => /* @__PURE__ */ jsx(Animated.View, { style: [cellStyle(i), enterStyle(i)], children: /* @__PURE__ */ jsx(Avatar, { name: a.name, src: a.src, size }) }, a.id)),
-    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
-    ] }) }) }) : 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: styles.pressable,
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(View, { accessible: true, 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.
-  chip: {
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden",
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface2,
-    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] }
-      }
-    }
-  },
-  chipText: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    color: theme.color.text2,
-    variants: {
-      size: {
-        xs: { fontSize: theme.fontSize[9] },
-        sm: { fontSize: theme.fontSize[12] },
-        md: { fontSize: theme.fontSize[16] },
-        lg: { fontSize: theme.fontSize[20] },
-        xl: { fontSize: theme.fontSize[25] }
-      }
-    }
-  }
-}));
-
-export { AvatarStack };