@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/jsx/AnimateHeight/index.native.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var AnimateHeight_exports = {};
+__export(AnimateHeight_exports, {
+  AnimateHeight: () => AnimateHeight,
+  settleMs: () => settleMs
+});
+module.exports = __toCommonJS(AnimateHeight_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_platform = require("@multiplatform.one/platform");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var settleTable = {
+  snappy: 300,
+  quick: 450,
+  bouncy: 800,
+  medium: 600,
+  tooltip: 700,
+  gentle: 900,
+  slow: 1100,
+  lazy: 1300
+};
+function settleMs(transition) {
+  if (!transition) return 0;
+  var ms = typeof transition === "string" ? settleTable[transition] : void 0;
+  return (ms !== null && ms !== void 0 ? ms : 600) + 80;
+}
+var AnimateHeight = /* @__PURE__ */(0, import_react.forwardRef)(function AnimateHeight2(param, ref) {
+  var {
+    open,
+    children,
+    transition: transitionProp,
+    ...props
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var transition = transitionProp !== null && transitionProp !== void 0 ? transitionProp : knobProps.transition;
+  var collapsible = open !== void 0;
+  var [displayHeight, setDisplayHeight] = (0, import_react.useState)(collapsible && !open ? 0 : null);
+  var [exiting, setExiting] = (0, import_react.useState)(false);
+  var [prevOpen, setPrevOpen] = (0, import_react.useState)(open);
+  var measuredRef = (0, import_react.useRef)(null);
+  var openingRef = (0, import_react.useRef)(false);
+  var unmountTimerRef = (0, import_react.useRef)(null);
+  var rafRef = (0, import_react.useRef)(null);
+  var innerRef = (0, import_react.useRef)(null);
+  if (collapsible && open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) {
+      openingRef.current = !exiting;
+      if (exiting) setExiting(false);
+    } else {
+      openingRef.current = false;
+      setExiting(true);
+    }
+  }
+  var shouldRenderChildren = !collapsible || open || exiting;
+  var atRestClosed = collapsible && !open && !exiting;
+  var clearPending = (0, import_react.useCallback)(function () {
+    if (unmountTimerRef.current != null) {
+      clearTimeout(unmountTimerRef.current);
+      unmountTimerRef.current = null;
+    }
+    if (rafRef.current != null && typeof cancelAnimationFrame === "function") {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  }, []);
+  var handleMeasured = (0, import_react.useCallback)(function (height) {
+    measuredRef.current = height;
+    if (collapsible && !open) return;
+    if (openingRef.current) {
+      openingRef.current = false;
+      rafRef.current = requestAnimationFrame(function () {
+        rafRef.current = requestAnimationFrame(function () {
+          rafRef.current = null;
+          setDisplayHeight(height);
+        });
+      });
+      return;
+    }
+    setDisplayHeight(height);
+  }, [collapsible, open]);
+  var handleMeasuredRef = (0, import_react.useRef)(handleMeasured);
+  handleMeasuredRef.current = handleMeasured;
+  var transitionRef = (0, import_react.useRef)(transition);
+  transitionRef.current = transition;
+  (0, import_react.useLayoutEffect)(function () {
+    if (!import_platform.isWeb || !shouldRenderChildren) return;
+    var node = innerRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    var observer = new ResizeObserver(function () {
+      handleMeasuredRef.current(node.getBoundingClientRect().height);
+    });
+    observer.observe(node);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [shouldRenderChildren]);
+  var onInnerLayout = (0, import_react.useCallback)(function (event) {
+    handleMeasuredRef.current(event.nativeEvent.layout.height);
+  }, []);
+  (0, import_react.useEffect)(function () {
+    var _measuredRef_current;
+    if (!collapsible) return;
+    clearPending();
+    if (open) {
+      if (!openingRef.current && measuredRef.current != null) {
+        setDisplayHeight(measuredRef.current);
+      }
+      return;
+    }
+    setDisplayHeight(0);
+    var closeTransition = transitionRef.current;
+    var canTween = Boolean(closeTransition) && ((_measuredRef_current = measuredRef.current) !== null && _measuredRef_current !== void 0 ? _measuredRef_current : 0) > 0;
+    if (canTween) {
+      unmountTimerRef.current = setTimeout(function () {
+        unmountTimerRef.current = null;
+        setExiting(false);
+      }, settleMs(closeTransition));
+    } else {
+      setExiting(false);
+    }
+  }, [collapsible, open, clearPending]);
+  (0, import_react.useEffect)(function () {
+    return clearPending;
+  }, [clearPending]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    ref,
+    overflow: "hidden",
+    ...(displayHeight != null ? {
+      height: displayHeight
+    } : {}),
+    ...(atRestClosed ? {
+      display: "none"
+    } : {}),
+    ...(transition ? {
+      transition
+    } : {}),
+    ...props,
+    children: shouldRenderChildren ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ref: innerRef,
+      // keep natural height inside the clipped, height-driven outer
+      flexShrink: 0,
+      ...(!import_platform.isWeb ? {
+        onLayout: onInnerLayout
+      } : {}),
+      children
+    }) : null
+  });
+});
+//# sourceMappingURL=index.native.js.map

