@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-QBJVRPTF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/useCategoryKeyHandler.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { handleCategoryKeyDown } from './category-keyboard';\nimport type { CategoryActions } from './useCategoryCommit';\nimport type { CategorySelectState } from './useCategorySelect';\n\ninterface UseCategoryKeyHandlerArgs {\n  state: CategorySelectState;\n  single: boolean;\n  allowParentSelection: boolean;\n  actions: CategoryActions;\n}\n\n/**\n * Bind the panel's keydown to the tree navigator.\n *\n * `preventDefault` fires only for keys the navigator actually consumed, so an\n * unhandled key still reaches the search box — otherwise typing would be dead.\n */\nexport function useCategoryKeyHandler({\n  state,\n  single,\n  allowParentSelection,\n  actions,\n}: UseCategoryKeyHandlerArgs): (event: React.KeyboardEvent) => void {\n  const { isExpanded, toggleExpanded } = state;\n\n  const expand = useCallback(\n    (id: string) => {\n      if (!isExpanded(id)) toggleExpanded(id);\n    },\n    [isExpanded, toggleExpanded],\n  );\n\n  const collapse = useCallback(\n    (id: string) => {\n      if (isExpanded(id)) toggleExpanded(id);\n    },\n    [isExpanded, toggleExpanded],\n  );\n\n  return useCallback(\n    (event: React.KeyboardEvent) => {\n      const inSearchField = (event.target as HTMLElement | null)?.tagName === 'INPUT';\n      const editingText = inSearchField && state.query.length > 0;\n      const consumed = handleCategoryKeyDown(event.key, editingText, {\n        rows: state.rows,\n        activeIndex: state.activeIndex,\n        groups: state.visibleGroups,\n        single,\n        allowParentSelection,\n        setActiveIndex: state.setActiveIndex,\n        toggleExpanded,\n        expand,\n        collapse,\n        toggleCategory: state.toggleCategory,\n        toggleSubcategory: state.toggleSubcategory,\n        commit: actions.commit,\n        cancel: actions.cancel,\n        pick: actions.pick,\n      });\n      if (consumed) event.preventDefault();\n    },\n    [state, single, allowParentSelection, toggleExpanded, expand, collapse, actions],\n  );\n}\n"],"mappings":";;;;;AAAA,SAAS,mBAAmB;AAmBrB,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoE;AAClE,QAAM,EAAE,YAAY,eAAe,IAAI;AAEvC,QAAM,SAAS;AAAA,IACb,CAAC,OAAe;AACd,UAAI,CAAC,WAAW,EAAE,EAAG,gBAAe,EAAE;AAAA,IACxC;AAAA,IACA,CAAC,YAAY,cAAc;AAAA,EAC7B;AAEA,QAAM,WAAW;AAAA,IACf,CAAC,OAAe;AACd,UAAI,WAAW,EAAE,EAAG,gBAAe,EAAE;AAAA,IACvC;AAAA,IACA,CAAC,YAAY,cAAc;AAAA,EAC7B;AAEA,SAAO;AAAA,IACL,CAAC,UAA+B;AAC9B,YAAM,gBAAiB,MAAM,QAA+B,YAAY;AACxE,YAAM,cAAc,iBAAiB,MAAM,MAAM,SAAS;AAC1D,YAAM,WAAW,sBAAsB,MAAM,KAAK,aAAa;AAAA,QAC7D,MAAM,MAAM;AAAA,QACZ,aAAa,MAAM;AAAA,QACnB,QAAQ,MAAM;AAAA,QACd;AAAA,QACA;AAAA,QACA,gBAAgB,MAAM;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,MAAM;AAAA,QACtB,mBAAmB,MAAM;AAAA,QACzB,QAAQ,QAAQ;AAAA,QAChB,QAAQ,QAAQ;AAAA,QAChB,MAAM,QAAQ;AAAA,MAChB,CAAC;AACD,UAAI,SAAU,OAAM,eAAe;AAAA,IACrC;AAAA,IACA,CAAC,OAAO,QAAQ,sBAAsB,gBAAgB,QAAQ,UAAU,OAAO;AAAA,EACjF;AACF;","names":[]}

package/dist/chunk-QCIWROKG.js

