@nextelco/common-ui 2.1.97 → 2.1.99

package/dist/esm/legacy/components/organisms/Selector/Selector.js

@@ -0,0 +1,181 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState, useEffect } from "react";
+import { faSave, faMinus, faPlus, faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { ActionButtonThemeStyled, IconTextDarkThemeStyled, IconButtonThemeStyled, IconTextLightThemeStyled } from "../../../styles/themes/ButtonThemes.js";
+import Modal from "../../molecules/Modal/Modal.js";
+import { Search } from "../../molecules/Search/Search.js";
+import { LazyLoader } from "../LazyLoader/LazyLoader.js";
+import './Selector.css';/* empty css              */
+import Spinner from "../../layout/Spinner/Spinner.js";
+import TooltipWrapper from "../../atoms/Tooltip/Tooltip.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ActionButton from "../../atoms/Button/variants/ActionButton.js";
+import IconText from "../../atoms/IconText/IconText.js";
+import IconButton from "../../atoms/Button/variants/IconButton.js";
+const Selector = ({
+  title,
+  icon,
+  onClose,
+  onConfirm,
+  initiallySelected,
+  blocked = [],
+  fetcher,
+  single = false,
+  working = false,
+  onDisabled
+}) => {
+  const scrollContainerId = useId();
+  const [selectedElements, setSelectedElements] = useState(initiallySelected);
+  const [filter, setFilter] = useState({
+    term: {
+      type: "text",
+      active: false,
+      text: ""
+    }
+  });
+  useEffect(() => {
+    setSelectedElements(initiallySelected);
+  }, [initiallySelected]);
+  const handleSearch = (text) => {
+    setFilter({
+      term: {
+        type: "text",
+        active: text != "" ? true : false,
+        text
+      }
+    });
+  };
+  const toggleElementSelection = (element) => {
+    const isSelected = selectedElements.some((se) => se.id === element.id);
+    if (isSelected) {
+      setSelectedElements(selectedElements.filter((se) => se.id !== element.id));
+    } else {
+      if (single) {
+        setSelectedElements([element]);
+      } else {
+        setSelectedElements([...selectedElements, element]);
+      }
+    }
+  };
+  const renderElement = (element) => {
+    const isSelected = selectedElements.some((se) => se.id === element.id);
+    const isBlocked = blocked.includes(element.id);
+    const isDisabled = element.disabled || false;
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: `cui-selector__elements-list-item ${isSelected ? "cui-selector__elements-list-item-selected" : "cui-selector__elements-list-item-not-selected"} ${isBlocked ? "cui-selector__elements-list-item-blocked" : ""}`,
+        onClick: !isBlocked && !isDisabled ? () => toggleElementSelection(element) : void 0,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "cui-selector__elements-list-item-description", children: /* @__PURE__ */ jsx(
+            IconText,
+            {
+              icon,
+              text: element.name,
+              theme: isSelected ? IconTextDarkThemeStyled : IconTextLightThemeStyled
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("span", { className: "cui-selector__elements-list-item-option", children: [
+            element.code && /* @__PURE__ */ jsx("label", { children: element.code }),
+            !isBlocked && !isDisabled ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: () => {
+                  toggleElementSelection(element);
+                },
+                icon: isSelected ? faMinus : faPlus,
+                theme: IconButtonThemeStyled
+              }
+            ) : /* @__PURE__ */ jsx(
+              TooltipWrapper,
+              {
+                interactive: true,
+                tip: onDisabled ? onDisabled(element) : isBlocked ? /* @__PURE__ */ jsx("div", { children: "Bloqueado..." }) : /* @__PURE__ */ jsx("div", { children: "Sem dados...." }),
+                children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    onClick: () => {
+                    },
+                    icon: faQuestion,
+                    theme: IconButtonThemeStyled,
+                    disabled: true
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      },
+      element.id
+    );
+  };
+  const renderSelectedElements = () => {
+    if (selectedElements.length === 0) {
+      return /* @__PURE__ */ jsx("p", { className: "cui-selector__selected-empty", children: "Sem elementos selecionados..." });
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "cui-selector__selected-list", children: selectedElements.map((element) => {
+      const isBlocked = blocked.includes(element.id);
+      if (isBlocked) return null;
+      return /* @__PURE__ */ jsxs("li", { className: "cui-selector__selected-list-item", children: [
+        /* @__PURE__ */ jsx("span", { className: "cui-selector__selected-list-info", children: /* @__PURE__ */ jsx(
+          IconText,
+          {
+            icon,
+            theme: IconTextDarkThemeStyled,
+            text: element.name
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "cui-selector__selected-list-option", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: faMinus,
+            onClick: () => setSelectedElements(
+              selectedElements.filter((e) => e.id !== element.id)
+            ),
+            theme: IconButtonThemeStyled
+          }
+        ) })
+      ] }, element.id);
+    }) });
+  };
+  const handleConfirm = () => {
+    onConfirm(selectedElements);
+  };
+  return /* @__PURE__ */ jsx(Modal, { title, onClose, children: /* @__PURE__ */ jsxs("div", { className: "cui-selector", children: [
+    /* @__PURE__ */ jsx("div", { className: "cui-selector__search", children: /* @__PURE__ */ jsx(Search, { handleSearch }) }),
+    /* @__PURE__ */ jsx("div", { className: "cui-selector__selected", children: renderSelectedElements() }),
+    /* @__PURE__ */ jsx("div", { id: scrollContainerId, className: "cui-selector__elements", children: /* @__PURE__ */ jsx(
+      LazyLoader,
+      {
+        endpoint: fetcher.endpoint,
+        params: {
+          filters: {
+            ...fetcher.params,
+            ...filter.term.active && {
+              term: {
+                type: filter.term.type,
+                text: filter.term.text
+              }
+            }
+          }
+        },
+        limit: 15,
+        scrollableTarget: scrollContainerId,
+        children: (items, loading, error) => /* @__PURE__ */ jsx("ul", { className: "cui-selector__elements-list", children: items.length > 0 ? items.map((element) => renderElement(element)) : /* @__PURE__ */ jsx("li", { className: "cui-selector__elements-empty", children: "No elements found" }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "cui-selector__confirmation", children: !working ? /* @__PURE__ */ jsx(
+      ActionButton,
+      {
+        title: "Confirmar",
+        icon: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faSave }),
+        onClick: handleConfirm,
+        theme: ActionButtonThemeStyled
+      }
+    ) : /* @__PURE__ */ jsx(Spinner, {}) })
+  ] }) });
+};
+export {
+  Selector
+};
+//# sourceMappingURL=Selector.js.map

package/dist/esm/legacy/components/organisms/Selector/Selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.js","sources":["../../../../../../src/legacy/components/organisms/Selector/Selector.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useId, useState } from 'react'\r\nimport {\r\n  faMinus,\r\n  faPlus,\r\n  faQuestion,\r\n  faSave,\r\n} from '@fortawesome/free-solid-svg-icons'\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core'\r\nimport { ActionButton, IconText, IconButton } from '../../../exports/atoms'\r\nimport {\r\n  ActionButtonThemeStyled,\r\n  IconButtonThemeStyled,\r\n  IconTextDarkThemeStyled,\r\n  IconTextLightThemeStyled,\r\n} from '../../../styles/themes/ButtonThemes'\r\n\r\nimport Modal from '../../molecules/Modal/Modal'\r\nimport Search from '../../molecules/Search/Search'\r\nimport { Fetcher } from '../../../types/Fetcher'\r\nimport { LazyLoader } from '../LazyLoader/LazyLoader'\r\nimport './Selector.scss'\r\nimport { SelectableElement } from '../../../types/SelectableElement'\r\nimport Spinner from '../../layout/Spinner/Spinner'\r\nimport TooltipWrapper from '../../atoms/Tooltip/Tooltip'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\ntype SelectorProps<T extends SelectableElement> = {\r\n  title: string\r\n  onClose: () => void\r\n  onConfirm: (selected: T[]) => void\r\n  onDisabled?: (disabled: T) => ReactNode\r\n  initiallySelected: T[]\r\n  blocked?: string[]\r\n  single?: boolean\r\n  icon: IconProp\r\n  fetcher: Fetcher\r\n  working?: boolean\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport const Selector = <T extends SelectableElement>({\r\n  title,\r\n  icon,\r\n  onClose,\r\n  onConfirm,\r\n  initiallySelected,\r\n  blocked = [],\r\n  fetcher,\r\n  single = false,\r\n  working = false,\r\n  onDisabled,\r\n}: SelectorProps<T>) => {\r\n  const scrollContainerId = useId()\r\n  const [selectedElements, setSelectedElements] =\r\n    useState<T[]>(initiallySelected)\r\n\r\n  const [filter, setFilter] = useState({\r\n    term: {\r\n      type: 'text',\r\n      active: false,\r\n      text: '',\r\n    },\r\n  })\r\n\r\n  useEffect(() => {\r\n    setSelectedElements(initiallySelected)\r\n  }, [initiallySelected])\r\n\r\n  const handleSearch = (text: string) => {\r\n    setFilter({\r\n      term: {\r\n        type: 'text',\r\n        active: text != '' ? true : false,\r\n        text: text,\r\n      },\r\n    })\r\n  }\r\n\r\n  const toggleElementSelection = (element: T) => {\r\n    const isSelected = selectedElements.some((se) => se.id === element.id)\r\n\r\n    if (isSelected) {\r\n      setSelectedElements(selectedElements.filter((se) => se.id !== element.id))\r\n    } else {\r\n      if (single) {\r\n        setSelectedElements([element])\r\n      } else {\r\n        setSelectedElements([...selectedElements, element])\r\n      }\r\n    }\r\n  }\r\n\r\n  const renderElement = (element: T) => {\r\n    const isSelected = selectedElements.some((se) => se.id === element.id)\r\n    const isBlocked = blocked.includes(element.id)\r\n    const isDisabled = element.disabled || false\r\n\r\n    return (\r\n      <li\r\n        key={element.id}\r\n        className={`cui-selector__elements-list-item ${\r\n          isSelected\r\n            ? 'cui-selector__elements-list-item-selected'\r\n            : 'cui-selector__elements-list-item-not-selected'\r\n        } ${isBlocked ? 'cui-selector__elements-list-item-blocked' : ''}`}\r\n        onClick={\r\n          !isBlocked && !isDisabled\r\n            ? () => toggleElementSelection(element)\r\n            : undefined\r\n        }\r\n      >\r\n        <span className={'cui-selector__elements-list-item-description'}>\r\n          <IconText\r\n            icon={icon}\r\n            text={element.name}\r\n            theme={\r\n              isSelected ? IconTextDarkThemeStyled : IconTextLightThemeStyled\r\n            }\r\n          />\r\n        </span>\r\n        <span className={'cui-selector__elements-list-item-option'}>\r\n          {element.code && <label>{element.code}</label>}\r\n          {!isBlocked && !isDisabled ? (\r\n            <IconButton\r\n              onClick={() => {\r\n                toggleElementSelection(element)\r\n              }}\r\n              icon={isSelected ? faMinus : faPlus}\r\n              theme={IconButtonThemeStyled}\r\n            />\r\n          ) : (\r\n            <TooltipWrapper\r\n              interactive={true}\r\n              tip={\r\n                onDisabled ? (\r\n                  onDisabled(element)\r\n                ) : isBlocked ? (\r\n                  <div>Bloqueado...</div>\r\n                ) : (\r\n                  <div>Sem dados....</div>\r\n                )\r\n              }\r\n            >\r\n              <IconButton\r\n                onClick={() => {}}\r\n                icon={faQuestion}\r\n                theme={IconButtonThemeStyled}\r\n                disabled={true}\r\n              />\r\n            </TooltipWrapper>\r\n          )}\r\n        </span>\r\n      </li>\r\n    )\r\n  }\r\n\r\n  const renderSelectedElements = () => {\r\n    if (selectedElements.length === 0) {\r\n      return (\r\n        <p className=\"cui-selector__selected-empty\">\r\n          Sem elementos selecionados...\r\n        </p>\r\n      )\r\n    }\r\n\r\n    return (\r\n      <ul className=\"cui-selector__selected-list\">\r\n        {selectedElements.map((element) => {\r\n          const isBlocked = blocked.includes(element.id)\r\n\r\n          if (isBlocked) return null\r\n\r\n          return (\r\n            <li key={element.id} className=\"cui-selector__selected-list-item\">\r\n              <span className={'cui-selector__selected-list-info'}>\r\n                <IconText\r\n                  icon={icon}\r\n                  theme={IconTextDarkThemeStyled}\r\n                  text={element.name}\r\n                />\r\n              </span>\r\n              <span className={'cui-selector__selected-list-option'}>\r\n                <IconButton\r\n                  icon={faMinus}\r\n                  onClick={() =>\r\n                    setSelectedElements(\r\n                      selectedElements.filter((e) => e.id !== element.id)\r\n                    )\r\n                  }\r\n                  theme={IconButtonThemeStyled}\r\n                />\r\n              </span>\r\n            </li>\r\n          )\r\n        })}\r\n      </ul>\r\n    )\r\n  }\r\n\r\n  const handleConfirm = () => {\r\n    onConfirm(selectedElements)\r\n  }\r\n\r\n  return (\r\n    <Modal title={title} onClose={onClose}>\r\n      <div className=\"cui-selector\">\r\n        <div className=\"cui-selector__search\">\r\n          <Search handleSearch={handleSearch} />\r\n        </div>\r\n\r\n        <div className=\"cui-selector__selected\">{renderSelectedElements()}</div>\r\n\r\n        <div id={scrollContainerId} className=\"cui-selector__elements\">\r\n          <LazyLoader<T>\r\n            endpoint={fetcher.endpoint}\r\n            params={{\r\n              filters: {\r\n                ...fetcher.params,\r\n                ...(filter.term.active && {\r\n                  term: {\r\n                    type: filter.term.type,\r\n                    text: filter.term.text,\r\n                  },\r\n                }),\r\n              },\r\n            }}\r\n            limit={15}\r\n            scrollableTarget={scrollContainerId}\r\n          >\r\n            {(items, loading, error) => (\r\n              <ul className=\"cui-selector__elements-list\">\r\n                {items.length > 0 ? (\r\n                  items.map((element) => renderElement(element))\r\n                ) : (\r\n                  <li className=\"cui-selector__elements-empty\">\r\n                    No elements found\r\n                  </li>\r\n                )}\r\n              </ul>\r\n            )}\r\n          </LazyLoader>\r\n        </div>\r\n\r\n        <div className=\"cui-selector__confirmation\">\r\n          {!working ? (\r\n            <ActionButton\r\n              title=\"Confirmar\"\r\n              icon={<FontAwesomeIcon icon={faSave} />}\r\n              onClick={handleConfirm}\r\n              theme={ActionButtonThemeStyled}\r\n            />\r\n          ) : (\r\n            <Spinner />\r\n          )}\r\n        </div>\r\n      </div>\r\n    </Modal>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/legacy/components/organisms/StatusMatrix/StatusMatrix.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+const alturaAutomatica = (labels) => Math.min(260, Math.max(64, Math.ceil(Math.max(0, ...labels.map((l) => l.length)) * 6.2) + 12));
+function StatusMatrix({
+  rows,
+  columns,
+  statuses,
+  cell,
+  cellSize = 22,
+  labelWidth = 280,
+  corner = "",
+  showLegend = true,
+  onCellClick,
+  emptyText = "—",
+  className = "",
+  columnHeaderHeight
+}) {
+  const [tip, setTip] = useState(null);
+  const largura = columns.length * cellSize;
+  const ALTURA_CAB_COLUNA = useMemo(() => columnHeaderHeight ?? alturaAutomatica(columns.map((c) => c.label)), [columnHeaderHeight, columns]);
+  const faixas = useMemo(() => {
+    const out = [];
+    columns.forEach((c, i) => {
+      const g = c.group ?? "";
+      const ult = out[out.length - 1];
+      if (ult && ult.group === g) ult.n++;
+      else out.push({ group: g, start: i, n: 1 });
+    });
+    return out;
+  }, [columns]);
+  const temGrupos = faixas.some((f) => f.group);
+  const mostrarTip = (e, content) => {
+    if (!content) return;
+    setTip({ x: e.clientX + 12, y: e.clientY + 12, content });
+  };
+  const linhas = [];
+  let grupoAtual;
+  for (const row of rows) {
+    if (row.group && row.group !== grupoAtual) {
+      grupoAtual = row.group;
+      linhas.push(
+        /* @__PURE__ */ jsxs("div", { className: "flex border-b border-slate-200 bg-slate-50", children: [
+          /* @__PURE__ */ jsx("div", { className: "sticky left-0 z-[2] shrink-0 border-r border-slate-200 bg-slate-50 px-2 py-1 text-[11px] font-bold uppercase tracking-wide text-slate-500", style: { width: labelWidth }, children: row.group }),
+          /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { width: largura } })
+        ] }, `g-${row.group}-${row.id}`)
+      );
+    }
+    linhas.push(
+      /* @__PURE__ */ jsxs("div", { className: "group flex border-b border-slate-200 hover:bg-blue-50/60", style: { height: cellSize }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "sticky left-0 z-[2] shrink-0 truncate border-r border-slate-200 bg-white px-2 leading-[22px] group-hover:bg-blue-50", style: { width: labelWidth, lineHeight: `${cellSize}px` }, title: row.label, children: [
+          row.label,
+          row.sublabel && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[11px] text-slate-400", children: row.sublabel })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative flex shrink-0", style: { width: largura }, children: columns.map((col) => {
+          const c = cell(row, col);
+          const st = c?.status ? statuses[c.status] : void 0;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `relative shrink-0 border-r border-slate-100 ${onCellClick ? "cursor-pointer" : ""}`,
+              style: { width: cellSize, height: cellSize - 1 },
+              onMouseMove: (e) => mostrarTip(e, c?.tooltip ?? `${row.label} · ${col.label}${st ? ` · ${st.label}` : ""}`),
+              onMouseLeave: () => setTip(null),
+              onClick: onCellClick ? () => onCellClick(row, col) : void 0,
+              children: [
+                st && /* @__PURE__ */ jsx("div", { className: "absolute inset-[2px] flex items-center justify-center rounded-sm text-[10px] font-semibold text-white", style: { background: st.color }, children: c?.text }),
+                c?.warning && /* @__PURE__ */ jsx("span", { className: "absolute right-[1px] top-[1px] h-[6px] w-[6px] rounded-full border border-white bg-orange-500" })
+              ]
+            },
+            col.id
+          );
+        }) })
+      ] }, row.id)
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    showLegend && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-3 text-xs text-slate-500", children: Object.entries(statuses).map(([k, s]) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("i", { className: "inline-block h-2.5 w-2.5 rounded-sm", style: { background: s.color } }),
+      s.label
+    ] }, k)) }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-[calc(100vh-220px)] overflow-auto rounded-lg border border-slate-200 bg-white text-[13px]", children: /* @__PURE__ */ jsxs("div", { className: "w-max min-w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-[3] flex border-b border-slate-200 bg-white", children: [
+        /* @__PURE__ */ jsx("div", { className: "sticky left-0 z-[4] flex shrink-0 items-end border-r border-slate-200 bg-white px-2 py-2 font-semibold", style: { width: labelWidth }, children: corner }),
+        /* @__PURE__ */ jsxs("div", { className: "relative shrink-0 bg-white", style: { width: largura, height: ALTURA_CAB_COLUNA + (temGrupos ? 20 : 0) }, children: [
+          temGrupos && faixas.map((f) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-0 h-5 truncate border-l border-slate-200 px-1 text-[11px] font-bold uppercase tracking-wide text-slate-500",
+              style: { left: f.start * cellSize, width: f.n * cellSize },
+              title: f.group,
+              children: f.group
+            },
+            `${f.group}-${f.start}`
+          )),
+          columns.map((c, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute bottom-1 flex justify-center text-[10px] text-slate-500",
+              style: { left: i * cellSize, width: cellSize, height: ALTURA_CAB_COLUNA - 4 },
+              title: c.label,
+              children: /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", style: { writingMode: "vertical-rl", transform: "rotate(180deg)" }, children: c.label })
+            },
+            c.id
+          ))
+        ] })
+      ] }),
+      rows.length && columns.length ? linhas : /* @__PURE__ */ jsx("div", { className: "p-6 text-center text-sm text-slate-400", children: emptyText })
+    ] }) }),
+    tip && /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed z-50 max-w-[340px] rounded-md bg-slate-900 px-2 py-1.5 text-xs text-white shadow-lg", style: { left: tip.x, top: tip.y }, children: tip.content })
+  ] });
+}
+export {
+  StatusMatrix as default
+};
+//# sourceMappingURL=StatusMatrix.js.map

