@multiplatform.one/components 6.6.0 → 7.0.0

package/dist/cjs/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/cjs/AnimateHeight/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AnimateHeight_exports","__export","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","jsx","View","overflow","display"],"sources":["../../../src/AnimateHeight/index.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAA,aAAA;EAAAC,QAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAV,YAAsB,CAAAK,qBAAA;AACtB,IAAAM,kBAAiC,GAAAC,OAAA;AAEjC,IAAAC,eAAsF,GAAAD,OAAA;AAItF,IAAAE,YAAA,GAAAF,OAAqB;AAyNX,IAAAG,YAAA,GAAAH,OAAA;AAxKV,IAAAI,cAAM,GAAsCJ,OAAA;AAAA,IAC1CK,WAAQ;EACRC,MAAA,EAAO;EACPC,KAAA,KAAQ;EACRC,MAAA,EAAQ;EACRC,MAAA,KAAS;EACTC,OAAA,EAAQ;EACRC,MAAM;EACNC,IAAA,EAAM;EACRC,IAAA;AAOO;AACL,SAAKjB,SAAYkB,UAAO;EACxB,KAAAA,UAAW,SAAO;EAGlB,IAAAC,EAAA,GAAQ,OAAMD,UAAO,gBAAAT,WAAA,CAAAS,UAAA;EACvB,QAAAC,EAAA,aAAAA,EAAA,cAAAA,EAAA;AAEO;AAAsB,IAC3BpB,aAAS,kBAAsB,IAAAQ,YAAU,CAAAa,UAAY,WAAgBC,cAAYA,CAAKC,KAAA,EAAAC,GAAA;EACpF;IAAAC,IAAQ;IAAAC,QAAU;IAAAP,UAAI,EAAAQ,cAAA;IAAA,GAAAC;EAAiB,IAAAL,KAAA;EAEvC;IAAAM;EAAM,KAAa,GAAAtB,YAAA,CAAAuB,gBAA4B;EAC/C,IAAAX,UAAM,GAAAQ,cAAuB,aAAAA,cAAA,cAAAA,cAAA,GAAAE,SAAA,CAAAV,UAAA;EAI7B,IAAAY,WAAO,GAAAN,IAAA,KAAe;EAAoB,IACxC,CAAAO,aAAA,EAAgBC,gBAAW,QAAAzB,YAAA,CAAA0B,QAAA,EAAAH,WAAA,KAAAN,IAAA;EAAA,IAC7B,CAAAU,OAAA,EAAAC,UAAA,QAAA5B,YAAA,CAAA0B,QAAA;EAEA,KAAAG,QAAO,EAAAC,WAAS,IAAU,IAAA9B,YAAI,CAAA0B,QAAA,EAAAT,IAAS;EACvC,IAAAc,WAAO,IAAU,GAAA/B,YAAW,CAAAgC,MAAI;EAEhC,IAAAC,UAAM,OAAAjC,YAAc,CAAAgC,MAAA,OAAsB;EAG1C,IAAAE,eAAM,OAAalC,YAAA,CAAAgC,MAAA,EAAO,IAAK;EAC/B,IAAAG,MAAM,OAAAnC,YAAA,CAAkBgC,MAAA;EACxB,IAAAI,QAAM,OAAApC,YAAS,CAAAgC,MAAA,MAAsB;EACrC,IAAAT,WAAM,IAAAN,IAAW,KAAAY,QAAA;IAKjBC,WAAI,CAAAb,IAAA;IACF,IAAAA,IAAA;MACAgB,UAAU,CAAAI,OAAA,IAAAV,OAAA;MAKR,IAAAA,OAAA,EAAWC,UAAU,CAAC;IACtB;MACFK,UAAO,CAAAI,OAAA;MACLT,UAAA,KAAW;IACX;EAAe;EACjB,IACFU,oBAAA,IAAAf,WAAA,IAAAN,IAAA,IAAAU,OAAA;EAEA,IAAAY,YAAM,GAAAhB,WAAA,IAAwB,CAAAN,IAAA,KAAAU,OAAe;EAC7C,IAAAa,YAAM,OAAexC,YAAA,CAAAyC,WAAwB,EAAC;IAE9C,IAAAP,eAAM,CAAAG,OAAe;MACnBK,YAAI,CAAAR,eAAgB,CAAAG,OAAW,CAAM;MACnCH,eAAa,CAAAG,OAAA;IACb;IAA0B,IAC5BF,MAAA,CAAAE,OAAA,mBAAAM,oBAAA;MACAA,oBAAW,CAAAR,MAAW,CAAAE,OAAQ;MAC5BF,MAAA,CAAAE,OAAA;IACA;EAAiB,KACnB;EAAA,IACFO,cAAK,OAAA5C,YAAA,CAAAyC,WAAA,YAAAI,MAAA;IAELd,WAAM,CAAAM,OAAA,GAAAQ,MAAiB;IAAA,IACpBtB,WAAmB,KAAAN,IAAA;IAClB,IAAAgB,UAAA,CAAAI,OAAY;MAEZJ,UAAI,CAAAI,OAAA,GAAe,KAAC;MACpBF,MAAI,CAAAE,OAAA,GAAWS,qBAAS;QACtBX,MAAA,CAAAE,OAAW,GAAAS,qBAAU;UAGrBX,MAAA,CAAOE,OAAA,GAAU;UACfZ,gBAAO,CAAAoB,MAAU;QACf;MACA;MAAuB;IACxB;IAEHpB,gBAAA,CAAAoB,MAAA;EAAA,IAEFtB,WAAA,EAAuBN,IACzB;EACkB,IACpB8B,iBAAA,OAAA/C,YAAA,CAAAgC,MAAA,EAAAY,cAAA;EACAG,iBAAM,CAAAV,OAAA,GAAAO,cAAoB;EAC1B,IAAAI,aAAA,GAAkB,IAAAhD,YAAU,CAAAgC,MAAA,EAAArB,UAAA;EAC5BqC,aAAM,CAAAX,OAAA,GAAA1B,UAAgB;EACtB,IAAAX,YAAc,CAAAiD,eAAU;IAIxB,KAAAnD,eAAA,CAAAoD,KAAA,KAAAZ,oBAAsB;IACpB,IAAAa,IAAK,GAAAf,QAAA,CAAAC,OAAA;IACL,KAAAc,IAAM,WAAOC,cAAS;IACtB,IAAAC,QAAK,GAAQ,IAAAD,cAAO,aAAmB;MACvCL,iBAAiB,CAAAV,OAAI,CAAAc,IAAA,CAAAG,qBAAqB,GAAAT,MAAA;IAExC;IAA6DQ,QAC9D,CAAAE,OAAA,CAAAJ,IAAA;IACD,mBAAS;MACT,OAAOE,QAAM,CAAAG,UAAS;IACxB;EAGA,IACElB,oBAAkB,CAAuC,CAC3D;EAGA,IAAAmB,aAAA,OAAAzD,YAAgB,CAAAyC,WAAA,YAAAiB,KAAA;IACdX,iBAAK,CAAAV,OAAa,CAAAqB,KAAA,CAAAC,WAAA,CAAAC,MAAA,CAAAf,MAAA;EAClB;EACA,IAAA7C,YAAU,CAAA6D,SAAA;IAIR,IAAAC,oBAAgB;IACd,KAAAvC,WAAA;IAAoCiB,YACtC;IACA,IAAAvB,IAAA;MACF,KAAAgB,UAAA,CAAAI,OAAA,IAAAN,WAAA,CAAAM,OAAA;QAMAZ,gBAAkB,CAAAM,WAAA,CAAAM,OAAA;MAClB;MACA;IACA;IACEZ,gBAAA;IACE,IAAAsC,eAAA,GAAgBf,aAAU,CAAAX,OAAA;IAC1B,IAAA2B,QAAA,GAAAC,OAAgB,CAAAF,eAAA,OAAAD,oBAAA,GAAA/B,WAAA,CAAAM,OAAA,cAAAyB,oBAAA,cAAAA,oBAAA;IAAA,IAClBE,QAAG;MACL9B,eAAO,CAAAG,OAAA,GAAA6B,UAAA;QACLhC,eAAW,CAAKG,OAAA;QAClBT,UAAA;MACF,CAAG,EAACnC,QAAA,CAAAsE,eAAmB;IAEvB;MAEAnC,UACE;IAAA;EAAC,IAAAL,WACC,EAAAN,IACA,EAASuB,YACJ,CAAqD;EACN,IAAAxC,YAC/C,CAAA6D,SAAe,cAAe;IAAC,OAChCrB,YAAA;EAAA,IAGFA,YAAC;EAAA,sBACM,IAAA5C,kBAAA,CAAAuE,GAAA,EAAAlE,cAAA,CAAAmE,IAAA;IAAApD,GAAA;IAEOqD,QACX,UAAK;IAAuC,IAAA7C,aAE5C;MAAAqB,MAAA,EAAArB;IAAA,IACH;IACE,IAAAe,YAAA;MACN+B,OAAA;IAEJ;IACF,IAAA3D,UAAA","ignoreList":[]}