@@ -0,0 +1,75 @@
+import {
+  HEADING_SCALE,
+  headingMetrics
+} from "./chunk-7CA6GVBO.js";
+
+// src/components/typography/Heading/Heading.styles.ts
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return theme.palette.text.primary;
+  }
+  const colorMap = {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
+    danger: theme.palette.error.main
+  };
+  return colorMap[color];
+};
+var WEIGHTS = {
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var PRIMARY_STOPS = (theme) => [
+  theme.palette.primary.main,
+  theme.palette.secondary.main
+];
+var GRADIENT_STOPS = {
+  primary: PRIMARY_STOPS,
+  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
+  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
+  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  info: (theme) => [theme.palette.info.light, theme.palette.info.dark],
+  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
+  // The grey ramp has no light/dark pair, and every stop on it is
+  // `string | undefined` under `noUncheckedIndexedAccess`.
+  neutral: (theme) => [theme.palette.grey[500] ?? "#9e9e9e", theme.palette.grey[900] ?? "#212121"]
+};
+var gradientFor = (theme, color) => {
+  const [from, to] = GRADIENT_STOPS[color](theme);
+  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
+};
+var stepOf = (value) => value !== void 0 && value in HEADING_SCALE ? value : "h2";
+var headingSx = (theme, flags) => {
+  const { customSize, customColor = "neutral", customWeight = "bold", gradient } = flags;
+  const { normalWeight, ...metrics } = headingMetrics(theme, stepOf(customSize));
+  const base = {
+    fontFamily: theme.typography.h1.fontFamily,
+    margin: 0,
+    transition: "all 0.2s ease",
+    ...metrics,
+    fontWeight: customWeight === "normal" ? normalWeight : WEIGHTS[customWeight] ?? WEIGHTS.bold
+  };
+  if (!gradient) {
+    return { ...base, color: getColorFromTheme(theme, customColor) };
+  }
+  return {
+    ...base,
+    background: gradientFor(theme, customColor),
+    backgroundClip: "text",
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    MozBackgroundClip: "text",
+    MozTextFillColor: "transparent"
+  };
+};
+
+export {
+  headingSx
+};
+//# sourceMappingURL=chunk-QCIWROKG.js.map

package/dist/chunk-QCIWROKG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Heading/Heading.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { HeadingProps } from './Heading.types';\nimport { HEADING_SCALE, headingMetrics, type HeadingLevel } from '../../../tokens/typography';\nimport type { ColorValue } from '../../../tokens/scales';\n\ntype Weight = NonNullable<HeadingProps['weight']>;\n\n// Exhaustive over ColorValue, and deliberately without a fallback. The map\n// happened to hold all seven already, but it was `Record<string, string>` with\n// `|| text.primary` behind it — so nothing kept it that way, and the eighth\n// colour would have rendered as ordinary body text with no complaint. That is\n// the failure this whole vocabulary exists to make impossible; `Text` was\n// tightened the same way and this one was missed.\nconst getColorFromTheme = (theme: Theme, color: ColorValue): string => {\n  if (color === 'neutral') {\n    return theme.palette.text.primary;\n  }\n\n  const colorMap: Record<Exclude<ColorValue, 'neutral'>, string> = {\n    primary: theme.palette.primary.main,\n    secondary: theme.palette.secondary.main,\n    success: theme.palette.success.main,\n    warning: theme.palette.warning.main,\n    info: theme.palette.info.main,\n    danger: theme.palette.error.main,\n  };\n\n  return colorMap[color];\n};\n\nconst WEIGHTS: Record<Weight, number> = {\n  light: 300,\n  normal: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n};\n\n/** The two-stop gradient each colour paints its glyphs with. */\nconst PRIMARY_STOPS = (theme: Theme): [string, string] => [\n  theme.palette.primary.main,\n  theme.palette.secondary.main,\n];\n\n// Keyed over the whole vocabulary, with no `?? PRIMARY_STOPS` behind it. Two\n// stops were missing — `info` and `neutral` — so a gradient heading in either\n// colour painted the PRIMARY gradient and looked deliberate while ignoring the\n// prop entirely. The fallback is what hid it, so the fallback is gone.\nconst GRADIENT_STOPS: Record<ColorValue, (theme: Theme) => [string, string]> = {\n  primary: PRIMARY_STOPS,\n  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],\n  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],\n  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],\n  info: (theme) => [theme.palette.info.light, theme.palette.info.dark],\n  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],\n  // The grey ramp has no light/dark pair, and every stop on it is\n  // `string | undefined` under `noUncheckedIndexedAccess`.\n  neutral: (theme) => [theme.palette.grey[500] ?? '#9e9e9e', theme.palette.grey[900] ?? '#212121'],\n};\n\nconst gradientFor = (theme: Theme, color: ColorValue) => {\n  const [from, to] = GRADIENT_STOPS[color](theme);\n  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;\n};\n\nexport interface HeadingFlags {\n  /**\n   * The step of the scale to DRAW. Named `customSize` rather than `customLevel`\n   * because the rank is no longer what decides it — see `Heading.tsx`, which\n   * resolves `size ?? level` before it gets here. This file no longer knows\n   * which tag it is styling, and that is the point.\n   */\n  customSize?: string;\n  customColor?: ColorValue;\n  customWeight?: string;\n  gradient?: boolean;\n}\n\n/** A step name the scale actually has, or `h2` — the documented default. */\nconst stepOf = (value: string | undefined): HeadingLevel =>\n  value !== undefined && value in HEADING_SCALE ? (value as HeadingLevel) : 'h2';\n\nexport const headingSx = (theme: Theme, flags: HeadingFlags): CSSObject => {\n  const { customSize, customColor = 'neutral', customWeight = 'bold', gradient } = flags;\n  // From the THEME, with the package default underneath — never from a table in\n  // this file. A host's `createTheme({ typography: { headingScale } })` is what\n  // sets the house scale now; see `tokens/typography.ts` for why it is our own\n  // key rather than MUI's `typography.h1`.\n  const { normalWeight, ...metrics } = headingMetrics(theme, stepOf(customSize));\n\n  const base: CSSObject = {\n    fontFamily: theme.typography.h1.fontFamily,\n    margin: 0,\n    transition: 'all 0.2s ease',\n    ...metrics,\n    fontWeight:\n      customWeight === 'normal' ? normalWeight : (WEIGHTS[customWeight as Weight] ?? WEIGHTS.bold),\n  };\n\n  if (!gradient) {\n    return { ...base, color: getColorFromTheme(theme, customColor) };\n  }\n\n  // The gradient paints the glyphs themselves, so the text must draw no fill of\n  // its own for it to show through.\n  return {\n    ...base,\n    background: gradientFor(theme, customColor),\n    backgroundClip: 'text',\n    WebkitBackgroundClip: 'text',\n    WebkitTextFillColor: 'transparent',\n    MozBackgroundClip: 'text',\n    MozTextFillColor: 'transparent',\n  };\n};\n"],"mappings":";;;;;;AAcA,IAAM,oBAAoB,CAAC,OAAc,UAA8B;AACrE,MAAI,UAAU,WAAW;AACvB,WAAO,MAAM,QAAQ,KAAK;AAAA,EAC5B;AAEA,QAAM,WAA2D;AAAA,IAC/D,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,UAAU;AAAA,IACnC,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,MAAM,MAAM,QAAQ,KAAK;AAAA,IACzB,QAAQ,MAAM,QAAQ,MAAM;AAAA,EAC9B;AAEA,SAAO,SAAS,KAAK;AACvB;AAEA,IAAM,UAAkC;AAAA,EACtC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAGA,IAAM,gBAAgB,CAAC,UAAmC;AAAA,EACxD,MAAM,QAAQ,QAAQ;AAAA,EACtB,MAAM,QAAQ,UAAU;AAC1B;AAMA,IAAM,iBAAyE;AAAA,EAC7E,SAAS;AAAA,EACT,WAAW,CAAC,UAAU,CAAC,MAAM,QAAQ,UAAU,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EAC/E,SAAS,CAAC,UAAU,CAAC,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,QAAQ,IAAI;AAAA,EAC5E,SAAS,CAAC,UAAU,CAAC,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,QAAQ,IAAI;AAAA,EAC5E,MAAM,CAAC,UAAU,CAAC,MAAM,QAAQ,KAAK,OAAO,MAAM,QAAQ,KAAK,IAAI;AAAA,EACnE,QAAQ,CAAC,UAAU,CAAC,MAAM,QAAQ,MAAM,OAAO,MAAM,QAAQ,MAAM,IAAI;AAAA;AAAA;AAAA,EAGvE,SAAS,CAAC,UAAU,CAAC,MAAM,QAAQ,KAAK,GAAG,KAAK,WAAW,MAAM,QAAQ,KAAK,GAAG,KAAK,SAAS;AACjG;AAEA,IAAM,cAAc,CAAC,OAAc,UAAsB;AACvD,QAAM,CAAC,MAAM,EAAE,IAAI,eAAe,KAAK,EAAE,KAAK;AAC9C,SAAO,2BAA2B,IAAI,QAAQ,EAAE;AAClD;AAgBA,IAAM,SAAS,CAAC,UACd,UAAU,UAAa,SAAS,gBAAiB,QAAyB;AAErE,IAAM,YAAY,CAAC,OAAc,UAAmC;AACzE,QAAM,EAAE,YAAY,cAAc,WAAW,eAAe,QAAQ,SAAS,IAAI;AAKjF,QAAM,EAAE,cAAc,GAAG,QAAQ,IAAI,eAAe,OAAO,OAAO,UAAU,CAAC;AAE7E,QAAM,OAAkB;AAAA,IACtB,YAAY,MAAM,WAAW,GAAG;AAAA,IAChC,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,IACH,YACE,iBAAiB,WAAW,eAAgB,QAAQ,YAAsB,KAAK,QAAQ;AAAA,EAC3F;AAEA,MAAI,CAAC,UAAU;AACb,WAAO,EAAE,GAAG,MAAM,OAAO,kBAAkB,OAAO,WAAW,EAAE;AAAA,EACjE;AAIA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY,YAAY,OAAO,WAAW;AAAA,IAC1C,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB;AACF;","names":[]}

package/dist/chunk-QF6LTUCE.js

@@ -0,0 +1,78 @@
+// src/components/utility/InfiniteScroll/InfiniteScroll.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var resolveScrollable = (scrollableTarget) => {
+  if (!scrollableTarget) return null;
+  if (typeof scrollableTarget === "string") {
+    return document.getElementById(scrollableTarget) || document.querySelector(scrollableTarget);
+  }
+  return scrollableTarget;
+};
+var useSentinel = ({ testMode, threshold, scrollableTarget }) => {
+  const sentinelRef = useRef(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  useEffect(() => {
+    if (testMode || !sentinelRef.current) return;
+    const observer = new window.IntersectionObserver(
+      ([entry]) => {
+        if (entry) {
+          setIsIntersecting(entry.isIntersecting);
+        }
+      },
+      {
+        root: resolveScrollable(scrollableTarget) || void 0,
+        rootMargin: `${threshold}px`,
+        threshold: 0
+      }
+    );
+    observer.observe(sentinelRef.current);
+    return () => observer.disconnect();
+  }, [testMode, threshold, scrollableTarget]);
+  return { sentinelRef, isIntersecting };
+};
+var useLoadMore = ({
+  hasMore,
+  loading,
+  error,
+  loadMore,
+  onError,
+  isIntersecting,
+  testMode,
+  testTriggerRef
+}) => {
+  const loadingRef = useRef(false);
+  const handleLoadMore = useCallback(async () => {
+    if (loadingRef.current || !hasMore || error) {
+      return;
+    }
+    loadingRef.current = true;
+    try {
+      await loadMore();
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error("Unknown error");
+      onError?.(errorObj);
+    } finally {
+      loadingRef.current = false;
+    }
+  }, [hasMore, error, loadMore, onError]);
+  useEffect(() => {
+    if (testMode && testTriggerRef) {
+      testTriggerRef.current = handleLoadMore;
+    }
+    return () => {
+      if (testMode && testTriggerRef) {
+        testTriggerRef.current = void 0;
+      }
+    };
+  }, [testMode, testTriggerRef, handleLoadMore]);
+  useEffect(() => {
+    if (isIntersecting && hasMore && !loading && !error) {
+      handleLoadMore();
+    }
+  }, [isIntersecting, hasMore, loading, error, handleLoadMore]);
+};
+
+export {
+  useSentinel,
+  useLoadMore
+};
+//# sourceMappingURL=chunk-QF6LTUCE.js.map

package/dist/chunk-QF6LTUCE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/InfiniteScroll/InfiniteScroll.hooks.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { InfiniteScrollProps } from './InfiniteScroll.types';\n\ntype ScrollableTarget = InfiniteScrollProps['scrollableTarget'];\n\n/** A string target is looked up by id first, then as a selector. */\nconst resolveScrollable = (scrollableTarget: ScrollableTarget): Element | null => {\n  if (!scrollableTarget) return null;\n\n  if (typeof scrollableTarget === 'string') {\n    return (\n      document.getElementById(scrollableTarget) || document.querySelector(scrollableTarget)\n    );\n  }\n\n  return scrollableTarget;\n};\n\ninterface ObserverArgs {\n  testMode: boolean;\n  threshold: number;\n  scrollableTarget: ScrollableTarget;\n}\n\n/**\n * Watches a zero-size sentinel at the end of the list. `rootMargin` is what makes\n * it fire before the sentinel is actually on screen, so the next page is already\n * loading by the time the user reaches the bottom.\n */\nexport const useSentinel = ({ testMode, threshold, scrollableTarget }: ObserverArgs) => {\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const [isIntersecting, setIsIntersecting] = useState(false);\n\n  useEffect(() => {\n    if (testMode || !sentinelRef.current) return;\n\n    const observer = new window.IntersectionObserver(\n      ([entry]) => {\n        if (entry) {\n          setIsIntersecting(entry.isIntersecting);\n        }\n      },\n      {\n        root: resolveScrollable(scrollableTarget) || undefined,\n        rootMargin: `${threshold}px`,\n        threshold: 0,\n      },\n    );\n\n    observer.observe(sentinelRef.current);\n\n    return () => observer.disconnect();\n  }, [testMode, threshold, scrollableTarget]);\n\n  return { sentinelRef, isIntersecting };\n};\n\ntype LoadArgs = Pick<\n  InfiniteScrollProps,\n  'hasMore' | 'loading' | 'error' | 'loadMore' | 'onError' | 'testTriggerRef'\n> & {\n  isIntersecting: boolean;\n  testMode: boolean;\n};\n\n/**\n * A ref rather than state guards re-entry, so a second intersection landing while\n * the first `loadMore` is still in flight is dropped rather than queued.\n */\nexport const useLoadMore = ({\n  hasMore,\n  loading,\n  error,\n  loadMore,\n  onError,\n  isIntersecting,\n  testMode,\n  testTriggerRef,\n}: LoadArgs) => {\n  const loadingRef = useRef(false);\n\n  const handleLoadMore = useCallback(async () => {\n    if (loadingRef.current || !hasMore || error) {\n      return;\n    }\n\n    loadingRef.current = true;\n\n    try {\n      await loadMore();\n    } catch (err) {\n      const errorObj = err instanceof Error ? err : new Error('Unknown error');\n      onError?.(errorObj);\n    } finally {\n      loadingRef.current = false;\n    }\n  }, [hasMore, error, loadMore, onError]);\n\n  // Expose test trigger for test mode\n  useEffect(() => {\n    if (testMode && testTriggerRef) {\n      testTriggerRef.current = handleLoadMore;\n    }\n\n    return () => {\n      if (testMode && testTriggerRef) {\n        testTriggerRef.current = undefined;\n      }\n    };\n  }, [testMode, testTriggerRef, handleLoadMore]);\n\n  useEffect(() => {\n    if (isIntersecting && hasMore && !loading && !error) {\n      handleLoadMore();\n    }\n  }, [isIntersecting, hasMore, loading, error, handleLoadMore]);\n};\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAOzD,IAAM,oBAAoB,CAAC,qBAAuD;AAChF,MAAI,CAAC,iBAAkB,QAAO;AAE9B,MAAI,OAAO,qBAAqB,UAAU;AACxC,WACE,SAAS,eAAe,gBAAgB,KAAK,SAAS,cAAc,gBAAgB;AAAA,EAExF;AAEA,SAAO;AACT;AAaO,IAAM,cAAc,CAAC,EAAE,UAAU,WAAW,iBAAiB,MAAoB;AACtF,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAE1D,YAAU,MAAM;AACd,QAAI,YAAY,CAAC,YAAY,QAAS;AAEtC,UAAM,WAAW,IAAI,OAAO;AAAA,MAC1B,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,OAAO;AACT,4BAAkB,MAAM,cAAc;AAAA,QACxC;AAAA,MACF;AAAA,MACA;AAAA,QACE,MAAM,kBAAkB,gBAAgB,KAAK;AAAA,QAC7C,YAAY,GAAG,SAAS;AAAA,QACxB,WAAW;AAAA,MACb;AAAA,IACF;AAEA,aAAS,QAAQ,YAAY,OAAO;AAEpC,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,WAAW,gBAAgB,CAAC;AAE1C,SAAO,EAAE,aAAa,eAAe;AACvC;AAcO,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgB;AACd,QAAM,aAAa,OAAO,KAAK;AAE/B,QAAM,iBAAiB,YAAY,YAAY;AAC7C,QAAI,WAAW,WAAW,CAAC,WAAW,OAAO;AAC3C;AAAA,IACF;AAEA,eAAW,UAAU;AAErB,QAAI;AACF,YAAM,SAAS;AAAA,IACjB,SAAS,KAAK;AACZ,YAAM,WAAW,eAAe,QAAQ,MAAM,IAAI,MAAM,eAAe;AACvE,gBAAU,QAAQ;AAAA,IACpB,UAAE;AACA,iBAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,UAAU,OAAO,CAAC;AAGtC,YAAU,MAAM;AACd,QAAI,YAAY,gBAAgB;AAC9B,qBAAe,UAAU;AAAA,IAC3B;AAEA,WAAO,MAAM;AACX,UAAI,YAAY,gBAAgB;AAC9B,uBAAe,UAAU;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,gBAAgB,cAAc,CAAC;AAE7C,YAAU,MAAM;AACd,QAAI,kBAAkB,WAAW,CAAC,WAAW,CAAC,OAAO;AACnD,qBAAe;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,gBAAgB,SAAS,SAAS,OAAO,cAAc,CAAC;AAC9D;","names":[]}

package/dist/chunk-QFHUWD3C.js

@@ -0,0 +1,267 @@
+import {
+  DataViewsBoard
+} from "./chunk-3DQP6OPC.js";
+import {
+  SelectAllStrip
+} from "./chunk-2I5B5NNT.js";
+import {
+  ListCardGroup
+} from "./chunk-T4JGNZAR.js";
+import {
+  DENSITY_BOARD_SCALE,
+  DENSITY_ROW_PADDING,
+  cardScaleForZoom,
+  cardTargetWidthFor,
+  useDataViewsLayout
+} from "./chunk-HVIB6WMD.js";
+import {
+  cardGridTracks
+} from "./chunk-5VZPVDUF.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  DataGrid
+} from "./chunk-X5MPHXG5.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-grid-bodies.tsx
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GridBody({
+  rows,
+  columns,
+  getRowId,
+  selectedIds,
+  onChangeSelected,
+  sortBy,
+  onChangeSortBy,
+  sortMode,
+  rowPadding,
+  dataTestId,
+  emptyState
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        width: "100%",
+        overflowX: "auto",
+        mt: 1.5,
+        // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows
+        // tall regardless of rowHeight, so the DENSITY preference is applied
+        // here rather than through `rowHeight`, which it would fight.
+        "& .MuiTableCell-root": { py: rowPadding, fontSize: "0.8125rem" },
+        "& .MuiTableCell-head": { py: 0.5, fontSize: "0.75rem" }
+      },
+      children: /* @__PURE__ */ jsx(
+        DataGrid,
+        {
+          rows,
+          columns,
+          getRowId: (row) => getRowId(row),
+          virtualizeRows: false,
+          density: "compact",
+          rowHeight: 36,
+          headerHeight: 36,
+          selection: { mode: "multi", selectedRowIds: selectedIds, onChangeSelected },
+          sorting: { mode: sortMode, sortBy, onChangeSortBy },
+          "data-testid": dataTestId,
+          emptyState,
+          emptyText: copy.grid.emptyFilteredTitle
+        }
+      )
+    }
+  );
+}
+function CardBody({
+  rows,
+  renderCard,
+  getRowId,
+  selectedIds,
+  onToggleId,
+  targetCardWidth,
+  cardScale,
+  dataTestId,
+  emptyState
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: emptyState });
+  }
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        mt: 1.5,
+        display: "grid",
+        // Fixed inter-card gap — deliberately NOT scaled by the zoom slider, so
+        // only the cards grow while the space between them stays constant.
+        gap: 1.5,
+        ...cardGridTracks(targetCardWidth)
+      },
+      "data-testid": dataTestId ? `${dataTestId}-cards` : "data-views-cards",
+      children: rows.map((row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(default2, { children: renderCard(row, {
+          selected: selectedIds.has(id),
+          onToggleSelect: () => onToggleId(id),
+          scale: cardScale
+        }) }, id);
+      })
+    }
+  );
+}
+function ListBody({
+  rows,
+  renderListRow,
+  getRowId,
+  selectedIds,
+  onToggleId,
+  rowGap,
+  group,
+  density,
+  dataTestId,
+  emptyState
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: emptyState });
+  }
+  const testId = dataTestId ? `${dataTestId}-list` : "data-views-list";
+  const selectionFor = (id) => ({
+    selected: selectedIds.has(id),
+    onToggleSelect: () => onToggleId(id),
+    scale: 1
+  });
+  if (group) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: /* @__PURE__ */ jsx(
+      ListCardGroup,
+      {
+        cells: group.cells,
+        metaColumns: group.metaColumns,
+        rails: group.rails,
+        reserveGutters: group.reserveGutters,
+        density,
+        gap: rowGap,
+        dataTestId: testId,
+        children: rows.map((row) => {
+          const id = getRowId(row);
+          return /* @__PURE__ */ jsx(React.Fragment, { children: renderListRow(row, selectionFor(id)) }, id);
+        })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: { mt: 1.5, display: "flex", flexDirection: "column", gap: rowGap },
+      "data-testid": testId,
+      children: rows.map((row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(default2, { children: renderListRow(row, selectionFor(id)) }, id);
+      })
+    }
+  );
+}
+function Headerless({
+  c,
+  getRowId,
+  testIdPrefix,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectAllStrip,
+      {
+        rows: c.matched,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onChange: (next) => c.setSelectedIds(next),
+        testIdPrefix
+      }
+    ),
+    children
+  ] });
+}
+function headerlessBody({ c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }, { layout, zoom, density }) {
+  if (layout === "list" && renderListRow) {
+    return /* @__PURE__ */ jsx(
+      ListBody,
+      {
+        rows: c.matched,
+        renderListRow,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        rowGap: DENSITY_ROW_PADDING[density],
+        group: listGroup,
+        density,
+        dataTestId,
+        emptyState
+      }
+    );
+  }
+  if (layout === "board" && board && renderCard) {
+    return /* @__PURE__ */ jsx(
+      DataViewsBoard,
+      {
+        rows: c.matched,
+        board,
+        getRowId,
+        renderCard,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        cardScale: DENSITY_BOARD_SCALE[density],
+        dataTestId
+      }
+    );
+  }
+  if (layout === "cards" && renderCard) {
+    return /* @__PURE__ */ jsx(
+      CardBody,
+      {
+        rows: c.matched,
+        renderCard,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        targetCardWidth: cardTargetWidthFor(zoom, density),
+        cardScale: cardScaleForZoom(zoom),
+        dataTestId,
+        emptyState
+      }
+    );
+  }
+  return null;
+}
+function GridMain(props) {
+  const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;
+  const layoutState = useDataViewsLayout();
+  const body = headerlessBody(props, layoutState);
+  if (body) {
+    return /* @__PURE__ */ jsx(Headerless, { c, getRowId, testIdPrefix, children: body });
+  }
+  return /* @__PURE__ */ jsx(
+    GridBody,
+    {
+      rows: c.matched,
+      columns: c.gridColumns,
+      getRowId,
+      selectedIds: [...c.selectedIds],
+      onChangeSelected: (ids) => c.setSelectedIds(new Set(ids)),
+      sortBy: c.state.sortBy,
+      onChangeSortBy: (next) => c.patch({ sortBy: next }),
+      sortMode: c.serverMode ? "server" : "client",
+      rowPadding: DENSITY_ROW_PADDING[layoutState.density],
+      dataTestId,
+      emptyState
+    }
+  );
+}
+
+export {
+  GridMain
+};
+//# sourceMappingURL=chunk-QFHUWD3C.js.map