package/dist/jsx/AnimateHeight/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","AnimateHeight_exports","AnimateHeight","settleMs","module","exports","import_jsx_runtime","require","import_platform","import_theme","import_react","import_tamagui","settleTable","snappy","quick","bouncy","medium","tooltip","gentle","slow","lazy","transition","ms","forwardRef","AnimateHeight2","param","ref","open","children","transitionProp","props","knobProps","useResolvedKnobs","collapsible","displayHeight","setDisplayHeight","useState","exiting","setExiting","prevOpen","setPrevOpen","measuredRef","useRef","openingRef","unmountTimerRef","rafRef","innerRef","current","shouldRenderChildren","atRestClosed","clearPending","useCallback","clearTimeout","cancelAnimationFrame","handleMeasured","height","requestAnimationFrame","handleMeasuredRef","transitionRef","useLayoutEffect","isWeb","node","ResizeObserver","observer","getBoundingClientRect","observe","disconnect","onInnerLayout","event","nativeEvent","layout","useEffect","_measuredRef_current","closeTransition","canTween","Boolean","setTimeout"],"sources":["../../../src/AnimateHeight/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/Avatar/getInitials.mjs

@@ -9,5 +9,36 @@ function getInitials(name) {
   }
   return trimmed.substring(0, 2).toUpperCase();
 }
-export { getInitials };
+const FALLBACK_TONES = [{
+  bg: "$blue4",
+  fg: "$blue12"
+}, {
+  bg: "$green4",
+  fg: "$green12"
+}, {
+  bg: "$orange4",
+  fg: "$orange12"
+}, {
+  bg: "$purple4",
+  fg: "$purple12"
+}, {
+  bg: "$yellow4",
+  fg: "$yellow12"
+}, {
+  bg: "$red4",
+  fg: "$red12"
+}];
+function fallbackToneIndex(seed) {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) {
+    hash = Math.imul(hash, 31) + seed.charCodeAt(i) | 0;
+  }
+  return Math.abs(hash) % FALLBACK_TONES.length;
+}
+function fallbackTone(seed) {
+  const trimmed = (seed ?? "").trim();
+  if (!trimmed) return void 0;
+  return FALLBACK_TONES[fallbackToneIndex(trimmed)];
+}
+export { FALLBACK_TONES, fallbackTone, fallbackToneIndex, getInitials };
 //# sourceMappingURL=getInitials.mjs.map

