@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-LWYXMCX6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryPanel.tsx"],"sourcesContent":["'use client';\n\nimport type { CategorySelectCopy } from \"../../../copy\";\nimport Box from '@mui/material/Box/index.js';\n\nimport { removeChip } from './category-tree';\nimport { CategoryMultiFoot, CategorySingleFoot } from './CategoryPanelFoot';\nimport { CategoryPanelHead, CategoryPinnedTray } from './CategoryPanelHead';\nimport { CategoryPanelList } from './CategoryPanelList';\nimport { CategoryQuickActions } from './CategoryQuickActions';\nimport { panelSx, sheetSx } from './CategorySelect.styles';\nimport type { CategoryGroup, CategorySelectionChip } from './CategorySelect.types';\nimport type { CategorySelectState } from './useCategorySelect';\n\nexport interface CategoryPanelProps {\n  /** The words this panel renders. REQUIRED — no default copy. */\n  copy: CategorySelectCopy;\n  state: CategorySelectState;\n  chips: CategorySelectionChip[];\n  rowIds: string[];\n  /** True when the applied selection differs from the draft. */\n  changed: boolean;\n  single: boolean;\n  sheet: boolean;\n  loading: boolean;\n  showCounts: boolean;\n  allowParentSelection: boolean;\n  ariaLabel: string;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  onActivateCategory: (group: CategoryGroup) => void;\n  onActivateSubcategory: (id: string) => void;\n  onApply: () => void;\n  onCancel: () => void;\n  onCreateCategory?: () => void;\n  searchInputRef: React.RefObject<HTMLInputElement | null>;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  dataTestId: string;\n}\n\n/** Search + pinned selection + tree + footer, in the panel's own chrome. */\nexport function CategoryPanel({\n  state,\n  chips,\n  rowIds,\n  changed,\n  single,\n  sheet,\n  loading,\n  showCounts,\n  allowParentSelection,\n  ariaLabel,\n  onKeyDown,\n  onActivateCategory,\n  onActivateSubcategory,\n  onApply,\n  onCancel,\n  onCreateCategory,\n  searchInputRef,\n  listRef,\n  dataTestId,\n  copy,\n}: CategoryPanelProps): React.JSX.Element {\n  return (\n    <Box\n      onKeyDown={onKeyDown}\n      role=\"dialog\"\n      aria-label={ariaLabel}\n      data-testid={`${dataTestId}-panel`}\n      sx={(theme) => ({ ...panelSx(theme), ...(sheet ? sheetSx(theme) : {}) })}\n    >\n      <CategoryPanelHead\n        copy={copy}\n        query={state.query}\n        placeholder={single ? copy.search.placeholderSingle : copy.search.placeholderMulti}\n        sheet={sheet}\n        quickActions={\n          single ? undefined : <CategoryQuickActions state={state} dataTestId={dataTestId} copy={copy} />\n        }\n        onQueryChange={state.setQuery}\n        searchInputRef={searchInputRef}\n        dataTestId={dataTestId}\n      />\n      {!single && !loading && (\n        <PinnedTray state={state} chips={chips} dataTestId={dataTestId} copy={copy} />\n      )}\n      <CategoryPanelList copy={copy}\n        groups={state.visibleGroups}\n        query={state.query}\n        draft={state.draft}\n        rowIds={rowIds}\n        activeIndex={state.activeIndex}\n        sheet={sheet}\n        single={single}\n        loading={loading}\n        showCounts={showCounts}\n        allowParentSelection={allowParentSelection}\n        isExpanded={state.isExpanded}\n        onToggleExpanded={state.toggleExpanded}\n        onActivateCategory={onActivateCategory}\n        onActivateSubcategory={onActivateSubcategory}\n        onClearQuery={() => state.setQuery('')}\n        onCreateCategory={onCreateCategory}\n        listRef={listRef}\n        dataTestId={dataTestId}\n      />\n      <PanelFooter\n        state={state}\n        changed={changed}\n        single={single}\n        sheet={sheet}\n        copy={copy}\n        onApply={onApply}\n        onCancel={onCancel}\n        dataTestId={dataTestId}\n      />\n    </Box>\n  );\n}\n\n/** The selected-category chips, wired to remove from the draft. */\nfunction PinnedTray({\n  state,\n  chips,\n  dataTestId,\n  copy,\n}: Pick<CategoryPanelProps, 'state' | 'chips' | 'dataTestId' | 'copy'>): React.JSX.Element {\n  return (\n    <CategoryPinnedTray\n      copy={copy}\n      chips={chips}\n      onRemove={(chipId) => state.setDraft(removeChip(state.allGroups, chipId, state.draft))}\n      dataTestId={dataTestId}\n    />\n  );\n}\n\n/** Whichever footer the mode calls for. */\nfunction PanelFooter({\n  state,\n  changed,\n  single,\n  sheet,\n  onApply,\n  onCancel,\n  dataTestId,\n  copy,\n}: Pick<\n  CategoryPanelProps,\n  'state' | 'changed' | 'single' | 'sheet' | 'onApply' | 'onCancel' | 'dataTestId' | 'copy'\n>): React.JSX.Element {\n  if (single) {\n    return (\n      <CategorySingleFoot sheet={sheet} onCancel={onCancel} dataTestId={dataTestId} copy={copy} />\n    );\n  }\n  return (\n    <CategoryMultiFoot\n      count={state.draft.size}\n      changed={changed}\n      sheet={sheet}\n      copy={copy}\n      onClear={() => state.setDraft(new Set())}\n      onApply={onApply}\n      dataTestId={dataTestId}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGA,OAAO,SAAS;AA4DZ,SAa2B,KAb3B;AAvBG,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa,GAAG,UAAU;AAAA,MAC1B,IAAI,CAAC,WAAW,EAAE,GAAG,QAAQ,KAAK,GAAG,GAAI,QAAQ,QAAQ,KAAK,IAAI,CAAC,EAAG;AAAA,MAEtE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO,MAAM;AAAA,YACb,aAAa,SAAS,KAAK,OAAO,oBAAoB,KAAK,OAAO;AAAA,YAClE;AAAA,YACA,cACE,SAAS,SAAY,oBAAC,wBAAqB,OAAc,YAAwB,MAAY;AAAA,YAE/F,eAAe,MAAM;AAAA,YACrB;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACC,CAAC,UAAU,CAAC,WACX,oBAAC,cAAW,OAAc,OAAc,YAAwB,MAAY;AAAA,QAE9E;AAAA,UAAC;AAAA;AAAA,YAAkB;AAAA,YACjB,QAAQ,MAAM;AAAA,YACd,OAAO,MAAM;AAAA,YACb,OAAO,MAAM;AAAA,YACb;AAAA,YACA,aAAa,MAAM;AAAA,YACnB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,MAAM;AAAA,YAClB,kBAAkB,MAAM;AAAA,YACxB;AAAA,YACA;AAAA,YACA,cAAc,MAAM,MAAM,SAAS,EAAE;AAAA,YACrC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2F;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,CAAC,WAAW,MAAM,SAAS,WAAW,MAAM,WAAW,QAAQ,MAAM,KAAK,CAAC;AAAA,MACrF;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGsB;AACpB,MAAI,QAAQ;AACV,WACE,oBAAC,sBAAmB,OAAc,UAAoB,YAAwB,MAAY;AAAA,EAE9F;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM,MAAM,SAAS,oBAAI,IAAI,CAAC;AAAA,MACvC;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-LYKV3C7B.js

