@12-apps/ui 6.19.0 → 6.20.0

package/dist/native/layout/Skeleton.js

@@ -0,0 +1,214 @@
+import {
+  useLoopedProgress
+} from "../chunks/chunk-MLQIOKQZ.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-M4DTJDWU.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import {
+  alpha
+} from "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/layout/Skeleton/Skeleton.native.tsx
+import * as React from "react";
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  View
+} from "react-native";
+
+// src/components/layout/Skeleton/Skeleton.helpers.ts
+var SKELETON_DEFAULTS = {
+  variant: "text",
+  animation: "pulse",
+  count: 1,
+  spacing: 1,
+  intensity: "medium",
+  glassmorphism: false,
+  shimmer: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveSkeletonProps = (props) => ({ ...SKELETON_DEFAULTS, ...definedProps(props) });
+var skeletonInstanceTestId = (base, index) => base ? `${base}-${index}` : void 0;
+
+// src/components/layout/Skeleton/Skeleton.metrics.ts
+var SKELETON_INTENSITY_OPACITY = {
+  low: 0.11,
+  medium: 0.13,
+  high: 0.15
+};
+var SKELETON_DEFAULT_DIMENSIONS = {
+  // `text` has no height of its own: MUI's line box gives it one (below).
+  text: { width: "100%", height: void 0 },
+  circular: { width: 40, height: 40 },
+  rectangular: { width: "100%", height: 40 },
+  wave: { width: "100%", height: 40 }
+};
+var GLASS_BACKGROUND_ALPHA_FROM = 0.8;
+var GLASS_BORDER_ALPHA = 0.2;
+var GLASS_SHADOW = { offsetY: 8, blur: 32, alpha: 0.1 };
+var SHIMMER_ALPHA = 0.3;
+var SHIMMER_DURATION_MS = 2e3;
+var COMMON_BLACK = "#000";
+var COMMON_WHITE = "#fff";
+var PULSE = { durationMs: 2e3, delayMs: 500, dip: 0.4 };
+var WAVE = { durationMs: 1600, delayMs: 500 };
+var TEXT_LINE_HEIGHT_EM = 1.2;
+var TEXT_SCALE_Y = 0.6;
+
+// src/components/layout/Skeleton/Skeleton.native.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PULSE_EASING = Easing.inOut(Easing.ease);
+var PERCENT = /^-?\d+(?:\.\d+)?%$/;
+function dimension(value) {
+  if (value === void 0 || typeof value === "number") return value;
+  return PERCENT.test(value) ? value : void 0;
+}
+var skeletonTint = (theme, intensity) => alpha(
+  theme.mode === "dark" ? COMMON_WHITE : theme.palette.text.primary,
+  SKELETON_INTENSITY_OPACITY[intensity]
+);
+var radiusFor = (theme, variant) => {
+  if (variant === "circular") return theme.radius.full;
+  return variant === "text" ? theme.radius.md : 0;
+};
+function textBoxHeight(theme, height) {
+  if (typeof height === "string") return dimension(height);
+  const box = height ?? theme.typography.sizes.md.fontSize * TEXT_LINE_HEIGHT_EM;
+  return box * TEXT_SCALE_Y;
+}
+function glassStyle(theme) {
+  return {
+    backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM),
+    borderWidth: 1,
+    borderColor: alpha(theme.palette.divider, GLASS_BORDER_ALPHA),
+    boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${alpha(COMMON_BLACK, GLASS_SHADOW.alpha)}`
+  };
+}
+function skeletonBoxStyle(theme, a) {
+  const box = SKELETON_DEFAULT_DIMENSIONS[a.variant];
+  const height = a.height ?? box.height;
+  const style = {
+    width: dimension(a.width ?? box.width),
+    height: a.variant === "text" ? textBoxHeight(theme, height) : dimension(height),
+    borderRadius: dimension(a.borderRadius) ?? radiusFor(theme, a.variant),
+    backgroundColor: skeletonTint(theme, a.intensity)
+  };
+  if (a.clipped) style.overflow = "hidden";
+  return a.glassmorphism ? { ...style, ...glassStyle(theme) } : style;
+}
+function Wash({ color, durationMs, delayMs, testID }) {
+  const progress = useLoopedProgress(true, { durationMs, delayMs, easing: Easing.linear });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID,
+      style: [
+        StyleSheet.absoluteFill,
+        {
+          pointerEvents: "none",
+          backgroundColor: color,
+          opacity: progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 1, 0] })
+        }
+      ]
+    }
+  );
+}
+var effectiveAnimation = (variant, animation) => variant === "wave" ? "wave" : animation;
+function SkeletonBox({
+  animation,
+  shimmer,
+  style,
+  testID,
+  rest,
+  ...styleArgs
+}) {
+  const theme = useUiTheme();
+  const animates = effectiveAnimation(styleArgs.variant, animation);
+  const pulse = useLoopedProgress(animates === "pulse", {
+    durationMs: PULSE.durationMs,
+    delayMs: PULSE.delayMs,
+    easing: PULSE_EASING
+  });
+  const box = skeletonBoxStyle(theme, styleArgs);
+  const washId = testID ? `${testID}-wash` : void 0;
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      "aria-hidden": true,
+      testID,
+      style: [
+        box,
+        animates === "pulse" ? { opacity: pulse.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, PULSE.dip, 1] }) } : null,
+        style
+      ],
+      ...rest,
+      children: [
+        shimmer ? /* @__PURE__ */ jsx(
+          Wash,
+          {
+            color: alpha(COMMON_WHITE, SHIMMER_ALPHA),
+            durationMs: SHIMMER_DURATION_MS,
+            delayMs: 0,
+            testID: washId
+          }
+        ) : null,
+        !shimmer && animates === "wave" ? /* @__PURE__ */ jsx(
+          Wash,
+          {
+            color: theme.palette.action.hover,
+            durationMs: WAVE.durationMs,
+            delayMs: WAVE.delayMs,
+            testID: washId
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var Skeleton = React.memo(function Skeleton2(rawProps) {
+  const resolved = resolveSkeletonProps(rawProps);
+  const {
+    variant,
+    animation,
+    width,
+    height,
+    count,
+    spacing,
+    borderRadius,
+    intensity,
+    glassmorphism,
+    shimmer,
+    style,
+    ...others
+  } = resolved;
+  const theme = useUiTheme();
+  const testID = resolveTestId(others);
+  const box = {
+    variant,
+    animation,
+    intensity,
+    width,
+    height,
+    borderRadius,
+    glassmorphism,
+    shimmer,
+    clipped: shimmer || effectiveAnimation(variant, animation) === "wave",
+    style,
+    rest: withoutTestIdProps(others)
+  };
+  if (count === 0) return null;
+  if (count === 1) return /* @__PURE__ */ jsx(SkeletonBox, { ...box, testID });
+  return /* @__PURE__ */ jsx(View, { style: { gap: theme.spacing(spacing) }, children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsx(SkeletonBox, { ...box, testID: skeletonInstanceTestId(testID, index) }) }, `skeleton-${index}`)) });
+});
+Skeleton.displayName = "Skeleton";
+export {
+  Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/native/layout/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/Skeleton/Skeleton.native.tsx","../../../src/components/layout/Skeleton/Skeleton.helpers.ts","../../../src/components/layout/Skeleton/Skeleton.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  Animated,\n  Easing,\n  StyleSheet,\n  View,\n  type DimensionValue,\n  type StyleProp,\n  type ViewProps,\n  type ViewStyle,\n} from 'react-native';\n\nimport { resolveSkeletonProps, skeletonInstanceTestId } from './Skeleton.helpers';\nimport {\n  COMMON_BLACK,\n  COMMON_WHITE,\n  GLASS_BACKGROUND_ALPHA_FROM,\n  GLASS_BORDER_ALPHA,\n  GLASS_SHADOW,\n  PULSE,\n  SHIMMER_ALPHA,\n  SHIMMER_DURATION_MS,\n  SKELETON_DEFAULT_DIMENSIONS,\n  SKELETON_INTENSITY_OPACITY,\n  TEXT_LINE_HEIGHT_EM,\n  TEXT_SCALE_Y,\n  WAVE,\n} from './Skeleton.metrics';\nimport type {\n  SkeletonAnimation,\n  SkeletonIntensity,\n  SkeletonProps,\n  SkeletonVariant,\n} from './Skeleton.types.native';\nimport { useLoopedProgress } from '../../../platform/animation';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** MUI's `pulseKeyframe` runs `ease-in-out`. */\nconst PULSE_EASING = Easing.inOut(Easing.ease);\nconst PERCENT = /^-?\\d+(?:\\.\\d+)?%$/;\n\n/**\n * A width or a height, as React Native accepts one. The web takes any CSS\n * length; here a number is dp and a percentage is a percentage — anything else\n * (`10rem`, `calc(...)`) has no equivalent and sizes the box from its content,\n * which `NATIVE-NOTES.md` records.\n */\nexport function dimension(value: number | string | undefined): DimensionValue | undefined {\n  if (value === undefined || typeof value === 'number') return value;\n  return PERCENT.test(value) ? (value as `${number}%`) : undefined;\n}\n\n/** The tint the web writes: the body ink at the intensity's alpha, white in dark mode. */\nexport const skeletonTint = (theme: UiTheme, intensity: SkeletonIntensity): string =>\n  alpha(\n    theme.mode === 'dark' ? COMMON_WHITE : theme.palette.text.primary,\n    SKELETON_INTENSITY_OPACITY[intensity],\n  );\n\n/** MUI's radius per variant: a circle, a square rectangle, the theme's 4px on text. */\nconst radiusFor = (theme: UiTheme, variant: SkeletonVariant): number => {\n  if (variant === 'circular') return theme.radius.full;\n  return variant === 'text' ? theme.radius.md : 0;\n};\n\n/**\n * The `text` variant's height. MUI gives it a `1.2em` line box and squashes the\n * whole box to 60%; React Native's transforms do not change layout, so the two\n * are multiplied out into the height the web actually shows.\n */\nexport function textBoxHeight(\n  theme: UiTheme,\n  height: number | string | undefined,\n): DimensionValue | undefined {\n  if (typeof height === 'string') return dimension(height);\n  const box = height ?? theme.typography.sizes.md.fontSize * TEXT_LINE_HEIGHT_EM;\n  return box * TEXT_SCALE_Y;\n}\n\n/**\n * `glassmorphism`: the gradient's first stop flat, the hairline, and the web's\n * own box-shadow string — React Native 0.76+ takes CSS shadow syntax, so the\n * two renderers draw the shadow from the same declaration. What is missing is\n * the 20px backdrop blur, which React Native has no equivalent of.\n */\nfunction glassStyle(theme: UiTheme): ViewStyle {\n  return {\n    backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM),\n    borderWidth: 1,\n    borderColor: alpha(theme.palette.divider, GLASS_BORDER_ALPHA),\n    boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${alpha(COMMON_BLACK, GLASS_SHADOW.alpha)}`,\n  };\n}\n\ninterface SkeletonBoxStyleArgs {\n  variant: SkeletonVariant;\n  intensity: SkeletonIntensity;\n  width?: number | string;\n  height?: number | string;\n  borderRadius?: number | string;\n  glassmorphism: boolean;\n  /** A box with a wash sliding over it clips, as MUI's `wave` and the shimmer do. */\n  clipped: boolean;\n}\n\n/** The box the web paints, in absolute numbers. */\nexport function skeletonBoxStyle(theme: UiTheme, a: SkeletonBoxStyleArgs): ViewStyle {\n  const box = SKELETON_DEFAULT_DIMENSIONS[a.variant];\n  const height = a.height ?? box.height;\n  const style: ViewStyle = {\n    width: dimension(a.width ?? box.width),\n    height: a.variant === 'text' ? textBoxHeight(theme, height) : dimension(height),\n    borderRadius: dimension(a.borderRadius) ?? radiusFor(theme, a.variant),\n    backgroundColor: skeletonTint(theme, a.intensity),\n  };\n  if (a.clipped) style.overflow = 'hidden';\n  return a.glassmorphism ? { ...style, ...glassStyle(theme) } : style;\n}\n\ninterface WashProps {\n  color: string;\n  durationMs: number;\n  delayMs: number;\n  testID?: string;\n}\n\n/**\n * MUI's sweeping `::after`, standing still. React Native core has no gradient\n * fill and no pseudo-elements, so the same wash covers the box and fades in and\n * out on the same cadence instead of travelling across it. It carries no\n * `aria-hidden` of its own: the box it sits in is already hidden, and the\n * shared stories count the boxes by that attribute.\n */\nfunction Wash({ color, durationMs, delayMs, testID }: WashProps): React.JSX.Element {\n  const progress = useLoopedProgress(true, { durationMs, delayMs, easing: Easing.linear });\n  return (\n    <Animated.View\n      testID={testID}\n      style={[\n        StyleSheet.absoluteFill,\n        {\n          pointerEvents: 'none',\n          backgroundColor: color,\n          opacity: progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 1, 0] }),\n        },\n      ]}\n    />\n  );\n}\n\ninterface SkeletonBoxProps extends SkeletonBoxStyleArgs {\n  animation: SkeletonAnimation;\n  shimmer: boolean;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n  rest: ViewProps;\n}\n\n/** The web's `muiAnimationFor`: the `wave` VARIANT always animates as a wave. */\nconst effectiveAnimation = (\n  variant: SkeletonVariant,\n  animation: SkeletonAnimation,\n): SkeletonAnimation => (variant === 'wave' ? 'wave' : animation);\n\n/** One skeleton box: the tint, the pulse, and the wash the sweep stands in for. */\nfunction SkeletonBox({\n  animation,\n  shimmer,\n  style,\n  testID,\n  rest,\n  ...styleArgs\n}: SkeletonBoxProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const animates = effectiveAnimation(styleArgs.variant, animation);\n  const pulse = useLoopedProgress(animates === 'pulse', {\n    durationMs: PULSE.durationMs,\n    delayMs: PULSE.delayMs,\n    easing: PULSE_EASING,\n  });\n  const box = skeletonBoxStyle(theme, styleArgs);\n  const washId = testID ? `${testID}-wash` : undefined;\n\n  return (\n    <Animated.View\n      aria-hidden\n      testID={testID}\n      style={[\n        box,\n        animates === 'pulse'\n          ? { opacity: pulse.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, PULSE.dip, 1] }) }\n          : null,\n        style,\n      ]}\n      {...rest}\n    >\n      {shimmer ? (\n        <Wash\n          color={alpha(COMMON_WHITE, SHIMMER_ALPHA)}\n          durationMs={SHIMMER_DURATION_MS}\n          delayMs={0}\n          testID={washId}\n        />\n      ) : null}\n      {!shimmer && animates === 'wave' ? (\n        <Wash\n          color={theme.palette.action.hover}\n          durationMs={WAVE.durationMs}\n          delayMs={WAVE.delayMs}\n          testID={washId}\n        />\n      ) : null}\n    </Animated.View>\n  );\n}\n\n/**\n * The native `Skeleton`: the same box, the same tint and the same default\n * dimensions the MUI half draws, on a `View`.\n */\nexport const Skeleton: React.FC<SkeletonProps> = React.memo(function Skeleton(rawProps) {\n  const resolved = resolveSkeletonProps(rawProps);\n  const {\n    variant,\n    animation,\n    width,\n    height,\n    count,\n    spacing,\n    borderRadius,\n    intensity,\n    glassmorphism,\n    shimmer,\n    style,\n    ...others\n  } = resolved;\n  const theme = useUiTheme();\n  const testID = resolveTestId(others);\n  const box: Omit<SkeletonBoxProps, 'testID'> = {\n    variant,\n    animation,\n    intensity,\n    width,\n    height,\n    borderRadius,\n    glassmorphism,\n    shimmer,\n    clipped: shimmer || effectiveAnimation(variant, animation) === 'wave',\n    style,\n    rest: withoutTestIdProps(others),\n  };\n\n  // Handle edge case: count of 0 should render nothing\n  if (count === 0) return null;\n  if (count === 1) return <SkeletonBox {...box} testID={testID} />;\n\n  return (\n    <View style={{ gap: theme.spacing(spacing) }}>\n      {Array.from({ length: count }, (_, index) => (\n        <View key={`skeleton-${index}`}>\n          <SkeletonBox {...box} testID={skeletonInstanceTestId(testID, index)} />\n        </View>\n      ))}\n    </View>\n  );\n});\n\nSkeleton.displayName = 'Skeleton';\n","import type { SkeletonBaseProps } from './Skeleton.base';\n\ntype SkeletonDefaultedKeys =\n  | 'variant'\n  | 'animation'\n  | 'count'\n  | 'spacing'\n  | 'intensity'\n  | 'glassmorphism'\n  | 'shimmer';\n\n/**\n * Generic over the renderer's own props: the web and the native `Skeleton`\n * carry different extras (`className`/`style` against a `View`'s props), and\n * both come back out untouched.\n */\ntype ResolvedSkeletonProps<P extends SkeletonBaseProps> = P &\n  Required<Pick<SkeletonBaseProps, SkeletonDefaultedKeys>>;\n\nconst SKELETON_DEFAULTS: Required<Pick<SkeletonBaseProps, SkeletonDefaultedKeys>> = {\n  variant: 'text',\n  animation: 'pulse',\n  count: 1,\n  spacing: 1,\n  intensity: 'medium',\n  glassmorphism: false,\n  shimmer: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `count={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = <P extends SkeletonBaseProps>(props: P): Partial<P> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<P>;\n\nexport const resolveSkeletonProps = <P extends SkeletonBaseProps>(\n  props: P,\n): ResolvedSkeletonProps<P> =>\n  ({ ...SKELETON_DEFAULTS, ...definedProps(props) }) as ResolvedSkeletonProps<P>;\n\n/**\n * The id of instance `index` when a caller asked for several. Unnamed\n * skeletons stay unnamed — the web has always cloned `undefined` there.\n */\nexport const skeletonInstanceTestId = (\n  base: string | undefined,\n  index: number,\n): string | undefined => (base ? `${base}-${index}` : undefined);\n","import type { SkeletonIntensity, SkeletonVariant } from './Skeleton.base';\n\n/**\n * THE NUMBERS BOTH `Skeleton` RENDERERS DRAW WITH.\n *\n * `Skeleton.styles.ts` (web, emotion over MUI's own `Skeleton`) and\n * `Skeleton.native.tsx` (React Native) read this one table. The web turns them\n * into CSS strings — `blur(20px)`, `shimmer 2s infinite` — and native uses the\n * numbers as they are, so neither renderer restates a value.\n *\n * Two groups live here. The first is what the web component WRITES (the\n * intensity alphas, the default box, the glass and shimmer washes). The second\n * is what MUI's own `Skeleton` contributes on the web and the native half\n * therefore has to restate: its pulse keyframe, its wave cadence, and the\n * geometry of the `text` variant. Those are MUI's DEFAULTS — a host that\n * re-themes them moves the web only, which `NATIVE-NOTES.md` records.\n */\n\n/** The tint's alpha over the ink, per intensity. */\nexport const SKELETON_INTENSITY_OPACITY: Record<SkeletonIntensity, number> = {\n  low: 0.11,\n  medium: 0.13,\n  high: 0.15,\n};\n\n/** The box a variant draws when the caller gives no `width`/`height`. */\nexport const SKELETON_DEFAULT_DIMENSIONS: Record<\n  SkeletonVariant,\n  { width: number | string; height: number | undefined }\n> = {\n  // `text` has no height of its own: MUI's line box gives it one (below).\n  text: { width: '100%', height: undefined },\n  circular: { width: 40, height: 40 },\n  rectangular: { width: '100%', height: 40 },\n  wave: { width: '100%', height: 40 },\n};\n\n/* ── `glassmorphism` ──────────────────────────────────────────────────────── */\n\n/** The 135° wash over `background.paper`, from the first stop to the last. */\nexport const GLASS_BACKGROUND_ALPHA_FROM = 0.8;\nexport const GLASS_BACKGROUND_ALPHA_TO = 0.4;\nexport const GLASS_BLUR_PX = 20;\nexport const GLASS_BORDER_ALPHA = 0.2;\n/** `0 8px 32px 0 rgba(0, 0, 0, 0.1)`. */\nexport const GLASS_SHADOW = { offsetY: 8, blur: 32, alpha: 0.1 } as const;\n\n/* ── `shimmer` ────────────────────────────────────────────────────────────── */\n\n/** The sweep's middle stop, over white. */\nexport const SHIMMER_ALPHA = 0.3;\nexport const SHIMMER_DURATION_MS = 2000;\n\n/**\n * MUI's `palette.common`, which is a pair of fixed hexes rather than anything\n * derived — so the shared theme has no slot for them and they are named here.\n */\nexport const COMMON_BLACK = '#000';\nexport const COMMON_WHITE = '#fff';\n\n/* ── MUI's own `Skeleton`, restated for the renderer that has no MUI ──────── */\n\n/**\n * MUI's `pulseKeyframe`: opacity 1 → 0.4 → 1, `2s ease-in-out 0.5s infinite`.\n * The delay runs once on the web; native replays it each lap unless the\n * animation is sequenced, which `Skeleton.native.tsx` does.\n */\nexport const PULSE = { durationMs: 2000, delayMs: 500, dip: 0.4 } as const;\n\n/** MUI's `wave` sweep: `1.6s linear 0.5s infinite`, in `palette.action.hover`. */\nexport const WAVE = { durationMs: 1600, delayMs: 500 } as const;\n\n/**\n * The `text` variant, as MUI draws it: a line box `1.2em` tall squashed to 60%\n * of its height (`transform: scale(1, 0.60)`), with a `4px/6.7px` elliptical\n * radius that the same squash turns back into a round 4px. React Native has no\n * `em`, and its transforms do not change layout, so the native half multiplies\n * the two out into one height and draws the plain 4px radius the squash lands on.\n */\nexport const TEXT_LINE_HEIGHT_EM = 1.2;\nexport const TEXT_SCALE_Y = 0.6;\n"],"mappings":"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","names":["Skeleton"]}

package/dist/navigation/AppHeader.js

@@ -1,11 +1,15 @@
 import "../chunk-5CUKSNWG.js";
+import {
+  AppHeader,
+  AppHeader_default
+} from "../chunk-D3IXNCEU.js";
 import {
   AppHeaderIdentity,
   AppHeaderStatus
 } from "../chunk-W2YNUUVJ.js";
 import {
   AppHeaderDetails
-} from "../chunk-KADJNWTQ.js";
+} from "../chunk-LZRURORY.js";
 import {
   AppHeaderBrand
 } from "../chunk-H37GIAAM.js";
@@ -14,23 +18,19 @@ import {
   highlightOf,
   initialsOf
 } from "../chunk-IQU4HKND.js";
-import {
-  AppHeader,
-  AppHeader_default
-} from "../chunk-D3IXNCEU.js";
-import "../chunk-MCRIT46W.js";
+import "../chunk-MY5VNNSP.js";
+import "../chunk-6JZE4IIN.js";
 import "../chunk-OLZTGVBT.js";
 import "../chunk-CRN4KKNI.js";
 import "../chunk-M2K7BPHX.js";
-import "../chunk-6JZE4IIN.js";
 import "../chunk-POUWN4PX.js";
 import "../chunk-F52N6ACD.js";
 import "../chunk-S5LE2ARG.js";
 import "../chunk-6PRA45LC.js";
-import "../chunk-SL4NFGOL.js";
-import "../chunk-TAMIZE4Q.js";
+import "../chunk-24BUCMQA.js";
 import "../chunk-JT6TERQL.js";
 import "../chunk-ITGG5OKP.js";
+import "../chunk-TAMIZE4Q.js";
 import "../chunk-QLWBQQW7.js";
 import "../chunk-AKZWDZCZ.js";
 import "../chunk-HPK33ACY.js";

package/dist/navigation/NavigationMenu.js

@@ -1,12 +1,12 @@
 import "../chunk-I53WONUS.js";
 import {
   NavigationMenu
-} from "../chunk-7WL24VNI.js";
-import "../chunk-7AR2R7TV.js";
-import "../chunk-UEJQQVP2.js";
+} from "../chunk-HDNK7BAX.js";
+import "../chunk-BLT5ZBVL.js";
+import "../chunk-G5ZVD5IJ.js";
+import "../chunk-Q444G5X7.js";
 import "../chunk-RXSGHPCR.js";
 import "../chunk-3L5OZCGA.js";
