@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-TQ6FPOPD.js

@@ -0,0 +1,105 @@
+import {
+  GAP,
+  RESERVED,
+  estimateWidth,
+  furnitureCost,
+  isRangeSet,
+  pillText,
+  rightClusterCost
+} from "./chunk-IAGOUTI6.js";
+import {
+  splitToFit,
+  useMeasuredWidth
+} from "./chunk-Y4KKS6WL.js";
+
+// src/components/data-display/DataViews/data-views-overflow.ts
+import { useRef } from "react";
+function toOverflowFields(fields, rangeFields) {
+  return [
+    ...fields.map((pill) => ({ id: pill.id, label: pill.label, group: "pill", pill })),
+    ...rangeFields.map((range) => ({ id: range.id, label: range.label, group: "range", range }))
+  ];
+}
+function isActiveField(field, pills, ranges) {
+  return field.group === "pill" ? (pills[field.id]?.length ?? 0) > 0 : isRangeSet(ranges[field.id]);
+}
+function fieldWidth(field, pills, ranges) {
+  if (field.group === "pill") return estimateWidth(pillText(field, pills[field.id] ?? []), 0);
+  return estimateWidth(field.label, isRangeSet(ranges[field.id]) ? 100 : 0);
+}
+function splitFilters(all, pills, ranges, width, furniture, compact) {
+  const active = all.filter((field) => isActiveField(field, pills, ranges));
+  const idle = all.filter((field) => !isActiveField(field, pills, ranges));
+  const clearCost = active.length > 0 ? RESERVED.clearAll + GAP : 0;
+  const split = splitToFit(all, {
+    widthOf: (field) => fieldWidth(field, pills, ranges),
+    keyOf: (field) => field.id,
+    gap: GAP,
+    available: width - furniture - clearCost,
+    // The overflow button at the width it will actually have, which on a phone
+    // is the icon-and-badge one.
+    overflowCost: compact ? RESERVED.overflowButtonCompact : RESERVED.overflowButton,
+    priority: [...active, ...idle]
+  });
+  return { ...split, used: split.used + clearCost };
+}
+function computeSplit(all, pills, ranges, width, hasExport) {
+  if (width === 0) {
+    return {
+      inline: all,
+      overflow: [],
+      compactControls: false,
+      counterHidden: false,
+      searchCollapsed: false,
+      clearAllHidden: false,
+      searchTakeover: false
+    };
+  }
+  let split = splitFilters(all, pills, ranges, width, furnitureCost(UNCOLLAPSED, hasExport), false);
+  let flags = ladderFlags(split, width, hasExport);
+  let budget = furnitureCost(UNCOLLAPSED, hasExport);
+  for (let pass = 0; pass < 3; pass += 1) {
+    const freed = furnitureCost(flags, hasExport);
+    if (freed >= budget) break;
+    budget = freed;
+    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls);
+    flags = ladderFlags(split, width, hasExport);
+  }
+  return { inline: split.inline, overflow: split.overflow, ...flags };
+}
+var UNCOLLAPSED = { searchCollapsed: false, counterHidden: false, compactControls: false };
+function ladderFlags(split, width, hasExport) {
+  const { overflow, used } = split;
+  const base = width - used - RESERVED.chrome;
+  const compactControls = base - RESERVED.counter - rightClusterCost(hasExport, false) < RESERVED.search;
+  const rightCost = rightClusterCost(hasExport, compactControls);
+  const searchCollapsed = base - RESERVED.counter - rightCost < RESERVED.search;
+  const counterHidden = searchCollapsed && base - RESERVED.counter - rightCost < RESERVED.searchIcon;
+  const clearAllHidden = counterHidden && overflow.length > 0;
+  const overflowButton = compactControls ? RESERVED.overflowButtonCompact : RESERVED.overflowButton;
+  const shedRoom = width - RESERVED.chrome - (overflow.length > 0 ? overflowButton : 0);
+  const searchBoxRoom = shedRoom - (counterHidden ? 0 : RESERVED.counter) - rightCost;
+  const searchTakeover = searchCollapsed && searchBoxRoom < RESERVED.usableSearch;
+  return { compactControls, counterHidden, searchCollapsed, clearAllHidden, searchTakeover };
+}
+function useFilterOverflow(all, pills, ranges, frozen = false, hasExport = true) {
+  const { ref: barRef, width } = useMeasuredWidth();
+  const signature = JSON.stringify({
+    ids: all.map((field) => field.id),
+    pills,
+    ranges,
+    width,
+    hasExport
+  });
+  const cache = useRef(null);
+  if (cache.current === null || !frozen && cache.current.signature !== signature) {
+    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport) };
+  }
+  return { ...cache.current.split, barRef };
+}
+
+export {
+  toOverflowFields,
+  useFilterOverflow
+};
+//# sourceMappingURL=chunk-TQ6FPOPD.js.map