@@ -0,0 +1,203 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-scopes.tsx
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function resolveScope(scopes, stored) {
+  if (scopes.length === 0) return void 0;
+  const declared = stored !== void 0 && scopes.some((scope) => scope.id === stored);
+  return declared ? stored : scopes[0]?.id;
+}
+function isDevelopment() {
+  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+}
+function assertNoScopePillOverlap(scopes, fieldIds, scopeFieldId) {
+  if (scopes.length === 0 || !isDevelopment()) return;
+  const clash = scopeFieldId !== void 0 && fieldIds.includes(scopeFieldId) ? scopeFieldId : void 0;
+  if (clash === void 0) return;
+  throw new Error(
+    `DataViews: the field "${clash}" is both the scope partition (scopes: ${scopes.map((scope) => scope.id).join(", ")}) and a filter field (fields: ${fieldIds.join(", ")}). A field may drive the scope tabs or a filter pill, not both \u2014 drop one of the two declarations.`
+  );
+}
+function warnScopesNeedServer(scopes, hasServer) {
+  if (scopes.length === 0 || hasServer || !isDevelopment()) return;
+  console.warn(
+    "DataViews: `scopes` require server mode. The scope is tracked and would be emitted, but with no `server` there is nothing to emit it to and rows are NOT filtered in the browser. Supply `server` (see DataViewServer) or drop the scopes."
+  );
+}
+function useScopeConfigChecks(scopes, fieldIds, scopeFieldId, hasServer) {
+  useMemo(() => {
+    assertNoScopePillOverlap(scopes, fieldIds, scopeFieldId);
+    warnScopesNeedServer(scopes, hasServer);
+  }, [scopes, fieldIds.join(","), scopeFieldId, hasServer]);
+}
+function tabLabel(label, count) {
+  return count === void 0 ? label : `${label}, ${count}`;
+}
+function arrowTarget(key, index, total) {
+  if (key === "ArrowRight") return (index + 1) % total;
+  if (key === "ArrowLeft") return (index - 1 + total) % total;
+  if (key === "Home") return 0;
+  if (key === "End") return total - 1;
+  return null;
+}
+function useScrollActiveIntoView(value) {
+  const stripRef = useRef(null);
+  useEffect(() => {
+    const strip = stripRef.current;
+    if (!strip || value === void 0) return;
+    const active = strip.querySelector('[role="tab"][aria-selected="true"]');
+    active?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [value]);
+  return stripRef;
+}
+function scopeTabSx(active) {
+  return {
+    // A 44px min target: the strip is the first thing a thumb reaches on a phone.
+    minHeight: 44,
+    px: 1.5,
+    py: 1,
+    border: 0,
+    borderBottom: 2,
+    borderStyle: "solid",
+    borderColor: active ? "primary.main" : "transparent",
+    background: "none",
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+    font: "inherit",
+    fontSize: "0.8125rem",
+    fontWeight: active ? 600 : 400,
+    color: active ? "primary.main" : "text.secondary",
+    "&:hover": { color: active ? "primary.main" : "text.primary" },
+    "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: -2 }
+  };
+}
+function ScopeCount({
+  count,
+  active,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "span",
+      "aria-hidden": "true",
+      "data-testid": testId,
+      sx: {
+        ml: 0.75,
+        px: 0.75,
+        borderRadius: 5,
+        fontSize: "0.6875rem",
+        fontWeight: 600,
+        bgcolor: active ? "primary.main" : "action.selected",
+        color: active ? "primary.contrastText" : "text.secondary"
+      },
+      children: count
+    }
+  );
+}
+function ScopeTab({
+  scope,
+  index,
+  total,
+  active,
+  count,
+  onChange,
+  moveTo,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      role: "tab",
+      id: `${testIdPrefix}-scope-tab-${scope.id}`,
+      "aria-selected": active,
+      tabIndex: active ? 0 : -1,
+      "aria-label": tabLabel(scope.label, count),
+      "data-testid": `${testIdPrefix}-scope-${scope.id}`,
+      onClick: () => onChange(scope.id),
+      onKeyDown: (event) => {
+        const target = arrowTarget(event.key, index, total);
+        if (target === null) return;
+        event.preventDefault();
+        moveTo(target);
+      },
+      sx: scopeTabSx(active),
+      children: [
+        scope.label,
+        count !== void 0 && /* @__PURE__ */ jsx(
+          ScopeCount,
+          {
+            count,
+            active,
+            testId: `${testIdPrefix}-scope-count-${scope.id}`
+          }
+        )
+      ]
+    }
+  );
+}
+var STRIP_SX = {
+  display: "flex",
+  alignItems: "stretch",
+  gap: 0.5,
+  // One row that scrolls — never wraps, never collapses into a select.
+  flexWrap: "nowrap",
+  overflowX: "auto",
+  overflowY: "hidden",
+  scrollbarWidth: "thin",
+  borderBottom: 1,
+  borderColor: "divider",
+  mx: { xs: -2, md: -3 },
+  px: { xs: 2, md: 3 }
+};
+function DataViewsScopeTabs({
+  scopes,
+  value,
+  onChange,
+  counts,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const stripRef = useScrollActiveIntoView(value);
+  const moveTo = (index) => {
+    stripRef.current?.querySelectorAll('[role="tab"]')?.[index]?.focus();
+    const next = scopes[index];
+    if (next) onChange(next.id);
+  };
+  if (scopes.length === 0) return null;
+  const activeIndex = Math.max(
+    0,
+    scopes.findIndex((scope) => scope.id === value)
+  );
+  return /* @__PURE__ */ jsx(default2, { ref: stripRef, role: "tablist", "aria-label": copy.filters.scopesLabel, "data-testid": `${testIdPrefix}-scopes`, sx: STRIP_SX, children: scopes.map((scope, index) => /* @__PURE__ */ jsx(
+    ScopeTab,
+    {
+      scope,
+      index,
+      total: scopes.length,
+      active: index === activeIndex,
+      count: counts?.[scope.id],
+      onChange,
+      moveTo,
+      testIdPrefix
+    },
+    scope.id
+  )) });
+}
+
+export {
+  resolveScope,
+  assertNoScopePillOverlap,
+  warnScopesNeedServer,
+  useScopeConfigChecks,
+  DataViewsScopeTabs
+};
+//# sourceMappingURL=chunk-LYKV3C7B.js.map

package/dist/chunk-LYKV3C7B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-scopes.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef } from \"react\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Box } from \"../../../mui/Box\";\n\n/**\n * SCOPES — a page-level partition rendered as a strip of tabs under the toolbar.\n *\n * A scope is not a filter. Filters NARROW within the current partition and are\n * multi-select by design; a scope PARTITIONS and is exclusive. The distinction\n * is load-bearing for three reasons, and each is why `FilterFieldConfig` could\n * not express these tabs:\n *\n *   1. They are mutually exclusive, and a pill is not.\n *   2. They carry counts of the WHOLE query, which no client can compute under\n *      pagination — the count has to come off the response\n *      ({@link DataViewServer.scopeCounts}).\n *   3. They compose with the filters instead of competing with them: the scope\n *      picks the bucket, the pills narrow inside it.\n *\n * The `predicate` is deliberately opaque to this package. Only the host knows\n * what \"recusados\" selects; the component's whole job is to say WHICH scope is\n * active and let the server answer.\n */\nexport interface ScopeConfig {\n  /** Stable id — travels in `DataViewQuery.scope` and in a saved view's state. */\n  id: string;\n  label: string;\n  /**\n   * Opaque payload the SERVER interprets. Omitted on the \"all\" scope. Never read\n   * by this package: a scope is applied at the backend, never in the browser.\n   */\n  predicate?: unknown;\n}\n\n/**\n * The active scope id, resolved against what the table currently declares.\n *\n * Resolution happens at READ time, on purpose. A saved view is written once and\n * read many times, and the declared scopes change underneath it — a scope\n * removed after a view was saved must fall back at render rather than break the\n * view or, worse, emit a scope the backend rejects. Resolving on write would\n * bake the mistake in.\n *\n * Returns `undefined` when the table declares no scopes, which is what keeps\n * `scope` out of the emitted query entirely for every table that never opted in.\n */\nexport function resolveScope(scopes: ScopeConfig[], stored: string | undefined): string | undefined {\n  if (scopes.length === 0) return undefined;\n  const declared = stored !== undefined && scopes.some((scope) => scope.id === stored);\n  return declared ? stored : scopes[0]?.id;\n}\n\n/** Are we running outside production? Config mistakes fail loudly only here. */\nfunction isDevelopment(): boolean {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\";\n}\n\n/**\n * Reject a table that partitions by a field AND declares a filter pill over the\n * same field. Two controls over one field is how a tab and a pill end up\n * contradicting each other — the pill says \"estado ∈ {pago, recusado}\" while the\n * tab says \"estado = recusado\", and nothing in either control can show the user\n * which one the server honoured.\n *\n * Throws in DEVELOPMENT ONLY. A thrown config error in production is strictly\n * worse than a duplicated control: the duplicate is confusing, the throw is a\n * blank page. Fail where it is seen and fixed.\n *\n * `scopeFieldId` is the field the scopes partition by, when the host knows it.\n * Absent, the scope IDS are checked against the field ids — which catches the\n * common shape where the scope ids ARE the field's values (`pago`, `recusado`)\n * declared a second time as a pill.\n */\nexport function assertNoScopePillOverlap(\n  scopes: ScopeConfig[],\n  fieldIds: string[],\n  scopeFieldId?: string,\n): void {\n  if (scopes.length === 0 || !isDevelopment()) return;\n  const clash = scopeFieldId !== undefined && fieldIds.includes(scopeFieldId) ? scopeFieldId : undefined;\n  if (clash === undefined) return;\n  throw new Error(\n    `DataViews: the field \"${clash}\" is both the scope partition (scopes: ` +\n      `${scopes.map((scope) => scope.id).join(\", \")}) and a filter field (fields: ` +\n      `${fieldIds.join(\", \")}). A field may drive the scope tabs or a filter pill, not both — ` +\n      `drop one of the two declarations.`,\n  );\n}\n\n/**\n * A development-only warning that scopes need server wiring. Scopes are resolved\n * and emitted, never applied in the browser: filtering locally would make the\n * counts, the \"N de N\" counter and the rendered rows disagree the moment a\n * second page exists.\n */\nexport function warnScopesNeedServer(scopes: ScopeConfig[], hasServer: boolean): void {\n  if (scopes.length === 0 || hasServer || !isDevelopment()) return;\n  // eslint-disable-next-line no-console -- a config warning has no other channel.\n  console.warn(\n    \"DataViews: `scopes` require server mode. The scope is tracked and would be emitted, \" +\n      \"but with no `server` there is nothing to emit it to and rows are NOT filtered in the browser. \" +\n      \"Supply `server` (see DataViewServer) or drop the scopes.\",\n  );\n}\n\n/**\n * The scope configuration's setup-time checks, run once per configuration rather\n * than per render: reject a field that is both a scope partition and a filter\n * pill (development only — see `assertNoScopePillOverlap`), and warn about\n * scopes declared with no server to apply them.\n *\n * In a `useMemo` so a mistake surfaces during the FIRST render, where the stack\n * still points at the table that made it.\n */\nexport function useScopeConfigChecks(\n  scopes: ScopeConfig[],\n  fieldIds: string[],\n  scopeFieldId: string | undefined,\n  hasServer: boolean,\n): void {\n  useMemo(() => {\n    assertNoScopePillOverlap(scopes, fieldIds, scopeFieldId);\n    warnScopesNeedServer(scopes, hasServer);\n    // Keyed on the ids rather than the arrays: hosts pass inline literals, so the\n    // array identity changes every render while the configuration does not.\n  }, [scopes, fieldIds.join(\",\"), scopeFieldId, hasServer]);\n}\n\n/** Everything the tab strip needs; `counts` is absent when the server omits it. */\ninterface DataViewsScopeTabsProps {\n  scopes: ScopeConfig[];\n  /** The RESOLVED active scope id (see {@link resolveScope}). */\n  value: string | undefined;\n  onChange: (id: string) => void;\n  /** Server-supplied per-scope totals. Absent ⇒ tabs render WITHOUT numbers. */\n  counts?: Record<string, number>;\n  testIdPrefix: string;\n}\n\n/** The accessible name of one tab: its label, plus its count when there is one. */\nfunction tabLabel(label: string, count: number | undefined): string {\n  return count === undefined ? label : `${label}, ${count}`;\n}\n\n/**\n * Move focus + selection between tabs with the arrow keys, wrapping at both\n * ends. Selection FOLLOWS focus here (an \"automatic activation\" tab list): each\n * arrow press is one scope change, which is one query — the same cost as a\n * click, and it keeps the strip's behaviour identical whichever input the\n * operator uses.\n */\nfunction arrowTarget(key: string, index: number, total: number): number | null {\n  if (key === \"ArrowRight\") return (index + 1) % total;\n  if (key === \"ArrowLeft\") return (index - 1 + total) % total;\n  if (key === \"Home\") return 0;\n  if (key === \"End\") return total - 1;\n  return null;\n}\n\n/** The active tab's own scroll-into-view, so a deep link to a late scope lands visible. */\nfunction useScrollActiveIntoView(value: string | undefined): React.RefObject<HTMLDivElement | null> {\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || value === undefined) return;\n    const active = strip.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]');\n    // jsdom implements neither, so guard rather than assume the DOM is a browser's.\n    active?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n  }, [value]);\n  return stripRef;\n}\n\n/** One tab's visual + a11y state, kept out of the strip's map for readability. */\nfunction scopeTabSx(active: boolean): Record<string, unknown> {\n  return {\n    // A 44px min target: the strip is the first thing a thumb reaches on a phone.\n    minHeight: 44,\n    px: 1.5,\n    py: 1,\n    border: 0,\n    borderBottom: 2,\n    borderStyle: \"solid\",\n    borderColor: active ? \"primary.main\" : \"transparent\",\n    background: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\n    font: \"inherit\",\n    fontSize: \"0.8125rem\",\n    fontWeight: active ? 600 : 400,\n    color: active ? \"primary.main\" : \"text.secondary\",\n    \"&:hover\": { color: active ? \"primary.main\" : \"text.primary\" },\n    \"&:focus-visible\": { outline: \"2px solid\", outlineColor: \"primary.main\", outlineOffset: -2 },\n  };\n}\n\n/** The count badge. Rendered only when the server actually supplied a number. */\nfunction ScopeCount({\n  count,\n  active,\n  testId,\n}: {\n  count: number;\n  active: boolean;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"span\"\n      // The number is already in the tab's `aria-label`; announcing it twice\n      // would read \"Recusados 2, 2\".\n      aria-hidden=\"true\"\n      data-testid={testId}\n      sx={{\n        ml: 0.75,\n        px: 0.75,\n        borderRadius: 5,\n        fontSize: \"0.6875rem\",\n        fontWeight: 600,\n        bgcolor: active ? \"primary.main\" : \"action.selected\",\n        color: active ? \"primary.contrastText\" : \"text.secondary\",\n      }}\n    >\n      {count}\n    </Box>\n  );\n}\n\ninterface ScopeTabProps {\n  scope: ScopeConfig;\n  index: number;\n  total: number;\n  active: boolean;\n  count: number | undefined;\n  onChange: (id: string) => void;\n  /**\n   * Move to the tab at `index`: focus it AND select it. Only the strip knows\n   * the other scopes and owns the DOM, so the move belongs to it.\n   */\n  moveTo: (index: number) => void;\n  testIdPrefix: string;\n}\n\n/** One tab: a real `<button role=\"tab\">` with a roving tabindex and arrow keys. */\nfunction ScopeTab({\n  scope,\n  index,\n  total,\n  active,\n  count,\n  onChange,\n  moveTo,\n  testIdPrefix,\n}: ScopeTabProps): React.JSX.Element {\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      role=\"tab\"\n      id={`${testIdPrefix}-scope-tab-${scope.id}`}\n      aria-selected={active}\n      // Roving tabindex: one tab stop for the whole strip, arrows move within it.\n      tabIndex={active ? 0 : -1}\n      aria-label={tabLabel(scope.label, count)}\n      data-testid={`${testIdPrefix}-scope-${scope.id}`}\n      onClick={() => onChange(scope.id)}\n      onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n        const target = arrowTarget(event.key, index, total);\n        if (target === null) return;\n        event.preventDefault();\n        moveTo(target);\n      }}\n      sx={scopeTabSx(active)}\n    >\n      {scope.label}\n      {count !== undefined && (\n        <ScopeCount\n          count={count}\n          active={active}\n          testId={`${testIdPrefix}-scope-count-${scope.id}`}\n        />\n      )}\n    </Box>\n  );\n}\n\n/** The strip's own layout: one non-wrapping row that scrolls horizontally. */\nconst STRIP_SX = {\n  display: \"flex\",\n  alignItems: \"stretch\",\n  gap: 0.5,\n  // One row that scrolls — never wraps, never collapses into a select.\n  flexWrap: \"nowrap\",\n  overflowX: \"auto\",\n  overflowY: \"hidden\",\n  scrollbarWidth: \"thin\",\n  borderBottom: 1,\n  borderColor: \"divider\",\n  mx: { xs: -2, md: -3 },\n  px: { xs: 2, md: 3 },\n} as const;\n\n/**\n * The scope strip: a horizontally scrolling tab list under the toolbar.\n *\n * It SCROLLS rather than collapsing into a select on a narrow screen, which is\n * the opposite of what the filter pills do — and deliberately. The counts are\n * the reason the tabs exist at all; burying them behind a menu costs a tap per\n * glance, exactly on the device where glancing is the point.\n *\n * Counts render verbatim from `counts` — never derived from the loaded page, and\n * never invented when the key is missing. A missing count means \"the server did\n * not say\", which reads honestly as no badge at all.\n */\nexport function DataViewsScopeTabs({\n  scopes,\n  value,\n  onChange,\n  counts,\n  testIdPrefix,\n}: DataViewsScopeTabsProps): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  const stripRef = useScrollActiveIntoView(value);\n  const moveTo = (index: number): void => {\n    // Focus FIRST, then select: the roving tabindex follows the selection, so\n    // focusing afterwards would land on a tab that has given up its tab stop.\n    stripRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')?.[index]?.focus();\n    const next = scopes[index];\n    if (next) onChange(next.id);\n  };\n  // Reserve NO vertical space when there is nothing to show: a page that\n  // declares no scopes must not gain an empty row.\n  if (scopes.length === 0) return null;\n  const activeIndex = Math.max(\n    0,\n    scopes.findIndex((scope) => scope.id === value),\n  );\n\n  return (\n    <Box ref={stripRef} role=\"tablist\" aria-label={copy.filters.scopesLabel} data-testid={`${testIdPrefix}-scopes`} sx={STRIP_SX}>\n      {scopes.map((scope, index) => (\n        <ScopeTab\n          key={scope.id}\n          scope={scope}\n          index={index}\n          total={scopes.length}\n          active={index === activeIndex}\n          count={counts?.[scope.id]}\n          onChange={onChange}\n          moveTo={moveTo}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-LYNJJV2X.js