-import "../chunk-Q444G5X7.js";
 import "../chunk-FYLCSCMR.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/navigation/Pagination.js

@@ -1,9 +1,9 @@
 import "../chunk-MQJDMQJZ.js";
 import {
   Pagination
-} from "../chunk-RBGOGTT2.js";
-import "../chunk-BB2IVF76.js";
+} from "../chunk-W2UTDN4T.js";
 import "../chunk-CZBONNPA.js";
+import "../chunk-BB2IVF76.js";
 import "../chunk-Z6TIAVEG.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/navigation/Tabs.js

@@ -1,9 +1,9 @@
 import "../chunk-R445KMGG.js";
 import {
   Tabs
-} from "../chunk-DZN3JF5E.js";
-import "../chunk-EWSGWLHN.js";
+} from "../chunk-BBC4KT5G.js";
 import "../chunk-7UZ2TFIK.js";
+import "../chunk-EWSGWLHN.js";
 import "../chunk-PZ5AY32C.js";
 export {
   Tabs

package/dist/social-login-button.js

@@ -4,7 +4,7 @@ import {
   GoogleIcon,
   SocialLoginButton,
   SocialLoginContainer
-} from "./chunk-KKYW3LU7.js";
+} from "./chunk-47UD6DZ4.js";
 import "./chunk-INGPH3YQ.js";
 import "./chunk-6GP2DOOO.js";
 import "./chunk-Z7JNCB5Q.js";