package/dist/jsx/Avatar/getInitials.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["getInitials","name","trimmed","trim","parts","split","filter","Boolean","length","a","b","toUpperCase","substring"],"sources":["../../../src/Avatar/getInitials.ts"],"sourcesContent":[null],"mappings":"AAIO,SAASA,YAAYC,IAAA,EAAsB;EAChD,MAAMC,OAAA,IAAWD,IAAA,IAAQ,IAAIE,IAAA,CAAK;EAClC,IAAI,CAACD,OAAA,EAAS,OAAO;EACrB,MAAME,KAAA,GAAQF,OAAA,CAAQG,KAAA,CAAM,WAAW,EAAEC,MAAA,CAAOC,OAAO;EACvD,IAAIH,KAAA,CAAMI,MAAA,IAAU,GAAG;IACrB,MAAMC,CAAA,GAAIL,KAAA,CAAM,CAAC,EAAE,CAAC,KAAK;IACzB,MAAMM,CAAA,GAAIN,KAAA,CAAM,CAAC,EAAE,CAAC,KAAK;IACzB,QAAQK,CAAA,GAAIC,CAAA,EAAGC,WAAA,CAAY;EAC7B;EACA,OAAOT,OAAA,CAAQU,SAAA,CAAU,GAAG,CAAC,EAAED,WAAA,CAAY;AAC7C","ignoreList":[]}
+{"version":3,"names":["getInitials","name","trimmed","trim","parts","split","filter","Boolean","length","a","b","toUpperCase","substring","FALLBACK_TONES","bg","fg","fallbackToneIndex","seed","hash","i","Math","imul","charCodeAt","abs","fallbackTone"],"sources":["../../../src/Avatar/getInitials.ts"],"sourcesContent":[null],"mappings":"AAIO,SAASA,YAAYC,IAAA,EAAsB;EAChD,MAAMC,OAAA,IAAWD,IAAA,IAAQ,IAAIE,IAAA,CAAK;EAClC,IAAI,CAACD,OAAA,EAAS,OAAO;EACrB,MAAME,KAAA,GAAQF,OAAA,CAAQG,KAAA,CAAM,WAAW,EAAEC,MAAA,CAAOC,OAAO;EACvD,IAAIH,KAAA,CAAMI,MAAA,IAAU,GAAG;IACrB,MAAMC,CAAA,GAAIL,KAAA,CAAM,CAAC,EAAE,CAAC,KAAK;IACzB,MAAMM,CAAA,GAAIN,KAAA,CAAM,CAAC,EAAE,CAAC,KAAK;IACzB,QAAQK,CAAA,GAAIC,CAAA,EAAGC,WAAA,CAAY;EAC7B;EACA,OAAOT,OAAA,CAAQU,SAAA,CAAU,GAAG,CAAC,EAAED,WAAA,CAAY;AAC7C;AAMO,MAAME,cAAA,GAAiB,CAC5B;EAAEC,EAAA,EAAI;EAAUC,EAAA,EAAI;AAAU,GAC9B;EAAED,EAAA,EAAI;EAAWC,EAAA,EAAI;AAAW,GAChC;EAAED,EAAA,EAAI;EAAYC,EAAA,EAAI;AAAY,GAClC;EAAED,EAAA,EAAI;EAAYC,EAAA,EAAI;AAAY,GAClC;EAAED,EAAA,EAAI;EAAYC,EAAA,EAAI;AAAY,GAClC;EAAED,EAAA,EAAI;EAASC,EAAA,EAAI;AAAS,EAC9B;AAIO,SAASC,kBAAkBC,IAAA,EAAsB;EACtD,IAAIC,IAAA,GAAO;EACX,SAASC,CAAA,GAAI,GAAGA,CAAA,GAAIF,IAAA,CAAKT,MAAA,EAAQW,CAAA,IAAK;IACpCD,IAAA,GAAQE,IAAA,CAAKC,IAAA,CAAKH,IAAA,EAAM,EAAE,IAAID,IAAA,CAAKK,UAAA,CAAWH,CAAC,IAAK;EACtD;EACA,OAAOC,IAAA,CAAKG,GAAA,CAAIL,IAAI,IAAIL,cAAA,CAAeL,MAAA;AACzC;AAEO,SAASgB,aAAaP,IAAA,EAAoD;EAC/E,MAAMf,OAAA,IAAWe,IAAA,IAAQ,IAAId,IAAA,CAAK;EAClC,IAAI,CAACD,OAAA,EAAS,OAAO;EACrB,OAAOW,cAAA,CAAeG,iBAAA,CAAkBd,OAAO,CAAC;AAClD","ignoreList":[]}