@@ -0,0 +1,257 @@
+import {
+  pulseAnimation,
+  rotateAnimation,
+  scaleInAnimation,
+  shimmerAnimation
+} from "./chunk-XRMZMBE3.js";
+
+// src/components/data-display/Avatar/Avatar.view.tsx
+import MuiAvatar from "@mui/material/Avatar/index.js";
+import Badge from "@mui/material/Badge/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import { alpha, useTheme, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColorFromTheme = (theme, color) => {
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    // `danger`, not `error`. This 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.
+    danger: theme.palette.error,
+    neutral: { main: theme.palette.grey[700], contrastText: "#fff" }
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getSizeStyles = (size) => {
+  const sizeMap = {
+    xs: { width: 24, height: 24, fontSize: "0.75rem" },
+    sm: { width: 32, height: 32, fontSize: "0.875rem" },
+    md: { width: 40, height: 40, fontSize: "1rem" },
+    lg: { width: 48, height: 48, fontSize: "1.125rem" },
+    xl: { width: 64, height: 64, fontSize: "1.5rem" },
+    xxl: { width: 80, height: 80, fontSize: "2rem" }
+  };
+  return sizeMap[size] || sizeMap.md;
+};
+var getStatusColor = (status, theme) => {
+  const statusColorMap = {
+    online: theme.palette.success.main,
+    offline: theme.palette.grey[500],
+    away: theme.palette.warning.main,
+    busy: theme.palette.error.main
+  };
+  return statusColorMap[status] || statusColorMap.offline;
+};
+var interactiveStyles = (interactive, main) => interactive ? {
+  "&:hover": {
+    transform: "scale(1.1) translateY(-2px)",
+    boxShadow: `0 8px 20px ${alpha(main, 0.3)}`,
+    filter: "brightness(1.1)",
+    zIndex: 10
+  },
+  "&:active": { transform: "scale(1.05)" }
+} : {};
+var loadingStyles = (isLoading, main) => isLoading ? {
+  background: `linear-gradient(
+        90deg,
+        ${alpha(main, 0.6)},
+        ${alpha(main, 0.8)},
+        ${alpha(main, 0.6)}
+      )`,
+  backgroundSize: "200% 100%",
+  animation: `${shimmerAnimation} 1.5s ease-in-out infinite`
+} : {};
+var variantRadius = (variant, theme) => {
+  if (variant === "square") return { borderRadius: 0 };
+  if (variant === "rounded") return { borderRadius: theme.spacing(1) };
+  return { borderRadius: "50%" };
+};
+var borderedStyles = (bordered, theme) => bordered ? {
+  border: `2px solid ${theme.palette.background.paper}`,
+  boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, 0.2)}`
+} : {};
+var glowPulseStyles = (glow, pulse, main) => {
+  const styles = {};
+  if (glow) {
+    styles.boxShadow = `0 0 20px 5px ${alpha(main, 0.4)} !important`;
+    styles.filter = "brightness(1.05)";
+  }
+  if (pulse) {
+    styles.position = "relative";
+    styles["&::after"] = {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: "100%",
+      height: "100%",
+      borderRadius: "inherit",
+      transform: "translate(-50%, -50%)",
+      backgroundColor: main,
+      opacity: 0.3,
+      animation: `${pulseAnimation} 2s infinite`,
+      pointerEvents: "none",
+      zIndex: -1
+    };
+  }
+  return styles;
+};
+var STYLED_AVATAR_PROPS = [
+  "customVariant",
+  "customSize",
+  "customColor",
+  "glow",
+  "pulse",
+  "bordered",
+  "isLoading",
+  "hasError",
+  "interactive"
+];
+var StyledAvatar = styled(MuiAvatar, {
+  shouldForwardProp: (prop) => !STYLED_AVATAR_PROPS.includes(prop)
+})(
+  ({
+    theme,
+    customVariant,
+    customSize = "md",
+    customColor = "primary",
+    glow,
+    pulse,
+    bordered,
+    isLoading,
+    hasError,
+    interactive
+  }) => {
+    const palette = getColorFromTheme(theme, customColor);
+    return {
+      ...getSizeStyles(customSize),
+      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+      position: "relative",
+      overflow: "visible",
+      animation: `${scaleInAnimation} 0.3s ease-out`,
+      cursor: interactive ? "pointer" : "default",
+      backgroundColor: hasError ? theme.palette.error.main : palette.main,
+      color: hasError ? theme.palette.error.contrastText : palette.contrastText ?? "#fff",
+      ...interactiveStyles(interactive, palette.main),
+      ...loadingStyles(isLoading, palette.main),
+      ...variantRadius(customVariant, theme),
+      ...borderedStyles(bordered, theme),
+      ...glowPulseStyles(glow, pulse, palette.main),
+      "&:focus-visible": {
+        outline: `3px solid ${alpha(palette.main, 0.5)}`,
+        outlineOffset: 2
+      }
+    };
+  }
+);
+var LoadingOverlay = styled("div")(({ theme, size }) => {
+  const sizeStyles = getSizeStyles(size);
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: sizeStyles.width,
+    height: sizeStyles.height,
+    borderRadius: "inherit",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: alpha(theme.palette.background.paper, 0.7),
+    backdropFilter: "blur(2px)",
+    "& .loading-spinner": {
+      width: sizeStyles.width * 0.4,
+      height: sizeStyles.height * 0.4,
+      border: `2px solid ${alpha(theme.palette.primary.main, 0.3)}`,
+      borderTopColor: theme.palette.primary.main,
+      borderRadius: "50%",
+      animation: `${rotateAnimation} 0.8s linear infinite`
+    }
+  };
+});
+var StatusBadge = styled(Badge, {
+  shouldForwardProp: (prop) => !["statusColor", "avatarSize"].includes(prop)
+})(({ theme, statusColor, avatarSize = "md" }) => {
+  const sizeStyles = getSizeStyles(avatarSize);
+  const badgeSize = Math.max(8, sizeStyles.width * 0.2);
+  return {
+    "& .MuiBadge-badge": {
+      backgroundColor: statusColor || theme.palette.success.main,
+      color: statusColor || theme.palette.success.main,
+      width: badgeSize,
+      height: badgeSize,
+      borderRadius: "50%",
+      border: `2px solid ${theme.palette.background.paper}`,
+      "&::after": {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+        content: '""'
+      }
+    }
+  };
+});
+function AvatarSurface(props) {
+  const { showSpinner, dataTestId, clickable } = props;
+  const testId = (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
+  return /* @__PURE__ */ jsx(Fade, { in: props.mounted, timeout: 300, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx(
+      StyledAvatar,
+      {
+        ref: props.forwardedRef,
+        className: props.className,
+        customVariant: props.variant,
+        customSize: props.size,
+        customColor: props.color,
+        glow: props.glow,
+        pulse: props.pulse,
+        bordered: props.bordered,
+        isLoading: showSpinner,
+        hasError: props.imageError,
+        interactive: clickable,
+        src: props.imgSrc,
+        alt: props.alt,
+        onClick: props.onClick,
+        tabIndex: clickable ? 0 : void 0,
+        role: clickable ? "button" : void 0,
+        "aria-label": props.ariaLabel,
+        "data-testid": dataTestId,
+        ...props.rest,
+        slotProps: { img: { onError: props.handleImageError, onLoad: props.handleImageLoad } },
+        children: showSpinner ? null : /* @__PURE__ */ jsx("span", { "data-testid": testId(props.contentType), children: props.content })
+      }
+    ),
+    showSpinner && /* @__PURE__ */ jsx(LoadingOverlay, { size: props.size, "data-testid": testId("loading"), children: /* @__PURE__ */ jsx("div", { className: "loading-spinner", "data-testid": testId("loading-spinner") }) })
+  ] }) });
+}
+function AvatarView(props) {
+  const theme = useTheme();
+  const surface = /* @__PURE__ */ jsx(AvatarSurface, { ...props });
+  if (props.variant === "status" && props.status) {
+    return /* @__PURE__ */ jsx(
+      StatusBadge,
+      {
+        overlap: "circular",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        variant: "dot",
+        statusColor: getStatusColor(props.status, theme),
+        avatarSize: props.size,
+        "data-testid": props.dataTestId ? `${props.dataTestId}-badge` : void 0,
+        children: surface
+      }
+    );
+  }
+  return surface;
+}
+
+export {
+  AvatarView
+};
+//# sourceMappingURL=chunk-LYNJJV2X.js.map

package/dist/chunk-LYNJJV2X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.view.tsx"],"sourcesContent":["import MuiAvatar from '@mui/material/Avatar/index.js';\nimport Badge from '@mui/material/Badge/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport { alpha, useTheme, styled } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { pulseAnimation, rotateAnimation, scaleInAnimation, shimmerAnimation } from './Avatar.animations';\nimport type { AvatarSize, AvatarStatus } from './Avatar.types';\n\nexport type ContentType = 'children' | 'fallback' | 'icon' | 'default';\n\n\ninterface PaletteLike {\n  main: string;\n  contrastText?: string;\n  light?: string;\n  dark?: string;\n}\n\nconst getColorFromTheme = (theme: Theme, color: string): PaletteLike => {\n  const colorMap: Record<string, PaletteLike> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    // `danger`, not `error`. This map was keyed on MUI's word while the prop\n    // took the house one, so `danger` matched nothing and fell through to\n    // primary — a red avatar rendering blue, silently.\n    danger: theme.palette.error,\n    neutral: { main: theme.palette.grey[700], contrastText: '#fff' },\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\ninterface SizeStyle {\n  width: number;\n  height: number;\n  fontSize: string;\n}\n\nconst getSizeStyles = (size: AvatarSize): SizeStyle => {\n  const sizeMap: Record<AvatarSize, SizeStyle> = {\n    xs: { width: 24, height: 24, fontSize: '0.75rem' },\n    sm: { width: 32, height: 32, fontSize: '0.875rem' },\n    md: { width: 40, height: 40, fontSize: '1rem' },\n    lg: { width: 48, height: 48, fontSize: '1.125rem' },\n    xl: { width: 64, height: 64, fontSize: '1.5rem' },\n    xxl: { width: 80, height: 80, fontSize: '2rem' },\n  };\n\n  return sizeMap[size] || sizeMap.md;\n};\n\nconst getStatusColor = (status: AvatarStatus, theme: Theme): string => {\n  const statusColorMap: Record<AvatarStatus, string> = {\n    online: theme.palette.success.main,\n    offline: theme.palette.grey[500],\n    away: theme.palette.warning.main,\n    busy: theme.palette.error.main,\n  };\n\n  return statusColorMap[status] || statusColorMap.offline;\n};\n\n/** Hover/active lift, only when the avatar is interactive. */\nconst interactiveStyles = (interactive: boolean | undefined, main: string): CSSObject =>\n  interactive\n    ? {\n        '&:hover': {\n          transform: 'scale(1.1) translateY(-2px)',\n          boxShadow: `0 8px 20px ${alpha(main, 0.3)}`,\n          filter: 'brightness(1.1)',\n          zIndex: 10,\n        },\n        '&:active': { transform: 'scale(1.05)' },\n      }\n    : {};\n\n/** Shimmer gradient while the image loads. */\nconst loadingStyles = (isLoading: boolean | undefined, main: string): CSSObject =>\n  isLoading\n    ? {\n        background: `linear-gradient(\n        90deg,\n        ${alpha(main, 0.6)},\n        ${alpha(main, 0.8)},\n        ${alpha(main, 0.6)}\n      )`,\n        backgroundSize: '200% 100%',\n        animation: `${shimmerAnimation} 1.5s ease-in-out infinite`,\n      }\n    : {};\n\n/** Corner radius per shape variant (circle/status are round). */\nconst variantRadius = (variant: string | undefined, theme: Theme): CSSObject => {\n  if (variant === 'square') return { borderRadius: 0 };\n  if (variant === 'rounded') return { borderRadius: theme.spacing(1) };\n  return { borderRadius: '50%' };\n};\n\n/** Paper ring when bordered (e.g. inside an AvatarGroup). */\nconst borderedStyles = (bordered: boolean | undefined, theme: Theme): CSSObject =>\n  bordered\n    ? {\n        border: `2px solid ${theme.palette.background.paper}`,\n        boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, 0.2)}`,\n      }\n    : {};\n\n/** Glow adds the halo; pulse adds the expanding ring — either or both. */\nconst glowPulseStyles = (\n  glow: boolean | undefined,\n  pulse: boolean | undefined,\n  main: string,\n): CSSObject => {\n  const styles: CSSObject = {};\n  if (glow) {\n    styles.boxShadow = `0 0 20px 5px ${alpha(main, 0.4)} !important`;\n    styles.filter = 'brightness(1.05)';\n  }\n  if (pulse) {\n    styles.position = 'relative';\n    styles['&::after'] = {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      width: '100%',\n      height: '100%',\n      borderRadius: 'inherit',\n      transform: 'translate(-50%, -50%)',\n      backgroundColor: main,\n      opacity: 0.3,\n      animation: `${pulseAnimation} 2s infinite`,\n      pointerEvents: 'none',\n      zIndex: -1,\n    };\n  }\n  return styles;\n};\n\ninterface StyledAvatarProps {\n  customVariant?: string;\n  customSize?: AvatarSize;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  bordered?: boolean;\n  isLoading?: boolean;\n  hasError?: boolean;\n  interactive?: boolean;\n}\n\nconst STYLED_AVATAR_PROPS = [\n  'customVariant',\n  'customSize',\n  'customColor',\n  'glow',\n  'pulse',\n  'bordered',\n  'isLoading',\n  'hasError',\n  'interactive',\n];\n\nconst StyledAvatar = styled(MuiAvatar, {\n  shouldForwardProp: (prop) => !STYLED_AVATAR_PROPS.includes(prop as string),\n})<StyledAvatarProps>(\n  ({\n    theme,\n    customVariant,\n    customSize = 'md',\n    customColor = 'primary',\n    glow,\n    pulse,\n    bordered,\n    isLoading,\n    hasError,\n    interactive,\n  }) => {\n    const palette = getColorFromTheme(theme, customColor);\n    return {\n      ...getSizeStyles(customSize),\n      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n      position: 'relative',\n      overflow: 'visible',\n      animation: `${scaleInAnimation} 0.3s ease-out`,\n      cursor: interactive ? 'pointer' : 'default',\n      backgroundColor: hasError ? theme.palette.error.main : palette.main,\n      color: hasError ? theme.palette.error.contrastText : (palette.contrastText ?? '#fff'),\n      ...interactiveStyles(interactive, palette.main),\n      ...loadingStyles(isLoading, palette.main),\n      ...variantRadius(customVariant, theme),\n      ...borderedStyles(bordered, theme),\n      ...glowPulseStyles(glow, pulse, palette.main),\n      '&:focus-visible': {\n        outline: `3px solid ${alpha(palette.main, 0.5)}`,\n        outlineOffset: 2,\n      },\n    };\n  },\n);\n\nconst LoadingOverlay = styled('div')<{ size: AvatarSize }>(({ theme, size }) => {\n  const sizeStyles = getSizeStyles(size);\n  return {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: sizeStyles.width,\n    height: sizeStyles.height,\n    borderRadius: 'inherit',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: alpha(theme.palette.background.paper, 0.7),\n    backdropFilter: 'blur(2px)',\n    '& .loading-spinner': {\n      width: sizeStyles.width * 0.4,\n      height: sizeStyles.height * 0.4,\n      border: `2px solid ${alpha(theme.palette.primary.main, 0.3)}`,\n      borderTopColor: theme.palette.primary.main,\n      borderRadius: '50%',\n      animation: `${rotateAnimation} 0.8s linear infinite`,\n    },\n  };\n});\n\nconst StatusBadge = styled(Badge, {\n  shouldForwardProp: (prop) => !['statusColor', 'avatarSize'].includes(prop as string),\n})<{\n  statusColor?: string;\n  avatarSize?: AvatarSize;\n}>(({ theme, statusColor, avatarSize = 'md' }) => {\n  const sizeStyles = getSizeStyles(avatarSize);\n  const badgeSize = Math.max(8, sizeStyles.width * 0.2);\n\n  return {\n    '& .MuiBadge-badge': {\n      backgroundColor: statusColor || theme.palette.success.main,\n      color: statusColor || theme.palette.success.main,\n      width: badgeSize,\n      height: badgeSize,\n      borderRadius: '50%',\n      border: `2px solid ${theme.palette.background.paper}`,\n      '&::after': {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        borderRadius: '50%',\n        backgroundColor: 'currentColor',\n        content: '\"\"',\n      },\n    },\n  };\n});\n\nexport interface AvatarViewProps {\n  mounted: boolean;\n  variant: string;\n  size: AvatarSize;\n  color: string;\n  glow: boolean;\n  pulse: boolean;\n  bordered: boolean;\n  showSpinner: boolean;\n  imageError: boolean;\n  clickable: boolean;\n  imgSrc?: string;\n  alt?: string;\n  ariaLabel: string;\n  content: React.ReactNode;\n  contentType: ContentType;\n  className?: string;\n  dataTestId?: string;\n  status?: AvatarStatus;\n  forwardedRef: React.Ref<HTMLDivElement>;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  handleImageError: React.ReactEventHandler;\n  handleImageLoad: () => void;\n  rest: Record<string, unknown>;\n}\n\n/** The avatar box itself: the styled MUI avatar plus the loading overlay. */\nfunction AvatarSurface(props: AvatarViewProps): React.JSX.Element {\n  const { showSpinner, dataTestId, clickable } = props;\n  const testId = (suffix: string): string | undefined =>\n    dataTestId ? `${dataTestId}-${suffix}` : undefined;\n\n  return (\n    <Fade in={props.mounted} timeout={300}>\n      <div style={{ position: 'relative', display: 'inline-block' }}>\n        <StyledAvatar\n          ref={props.forwardedRef}\n          className={props.className}\n          customVariant={props.variant}\n          customSize={props.size}\n          customColor={props.color}\n          glow={props.glow}\n          pulse={props.pulse}\n          bordered={props.bordered}\n          isLoading={showSpinner}\n          hasError={props.imageError}\n          interactive={clickable}\n          src={props.imgSrc}\n          alt={props.alt}\n          onClick={props.onClick}\n          tabIndex={clickable ? 0 : undefined}\n          role={clickable ? 'button' : undefined}\n          aria-label={props.ariaLabel}\n          data-testid={dataTestId}\n          {...props.rest}\n          // Load/error fire on the inner <img>, not the root — and don't bubble.\n          // Wiring them via the img slot lets `imageLoading` actually clear (else\n          // the spinner overlays the avatar forever whenever `src` is set). Keep\n          // after {...props.rest} so a consumer-supplied slotProps can't override\n          // and detach these handlers.\n          slotProps={{ img: { onError: props.handleImageError, onLoad: props.handleImageLoad } }}\n        >\n          {showSpinner ? null : (\n            <span data-testid={testId(props.contentType)}>{props.content}</span>\n          )}\n        </StyledAvatar>\n        {showSpinner && (\n          <LoadingOverlay size={props.size} data-testid={testId('loading')}>\n            <div className=\"loading-spinner\" data-testid={testId('loading-spinner')} />\n          </LoadingOverlay>\n        )}\n      </div>\n    </Fade>\n  );\n}\n\n/** Presentational avatar: the surface, wrapped in a status dot badge when requested. */\nexport function AvatarView(props: AvatarViewProps): React.JSX.Element {\n  const theme = useTheme();\n  const surface = <AvatarSurface {...props} />;\n\n  if (props.variant === 'status' && props.status) {\n    return (\n      <StatusBadge\n        overlap=\"circular\"\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        variant=\"dot\"\n        statusColor={getStatusColor(props.status, theme)}\n        avatarSize={props.size}\n        data-testid={props.dataTestId ? `${props.dataTestId}-badge` : undefined}\n      >\n        {surface}\n      </StatusBadge>\n    );\n  }\n\n  return surface;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-M5T3COS2.js

@@ -0,0 +1,70 @@
+// src/components/data-display/Chart/ChartComposables.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { Legend, ResponsiveContainer, Tooltip } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartTooltip = Tooltip;
+var ChartLegend = Legend;
+var ChartContainer = ({
+  height,
+  width = "100%",
+  responsive = true,
+  children,
+  "data-testid": dataTestId
+}) => {
+  if (!responsive) {
+    return /* @__PURE__ */ jsx(Box, { sx: { width, height }, "data-testid": dataTestId, children });
+  }
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, "data-testid": dataTestId, children });
+};
+var ChartTooltipContent = ({
+  active,
+  label,
+  payload,
+  valueFormatter
+}) => {
+  const theme = useTheme();
+  if (!active || !payload || payload.length === 0) return null;
+  const formatValue = (value) => {
+    if (typeof value === "number" && valueFormatter) return valueFormatter(value);
+    return value ?? "";
+  };
+  return /* @__PURE__ */ jsxs(Paper, { elevation: 4, sx: { px: 1.5, py: 1, border: `1px solid ${theme.palette.divider}` }, children: [
+    label !== void 0 && label !== "" && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 0.5 }, children: label }),
+    payload.map((entry, index) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          sx: { width: 10, height: 10, borderRadius: "2px", backgroundColor: entry.color, flexShrink: 0 }
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: entry.name }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { ml: "auto", fontWeight: 600 }, children: formatValue(entry.value) })
+    ] }, index))
+  ] });
+};
+var ChartLegendContent = ({ payload }) => {
+  if (!payload || payload.length === 0) return null;
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 2, pt: 1 }, children: payload.map((entry, index) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "span",
+        sx: { width: 10, height: 10, borderRadius: "2px", backgroundColor: entry.color, flexShrink: 0 }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary" }, children: entry.value })
+  ] }, index)) });
+};
+
+export {
+  ChartTooltip,
+  ChartLegend,
+  ChartContainer,
+  ChartTooltipContent,
+  ChartLegendContent
+};
+//# sourceMappingURL=chunk-M5T3COS2.js.map