@@ -19,10 +19,10 @@ import "./chunk-D2IASECY.js";
 import "./chunk-VMF3UXM4.js";
 import "./chunk-RI5JZLZL.js";
 import "./chunk-BA4RHQ3B.js";
-import "./chunk-SL4NFGOL.js";
-import "./chunk-TAMIZE4Q.js";
+import "./chunk-24BUCMQA.js";
 import "./chunk-JT6TERQL.js";
 import "./chunk-ITGG5OKP.js";
+import "./chunk-TAMIZE4Q.js";
 import "./chunk-2PCOC3PT.js";
 import "./chunk-V3PLFYKO.js";
 import "./chunk-QLWBQQW7.js";

package/dist/types/components/data-display/Avatar/Avatar.base.d.ts

@@ -0,0 +1,87 @@
+import type React from 'react';
+import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR — and nothing else.
+ *
+ * This file imports no MUI and no react-native, on purpose: it is in BOTH
+ * declaration outputs (`dist/types` and `dist/types-native`), and a native
+ * consumer has no `@mui/material` to resolve a type import against.
+ */
+/**
+ * The house scale, EXTENDED by one stop rather than replacing it.
+ *
+ * `xxl` is real — an avatar is the one component with a portrait size above the
+ * scale's top — so it is added to `SizeValue` instead of the union being
+ * rewritten by hand. Spelling all six out again is how the copy drifts.
+ */
+export type AvatarSize = SizeValue | 'xxl';
+export type AvatarVariant = 'circle' | 'square' | 'rounded' | 'status';
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+/** Which of the four content sources won, and therefore which slot id it takes. */
+export type ContentType = 'children' | 'fallback' | 'icon' | 'default';
+export interface AvatarBaseProps {
+    /**
+     * The variant of the avatar
+     */
+    variant?: AvatarVariant;
+    /**
+     * The size of the avatar
+     */
+    size?: AvatarSize;
+    /**
+     * Whether the avatar should have a glow effect
+     */
+    glow?: boolean;
+    /**
+     * Whether the avatar should have a pulse animation
+     */
+    pulse?: boolean;
+    /**
+     * Status indicator (only applies when variant is 'status')
+     */
+    status?: AvatarStatus;
+    /**
+     * Fallback text when no src is provided (typically initials)
+     */
+    fallback?: string;
+    /**
+     * Custom icon to display
+     */
+    icon?: React.ReactNode;
+    /**
+     * Whether to show a border around the avatar
+     */
+    bordered?: boolean;
+    /**
+     * Color of the avatar background when no image is provided
+     */
+    color?: ColorValue;
+    /**
+     * Whether the avatar is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * Whether the avatar should be interactive (show hover effects)
+     */
+    interactive?: boolean;
+    /**
+     * Whether to show fallback content on image error
+     */
+    showFallbackOnError?: boolean;
+    /**
+     * Animation delay in milliseconds
+     */
+    animationDelay?: number;
+    /** The portrait itself. */
+    src?: string;
+    /** The portrait's description, and the avatar's accessible name. */
+    alt?: string;
+    children?: React.ReactNode;
+    /**
+     * Test ID for automated testing
+     */
+    dataTestId?: string;
+    /** React Native's spelling of {@link AvatarBaseProps.dataTestId}. */
+    testID?: string;
+}
+//# sourceMappingURL=Avatar.base.d.ts.map