package/dist/jsx/Avatar/getInitials.native.js

@@ -24,6 +24,9 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var getInitials_exports = {};
 __export(getInitials_exports, {
+  FALLBACK_TONES: () => FALLBACK_TONES,
+  fallbackTone: () => fallbackTone,
+  fallbackToneIndex: () => fallbackToneIndex,
   getInitials: () => getInitials
 });
 module.exports = __toCommonJS(getInitials_exports);
@@ -39,4 +42,35 @@ function getInitials(name) {
   }
   return trimmed.substring(0, 2).toUpperCase();
 }
+var FALLBACK_TONES = [{
+  bg: "$blue4",
+  fg: "$blue12"
+}, {
+  bg: "$green4",
+  fg: "$green12"
+}, {
+  bg: "$orange4",
+  fg: "$orange12"
+}, {
+  bg: "$purple4",
+  fg: "$purple12"
+}, {
+  bg: "$yellow4",
+  fg: "$yellow12"
+}, {
+  bg: "$red4",
+  fg: "$red12"
+}];
+function fallbackToneIndex(seed) {
+  var hash = 0;
+  for (var i = 0; i < seed.length; i++) {
+    hash = Math.imul(hash, 31) + seed.charCodeAt(i) | 0;
+  }
+  return Math.abs(hash) % FALLBACK_TONES.length;
+}
+function fallbackTone(seed) {
+  var trimmed = (seed !== null && seed !== void 0 ? seed : "").trim();
+  if (!trimmed) return void 0;
+  return FALLBACK_TONES[fallbackToneIndex(trimmed)];
+}
 //# sourceMappingURL=getInitials.native.js.map

