@nextelco/common-ui 2.1.98 → 2.1.100

package/dist/esm/legacy/components/molecules/Sidebar/Sidebar.js

@@ -0,0 +1,62 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import IconButton from "../../atoms/Button/variants/IconButton.js";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+import './Sidebar.css';/* empty css             */
+import { IconButtonThemeStyled } from "../../../styles/themes/ButtonThemes.js";
+const Sidebar = ({
+  title,
+  isHome,
+  isOpen,
+  onClose,
+  children
+}) => {
+  const sidebarRef = useRef(null);
+  const overlayRef = useRef(null);
+  useEffect(() => {
+    const handleEsc = (event) => {
+      if (event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [isOpen, onClose]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (isOpen && sidebarRef.current && overlayRef.current && !sidebarRef.current.contains(event.target) && overlayRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, onClose]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        className: `cui-sidebar ${isOpen ? "cui-sidebar__open" : ""}`,
+        ref: sidebarRef,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "cui-sidebar__header", children: [
+            /* @__PURE__ */ jsx("h2", { children: title }),
+            !isHome && /* @__PURE__ */ jsx("div", { className: "sidebar-close", onClick: onClose, children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onClose,
+                icon: faX,
+                theme: IconButtonThemeStyled
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("nav", { className: "navigation", children })
+        ]
+      }
+    ),
+    isOpen && !isHome && /* @__PURE__ */ jsx("div", { className: "cui-sidebar__overlay", ref: overlayRef })
+  ] });
+};
+export {
+  Sidebar as default
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/esm/legacy/components/molecules/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../../../../src/legacy/components/molecules/Sidebar/Sidebar.tsx"],"sourcesContent":["import React, { ReactNode, useRef, useEffect } from 'react'\r\nimport IconButton from '../../atoms/Button/variants/IconButton'\r\nimport { faX } from '@fortawesome/free-solid-svg-icons'\r\nimport './Sidebar.scss'\r\nimport { IconButtonThemeStyled } from '../../../styles/themes/ButtonThemes'\r\n\r\ninterface SidebarProps {\r\n  title: string\r\n  isHome: boolean\r\n  isOpen: boolean\r\n  onClose: () => void\r\n  children: ReactNode\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst Sidebar: React.FC<SidebarProps> = ({\r\n  title,\r\n  isHome,\r\n  isOpen,\r\n  onClose,\r\n  children,\r\n}) => {\r\n  const sidebarRef = useRef<HTMLDivElement>(null)\r\n  const overlayRef = useRef<HTMLDivElement>(null)\r\n\r\n  useEffect(() => {\r\n    const handleEsc = (event: KeyboardEvent) => {\r\n      if (event.key === 'Escape' && isOpen) {\r\n        onClose()\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleEsc)\r\n    return () => document.removeEventListener('keydown', handleEsc)\r\n  }, [isOpen, onClose])\r\n\r\n  useEffect(() => {\r\n    const handleClickOutside = (event: MouseEvent) => {\r\n      if (\r\n        isOpen &&\r\n        sidebarRef.current &&\r\n        overlayRef.current &&\r\n        !sidebarRef.current.contains(event.target as Node) &&\r\n        overlayRef.current.contains(event.target as Node)\r\n      ) {\r\n        onClose()\r\n      }\r\n    }\r\n\r\n    document.addEventListener('mousedown', handleClickOutside)\r\n    return () => document.removeEventListener('mousedown', handleClickOutside)\r\n  }, [isOpen, onClose])\r\n\r\n  return (\r\n    <>\r\n      <aside\r\n        className={`cui-sidebar ${isOpen ? 'cui-sidebar__open' : ''}`}\r\n        ref={sidebarRef}\r\n      >\r\n        <div className={'cui-sidebar__header'}>\r\n          <h2>{title}</h2>\r\n          {!isHome && (\r\n            <div className={'sidebar-close'} onClick={onClose}>\r\n              <IconButton\r\n                onClick={onClose}\r\n                icon={faX}\r\n                theme={IconButtonThemeStyled}\r\n              />\r\n            </div>\r\n          )}\r\n        </div>\r\n        <nav className={'navigation'}>{children}</nav>\r\n      </aside>\r\n      {isOpen && !isHome && (\r\n        <div className=\"cui-sidebar__overlay\" ref={overlayRef}></div>\r\n      )}\r\n    </>\r\n  )\r\n}\r\n\r\nexport default Sidebar\r\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,UAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,aAAa,OAAuB,IAAI;AAE9C,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,YAAY,QAAQ;AACpC,gBAAA;AAAA,MACF;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,YAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UACE,UACA,WAAW,WACX,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,MAAc,KACjD,WAAW,QAAQ,SAAS,MAAM,MAAc,GAChD;AACA,gBAAA;AAAA,MACF;AAAA,IACF;AAEA,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM,SAAS,oBAAoB,aAAa,kBAAkB;AAAA,EAC3E,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,eAAe,SAAS,sBAAsB,EAAE;AAAA,QAC3D,KAAK;AAAA,QAEL,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAW,uBACd,UAAA;AAAA,YAAA,oBAAC,QAAI,UAAA,MAAA,CAAM;AAAA,YACV,CAAC,UACA,oBAAC,SAAI,WAAW,iBAAiB,SAAS,SACxC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,MAAM;AAAA,gBACN,OAAO;AAAA,cAAA;AAAA,YAAA,EACT,CACF;AAAA,UAAA,GAEJ;AAAA,UACA,oBAAC,OAAA,EAAI,WAAW,cAAe,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEzC,UAAU,CAAC,UACV,oBAAC,SAAI,WAAU,wBAAuB,KAAK,WAAA,CAAY;AAAA,EAAA,GAE3D;AAEJ;"}

package/dist/esm/legacy/components/molecules/UserAvatar/UserAvatar.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+function getInitials(fullName) {
+  if (!fullName) return "U";
+  const parts = fullName.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "U";
+  const first = parts[0]?.charAt(0) ?? "";
+  const last = (parts.length > 1 ? parts[parts.length - 1]?.charAt(0) : "") ?? "";
+  return (first + last).toUpperCase() || "U";
+}
+function UserAvatar({
+  name,
+  photo,
+  email,
+  company,
+  jobTitle,
+  department,
+  className = "",
+  showCard = false
+}) {
+  const ref = useRef(null);
+  const [popupPos, setPopupPos] = useState(null);
+  const [imgError, setImgError] = useState(false);
+  const mediumPhoto = photo?.endsWith("/thumb") ? photo + "/medium" : photo;
+  const handleMouseEnter = () => {
+    if (!showCard || !ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const POPUP_W = 200;
+    const hasDetails = !!(email || company || jobTitle || department);
+    const POPUP_H = hasDetails ? 280 : 196;
+    const GAP = 10;
+    let left = rect.right + GAP;
+    let top = rect.top + rect.height / 2 - POPUP_H / 2;
+    if (left + POPUP_W > window.innerWidth - 8) left = rect.left - POPUP_W - GAP;
+    if (top + POPUP_H > window.innerHeight - 8) top = window.innerHeight - POPUP_H - 8;
+    if (top < 8) top = 8;
+    setPopupPos({ top, left });
+  };
+  const avatar = photo && !imgError ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `overflow-hidden shrink-0 cursor-pointer ${className}`,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: () => setPopupPos(null),
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: photo,
+          alt: name || "",
+          className: "w-full h-full object-cover rounded-[inherit]",
+          onError: () => setImgError(true)
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `flex items-center justify-center shrink-0 ${className}`,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: () => setPopupPos(null),
+      children: getInitials(name || "")
+    }
+  );
+  const popup = popupPos && createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: { position: "fixed", top: popupPos.top, left: popupPos.left, zIndex: 9999, width: 200 },
+        className: "pointer-events-none rounded-2xl overflow-hidden shadow-2xl ring-4 ring-white dark:ring-slate-800 border border-slate-100 dark:border-slate-700 bg-white dark:bg-slate-900",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "w-48 h-48 rounded-xl overflow-hidden", children: mediumPhoto && !imgError ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: mediumPhoto,
+              alt: name || "",
+              className: "w-full h-full object-cover",
+              onError: () => setImgError(true)
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-200 to-slate-300 text-slate-600 font-black text-4xl", children: getInitials(name || "") }) }),
+          /* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 space-y-1", children: [
+            name && /* @__PURE__ */ jsx("p", { className: "text-[12px] font-black text-slate-800 dark:text-slate-100 tracking-tight leading-tight break-words", children: name }),
+            email && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-slate-400 truncate", children: email }),
+            (company || department || jobTitle) && /* @__PURE__ */ jsxs("div", { className: "pt-1 mt-1 border-t border-slate-50 dark:border-slate-700 space-y-0.5", children: [
+              company && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold text-slate-600 dark:text-slate-300 truncate", children: company }),
+              department && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-slate-500 dark:text-slate-400 truncate", children: department }),
+              jobTitle && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-slate-400 truncate italic", children: jobTitle })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    avatar,
+    popup
+  ] });
+}
+export {
+  UserAvatar as default
+};
+//# sourceMappingURL=UserAvatar.js.map

package/dist/esm/legacy/components/molecules/UserAvatar/UserAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.js","sources":["../../../../../../src/legacy/components/molecules/UserAvatar/UserAvatar.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\n\r\n/** Iniciais a partir do nome completo (primeira + última). Fallback 'U'. */\r\nfunction getInitials(fullName?: string | null): string {\r\n  if (!fullName) return 'U'\r\n  const parts = fullName.trim().split(/\\s+/).filter(Boolean)\r\n  if (parts.length === 0) return 'U'\r\n  const first = parts[0]?.charAt(0) ?? ''\r\n  const last = (parts.length > 1 ? parts[parts.length - 1]?.charAt(0) : '') ?? ''\r\n  return (first + last).toUpperCase() || 'U'\r\n}\r\n\r\ninterface UserAvatarProps {\r\n  name?: string | null\r\n  photo?: string | null\r\n  email?: string | null\r\n  company?: string | null\r\n  jobTitle?: string | null\r\n  department?: string | null\r\n  className?: string\r\n  /** Mostra o cartão de detalhes em hover (foto ampliada + nome/email). Default: off. */\r\n  showCard?: boolean\r\n}\r\n\r\n/**\r\n * Avatar de utilizador: mostra a foto (se disponível) ou as iniciais, com um\r\n * cartão de detalhes em hover (via portal). Usa classes Tailwind — a app\r\n * consumidora é responsável por gerar o CSS Tailwind.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport default function UserAvatar({\r\n  name,\r\n  photo,\r\n  email,\r\n  company,\r\n  jobTitle,\r\n  department,\r\n  className = '',\r\n  showCard = false,\r\n}: UserAvatarProps) {\r\n  const ref = useRef<HTMLDivElement>(null)\r\n  const [popupPos, setPopupPos] = useState<{ top: number; left: number } | null>(null)\r\n  const [imgError, setImgError] = useState(false)\r\n\r\n  const mediumPhoto = photo?.endsWith('/thumb') ? photo + '/medium' : photo\r\n\r\n  const handleMouseEnter = () => {\r\n    if (!showCard || !ref.current) return\r\n    const rect = ref.current.getBoundingClientRect()\r\n    const POPUP_W = 200\r\n    const hasDetails = !!(email || company || jobTitle || department)\r\n    const POPUP_H = hasDetails ? 280 : 196\r\n    const GAP = 10\r\n    let left = rect.right + GAP\r\n    let top = rect.top + rect.height / 2 - POPUP_H / 2\r\n    if (left + POPUP_W > window.innerWidth - 8) left = rect.left - POPUP_W - GAP\r\n    if (top + POPUP_H > window.innerHeight - 8) top = window.innerHeight - POPUP_H - 8\r\n    if (top < 8) top = 8\r\n    setPopupPos({ top, left })\r\n  }\r\n\r\n  const avatar =\r\n    photo && !imgError ? (\r\n      <div\r\n        ref={ref}\r\n        className={`overflow-hidden shrink-0 cursor-pointer ${className}`}\r\n        onMouseEnter={handleMouseEnter}\r\n        onMouseLeave={() => setPopupPos(null)}\r\n      >\r\n        <img\r\n          src={photo}\r\n          alt={name || ''}\r\n          className=\"w-full h-full object-cover rounded-[inherit]\"\r\n          onError={() => setImgError(true)}\r\n        />\r\n      </div>\r\n    ) : (\r\n      <div\r\n        ref={ref}\r\n        className={`flex items-center justify-center shrink-0 ${className}`}\r\n        onMouseEnter={handleMouseEnter}\r\n        onMouseLeave={() => setPopupPos(null)}\r\n      >\r\n        {getInitials(name || '')}\r\n      </div>\r\n    )\r\n\r\n  const popup =\r\n    popupPos &&\r\n    createPortal(\r\n      <div\r\n        style={{ position: 'fixed', top: popupPos.top, left: popupPos.left, zIndex: 9999, width: 200 }}\r\n        className=\"pointer-events-none rounded-2xl overflow-hidden shadow-2xl ring-4 ring-white dark:ring-slate-800 border border-slate-100 dark:border-slate-700 bg-white dark:bg-slate-900\"\r\n      >\r\n        {/* Foto / iniciais */}\r\n        <div className=\"w-48 h-48 rounded-xl overflow-hidden\">\r\n          {mediumPhoto && !imgError ? (\r\n            <img\r\n              src={mediumPhoto}\r\n              alt={name || ''}\r\n              className=\"w-full h-full object-cover\"\r\n              onError={() => setImgError(true)}\r\n            />\r\n          ) : (\r\n            <div className=\"w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-200 to-slate-300 text-slate-600 font-black text-4xl\">\r\n              {getInitials(name || '')}\r\n            </div>\r\n          )}\r\n        </div>\r\n        {/* Barra de informação */}\r\n        <div className=\"px-3 py-2.5 space-y-1\">\r\n          {name && (\r\n            <p className=\"text-[12px] font-black text-slate-800 dark:text-slate-100 tracking-tight leading-tight break-words\">\r\n              {name}\r\n            </p>\r\n          )}\r\n          {email && <p className=\"text-[10px] text-slate-400 truncate\">{email}</p>}\r\n          {(company || department || jobTitle) && (\r\n            <div className=\"pt-1 mt-1 border-t border-slate-50 dark:border-slate-700 space-y-0.5\">\r\n              {company && (\r\n                <p className=\"text-[10px] font-semibold text-slate-600 dark:text-slate-300 truncate\">{company}</p>\r\n              )}\r\n              {department && <p className=\"text-[10px] text-slate-500 dark:text-slate-400 truncate\">{department}</p>}\r\n              {jobTitle && <p className=\"text-[10px] text-slate-400 truncate italic\">{jobTitle}</p>}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>,\r\n      document.body\r\n    )\r\n\r\n  return (\r\n    <>\r\n      {avatar}\r\n      {popup}\r\n    </>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,162 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState, useMemo, Fragment as Fragment$1 } from "react";
+const DIA_MS = 864e5;
+const MESES_PT = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];
+const ACCENT = "var(--gantt-accent, #1868B0)";
+const toIdx = (iso, t0) => Math.round((Date.parse(`${iso}T00:00:00Z`) - t0) / DIA_MS);
+function GanttChart({
+  rows,
+  start,
+  end,
+  dayWidth = 14,
+  labelWidth = 300,
+  labelHeader = "",
+  legend,
+  expanded: expandedProp,
+  onExpandedChange,
+  renderTooltip,
+  monthNames = MESES_PT,
+  emptyText = "—",
+  className = ""
+}) {
+  const [expandedLocal, setExpandedLocal] = useState(/* @__PURE__ */ new Set());
+  const expanded = expandedProp ?? expandedLocal;
+  const setExpanded = (s) => onExpandedChange ? onExpandedChange(s) : setExpandedLocal(s);
+  const [tip, setTip] = useState(null);
+  const t0 = Date.parse(`${start}T00:00:00Z`);
+  const nDias = Math.max(1, toIdx(end, t0) + 1);
+  const largura = nDias * dayWidth;
+  const dias = useMemo(
+    () => Array.from({ length: nDias }, (_, i) => {
+      const d = new Date(t0 + i * DIA_MS);
+      return { i, dia: d.getUTCDate(), mes: d.getUTCMonth(), ano: d.getUTCFullYear(), fds: d.getUTCDay() === 0 || d.getUTCDay() === 6 };
+    }),
+    [t0, nDias]
+  );
+  const toggle = (id) => {
+    const s = new Set(expanded);
+    if (s.has(id)) s.delete(id);
+    else s.add(id);
+    setExpanded(s);
+  };
+  const fundo = /* @__PURE__ */ jsx(Fragment, { children: dias.filter((d) => d.fds).map((d) => /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 bg-slate-100", style: { left: d.i * dayWidth, width: dayWidth } }, d.i)) });
+  const mostrarTip = (e, content) => {
+    if (!content) return;
+    setTip({ x: Math.min(e.clientX + 12, window.innerWidth - 340), y: e.clientY + 14, content });
+  };
+  const trilho = (blocos, marcas, alto) => /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", style: { width: largura }, children: [
+    fundo,
+    blocos.map((b) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute rounded-sm ${alto ? "top-[5px] bottom-[5px]" : "top-1 bottom-1"}`,
+        style: { left: b.i * dayWidth + 1, width: Math.max(dayWidth - 2, 2), background: b.color, opacity: b.opacity },
+        onMouseMove: (e) => mostrarTip(e, b.tip),
+        onMouseLeave: () => setTip(null)
+      },
+      `b${b.i}`
+    )),
+    marcas.map((m) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-1/2 w-[9px] h-[9px] bg-slate-900 border-[1.5px] border-white",
+        style: { left: m.i * dayWidth + dayWidth / 2, transform: "translate(-50%,-50%) rotate(45deg)" },
+        onMouseMove: (e) => mostrarTip(e, m.tip),
+        onMouseLeave: () => setTip(null)
+      },
+      `m${m.i}`
+    ))
+  ] });
+  const linhas = [];
+  let secaoAtual;
+  for (const row of rows) {
+    if (row.section && row.section !== secaoAtual) {
+      secaoAtual = row.section;
+      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 bg-slate-50 px-2 py-1 text-[11px] font-bold uppercase tracking-wide text-slate-500 border-r border-slate-200", style: { width: labelWidth }, children: row.section }),
+          /* @__PURE__ */ jsx("div", { style: { width: largura } })
+        ] }, `s-${row.section}-${row.id}`)
+      );
+    }
+    const filhos = row.children ?? [];
+    const aberto = expanded.has(row.id);
+    let blocos;
+    if (row.days) {
+      blocos = row.days.map((d) => ({ i: toIdx(d, t0), color: row.color ?? ACCENT, tip: renderTooltip?.({ row, day: d, kind: "day" }) }));
+    } else {
+      const cont = /* @__PURE__ */ new Map();
+      for (const f of filhos) for (const d of f.days ?? []) cont.set(d, (cont.get(d) ?? 0) + 1);
+      const max = Math.max(1, ...cont.values());
+      blocos = [...cont.entries()].map(([d, n]) => ({
+        i: toIdx(d, t0),
+        color: row.color ?? ACCENT,
+        opacity: 0.45 + 0.55 * n / max,
+        tip: renderTooltip?.({ row, day: d, kind: "day", count: n })
+      }));
+    }
+    const marcas = (row.markers ?? []).map((d) => ({ i: toIdx(d, t0), tip: renderTooltip?.({ row, day: d, kind: "marker" }) }));
+    linhas.push(
+      /* @__PURE__ */ jsxs("div", { className: "group flex min-h-[22px] border-b border-slate-200 hover:bg-blue-50/60", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `sticky left-0 z-[2] shrink-0 truncate border-r border-slate-200 bg-white px-2 py-[3px] group-hover:bg-blue-50 ${filhos.length ? "cursor-pointer font-semibold" : ""}`,
+            style: { width: labelWidth, color: row.labelColor },
+            onClick: filhos.length ? () => toggle(row.id) : void 0,
+            title: row.label,
+            children: [
+              filhos.length > 0 && /* @__PURE__ */ jsx("span", { className: "inline-block w-3.5 text-slate-400", children: aberto ? "▾" : "▸" }),
+              row.label,
+              row.sublabel && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[11px] font-normal text-slate-400", children: row.sublabel }),
+              row.warning && /* @__PURE__ */ jsx("span", { className: "ml-1 text-orange-600", title: row.warning, children: "⚠" })
+            ]
+          }
+        ),
+        trilho(blocos, marcas, true)
+      ] }, row.id)
+    );
+    if (aberto)
+      for (const f of filhos) {
+        const b = (f.days ?? []).map((d) => ({ i: toIdx(d, t0), color: f.color ?? ACCENT, tip: renderTooltip?.({ row: f, day: d, kind: "day", parent: row }) }));
+        const m = (f.markers ?? []).map((d) => ({ i: toIdx(d, t0), tip: renderTooltip?.({ row: f, day: d, kind: "marker", parent: row }) }));
+        linhas.push(
+          /* @__PURE__ */ jsxs("div", { className: "group flex min-h-[22px] border-b border-slate-200 hover:bg-blue-50/60", children: [
+            /* @__PURE__ */ jsxs("div", { className: "sticky left-0 z-[2] shrink-0 truncate border-r border-slate-200 bg-white py-[3px] pl-7 pr-2 text-slate-500 group-hover:bg-blue-50", style: { width: labelWidth, color: f.labelColor }, title: f.warning ? `${f.label} — ${f.warning}` : f.label, children: [
+              f.label,
+              f.sublabel && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[11px] text-slate-400", children: f.sublabel }),
+              f.warning && /* @__PURE__ */ jsx("span", { className: "ml-1 text-orange-600", children: "⚠" })
+            ] }),
+            trilho(b, m, false)
+          ] }, `${row.id}::${f.id}`)
+        );
+      }
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    legend && legend.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-3 text-xs text-slate-500", children: legend.map((l) => /* @__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: l.color, transform: l.kind === "marker" ? "rotate(45deg) scale(.85)" : void 0 } }),
+      l.label
+    ] }, l.label)) }),
+    /* @__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] shrink-0 border-r border-slate-200 bg-white px-2 py-2 font-semibold", style: { width: labelWidth }, children: labelHeader }),
+        /* @__PURE__ */ jsx("div", { className: "relative shrink-0 bg-white", style: { width: largura, height: 36 }, children: dias.map((d) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          (d.i === 0 || d.dia === 1) && /* @__PURE__ */ jsxs("div", { className: "absolute top-0 h-[18px] whitespace-nowrap border-l border-slate-200 pl-1 font-semibold", style: { left: d.i * dayWidth }, children: [
+            monthNames[d.mes],
+            " ",
+            d.ano
+          ] }),
+          (dayWidth >= 14 || new Date(t0 + d.i * DIA_MS).getUTCDay() === 1) && /* @__PURE__ */ jsx("div", { className: "absolute top-[18px] h-4 text-[10px] text-slate-400", style: { left: d.i * dayWidth, width: dayWidth >= 14 ? dayWidth : dayWidth * 7, textAlign: dayWidth >= 14 ? "center" : "left" }, children: d.dia })
+        ] }, d.i)) })
+      ] }),
+      linhas.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 })
+  ] });
+}
+const ganttDiaIso = (start, offset) => new Date(Date.parse(`${start}T00:00:00Z`) + offset * DIA_MS).toISOString().slice(0, 10);
+export {
+  GanttChart as default,
+  ganttDiaIso
+};
+//# sourceMappingURL=GanttChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GanttChart.js","sources":["../../../../../../src/legacy/components/organisms/GanttChart/GanttChart.tsx"],"sourcesContent":["import React, { Fragment, useMemo, useState } from 'react'\r\n\r\n// ─── Tipos ──────────────────────────────────────────────────────────────────\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface GanttRow {\r\n  id: string\r\n  label: string\r\n  /** Texto pequeno à direita do rótulo (ex: \"12 dias\"). */\r\n  sublabel?: string\r\n  /** Mostra ⚠ com este texto no title. */\r\n  warning?: string\r\n  /** Cor dos blocos (CSS). Nas linhas-pai sem cor usa-se a cor de destaque. */\r\n  color?: string\r\n  /** Cor do texto do rótulo (CSS) — ex.: verde para tarefas concluídas. */\r\n  labelColor?: string\r\n  /** Dias com atividade (ISO yyyy-mm-dd). Nas linhas-pai, se omitido, agrega os dias dos filhos. */\r\n  days?: string[]\r\n  /** Dias marcados com losango (ex: conclusão). */\r\n  markers?: string[]\r\n  /** Cabeçalho de secção mostrado antes da linha quando muda (ex: \"Ramal 1\"). */\r\n  section?: string\r\n  children?: GanttRow[]\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface GanttLegendItem {\r\n  label: string\r\n  color: string\r\n  kind?: 'block' | 'marker'\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface GanttChartProps {\r\n  rows: GanttRow[]\r\n  /** Início e fim do eixo (ISO). */\r\n  start: string\r\n  end: string\r\n  /** Largura de cada dia em px (zoom). Default 14. */\r\n  dayWidth?: number\r\n  labelWidth?: number\r\n  /** Título da coluna de rótulos. */\r\n  labelHeader?: string\r\n  legend?: GanttLegendItem[]\r\n  /** Linhas-pai abertas (controlado). Sem isto o componente gere o estado. */\r\n  expanded?: Set<string>\r\n  onExpandedChange?: (ids: Set<string>) => void\r\n  /** Conteúdo do tooltip de um dia. `parent` = linha-pai (dia agregado). */\r\n  renderTooltip?: (info: { row: GanttRow; day: string; kind: 'day' | 'marker'; count?: number; parent?: GanttRow }) => React.ReactNode\r\n  /** Nomes dos meses (i18n). Default PT. */\r\n  monthNames?: string[]\r\n  emptyText?: string\r\n  className?: string\r\n}\r\n\r\nconst DIA_MS = 86_400_000\r\nconst MESES_PT = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']\r\nconst ACCENT = 'var(--gantt-accent, #1868B0)'\r\n\r\nconst toIdx = (iso: string, t0: number) => Math.round((Date.parse(`${iso}T00:00:00Z`) - t0) / DIA_MS)\r\n\r\n// ─── Componente ─────────────────────────────────────────────────────────────\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport default function GanttChart({\r\n  rows,\r\n  start,\r\n  end,\r\n  dayWidth = 14,\r\n  labelWidth = 300,\r\n  labelHeader = '',\r\n  legend,\r\n  expanded: expandedProp,\r\n  onExpandedChange,\r\n  renderTooltip,\r\n  monthNames = MESES_PT,\r\n  emptyText = '—',\r\n  className = '',\r\n}: GanttChartProps) {\r\n  const [expandedLocal, setExpandedLocal] = useState<Set<string>>(new Set())\r\n  const expanded = expandedProp ?? expandedLocal\r\n  const setExpanded = (s: Set<string>) => (onExpandedChange ? onExpandedChange(s) : setExpandedLocal(s))\r\n  const [tip, setTip] = useState<{ x: number; y: number; content: React.ReactNode } | null>(null)\r\n\r\n  const t0 = Date.parse(`${start}T00:00:00Z`)\r\n  const nDias = Math.max(1, toIdx(end, t0) + 1)\r\n  const largura = nDias * dayWidth\r\n\r\n  const dias = useMemo(\r\n    () =>\r\n      Array.from({ length: nDias }, (_, i) => {\r\n        const d = new Date(t0 + i * DIA_MS)\r\n        return { i, dia: d.getUTCDate(), mes: d.getUTCMonth(), ano: d.getUTCFullYear(), fds: d.getUTCDay() === 0 || d.getUTCDay() === 6 }\r\n      }),\r\n    [t0, nDias]\r\n  )\r\n\r\n  const toggle = (id: string) => {\r\n    const s = new Set(expanded)\r\n    if (s.has(id)) s.delete(id)\r\n    else s.add(id)\r\n    setExpanded(s)\r\n  }\r\n\r\n  const fundo = (\r\n    <>\r\n      {dias.filter((d) => d.fds).map((d) => (\r\n        <div key={d.i} className=\"absolute inset-y-0 bg-slate-100\" style={{ left: d.i * dayWidth, width: dayWidth }} />\r\n      ))}\r\n    </>\r\n  )\r\n\r\n  const mostrarTip = (e: React.MouseEvent, content: React.ReactNode) => {\r\n    if (!content) return\r\n    setTip({ x: Math.min(e.clientX + 12, window.innerWidth - 340), y: e.clientY + 14, content })\r\n  }\r\n\r\n  const trilho = (blocos: { i: number; color: string; opacity?: number; tip?: React.ReactNode }[], marcas: { i: number; tip?: React.ReactNode }[], alto: boolean) => (\r\n    <div className=\"relative shrink-0\" style={{ width: largura }}>\r\n      {fundo}\r\n      {blocos.map((b) => (\r\n        <div\r\n          key={`b${b.i}`}\r\n          className={`absolute rounded-sm ${alto ? 'top-[5px] bottom-[5px]' : 'top-1 bottom-1'}`}\r\n          style={{ left: b.i * dayWidth + 1, width: Math.max(dayWidth - 2, 2), background: b.color, opacity: b.opacity }}\r\n          onMouseMove={(e) => mostrarTip(e, b.tip)}\r\n          onMouseLeave={() => setTip(null)}\r\n        />\r\n      ))}\r\n      {marcas.map((m) => (\r\n        <div\r\n          key={`m${m.i}`}\r\n          className=\"absolute top-1/2 w-[9px] h-[9px] bg-slate-900 border-[1.5px] border-white\"\r\n          style={{ left: m.i * dayWidth + dayWidth / 2, transform: 'translate(-50%,-50%) rotate(45deg)' }}\r\n          onMouseMove={(e) => mostrarTip(e, m.tip)}\r\n          onMouseLeave={() => setTip(null)}\r\n        />\r\n      ))}\r\n    </div>\r\n  )\r\n\r\n  const linhas: React.ReactNode[] = []\r\n  let secaoAtual: string | undefined\r\n  for (const row of rows) {\r\n    if (row.section && row.section !== secaoAtual) {\r\n      secaoAtual = row.section\r\n      linhas.push(\r\n        <div key={`s-${row.section}-${row.id}`} className=\"flex border-b border-slate-200 bg-slate-50\">\r\n          <div className=\"sticky left-0 z-[2] shrink-0 bg-slate-50 px-2 py-1 text-[11px] font-bold uppercase tracking-wide text-slate-500 border-r border-slate-200\" style={{ width: labelWidth }}>\r\n            {row.section}\r\n          </div>\r\n          <div style={{ width: largura }} />\r\n        </div>\r\n      )\r\n    }\r\n    const filhos = row.children ?? []\r\n    const aberto = expanded.has(row.id)\r\n    let blocos: { i: number; color: string; opacity?: number; tip?: React.ReactNode }[]\r\n    if (row.days) {\r\n      blocos = row.days.map((d) => ({ i: toIdx(d, t0), color: row.color ?? ACCENT, tip: renderTooltip?.({ row, day: d, kind: 'day' }) }))\r\n    } else {\r\n      const cont = new Map<string, number>()\r\n      for (const f of filhos) for (const d of f.days ?? []) cont.set(d, (cont.get(d) ?? 0) + 1)\r\n      const max = Math.max(1, ...cont.values())\r\n      blocos = [...cont.entries()].map(([d, n]) => ({\r\n        i: toIdx(d, t0),\r\n        color: row.color ?? ACCENT,\r\n        opacity: 0.45 + (0.55 * n) / max,\r\n        tip: renderTooltip?.({ row, day: d, kind: 'day', count: n }),\r\n      }))\r\n    }\r\n    const marcas = (row.markers ?? []).map((d) => ({ i: toIdx(d, t0), tip: renderTooltip?.({ row, day: d, kind: 'marker' }) }))\r\n\r\n    linhas.push(\r\n      <div key={row.id} className=\"group flex min-h-[22px] border-b border-slate-200 hover:bg-blue-50/60\">\r\n        <div\r\n          className={`sticky left-0 z-[2] shrink-0 truncate border-r border-slate-200 bg-white px-2 py-[3px] group-hover:bg-blue-50 ${filhos.length ? 'cursor-pointer font-semibold' : ''}`}\r\n          style={{ width: labelWidth, color: row.labelColor }}\r\n          onClick={filhos.length ? () => toggle(row.id) : undefined}\r\n          title={row.label}\r\n        >\r\n          {filhos.length > 0 && <span className=\"inline-block w-3.5 text-slate-400\">{aberto ? '▾' : '▸'}</span>}\r\n          {row.label}\r\n          {row.sublabel && <span className=\"ml-1 text-[11px] font-normal text-slate-400\">{row.sublabel}</span>}\r\n          {row.warning && <span className=\"ml-1 text-orange-600\" title={row.warning}>⚠</span>}\r\n        </div>\r\n        {trilho(blocos, marcas, true)}\r\n      </div>\r\n    )\r\n\r\n    if (aberto)\r\n      for (const f of filhos) {\r\n        const b = (f.days ?? []).map((d) => ({ i: toIdx(d, t0), color: f.color ?? ACCENT, tip: renderTooltip?.({ row: f, day: d, kind: 'day', parent: row }) }))\r\n        const m = (f.markers ?? []).map((d) => ({ i: toIdx(d, t0), tip: renderTooltip?.({ row: f, day: d, kind: 'marker', parent: row }) }))\r\n        linhas.push(\r\n          <div key={`${row.id}::${f.id}`} className=\"group flex min-h-[22px] border-b border-slate-200 hover:bg-blue-50/60\">\r\n            <div className=\"sticky left-0 z-[2] shrink-0 truncate border-r border-slate-200 bg-white py-[3px] pl-7 pr-2 text-slate-500 group-hover:bg-blue-50\" style={{ width: labelWidth, color: f.labelColor }} title={f.warning ? `${f.label} — ${f.warning}` : f.label}>\r\n              {f.label}\r\n              {f.sublabel && <span className=\"ml-1 text-[11px] text-slate-400\">{f.sublabel}</span>}\r\n              {f.warning && <span className=\"ml-1 text-orange-600\">⚠</span>}\r\n            </div>\r\n            {trilho(b, m, false)}\r\n          </div>\r\n        )\r\n      }\r\n  }\r\n\r\n  return (\r\n    <div className={className}>\r\n      {legend && legend.length > 0 && (\r\n        <div className=\"mb-2 flex flex-wrap gap-3 text-xs text-slate-500\">\r\n          {legend.map((l) => (\r\n            <span key={l.label} className=\"inline-flex items-center gap-1\">\r\n              <i className=\"inline-block h-2.5 w-2.5 rounded-sm\" style={{ background: l.color, transform: l.kind === 'marker' ? 'rotate(45deg) scale(.85)' : undefined }} />\r\n              {l.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: o cabeçalho fixo cobre a largura toda do conteúdo (não só a parte visível) */}\r\n        <div className=\"w-max min-w-full\">\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] shrink-0 border-r border-slate-200 bg-white px-2 py-2 font-semibold\" style={{ width: labelWidth }}>\r\n            {labelHeader}\r\n          </div>\r\n          <div className=\"relative shrink-0 bg-white\" style={{ width: largura, height: 36 }}>\r\n            {dias.map((d) => (\r\n              <Fragment key={d.i}>\r\n                {(d.i === 0 || d.dia === 1) && (\r\n                  <div className=\"absolute top-0 h-[18px] whitespace-nowrap border-l border-slate-200 pl-1 font-semibold\" style={{ left: d.i * dayWidth }}>\r\n                    {monthNames[d.mes]} {d.ano}\r\n                  </div>\r\n                )}\r\n                {(dayWidth >= 14 || new Date(t0 + d.i * DIA_MS).getUTCDay() === 1) && (\r\n                  <div className=\"absolute top-[18px] h-4 text-[10px] text-slate-400\" style={{ left: d.i * dayWidth, width: dayWidth >= 14 ? dayWidth : dayWidth * 7, textAlign: dayWidth >= 14 ? 'center' : 'left' }}>\r\n                    {d.dia}\r\n                  </div>\r\n                )}\r\n              </Fragment>\r\n            ))}\r\n          </div>\r\n        </div>\r\n        {linhas.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\r\n/**\r\n * Utilitário: ISO de um dia do eixo (para quem precisa de formatar tooltips).\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport const ganttDiaIso = (start: string, offset: number) => new Date(Date.parse(`${start}T00:00:00Z`) + offset * DIA_MS).toISOString().slice(0, 10)\r\n"],"names":["Fragment"],"mappings":"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"}

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

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+function Kanban({
+  colunas,
+  itens,
+  colunaDoItem,
+  chaveDoItem,
+  cartao,
+  onAbrirItem,
+  onMover,
+  onAdicionar,
+  labels
+}) {
+  const [aArrastar, setAArrastar] = useState(null);
+  const [colunaAlvo, setColunaAlvo] = useState(null);
+  const porColuna = /* @__PURE__ */ new Map();
+  for (const item of itens) {
+    const chave = colunaDoItem(item);
+    porColuna.set(chave, [...porColuna.get(chave) ?? [], item]);
+  }
+  return /* @__PURE__ */ jsx("div", { className: "cui-kanban flex gap-4 overflow-x-auto pb-4", children: colunas.map((coluna) => {
+    const cartoes = porColuna.get(coluna.id) ?? [];
+    const realcada = colunaAlvo === coluna.id;
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: `flex w-80 shrink-0 flex-col bg-white shadow-xl shadow-slate-200/50 transition-colors ${realcada ? "ring-2 ring-proef-turquoise" : ""}`,
+        onDragOver: onMover ? (e) => {
+          e.preventDefault();
+          setColunaAlvo(coluna.id);
+        } : void 0,
+        onDragLeave: onMover ? () => setColunaAlvo(null) : void 0,
+        onDrop: onMover ? (e) => {
+          e.preventDefault();
+          setColunaAlvo(null);
+          if (aArrastar) onMover(aArrastar, coluna.id);
+          setAArrastar(null);
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2 border-t-4 border-proef-navy px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+              coluna.cor && /* @__PURE__ */ jsx("span", { className: `h-2.5 w-2.5 shrink-0 rounded-full ${coluna.cor}` }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-black uppercase tracking-tight text-proef-navy", children: coluna.titulo }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 bg-slate-100 px-1.5 text-xs font-bold leading-5 text-slate-500 rounded-full", children: cartoes.length })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2 text-xs text-slate-400", children: [
+              coluna.extra,
+              onAdicionar && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": labels?.adicionar ?? "+",
+                  title: labels?.adicionar,
+                  onClick: () => onAdicionar(coluna.id),
+                  className: "px-1 text-base leading-none text-slate-400 hover:text-proef-navy",
+                  children: "+"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-3", children: [
+            cartoes.map((item) => {
+              const chave = chaveDoItem(item);
+              return /* @__PURE__ */ jsx(
+                "article",
+                {
+                  draggable: !!onMover,
+                  onDragStart: onMover ? () => setAArrastar(chave) : void 0,
+                  onDragEnd: onMover ? () => setAArrastar(null) : void 0,
+                  onClick: onAbrirItem ? () => onAbrirItem(item) : void 0,
+                  className: `border border-slate-200 bg-white p-3 transition-shadow rounded-lg ${onAbrirItem ? "cursor-pointer hover:shadow-md" : ""} ${aArrastar === chave ? "opacity-50" : ""}`,
+                  children: cartao(item)
+                },
+                chave
+              );
+            }),
+            cartoes.length === 0 && /* @__PURE__ */ jsx("p", { className: "py-4 text-center text-xs text-slate-300", children: labels?.semItens ?? "—" })
+          ] })
+        ]
+      },
+      coluna.id
+    );
+  }) });
+}
+export {
+  Kanban as default
+};
+//# sourceMappingURL=Kanban.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.js","sources":["../../../../../../src/legacy/components/organisms/Kanban/Kanban.tsx"],"sourcesContent":["import React, { useState, type ReactNode } from 'react'\r\n\r\n/**\r\n * Quadro em colunas, ao estilo do Planner/Jira.\r\n *\r\n * Não conhece domínio nenhum: recebe as colunas, os itens, a função que diz em\r\n * que coluna cai cada item e o que desenhar dentro do cartão. Foi extraído do\r\n * quadro do portal de Tickets, que estava preso aos tipos daquele projeto.\r\n *\r\n * Arrastar e largar é opcional: sem `onMover`, o quadro é só de leitura — é o\r\n * caso de quem mostra dados de um sistema externo que não pode escrever.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\n\r\nexport interface KanbanColuna {\r\n  id: string\r\n  titulo: string\r\n  /** Classe de cor do ponto do cabeçalho (ex: `bg-emerald-500`). */\r\n  cor?: string\r\n  /** Conteúdo extra no cabeçalho, à direita da contagem (ex: total de horas). */\r\n  extra?: ReactNode\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface KanbanProps<T> {\r\n  colunas: KanbanColuna[]\r\n  itens: T[]\r\n  /** Em que coluna cai o item — devolve o `id` da coluna. */\r\n  colunaDoItem: (item: T) => string\r\n  chaveDoItem: (item: T) => string\r\n  /** Conteúdo do cartão. O invólucro (moldura, arrastar, clique) é do Kanban. */\r\n  cartao: (item: T) => ReactNode\r\n  onAbrirItem?: (item: T) => void\r\n  /**\r\n   * Largar um cartão noutra coluna. Sem isto não há arrastar: um quadro de\r\n   * leitura não deve sugerir que se pode mexer.\r\n   */\r\n  onMover?: (itemId: string, colunaId: string) => void\r\n  /** Botão \"+\" no cabeçalho de cada coluna. */\r\n  onAdicionar?: (colunaId: string) => void\r\n  labels?: {\r\n    semItens?: string\r\n    adicionar?: string\r\n  }\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport default function Kanban<T>({\r\n  colunas,\r\n  itens,\r\n  colunaDoItem,\r\n  chaveDoItem,\r\n  cartao,\r\n  onAbrirItem,\r\n  onMover,\r\n  onAdicionar,\r\n  labels,\r\n}: KanbanProps<T>) {\r\n  const [aArrastar, setAArrastar] = useState<string | null>(null)\r\n  const [colunaAlvo, setColunaAlvo] = useState<string | null>(null)\r\n\r\n  const porColuna = new Map<string, T[]>()\r\n  for (const item of itens) {\r\n    const chave = colunaDoItem(item)\r\n    porColuna.set(chave, [...(porColuna.get(chave) ?? []), item])\r\n  }\r\n\r\n  return (\r\n    <div className=\"cui-kanban flex gap-4 overflow-x-auto pb-4\">\r\n      {colunas.map((coluna) => {\r\n        const cartoes = porColuna.get(coluna.id) ?? []\r\n        const realcada = colunaAlvo === coluna.id\r\n\r\n        return (\r\n          <section\r\n            key={coluna.id}\r\n            className={`flex w-80 shrink-0 flex-col bg-white shadow-xl shadow-slate-200/50 transition-colors ${\r\n              realcada ? 'ring-2 ring-proef-turquoise' : ''\r\n            }`}\r\n            onDragOver={\r\n              onMover\r\n                ? (e) => {\r\n                    e.preventDefault()\r\n                    setColunaAlvo(coluna.id)\r\n                  }\r\n                : undefined\r\n            }\r\n            onDragLeave={onMover ? () => setColunaAlvo(null) : undefined}\r\n            onDrop={\r\n              onMover\r\n                ? (e) => {\r\n                    e.preventDefault()\r\n                    setColunaAlvo(null)\r\n                    if (aArrastar) onMover(aArrastar, coluna.id)\r\n                    setAArrastar(null)\r\n                  }\r\n                : undefined\r\n            }\r\n          >\r\n            <header className=\"flex items-center justify-between gap-2 border-t-4 border-proef-navy px-4 py-3\">\r\n              <span className=\"flex min-w-0 items-center gap-2\">\r\n                {coluna.cor && (\r\n                  <span className={`h-2.5 w-2.5 shrink-0 rounded-full ${coluna.cor}`} />\r\n                )}\r\n                <span className=\"truncate text-sm font-black uppercase tracking-tight text-proef-navy\">\r\n                  {coluna.titulo}\r\n                </span>\r\n                <span className=\"shrink-0 bg-slate-100 px-1.5 text-xs font-bold leading-5 text-slate-500 rounded-full\">\r\n                  {cartoes.length}\r\n                </span>\r\n              </span>\r\n\r\n              <span className=\"flex shrink-0 items-center gap-2 text-xs text-slate-400\">\r\n                {coluna.extra}\r\n                {onAdicionar && (\r\n                  <button\r\n                    type=\"button\"\r\n                    aria-label={labels?.adicionar ?? '+'}\r\n                    title={labels?.adicionar}\r\n                    onClick={() => onAdicionar(coluna.id)}\r\n                    className=\"px-1 text-base leading-none text-slate-400 hover:text-proef-navy\"\r\n                  >\r\n                    +\r\n                  </button>\r\n                )}\r\n              </span>\r\n            </header>\r\n\r\n            <div className=\"flex flex-col gap-2 p-3\">\r\n              {cartoes.map((item) => {\r\n                const chave = chaveDoItem(item)\r\n                return (\r\n                  <article\r\n                    key={chave}\r\n                    draggable={!!onMover}\r\n                    onDragStart={onMover ? () => setAArrastar(chave) : undefined}\r\n                    onDragEnd={onMover ? () => setAArrastar(null) : undefined}\r\n                    onClick={onAbrirItem ? () => onAbrirItem(item) : undefined}\r\n                    className={`border border-slate-200 bg-white p-3 transition-shadow rounded-lg ${\r\n                      onAbrirItem ? 'cursor-pointer hover:shadow-md' : ''\r\n                    } ${aArrastar === chave ? 'opacity-50' : ''}`}\r\n                  >\r\n                    {cartao(item)}\r\n                  </article>\r\n                )\r\n              })}\r\n\r\n              {cartoes.length === 0 && (\r\n                <p className=\"py-4 text-center text-xs text-slate-300\">\r\n                  {labels?.semItens ?? '—'}\r\n                </p>\r\n              )}\r\n            </div>\r\n          </section>\r\n        )\r\n      })}\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;AA+CA,SAAwB,OAAU;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAwB,IAAI;AAEhE,QAAM,gCAAgB,IAAA;AACtB,aAAW,QAAQ,OAAO;AACxB,UAAM,QAAQ,aAAa,IAAI;AAC/B,cAAU,IAAI,OAAO,CAAC,GAAI,UAAU,IAAI,KAAK,KAAK,IAAK,IAAI,CAAC;AAAA,EAC9D;AAEA,6BACG,OAAA,EAAI,WAAU,8CACZ,UAAA,QAAQ,IAAI,CAAC,WAAW;AACvB,UAAM,UAAU,UAAU,IAAI,OAAO,EAAE,KAAK,CAAA;AAC5C,UAAM,WAAW,eAAe,OAAO;AAEvC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,wFACT,WAAW,gCAAgC,EAC7C;AAAA,QACA,YACE,UACI,CAAC,MAAM;AACL,YAAE,eAAA;AACF,wBAAc,OAAO,EAAE;AAAA,QACzB,IACA;AAAA,QAEN,aAAa,UAAU,MAAM,cAAc,IAAI,IAAI;AAAA,QACnD,QACE,UACI,CAAC,MAAM;AACL,YAAE,eAAA;AACF,wBAAc,IAAI;AAClB,cAAI,UAAW,SAAQ,WAAW,OAAO,EAAE;AAC3C,uBAAa,IAAI;AAAA,QACnB,IACA;AAAA,QAGN,UAAA;AAAA,UAAA,qBAAC,UAAA,EAAO,WAAU,kFAChB,UAAA;AAAA,YAAA,qBAAC,QAAA,EAAK,WAAU,mCACb,UAAA;AAAA,cAAA,OAAO,OACN,oBAAC,QAAA,EAAK,WAAW,qCAAqC,OAAO,GAAG,IAAI;AAAA,cAEtE,oBAAC,QAAA,EAAK,WAAU,wEACb,iBAAO,QACV;AAAA,cACA,oBAAC,QAAA,EAAK,WAAU,wFACb,kBAAQ,OAAA,CACX;AAAA,YAAA,GACF;AAAA,YAEA,qBAAC,QAAA,EAAK,WAAU,2DACb,UAAA;AAAA,cAAA,OAAO;AAAA,cACP,eACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,cAAY,QAAQ,aAAa;AAAA,kBACjC,OAAO,QAAQ;AAAA,kBACf,SAAS,MAAM,YAAY,OAAO,EAAE;AAAA,kBACpC,WAAU;AAAA,kBACX,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAED,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UAEA,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,YAAA,QAAQ,IAAI,CAAC,SAAS;AACrB,oBAAM,QAAQ,YAAY,IAAI;AAC9B,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAW,CAAC,CAAC;AAAA,kBACb,aAAa,UAAU,MAAM,aAAa,KAAK,IAAI;AAAA,kBACnD,WAAW,UAAU,MAAM,aAAa,IAAI,IAAI;AAAA,kBAChD,SAAS,cAAc,MAAM,YAAY,IAAI,IAAI;AAAA,kBACjD,WAAW,qEACT,cAAc,mCAAmC,EACnD,IAAI,cAAc,QAAQ,eAAe,EAAE;AAAA,kBAE1C,iBAAO,IAAI;AAAA,gBAAA;AAAA,gBATP;AAAA,cAAA;AAAA,YAYX,CAAC;AAAA,YAEA,QAAQ,WAAW,KAClB,oBAAC,OAAE,WAAU,2CACV,UAAA,QAAQ,YAAY,IAAA,CACvB;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,MA7EK,OAAO;AAAA,IAAA;AAAA,EAgFlB,CAAC,EAAA,CACH;AAEJ;"}

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

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useApi } from "../../../hooks/useApi.js";
+import Spinner from "../../layout/Spinner/Spinner.js";
+const LazyLoader = ({
+  endpoint,
+  params = {},
+  children,
+  scrollableTarget,
+  className = "",
+  height,
+  scrollThreshold = 0.8,
+  limit = 10
+}) => {
+  const [items, setItems] = useState([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [resetKey, setResetKey] = useState(0);
+  const { request, loading, errors } = useApi();
+  const activeSession = useRef(0);
+  const abortControllerRef = useRef(null);
+  useEffect(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    const newSession = resetKey + 1;
+    activeSession.current = newSession;
+    setResetKey(newSession);
+    setItems([]);
+    setPage(1);
+    setHasMore(true);
+  }, [endpoint, JSON.stringify(params)]);
+  const loadMoreItems = async () => {
+    if (!hasMore || loading) return;
+    const currentSession = activeSession.current;
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    try {
+      const response = await request({
+        method: "get",
+        url: endpoint,
+        signal: controller.signal,
+        params: {
+          ...params,
+          page,
+          limit
+        }
+      });
+      if (response && currentSession === activeSession.current) {
+        setItems((prev) => {
+          return [...prev, ...response];
+        });
+        setHasMore(response.length >= limit);
+        setPage((prev) => prev + 1);
+      }
+    } catch (error) {
+      if (error.name === "AbortError") {
+        console.log("Request aborted due to param change");
+      } else {
+        console.error("Load error", error);
+      }
+    }
+  };
+  useEffect(() => {
+    loadMoreItems();
+  }, [resetKey]);
+  return /* @__PURE__ */ jsx(
+    InfiniteScroll,
+    {
+      dataLength: items.length,
+      next: loadMoreItems,
+      hasMore,
+      loader: /* @__PURE__ */ jsx(Spinner, {}),
+      scrollableTarget,
+      className,
+      style: { overflow: "hidden", height: "auto" },
+      height: scrollableTarget ? void 0 : height,
+      scrollThreshold,
+      children: children(items, loading, errors)
+    }
+  );
+};
+export {
+  LazyLoader
+};
+//# sourceMappingURL=LazyLoader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LazyLoader.js","sources":["../../../../../../src/legacy/components/organisms/LazyLoader/LazyLoader.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef, useState } from 'react'\r\nimport InfiniteScroll from 'react-infinite-scroll-component'\r\nimport { useApi } from '../../../hooks/useApi'\r\nimport Spinner from '../../layout/Spinner/Spinner'\r\n\r\ninterface LazyLoaderProps<T> {\r\n  endpoint: string\r\n  params?: Record<string, unknown>\r\n  children: (items: T[], loading: boolean, error: ReactNode | null) => ReactNode\r\n  scrollableTarget?: string\r\n  className?: string\r\n  height?: number | string\r\n  scrollThreshold?: number | string\r\n  limit?: number\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport const LazyLoader = <T extends { id: string | number }>({\r\n  endpoint,\r\n  params = {},\r\n  children,\r\n  scrollableTarget,\r\n  className = '',\r\n  height,\r\n  scrollThreshold = 0.8,\r\n  limit = 10,\r\n}: LazyLoaderProps<T>) => {\r\n  const [items, setItems] = useState<T[]>([])\r\n  const [page, setPage] = useState(1)\r\n  const [hasMore, setHasMore] = useState(true)\r\n  const [resetKey, setResetKey] = useState(0)\r\n\r\n  const { request, loading, errors } = useApi()\r\n  const activeSession = useRef(0)\r\n  const abortControllerRef = useRef<AbortController | null>(null)\r\n\r\n  // Reset state when endpoint or params change\r\n  useEffect(() => {\r\n    // Abort any in-flight request\r\n    if (abortControllerRef.current) {\r\n      abortControllerRef.current.abort()\r\n    }\r\n\r\n    const newSession = resetKey + 1\r\n    activeSession.current = newSession\r\n    setResetKey(newSession)\r\n    setItems([])\r\n    setPage(1)\r\n    setHasMore(true)\r\n  }, [endpoint, JSON.stringify(params)])\r\n\r\n  const loadMoreItems = async () => {\r\n    if (!hasMore || loading) return\r\n\r\n    const currentSession = activeSession.current\r\n    const controller = new AbortController()\r\n    abortControllerRef.current = controller\r\n\r\n    try {\r\n      const response = await request({\r\n        method: 'get',\r\n        url: endpoint,\r\n        signal: controller.signal,\r\n        params: {\r\n          ...params,\r\n          page,\r\n          limit,\r\n        },\r\n      })\r\n\r\n      if (response && currentSession === activeSession.current) {\r\n        setItems((prev) => {\r\n          return [...prev, ...response]\r\n        })\r\n        setHasMore(response.length >= limit)\r\n        setPage((prev) => prev + 1)\r\n      }\r\n    } catch (error: any) {\r\n      if (error.name === 'AbortError') {\r\n        console.log('Request aborted due to param change')\r\n      } else {\r\n        console.error('Load error', error)\r\n      }\r\n    }\r\n  }\r\n\r\n  // Initial load when resetKey changes\r\n  useEffect(() => {\r\n    loadMoreItems()\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [resetKey])\r\n\r\n  return (\r\n    <InfiniteScroll\r\n      dataLength={items.length}\r\n      next={loadMoreItems}\r\n      hasMore={hasMore}\r\n      loader={<Spinner />}\r\n      scrollableTarget={scrollableTarget}\r\n      className={className}\r\n      style={{ overflow: 'hidden', height: 'auto' }}\r\n      height={scrollableTarget ? undefined : height}\r\n      scrollThreshold={scrollThreshold}\r\n    >\r\n      {children(items, loading, errors)}\r\n    </InfiniteScroll>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;;;AAiBO,MAAM,aAAa,CAAoC;AAAA,EAC5D;AAAA,EACA,SAAS,CAAA;AAAA,EACT;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,kBAAkB;AAAA,EAClB,QAAQ;AACV,MAA0B;AACxB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,CAAA,CAAE;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAE1C,QAAM,EAAE,SAAS,SAAS,OAAA,IAAW,OAAA;AACrC,QAAM,gBAAgB,OAAO,CAAC;AAC9B,QAAM,qBAAqB,OAA+B,IAAI;AAG9D,YAAU,MAAM;AAEd,QAAI,mBAAmB,SAAS;AAC9B,yBAAmB,QAAQ,MAAA;AAAA,IAC7B;AAEA,UAAM,aAAa,WAAW;AAC9B,kBAAc,UAAU;AACxB,gBAAY,UAAU;AACtB,aAAS,CAAA,CAAE;AACX,YAAQ,CAAC;AACT,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,KAAK,UAAU,MAAM,CAAC,CAAC;AAErC,QAAM,gBAAgB,YAAY;AAChC,QAAI,CAAC,WAAW,QAAS;AAEzB,UAAM,iBAAiB,cAAc;AACrC,UAAM,aAAa,IAAI,gBAAA;AACvB,uBAAmB,UAAU;AAE7B,QAAI;AACF,YAAM,WAAW,MAAM,QAAQ;AAAA,QAC7B,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ,WAAW;AAAA,QACnB,QAAQ;AAAA,UACN,GAAG;AAAA,UACH;AAAA,UACA;AAAA,QAAA;AAAA,MACF,CACD;AAED,UAAI,YAAY,mBAAmB,cAAc,SAAS;AACxD,iBAAS,CAAC,SAAS;AACjB,iBAAO,CAAC,GAAG,MAAM,GAAG,QAAQ;AAAA,QAC9B,CAAC;AACD,mBAAW,SAAS,UAAU,KAAK;AACnC,gBAAQ,CAAC,SAAS,OAAO,CAAC;AAAA,MAC5B;AAAA,IACF,SAAS,OAAY;AACnB,UAAI,MAAM,SAAS,cAAc;AAC/B,gBAAQ,IAAI,qCAAqC;AAAA,MACnD,OAAO;AACL,gBAAQ,MAAM,cAAc,KAAK;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AAGA,YAAU,MAAM;AACd,kBAAA;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,YAAY,MAAM;AAAA,MAClB,MAAM;AAAA,MACN;AAAA,MACA,4BAAS,SAAA,EAAQ;AAAA,MACjB;AAAA,MACA;AAAA,MACA,OAAO,EAAE,UAAU,UAAU,QAAQ,OAAA;AAAA,MACrC,QAAQ,mBAAmB,SAAY;AAAA,MACvC;AAAA,MAEC,UAAA,SAAS,OAAO,SAAS,MAAM;AAAA,IAAA;AAAA,EAAA;AAGtC;"}