package/dist/chunk-TQ6FPOPD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-overflow.ts"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\n\nimport { splitToFit, useMeasuredWidth } from \"../../utility/Overflow\";\nimport {\n  estimateWidth,\n  furnitureCost,\n  GAP,\n  isRangeSet,\n  pillText,\n  RESERVED,\n  rightClusterCost,\n} from \"./data-views-overflow-costs\";\nimport type { FilterFieldConfig, RangeFieldConfig, RangeValue } from \"./data-views-types\";\n\n/**\n * PROGRESSIVE COLLAPSE — which filter controls fit on the toolbar, measured.\n *\n * Two rules, and both come from watching the all-or-nothing version fail:\n *\n * 1. Controls shed ONE AT A TIME into an overflow, never all at once. With four\n *    filters and room for three, hiding all four throws away the room that was\n *    there.\n * 2. An APPLIED filter is ranked first, not exempt. Applied controls take the\n *    visible slots ahead of idle ones, and go into \"Mais\" like anything else\n *    when even those slots run out. Exempting them outright — the earlier rule\n *    — meant four applied filters on a phone claimed more width than the row\n *    had, and the bar painted past its own edge: the pills were reachable only\n *    by scrolling the toolbar sideways. Hiding one is safe because \"Mais\" says\n *    how many applied filters are behind it; scrolling one off-screen says\n *    nothing at all.\n *\n * It MEASURES rather than picking a breakpoint, which is what\n * `FILTERS-CONTRACT.md` asks for: pages declare different numbers of filters\n * with different label lengths, and the same page collapses at a different\n * width in another language. A shared breakpoint is wrong for at least one\n * table by construction.\n *\n * Collapsing is presentation only — nothing here emits a query, drops a filter\n * or changes a rendered row.\n */\n\n/** A filter control on the bar: a multi-select pill or a min/max range. */\nexport interface OverflowField<T extends Record<string, unknown>> {\n  id: string;\n  label: string;\n  /** Which control it is — the caller renders the right one. */\n  group: \"pill\" | \"range\";\n  pill?: FilterFieldConfig<T>;\n  range?: RangeFieldConfig<T>;\n}\n\n/** What the caller renders inline, and what goes behind \"Mais\". */\nexport interface OverflowSplit<T extends Record<string, unknown>> {\n  inline: OverflowField<T>[];\n  overflow: OverflowField<T>[];\n  /**\n   * Step 2 — Exibir/Exportar drop their text labels and become icons.\n   * Cheap: both keep their icon, their tooltip and their position.\n   */\n  compactControls: boolean;\n  /**\n   * Step 5, and the LAST resort — the \"N de N\" counter is dropped.\n   *\n   * Only once every control has already collapsed and the row STILL does not\n   * fit, which on a six-filter table is below about 400px. The counter goes\n   * last because it is the only thing left that reports rather than does: an\n   * operator can act without knowing the total, but not without the search.\n   */\n  counterHidden: boolean;\n  /**\n   * Step 4 — the search collapses to a magnifier that expands on click.\n   * The most expensive step, so it is taken last: the search is the one\n   * control on the bar that cannot be guessed from an icon's position.\n   */\n  searchCollapsed: boolean;\n  /**\n   * Step 6, below even the counter — \"Limpar\" leaves the bar.\n   *\n   * The one control here with a second home: the overflow panel's footer\n   * carries \"Limpar todos os filtros\". So it goes before the search icon or\n   * \"Mais\", neither of which has anywhere else to be.\n   */\n  clearAllHidden: boolean;\n  /**\n   * Expanding the magnifier must take the whole cluster, filters and all.\n   *\n   * Only on the rungs where what is left over would be too narrow to read —\n   * on a large phone the box simply shrinks and the filters stay, which is why\n   * this is its own answer rather than `searchCollapsed` reused.\n   */\n  searchTakeover: boolean;\n  /** Attach to the toolbar row being measured. */\n  barRef: React.RefObject<HTMLDivElement | null>;\n}\n\n/** Every declared control, pills first, in the order the bar renders them. */\nexport function toOverflowFields<T extends Record<string, unknown>>(\n  fields: FilterFieldConfig<T>[],\n  rangeFields: RangeFieldConfig<T>[],\n): OverflowField<T>[] {\n  return [\n    ...fields.map((pill) => ({ id: pill.id, label: pill.label, group: \"pill\" as const, pill })),\n    ...rangeFields.map((range) => ({ id: range.id, label: range.label, group: \"range\" as const, range })),\n  ];\n}\n\n\n/** Is this control carrying a value the operator set? */\nfunction isActiveField<T extends Record<string, unknown>>(\n  field: OverflowField<T>,\n  pills: Record<string, string[]>,\n  ranges: Record<string, RangeValue>,\n): boolean {\n  return field.group === \"pill\"\n    ? (pills[field.id]?.length ?? 0) > 0\n    : isRangeSet(ranges[field.id]);\n}\n\n/** Estimated rendered width of one control at its CURRENT value. */\nfunction fieldWidth<T extends Record<string, unknown>>(\n  field: OverflowField<T>,\n  pills: Record<string, string[]>,\n  ranges: Record<string, RangeValue>,\n): number {\n  if (field.group === \"pill\") return estimateWidth(pillText(field, pills[field.id] ?? []), 0);\n  // A bounded range renders two number inputs beside its label.\n  return estimateWidth(field.label, isRangeSet(ranges[field.id]) ? 100 : 0);\n}\n\n/** What one split costs on the bar, so the ladder below can price the next step. */\ntype Split<T extends Record<string, unknown>> = {\n  inline: OverflowField<T>[];\n  overflow: OverflowField<T>[];\n  /** Width the surviving inline controls occupy, incl. the \"Mais\" button. */\n  used: number;\n};\n\n/** Step 1 — shed filter controls into the overflow. Pure. */\nfunction splitFilters<T extends Record<string, unknown>>(\n  all: OverflowField<T>[],\n  pills: Record<string, string[]>,\n  ranges: Record<string, RangeValue>,\n  width: number,\n  /** Search + counter + right cluster + chrome, at the rung being considered. */\n  furniture: number,\n  /** Is the bar already down to icons? \"Mais\" shrinks with everything else. */\n  compact: boolean,\n): Split<T> {\n  const active = all.filter((field) => isActiveField(field, pills, ranges));\n  const idle = all.filter((field) => !isActiveField(field, pills, ranges));\n\n  // \"Limpar\" rides the end of the cluster whenever anything is applied.\n  const clearCost = active.length > 0 ? RESERVED.clearAll + GAP : 0;\n  // APPLIED FIRST, BUT NOT EXEMPT.\n  //\n  // Applied controls take the visible slots ahead of idle ones — that part was\n  // always right. Exempting them from the overflow entirely was not: applying\n  // a value LENGTHENS a control (\"Pagamento (1)\"), so on a phone four applied\n  // filters claimed more width than the row had and the bar simply painted\n  // past its own edge, leaving pills reachable only by scrolling sideways.\n  //\n  // An applied filter hidden in \"Mais\" is not lost the way it would be if it\n  // vanished silently: the trigger goes to the applied tone and says how many\n  // are in there (see `MoreTrigger`), which is the same signal the pill itself\n  // was carrying. A control you scroll off-screen carries no signal at all.\n  //\n  // The keep-what-fits loop itself is `splitToFit` (`utility/Overflow`) — the\n  // one part of this that is not filter-shaped, and the part a second cluster\n  // in the design system would otherwise have had to reimplement.\n  const split = splitToFit(all, {\n    widthOf: (field) => fieldWidth(field, pills, ranges),\n    keyOf: (field) => field.id,\n    gap: GAP,\n    available: width - furniture - clearCost,\n    // The overflow button at the width it will actually have, which on a phone\n    // is the icon-and-badge one.\n    overflowCost: compact ? RESERVED.overflowButtonCompact : RESERVED.overflowButton,\n    priority: [...active, ...idle],\n  });\n  return { ...split, used: split.used + clearCost };\n}\n\n/**\n * THE DEGRADATION LADDER — cheapest loss first, and each rung taken only if\n * the one before it did not free enough:\n *\n *   1. filter controls move into the \"Mais\" overflow   (`splitFilters`)\n *   2. Exibir / Exportar drop their text labels        (`compactControls`)\n *   3. the search shrinks toward its minimum           (CSS: it is `flex: 1`)\n *   4. the search itself collapses to an icon          (`searchCollapsed`)\n *\n * Step 3 needs no flag — the search is a flex child, so it gives up width on\n * its own until it hits `RESERVED.search`. The flags mark the two steps that\n * change what is RENDERED rather than how wide it is.\n *\n * Measured against what is CURRENTLY on the bar, never a breakpoint: a\n * two-filter page and a five-filter page would otherwise collapse at the same\n * width, and only one of them would be right.\n */\nfunction computeSplit<T extends Record<string, unknown>>(\n  all: OverflowField<T>[],\n  pills: Record<string, string[]>,\n  ranges: Record<string, RangeValue>,\n  width: number,\n  /** Does the host render \"Exportar\" beside \"Exibir\"? Half the cluster if not. */\n  hasExport: boolean,\n): Omit<OverflowSplit<T>, \"barRef\"> {\n  // Unmeasured (SSR, or jsdom without a ResizeObserver) ⇒ degrade nothing.\n  if (width === 0) {\n    return {\n      inline: all,\n      overflow: [],\n      compactControls: false,\n      counterHidden: false,\n      searchCollapsed: false,\n      clearAllHidden: false,\n      searchTakeover: false,\n    };\n  }\n  // Pass 1 prices the furniture at its widest — no rung has been taken yet.\n  let split = splitFilters(all, pills, ranges, width, furnitureCost(UNCOLLAPSED, hasExport), false);\n  let flags = ladderFlags(split, width, hasExport);\n  // RE-SPEND WHAT THE LATER RUNGS FREED.\n  //\n  // Rungs 2/4/5 turn 200 + 96 + 216 of furniture into 44 + 0 + 140, and until\n  // this loop existed nobody handed those ~330px back to the filters: the\n  // split was decided once, against the uncollapsed row, so a phone shed every\n  // control and then sat with a band of empty bar beside \"Mais 5\".\n  //\n  // Settles rather than oscillates, and cannot overfill: a cheaper furniture\n  // can only give the filters MORE room, more filter width can only push the\n  // ladder FURTHER down, and a further rung can only make the furniture\n  // cheaper again — so the budget decreases monotonically and the loop exits\n  // the moment it stops moving. The bound is a backstop, not the exit.\n  let budget = furnitureCost(UNCOLLAPSED, hasExport);\n  for (let pass = 0; pass < 3; pass += 1) {\n    const freed = furnitureCost(flags, hasExport);\n    if (freed >= budget) break;\n    budget = freed;\n    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls);\n    flags = ladderFlags(split, width, hasExport);\n  }\n  return { inline: split.inline, overflow: split.overflow, ...flags };\n}\n\n/** The widest the furniture ever is — every rung still untaken. */\nconst UNCOLLAPSED = { searchCollapsed: false, counterHidden: false, compactControls: false };\n\n/** Rungs 2 and 4-6, priced against what the filters actually took. */\nfunction ladderFlags<T extends Record<string, unknown>>(\n  split: Split<T>,\n  width: number,\n  hasExport: boolean,\n): Omit<OverflowSplit<T>, \"barRef\" | \"inline\" | \"overflow\"> {\n  const { overflow, used } = split;\n  const base = width - used - RESERVED.chrome;\n\n  // Would the search still make its minimum with the labels on?\n  const compactControls = base - RESERVED.counter - rightClusterCost(hasExport, false) < RESERVED.search;\n  const rightCost = rightClusterCost(hasExport, compactControls);\n  // …and with them off?\n  const searchCollapsed = base - RESERVED.counter - rightCost < RESERVED.search;\n  // Everything has collapsed and the row STILL overflows. The controls cannot\n  // shrink further — they are `flexShrink: 0` precisely so an over-packed row\n  // sheds rather than squeezes — so without this last rung they simply paint\n  // outside the toolbar, which is what a narrow phone was doing.\n  const counterHidden =\n    searchCollapsed && base - RESERVED.counter - rightCost < RESERVED.searchIcon;\n  // Step 6 — below even that, \"Limpar\" leaves the bar. It is the ONLY control\n  // here with a second home: the overflow panel's footer carries \"Limpar todos\n  // os filtros\", so nothing is lost, which is exactly why it goes before the\n  // search icon or \"Mais\" (neither of which has anywhere else to be). Guarded\n  // on there BEING an overflow, because with no panel the footer does not\n  // exist and dropping this would strand the operator.\n  const clearAllHidden = counterHidden && overflow.length > 0;\n  // What the keyword box would get if the operator expanded the magnifier.\n  // `searchCollapsed` is a different question — it asks whether the box fits at\n  // its PREFERRED 200px, and is deliberately pessimistic — so reusing it to\n  // decide the takeover evicted the filters on screens where the box had plenty\n  // of room to simply shrink.\n  //\n  // Asked with the inline filters SHED, because shedding them is exactly what\n  // expanding the box does: the row re-splits and they go behind \"Mais\".\n  // Measuring against the resting row instead made a filter argue for its own\n  // eviction — now that a large phone keeps one, its width came out of `base`,\n  // pushed the box under `usableSearch`, and tipped a row that had ample space\n  // to share into a full takeover.\n  const overflowButton = compactControls\n    ? RESERVED.overflowButtonCompact\n    : RESERVED.overflowButton;\n  const shedRoom = width - RESERVED.chrome - (overflow.length > 0 ? overflowButton : 0);\n  const searchBoxRoom = shedRoom - (counterHidden ? 0 : RESERVED.counter) - rightCost;\n  // Below this a box is too narrow to read what you typed into it, and shrinking\n  // further buys nothing; that is the only point at which taking the whole\n  // cluster is worth losing the filters.\n  const searchTakeover = searchCollapsed && searchBoxRoom < RESERVED.usableSearch;\n\n  return { compactControls, counterHidden, searchCollapsed, clearAllHidden, searchTakeover };\n}\n\n/**\n * Split the declared filter controls into what fits and what goes behind\n * \"Mais\", measured against the live toolbar width.\n *\n * Cached on a SIGNATURE rather than by `useMemo` over the inputs: hosts declare\n * their fields inline, so `all` is a fresh array on every render while the\n * configuration is unchanged, and a reference-keyed memo would never hit.\n */\nexport function useFilterOverflow<T extends Record<string, unknown>>(\n  all: OverflowField<T>[],\n  pills: Record<string, string[]>,\n  ranges: Record<string, RangeValue>,\n  /**\n   * A filter control is open — hold the current answer until it closes.\n   *\n   * Applying a filter changes that control's LABEL (\"Valor\" becomes \"Valor: ≥\n   * R$ 1\"), which changes its measured width, which re-runs the whole split\n   * while its popover is open on top of it. Measured: setting a minimum moved\n   * the trigger 192px left, took the popover with it, and pushed two other\n   * controls into a newly-appeared \"Mais 2\" — so reaching for the second bound\n   * meant chasing the control across the row. Nobody sets a range that way.\n   *\n   * Frozen only for the duration: closing re-measures against the new labels,\n   * so the row still ends up correct, it just does not rearrange under a hand\n   * that is mid-edit.\n   */\n  frozen = false,\n  /** Whether \"Exportar\" is on the bar — see `rightClusterCost`. */\n  hasExport = true,\n): OverflowSplit<T> {\n  // The measurement is `useMeasuredWidth` (`utility/Overflow`): the same\n  // ResizeObserver every collapsing cluster in the design system reads, so\n  // there is one loop to get right rather than one per bar. `0` until the\n  // first measurement lands (and forever under SSR or jsdom), which\n  // `computeSplit` reads as \"degrade nothing\".\n  const { ref: barRef, width } = useMeasuredWidth<HTMLDivElement>();\n  const signature = JSON.stringify({\n    ids: all.map((field) => field.id),\n    pills,\n    ranges,\n    width,\n    hasExport,\n  });\n  const cache = useRef<{ signature: string; split: ReturnType<typeof computeSplit<T>> } | null>(null);\n  if (cache.current === null || (!frozen && cache.current.signature !== signature)) {\n    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport) };\n  }\n  return { ...cache.current.split, barRef };\n}\n"],"mappings":";;;;;;;;;;;;;;;AAEA,SAAS,cAAc;AAgGhB,SAAS,iBACd,QACA,aACoB;AACpB,SAAO;AAAA,IACL,GAAG,OAAO,IAAI,CAAC,UAAU,EAAE,IAAI,KAAK,IAAI,OAAO,KAAK,OAAO,OAAO,QAAiB,KAAK,EAAE;AAAA,IAC1F,GAAG,YAAY,IAAI,CAAC,WAAW,EAAE,IAAI,MAAM,IAAI,OAAO,MAAM,OAAO,OAAO,SAAkB,MAAM,EAAE;AAAA,EACtG;AACF;AAIA,SAAS,cACP,OACA,OACA,QACS;AACT,SAAO,MAAM,UAAU,UAClB,MAAM,MAAM,EAAE,GAAG,UAAU,KAAK,IACjC,WAAW,OAAO,MAAM,EAAE,CAAC;AACjC;AAGA,SAAS,WACP,OACA,OACA,QACQ;AACR,MAAI,MAAM,UAAU,OAAQ,QAAO,cAAc,SAAS,OAAO,MAAM,MAAM,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC;AAE1F,SAAO,cAAc,MAAM,OAAO,WAAW,OAAO,MAAM,EAAE,CAAC,IAAI,MAAM,CAAC;AAC1E;AAWA,SAAS,aACP,KACA,OACA,QACA,OAEA,WAEA,SACU;AACV,QAAM,SAAS,IAAI,OAAO,CAAC,UAAU,cAAc,OAAO,OAAO,MAAM,CAAC;AACxE,QAAM,OAAO,IAAI,OAAO,CAAC,UAAU,CAAC,cAAc,OAAO,OAAO,MAAM,CAAC;AAGvE,QAAM,YAAY,OAAO,SAAS,IAAI,SAAS,WAAW,MAAM;AAiBhE,QAAM,QAAQ,WAAW,KAAK;AAAA,IAC5B,SAAS,CAAC,UAAU,WAAW,OAAO,OAAO,MAAM;AAAA,IACnD,OAAO,CAAC,UAAU,MAAM;AAAA,IACxB,KAAK;AAAA,IACL,WAAW,QAAQ,YAAY;AAAA;AAAA;AAAA,IAG/B,cAAc,UAAU,SAAS,wBAAwB,SAAS;AAAA,IAClE,UAAU,CAAC,GAAG,QAAQ,GAAG,IAAI;AAAA,EAC/B,CAAC;AACD,SAAO,EAAE,GAAG,OAAO,MAAM,MAAM,OAAO,UAAU;AAClD;AAmBA,SAAS,aACP,KACA,OACA,QACA,OAEA,WACkC;AAElC,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,UAAU,CAAC;AAAA,MACX,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,MAAI,QAAQ,aAAa,KAAK,OAAO,QAAQ,OAAO,cAAc,aAAa,SAAS,GAAG,KAAK;AAChG,MAAI,QAAQ,YAAY,OAAO,OAAO,SAAS;AAa/C,MAAI,SAAS,cAAc,aAAa,SAAS;AACjD,WAAS,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG;AACtC,UAAM,QAAQ,cAAc,OAAO,SAAS;AAC5C,QAAI,SAAS,OAAQ;AACrB,aAAS;AACT,YAAQ,aAAa,KAAK,OAAO,QAAQ,OAAO,QAAQ,MAAM,eAAe;AAC7E,YAAQ,YAAY,OAAO,OAAO,SAAS;AAAA,EAC7C;AACA,SAAO,EAAE,QAAQ,MAAM,QAAQ,UAAU,MAAM,UAAU,GAAG,MAAM;AACpE;AAGA,IAAM,cAAc,EAAE,iBAAiB,OAAO,eAAe,OAAO,iBAAiB,MAAM;AAG3F,SAAS,YACP,OACA,OACA,WAC0D;AAC1D,QAAM,EAAE,UAAU,KAAK,IAAI;AAC3B,QAAM,OAAO,QAAQ,OAAO,SAAS;AAGrC,QAAM,kBAAkB,OAAO,SAAS,UAAU,iBAAiB,WAAW,KAAK,IAAI,SAAS;AAChG,QAAM,YAAY,iBAAiB,WAAW,eAAe;AAE7D,QAAM,kBAAkB,OAAO,SAAS,UAAU,YAAY,SAAS;AAKvE,QAAM,gBACJ,mBAAmB,OAAO,SAAS,UAAU,YAAY,SAAS;AAOpE,QAAM,iBAAiB,iBAAiB,SAAS,SAAS;AAa1D,QAAM,iBAAiB,kBACnB,SAAS,wBACT,SAAS;AACb,QAAM,WAAW,QAAQ,SAAS,UAAU,SAAS,SAAS,IAAI,iBAAiB;AACnF,QAAM,gBAAgB,YAAY,gBAAgB,IAAI,SAAS,WAAW;AAI1E,QAAM,iBAAiB,mBAAmB,gBAAgB,SAAS;AAEnE,SAAO,EAAE,iBAAiB,eAAe,iBAAiB,gBAAgB,eAAe;AAC3F;AAUO,SAAS,kBACd,KACA,OACA,QAeA,SAAS,OAET,YAAY,MACM;AAMlB,QAAM,EAAE,KAAK,QAAQ,MAAM,IAAI,iBAAiC;AAChE,QAAM,YAAY,KAAK,UAAU;AAAA,IAC/B,KAAK,IAAI,IAAI,CAAC,UAAU,MAAM,EAAE;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAQ,OAAgF,IAAI;AAClG,MAAI,MAAM,YAAY,QAAS,CAAC,UAAU,MAAM,QAAQ,cAAc,WAAY;AAChF,UAAM,UAAU,EAAE,WAAW,OAAO,aAAa,KAAK,OAAO,QAAQ,OAAO,SAAS,EAAE;AAAA,EACzF;AACA,SAAO,EAAE,GAAG,MAAM,QAAQ,OAAO,OAAO;AAC1C;","names":[]}