package/dist/types/components/data-display/Avatar/Avatar.base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Avatar/Avatar.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;;GAMG;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,CAAC;AAC3C,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AACvE,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE,mFAAmF;AACnF,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/types/components/data-display/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAyJlD,eAAO,MAAM,MAAM,iGAEjB,CAAC;AAuBH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAmBA,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAShE,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAgJ/D,eAAO,MAAM,MAAM,iGAEjB,CAAC;AAuBH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAmBA,CAAC"}

package/dist/types/components/data-display/Avatar/Avatar.helpers.d.ts

@@ -0,0 +1,37 @@
+import type { ContentType } from './Avatar.base';
+/** Applied via a single spread so no per-field default inflates cyclomatic complexity. */
+export declare const AVATAR_DEFAULTS: {
+    variant: "circle";
+    size: "md";
+    glow: false;
+    pulse: false;
+    bordered: false;
+    color: "primary";
+    loading: false;
+    interactive: false;
+    showFallbackOnError: true;
+    animationDelay: number;
+};
+/** What wins the middle of the avatar. `broken` is the icon slot's error glyph. */
+export type AvatarContentPick = ContentType | 'broken';
+export interface AvatarContentArgs {
+    hasChildren: boolean;
+    hasFallback: boolean;
+    hasIcon: boolean;
+    imageError: boolean;
+    showFallbackOnError: boolean;
+}
+/**
+ * Pick what renders inside the avatar. On an image error (with fallback
+ * enabled) the fallback/icon/broken-image wins; otherwise children → fallback →
+ * icon → the default person glyph.
+ *
+ * The DECISION is shared; each renderer builds its own node from it, because
+ * the two draw a glyph with different things.
+ */
+export declare function pickAvatarContent(a: AvatarContentArgs): AvatarContentPick;
+/** The slot id a pick takes; the broken-image glyph shares the icon slot's. */
+export declare const contentTypeOf: (pick: AvatarContentPick) => ContentType;
+/** `${dataTestId}-loading`, or nothing at all when the caller named nothing. */
+export declare const avatarTestId: (dataTestId?: string) => (suffix: string) => string | undefined;
+//# sourceMappingURL=Avatar.helpers.d.ts.map