package/dist/esm/legacy/components/organisms/StatusMatrix/StatusMatrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusMatrix.js","sources":["../../../../../../src/legacy/components/organisms/StatusMatrix/StatusMatrix.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\r\n\r\n// Matriz de estados: linhas × colunas, cada célula pintada com a cor do seu estado\r\n// (ex.: tarefas × apoios — vazio / em curso / concluído). Cabeçalho e 1.ª coluna fixos,\r\n// grupos de linhas (cabeçalho de secção) e de colunas (faixa por cima), tooltip por célula.\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface StatusMatrixRow {\r\n  id: string\r\n  label: string\r\n  /** Cabeçalho de secção mostrado antes da linha quando muda (ex: \"Fundações\"). */\r\n  group?: string\r\n  /** Texto pequeno à direita do rótulo (ex: \"12/40\"). */\r\n  sublabel?: string\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface StatusMatrixColumn {\r\n  id: string\r\n  label: string\r\n  /** Faixa por cima das colunas consecutivas com o mesmo grupo (ex: \"Ramal 1\"). */\r\n  group?: string\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface StatusMatrixStatus {\r\n  label: string\r\n  /** Cor da célula (CSS). */\r\n  color: string\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface StatusMatrixCell {\r\n  /** Chave em `statuses`. Sem estado = célula vazia. */\r\n  status?: string\r\n  /** Texto curto dentro da célula (ex: nº de dias). */\r\n  text?: string\r\n  tooltip?: React.ReactNode\r\n  /** Mostra um ponto de aviso no canto da célula. */\r\n  warning?: boolean\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface StatusMatrixProps {\r\n  rows: StatusMatrixRow[]\r\n  columns: StatusMatrixColumn[]\r\n  statuses: Record<string, StatusMatrixStatus>\r\n  /** Conteúdo de cada célula; null/undefined = vazia. */\r\n  cell: (row: StatusMatrixRow, column: StatusMatrixColumn) => StatusMatrixCell | null | undefined\r\n  cellSize?: number\r\n  labelWidth?: number\r\n  /** Texto do canto superior esquerdo (ex: \"Tarefa \\ Apoio\"). */\r\n  corner?: string\r\n  /** Mostra a legenda dos estados por cima da matriz. */\r\n  showLegend?: boolean\r\n  onCellClick?: (row: StatusMatrixRow, column: StatusMatrixColumn) => void\r\n  emptyText?: string\r\n  className?: string\r\n  /** Altura (px) do cabeçalho das colunas (rótulos verticais). Omisso = automática pelo rótulo mais comprido (64–260). */\r\n  columnHeaderHeight?: number\r\n}\r\n\r\n// ~6 px por carácter a 10 px de letra, na vertical\r\nconst alturaAutomatica = (labels: string[]) => Math.min(260, Math.max(64, Math.ceil(Math.max(0, ...labels.map((l) => l.length)) * 6.2) + 12))\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport default function StatusMatrix({\r\n  rows,\r\n  columns,\r\n  statuses,\r\n  cell,\r\n  cellSize = 22,\r\n  labelWidth = 280,\r\n  corner = '',\r\n  showLegend = true,\r\n  onCellClick,\r\n  emptyText = '—',\r\n  className = '',\r\n  columnHeaderHeight,\r\n}: StatusMatrixProps) {\r\n  const [tip, setTip] = useState<{ x: number; y: number; content: React.ReactNode } | null>(null)\r\n  const largura = columns.length * cellSize\r\n  const ALTURA_CAB_COLUNA = useMemo(() => columnHeaderHeight ?? alturaAutomatica(columns.map((c) => c.label)), [columnHeaderHeight, columns])\r\n\r\n  // Faixas de grupo das colunas (colunas consecutivas com o mesmo grupo)\r\n  const faixas = useMemo(() => {\r\n    const out: { group: string; start: number; n: number }[] = []\r\n    columns.forEach((c, i) => {\r\n      const g = c.group ?? ''\r\n      const ult = out[out.length - 1]\r\n      if (ult && ult.group === g) ult.n++\r\n      else out.push({ group: g, start: i, n: 1 })\r\n    })\r\n    return out\r\n  }, [columns])\r\n  const temGrupos = faixas.some((f) => f.group)\r\n\r\n  const mostrarTip = (e: React.MouseEvent, content: React.ReactNode) => {\r\n    if (!content) return\r\n    setTip({ x: e.clientX + 12, y: e.clientY + 12, content })\r\n  }\r\n\r\n  const linhas: React.ReactNode[] = []\r\n  let grupoAtual: string | undefined\r\n  for (const row of rows) {\r\n    if (row.group && row.group !== grupoAtual) {\r\n      grupoAtual = row.group\r\n      linhas.push(\r\n        <div key={`g-${row.group}-${row.id}`} className=\"flex border-b border-slate-200 bg-slate-50\">\r\n          <div className=\"sticky left-0 z-[2] shrink-0 border-r border-slate-200 bg-slate-50 px-2 py-1 text-[11px] font-bold uppercase tracking-wide text-slate-500\" style={{ width: labelWidth }}>\r\n            {row.group}\r\n          </div>\r\n          <div className=\"shrink-0\" style={{ width: largura }} />\r\n        </div>\r\n      )\r\n    }\r\n    linhas.push(\r\n      <div key={row.id} className=\"group flex border-b border-slate-200 hover:bg-blue-50/60\" style={{ height: cellSize }}>\r\n        <div className=\"sticky left-0 z-[2] shrink-0 truncate border-r border-slate-200 bg-white px-2 leading-[22px] group-hover:bg-blue-50\" style={{ width: labelWidth, lineHeight: `${cellSize}px` }} title={row.label}>\r\n          {row.label}\r\n          {row.sublabel && <span className=\"ml-1 text-[11px] text-slate-400\">{row.sublabel}</span>}\r\n        </div>\r\n        <div className=\"relative flex shrink-0\" style={{ width: largura }}>\r\n          {columns.map((col) => {\r\n            const c = cell(row, col)\r\n            const st = c?.status ? statuses[c.status] : undefined\r\n            return (\r\n              <div\r\n                key={col.id}\r\n                className={`relative shrink-0 border-r border-slate-100 ${onCellClick ? 'cursor-pointer' : ''}`}\r\n                style={{ width: cellSize, height: cellSize - 1 }}\r\n                onMouseMove={(e) => mostrarTip(e, c?.tooltip ?? `${row.label} · ${col.label}${st ? ` · ${st.label}` : ''}`)}\r\n                onMouseLeave={() => setTip(null)}\r\n                onClick={onCellClick ? () => onCellClick(row, col) : undefined}\r\n              >\r\n                {st && (\r\n                  <div className=\"absolute inset-[2px] flex items-center justify-center rounded-sm text-[10px] font-semibold text-white\" style={{ background: st.color }}>\r\n                    {c?.text}\r\n                  </div>\r\n                )}\r\n                {c?.warning && <span className=\"absolute right-[1px] top-[1px] h-[6px] w-[6px] rounded-full border border-white bg-orange-500\" />}\r\n              </div>\r\n            )\r\n          })}\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div className={className}>\r\n      {showLegend && (\r\n        <div className=\"mb-2 flex flex-wrap gap-3 text-xs text-slate-500\">\r\n          {Object.entries(statuses).map(([k, s]) => (\r\n            <span key={k} className=\"inline-flex items-center gap-1\">\r\n              <i className=\"inline-block h-2.5 w-2.5 rounded-sm\" style={{ background: s.color }} />\r\n              {s.label}\r\n            </span>\r\n          ))}\r\n        </div>\r\n      )}\r\n      <div className=\"max-h-[calc(100vh-220px)] overflow-auto rounded-lg border border-slate-200 bg-white text-[13px]\">\r\n        {/* w-max: cabeçalho e linhas com a largura total do conteúdo — sem isto o fundo do cabeçalho\r\n            fixo só cobria a parte visível e, ao rolar na horizontal, as células passavam por cima */}\r\n        <div className=\"w-max min-w-full\">\r\n        {/* Cabeçalho: grupos de colunas + rótulos verticais */}\r\n        <div className=\"sticky top-0 z-[3] flex border-b border-slate-200 bg-white\">\r\n          <div className=\"sticky left-0 z-[4] flex shrink-0 items-end border-r border-slate-200 bg-white px-2 py-2 font-semibold\" style={{ width: labelWidth }}>\r\n            {corner}\r\n          </div>\r\n          <div className=\"relative shrink-0 bg-white\" style={{ width: largura, height: ALTURA_CAB_COLUNA + (temGrupos ? 20 : 0) }}>\r\n            {temGrupos &&\r\n              faixas.map((f) => (\r\n                <div\r\n                  key={`${f.group}-${f.start}`}\r\n                  className=\"absolute top-0 h-5 truncate border-l border-slate-200 px-1 text-[11px] font-bold uppercase tracking-wide text-slate-500\"\r\n                  style={{ left: f.start * cellSize, width: f.n * cellSize }}\r\n                  title={f.group}\r\n                >\r\n                  {f.group}\r\n                </div>\r\n              ))}\r\n            {columns.map((c, i) => (\r\n              <div\r\n                key={c.id}\r\n                className=\"absolute bottom-1 flex justify-center text-[10px] text-slate-500\"\r\n                style={{ left: i * cellSize, width: cellSize, height: ALTURA_CAB_COLUNA - 4 }}\r\n                title={c.label}\r\n              >\r\n                <span className=\"whitespace-nowrap\" style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>\r\n                  {c.label}\r\n                </span>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </div>\r\n        {rows.length && columns.length ? linhas : <div className=\"p-6 text-center text-sm text-slate-400\">{emptyText}</div>}\r\n        </div>\r\n      </div>\r\n      {tip && (\r\n        <div className=\"pointer-events-none fixed z-50 max-w-[340px] rounded-md bg-slate-900 px-2 py-1.5 text-xs text-white shadow-lg\" style={{ left: tip.x, top: tip.y }}>\r\n          {tip.content}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/legacy/components/ui/Avisos.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, useMemo, useContext, createContext } from "react";
+const Contexto = createContext(null);
+const DURACAO = { sucesso: 4e3, info: 5e3, aviso: 7e3, erro: 9e3 };
+function AvisosProvider({ children, rotuloFechar = "Fechar aviso", maximo = 4 }) {
+  const [avisos, setAvisos] = useState([]);
+  const seq = useRef(0);
+  const temporizadores = useRef(/* @__PURE__ */ new Map());
+  const fechar = useCallback((id) => {
+    const t = temporizadores.current.get(id);
+    if (t) clearTimeout(t);
+    temporizadores.current.delete(id);
+    setAvisos((l) => l.filter((a) => a.id !== id));
+  }, []);
+  const mostrar = useCallback(
+    (tipo, mensagem, opcoes = {}) => {
+      const id = ++seq.current;
+      setAvisos((l) => [...l, { id, tipo, mensagem, ...opcoes }].slice(-maximo));
+      const duracao = opcoes.duracao ?? DURACAO[tipo];
+      if (duracao > 0) temporizadores.current.set(id, setTimeout(() => fechar(id), duracao));
+      return id;
+    },
+    [fechar, maximo]
+  );
+  useEffect(() => {
+    const mapa = temporizadores.current;
+    return () => mapa.forEach((t) => clearTimeout(t));
+  }, []);
+  const api = useMemo(
+    () => ({
+      sucesso: (m, o) => mostrar("sucesso", m, o),
+      erro: (m, o) => mostrar("erro", m, o),
+      aviso: (m, o) => mostrar("aviso", m, o),
+      info: (m, o) => mostrar("info", m, o),
+      fechar
+    }),
+    [mostrar, fechar]
+  );
+  const estilos = {
+    sucesso: ["border-ok/30", "bg-ok-bg text-ok", "✓"],
+    erro: ["border-incumprido/30", "bg-incumprido-bg text-incumprido", "!"],
+    aviso: ["border-risco/30", "bg-risco-bg text-risco", "!"],
+    info: ["border-sky-200", "bg-sky-50 text-sky-700", "i"]
+  };
+  return /* @__PURE__ */ jsxs(Contexto.Provider, { value: api, children: [
+    children,
+    /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "pointer-events-none fixed bottom-4 right-4 z-[70] flex w-[min(420px,calc(100vw-2rem))] flex-col gap-2", children: avisos.map((a) => {
+      const [borda, icone, simbolo] = estilos[a.tipo];
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: a.tipo === "erro" ? "alert" : "status",
+          className: `pointer-events-auto flex items-center gap-3 rounded-xl border ${borda} bg-white px-3.5 py-3 shadow-lg dark:bg-slate-900`,
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-black ${icone}`, children: simbolo }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-sm font-semibold text-slate-800 dark:text-slate-100", children: a.mensagem }),
+            a.acao && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  a.acao.onClick();
+                  fechar(a.id);
+                },
+                className: "shrink-0 text-xs font-bold text-proef-blue hover:text-proef-navy",
+                children: a.acao.rotulo
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => fechar(a.id), "aria-label": rotuloFechar, className: "shrink-0 text-slate-400 hover:text-slate-700", children: "×" })
+          ]
+        },
+        a.id
+      );
+    }) })
+  ] });
+}
+function useAvisos() {
+  const api = useContext(Contexto);
+  if (!api) throw new Error("useAvisos tem de ser usado dentro de um <AvisosProvider>.");
+  return api;
+}
+export {
+  AvisosProvider,
+  useAvisos
+};
+//# sourceMappingURL=Avisos.js.map

package/dist/esm/legacy/components/ui/Avisos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avisos.js","sources":["../../../../../src/legacy/components/ui/Avisos.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport type TipoAviso = 'sucesso' | 'erro' | 'aviso' | 'info'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface OpcoesAviso {\r\n  /** Botão no aviso (ex: \"Tentar de novo\", \"Desfazer\"). */\r\n  acao?: { rotulo: string; onClick: () => void }\r\n  /** Milissegundos até fechar sozinho. 0 = só fecha à mão. */\r\n  duracao?: number\r\n}\r\n\r\ninterface Aviso extends OpcoesAviso {\r\n  id: number\r\n  tipo: TipoAviso\r\n  mensagem: ReactNode\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface AvisosApi {\r\n  sucesso: (mensagem: ReactNode, opcoes?: OpcoesAviso) => number\r\n  erro: (mensagem: ReactNode, opcoes?: OpcoesAviso) => number\r\n  aviso: (mensagem: ReactNode, opcoes?: OpcoesAviso) => number\r\n  info: (mensagem: ReactNode, opcoes?: OpcoesAviso) => number\r\n  fechar: (id: number) => void\r\n}\r\n\r\nconst Contexto = createContext<AvisosApi | null>(null)\r\n\r\n/** Erros ficam mais tempo: ler uma mensagem de erro demora mais do que um \"Guardado\". */\r\nconst DURACAO: Record<TipoAviso, number> = { sucesso: 4000, info: 5000, aviso: 7000, erro: 9000 }\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface AvisosProviderProps {\r\n  children: ReactNode\r\n  /** Rótulo do botão de fechar (leitores de ecrã). */\r\n  rotuloFechar?: string\r\n  /** Máximo de avisos visíveis ao mesmo tempo; os mais antigos saem. */\r\n  maximo?: number\r\n}\r\n\r\n/**\r\n * Avisos de resultado de ações (\"Guardado\", \"Não foi possível eliminar\").\r\n *\r\n * Substituem os `alert()` do browser e as caixas de erro feitas em cada página.\r\n * Pôr o provider uma vez à volta da app e usar `useAvisos()` onde for preciso.\r\n * Erros de validação de formulário NÃO vão aqui: ficam junto aos campos.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function AvisosProvider({ children, rotuloFechar = 'Fechar aviso', maximo = 4 }: AvisosProviderProps) {\r\n  const [avisos, setAvisos] = useState<Aviso[]>([])\r\n  const seq = useRef(0)\r\n  const temporizadores = useRef(new Map<number, ReturnType<typeof setTimeout>>())\r\n\r\n  const fechar = useCallback((id: number) => {\r\n    const t = temporizadores.current.get(id)\r\n    if (t) clearTimeout(t)\r\n    temporizadores.current.delete(id)\r\n    setAvisos((l) => l.filter((a) => a.id !== id))\r\n  }, [])\r\n\r\n  const mostrar = useCallback(\r\n    (tipo: TipoAviso, mensagem: ReactNode, opcoes: OpcoesAviso = {}) => {\r\n      const id = ++seq.current\r\n      setAvisos((l) => [...l, { id, tipo, mensagem, ...opcoes }].slice(-maximo))\r\n      const duracao = opcoes.duracao ?? DURACAO[tipo]\r\n      if (duracao > 0) temporizadores.current.set(id, setTimeout(() => fechar(id), duracao))\r\n      return id\r\n    },\r\n    [fechar, maximo]\r\n  )\r\n\r\n  useEffect(() => {\r\n    const mapa = temporizadores.current\r\n    return () => mapa.forEach((t) => clearTimeout(t))\r\n  }, [])\r\n\r\n  const api = useMemo<AvisosApi>(\r\n    () => ({\r\n      sucesso: (m, o) => mostrar('sucesso', m, o),\r\n      erro: (m, o) => mostrar('erro', m, o),\r\n      aviso: (m, o) => mostrar('aviso', m, o),\r\n      info: (m, o) => mostrar('info', m, o),\r\n      fechar,\r\n    }),\r\n    [mostrar, fechar]\r\n  )\r\n\r\n  const estilos: Record<TipoAviso, [string, string, string]> = {\r\n    sucesso: ['border-ok/30', 'bg-ok-bg text-ok', '✓'],\r\n    erro: ['border-incumprido/30', 'bg-incumprido-bg text-incumprido', '!'],\r\n    aviso: ['border-risco/30', 'bg-risco-bg text-risco', '!'],\r\n    info: ['border-sky-200', 'bg-sky-50 text-sky-700', 'i'],\r\n  }\r\n\r\n  return (\r\n    <Contexto.Provider value={api}>\r\n      {children}\r\n      <div aria-live=\"polite\" className=\"pointer-events-none fixed bottom-4 right-4 z-[70] flex w-[min(420px,calc(100vw-2rem))] flex-col gap-2\">\r\n        {avisos.map((a) => {\r\n          const [borda, icone, simbolo] = estilos[a.tipo]\r\n          return (\r\n            <div\r\n              key={a.id}\r\n              role={a.tipo === 'erro' ? 'alert' : 'status'}\r\n              className={`pointer-events-auto flex items-center gap-3 rounded-xl border ${borda} bg-white px-3.5 py-3 shadow-lg dark:bg-slate-900`}\r\n            >\r\n              <span aria-hidden=\"true\" className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-black ${icone}`}>\r\n                {simbolo}\r\n              </span>\r\n              <span className=\"min-w-0 flex-1 text-sm font-semibold text-slate-800 dark:text-slate-100\">{a.mensagem}</span>\r\n              {a.acao && (\r\n                <button\r\n                  type=\"button\"\r\n                  onClick={() => {\r\n                    a.acao!.onClick()\r\n                    fechar(a.id)\r\n                  }}\r\n                  className=\"shrink-0 text-xs font-bold text-proef-blue hover:text-proef-navy\"\r\n                >\r\n                  {a.acao.rotulo}\r\n                </button>\r\n              )}\r\n              <button type=\"button\" onClick={() => fechar(a.id)} aria-label={rotuloFechar} className=\"shrink-0 text-slate-400 hover:text-slate-700\">\r\n                ×\r\n              </button>\r\n            </div>\r\n          )\r\n        })}\r\n      </div>\r\n    </Contexto.Provider>\r\n  )\r\n}\r\n\r\n/**\r\n * Avisos da app. Tem de estar dentro de um `AvisosProvider`.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function useAvisos(): AvisosApi {\r\n  const api = useContext(Contexto)\r\n  if (!api) throw new Error('useAvisos tem de ser usado dentro de um <AvisosProvider>.')\r\n  return api\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/legacy/components/ui/BarraAcoes.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function BarraAcoes({ children, esquerda, fixa = true }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Ações",
+      className: `${fixa ? "sticky bottom-0 z-20" : ""} flex flex-wrap items-center gap-2 border-t border-slate-200 bg-white/95 px-4 py-3 backdrop-blur dark:border-slate-700 dark:bg-slate-900/95`,
+      children: [
+        esquerda && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: esquerda }),
+        /* @__PURE__ */ jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
+      ]
+    }
+  );
+}
+export {
+  BarraAcoes as default
+};
+//# sourceMappingURL=BarraAcoes.js.map