package/dist/chunk-TTHDDTJU.js

@@ -0,0 +1,90 @@
+import {
+  AddressSuggestionsPaper
+} from "./chunk-4GMSUI77.js";
+import {
+  AddressOption
+} from "./chunk-3FQ4Q6PX.js";
+import {
+  AddressInputField
+} from "./chunk-SJBTJPSZ.js";
+import {
+  MIN_QUERY_LENGTH,
+  addressOptionLabel,
+  isSameAddressOption
+} from "./chunk-MTGEJRE4.js";
+
+// src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx
+import { Alert, Autocomplete, Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AddressAutocompleteField = ({
+  copy,
+  variant,
+  label,
+  placeholder,
+  icon,
+  floating,
+  error,
+  helperText,
+  disabled,
+  required,
+  fullWidth,
+  getCurrentLocation,
+  inputValue,
+  options,
+  loading,
+  apiError,
+  handleInputChange,
+  handleSelect,
+  handleGetCurrentLocation
+}) => /* @__PURE__ */ jsxs(Box, { "data-testid": "address-autocomplete-container", children: [
+  /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      freeSolo: true,
+      options,
+      inputValue,
+      onInputChange: handleInputChange,
+      onChange: handleSelect,
+      loading,
+      disabled,
+      fullWidth,
+      getOptionLabel: addressOptionLabel,
+      isOptionEqualToValue: isSameAddressOption,
+      PaperComponent: AddressSuggestionsPaper,
+      noOptionsText: inputValue.length <= MIN_QUERY_LENGTH ? "Type at least 3 characters" : "No addresses found",
+      renderOption: ({ key, ...optionProps }, option, state) => /* @__PURE__ */ jsx(
+        AddressOption,
+        {
+          optionProps,
+          option,
+          index: state.index
+        },
+        key
+      ),
+      renderInput: (params) => /* @__PURE__ */ jsx(
+        AddressInputField,
+        {
+          copy,
+          params,
+          addressVariant: variant,
+          label: floating ? void 0 : label,
+          placeholder,
+          icon,
+          error: error || !!apiError,
+          helperText: apiError || helperText,
+          required,
+          disabled,
+          loading,
+          showCurrentLocation: getCurrentLocation && !loading,
+          onGetCurrentLocation: handleGetCurrentLocation
+        }
+      )
+    }
+  ),
+  apiError && /* @__PURE__ */ jsx(Alert, { severity: "warning", sx: { mt: 1 }, children: apiError })
+] });
+
+export {
+  AddressAutocompleteField
+};
+//# sourceMappingURL=chunk-TTHDDTJU.js.map