package/dist/chunk-QFHUWD3C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-grid-bodies.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\nimport { DataGrid, type GridColumn, type GridSort } from \"../DataGrid\";\nimport { Box } from \"../../../mui/Box\";\n\nimport {\n  cardTargetWidthFor,\n  cardScaleForZoom,\n  DENSITY_BOARD_SCALE,\n  DENSITY_ROW_PADDING,\n  useDataViewsLayout,\n  type DataViewsDensity,\n} from \"./data-views-layout-context\";\nimport { cardGridTracks } from \"./data-views-grid-helpers\";\nimport { DataViewsBoard, type BoardConfig } from \"./DataViewsBoard\";\nimport { SelectAllStrip } from \"./data-views-select-all-strip\";\nimport { ListCardGroup, type ListGroupConfig } from \"./list-card-rails\";\nimport type { DataViewCardSelection } from \"./data-views-types\";\nimport type { DataViewsController } from \"./use-data-views-state\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/* ── Body (grid) ─────────────────────────────────────────────────────────── */\n\ninterface GridBodyProps<T extends Record<string, unknown>> {\n  rows: T[];\n  columns: GridColumn<T>[];\n  getRowId: (row: T) => string | number;\n  selectedIds: Array<string | number>;\n  onChangeSelected: (ids: Array<string | number>) => void;\n  sortBy: GridSort[];\n  onChangeSortBy: (next: GridSort[]) => void;\n  /** \"server\" defers ordering to the backend (rows render as-is); \"client\" sorts in-grid. */\n  sortMode: \"client\" | \"server\";\n  /** Vertical cell padding, from the density preference. */\n  rowPadding: number;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n}\n\n/** The dense DataGrid with multi-select, wrapped in the scrollable table region. */\nfunction GridBody<T extends Record<string, unknown>>({\n  rows,\n  columns,\n  getRowId,\n  selectedIds,\n  onChangeSelected,\n  sortBy,\n  onChangeSortBy,\n  sortMode,\n  rowPadding,\n  dataTestId,\n  emptyState,\n}: GridBodyProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box\n      sx={{\n        width: \"100%\",\n        overflowX: \"auto\",\n        mt: 1.5,\n        // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows\n        // tall regardless of rowHeight, so the DENSITY preference is applied\n        // here rather than through `rowHeight`, which it would fight.\n        \"& .MuiTableCell-root\": { py: rowPadding, fontSize: \"0.8125rem\" },\n        \"& .MuiTableCell-head\": { py: 0.5, fontSize: \"0.75rem\" },\n      }}\n    >\n      <DataGrid<T>\n        rows={rows}\n        columns={columns}\n        getRowId={(row) => getRowId(row)}\n        virtualizeRows={false}\n        density=\"compact\"\n        rowHeight={36}\n        headerHeight={36}\n        selection={{ mode: \"multi\", selectedRowIds: selectedIds, onChangeSelected }}\n        sorting={{ mode: sortMode, sortBy, onChangeSortBy }}\n        data-testid={dataTestId}\n        emptyState={emptyState}\n        emptyText={copy.grid.emptyFilteredTitle}\n      />\n    </Box>\n  );\n}\n\n/* ── Body (cards) ────────────────────────────────────────────────────────── */\n\ninterface CardBodyProps<T extends Record<string, unknown>> {\n  rows: T[];\n  renderCard: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  getRowId: (row: T) => string | number;\n  selectedIds: Set<string | number>;\n  onToggleId: (id: string | number) => void;\n  /** The width each card asks for; `auto-fill` turns it into a column count. */\n  targetCardWidth: number;\n  /** Content scale (padding + type) handed to each card, from the zoom slider. */\n  cardScale: number;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n}\n\n/**\n * The \"Grade\" layout: the filtered/sorted rows rendered as an auto-filling grid\n * of entity-supplied cards. Reuses `rows` (= `c.matched`), so search/filter/sort\n * apply; the column width comes from the zoom slider, and each card is handed its\n * selection state so it can drive its own checkbox (BaseCard) — the same\n * selection model as the table.\n */\nfunction CardBody<T extends Record<string, unknown>>({\n  rows,\n  renderCard,\n  getRowId,\n  selectedIds,\n  onToggleId,\n  targetCardWidth,\n  cardScale,\n  dataTestId,\n  emptyState,\n}: CardBodyProps<T>): React.JSX.Element {\n  if (rows.length === 0) {\n    return <Box sx={{ mt: 1.5 }}>{emptyState}</Box>;\n  }\n  return (\n    <Box\n      sx={{\n        mt: 1.5,\n        display: \"grid\",\n        // Fixed inter-card gap — deliberately NOT scaled by the zoom slider, so\n        // only the cards grow while the space between them stays constant.\n        gap: 1.5,\n        ...cardGridTracks(targetCardWidth),\n      }}\n      data-testid={dataTestId ? `${dataTestId}-cards` : \"data-views-cards\"}\n    >\n      {rows.map((row) => {\n        const id = getRowId(row);\n        return (\n          <Box key={id}>\n            {renderCard(row, {\n              selected: selectedIds.has(id),\n              onToggleSelect: () => onToggleId(id),\n              scale: cardScale,\n            })}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n}\n\n/* ── Body (list) ─────────────────────────────────────────────────────────── */\n\ninterface ListBodyProps<T extends Record<string, unknown>> {\n  rows: T[];\n  renderListRow: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  getRowId: (row: T) => string | number;\n  selectedIds: Set<string | number>;\n  onToggleId: (id: string | number) => void;\n  /** Gap between rows, from the density preference. */\n  rowGap: number;\n  /** The list's shared column config. See {@link ListGroupConfig}. */\n  group?: ListGroupConfig<T>;\n  /** The density every row answers, handed to the group when there is one. */\n  density: DataViewsDensity;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n}\n\n/**\n * The \"Lista\" layout: one FULL-WIDTH row per record, rendered by the entity — a\n * marker, a title, a subtitle and a value on the right is the shape it was\n * designed for (FUT-733).\n *\n * It sits between the table and the cards rather than replacing either: the\n * table is for comparing many columns, the cards are for browsing, and the list\n * is for scanning a queue on a narrow screen. Selection is the SAME model as\n * both — each row receives its selection state, so it can drive its own\n * checkbox and the bulk menu behaves identically in every layout.\n *\n * `scale` is handed over as 1 rather than the zoom multiplier, and the zoom\n * slider is hidden in this layout: a full-width row has no card size to\n * multiply. See {@link DataViewsZoomSlider}.\n */\nfunction ListBody<T extends Record<string, unknown>>({\n  rows,\n  renderListRow,\n  getRowId,\n  selectedIds,\n  onToggleId,\n  rowGap,\n  group,\n  density,\n  dataTestId,\n  emptyState,\n}: ListBodyProps<T>): React.JSX.Element {\n  if (rows.length === 0) {\n    return <Box sx={{ mt: 1.5 }}>{emptyState}</Box>;\n  }\n  const testId = dataTestId ? `${dataTestId}-list` : \"data-views-list\";\n  const selectionFor = (id: string | number): DataViewCardSelection => ({\n    selected: selectedIds.has(id),\n    onToggleSelect: () => onToggleId(id),\n    scale: 1,\n  });\n\n  if (group) {\n    return (\n      <Box sx={{ mt: 1.5 }}>\n        <ListCardGroup\n          cells={group.cells}\n          metaColumns={group.metaColumns}\n          rails={group.rails}\n          reserveGutters={group.reserveGutters}\n          density={density}\n          gap={rowGap}\n          dataTestId={testId}\n        >\n          {rows.map((row) => {\n            const id = getRowId(row);\n            // A FRAGMENT, NOT A BOX. The row is subgrid over the group's tracks\n            // (`gridColumn: span railCount`), which only resolves while the card\n            // is a DIRECT child of the group's grid. One wrapper element and the\n            // span is measured against a grid that isn't there, so every rail\n            // collapses — the exact failure the group exists to prevent.\n            return (\n              <React.Fragment key={id}>\n                {renderListRow(row, selectionFor(id))}\n              </React.Fragment>\n            );\n          })}\n        </ListCardGroup>\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      sx={{ mt: 1.5, display: \"flex\", flexDirection: \"column\", gap: rowGap }}\n      data-testid={testId}\n    >\n      {rows.map((row) => {\n        const id = getRowId(row);\n        return <Box key={id}>{renderListRow(row, selectionFor(id))}</Box>;\n      })}\n    </Box>\n  );\n}\n\n/* ── Body selector (board vs list vs cards vs table, from context) ───────── */\n\ninterface GridMainProps<T extends Record<string, unknown>> {\n  c: DataViewsController<T>;\n  getRowId: (row: T) => string | number;\n  renderCard?: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  /** Opt-in \"Lista\" layout — one full-width row per record. */\n  renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  /** The Lista's shared columns. Omitted, each row resolves its own tracks. */\n  listGroup?: ListGroupConfig<T>;\n  /** Opt-in \"Quadro\" (board) layout — needs `renderCard`, since it reuses the card. */\n  board?: BoardConfig<T>;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n  testIdPrefix: string;\n}\n\n/**\n * The headerless layouts, each preceded by its own select-all.\n *\n * The strip is rendered HERE rather than inside each body so all three agree on\n * where it sits and what it says — and so the table, which already has one in\n * its `<thead>`, never gets a second.\n */\nfunction Headerless<T extends Record<string, unknown>>({\n  c,\n  getRowId,\n  testIdPrefix,\n  children,\n}: {\n  c: DataViewsController<T>;\n  getRowId: (row: T) => string | number;\n  testIdPrefix: string;\n  children: React.ReactNode;\n}): React.JSX.Element {\n  return (\n    <>\n      <SelectAllStrip\n        rows={c.matched}\n        getRowId={getRowId}\n        selectedIds={c.selectedIds}\n        onChange={(next) => c.setSelectedIds(next)}\n        testIdPrefix={testIdPrefix}\n      />\n      {children}\n    </>\n  );\n}\n\n/**\n * The body for one of the three HEADERLESS layouts, or `null` for the table.\n *\n * Split out from {@link GridMain} so the select-all strip is wrapped around the\n * result exactly once instead of being repeated identically in every branch —\n * which is also what keeps either function inside the line budget.\n */\nfunction headerlessBody<T extends Record<string, unknown>>(\n  { c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }: GridMainProps<T>,\n  { layout, zoom, density }: ReturnType<typeof useDataViewsLayout>,\n): React.ReactNode | null {\n  if (layout === \"list\" && renderListRow) {\n    return (\n      <ListBody\n        rows={c.matched}\n        renderListRow={renderListRow}\n        getRowId={getRowId}\n        selectedIds={c.selectedIds}\n        onToggleId={c.toggleId}\n        rowGap={DENSITY_ROW_PADDING[density]}\n        group={listGroup}\n        density={density}\n        dataTestId={dataTestId}\n        emptyState={emptyState}\n      />\n    );\n  }\n  if (layout === \"board\" && board && renderCard) {\n    return (\n      <DataViewsBoard\n        rows={c.matched}\n        board={board}\n        getRowId={getRowId}\n        renderCard={renderCard}\n        selectedIds={c.selectedIds}\n        onToggleId={c.toggleId}\n        // DENSITY, not zoom: the board's own knob in the Exibição tab is how\n        // wide its columns are, and it is the only sizing control the board\n        // has since the zoom slider was removed.\n        cardScale={DENSITY_BOARD_SCALE[density]}\n        dataTestId={dataTestId}\n      />\n    );\n  }\n  if (layout === \"cards\" && renderCard) {\n    return (\n      <CardBody\n        rows={c.matched}\n        renderCard={renderCard}\n        getRowId={getRowId}\n        selectedIds={c.selectedIds}\n        onToggleId={c.toggleId}\n        targetCardWidth={cardTargetWidthFor(zoom, density)}\n        cardScale={cardScaleForZoom(zoom)}\n        dataTestId={dataTestId}\n        emptyState={emptyState}\n      />\n    );\n  }\n  return null;\n}\n\n/** Picks the body from the layout context: board, list, cards, or the dense grid. */\nexport function GridMain<T extends Record<string, unknown>>(props: GridMainProps<T>): React.JSX.Element {\n  const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;\n  const layoutState = useDataViewsLayout();\n  const body = headerlessBody(props, layoutState);\n  if (body) {\n    return (\n      <Headerless c={c} getRowId={getRowId} testIdPrefix={testIdPrefix}>\n        {body}\n      </Headerless>\n    );\n  }\n  return (\n    <GridBody\n      rows={c.matched}\n      columns={c.gridColumns}\n      getRowId={getRowId}\n      selectedIds={[...c.selectedIds]}\n      onChangeSelected={(ids) => c.setSelectedIds(new Set(ids))}\n      sortBy={c.state.sortBy}\n      onChangeSortBy={(next: GridSort[]) => c.patch({ sortBy: next })}\n      sortMode={c.serverMode ? \"server\" : \"client\"}\n      rowPadding={DENSITY_ROW_PADDING[layoutState.density]}\n      dataTestId={dataTestId}\n      emptyState={emptyState}\n    />\n  );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/chunk-QIV73V2X.js