package/dist/types/components/data-display/Avatar/Avatar.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Avatar/Avatar.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAmB,WAAW,EAAE,MAAM,eAAe,CAAC;AAElE,0FAA0F;AAC1F,eAAO,MAAM,eAAe;;;;;;;;;;;CAWQ,CAAC;AAErC,mFAAmF;AACnF,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEvD,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,iBAAiB,GAAG,iBAAiB,CAQzE;AAED,+EAA+E;AAC/E,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,KAAG,WACrB,CAAC;AAEpC,gFAAgF;AAChF,eAAO,MAAM,YAAY,GACtB,aAAa,MAAM,MACnB,QAAQ,MAAM,KAAG,MAAM,GAAG,SACyB,CAAC"}

package/dist/types/components/data-display/Avatar/Avatar.metrics.d.ts

@@ -0,0 +1,113 @@
+import type { AvatarSize, AvatarStatus } from './Avatar.base';
+import type { UiTheme } from '../../../tokens/theme';
+import type { ColorValue } from '../../../tokens/vocabulary';
+/**
+ * THE NUMBERS BOTH `Avatar` RENDERERS DRAW WITH.
+ *
+ * `Avatar.view.tsx` (web, emotion over MUI's `Avatar` and `Badge`) and
+ * `Avatar.native.tsx` (React Native) read this one table: the six boxes and
+ * their type, the status dot, the glow, the shimmer and the spinner. The web
+ * turns the px into rem; native uses the numbers.
+ */
+export interface AvatarSizeMetrics {
+    /** The square the portrait fills, in px. */
+    box: number;
+    /** The initials' type size, in px. */
+    fontSize: number;
+}
+export declare const AVATAR_SIZES: Record<AvatarSize, AvatarSizeMetrics>;
+/** `rounded` takes one spacing unit; `circle` and `status` are round. */
+export declare const ROUNDED_RADIUS_UNITS = 1;
+/** The paper ring an avatar takes inside a group, and the hairline outside it. */
+export declare const BORDER_WIDTH = 2;
+export declare const BORDER_HALO_ALPHA = 0.2;
+/** `glow`: a 20px halo at five pixels of spread, and a brightness lift. */
+export declare const GLOW: {
+    readonly blur: 20;
+    readonly spread: 5;
+    readonly alpha: 0.4;
+    readonly brightness: 1.05;
+};
+/** `pulse`: the `::after` ring, from nothing to 10px while it fades out. */
+export declare const PULSE: {
+    readonly durationMs: 2000;
+    readonly alpha: 0.3;
+    readonly spread: 10;
+};
+/** The shimmer that runs across a loading avatar. */
+export declare const SHIMMER: {
+    readonly durationMs: 1500;
+    readonly fromAlpha: 0.6;
+    readonly toAlpha: 0.8;
+};
+/** The overlay over a loading avatar, and the ring spinning in it. */
+export declare const LOADING_OVERLAY: {
+    readonly paperAlpha: 0.7;
+    readonly blur: 2;
+};
+export declare const SPINNER: {
+    /** A share of the avatar's box. */
+    readonly scale: 0.4;
+    readonly ringWidth: 2;
+    readonly trackAlpha: 0.3;
+    readonly durationMs: 800;
+};
+/**
+ * The status dot: a fifth of the box, never below 8px, inside a paper ring.
+ * `anchor` is MUI's `overlap="circular"` inset — the dot's CENTRE sits 14% of
+ * the box in from the bottom-right corner.
+ */
+export declare const STATUS_DOT: {
+    readonly scale: 0.2;
+    readonly min: 8;
+    readonly borderWidth: 2;
+    readonly anchor: 0.14;
+};
+/**
+ * The default and broken-image glyphs are ordinary `SvgIcon`s here, not MUI's
+ * own `.MuiAvatar-fallback` (which is 75% of the box): this component passes
+ * them as CHILDREN, so they render at the icon default whatever the box is.
+ */
+export declare const GLYPH_SIZE = 24;
+/** MUI's `Fade` timeout on mount, and the scale-in behind it. */
+export declare const FADE_MS = 300;
+export declare const SCALE_IN_MS = 300;
+/** `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`. */
+export declare const AVATAR_TRANSITION_MS = 300;
+export declare const AVATAR_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+/** The interactive lift, which is a `:hover` on the web. */
+export declare const HOVER: {
+    readonly scale: 1.1;
+    readonly lift: 2;
+    readonly shadowY: 8;
+    readonly shadowBlur: 20;
+    readonly shadowAlpha: 0.3;
+    readonly brightness: 1.1;
+};
+export declare const ACTIVE_SCALE = 1.05;
+/** The focus ring `:focus-visible` draws. */
+export declare const FOCUS_RING: {
+    readonly width: 3;
+    readonly offset: 2;
+    readonly alpha: 0.5;
+};
+/** An avatar group's default overlap, in px, and its hover lift. */
+export declare const GROUP_OVERLAP = 8;
+export declare const GROUP_MAX = 4;
+export declare const GROUP_HOVER: {
+    readonly scale: 1.1;
+    readonly lift: 4;
+};
+/** The dot's colour per status. `offline` is the ramp, the rest are semantic. */
+export declare function statusColor(theme: UiTheme, status: AvatarStatus): string;
+export interface AvatarAccent {
+    main: string;
+    contrastText: string;
+}
+/**
+ * The accent behind the initials. `danger`, NOT `error` — the web map was keyed
+ * on MUI's word while the prop took the house one, so `danger` matched nothing
+ * and fell through to primary: a red avatar rendering blue, silently.
+ */
+export declare function avatarAccent(theme: UiTheme, color: ColorValue): AvatarAccent;
+//# sourceMappingURL=Avatar.metrics.d.ts.map