package/dist/chunk-TTHDDTJU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx"],"sourcesContent":["import { Alert, Autocomplete, Box } from '@mui/material';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport {\n  addressOptionLabel,\n  isSameAddressOption,\n  MIN_QUERY_LENGTH,\n  type ResolvedAddressProps,\n} from './AddressAutocomplete.helpers';\nimport type { AddressAutocompleteState } from './AddressAutocomplete.hooks';\nimport { AddressInputField } from './AddressInputField';\nimport { AddressOption } from './AddressOption';\nimport { AddressSuggestionsPaper } from './AddressSuggestionsPaper';\n\nexport type AddressAutocompleteFieldProps = ResolvedAddressProps & AddressAutocompleteState;\n\n// The live field, rendered once Google Maps (or the mock stand-in) is ready.\nexport const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({\n  copy,\n  variant,\n  label,\n  placeholder,\n  icon,\n  floating,\n  error,\n  helperText,\n  disabled,\n  required,\n  fullWidth,\n  getCurrentLocation,\n  inputValue,\n  options,\n  loading,\n  apiError,\n  handleInputChange,\n  handleSelect,\n  handleGetCurrentLocation,\n}) => (\n  <Box data-testid=\"address-autocomplete-container\">\n    <Autocomplete\n      freeSolo\n      options={options}\n      inputValue={inputValue}\n      onInputChange={handleInputChange}\n      onChange={handleSelect}\n      loading={loading}\n      disabled={disabled}\n      fullWidth={fullWidth}\n      getOptionLabel={addressOptionLabel}\n      isOptionEqualToValue={isSameAddressOption}\n      PaperComponent={AddressSuggestionsPaper}\n      noOptionsText={\n        inputValue.length <= MIN_QUERY_LENGTH ? 'Type at least 3 characters' : 'No addresses found'\n      }\n      renderOption={({ key, ...optionProps }, option, state) => (\n        <AddressOption\n          key={key}\n          optionProps={optionProps}\n          option={option}\n          index={state.index}\n        />\n      )}\n      renderInput={(params) => (\n        <AddressInputField\n          copy={copy}\n          params={params}\n          addressVariant={variant}\n          label={floating ? undefined : label}\n          placeholder={placeholder}\n          icon={icon}\n          error={error || !!apiError}\n          helperText={apiError || helperText}\n          required={required}\n          disabled={disabled}\n          loading={loading}\n          showCurrentLocation={getCurrentLocation && !loading}\n          onGetCurrentLocation={handleGetCurrentLocation}\n        />\n      )}\n    />\n    {apiError && (\n      <Alert severity=\"warning\" sx={{ mt: 1 }}>\n        {apiError}\n      </Alert>\n    )}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,OAAO,cAAc,WAAW;AAuCvC,SAiBM,KAjBN;AArBK,IAAM,2BAA8D,CAAC;AAAA,EAC1E;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,MACE,qBAAC,OAAI,eAAY,kCACf;AAAA;AAAA,IAAC;AAAA;AAAA,MACC,UAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,eACE,WAAW,UAAU,mBAAmB,+BAA+B;AAAA,MAEzE,cAAc,CAAC,EAAE,KAAK,GAAG,YAAY,GAAG,QAAQ,UAC9C;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,OAAO,MAAM;AAAA;AAAA,QAHR;AAAA,MAIP;AAAA,MAEF,aAAa,CAAC,WACZ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,gBAAgB;AAAA,UAChB,OAAO,WAAW,SAAY;AAAA,UAC9B;AAAA,UACA;AAAA,UACA,OAAO,SAAS,CAAC,CAAC;AAAA,UAClB,YAAY,YAAY;AAAA,UACxB;AAAA,UACA;AAAA,UACA;AAAA,UACA,qBAAqB,sBAAsB,CAAC;AAAA,UAC5C,sBAAsB;AAAA;AAAA,MACxB;AAAA;AAAA,EAEJ;AAAA,EACC,YACC,oBAAC,SAAM,UAAS,WAAU,IAAI,EAAE,IAAI,EAAE,GACnC,oBACH;AAAA,GAEJ;","names":[]}