package/dist/jsx/Avatar/getInitials.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc"],"sources":["../../../src/Avatar/getInitials.ts"],"sourcesContent":[null],"mappings":"AAIO,YAAS;;AACd,IAAAA,SAAM,GAAAC,MAAW,CAAAC,cAAiB;AAClC,IAAAC,gBAAc,GAAOF,MAAA,CAAAG,wBAAA;AACrB,IAAAC,iBAAc,GAAQJ,MAAM,CAAAK,mBAAoB;AAChD,IAAAC,YAAU,GAAAN,MAAa,CAAAO,SAAA,CAAAC,cAAA;AACrB,IAAAC,QAAM,GAAIA,CAAAC,MAAO,EAAGC,GAAA,KAAK;EACzB,SAAMC,IAAI,IAAAD,GAAO,EACjBZ,SAAQ,CAAAW,MAAO,EAAAE,IAAA;IAAAC,GAAY,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AAAA;AAE7B,IAAAC,WAAO,GAAQA,CAAAC,EAAA,EAAAC,IAAU,EAAAC,MAAM,EAAAC,IAAA,KAAY;EAC7C,IAAAF,IAAA,WAAAA,IAAA,wBAAAA,IAAA","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","getInitials_exports","FALLBACK_TONES","fallbackTone","fallbackToneIndex","getInitials","module","exports","trimmed","trim","parts","split","filter","Boolean","length"],"sources":["../../../src/Avatar/getInitials.ts"],"sourcesContent":[null],"mappings":"AAIO,YAAS;;AACd,IAAAA,SAAM,GAAAC,MAAW,CAAAC,cAAiB;AAClC,IAAAC,gBAAc,GAAOF,MAAA,CAAAG,wBAAA;AACrB,IAAAC,iBAAc,GAAQJ,MAAM,CAAAK,mBAAoB;AAChD,IAAAC,YAAU,GAAAN,MAAa,CAAAO,SAAA,CAAAC,cAAA;AACrB,IAAAC,QAAM,GAAIA,CAAAC,MAAO,EAAGC,GAAA,KAAK;EACzB,SAAMC,IAAI,IAAAD,GAAO,EACjBZ,SAAQ,CAAAW,MAAO,EAAAE,IAAA;IAAAC,GAAY,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AAAA;AAE7B,IAAAC,WAAO,GAAQA,CAAAC,EAAA,EAAAC,IAAU,EAAAC,MAAM,EAAAC,IAAA,KAAY;EAC7C,IAAAF,IAAA,WAAAA,IAAA,wBAAAA,IAAA;IAMO,KAAM,IAAAG,GAAA,IAAAhB,iBAAiB,CAAAa,IAAA,GAC1B,IAAI,CAAAX,YAAc,CAAAe,IAAA,CAAAL,EAAA,EAAUI,GAAA,KAAAA,GAAA,KAAAF,MAAA,EACxBnB,SAAA,CAAAiB,EAAW,EAAAI,GAAI;MAAAP,GAAA,EAAWA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EAChC;EACA,OAAME,EAAA;AAA4B;AACA,IAChCM,YAAI,GAASC,GAAI,IAAAR,WAAS,CAAAhB,SAAA;EAAAyB,KAAA;AAAA,IAAAD,GAAA;AAC9B,IAAAE,mBAAA;AAIOhB,QAAA,CAASgB,mBAAkB;EAChCC,cAAW,EAAAA,CAAA,KAAAA,cAAA;EACXC,YAAS,EAAIA,CAAA,KAAOA,YAAK;EACvBC,iBAAa,EAAKA,CAAA,KAAMA,iBAAW;EACrCC,WAAA,EAAAA,CAAA,KAAAA;AACA;AACFC,MAAA,CAAAC,OAAA,GAAAT,YAAA,CAAAG,mBAAA;AAEO,SAASI,YAAAjB,IAAa;EAC3B,IAAAoB,OAAM,IAAApB,IAAW,SAAQ,IAAIA,IAAK,cAAAA,IAAA,OAAAqB,IAAA;EAClC,IAAI,CAACD,OAAA,EAAS,OAAO;EACrB,IAAAE,KAAO,GAAAF,OAAA,CAAAG,KAAe,cAAAC,MAAkB,CAAAC,OAAQ;EAClD,IAAAH,KAAA,CAAAI,MAAA","ignoreList":[]}

package/dist/jsx/Avatar/index.mjs

@@ -1,97 +1,278 @@
-import { radiusClassProps, useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
-import { Avatar as TamaguiAvatar, SizableText, withStaticProperties } from "tamagui";
+import { Children, createContext, isValidElement, useContext } from "react";
+import { UserIcon } from "@phosphor-icons/react";
+import { MIN_PRESS_TARGET, ensureFocusVisibleRing, getGroupPosition, pressTargetHitSlop, radiusClassProps, stackRadiusProps, useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Avatar as TamaguiAvatar, SizableText, View, XStack, getVariableValue, withStaticProperties } from "tamagui";
+import { getSize } from "@tamagui/get-token";
 import { componentColors } from "../componentColors.mjs";
-import { getInitials } from "./getInitials.mjs";
-import { getInitials as getInitials2 } from "./getInitials.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-const avatarSizeMap = {
-  $3: "$2",
-  $4: "$3",
-  $5: "$4"
-};
+import { fallbackTone, getInitials } from "./getInitials.mjs";
+import { fallbackTone as fallbackTone2, fallbackToneIndex, FALLBACK_TONES, getInitials as getInitials2 } from "./getInitials.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const GroupCtx = createContext(null);
 const identityShapeProps = radiusClassProps("R-IDENTITY", "Avatar");