package/dist/chunk-M5T3COS2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/ChartComposables.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport { Legend, ResponsiveContainer, Tooltip } from 'recharts';\n\n/**\n * Raw chart composables (Squire's ChartConfig pattern, MUI-themed): a\n * responsive container plus themed tooltip/legend content renderers. The\n * prop-driven `Chart` uses these internally; consumers building bespoke\n * Recharts compositions can reuse them directly.\n */\n\n/** Recharts' Tooltip/Legend re-exported so bespoke compositions can pair them\n * with the themed content renderers below. */\nexport const ChartTooltip = Tooltip;\nexport const ChartLegend = Legend;\n\nexport interface ChartContainerProps {\n  /**\n   * A number of pixels, or a PERCENTAGE of the box this container is given.\n   *\n   * The difference is not cosmetic: Recharts sizes the chart from the number\n   * when it is one and only MEASURES its own box when it is a percentage\n   * (`calculateChartDimensions`). So a container stretched by its parent's\n   * layout goes on drawing a 300px chart inside a 600px box — visibly, as\n   * blank space under the plot — until the height is handed over as a percent.\n   */\n  height: number | `${number}%`;\n  width?: number | string;\n  responsive?: boolean;\n  children: React.ReactElement;\n  'data-testid'?: string;\n}\n\n/** Responsive wrapper for a Recharts chart element. */\nexport const ChartContainer: React.FC<ChartContainerProps> = ({\n  height,\n  width = '100%',\n  responsive = true,\n  children,\n  'data-testid': dataTestId,\n}) => {\n  if (!responsive) {\n    return (\n      <Box sx={{ width, height }} data-testid={dataTestId}>\n        {children}\n      </Box>\n    );\n  }\n  return (\n    <ResponsiveContainer width=\"100%\" height={height} data-testid={dataTestId}>\n      {children}\n    </ResponsiveContainer>\n  );\n};\n\ninterface TooltipEntry {\n  name?: string | number;\n  value?: string | number;\n  color?: string;\n}\n\nexport interface ChartTooltipContentProps {\n  active?: boolean;\n  label?: string | number;\n  payload?: TooltipEntry[];\n  /** Formats numeric values (e.g. centavos → BRL). */\n  valueFormatter?: (value: number) => string;\n}\n\n/** Theme-aware tooltip content (light/dark correct, semantic colors only). */\nexport const ChartTooltipContent: React.FC<ChartTooltipContentProps> = ({\n  active,\n  label,\n  payload,\n  valueFormatter,\n}) => {\n  const theme = useTheme();\n  if (!active || !payload || payload.length === 0) return null;\n  const formatValue = (value: TooltipEntry['value']): string | number => {\n    if (typeof value === 'number' && valueFormatter) return valueFormatter(value);\n    return value ?? '';\n  };\n  return (\n    <Paper elevation={4} sx={{ px: 1.5, py: 1, border: `1px solid ${theme.palette.divider}` }}>\n      {label !== undefined && label !== '' && (\n        <Typography variant=\"caption\" sx={{ color: 'text.secondary', display: 'block', mb: 0.5 }}>\n          {label}\n        </Typography>\n      )}\n      {payload.map((entry, index) => (\n        <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n          <Box\n            component=\"span\"\n            sx={{ width: 10, height: 10, borderRadius: '2px', backgroundColor: entry.color, flexShrink: 0 }}\n          />\n          <Typography variant=\"body2\" sx={{ color: 'text.secondary' }}>\n            {entry.name}\n          </Typography>\n          <Typography variant=\"body2\" sx={{ ml: 'auto', fontWeight: 600 }}>\n            {formatValue(entry.value)}\n          </Typography>\n        </Box>\n      ))}\n    </Paper>\n  );\n};\n\nexport interface ChartLegendContentProps {\n  payload?: Array<{ value?: string | number; color?: string }>;\n}\n\n/** Theme-aware legend content matching the tooltip's swatch styling. */\nexport const ChartLegendContent: React.FC<ChartLegendContentProps> = ({ payload }) => {\n  if (!payload || payload.length === 0) return null;\n  return (\n    <Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 2, pt: 1 }}>\n      {payload.map((entry, index) => (\n        <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>\n          <Box\n            component=\"span\"\n            sx={{ width: 10, height: 10, borderRadius: '2px', backgroundColor: entry.color, flexShrink: 0 }}\n          />\n          <Typography variant=\"caption\" sx={{ color: 'text.secondary' }}>\n            {entry.value}\n          </Typography>\n        </Box>\n      ))}\n    </Box>\n  );\n};\n"],"mappings":";AAAA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AAEzB,SAAS,QAAQ,qBAAqB,eAAe;AAyC/C,cA+CE,YA/CF;AA9BC,IAAM,eAAe;AACrB,IAAM,cAAc;AAoBpB,IAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,MAAI,CAAC,YAAY;AACf,WACE,oBAAC,OAAI,IAAI,EAAE,OAAO,OAAO,GAAG,eAAa,YACtC,UACH;AAAA,EAEJ;AACA,SACE,oBAAC,uBAAoB,OAAM,QAAO,QAAgB,eAAa,YAC5D,UACH;AAEJ;AAiBO,IAAM,sBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,UAAU,CAAC,WAAW,QAAQ,WAAW,EAAG,QAAO;AACxD,QAAM,cAAc,CAAC,UAAkD;AACrE,QAAI,OAAO,UAAU,YAAY,eAAgB,QAAO,eAAe,KAAK;AAC5E,WAAO,SAAS;AAAA,EAClB;AACA,SACE,qBAAC,SAAM,WAAW,GAAG,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,QAAQ,aAAa,MAAM,QAAQ,OAAO,GAAG,GACrF;AAAA,cAAU,UAAa,UAAU,MAChC,oBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,OAAO,kBAAkB,SAAS,SAAS,IAAI,IAAI,GACpF,iBACH;AAAA,IAED,QAAQ,IAAI,CAAC,OAAO,UACnB,qBAAC,OAAgB,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE,GACnE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,EAAE,OAAO,IAAI,QAAQ,IAAI,cAAc,OAAO,iBAAiB,MAAM,OAAO,YAAY,EAAE;AAAA;AAAA,MAChG;AAAA,MACA,oBAAC,cAAW,SAAQ,SAAQ,IAAI,EAAE,OAAO,iBAAiB,GACvD,gBAAM,MACT;AAAA,MACA,oBAAC,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,QAAQ,YAAY,IAAI,GAC3D,sBAAY,MAAM,KAAK,GAC1B;AAAA,SAVQ,KAWV,CACD;AAAA,KACH;AAEJ;AAOO,IAAM,qBAAwD,CAAC,EAAE,QAAQ,MAAM;AACpF,MAAI,CAAC,WAAW,QAAQ,WAAW,EAAG,QAAO;AAC7C,SACE,oBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,UAAU,QAAQ,gBAAgB,UAAU,KAAK,GAAG,IAAI,EAAE,GACnF,kBAAQ,IAAI,CAAC,OAAO,UACnB,qBAAC,OAAgB,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,KAAK,GACtE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI,EAAE,OAAO,IAAI,QAAQ,IAAI,cAAc,OAAO,iBAAiB,MAAM,OAAO,YAAY,EAAE;AAAA;AAAA,IAChG;AAAA,IACA,oBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,OAAO,iBAAiB,GACzD,gBAAM,OACT;AAAA,OAPQ,KAQV,CACD,GACH;AAEJ;","names":[]}