package/dist/chunk-TUBCN4DJ.js

@@ -0,0 +1,46 @@
+// src/components/data-display/MapPreview/mapProjection.ts
+var TILE_SIZE = 256;
+var EQUATOR_METRES_PER_PIXEL = 156543.03392;
+var SCALE_BAR_PIXELS = 100;
+var GEOCODE_DELAY_MS = 300;
+var project = (lat, lng) => {
+  const siny = Math.sin(lat * Math.PI / 180);
+  const boundedSiny = Math.max(-0.9999, Math.min(0.9999, siny));
+  return {
+    x: TILE_SIZE * (0.5 + lng / 360),
+    y: TILE_SIZE * (0.5 - Math.log((1 + boundedSiny) / (1 - boundedSiny)) / (4 * Math.PI))
+  };
+};
+var getTileCoordinates = (lat, lng, zoom) => {
+  const scale = 1 << zoom;
+  const world = project(lat, lng);
+  return {
+    x: Math.floor(Math.floor(world.x * scale) / TILE_SIZE),
+    y: Math.floor(Math.floor(world.y * scale) / TILE_SIZE)
+  };
+};
+var getScaleDistance = (zoom) => {
+  const distance = EQUATOR_METRES_PER_PIXEL / Math.pow(2, zoom) * SCALE_BAR_PIXELS;
+  if (distance >= 1e3) return `${Math.round(distance / 1e3)} km`;
+  if (distance >= 100) return `${Math.round(distance / 100) * 100} m`;
+  return `${Math.round(distance)} m`;
+};
+var MOCK_GEOCODE_RESULTS = {
+  "san francisco": { lat: 37.7749, lng: -122.4194 },
+  "new york": { lat: 40.7128, lng: -74.006 },
+  london: { lat: 51.5074, lng: -0.1278 },
+  tokyo: { lat: 35.6762, lng: 139.6503 },
+  paris: { lat: 48.8566, lng: 2.3522 }
+};
+var geocode = async (address) => {
+  await new Promise((resolve) => window.setTimeout(resolve, GEOCODE_DELAY_MS));
+  return MOCK_GEOCODE_RESULTS[address.toLowerCase().trim()] || null;
+};
+
+export {
+  TILE_SIZE,
+  getTileCoordinates,
+  getScaleDistance,
+  geocode
+};
+//# sourceMappingURL=chunk-TUBCN4DJ.js.map

package/dist/chunk-TUBCN4DJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/mapProjection.ts"],"sourcesContent":["export const TILE_SIZE = 256;\n\n// Metres covered by one pixel at zoom 0 on the equator; each zoom level halves it.\nconst EQUATOR_METRES_PER_PIXEL = 156543.03392;\nconst SCALE_BAR_PIXELS = 100;\nconst GEOCODE_DELAY_MS = 300;\n\n// Web Mercator. Longitude maps linearly; latitude goes through the log of the\n// tangent, clamped just short of the poles where that diverges.\nconst project = (lat: number, lng: number) => {\n  const siny = Math.sin((lat * Math.PI) / 180);\n  const boundedSiny = Math.max(-0.9999, Math.min(0.9999, siny));\n\n  return {\n    x: TILE_SIZE * (0.5 + lng / 360),\n    y: TILE_SIZE * (0.5 - Math.log((1 + boundedSiny) / (1 - boundedSiny)) / (4 * Math.PI)),\n  };\n};\n\nexport const getTileCoordinates = (lat: number, lng: number, zoom: number) => {\n  const scale = 1 << zoom;\n  const world = project(lat, lng);\n\n  return {\n    x: Math.floor(Math.floor(world.x * scale) / TILE_SIZE),\n    y: Math.floor(Math.floor(world.y * scale) / TILE_SIZE),\n  };\n};\n\nexport const getScaleDistance = (zoom: number): string => {\n  const distance = (EQUATOR_METRES_PER_PIXEL / Math.pow(2, zoom)) * SCALE_BAR_PIXELS;\n\n  if (distance >= 1000) return `${Math.round(distance / 1000)} km`;\n  // Round to the nearest 100m so the bar reads as a round number.\n  if (distance >= 100) return `${Math.round(distance / 100) * 100} m`;\n  return `${Math.round(distance)} m`;\n};\n\nconst MOCK_GEOCODE_RESULTS: Record<string, { lat: number; lng: number }> = {\n  'san francisco': { lat: 37.7749, lng: -122.4194 },\n  'new york': { lat: 40.7128, lng: -74.006 },\n  london: { lat: 51.5074, lng: -0.1278 },\n  tokyo: { lat: 35.6762, lng: 139.6503 },\n  paris: { lat: 48.8566, lng: 2.3522 },\n};\n\n// Stands in for a Places lookup, delay included so the disabled search field is\n// actually observable.\nexport const geocode = async (address: string): Promise<{ lat: number; lng: number } | null> => {\n  await new Promise((resolve) => window.setTimeout(resolve, GEOCODE_DELAY_MS));\n  return MOCK_GEOCODE_RESULTS[address.toLowerCase().trim()] || null;\n};\n"],"mappings":";AAAO,IAAM,YAAY;AAGzB,IAAM,2BAA2B;AACjC,IAAM,mBAAmB;AACzB,IAAM,mBAAmB;AAIzB,IAAM,UAAU,CAAC,KAAa,QAAgB;AAC5C,QAAM,OAAO,KAAK,IAAK,MAAM,KAAK,KAAM,GAAG;AAC3C,QAAM,cAAc,KAAK,IAAI,SAAS,KAAK,IAAI,QAAQ,IAAI,CAAC;AAE5D,SAAO;AAAA,IACL,GAAG,aAAa,MAAM,MAAM;AAAA,IAC5B,GAAG,aAAa,MAAM,KAAK,KAAK,IAAI,gBAAgB,IAAI,YAAY,KAAK,IAAI,KAAK;AAAA,EACpF;AACF;AAEO,IAAM,qBAAqB,CAAC,KAAa,KAAa,SAAiB;AAC5E,QAAM,QAAQ,KAAK;AACnB,QAAM,QAAQ,QAAQ,KAAK,GAAG;AAE9B,SAAO;AAAA,IACL,GAAG,KAAK,MAAM,KAAK,MAAM,MAAM,IAAI,KAAK,IAAI,SAAS;AAAA,IACrD,GAAG,KAAK,MAAM,KAAK,MAAM,MAAM,IAAI,KAAK,IAAI,SAAS;AAAA,EACvD;AACF;AAEO,IAAM,mBAAmB,CAAC,SAAyB;AACxD,QAAM,WAAY,2BAA2B,KAAK,IAAI,GAAG,IAAI,IAAK;AAElE,MAAI,YAAY,IAAM,QAAO,GAAG,KAAK,MAAM,WAAW,GAAI,CAAC;AAE3D,MAAI,YAAY,IAAK,QAAO,GAAG,KAAK,MAAM,WAAW,GAAG,IAAI,GAAG;AAC/D,SAAO,GAAG,KAAK,MAAM,QAAQ,CAAC;AAChC;AAEA,IAAM,uBAAqE;AAAA,EACzE,iBAAiB,EAAE,KAAK,SAAS,KAAK,UAAU;AAAA,EAChD,YAAY,EAAE,KAAK,SAAS,KAAK,QAAQ;AAAA,EACzC,QAAQ,EAAE,KAAK,SAAS,KAAK,QAAQ;AAAA,EACrC,OAAO,EAAE,KAAK,SAAS,KAAK,SAAS;AAAA,EACrC,OAAO,EAAE,KAAK,SAAS,KAAK,OAAO;AACrC;AAIO,IAAM,UAAU,OAAO,YAAkE;AAC9F,QAAM,IAAI,QAAQ,CAAC,YAAY,OAAO,WAAW,SAAS,gBAAgB,CAAC;AAC3E,SAAO,qBAAqB,QAAQ,YAAY,EAAE,KAAK,CAAC,KAAK;AAC/D;","names":[]}

package/dist/chunk-TXCIFJ6M.js