-function initialsFontSize(size) {
-  if (typeof size === "number") {
-    if (size <= 24) return "$1";
-    if (size <= 40) return "$2";
-    return "$3";
-  }
-  switch (size) {
-    case "$0.5":
-    case "$1":
-    case "$1.5":
-      return "$1";
-    case "$2":
-    case "$2.5":
-    case "$3":
-      return "$2";
-    default:
-      return "$3";
-  }
+const pipShapeProps = radiusClassProps("R-PILL", "Avatar status");
+const AVATAR_MIN_PX = 16;
+const AVATAR_KNOB_TOKEN = {
+  small: "$2",
+  medium: "$3",
+  large: "$4"
+};
+function avatarTokenPx(token) {
+  const resolved = getVariableValue(getSize(token));
+  return typeof resolved === "number" && Number.isFinite(resolved) ? Math.max(AVATAR_MIN_PX, resolved) : void 0;
+}
+const STATUS_COLOR = {
+  online: "$green10",
+  busy: "$red10",
+  away: "$yellow10",
+  offline: "$color8"
+};
+const CUTOUT_BORDER = 2;
+function sizeToPx(size) {
+  if (typeof size === "number") return size;
+  return avatarTokenPx(String(size));
+}
+function resolveVisualPx(sizeProp, nested, sizeKnob, nestedPx) {
+  const mediumPx = avatarTokenPx(AVATAR_KNOB_TOKEN.medium) ?? 36;
+  if (sizeProp != null) return sizeToPx(sizeProp) ?? mediumPx;
+  if (nested) return nestedPx;
+  const knobToken = AVATAR_KNOB_TOKEN[sizeKnob];
+  return (knobToken ? avatarTokenPx(knobToken) : void 0) ?? mediumPx;
+}
+function opticalFont(px) {
+  if (px <= 20) return "$1";
+  if (px <= 32) return "$2";
+  return "$3";
+}
+function activateOnEnterSpace(onPress) {
+  if (!onPress) return void 0;
+  return {
+    onKeyDown: e => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault?.();
+        onPress();
+      }
+    }
+  };
 }
 function AvatarRoot({
   src,
   name,
   alt,
   initials,
-  fallbackBackgroundColor = "$accentBackground",
+  fallbackBackgroundColor,
   fallbackColor,
   fallback,
   size: sizeProp,
-  circular = true,
+  circular: circularProp,
+  nested: nestedProp = false,
+  compact,
+  status,
   children,
   backgroundColor,
+  onPress,
+  focusStyle,
+  focusVisibleStyle,
+  hitSlop: hitSlopProp,
   ...props
 }) {
+  const group = useContext(GroupCtx);
+  const circular = group ? group.circular : circularProp ?? true;
+  const nested = nestedProp || Boolean(group?.nested);
+  const densityCompact = compact ?? group?.compact;
+  const resolvedSizeProp = sizeProp ?? group?.size;
   const {
     knobProps
-  } = useResolvedKnobs();
+  } = useResolvedKnobs({
+    compact: densityCompact
+  });
+  const visualPx = resolveVisualPx(resolvedSizeProp, nested, knobProps.size, knobProps.nestedControl.px);
+  const interactive = typeof onPress === "function";
+  const pressSlop = interactive && visualPx < MIN_PRESS_TARGET ? pressTargetHitSlop(visualPx) : void 0;
   const onAccentInitials = useReadableTextOn("$accentBackground");
-  const size = sizeProp ?? avatarSizeMap[knobProps.sizeToken] ?? "$3";
+  const tone = fallbackBackgroundColor || backgroundColor ? void 0 : fallbackTone(name);
+  const fallbackBg = backgroundColor ?? fallbackBackgroundColor ?? tone?.bg ?? "$color4";
+  const onAccent = fallbackBg === "$accentBackground";
+  const fallbackFg = fallbackColor ?? (onAccent ? onAccentInitials ?? "$color" : tone?.fg ?? componentColors.text.primary);
   const identityProps = circular ? identityShapeProps : null;