package/dist/esm/legacy/components/ui/BarraAcoes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarraAcoes.js","sources":["../../../../../src/legacy/components/ui/BarraAcoes.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface BarraAcoesProps {\r\n  /** Ações principais, à direita (ex: \"Guardar\"). A principal vai em último. */\r\n  children: ReactNode\r\n  /** Ações secundárias, à esquerda (ex: \"Voltar à lista\"). */\r\n  esquerda?: ReactNode\r\n  /** Fica colada ao fundo do ecrã enquanto se desce na página. Por omissão sim. */\r\n  fixa?: boolean\r\n}\r\n\r\n/**\r\n * Barra de ações de uma página de detalhe ou formulário.\r\n *\r\n * Fixa ao fundo para \"Guardar\" estar sempre à vista: numa página longa o botão\r\n * no topo desaparece ao descer, e os botões repetidos em cima e em baixo\r\n * acabavam com textos diferentes.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport default function BarraAcoes({ children, esquerda, fixa = true }: BarraAcoesProps) {\r\n  return (\r\n    <div\r\n      role=\"group\"\r\n      aria-label=\"Ações\"\r\n      className={`${fixa ? 'sticky bottom-0 z-20' : ''} flex flex-wrap items-center gap-2 border-t border-slate-200 bg-white/95 px-4 py-3 backdrop-blur dark:border-slate-700 dark:bg-slate-900/95`}\r\n    >\r\n      {esquerda && <div className=\"flex flex-wrap items-center gap-2\">{esquerda}</div>}\r\n      <div className=\"ml-auto flex flex-wrap items-center gap-2\">{children}</div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";AAoBA,SAAwB,WAAW,EAAE,UAAU,UAAU,OAAO,QAAyB;AACvF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW,GAAG,OAAO,yBAAyB,EAAE;AAAA,MAE/C,UAAA;AAAA,QAAA,YAAY,oBAAC,OAAA,EAAI,WAAU,qCAAqC,UAAA,UAAS;AAAA,QAC1E,oBAAC,OAAA,EAAI,WAAU,6CAA6C,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3E;"}

package/dist/esm/legacy/components/ui/CabecalhoPagina.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function CabecalhoPagina({
+  titulo,
+  descricao,
+  caminho,
+  acoes,
+  extra,
+  rotuloCaminho = "Caminho"
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-3", children: [
+    caminho && caminho.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": rotuloCaminho, children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-1.5 text-xs font-semibold text-slate-500 dark:text-slate-400", children: caminho.map((n, i) => {
+      const ultimo = i === caminho.length - 1;
+      return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+        ultimo ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-slate-600 dark:text-slate-300", children: n.rotulo }) : n.href ? /* @__PURE__ */ jsx("a", { href: n.href, onClick: n.onClick, className: "text-proef-blue hover:text-proef-navy hover:underline dark:text-sky-300 dark:hover:text-sky-200", children: n.rotulo }) : n.onClick ? /* @__PURE__ */ jsx("button", { type: "button", onClick: n.onClick, className: "text-proef-blue hover:text-proef-navy hover:underline dark:text-sky-300 dark:hover:text-sky-200", children: n.rotulo }) : /* @__PURE__ */ jsx("span", { children: n.rotulo }),
+        !ultimo && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-slate-300 dark:text-slate-600", children: "›" })
+      ] }, i);
+    }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h1", { className: "m-0 text-2xl md:text-4xl font-black uppercase tracking-tighter text-proef-navy dark:text-slate-100", children: titulo }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 h-1 w-12 bg-proef-turquoise" }),
+        descricao && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-slate-500 dark:text-slate-400", children: descricao }),
+        extra && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: extra })
+      ] }),
+      acoes && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: acoes })
+    ] })
+  ] });
+}
+export {
+  CabecalhoPagina as default
+};
+//# sourceMappingURL=CabecalhoPagina.js.map