@@ -0,0 +1,113 @@
+// src/components/form/DateRangePicker/DateRangePickerQuickList.tsx
+import { Box } from "@mui/material";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var optionSx = (active, overMax) => ({
+  display: "block",
+  // Full-width rows in the side column; pills in the narrow row. A fixed full
+  // width in both would make the narrow layout nine stacked lines.
+  width: { xs: "auto", md: "100%" },
+  // A pill must not be squeezed by its neighbours — the row SCROLLS rather
+  // than compressing "Este trimestre" into two characters and an ellipsis.
+  flex: { xs: "0 0 auto", md: "0 1 auto" },
+  textAlign: "left",
+  font: "inherit",
+  fontSize: "0.875rem",
+  fontWeight: active ? 600 : 400,
+  lineHeight: 1.4,
+  px: 1.5,
+  py: 0.75,
+  whiteSpace: { xs: "nowrap", md: "normal" },
+  border: "1px solid",
+  // Narrow, an entry has to look tappable on its own, with no column and no
+  // rule to group it — so the pill carries a visible edge. Beside the calendar
+  // the group already reads as a list and a border on every row would be nine
+  // boxes where the selected one should be the only marked thing.
+  borderColor: active ? "primary.main" : { xs: "divider", md: "transparent" },
+  borderRadius: { xs: 999, md: 1 },
+  cursor: overMax ? "not-allowed" : "pointer",
+  color: overMax ? "text.disabled" : active ? "primary.main" : "text.primary",
+  backgroundColor: active ? "action.selected" : "transparent",
+  "&:hover": { backgroundColor: overMax ? "transparent" : "action.hover" },
+  "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 1 }
+});
+var REASON_SX = {
+  display: "block",
+  fontSize: "0.6875rem",
+  lineHeight: 1.3,
+  mt: 0.25,
+  color: "text.disabled"
+};
+function DateRangeQuickList({
+  options,
+  activeId,
+  onPick,
+  reasonFor,
+  label,
+  dataTestId
+}) {
+  const reasonPrefix = useId();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "group",
+      "aria-label": label,
+      "data-testid": `${dataTestId}-quick-list`,
+      sx: {
+        display: "flex",
+        // A column beside the calendar; ONE scrolling row of pills above it
+        // once there is no width for both.
+        //
+        // Scrolling rather than wrapping: nine wrapped pills take three or four
+        // lines at 390px, which pushes the calendar most of a screen down and
+        // makes the quick ranges — the fastest way to answer — the thing you
+        // have to scroll past. One line keeps the calendar in view and costs a
+        // horizontal swipe, which is the gesture a chip row already invites.
+        flexDirection: { xs: "row", md: "column" },
+        flexWrap: { xs: "nowrap", md: "wrap" },
+        overflowX: { xs: "auto", md: "visible" },
+        // Room for the focus ring, which an `overflow` container would clip.
+        px: { xs: 0.25, md: 0 },
+        py: { xs: 0.25, md: 0 },
+        // The scrollbar is chrome on a phone and noise on a trackpad; the pills
+        // themselves are the affordance, and the last one sits half-cut at the
+        // edge to say the row continues.
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": { display: "none" },
+        alignContent: "flex-start",
+        gap: 0.5,
+        minWidth: { md: 168 },
+        maxWidth: { md: 200 }
+      },
+      children: options.map((option) => {
+        const active = option.id === activeId;
+        const reasonId = `${reasonPrefix}-${option.id}`;
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "button",
+            type: "button",
+            "aria-pressed": active,
+            "aria-disabled": option.overMax || void 0,
+            "aria-describedby": option.overMax ? reasonId : void 0,
+            "data-testid": `${dataTestId}-quick-${option.id}`,
+            onClick: () => {
+              if (!option.overMax) onPick(option);
+            },
+            sx: optionSx(active, option.overMax),
+            children: [
+              option.label,
+              option.overMax && /* @__PURE__ */ jsx(Box, { component: "span", id: reasonId, sx: REASON_SX, children: reasonFor(option) })
+            ]
+          },
+          option.id
+        );
+      })
+    }
+  );
+}
+
+export {
+  DateRangeQuickList
+};
+//# sourceMappingURL=chunk-TXCIFJ6M.js.map