-  if (children != null) {
-    return /* @__PURE__ */jsx(TamaguiAvatar, {
-      circular,
-      size,
-      backgroundColor: backgroundColor ?? fallbackBackgroundColor,
-      ...identityProps,
-      ...props,
-      children
-    });
-  }
-  const label = alt ?? name ?? "Avatar";
+  const position = group ? getGroupPosition(group.index, group.count) : void 0;
+  const squareFlush = Boolean(group && !group.overlap && !circular && position);
+  const stackCorners = squareFlush ? stackRadiusProps(position, knobProps.borderRadius.borderRadius, "horizontal") : void 0;
+  const cutout = Boolean(group?.overlap);
+  const labeled = Boolean(alt || name);
+  const decorative = !labeled && !interactive;
+  const label = alt ?? name ?? (interactive ? "Avatar" : void 0);
   const initialsText = initials ?? (name ? getInitials(name) : "?");
-  const onAccent = fallbackBackgroundColor === "$accentBackground";
-  return /* @__PURE__ */jsxs(TamaguiAvatar, {
-    circular,
-    size,
-    backgroundColor: backgroundColor ?? fallbackBackgroundColor,
-    "aria-label": label,
+  const pipPx = Math.max(8, Math.round(visualPx * 0.28));
+  const frame = /* @__PURE__ */jsx(TamaguiAvatar, {
+    circular: circular && !stackCorners,
+    size: visualPx,
+    width: visualPx,
+    height: visualPx,
+    minWidth: visualPx,
+    minHeight: visualPx,
+    maxWidth: visualPx,
+    maxHeight: visualPx,
+    backgroundColor: fallbackBg,
+    overflow: "hidden",
+    flexShrink: 0,
+    outlineWidth: 0,
+    onPress,
+    ...(!circular && !stackCorners ? knobProps.borderRadius : void 0),
+    ...stackCorners,
+    ...(cutout ? {
+      borderWidth: CUTOUT_BORDER,
+      borderColor: "$background"
+    } : squareFlush && position !== "first" && position !== "only" ? {
+      borderStartWidth: 1,
+      borderColor: knobProps.borderRadius.borderColor
+    } : void 0),
     ...identityProps,
     ...props,
-    children: [src ? /* @__PURE__ */jsx(TamaguiAvatar.Image, {
-      src,
-      alt: label
-    }) : null, /* @__PURE__ */jsx(TamaguiAvatar.Fallback, {
-      backgroundColor: fallbackBackgroundColor,
-      alignItems: "center",
-      justifyContent: "center",
-      ...(src ? {
-        delayMs: 600
-      } : {}),
-      children: fallback ?? /* @__PURE__ */jsx(SizableText, {
-        fontSize: initialsFontSize(size),
-        color: fallbackColor ?? (onAccent ? onAccentInitials ?? "$color" : componentColors.text.primary),
-        fontWeight: "600",
-        textAlign: "center",
-        children: initialsText
-      })
+    "aria-hidden": decorative || void 0,
+    "aria-label": decorative ? void 0 : label,
+    role: interactive ? "button" : props.role,
+    tabIndex: interactive ? 0 : void 0,
+    cursor: interactive ? "pointer" : void 0,
+    ...activateOnEnterSpace(onPress),
+    "data-avatar-px": visualPx,
+    "data-avatar-nested": nested ? "true" : void 0,
+    "data-avatar-interactive": interactive ? "true" : void 0,
+    "data-avatar-hitslop": pressSlop ? String(pressSlop.top) : void 0,
+    focusStyle: {
+      outlineWidth: 0,
+      ...focusStyle
+    },
+    focusVisibleStyle: interactive ? ensureFocusVisibleRing({
+      outlineOffset: -2,
+      ...focusVisibleStyle
+    }) : focusVisibleStyle,
+    hitSlop: pressSlop ?? hitSlopProp,
+    children: children != null ? children : /* @__PURE__ */jsxs(Fragment, {
+      children: [src ? /* @__PURE__ */jsx(TamaguiAvatar.Image, {
+        src,
+        alt: label ?? ""
+      }) : null, /* @__PURE__ */jsx(TamaguiAvatar.Fallback, {
+        backgroundColor: fallbackBg,
+        alignItems: "center",
+        justifyContent: "center",
+        ...(src ? {
+          delayMs: 600
+        } : {}),
+        children: fallback ?? (initialsText === "?" ? /* @__PURE__ */jsx(View, {
+          ...{
+            color: fallbackFg
+          },
+          children: /* @__PURE__ */jsx(UserIcon, {
+            size: Math.round(visualPx * 0.42),
+            color: "currentColor"
+          })
+        }) : /* @__PURE__ */jsx(SizableText, {
+          ...knobProps.label,
+          fontSize: opticalFont(visualPx),
+          fontWeight: "600",
+          color: fallbackFg,
+          textAlign: "center",
+          userSelect: "none",
+          children: initialsText
+        }))
+      })]
+    })
+  });
+  if (!status) return frame;
+  return /* @__PURE__ */jsxs(View, {
+    position: "relative",
+    width: visualPx,
+    height: visualPx,
+    flexShrink: 0,
+    children: [frame, /* @__PURE__ */jsx(View, {
+      ...pipShapeProps,
+      position: "absolute",
+      bottom: -1,
+      right: -1,
+      width: pipPx,
+      height: pipPx,
+      borderRadius: 1e3,
+      backgroundColor: STATUS_COLOR[status],
+      borderWidth: 2,
+      borderColor: "$background",
+      pointerEvents: "none"
     })]
   });
 }
+function AvatarGroup({
+  children,
+  max = 4,
+  size,
+  circular = true,
+  nested = false,
+  compact,
+  overlap = true
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs({
+    compact
+  });
+  const visualPx = resolveVisualPx(size, nested, knobProps.size, knobProps.nestedControl.px);
+  const overlapPx = overlap ? Math.round(visualPx * 0.32) : 0;
+  const items = Children.toArray(children).filter(isValidElement);
+  const shown = items.slice(0, Math.max(1, max));
+  const extra = items.length - shown.length;
+  const total = shown.length + (extra > 0 ? 1 : 0);
+  const overflowLabel = extra > 9 ? "9+" : `+${extra}`;
+  return /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    flexShrink: 0,
+    gap: 0,
+    "data-avatar-group": "",
+    "data-avatar-overlap": overlap ? "true" : "false",
+    children: [shown.map((child, index) => /* @__PURE__ */jsx(GroupCtx.Provider, {
+      value: {
+        size,
+        circular,
+        nested,
+        compact,
+        overlap,
+        index,
+        count: total
+      },
+      children: /* @__PURE__ */jsx(View, {
+        zIndex: index,
+        marginStart: index > 0 ? -overlapPx : 0,
+        flexShrink: 0,
+        children: child
+      })
+    }, index)), extra > 0 ? /* @__PURE__ */jsx(GroupCtx.Provider, {
+      value: {
+        size,
+        circular,
+        nested,
+        compact,
+        overlap,
+        index: shown.length,
+        count: total
+      },
+      children: /* @__PURE__ */jsx(View, {
+        zIndex: shown.length,
+        marginStart: -overlapPx,
+        flexShrink: 0,
+        children: /* @__PURE__ */jsx(AvatarRoot, {
+          initials: overflowLabel,
+          fallbackBackgroundColor: "$color4",
+          fallbackColor: "$color12",
+          circular,
+          nested,
+          compact,
+          size
+        })
+      })
+    }) : null]
+  });
+}
 const Avatar = withStaticProperties(AvatarRoot, {
   Image: TamaguiAvatar.Image,
-  Fallback: TamaguiAvatar.Fallback
+  Fallback: TamaguiAvatar.Fallback,
+  Group: AvatarGroup
 });
-export { Avatar, getInitials2 as getInitials };
+export { Avatar, FALLBACK_TONES, fallbackTone2 as fallbackTone, fallbackToneIndex, getInitials2 as getInitials };
 //# sourceMappingURL=index.mjs.map