package/dist/esm/legacy/components/ui/CabecalhoPagina.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CabecalhoPagina.js","sources":["../../../../../src/legacy/components/ui/CabecalhoPagina.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react'\r\n\r\n/**\r\n * Um nível do caminho por cima do título.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport interface NivelCaminho {\r\n  rotulo: ReactNode\r\n  /** Ligação normal. Para o router da app, usar `onClick` (ex: `() => navigate('/x')`). */\r\n  href?: string\r\n  onClick?: () => void\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface CabecalhoPaginaProps {\r\n  titulo: ReactNode\r\n  descricao?: ReactNode\r\n  /**\r\n   * Caminho até à página (área › lista › registo). O último nível é a página\r\n   * atual e não leva ligação, mesmo que a traga.\r\n   */\r\n  caminho?: NivelCaminho[]\r\n  /** Botões da página (ex: \"Novo\", \"Editar\"). Ficam à direita e descem em ecrã estreito. */\r\n  acoes?: ReactNode\r\n  /** Linha extra por baixo da descrição (etiquetas de estado, responsável…). */\r\n  extra?: ReactNode\r\n  /** Rótulo acessível da navegação do caminho. */\r\n  rotuloCaminho?: string\r\n}\r\n\r\n/**\r\n * Cabeçalho comum a todas as páginas: caminho, título com a barra turquesa,\r\n * descrição e ações.\r\n *\r\n * Existe para o título deixar de ser desenhado à mão em cada ecrã — com\r\n * tamanhos, cores e posições diferentes de página para página. O nome no menu,\r\n * o título e o último nível do caminho devem ser o mesmo texto.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport default function CabecalhoPagina({\r\n  titulo,\r\n  descricao,\r\n  caminho,\r\n  acoes,\r\n  extra,\r\n  rotuloCaminho = 'Caminho',\r\n}: CabecalhoPaginaProps) {\r\n  return (\r\n    <header className=\"flex flex-col gap-3\">\r\n      {caminho && caminho.length > 0 && (\r\n        <nav aria-label={rotuloCaminho}>\r\n          <ol className=\"flex flex-wrap items-center gap-1.5 text-xs font-semibold text-slate-500 dark:text-slate-400\">\r\n            {caminho.map((n, i) => {\r\n              const ultimo = i === caminho.length - 1\r\n              return (\r\n                <li key={i} className=\"flex items-center gap-1.5\">\r\n                  {ultimo ? (\r\n                    <span aria-current=\"page\" className=\"text-slate-600 dark:text-slate-300\">\r\n                      {n.rotulo}\r\n                    </span>\r\n                  ) : n.href ? (\r\n                    <a href={n.href} onClick={n.onClick} className=\"text-proef-blue hover:text-proef-navy hover:underline dark:text-sky-300 dark:hover:text-sky-200\">\r\n                      {n.rotulo}\r\n                    </a>\r\n                  ) : n.onClick ? (\r\n                    <button type=\"button\" onClick={n.onClick} className=\"text-proef-blue hover:text-proef-navy hover:underline dark:text-sky-300 dark:hover:text-sky-200\">\r\n                      {n.rotulo}\r\n                    </button>\r\n                  ) : (\r\n                    <span>{n.rotulo}</span>\r\n                  )}\r\n                  {!ultimo && (\r\n                    <span aria-hidden=\"true\" className=\"text-slate-300 dark:text-slate-600\">\r\n                      ›\r\n                    </span>\r\n                  )}\r\n                </li>\r\n              )\r\n            })}\r\n          </ol>\r\n        </nav>\r\n      )}\r\n      <div className=\"flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between\">\r\n        <div className=\"min-w-0\">\r\n          <h1 className=\"m-0 text-2xl md:text-4xl font-black uppercase tracking-tighter text-proef-navy dark:text-slate-100\">\r\n            {titulo}\r\n          </h1>\r\n          <div className=\"mt-1 h-1 w-12 bg-proef-turquoise\" />\r\n          {descricao && <p className=\"mt-3 text-sm font-medium text-slate-500 dark:text-slate-400\">{descricao}</p>}\r\n          {extra && <div className=\"mt-2 flex flex-wrap items-center gap-2\">{extra}</div>}\r\n        </div>\r\n        {acoes && <div className=\"flex flex-wrap items-center gap-2 shrink-0\">{acoes}</div>}\r\n      </div>\r\n    </header>\r\n  )\r\n}\r\n"],"names":[],"mappings":";AAuCA,SAAwB,gBAAgB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAyB;AACvB,SACE,qBAAC,UAAA,EAAO,WAAU,uBACf,UAAA;AAAA,IAAA,WAAW,QAAQ,SAAS,KAC3B,oBAAC,SAAI,cAAY,eACf,UAAA,oBAAC,MAAA,EAAG,WAAU,gGACX,UAAA,QAAQ,IAAI,CAAC,GAAG,MAAM;AACrB,YAAM,SAAS,MAAM,QAAQ,SAAS;AACtC,aACE,qBAAC,MAAA,EAAW,WAAU,6BACnB,UAAA;AAAA,QAAA,6BACE,QAAA,EAAK,gBAAa,QAAO,WAAU,sCACjC,YAAE,OAAA,CACL,IACE,EAAE,2BACH,KAAA,EAAE,MAAM,EAAE,MAAM,SAAS,EAAE,SAAS,WAAU,mGAC5C,UAAA,EAAE,QACL,IACE,EAAE,UACJ,oBAAC,UAAA,EAAO,MAAK,UAAS,SAAS,EAAE,SAAS,WAAU,mGACjD,UAAA,EAAE,OAAA,CACL,IAEA,oBAAC,QAAA,EAAM,YAAE,OAAA,CAAO;AAAA,QAEjB,CAAC,UACA,oBAAC,QAAA,EAAK,eAAY,QAAO,WAAU,sCAAqC,UAAA,IAAA,CAExE;AAAA,MAAA,EAAA,GAnBK,CAqBT;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,IAEF,qBAAC,OAAA,EAAI,WAAU,mEACb,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,sGACX,UAAA,QACH;AAAA,QACA,oBAAC,OAAA,EAAI,WAAU,mCAAA,CAAmC;AAAA,QACjD,aAAa,oBAAC,KAAA,EAAE,WAAU,+DAA+D,UAAA,WAAU;AAAA,QACnG,SAAS,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,MAAA,CAAM;AAAA,MAAA,GAC3E;AAAA,MACC,SAAS,oBAAC,OAAA,EAAI,WAAU,8CAA8C,UAAA,MAAA,CAAM;AAAA,IAAA,EAAA,CAC/E;AAAA,EAAA,GACF;AAEJ;"}