@@ -0,0 +1,167 @@
+import {
+  AvatarView
+} from "./chunk-LYNJJV2X.js";
+
+// src/components/data-display/Avatar/Avatar.tsx
+import BrokenImage from "@mui/icons-material/BrokenImage";
+import Person from "@mui/icons-material/Person";
+import { styled } from "@mui/material/styles/index.js";
+import React, { useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AVATAR_DEFAULTS = {
+  variant: "circle",
+  size: "md",
+  glow: false,
+  pulse: false,
+  bordered: false,
+  color: "primary",
+  loading: false,
+  interactive: false,
+  showFallbackOnError: true,
+  animationDelay: 0
+};
+function resolveContent(args) {
+  const { children, fallback, icon, imageError, showFallbackOnError } = args;
+  if (imageError && showFallbackOnError) {
+    if (fallback) return { content: fallback, contentType: "fallback" };
+    if (icon) return { content: icon, contentType: "icon" };
+    return { content: /* @__PURE__ */ jsx(BrokenImage, {}), contentType: "icon" };
+  }
+  if (children) return { content: children, contentType: "children" };
+  if (fallback) return { content: fallback, contentType: "fallback" };
+  if (icon) return { content: icon, contentType: "icon" };
+  return { content: /* @__PURE__ */ jsx(Person, {}), contentType: "default" };
+}
+function useMountedFade(animationDelay) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const timer = window.setTimeout(() => setMounted(true), animationDelay);
+    return () => window.clearTimeout(timer);
+  }, [animationDelay]);
+  return mounted;
+}
+function useImageState(src, onError) {
+  const [imageError, setImageError] = useState(false);
+  const [imageLoading, setImageLoading] = useState(!!src);
+  useEffect(() => {
+    setImageError(false);
+    setImageLoading(!!src);
+  }, [src]);
+  const handleImageError = useCallback(
+    (event) => {
+      setImageError(true);
+      setImageLoading(false);
+      onError?.(event);
+    },
+    [onError]
+  );
+  const handleImageLoad = useCallback(() => setImageLoading(false), []);
+  return { imageError, imageLoading, handleImageError, handleImageLoad };
+}
+function useAvatarModel(raw, ref) {
+  const {
+    variant,
+    size,
+    glow,
+    pulse,
+    status,
+    fallback,
+    icon,
+    bordered,
+    color,
+    src,
+    alt,
+    children,
+    loading,
+    onError,
+    onClick,
+    interactive,
+    showFallbackOnError,
+    animationDelay,
+    className,
+    dataTestId,
+    ...rest
+  } = { ...AVATAR_DEFAULTS, ...raw };
+  const mounted = useMountedFade(animationDelay);
+  const { imageError, imageLoading, handleImageError, handleImageLoad } = useImageState(src, onError);
+  const handleClick = useCallback(
+    (event) => onClick?.(event),
+    [onClick]
+  );
+  const { content, contentType } = resolveContent({
+    children,
+    fallback,
+    icon,
+    imageError,
+    showFallbackOnError
+  });
+  return {
+    mounted,
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    bordered,
+    showSpinner: loading || imageLoading,
+    imageError,
+    clickable: interactive || !!onClick,
+    imgSrc: imageError ? void 0 : src,
+    alt,
+    ariaLabel: rest["aria-label"] || alt || "Avatar",
+    content,
+    contentType,
+    className,
+    dataTestId,
+    status,
+    forwardedRef: ref,
+    onClick: handleClick,
+    handleImageError,
+    handleImageLoad,
+    rest
+  };
+}
+var Avatar = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(AvatarView, { ...useAvatarModel(props, ref) }));
+Avatar.displayName = "Avatar";
+var AvatarGroupContainer = styled("div")(({ theme, overlap = 8 }) => ({
+  display: "flex",
+  alignItems: "center",
+  "& > *": {
+    marginLeft: -overlap,
+    transition: "all 0.3s ease",
+    position: "relative",
+    border: `2px solid ${theme.palette.background.paper}`,
+    "&:hover": {
+      zIndex: 100,
+      transform: "scale(1.1) translateY(-4px)"
+    },
+    "&:first-of-type": {
+      marginLeft: 0
+    }
+  }
+}));
+var AvatarGroup = ({ children, max = 4, overlap = 8, className, dataTestId }) => {
+  const childrenArray = React.Children.toArray(children);
+  const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
+  const remainingCount = childrenArray.length - visibleChildren.length;
+  return /* @__PURE__ */ jsxs(AvatarGroupContainer, { overlap, className, "data-testid": dataTestId, children: [
+    visibleChildren,
+    remainingCount > 0 && /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        size: visibleChildren[0]?.props?.size || "md",
+        color: "neutral",
+        fallback: `+${remainingCount}`,
+        bordered: true,
+        dataTestId: dataTestId ? `${dataTestId}-overflow` : void 0
+      }
+    )
+  ] });
+};
+AvatarGroup.displayName = "AvatarGroup";
+
+export {
+  Avatar,
+  AvatarGroup
+};
+//# sourceMappingURL=chunk-QIV73V2X.js.map