package/dist/chunk-TXCIFJ6M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/DateRangePicker/DateRangePickerQuickList.tsx"],"sourcesContent":["/**\n * The quick-pick column beside the calendar.\n *\n * These are BUTTONS, not links or list rows: each one sets the range and the\n * pressed one stays visibly pressed, which is what `aria-pressed` says out\n * loud. (A listbox with `aria-selected` would model it too — the rule is to\n * pick one and use it for every entry, so a reader's screen reader describes\n * the whole column the same way.)\n *\n * An over-cap entry is `aria-disabled` and keeps its place in the tab order,\n * with the reason rendered under the label. Removing it, or quietly shortening\n * the window it hands back, both answer \"why can't I have this year?\" with\n * silence.\n */\nimport { Box } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material';\nimport React, { useId } from 'react';\n\nimport type { ResolvedQuickRange } from './DateRangePicker.types';\n\nconst optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({\n  display: 'block',\n  // Full-width rows in the side column; pills in the narrow row. A fixed full\n  // width in both would make the narrow layout nine stacked lines.\n  width: { xs: 'auto', md: '100%' },\n  // A pill must not be squeezed by its neighbours — the row SCROLLS rather\n  // than compressing \"Este trimestre\" into two characters and an ellipsis.\n  flex: { xs: '0 0 auto', md: '0 1 auto' },\n  textAlign: 'left',\n  font: 'inherit',\n  fontSize: '0.875rem',\n  fontWeight: active ? 600 : 400,\n  lineHeight: 1.4,\n  px: 1.5,\n  py: 0.75,\n  whiteSpace: { xs: 'nowrap', md: 'normal' },\n  border: '1px solid',\n  // Narrow, an entry has to look tappable on its own, with no column and no\n  // rule to group it — so the pill carries a visible edge. Beside the calendar\n  // the group already reads as a list and a border on every row would be nine\n  // boxes where the selected one should be the only marked thing.\n  borderColor: active ? 'primary.main' : { xs: 'divider', md: 'transparent' },\n  borderRadius: { xs: 999, md: 1 },\n  cursor: overMax ? 'not-allowed' : 'pointer',\n  color: overMax ? 'text.disabled' : active ? 'primary.main' : 'text.primary',\n  backgroundColor: active ? 'action.selected' : 'transparent',\n  '&:hover': { backgroundColor: overMax ? 'transparent' : 'action.hover' },\n  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 1 },\n});\n\nconst REASON_SX: SxProps<Theme> = {\n  display: 'block',\n  fontSize: '0.6875rem',\n  lineHeight: 1.3,\n  mt: 0.25,\n  color: 'text.disabled',\n};\n\nexport interface DateRangeQuickListProps {\n  options: ResolvedQuickRange[];\n  /** The entry the current draft equals, if any. */\n  activeId: string | undefined;\n  onPick: (option: ResolvedQuickRange) => void;\n  /** Why an entry is refused, rendered under it. */\n  reasonFor: (option: ResolvedQuickRange) => string;\n  /** Accessible name of the group. */\n  label: string;\n  dataTestId: string;\n}\n\nexport function DateRangeQuickList({\n  options,\n  activeId,\n  onPick,\n  reasonFor,\n  label,\n  dataTestId,\n}: DateRangeQuickListProps): React.JSX.Element {\n  const reasonPrefix = useId();\n\n  return (\n    <Box\n      role=\"group\"\n      aria-label={label}\n      data-testid={`${dataTestId}-quick-list`}\n      sx={{\n        display: 'flex',\n        // A column beside the calendar; ONE scrolling row of pills above it\n        // once there is no width for both.\n        //\n        // Scrolling rather than wrapping: nine wrapped pills take three or four\n        // lines at 390px, which pushes the calendar most of a screen down and\n        // makes the quick ranges — the fastest way to answer — the thing you\n        // have to scroll past. One line keeps the calendar in view and costs a\n        // horizontal swipe, which is the gesture a chip row already invites.\n        flexDirection: { xs: 'row', md: 'column' },\n        flexWrap: { xs: 'nowrap', md: 'wrap' },\n        overflowX: { xs: 'auto', md: 'visible' },\n        // Room for the focus ring, which an `overflow` container would clip.\n        px: { xs: 0.25, md: 0 },\n        py: { xs: 0.25, md: 0 },\n        // The scrollbar is chrome on a phone and noise on a trackpad; the pills\n        // themselves are the affordance, and the last one sits half-cut at the\n        // edge to say the row continues.\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n        alignContent: 'flex-start',\n        gap: 0.5,\n        minWidth: { md: 168 },\n        maxWidth: { md: 200 },\n      }}\n    >\n      {options.map((option) => {\n        const active = option.id === activeId;\n        const reasonId = `${reasonPrefix}-${option.id}`;\n        return (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            key={option.id}\n            aria-pressed={active}\n            // `aria-disabled`, never the `disabled` attribute: a disabled button\n            // is skipped by the tab order, so the reason under it is unreachable\n            // by exactly the reader most likely to need it.\n            aria-disabled={option.overMax || undefined}\n            aria-describedby={option.overMax ? reasonId : undefined}\n            data-testid={`${dataTestId}-quick-${option.id}`}\n            onClick={() => {\n              if (!option.overMax) onPick(option);\n            }}\n            sx={optionSx(active, option.overMax)}\n          >\n            {option.label}\n            {option.overMax && (\n              <Box component=\"span\" id={reasonId} sx={REASON_SX}>\n                {reasonFor(option)}\n              </Box>\n            )}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n}\n"],"mappings":";AAcA,SAAS,WAAW;AAEpB,SAAgB,aAAa;AAoGnB,SAkBI,KAlBJ;AAhGV,IAAM,WAAW,CAAC,QAAiB,aAAsC;AAAA,EACvE,SAAS;AAAA;AAAA;AAAA,EAGT,OAAO,EAAE,IAAI,QAAQ,IAAI,OAAO;AAAA;AAAA;AAAA,EAGhC,MAAM,EAAE,IAAI,YAAY,IAAI,WAAW;AAAA,EACvC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY,SAAS,MAAM;AAAA,EAC3B,YAAY;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY,EAAE,IAAI,UAAU,IAAI,SAAS;AAAA,EACzC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,aAAa,SAAS,iBAAiB,EAAE,IAAI,WAAW,IAAI,cAAc;AAAA,EAC1E,cAAc,EAAE,IAAI,KAAK,IAAI,EAAE;AAAA,EAC/B,QAAQ,UAAU,gBAAgB;AAAA,EAClC,OAAO,UAAU,kBAAkB,SAAS,iBAAiB;AAAA,EAC7D,iBAAiB,SAAS,oBAAoB;AAAA,EAC9C,WAAW,EAAE,iBAAiB,UAAU,gBAAgB,eAAe;AAAA,EACvE,mBAAmB,EAAE,SAAS,aAAa,cAAc,gBAAgB,eAAe,EAAE;AAC5F;AAEA,IAAM,YAA4B;AAAA,EAChC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,IAAI;AAAA,EACJ,OAAO;AACT;AAcO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAC7C,QAAM,eAAe,MAAM;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa,GAAG,UAAU;AAAA,MAC1B,IAAI;AAAA,QACF,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAST,eAAe,EAAE,IAAI,OAAO,IAAI,SAAS;AAAA,QACzC,UAAU,EAAE,IAAI,UAAU,IAAI,OAAO;AAAA,QACrC,WAAW,EAAE,IAAI,QAAQ,IAAI,UAAU;AAAA;AAAA,QAEvC,IAAI,EAAE,IAAI,MAAM,IAAI,EAAE;AAAA,QACtB,IAAI,EAAE,IAAI,MAAM,IAAI,EAAE;AAAA;AAAA;AAAA;AAAA,QAItB,gBAAgB;AAAA,QAChB,wBAAwB,EAAE,SAAS,OAAO;AAAA,QAC1C,cAAc;AAAA,QACd,KAAK;AAAA,QACL,UAAU,EAAE,IAAI,IAAI;AAAA,QACpB,UAAU,EAAE,IAAI,IAAI;AAAA,MACtB;AAAA,MAEC,kBAAQ,IAAI,CAAC,WAAW;AACvB,cAAM,SAAS,OAAO,OAAO;AAC7B,cAAM,WAAW,GAAG,YAAY,IAAI,OAAO,EAAE;AAC7C,eACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,gBAAc;AAAA,YAId,iBAAe,OAAO,WAAW;AAAA,YACjC,oBAAkB,OAAO,UAAU,WAAW;AAAA,YAC9C,eAAa,GAAG,UAAU,UAAU,OAAO,EAAE;AAAA,YAC7C,SAAS,MAAM;AACb,kBAAI,CAAC,OAAO,QAAS,QAAO,MAAM;AAAA,YACpC;AAAA,YACA,IAAI,SAAS,QAAQ,OAAO,OAAO;AAAA,YAElC;AAAA,qBAAO;AAAA,cACP,OAAO,WACN,oBAAC,OAAI,WAAU,QAAO,IAAI,UAAU,IAAI,WACrC,oBAAU,MAAM,GACnB;AAAA;AAAA;AAAA,UAjBG,OAAO;AAAA,QAmBd;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-TZ4ONDDE.js

@@ -0,0 +1,26 @@
+import {
+  ConfirmActionDialog
+} from "./chunk-62FKAPLI.js";
+import {
+  useConfirmAction
+} from "./chunk-EMYESBIT.js";
+
+// src/components/feedback/ConfirmAction/ConfirmAction.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ConfirmAction({
+  onConfirm,
+  children,
+  ...options
+}) {
+  const state = useConfirmAction(onConfirm, options.errorText);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children(state.request, { pending: state.pending }),
+    /* @__PURE__ */ jsx(ConfirmActionDialog, { state, ...options })
+  ] });
+}
+ConfirmAction.displayName = "ConfirmAction";
+
+export {
+  ConfirmAction
+};
+//# sourceMappingURL=chunk-TZ4ONDDE.js.map

package/dist/chunk-TZ4ONDDE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/ConfirmAction/ConfirmAction.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useConfirmAction } from './ConfirmAction.hooks';\nimport { ConfirmActionDialog } from './ConfirmAction.parts';\nimport type { ConfirmActionProps } from './ConfirmAction.types';\n\n/**\n * Wraps any trigger in a confirmation popup.\n *\n * The trigger is a render prop rather than a fixed element, so the same guard\n * covers a button, a dropdown item, an icon or a table row action without this\n * component knowing what any of them look like. The guarded handler runs ONLY\n * after the operator confirms:\n *\n * ```tsx\n * <ConfirmAction\n *   title=\"Excluir a categoria?\"\n *   entityName={row.name}\n *   description=\"Ela vai para a lixeira e pode ser restaurada de lá.\"\n *   confirmText=\"Excluir\"\n *   onConfirm={() => deleteCategoryAction({ tenantSlug, id: row.id })}\n * >\n *   {(request) => <Button color=\"danger\" onClick={request}>Excluir</Button>}\n * </ConfirmAction>\n * ```\n *\n * For the common case — an existing button whose `onClick` is already the\n * destructive write — reach for {@link withConfirmation} instead, which needs\n * no restructuring of the call site.\n */\nexport function ConfirmAction({\n  onConfirm,\n  children,\n  ...options\n}: ConfirmActionProps): React.ReactElement {\n  const state = useConfirmAction(onConfirm, options.errorText);\n\n  return (\n    <>\n      {children(state.request, { pending: state.pending })}\n      <ConfirmActionDialog state={state} {...options} />\n    </>\n  );\n}\n\nConfirmAction.displayName = 'ConfirmAction';\n"],"mappings":";;;;;;;;AAsCI,mBAEE,KAFF;AARG,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,QAAM,QAAQ,iBAAiB,WAAW,QAAQ,SAAS;AAE3D,SACE,iCACG;AAAA,aAAS,MAAM,SAAS,EAAE,SAAS,MAAM,QAAQ,CAAC;AAAA,IACnD,oBAAC,uBAAoB,OAAe,GAAG,SAAS;AAAA,KAClD;AAEJ;AAEA,cAAc,cAAc;","names":[]}

package/dist/chunk-U24LRH5M.js