package/dist/esm/legacy/components/ui/CaixaPesquisa.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function CaixaPesquisa({ valor, onMudar, placeholder = "Pesquisar…", rotulo, className = "w-56", autoFocus }) {
+  return /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "search",
+        value: valor,
+        onChange: (e) => onMudar(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Escape" && valor) {
+            e.stopPropagation();
+            onMudar("");
+          }
+        },
+        placeholder,
+        "aria-label": rotulo ?? placeholder,
+        autoFocus,
+        className: "h-8 w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 pl-8 pr-7 text-sm text-slate-800 dark:text-slate-100 placeholder:text-slate-400 outline-none focus:border-proef-blue focus:ring-1 focus:ring-proef-blue dark:focus:border-proef-turquoise dark:focus:ring-proef-turquoise [&::-webkit-search-cancel-button]:hidden"
+      }
+    ),
+    valor && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onMudar(""),
+        "aria-label": "Limpar pesquisa",
+        className: "appearance-none cursor-pointer bg-transparent border-0 absolute right-1.5 top-1/2 -translate-y-1/2 px-1 text-base leading-none text-slate-400 hover:text-slate-700 dark:hover:text-slate-200",
+        children: "×"
+      }
+    )
+  ] });
+}
+export {
+  CaixaPesquisa as default
+};
+//# sourceMappingURL=CaixaPesquisa.js.map