package/dist/cjs/Avatar/getInitials.cjs

@@ -22,6 +22,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);
@@ -35,4 +38,35 @@ function getInitials(name) {
     return (a + b).toUpperCase();
   }
   return trimmed.substring(0, 2).toUpperCase();
+}
+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)];
 }

package/dist/cjs/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/cjs/Avatar/getInitials.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","getInitials_exports","__export","getInitials","module","exports","name","trimmed","trim","parts","split","filter","Boolean","length","_parts__","_parts__1","a","b","toUpperCase"],"sources":["../../../src/Avatar/getInitials.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,mBAAA;AAAAC,QAAA,CAAAD,mBAAA;EAAAE,WAAA,EAAAA,CAAA,KAAAA;AAAA;AAIOC,MAAA,CAAAC,OAAS,GAAAT,YAAkC,CAAAK,mBAAA;AAChD,SAAME,WAAWA,CAAAG,IAAA,EAAQ;EACzB,IAAIC,OAAC,GAAS,CAAAD,IAAA,KAAO,QAAAA,IAAA,cAAAA,IAAA,OAAAE,IAAA;EACrB,KAAAD,OAAM,EAAQ,UAAQ;EACtB,IAAIE,KAAA,GAAMF,OAAA,CAAUG,KAAG,cAAAC,MAAA,CAAAC,OAAA;EACrB,IAAAH,KAAM,CAAAI,MAAI,IAAO,CAAE,EAAC;IACpB,IAAAC,QAAU,EAAAC,SAAU;IACpB,IAAAC,CAAA,GAAQ,CAAAF,QAAO,GAAAL,KAAA,EAAY,kBAAAK,QAAA,cAAAA,QAAA;IAC7B,IAAAG,CAAA,IAAAF,SAAA,GAAAN,KAAA,oBAAAM,SAAA,cAAAA,SAAA;IACA,OAAO,CAAAC,CAAA,GAAAC,CAAQ,EAAAC,WAAa,CAAC;EAC/B","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","getInitials_exports","__export","FALLBACK_TONES","fallbackTone","fallbackToneIndex","getInitials","module","exports","name","trimmed","trim","parts","split","filter","Boolean","length","_parts__","_parts__1","a","b","toUpperCase","substring","bg","fg"],"sources":["../../../src/Avatar/getInitials.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,mBAAA;AAAAC,QAAA,CAAAD,mBAAA;EAAAE,cAAA,EAAAA,CAAA,KAAAA,cAAA;EAAAC,YAAA,EAAAA,CAAA,KAAAA,YAAA;EAAAC,iBAAA,EAAAA,CAAA,KAAAA,iBAAA;EAAAC,WAAA,EAAAA,CAAA,KAAAA;AAAA;AAIOC,MAAA,CAAAC,OAAS,GAAAZ,YAAkC,CAAAK,mBAAA;AAChD,SAAMK,WAAWA,CAAAG,IAAA,EAAQ;EACzB,IAAIC,OAAC,GAAS,CAAAD,IAAA,KAAO,QAAAA,IAAA,cAAAA,IAAA,OAAAE,IAAA;EACrB,KAAAD,OAAM,EAAQ,UAAQ;EACtB,IAAIE,KAAA,GAAMF,OAAA,CAAUG,KAAG,cAAAC,MAAA,CAAAC,OAAA;EACrB,IAAAH,KAAM,CAAAI,MAAI,IAAO,CAAE,EAAC;IACpB,IAAAC,QAAU,EAAAC,SAAU;IACpB,IAAAC,CAAA,GAAQ,CAAAF,QAAO,GAAAL,KAAA,EAAY,kBAAAK,QAAA,cAAAA,QAAA;IAC7B,IAAAG,CAAA,IAAAF,SAAA,GAAAN,KAAA,oBAAAM,SAAA,cAAAA,SAAA;IACA,OAAO,CAAAC,CAAA,GAAAC,CAAQ,EAAAC,WAAa,CAAC;EAC/B;EAMO,OAAMX,OAAA,CAAAY,SAAiB,OAAAD,WAAA;AAAA;AACE,IAC5BlB,cAAI,GAAW,CACjB;EACEoB,EAAA,EAAI;EACJC,EAAA,EAAI;AACN,GACF;EAIOD,EAAA,WAAS;EACdC,EAAI;AACJ,GACE;EACFD,EAAA;EACAC,EAAA;AACF,GAEO;EACLD,EAAA,EAAM;EACNC,EAAI,EAAC;AACL,GACF","ignoreList":[]}