package/dist/types/components/data-display/Avatar/Avatar.metrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Avatar/Avatar.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7D;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,4CAA4C;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE,iBAAiB,CAO9D,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAEtC,kFAAkF;AAClF,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,2EAA2E;AAC3E,eAAO,MAAM,IAAI;;;;;CAAiE,CAAC;AAEnF,4EAA4E;AAC5E,eAAO,MAAM,KAAK;;;;CAAwD,CAAC;AAE3E,qDAAqD;AACrD,eAAO,MAAM,OAAO;;;;CAA8D,CAAC;AAEnF,sEAAsE;AACtE,eAAO,MAAM,eAAe;;;CAAwC,CAAC;AACrE,eAAO,MAAM,OAAO;IAClB,mCAAmC;;;;;CAK3B,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;;;CAAgE,CAAC;AAExF;;;;GAIG;AACH,eAAO,MAAM,UAAU,KAAK,CAAC;AAE7B,iEAAiE;AACjE,eAAO,MAAM,OAAO,MAAM,CAAC;AAC3B,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,2DAA2D;AAC3D,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,wBAAwB,iCAAiC,CAAC;AAEvE,4DAA4D;AAC5D,eAAO,MAAM,KAAK;;;;;;;CAAkG,CAAC;AACrH,eAAO,MAAM,YAAY,OAAO,CAAC;AAEjC,6CAA6C;AAC7C,eAAO,MAAM,UAAU;;;;CAA+C,CAAC;AAEvE,oEAAoE;AACpE,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,WAAW;;;CAAmC,CAAC;AAE5D,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,GAAG,MAAM,CAKxE;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,GAAG,YAAY,CAI5E"}