package/dist/esm/legacy/components/ui/CaixaPesquisa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaixaPesquisa.js","sources":["../../../../../src/legacy/components/ui/CaixaPesquisa.tsx"],"sourcesContent":["import React from 'react'\r\n\r\nexport interface CaixaPesquisaProps {\r\n  valor: string\r\n  onMudar: (valor: string) => void\r\n  placeholder?: string\r\n  /** Nome acessível (leitores de ecrã). Por omissão, o placeholder. */\r\n  rotulo?: string\r\n  /** Largura (classes tailwind). Por omissão w-56. */\r\n  className?: string\r\n  autoFocus?: boolean\r\n}\r\n\r\n/**\r\n * Caixa de pesquisa das barras de tabela e listas: mesma altura (h-8) e cantos (rounded-lg) dos botões, do\r\n * Exportar e do seletor de colunas. Lupa à esquerda; com texto, um \"×\" para limpar (Esc também limpa).\r\n */\r\nexport default function CaixaPesquisa({ valor, onMudar, placeholder = 'Pesquisar…', rotulo, className = 'w-56', autoFocus }: CaixaPesquisaProps) {\r\n  return (\r\n    <div className={`relative ${className}`}>\r\n      <svg\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        width=\"14\"\r\n        height=\"14\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n        className=\"pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400\"\r\n        aria-hidden\r\n      >\r\n        <circle cx=\"11\" cy=\"11\" r=\"8\" />\r\n        <path d=\"m21 21-4.3-4.3\" />\r\n      </svg>\r\n      <input\r\n        type=\"search\"\r\n        value={valor}\r\n        onChange={(e) => onMudar(e.target.value)}\r\n        onKeyDown={(e) => {\r\n          if (e.key === 'Escape' && valor) {\r\n            e.stopPropagation()\r\n            onMudar('')\r\n          }\r\n        }}\r\n        placeholder={placeholder}\r\n        aria-label={rotulo ?? placeholder}\r\n        autoFocus={autoFocus}\r\n        className=\"h-8 w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 pl-8 pr-7 text-sm text-slate-800 dark:text-slate-100 placeholder:text-slate-400 outline-none focus:border-proef-blue focus:ring-1 focus:ring-proef-blue dark:focus:border-proef-turquoise dark:focus:ring-proef-turquoise [&::-webkit-search-cancel-button]:hidden\"\r\n      />\r\n      {valor && (\r\n        <button\r\n          type=\"button\"\r\n          onClick={() => onMudar('')}\r\n          aria-label=\"Limpar pesquisa\"\r\n          className=\"appearance-none cursor-pointer bg-transparent border-0 absolute right-1.5 top-1/2 -translate-y-1/2 px-1 text-base leading-none text-slate-400 hover:text-slate-700 dark:hover:text-slate-200\"\r\n        >\r\n          ×\r\n        </button>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";AAiBA,SAAwB,cAAc,EAAE,OAAO,SAAS,cAAc,cAAc,QAAQ,YAAY,QAAQ,aAAiC;AAC/I,SACE,qBAAC,OAAA,EAAI,WAAW,YAAY,SAAS,IACnC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACf,WAAU;AAAA,QACV,eAAW;AAAA,QAEX,UAAA;AAAA,UAAA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,UAC9B,oBAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE3B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,QACvC,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,YAAY,OAAO;AAC/B,cAAE,gBAAA;AACF,oBAAQ,EAAE;AAAA,UACZ;AAAA,QACF;AAAA,QACA;AAAA,QACA,cAAY,UAAU;AAAA,QACtB;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEX,SACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,QAAQ,EAAE;AAAA,QACzB,cAAW;AAAA,QACX,WAAU;AAAA,QACX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GAEJ;AAEJ;"}