@@ -0,0 +1,121 @@
+import {
+  SIZE_MAP,
+  SKELETON_ROW_HEIGHT,
+  makeTestIds,
+  resolveLoadingStateProps
+} from "./chunk-KVN3K4J3.js";
+import {
+  Skeleton
+} from "./chunk-6Z6SNY3X.js";
+
+// src/components/data-display/LoadingState/LoadingState.tsx
+import { Box, CircularProgress, Stack, Typography, useTheme } from "@mui/material";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LoadingMessage = ({ message, size, testIds, sx }) => message ? /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: SIZE_MAP[size].text,
+    color: "text.secondary",
+    sx,
+    "data-testid": testIds.named("message"),
+    children: message
+  }
+) : null;
+var SkeletonView = ({
+  message,
+  size,
+  skeletonRows,
+  className,
+  testIds
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": message || "Loading content",
+      className,
+      "data-testid": testIds.base,
+      sx: {
+        width: "100%",
+        padding: theme.spacing(3)
+      },
+      children: [
+        /* @__PURE__ */ jsx(Stack, { spacing: 2, children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rectangular",
+            animation: "wave",
+            height: SKELETON_ROW_HEIGHT[size],
+            width: index === skeletonRows - 1 ? "60%" : "100%",
+            borderRadius: 4,
+            "data-testid": testIds.optional(`skeleton-${index}`)
+          },
+          `skeleton-row-${index}`
+        )) }),
+        /* @__PURE__ */ jsx(
+          LoadingMessage,
+          {
+            message,
+            size,
+            testIds,
+            sx: { mt: 2, textAlign: "center" }
+          }
+        )
+      ]
+    }
+  );
+};
+var SpinnerView = ({ message, size, className, testIds }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": message || "Loading",
+      className,
+      "data-testid": testIds.base,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: theme.spacing(6),
+        minHeight: 200,
+        gap: theme.spacing(2)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            size: SIZE_MAP[size].spinner,
+            "data-testid": testIds.named("spinner")
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingMessage, { message, size, testIds })
+      ]
+    }
+  );
+};
+var LoadingState = React.memo((rawProps) => {
+  const { variant, message, size, skeletonRows, className, dataTestId } = resolveLoadingStateProps(rawProps);
+  const viewProps = {
+    message,
+    size,
+    skeletonRows,
+    className,
+    testIds: makeTestIds(dataTestId)
+  };
+  return variant === "skeleton" ? /* @__PURE__ */ jsx(SkeletonView, { ...viewProps }) : /* @__PURE__ */ jsx(SpinnerView, { ...viewProps });
+});
+LoadingState.displayName = "LoadingState";
+var LoadingState_default = LoadingState;
+
+export {
+  LoadingState,
+  LoadingState_default
+};
+//# sourceMappingURL=chunk-U24LRH5M.js.map

package/dist/chunk-U24LRH5M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LoadingState/LoadingState.tsx"],"sourcesContent":["import { Box, CircularProgress, Stack, Typography, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport {\n  makeTestIds,\n  resolveLoadingStateProps,\n  SIZE_MAP,\n  SKELETON_ROW_HEIGHT,\n} from './LoadingState.helpers';\nimport type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';\n\ninterface ViewProps {\n  message?: string;\n  size: LoadingStateSize;\n  skeletonRows: number;\n  className?: string;\n  testIds: ReturnType<typeof makeTestIds>;\n}\n\nconst LoadingMessage: React.FC<{\n  message?: string;\n  size: LoadingStateSize;\n  testIds: ViewProps['testIds'];\n  sx?: object;\n}> = ({ message, size, testIds, sx }) =>\n  message ? (\n    <Typography\n      variant={SIZE_MAP[size].text}\n      color=\"text.secondary\"\n      sx={sx}\n      data-testid={testIds.named('message')}\n    >\n      {message}\n    </Typography>\n  ) : null;\n\nconst SkeletonView: React.FC<ViewProps> = ({\n  message,\n  size,\n  skeletonRows,\n  className,\n  testIds,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading content'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        width: '100%',\n        padding: theme.spacing(3),\n      }}\n    >\n      <Stack spacing={2}>\n        {Array.from({ length: skeletonRows }).map((_, index) => (\n          <Skeleton\n            key={`skeleton-row-${index}`}\n            variant=\"rectangular\"\n            animation=\"wave\"\n            height={SKELETON_ROW_HEIGHT[size]}\n            // The last row is short, so the block reads as a paragraph of text.\n            width={index === skeletonRows - 1 ? '60%' : '100%'}\n            borderRadius={4}\n            data-testid={testIds.optional(`skeleton-${index}`)}\n          />\n        ))}\n      </Stack>\n      <LoadingMessage\n        message={message}\n        size={size}\n        testIds={testIds}\n        sx={{ mt: 2, textAlign: 'center' }}\n      />\n    </Box>\n  );\n};\n\nconst SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: theme.spacing(6),\n        minHeight: 200,\n        gap: theme.spacing(2),\n      }}\n    >\n      <CircularProgress\n        size={SIZE_MAP[size].spinner}\n        data-testid={testIds.named('spinner')}\n      />\n      <LoadingMessage message={message} size={size} testIds={testIds} />\n    </Box>\n  );\n};\n\nexport const LoadingState: React.FC<LoadingStateProps> = React.memo((rawProps) => {\n  const { variant, message, size, skeletonRows, className, dataTestId } =\n    resolveLoadingStateProps(rawProps);\n  const viewProps: ViewProps = {\n    message,\n    size,\n    skeletonRows,\n    className,\n    testIds: makeTestIds(dataTestId),\n  };\n\n  return variant === 'skeleton' ? (\n    <SkeletonView {...viewProps} />\n  ) : (\n    <SpinnerView {...viewProps} />\n  );\n});\n\nLoadingState.displayName = 'LoadingState';\n\nexport default LoadingState;\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,KAAK,kBAAkB,OAAO,YAAY,gBAAgB;AACnE,OAAO,WAAW;AA2Bd,cAoBA,YApBA;AAPJ,IAAM,iBAKD,CAAC,EAAE,SAAS,MAAM,SAAS,GAAG,MACjC,UACE;AAAA,EAAC;AAAA;AAAA,IACC,SAAS,SAAS,IAAI,EAAE;AAAA,IACxB,OAAM;AAAA,IACN;AAAA,IACA,eAAa,QAAQ,MAAM,SAAS;AAAA,IAEnC;AAAA;AACH,IACE;AAEN,IAAM,eAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,WAAW;AAAA,MACvB;AAAA,MACA,eAAa,QAAQ;AAAA,MACrB,IAAI;AAAA,QACF,OAAO;AAAA,QACP,SAAS,MAAM,QAAQ,CAAC;AAAA,MAC1B;AAAA,MAEA;AAAA,4BAAC,SAAM,SAAS,GACb,gBAAM,KAAK,EAAE,QAAQ,aAAa,CAAC,EAAE,IAAI,CAAC,GAAG,UAC5C;AAAA,UAAC;AAAA;AAAA,YAEC,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,QAAQ,oBAAoB,IAAI;AAAA,YAEhC,OAAO,UAAU,eAAe,IAAI,QAAQ;AAAA,YAC5C,cAAc;AAAA,YACd,eAAa,QAAQ,SAAS,YAAY,KAAK,EAAE;AAAA;AAAA,UAP5C,gBAAgB,KAAK;AAAA,QAQ5B,CACD,GACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAI,EAAE,IAAI,GAAG,WAAW,SAAS;AAAA;AAAA,QACnC;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAmC,CAAC,EAAE,SAAS,MAAM,WAAW,QAAQ,MAAM;AAClF,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,WAAW;AAAA,MACvB;AAAA,MACA,eAAa,QAAQ;AAAA,MACrB,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,SAAS,MAAM,QAAQ,CAAC;AAAA,QACxB,WAAW;AAAA,QACX,KAAK,MAAM,QAAQ,CAAC;AAAA,MACtB;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,IAAI,EAAE;AAAA,YACrB,eAAa,QAAQ,MAAM,SAAS;AAAA;AAAA,QACtC;AAAA,QACA,oBAAC,kBAAe,SAAkB,MAAY,SAAkB;AAAA;AAAA;AAAA,EAClE;AAEJ;AAEO,IAAM,eAA4C,MAAM,KAAK,CAAC,aAAa;AAChF,QAAM,EAAE,SAAS,SAAS,MAAM,cAAc,WAAW,WAAW,IAClE,yBAAyB,QAAQ;AACnC,QAAM,YAAuB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,YAAY,UAAU;AAAA,EACjC;AAEA,SAAO,YAAY,aACjB,oBAAC,gBAAc,GAAG,WAAW,IAE7B,oBAAC,eAAa,GAAG,WAAW;AAEhC,CAAC;AAED,aAAa,cAAc;AAE3B,IAAO,uBAAQ;","names":[]}