package/dist/cjs/Avatar/index.cjs

@@ -23,101 +23,285 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var Avatar_exports = {};
 __export(Avatar_exports, {
   Avatar: () => Avatar,
+  FALLBACK_TONES: () => import_getInitials2.FALLBACK_TONES,
+  fallbackTone: () => import_getInitials2.fallbackTone,
+  fallbackToneIndex: () => import_getInitials2.fallbackToneIndex,
   getInitials: () => import_getInitials2.getInitials
 });
 module.exports = __toCommonJS(Avatar_exports);
+var import_react = require("react");
+var import_react2 = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
+var import_get_token = require("@tamagui/get-token");
 var import_componentColors = require("../componentColors.cjs");
 var import_getInitials = require("./getInitials.cjs");
 var import_getInitials2 = require("./getInitials.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const avatarSizeMap = {
-  $3: "$2",
-  $4: "$3",
-  $5: "$4"
-};
+const GroupCtx = (0, import_react.createContext)(null);
 const identityShapeProps = (0, import_theme.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 = (0, import_theme.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 = (0, import_tamagui.getVariableValue)((0, import_get_token.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 = (0, import_react.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
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: densityCompact
+  });
+  const visualPx = resolveVisualPx(resolvedSizeProp, nested, knobProps.size, knobProps.nestedControl.px);
+  const interactive = typeof onPress === "function";
+  const pressSlop = interactive && visualPx < import_theme.MIN_PRESS_TARGET ? (0, import_theme.pressTargetHitSlop)(visualPx) : void 0;
   const onAccentInitials = (0, import_theme.useReadableTextOn)("$accentBackground");
-  const size = sizeProp ?? avatarSizeMap[knobProps.sizeToken] ?? "$3";
+  const tone = fallbackBackgroundColor || backgroundColor ? void 0 : (0, import_getInitials.fallbackTone)(name);
+  const fallbackBg = backgroundColor ?? fallbackBackgroundColor ?? tone?.bg ?? "$color4";
+  const onAccent = fallbackBg === "$accentBackground";
+  const fallbackFg = fallbackColor ?? (onAccent ? onAccentInitials ?? "$color" : tone?.fg ?? import_componentColors.componentColors.text.primary);
   const identityProps = circular ? identityShapeProps : null;
-  if (children != null) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar, {
-      circular,
-      size,
-      backgroundColor: backgroundColor ?? fallbackBackgroundColor,
-      ...identityProps,
-      ...props,
-      children
-    });
-  }
-  const label = alt ?? name ?? "Avatar";
+  const position = group ? (0, import_theme.getGroupPosition)(group.index, group.count) : void 0;
+  const squareFlush = Boolean(group && !group.overlap && !circular && position);
+  const stackCorners = squareFlush ? (0, import_theme.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 ? (0, import_getInitials.getInitials)(name) : "?");
-  const onAccent = fallbackBackgroundColor === "$accentBackground";
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Avatar, {
-    circular,
-    size,
-    backgroundColor: backgroundColor ?? fallbackBackgroundColor,
-    "aria-label": label,
+  const pipPx = Math.max(8, Math.round(visualPx * 0.28));
+  const frame = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar, {
+    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__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Image, {
-      src,
-      alt: label
-    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Fallback, {
-      backgroundColor: fallbackBackgroundColor,
-      alignItems: "center",
-      justifyContent: "center",
-      ...(src ? {
-        delayMs: 600
-      } : {}),
-      children: fallback ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-        fontSize: initialsFontSize(size),
-        color: fallbackColor ?? (onAccent ? onAccentInitials ?? "$color" : import_componentColors.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 ? (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2,
+      ...focusVisibleStyle
+    }) : focusVisibleStyle,
+    hitSlop: pressSlop ?? hitSlopProp,
+    children: children != null ? children : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [src ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Image, {
+        src,
+        alt: label ?? ""
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Fallback, {
+        backgroundColor: fallbackBg,
+        alignItems: "center",
+        justifyContent: "center",
+        ...(src ? {
+          delayMs: 600
+        } : {}),
+        children: fallback ?? (initialsText === "?" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ...{
+            color: fallbackFg
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.UserIcon, {
+            size: Math.round(visualPx * 0.42),
+            color: "currentColor"
+          })
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+          ...knobProps.label,
+          fontSize: opticalFont(visualPx),
+          fontWeight: "600",
+          color: fallbackFg,
+          textAlign: "center",
+          userSelect: "none",
+          children: initialsText
+        }))
+      })]
+    })
+  });
+  if (!status) return frame;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    position: "relative",
+    width: visualPx,
+    height: visualPx,
+    flexShrink: 0,
+    children: [frame, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  const visualPx = resolveVisualPx(size, nested, knobProps.size, knobProps.nestedControl.px);
+  const overlapPx = overlap ? Math.round(visualPx * 0.32) : 0;
+  const items = import_react.Children.toArray(children).filter(import_react.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__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    flexShrink: 0,
+    gap: 0,
+    "data-avatar-group": "",
+    "data-avatar-overlap": overlap ? "true" : "false",
+    children: [shown.map((child, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupCtx.Provider, {
+      value: {
+        size,
+        circular,
+        nested,
+        compact,
+        overlap,
+        index,
+        count: total
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        zIndex: index,
+        marginStart: index > 0 ? -overlapPx : 0,
+        flexShrink: 0,
+        children: child
+      })
+    }, index)), extra > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupCtx.Provider, {
+      value: {
+        size,
+        circular,
+        nested,
+        compact,
+        overlap,
+        index: shown.length,
+        count: total
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        zIndex: shown.length,
+        marginStart: -overlapPx,
+        flexShrink: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AvatarRoot, {
+          initials: overflowLabel,
+          fallbackBackgroundColor: "$color4",
+          fallbackColor: "$color12",
+          circular,
+          nested,
+          compact,
+          size
+        })
+      })
+    }) : null]
+  });
+}
 const Avatar = (0, import_tamagui.withStaticProperties)(AvatarRoot, {
   Image: import_tamagui.Avatar.Image,
-  Fallback: import_tamagui.Avatar.Fallback
+  Fallback: import_tamagui.Avatar.Fallback,
+  Group: AvatarGroup
 });