@proef/common-ui 0.0.0-stage → 2.2.1

package/dist/esm/v1/primitives/display/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../../../src/v1/primitives/display/Card/Card.tsx"],"sourcesContent":["import React from 'react'\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Título no topo (ex: \"Por estado\"). */\r\n  title?: React.ReactNode\r\n  /** Ações à direita do título (ex: um botão, um seletor). */\r\n  actions?: React.ReactNode\r\n  /** `none`: sem margem interior, para tabelas ou listas que vão até à borda. */\r\n  padding?: 'md' | 'none'\r\n  /** @deprecated Nome antigo (Legacy) de `actions`. */\r\n  extra?: React.ReactNode\r\n}\r\n\r\n/**\r\n * Cartão: agrupa um bloco de conteúdo (um gráfico, uma lista, um resumo) num\r\n * fundo próprio com cantos redondos, com título opcional.\r\n *\r\n * Os indicadores soltos usam o `Kpi`; as tabelas da biblioteca já trazem o seu\r\n * contorno e não vão dentro de um cartão.\r\n *\r\n * **Aceita os atributos HTML do `<div>`** (ex: `id`, `data-*`, `onClick`).\r\n */\r\nexport default function Card({ title, actions, extra, padding = 'md', className = '', children, ...props }: CardProps) {\r\n  const headerActions = actions ?? extra\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`min-w-0 rounded-xl border border-border bg-card text-foreground dark:border-slate-700 dark:bg-slate-900 ${padding === 'md' ? 'p-4 sm:p-5' : 'overflow-hidden'} ${className}`}\r\n    >\r\n      {(title || headerActions) && (\r\n        <div className={`flex items-start justify-between gap-3 ${padding === 'md' ? 'mb-3.5' : 'px-4 pt-4 pb-3 sm:px-5 sm:pt-5'}`}>\r\n          {title && <div className=\"text-sm font-semibold text-foreground\">{title}</div>}\r\n          {headerActions}\r\n        </div>\r\n      )}\r\n      {children}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport { Card }\r\n"],"names":[],"mappings":";AAsBA,SAAwB,KAAK,EAAE,OAAO,SAAS,OAAO,UAAU,MAAM,YAAY,IAAI,UAAU,GAAG,MAAA,GAAoB;AACrH,QAAM,gBAAgB,WAAW;AACjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,2GAA2G,YAAY,OAAO,eAAe,iBAAiB,IAAI,SAAS;AAAA,MAEpL,UAAA;AAAA,SAAA,SAAS,uCACR,OAAA,EAAI,WAAW,0CAA0C,YAAY,OAAO,WAAW,gCAAgC,IACrH,UAAA;AAAA,UAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,yCAAyC,UAAA,OAAM;AAAA,UACvE;AAAA,QAAA,GACH;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/v1/primitives/display/FilterChips/FilterChips.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const TONES = {
+  filter: "bg-proef-turquoise/15 text-proef-navy dark:text-proef-turquoise",
+  group: "bg-violet-100 text-violet-800 dark:bg-violet-500/20 dark:text-violet-200"
+};
+function FilterChips({ items, onClearAll, clearAllLabel = "Clear all", removeLabel = "Remove", className = "" }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-wrap items-center gap-2 ${className}`, children: [
+    items.map((it) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex items-center gap-1.5 px-2.5 py-1 text-[10px] font-black uppercase tracking-wider ${it.colorClassName ?? TONES[it.tone ?? "filter"]}`,
+        children: [
+          it.icon,
+          /* @__PURE__ */ jsx("span", { children: it.label }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: it.onRemove,
+              "aria-label": typeof it.label === "string" ? `${removeLabel}: ${it.label}` : removeLabel,
+              className: "ml-0.5 cursor-pointer appearance-none border-0 bg-transparent p-0 text-current hover:opacity-70",
+              children: "✕"
+            }
+          )
+        ]
+      },
+      it.key
+    )),
+    onClearAll && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClearAll,
+        className: "cursor-pointer appearance-none border-0 bg-transparent p-0 text-[10px] font-black uppercase tracking-wider text-slate-400 transition-colors hover:text-red-500",
+        children: clearAllLabel
+      }
+    )
+  ] });
+}
+export {
+  FilterChips,
+  FilterChips as default
+};
+//# sourceMappingURL=FilterChips.js.map

package/dist/esm/v1/primitives/display/FilterChips/FilterChips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.js","sources":["../../../../../../src/v1/primitives/display/FilterChips/FilterChips.tsx"],"sourcesContent":["import React from 'react'\r\n\r\nexport interface FilterChipItem {\r\n  /** Identificador único da etiqueta. */\r\n  key: string\r\n  /** Texto (ex: \"Estado: Cancelado\"). */\r\n  label: React.ReactNode\r\n  /** Tira este filtro. */\r\n  onRemove: () => void\r\n  /** Ícone antes do texto (ex: o de agrupar). */\r\n  icon?: React.ReactNode\r\n  /** `filter` (turquesa): um filtro. `group` (violeta): um agrupamento. */\r\n  tone?: 'filter' | 'group'\r\n  /** Cores próprias (classes), em vez das do `tone` — ex: a cor do estado. */\r\n  colorClassName?: string\r\n}\r\n\r\nexport interface FilterChipsProps {\r\n  items: FilterChipItem[]\r\n  /** Tira todos. Sem isto não aparece o \"Limpar tudo\". */\r\n  onClearAll?: () => void\r\n  clearAllLabel?: string\r\n  /** Nome do botão × para leitores de ecrã (recebe o texto da etiqueta, quando é texto). */\r\n  removeLabel?: string\r\n  className?: string\r\n}\r\n\r\nconst TONES = {\r\n  filter: 'bg-proef-turquoise/15 text-proef-navy dark:text-proef-turquoise',\r\n  group: 'bg-violet-100 text-violet-800 dark:bg-violet-500/20 dark:text-violet-200',\r\n}\r\n\r\n/**\r\n * Etiquetas dos filtros ativos, cada uma com × para o tirar, e \"Limpar tudo\".\r\n *\r\n * É o mesmo que a `DataTable` mostra por cima da tabela: usar este sempre que\r\n * um ecrã mostra os filtros escolhidos (ex: ao clicar num gráfico), para se\r\n * reconhecerem como a mesma coisa em todo o lado. Sem itens não desenha nada.\r\n */\r\nexport default function FilterChips({ items, onClearAll, clearAllLabel = 'Clear all', removeLabel = 'Remove', className = '' }: FilterChipsProps) {\r\n  if (items.length === 0) return null\r\n  return (\r\n    <div className={`flex flex-wrap items-center gap-2 ${className}`}>\r\n      {items.map((it) => (\r\n        <div\r\n          key={it.key}\r\n          className={`flex items-center gap-1.5 px-2.5 py-1 text-[10px] font-black uppercase tracking-wider ${it.colorClassName ?? TONES[it.tone ?? 'filter']}`}\r\n        >\r\n          {it.icon}\r\n          <span>{it.label}</span>\r\n          <button\r\n            type=\"button\"\r\n            onClick={it.onRemove}\r\n            aria-label={typeof it.label === 'string' ? `${removeLabel}: ${it.label}` : removeLabel}\r\n            className=\"ml-0.5 cursor-pointer appearance-none border-0 bg-transparent p-0 text-current hover:opacity-70\"\r\n          >\r\n            ✕\r\n          </button>\r\n        </div>\r\n      ))}\r\n      {onClearAll && (\r\n        <button\r\n          type=\"button\"\r\n          onClick={onClearAll}\r\n          className=\"cursor-pointer appearance-none border-0 bg-transparent p-0 text-[10px] font-black uppercase tracking-wider text-slate-400 transition-colors hover:text-red-500\"\r\n        >\r\n          {clearAllLabel}\r\n        </button>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport { FilterChips }\r\n"],"names":[],"mappings":";AA2BA,MAAM,QAAQ;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AACT;AASA,SAAwB,YAAY,EAAE,OAAO,YAAY,gBAAgB,aAAa,cAAc,UAAU,YAAY,MAAwB;AAChJ,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,qBAAC,OAAA,EAAI,WAAW,qCAAqC,SAAS,IAC3D,UAAA;AAAA,IAAA,MAAM,IAAI,CAAC,OACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,yFAAyF,GAAG,kBAAkB,MAAM,GAAG,QAAQ,QAAQ,CAAC;AAAA,QAElJ,UAAA;AAAA,UAAA,GAAG;AAAA,UACJ,oBAAC,QAAA,EAAM,UAAA,GAAG,MAAA,CAAM;AAAA,UAChB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,GAAG;AAAA,cACZ,cAAY,OAAO,GAAG,UAAU,WAAW,GAAG,WAAW,KAAK,GAAG,KAAK,KAAK;AAAA,cAC3E,WAAU;AAAA,cACX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED;AAAA,MAAA;AAAA,MAZK,GAAG;AAAA,IAAA,CAcX;AAAA,IACA,cACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QAET,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

package/dist/esm/v1/primitives/display/Kpi/Kpi.js

@@ -0,0 +1,103 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+const VALUE_TONES = {
+  default: "text-slate-800 dark:text-slate-100",
+  brand: "text-proef-blue dark:text-sky-300",
+  ok: "text-ok",
+  risco: "text-risco",
+  incumprido: "text-incumprido"
+};
+const TINTS = {
+  default: "bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700",
+  brand: "bg-proef-blue/10 border-transparent dark:bg-sky-500/15",
+  ok: "bg-ok-bg border-transparent",
+  risco: "bg-risco-bg border-transparent",
+  incumprido: "bg-incumprido-bg border-transparent"
+};
+function OpenIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 24 24", className, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M7 7h10v10" }) });
+}
+function FunnelIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      viewBox: "0 0 24 24",
+      className,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M3 4h18l-7 8.5V19l-4 2v-8.5L3 4z" })
+    }
+  );
+}
+function Kpi({
+  label,
+  value,
+  tone = "default",
+  detail: detailProp,
+  icon,
+  dot,
+  bar: barProp,
+  footer: footerProp,
+  dense: denseProp,
+  tinted: tintedProp,
+  onClick,
+  clickAction = "filter",
+  active = false,
+  hint,
+  className = "",
+  delta,
+  bgTint,
+  barra,
+  rodape,
+  denso
+}) {
+  const detail = detailProp ?? delta;
+  const footer = footerProp ?? rodape;
+  const dense = denseProp ?? denso ?? false;
+  const tinted = tintedProp ?? bgTint ?? false;
+  const bar = barProp ?? (Array.isArray(barra) ? barra.map((x) => ({ weight: x.peso, color: x.cor })) : barra);
+  const surface = tinted ? TINTS[tone] : TINTS.default;
+  const layout = dense ? "rounded-lg px-2.5 py-1.5 flex flex-col justify-center text-left gap-0.5" : "rounded-xl px-4 py-3 min-h-[88px] flex flex-col items-center justify-center text-center gap-1.5";
+  const base = `relative border ${surface} ${layout} ${className}`;
+  const totalBar = Array.isArray(bar) ? bar.reduce((s, x) => s + x.weight, 0) : 0;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: `${dense ? "text-[10px] uppercase tracking-wide" : "text-xs"} text-slate-500 dark:text-slate-400 flex items-center gap-1.5 max-w-full`, children: [
+      icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 flex", children: icon }) : dot && /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "w-2 h-2 rounded-full inline-block shrink-0", style: { background: dot } }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: dense ? "flex items-baseline gap-1.5" : "", children: [
+      /* @__PURE__ */ jsx("span", { className: `${dense ? "text-xl" : "text-2xl"} font-semibold ${VALUE_TONES[tone]}`, children: value }),
+      detail && dense && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400 truncate", children: detail })
+    ] }),
+    detail && !dense && /* @__PURE__ */ jsx("div", { className: "text-[11.5px] text-slate-400", children: detail }),
+    bar != null && /* @__PURE__ */ jsx("div", { className: "w-full h-1 bg-slate-100 dark:bg-slate-800 rounded overflow-hidden flex", children: Array.isArray(bar) ? bar.map((x, i) => /* @__PURE__ */ jsx("i", { style: { width: totalBar ? `${x.weight / totalBar * 100}%` : 0, background: x.color } }, i)) : /* @__PURE__ */ jsx("i", { style: { width: `${Math.min(100, Math.max(0, bar))}%`, background: "currentColor" }, className: VALUE_TONES[tone] }) }),
+    footer && /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400", children: footer })
+  ] });
+  if (!onClick) {
+    return /* @__PURE__ */ jsx("div", { "data-tip": hint, className: `${base} ${hint ? "cursor-help" : ""}`, children: content });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "data-tip": hint,
+      "aria-pressed": active,
+      className: `${base} w-full cursor-pointer shadow-sm transition hover:-translate-y-0.5 hover:border-proef-blue dark:hover:border-sky-400 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue ${active ? "ring-2 ring-proef-blue border-proef-blue dark:border-sky-400" : ""}`,
+      children: [
+        /* @__PURE__ */ (() => {
+          const cls = `absolute right-2.5 top-2.5 h-3.5 w-3.5 ${active ? "text-proef-blue dark:text-sky-300" : "text-slate-300 dark:text-slate-600"}`;
+          return clickAction === "open" ? /* @__PURE__ */ jsx(OpenIcon, { className: cls }) : /* @__PURE__ */ jsx(FunnelIcon, { className: cls });
+        })(),
+        content
+      ]
+    }
+  );
+}
+export {
+  Kpi
+};
+//# sourceMappingURL=Kpi.js.map

package/dist/esm/v1/primitives/display/Kpi/Kpi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kpi.js","sources":["../../../../../../src/v1/primitives/display/Kpi/Kpi.tsx"],"sourcesContent":["import React from 'react'\r\n\r\n/**\r\n * Estados com significado: `ok` (verde), `risco` (âmbar), `incumprido` (vermelho).\r\n * Sem estado: `default` (texto normal) e `brand` (azul da marca).\r\n * A cor é a do número — não usar cores só para enfeitar: um indicador sem\r\n * significado bom/mau fica em `default`.\r\n */\r\nexport type KpiTone = 'default' | 'brand' | 'ok' | 'risco' | 'incumprido'\r\n\r\nexport interface KpiProps {\r\n  label: React.ReactNode\r\n  value: React.ReactNode\r\n  tone?: KpiTone\r\n  /** Linha por baixo do valor (ex: \"de 120\", \"+12% do compromisso\"). */\r\n  detail?: React.ReactNode\r\n  /** Ícone antes do rótulo (ex: `<Inbox size={14} />`). */\r\n  icon?: React.ReactNode\r\n  /** Ponto colorido antes do rótulo — liga o indicador à cor que ele tem no mapa ou na legenda. */\r\n  dot?: string\r\n  /**\r\n   * Barra por baixo do valor. Um número é uma percentagem; uma lista é uma\r\n   * barra repartida, com cada troço proporcional ao seu peso.\r\n   *\r\n   * Serve para o indicador dizer a PROPORÇÃO e não só o valor: \"253 concluídas\"\r\n   * não diz nada sem saber de quantas.\r\n   */\r\n  bar?: number | { weight: number; color: string }[]\r\n  /** Linha pequena no fim, para um dado que acompanha mas não é o indicador. */\r\n  footer?: React.ReactNode\r\n  /**\r\n   * Faixa fina em vez de cartão: alinha à esquerda e corta a altura para metade.\r\n   * Para muitos indicadores que empurrariam o conteúdo para fora do ecrã.\r\n   */\r\n  dense?: boolean\r\n  /** Fundo no tom claro da cor, em vez de só o número colorido. */\r\n  tinted?: boolean\r\n  /** Clicável (ex: filtra a tabela). Mostra o funil no canto (ou a seta, com `clickAction=\"open\"`). */\r\n  onClick?: () => void\r\n  /** O que o clique faz: `filter` (funil, por omissão) ou `open` (seta: abre uma lista ou um detalhe, não filtra). */\r\n  clickAction?: 'filter' | 'open'\r\n  /** Filtro ativo (Kpi clicável selecionado): contorno azul. */\r\n  active?: boolean\r\n  /** Explicação no tooltip (camada `data-tip`), ex: \"Filtrar a tabela\" ou como o valor é calculado. */\r\n  hint?: string\r\n  className?: string\r\n  /** @deprecated Nome antigo (Legacy) de `detail`. */\r\n  delta?: React.ReactNode\r\n  /** @deprecated Nome antigo (Legacy) de `tinted`. */\r\n  bgTint?: boolean\r\n  /** @deprecated Nome antigo (Legacy) de `bar`. */\r\n  barra?: number | { peso: number; cor: string }[]\r\n  /** @deprecated Nome antigo (Legacy) de `footer`. */\r\n  rodape?: React.ReactNode\r\n  /** @deprecated Nome antigo (Legacy) de `dense`. */\r\n  denso?: boolean\r\n}\r\n\r\nconst VALUE_TONES: Record<KpiTone, string> = {\r\n  default: 'text-slate-800 dark:text-slate-100',\r\n  brand: 'text-proef-blue dark:text-sky-300',\r\n  ok: 'text-ok',\r\n  risco: 'text-risco',\r\n  incumprido: 'text-incumprido',\r\n}\r\n\r\nconst TINTS: Record<KpiTone, string> = {\r\n  default: 'bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700',\r\n  brand: 'bg-proef-blue/10 border-transparent dark:bg-sky-500/15',\r\n  ok: 'bg-ok-bg border-transparent',\r\n  risco: 'bg-risco-bg border-transparent',\r\n  incumprido: 'bg-incumprido-bg border-transparent',\r\n}\r\n\r\nfunction OpenIcon({ className }: { className: string }) {\r\n  return (\r\n    <svg aria-hidden viewBox=\"0 0 24 24\" className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n      <path d=\"M7 17 17 7M7 7h10v10\" />\r\n    </svg>\r\n  )\r\n}\r\n\r\nfunction FunnelIcon({ className }: { className: string }) {\r\n  return (\r\n    <svg\r\n      aria-hidden\r\n      viewBox=\"0 0 24 24\"\r\n      className={className}\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth={2}\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    >\r\n      <path d=\"M3 4h18l-7 8.5V19l-4 2v-8.5L3 4z\" />\r\n    </svg>\r\n  )\r\n}\r\n\r\n/**\r\n * Indicador: um número com o seu rótulo (ex: \"Em progresso 13\"). Quando é\r\n * clicável filtra a vista e mostra-o com o funil; `active` marca o filtro\r\n * aplicado. Dispor vários numa grelha (`grid gap-3`).\r\n */\r\nexport default function Kpi({\r\n  label,\r\n  value,\r\n  tone = 'default',\r\n  detail: detailProp,\r\n  icon,\r\n  dot,\r\n  bar: barProp,\r\n  footer: footerProp,\r\n  dense: denseProp,\r\n  tinted: tintedProp,\r\n  onClick,\r\n  clickAction = 'filter',\r\n  active = false,\r\n  hint,\r\n  className = '',\r\n  delta,\r\n  bgTint,\r\n  barra,\r\n  rodape,\r\n  denso,\r\n}: KpiProps) {\r\n  // A Legacy usa este mesmo Kpi com os nomes antigos.\r\n  const detail = detailProp ?? delta\r\n  const footer = footerProp ?? rodape\r\n  const dense = denseProp ?? denso ?? false\r\n  const tinted = tintedProp ?? bgTint ?? false\r\n  const bar = barProp ?? (Array.isArray(barra) ? barra.map((x) => ({ weight: x.peso, color: x.cor })) : barra)\r\n  const surface = tinted ? TINTS[tone] : TINTS.default\r\n  const layout = dense\r\n    ? 'rounded-lg px-2.5 py-1.5 flex flex-col justify-center text-left gap-0.5'\r\n    : 'rounded-xl px-4 py-3 min-h-[88px] flex flex-col items-center justify-center text-center gap-1.5'\r\n  const base = `relative border ${surface} ${layout} ${className}`\r\n  const totalBar = Array.isArray(bar) ? bar.reduce((s, x) => s + x.weight, 0) : 0\r\n\r\n  const content = (\r\n    <>\r\n      <div className={`${dense ? 'text-[10px] uppercase tracking-wide' : 'text-xs'} text-slate-500 dark:text-slate-400 flex items-center gap-1.5 max-w-full`}>\r\n        {icon ? (\r\n          <span aria-hidden className=\"shrink-0 flex\">{icon}</span>\r\n        ) : (\r\n          dot && <i aria-hidden className=\"w-2 h-2 rounded-full inline-block shrink-0\" style={{ background: dot }} />\r\n        )}\r\n        <span className=\"truncate\">{label}</span>\r\n      </div>\r\n      {/* Em denso o valor e o secundário partilham a linha: é o que poupa altura sem tirar informação. */}\r\n      <div className={dense ? 'flex items-baseline gap-1.5' : ''}>\r\n        <span className={`${dense ? 'text-xl' : 'text-2xl'} font-semibold ${VALUE_TONES[tone]}`}>{value}</span>\r\n        {detail && dense && <span className=\"text-[11px] text-slate-400 truncate\">{detail}</span>}\r\n      </div>\r\n      {detail && !dense && <div className=\"text-[11.5px] text-slate-400\">{detail}</div>}\r\n      {bar != null && (\r\n        <div className=\"w-full h-1 bg-slate-100 dark:bg-slate-800 rounded overflow-hidden flex\">\r\n          {Array.isArray(bar) ? (\r\n            bar.map((x, i) => (\r\n              <i key={i} style={{ width: totalBar ? `${(x.weight / totalBar) * 100}%` : 0, background: x.color }} />\r\n            ))\r\n          ) : (\r\n            <i style={{ width: `${Math.min(100, Math.max(0, bar))}%`, background: 'currentColor' }} className={VALUE_TONES[tone]} />\r\n          )}\r\n        </div>\r\n      )}\r\n      {footer && <div className=\"text-[11px] text-slate-400\">{footer}</div>}\r\n    </>\r\n  )\r\n\r\n  if (!onClick) {\r\n    return (\r\n      <div data-tip={hint} className={`${base} ${hint ? 'cursor-help' : ''}`}>\r\n        {content}\r\n      </div>\r\n    )\r\n  }\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      onClick={onClick}\r\n      data-tip={hint}\r\n      aria-pressed={active}\r\n      className={`${base} w-full cursor-pointer shadow-sm transition hover:-translate-y-0.5 hover:border-proef-blue dark:hover:border-sky-400 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue ${\r\n        active ? 'ring-2 ring-proef-blue border-proef-blue dark:border-sky-400' : ''\r\n      }`}\r\n    >\r\n      {(() => {\r\n        const cls = `absolute right-2.5 top-2.5 h-3.5 w-3.5 ${active ? 'text-proef-blue dark:text-sky-300' : 'text-slate-300 dark:text-slate-600'}`\r\n        return clickAction === 'open' ? <OpenIcon className={cls} /> : <FunnelIcon className={cls} />\r\n      })()}\r\n      {content}\r\n    </button>\r\n  )\r\n}\r\n\r\nexport { Kpi }\r\n"],"names":[],"mappings":"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"}

package/dist/esm/v1/primitives/display/Notice/Notice.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+const TONES = {
+  info: {
+    box: "border-sky-200 bg-sky-50 text-sky-950 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-100",
+    banner: "border-sky-200 bg-sky-50 text-sky-900 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-100",
+    icon: "text-sky-600 dark:text-sky-300"
+  },
+  warning: {
+    box: "border-amber-200 bg-amber-50 text-amber-950 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100",
+    banner: "border-amber-300 bg-amber-100 text-amber-950 dark:border-amber-500/30 dark:bg-amber-500/15 dark:text-amber-100",
+    icon: "text-amber-600 dark:text-amber-300"
+  },
+  error: {
+    box: "border-incumprido/30 bg-incumprido-bg text-incumprido",
+    banner: "border-incumprido/30 bg-incumprido-bg text-incumprido",
+    icon: "text-incumprido"
+  },
+  success: {
+    box: "border-ok/30 bg-ok-bg text-ok",
+    banner: "border-ok/30 bg-ok-bg text-ok",
+    icon: "text-ok"
+  }
+};
+const ICON_PATHS = {
+  info: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01" })
+  ] }),
+  warning: /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3ZM12 9v4M12 17h.01" }),
+  error: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "m15 9-6 6M9 9l6 6" })
+  ] }),
+  success: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })
+  ] })
+};
+function Notice({ tone = "info", title, children, icon, action, variant = "box", className = "" }) {
+  const c = TONES[tone];
+  const shownIcon = icon === null ? null : icon ?? /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 24 24", width: 16, height: 16, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: ICON_PATHS[tone] });
+  const banner = variant === "banner";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: tone === "error" ? "alert" : "status",
+      className: banner ? `flex flex-wrap items-center gap-x-3 gap-y-1 border-b px-4 py-2 text-xs font-bold ${c.banner} ${className}` : `flex items-start gap-3 rounded-xl border px-4 py-3 text-sm ${c.box} ${className}`,
+      children: [
+        shownIcon && /* @__PURE__ */ jsx("span", { className: `shrink-0 ${banner ? "" : `mt-0.5 ${c.icon}`}`, children: shownIcon }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsx("div", { className: banner ? "" : "mb-0.5 font-semibold", children: title }),
+          children && /* @__PURE__ */ jsx("div", { className: banner ? "" : "leading-relaxed opacity-90", children })
+        ] }),
+        action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: action.onClick,
+            className: "shrink-0 cursor-pointer rounded-md border-0 bg-transparent p-0 text-[11px] font-black tracking-widest text-current uppercase underline underline-offset-2 hover:no-underline",
+            children: action.label
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Notice,
+  Notice as default
+};
+//# sourceMappingURL=Notice.js.map

package/dist/esm/v1/primitives/display/Notice/Notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notice.js","sources":["../../../../../../src/v1/primitives/display/Notice/Notice.tsx"],"sourcesContent":["import React from 'react'\r\n\r\nexport type NoticeTone = 'info' | 'warning' | 'error' | 'success'\r\n\r\nexport interface NoticeProps {\r\n  /** `info` (azul), `warning` (âmbar), `error` (vermelho), `success` (verde). */\r\n  tone?: NoticeTone\r\n  /** Título curto em cima (ex: \"Automação — saída de colaborador\"). */\r\n  title?: React.ReactNode\r\n  children?: React.ReactNode\r\n  /** Ícone à esquerda; por omissão, o do tom. `null` sem ícone. */\r\n  icon?: React.ReactNode | null\r\n  /** Ação à direita (ex: \"Voltar ao meu perfil\"). */\r\n  action?: { label: React.ReactNode; onClick: () => void }\r\n  /**\r\n   * `box` (por omissão): caixa no meio do conteúdo, para explicar uma regra ou avisar de algo nesse sítio.\r\n   * `banner`: faixa a toda a largura no topo, para um estado que afeta a página inteira (ex: \"Ver como\").\r\n   */\r\n  variant?: 'box' | 'banner'\r\n  className?: string\r\n}\r\n\r\nconst TONES: Record<NoticeTone, { box: string; banner: string; icon: string }> = {\r\n  info: {\r\n    box: 'border-sky-200 bg-sky-50 text-sky-950 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-100',\r\n    banner: 'border-sky-200 bg-sky-50 text-sky-900 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-100',\r\n    icon: 'text-sky-600 dark:text-sky-300',\r\n  },\r\n  warning: {\r\n    box: 'border-amber-200 bg-amber-50 text-amber-950 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100',\r\n    banner: 'border-amber-300 bg-amber-100 text-amber-950 dark:border-amber-500/30 dark:bg-amber-500/15 dark:text-amber-100',\r\n    icon: 'text-amber-600 dark:text-amber-300',\r\n  },\r\n  error: {\r\n    box: 'border-incumprido/30 bg-incumprido-bg text-incumprido',\r\n    banner: 'border-incumprido/30 bg-incumprido-bg text-incumprido',\r\n    icon: 'text-incumprido',\r\n  },\r\n  success: {\r\n    box: 'border-ok/30 bg-ok-bg text-ok',\r\n    banner: 'border-ok/30 bg-ok-bg text-ok',\r\n    icon: 'text-ok',\r\n  },\r\n}\r\n\r\nconst ICON_PATHS: Record<NoticeTone, React.ReactNode> = {\r\n  info: (\r\n    <>\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n      <path d=\"M12 16v-4M12 8h.01\" />\r\n    </>\r\n  ),\r\n  warning: <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3ZM12 9v4M12 17h.01\" />,\r\n  error: (\r\n    <>\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n      <path d=\"m15 9-6 6M9 9l6 6\" />\r\n    </>\r\n  ),\r\n  success: (\r\n    <>\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n      <path d=\"m9 12 2 2 4-4\" />\r\n    </>\r\n  ),\r\n}\r\n\r\n/**\r\n * Aviso ou explicação: uma caixa com ícone, título e texto (ex: a regra de uma\r\n * automação, dados possivelmente incompletos), ou uma faixa no topo da página.\r\n * Não é para o resultado de uma ação — esse é um toast (`useToast`).\r\n */\r\nexport default function Notice({ tone = 'info', title, children, icon, action, variant = 'box', className = '' }: NoticeProps) {\r\n  const c = TONES[tone]\r\n  const shownIcon =\r\n    icon === null ? null : (icon ?? (\r\n      <svg aria-hidden viewBox=\"0 0 24 24\" width={16} height={16} fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        {ICON_PATHS[tone]}\r\n      </svg>\r\n    ))\r\n  const banner = variant === 'banner'\r\n  return (\r\n    <div\r\n      role={tone === 'error' ? 'alert' : 'status'}\r\n      className={\r\n        banner\r\n          ? `flex flex-wrap items-center gap-x-3 gap-y-1 border-b px-4 py-2 text-xs font-bold ${c.banner} ${className}`\r\n          : `flex items-start gap-3 rounded-xl border px-4 py-3 text-sm ${c.box} ${className}`\r\n      }\r\n    >\r\n      {shownIcon && <span className={`shrink-0 ${banner ? '' : `mt-0.5 ${c.icon}`}`}>{shownIcon}</span>}\r\n      <div className=\"min-w-0 flex-1\">\r\n        {title && <div className={banner ? '' : 'mb-0.5 font-semibold'}>{title}</div>}\r\n        {children && <div className={banner ? '' : 'leading-relaxed opacity-90'}>{children}</div>}\r\n      </div>\r\n      {action && (\r\n        <button\r\n          type=\"button\"\r\n          onClick={action.onClick}\r\n          className=\"shrink-0 cursor-pointer rounded-md border-0 bg-transparent p-0 text-[11px] font-black tracking-widest text-current uppercase underline underline-offset-2 hover:no-underline\"\r\n        >\r\n          {action.label}\r\n        </button>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport { Notice }\r\n"],"names":[],"mappings":";AAsBA,MAAM,QAA2E;AAAA,EAC/E,MAAM;AAAA,IACJ,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAAA,EAER,SAAS;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAAA,EAER,OAAO;AAAA,IACL,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAAA,EAER,SAAS;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAEV;AAEA,MAAM,aAAkD;AAAA,EACtD,MACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,IAC/B,oBAAC,QAAA,EAAK,GAAE,qBAAA,CAAqB;AAAA,EAAA,GAC/B;AAAA,EAEF,SAAS,oBAAC,QAAA,EAAK,GAAE,6FAAA,CAA6F;AAAA,EAC9G,OACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,IAC/B,oBAAC,QAAA,EAAK,GAAE,oBAAA,CAAoB;AAAA,EAAA,GAC9B;AAAA,EAEF,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,IAC/B,oBAAC,QAAA,EAAK,GAAE,gBAAA,CAAgB;AAAA,EAAA,EAAA,CAC1B;AAEJ;AAOA,SAAwB,OAAO,EAAE,OAAO,QAAQ,OAAO,UAAU,MAAM,QAAQ,UAAU,OAAO,YAAY,GAAA,GAAmB;AAC7H,QAAM,IAAI,MAAM,IAAI;AACpB,QAAM,YACJ,SAAS,OAAO,OAAQ,QACtB,oBAAC,OAAA,EAAI,eAAW,MAAC,SAAQ,aAAY,OAAO,IAAI,QAAQ,IAAI,MAAK,QAAO,QAAO,gBAAe,aAAa,GAAG,eAAc,SAAQ,gBAAe,SAChJ,UAAA,WAAW,IAAI,EAAA,CAClB;AAEJ,QAAM,SAAS,YAAY;AAC3B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,SAAS,UAAU,UAAU;AAAA,MACnC,WACE,SACI,oFAAoF,EAAE,MAAM,IAAI,SAAS,KACzG,8DAA8D,EAAE,GAAG,IAAI,SAAS;AAAA,MAGrF,UAAA;AAAA,QAAA,aAAa,oBAAC,QAAA,EAAK,WAAW,YAAY,SAAS,KAAK,UAAU,EAAE,IAAI,EAAE,IAAK,UAAA,WAAU;AAAA,QAC1F,qBAAC,OAAA,EAAI,WAAU,kBACZ,UAAA;AAAA,UAAA,6BAAU,OAAA,EAAI,WAAW,SAAS,KAAK,wBAAyB,UAAA,OAAM;AAAA,UACtE,YAAY,oBAAC,OAAA,EAAI,WAAW,SAAS,KAAK,8BAA+B,SAAA,CAAS;AAAA,QAAA,GACrF;AAAA,QACC,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,OAAO;AAAA,YAChB,WAAU;AAAA,YAET,UAAA,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACV;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/v1/primitives/display/Person/Person.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "../Avatar/Avatar.js";
+function Person({ hideName = false, empty = "—", className = "", ...avatar }) {
+  const label = (avatar.name ?? "").trim() || avatar.email || "";
+  if (!label) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: empty });
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex min-w-0 items-center gap-2 ${className}`, "data-tip": hideName ? label : void 0, children: [
+    /* @__PURE__ */ jsx(Avatar, { ...avatar, name: label }),
+    !hideName && /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+  ] });
+}
+export {
+  Person
+};
+//# sourceMappingURL=Person.js.map

package/dist/esm/v1/primitives/display/Person/Person.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Person.js","sources":["../../../../../../src/v1/primitives/display/Person/Person.tsx"],"sourcesContent":["import React from 'react'\r\nimport Avatar, { type AvatarProps } from '../Avatar/Avatar'\r\n\r\nexport interface PersonProps extends AvatarProps {\r\n  /** Só o avatar (o nome fica no cartão e no tooltip), ex: em colunas estreitas. */\r\n  hideName?: boolean\r\n  /** O que mostrar sem nome nem email. */\r\n  empty?: React.ReactNode\r\n}\r\n\r\n/**\r\n * Uma pessoa, igual em todo o lado: o avatar (fotografia ou iniciais, com o cartão\r\n * de detalhes ao passar o rato) e o nome ao lado, numa linha. Usar sempre que se\r\n * mostra o nome de alguém (ex: solicitante, responsável, quem aprovou).\r\n */\r\nexport default function Person({ hideName = false, empty = '—', className = '', ...avatar }: PersonProps) {\r\n  const label = (avatar.name ?? '').trim() || avatar.email || ''\r\n  if (!label) return <span className=\"text-muted-foreground\">{empty}</span>\r\n  return (\r\n    <span className={`inline-flex min-w-0 items-center gap-2 ${className}`} data-tip={hideName ? label : undefined}>\r\n      <Avatar {...avatar} name={label} />\r\n      {!hideName && <span className=\"truncate\">{label}</span>}\r\n    </span>\r\n  )\r\n}\r\n\r\nexport { Person }\r\n"],"names":[],"mappings":";;AAeA,SAAwB,OAAO,EAAE,WAAW,OAAO,QAAQ,KAAK,YAAY,IAAI,GAAG,UAAuB;AACxG,QAAM,SAAS,OAAO,QAAQ,IAAI,KAAA,KAAU,OAAO,SAAS;AAC5D,MAAI,CAAC,MAAO,4BAAQ,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAM;AAClE,SACE,qBAAC,UAAK,WAAW,0CAA0C,SAAS,IAAI,YAAU,WAAW,QAAQ,QACnG,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAQ,GAAG,QAAQ,MAAM,MAAA,CAAO;AAAA,IAChC,CAAC,YAAY,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,EAAA,GAClD;AAEJ;"}

package/dist/esm/v1/primitives/display/RichText/RichText.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { sanitizeRichText, richTextContentClasses } from "./utils.js";
+function RichText({ value, className = "", ...props }) {
+  const html = useMemo(() => sanitizeRichText(value), [value]);
+  return /* @__PURE__ */ jsx("div", { className: `${richTextContentClasses} ${className}`, dangerouslySetInnerHTML: { __html: html }, ...props });
+}
+export {
+  RichText,
+  RichText as default
+};
+//# sourceMappingURL=RichText.js.map

package/dist/esm/v1/primitives/display/RichText/RichText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichText.js","sources":["../../../../../../src/v1/primitives/display/RichText/RichText.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\r\nimport { richTextContentClasses, sanitizeRichText } from './utils'\r\n\r\nexport interface RichTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> {\r\n  /** O texto: HTML do RichTextEditor ou texto simples (antigo, sem formatação). */\r\n  value: string | null | undefined\r\n}\r\n\r\n/**\r\n * Mostra um texto com formatação (negrito, listas, citações, ligações, imagens) escrito no\r\n * [RichTextEditor](?path=/docs/v1-primitives-forms-richtexteditor--docs).\r\n *\r\n * O HTML é sempre limpo antes de entrar na página: só ficam as marcas de formatação (sem\r\n * scripts, estilos nem eventos) e as ligações abrem noutro separador. Texto sem marcas\r\n * (guardado antes do editor) aparece com as mudanças de linha.\r\n *\r\n * Não tem cor própria: herda a de quem o põe (ex: branco numa bolha navy de uma conversa).\r\n */\r\nexport function RichText({ value, className = '', ...props }: RichTextProps) {\r\n  const html = useMemo(() => sanitizeRichText(value), [value])\r\n  return <div className={`${richTextContentClasses} ${className}`} dangerouslySetInnerHTML={{ __html: html }} {...props} />\r\n}\r\n\r\nexport default RichText\r\n"],"names":[],"mappings":";;;AAkBO,SAAS,SAAS,EAAE,OAAO,YAAY,IAAI,GAAG,SAAwB;AAC3E,QAAM,OAAO,QAAQ,MAAM,iBAAiB,KAAK,GAAG,CAAC,KAAK,CAAC;AAC3D,SAAO,oBAAC,OAAA,EAAI,WAAW,GAAG,sBAAsB,IAAI,SAAS,IAAI,yBAAyB,EAAE,QAAQ,KAAA,GAAS,GAAG,OAAO;AACzH;"}

package/dist/esm/v1/primitives/display/RichText/utils.js

@@ -0,0 +1,56 @@
+import DOMPurify from "dompurify";
+const richTextContentClasses = "break-words [&_p]:my-0 [&_p+p]:mt-1.5 [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_li>p]:my-0 [&_blockquote]:my-1.5 [&_blockquote]:border-l-2 [&_blockquote]:border-current/30 [&_blockquote]:pl-3 [&_blockquote]:opacity-80 [&_a]:underline [&_a]:underline-offset-2 [&_u]:underline [&_s]:line-through [&_code]:rounded [&_code]:bg-current/10 [&_code]:px-1 [&_code]:text-[0.92em] [&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg";
+const ALLOWED_TAGS = ["p", "br", "strong", "b", "em", "i", "u", "s", "strike", "del", "ul", "ol", "li", "blockquote", "a", "img", "h1", "h2", "h3", "code", "pre", "hr"];
+const ALLOWED_ATTR = ["href", "src", "alt", "title", "target", "rel", "start"];
+let purifier = null;
+function getPurifier() {
+  if (purifier) return purifier;
+  purifier = DOMPurify(window);
+  purifier.addHook("afterSanitizeAttributes", (node) => {
+    if (node.tagName === "A" && node.getAttribute("href")) {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+  });
+  return purifier;
+}
+function isRichText(value) {
+  return !!value && /<\/?[a-z][\s\S]*?>/i.test(value);
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function textToRichText(text) {
+  if (!text) return "";
+  return text.split(/\r?\n/).map((line) => `<p>${escapeHtml(line)}</p>`).join("");
+}
+function sanitizeRichText(value) {
+  if (!value) return "";
+  const html = isRichText(value) ? value : textToRichText(value);
+  return getPurifier().sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR });
+}
+function richTextToPlain(value) {
+  if (!value) return "";
+  if (!isRichText(value)) return value;
+  const doc = new DOMParser().parseFromString(sanitizeRichText(value), "text/html");
+  doc.querySelectorAll("br").forEach((br) => br.replaceWith("\n"));
+  doc.querySelectorAll("p, li, blockquote, h1, h2, h3, pre").forEach((el) => {
+    if (el.tagName !== "P" && el.querySelector(":scope > p")) return;
+    el.append("\n");
+  });
+  return (doc.body.textContent ?? "").replace(/\n{3,}/g, "\n\n").trim();
+}
+function richTextIsEmpty(value) {
+  if (!value) return true;
+  if (!isRichText(value)) return !value.trim();
+  return !richTextToPlain(value) && !/<img\b/i.test(value);
+}
+export {
+  isRichText,
+  richTextContentClasses,
+  richTextIsEmpty,
+  richTextToPlain,
+  sanitizeRichText,
+  textToRichText
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/v1/primitives/display/RichText/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/v1/primitives/display/RichText/utils.ts"],"sourcesContent":["import DOMPurify, { type DOMPurify as Purifier } from 'dompurify'\r\n\r\n/**\r\n * Texto com formatação (HTML do [RichTextEditor](?path=/docs/v1-primitives-forms-richtexteditor--docs)):\r\n * as classes do conteúdo e as funções para o guardar, ler e mostrar em segurança.\r\n */\r\n\r\n/**\r\n * Aspeto do conteúdo (listas, citações, ligações, imagens). Sem cor de texto: herda a de quem o põe\r\n * (ex: branco numa bolha navy de conversa).\r\n */\r\nexport const richTextContentClasses =\r\n  'break-words [&_p]:my-0 [&_p+p]:mt-1.5 ' +\r\n  '[&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_li>p]:my-0 ' +\r\n  '[&_blockquote]:my-1.5 [&_blockquote]:border-l-2 [&_blockquote]:border-current/30 [&_blockquote]:pl-3 [&_blockquote]:opacity-80 ' +\r\n  '[&_a]:underline [&_a]:underline-offset-2 [&_u]:underline [&_s]:line-through ' +\r\n  '[&_code]:rounded [&_code]:bg-current/10 [&_code]:px-1 [&_code]:text-[0.92em] ' +\r\n  '[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg'\r\n\r\n// Só o que o editor produz. Tudo o resto (script, style, iframe, on*, javascript:…) sai.\r\nconst ALLOWED_TAGS = ['p', 'br', 'strong', 'b', 'em', 'i', 'u', 's', 'strike', 'del', 'ul', 'ol', 'li', 'blockquote', 'a', 'img', 'h1', 'h2', 'h3', 'code', 'pre', 'hr']\r\nconst ALLOWED_ATTR = ['href', 'src', 'alt', 'title', 'target', 'rel', 'start']\r\n\r\nlet purifier: Purifier | null = null\r\n\r\n/** Instância própria do DOMPurify: o hook das ligações não mexe no DOMPurify global da app. */\r\nfunction getPurifier(): Purifier {\r\n  if (purifier) return purifier\r\n  purifier = DOMPurify(window)\r\n  purifier.addHook('afterSanitizeAttributes', (node) => {\r\n    // Ligações abrem noutro separador e sem acesso a esta janela.\r\n    if (node.tagName === 'A' && node.getAttribute('href')) {\r\n      node.setAttribute('target', '_blank')\r\n      node.setAttribute('rel', 'noopener noreferrer')\r\n    }\r\n  })\r\n  return purifier\r\n}\r\n\r\n/** Parece HTML (tem pelo menos uma marca)? Textos antigos, guardados sem formatação, não. */\r\nexport function isRichText(value: string | null | undefined): boolean {\r\n  return !!value && /<\\/?[a-z][\\s\\S]*?>/i.test(value)\r\n}\r\n\r\nfunction escapeHtml(text: string): string {\r\n  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;')\r\n}\r\n\r\n/** Texto simples → HTML: um parágrafo por linha (as linhas em branco ficam). */\r\nexport function textToRichText(text: string): string {\r\n  if (!text) return ''\r\n  return text\r\n    .split(/\\r?\\n/)\r\n    .map((line) => `<p>${escapeHtml(line)}</p>`)\r\n    .join('')\r\n}\r\n\r\n/**\r\n * HTML seguro para pôr na página: só as marcas de formatação, sem scripts nem atributos de eventos.\r\n * Texto sem marcas é convertido (uma linha, um parágrafo). Usar sempre antes de `dangerouslySetInnerHTML`.\r\n */\r\nexport function sanitizeRichText(value: string | null | undefined): string {\r\n  if (!value) return ''\r\n  const html = isRichText(value) ? value : textToRichText(value)\r\n  return getPurifier().sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR })\r\n}\r\n\r\n/** Só o texto (ex: pré-visualização numa lista, notificação, pesquisa). Parágrafos e itens viram linhas. */\r\nexport function richTextToPlain(value: string | null | undefined): string {\r\n  if (!value) return ''\r\n  if (!isRichText(value)) return value\r\n  const doc = new DOMParser().parseFromString(sanitizeRichText(value), 'text/html')\r\n  doc.querySelectorAll('br').forEach((br) => br.replaceWith('\\n'))\r\n  // Um item ou citação com parágrafos lá dentro já muda de linha pelo parágrafo.\r\n  doc.querySelectorAll('p, li, blockquote, h1, h2, h3, pre').forEach((el) => {\r\n    if (el.tagName !== 'P' && el.querySelector(':scope > p')) return\r\n    el.append('\\n')\r\n  })\r\n  return (doc.body.textContent ?? '').replace(/\\n{3,}/g, '\\n\\n').trim()\r\n}\r\n\r\n/** Sem texto nem imagens (ex: `<p></p>` de um editor vazio)? Para validar \"obrigatório\". */\r\nexport function richTextIsEmpty(value: string | null | undefined): boolean {\r\n  if (!value) return true\r\n  if (!isRichText(value)) return !value.trim()\r\n  return !richTextToPlain(value) && !/<img\\b/i.test(value)\r\n}\r\n"],"names":[],"mappings":";AAWO,MAAM,yBACX;AAQF,MAAM,eAAe,CAAC,KAAK,MAAM,UAAU,KAAK,MAAM,KAAK,KAAK,KAAK,UAAU,OAAO,MAAM,MAAM,MAAM,cAAc,KAAK,OAAO,MAAM,MAAM,MAAM,QAAQ,OAAO,IAAI;AACvK,MAAM,eAAe,CAAC,QAAQ,OAAO,OAAO,SAAS,UAAU,OAAO,OAAO;AAE7E,IAAI,WAA4B;AAGhC,SAAS,cAAwB;AAC/B,MAAI,SAAU,QAAO;AACrB,aAAW,UAAU,MAAM;AAC3B,WAAS,QAAQ,2BAA2B,CAAC,SAAS;AAEpD,QAAI,KAAK,YAAY,OAAO,KAAK,aAAa,MAAM,GAAG;AACrD,WAAK,aAAa,UAAU,QAAQ;AACpC,WAAK,aAAa,OAAO,qBAAqB;AAAA,IAChD;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAGO,SAAS,WAAW,OAA2C;AACpE,SAAO,CAAC,CAAC,SAAS,sBAAsB,KAAK,KAAK;AACpD;AAEA,SAAS,WAAW,MAAsB;AACxC,SAAO,KAAK,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,MAAM,EAAE,QAAQ,MAAM,MAAM,EAAE,QAAQ,MAAM,QAAQ;AACvG;AAGO,SAAS,eAAe,MAAsB;AACnD,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,KACJ,MAAM,OAAO,EACb,IAAI,CAAC,SAAS,MAAM,WAAW,IAAI,CAAC,MAAM,EAC1C,KAAK,EAAE;AACZ;AAMO,SAAS,iBAAiB,OAA0C;AACzE,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,OAAO,WAAW,KAAK,IAAI,QAAQ,eAAe,KAAK;AAC7D,SAAO,cAAc,SAAS,MAAM,EAAE,cAAc,cAAc;AACpE;AAGO,SAAS,gBAAgB,OAA0C;AACxE,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,CAAC,WAAW,KAAK,EAAG,QAAO;AAC/B,QAAM,MAAM,IAAI,UAAA,EAAY,gBAAgB,iBAAiB,KAAK,GAAG,WAAW;AAChF,MAAI,iBAAiB,IAAI,EAAE,QAAQ,CAAC,OAAO,GAAG,YAAY,IAAI,CAAC;AAE/D,MAAI,iBAAiB,oCAAoC,EAAE,QAAQ,CAAC,OAAO;AACzE,QAAI,GAAG,YAAY,OAAO,GAAG,cAAc,YAAY,EAAG;AAC1D,OAAG,OAAO,IAAI;AAAA,EAChB,CAAC;AACD,UAAQ,IAAI,KAAK,eAAe,IAAI,QAAQ,WAAW,MAAM,EAAE,KAAA;AACjE;AAGO,SAAS,gBAAgB,OAA2C;AACzE,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,CAAC,WAAW,KAAK,EAAG,QAAO,CAAC,MAAM,KAAA;AACtC,SAAO,CAAC,gBAAgB,KAAK,KAAK,CAAC,UAAU,KAAK,KAAK;AACzD;"}

package/dist/esm/v1/primitives/documents/PdfPreview/PdfPreview.js

@@ -0,0 +1,137 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { loadPdfjs } from "./pdfjs.js";
+const DEFAULT_ASPECT = 0.707;
+async function renderPage(pdf, pageNum, maxSide = 1200) {
+  const page = await pdf.getPage(pageNum);
+  const base = page.getViewport({ scale: 1 });
+  const scale = Math.min(3, Math.max(1, maxSide / Math.max(base.width, base.height)));
+  const viewport = page.getViewport({ scale });
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.ceil(viewport.width);
+  canvas.height = Math.ceil(viewport.height);
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = "#fff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  await page.render({ canvasContext: ctx, viewport }).promise;
+  return canvas.toDataURL("image/jpeg", 0.85);
+}
+function PdfPreview({ file, label, initialFirstPage, className = "" }) {
+  const [pdf, setPdf] = useState(null);
+  const [numPages, setNumPages] = useState(0);
+  const [aspect, setAspect] = useState(null);
+  const [imgByPage, setImgByPage] = useState(initialFirstPage ? { 1: initialFirstPage } : {});
+  const [failed, setFailed] = useState(false);
+  const scrollRef = useRef(null);
+  const slotRefs = useRef([]);
+  const requested = useRef(new Set(initialFirstPage ? [1] : []));
+  useEffect(() => {
+    let alive = true;
+    let opened = null;
+    let idleId = 0;
+    setPdf(null);
+    setNumPages(0);
+    setAspect(null);
+    setFailed(false);
+    setImgByPage({});
+    requested.current = /* @__PURE__ */ new Set();
+    slotRefs.current = [];
+    const open = async () => {
+      try {
+        const { getDocument } = await loadPdfjs();
+        const data = new Uint8Array(await file.arrayBuffer());
+        const doc = await getDocument({ data }).promise;
+        if (!alive) {
+          doc.destroy();
+          return;
+        }
+        opened = doc;
+        setPdf(doc);
+        setNumPages(doc.numPages);
+        const { width, height } = (await doc.getPage(1)).getViewport({ scale: 1 });
+        if (alive && height > 0) setAspect(width / height);
+      } catch {
+        if (alive) setFailed(true);
+      }
+    };
+    const timer = window.setTimeout(() => {
+      if (typeof requestIdleCallback === "function") idleId = requestIdleCallback(open, { timeout: 1200 });
+      else open();
+    }, 500);
+    return () => {
+      alive = false;
+      opened?.destroy();
+      window.clearTimeout(timer);
+      if (idleId && typeof cancelIdleCallback === "function") cancelIdleCallback(idleId);
+    };
+  }, [file]);
+  useEffect(() => {
+    if (!initialFirstPage) return;
+    requested.current.add(1);
+    setImgByPage((cur) => cur[1] ? cur : { ...cur, 1: initialFirstPage });
+  }, [initialFirstPage]);
+  const requestPage = useCallback(
+    (p) => {
+      if (!pdf || requested.current.has(p)) return;
+      requested.current.add(p);
+      renderPage(pdf, p).then((url) => setImgByPage((cur) => ({ ...cur, [p]: url }))).catch(() => {
+        requested.current.delete(p);
+      });
+    },
+    [pdf]
+  );
+  useEffect(() => {
+    if (!pdf || !numPages) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (!e.isIntersecting) continue;
+          requestPage(Number(e.target.dataset.page));
+          io.unobserve(e.target);
+        }
+      },
+      { root: scrollRef.current, rootMargin: "400px 0px" }
+    );
+    slotRefs.current.forEach((el) => el && io.observe(el));
+    return () => io.disconnect();
+  }, [pdf, numPages, requestPage]);
+  const count = numPages || 1;
+  const slotAspect = aspect ?? DEFAULT_ASPECT;
+  if (failed) {
+    return /* @__PURE__ */ jsxs("div", { className: `flex h-full w-full flex-col items-center justify-center gap-2.5 bg-card text-muted-foreground ${className}`, children: [
+      /* @__PURE__ */ jsxs("svg", { width: "44", height: "44", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z", strokeLinecap: "round", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 2v5h5", strokeLinecap: "round", strokeLinejoin: "round" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs", children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scrollRef,
+      className: `flex h-full min-h-0 w-full flex-col items-center gap-3.5 overflow-x-hidden overflow-y-auto bg-card px-4 pt-3.5 pb-[18px] [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-scrollbar [&::-webkit-scrollbar-thumb]:bg-clip-padding [&::-webkit-scrollbar-thumb:hover]:bg-scrollbar-hover ${className}`,
+      children: Array.from({ length: count }, (_, i) => {
+        const p = i + 1;
+        const url = imgByPage[p];
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              slotRefs.current[i] = el;
+            },
+            "data-page": p,
+            style: { aspectRatio: String(slotAspect) },
+            className: "flex w-full flex-none items-center justify-center overflow-hidden rounded border border-border bg-white shadow-page",
+            children: url ? /* @__PURE__ */ jsx("img", { src: url, alt: `${label} — ${p}/${count}`, className: "block h-full w-full object-contain" }) : /* @__PURE__ */ jsx("span", { role: "status", "aria-label": label, className: "inline-block h-[22px] w-[22px] animate-spin rounded-full border-[2.5px] border-primary/20 border-t-primary" })
+          },
+          p
+        );
+      })
+    }
+  );
+}
+export {
+  PdfPreview as default
+};
+//# sourceMappingURL=PdfPreview.js.map

package/dist/esm/v1/primitives/documents/PdfPreview/PdfPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdfPreview.js","sources":["../../../../../../src/v1/primitives/documents/PdfPreview/PdfPreview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react'\nimport type { PDFDocumentProxy } from 'pdfjs-dist'\nimport { loadPdfjs } from './pdfjs'\n\nexport interface PdfPreviewProps {\n  file: File\n  /** Texto alternativo das páginas e mensagem quando o PDF não abre. */\n  label: string\n  /** Imagem da 1.ª página já renderizada pela app, para aparecer de imediato. */\n  initialFirstPage?: string\n  className?: string\n}\n\n// Proporção A4 vertical, usada até se saber o tamanho real da página.\nconst DEFAULT_ASPECT = 0.707\n\nasync function renderPage(pdf: PDFDocumentProxy, pageNum: number, maxSide = 1200): Promise<string> {\n  const page = await pdf.getPage(pageNum)\n  const base = page.getViewport({ scale: 1 })\n  const scale = Math.min(3, Math.max(1, maxSide / Math.max(base.width, base.height)))\n  const viewport = page.getViewport({ scale })\n  const canvas = document.createElement('canvas')\n  canvas.width = Math.ceil(viewport.width)\n  canvas.height = Math.ceil(viewport.height)\n  const ctx = canvas.getContext('2d')!\n  ctx.fillStyle = '#fff'\n  ctx.fillRect(0, 0, canvas.width, canvas.height)\n  await page.render({ canvasContext: ctx, viewport }).promise\n  return canvas.toDataURL('image/jpeg', 0.85)\n}\n\n/**\n * Pré-visualização de PDF com pdf.js: as páginas em coluna, com scroll vertical\n * e sem a barra de ferramentas do visualizador nativo (que transborda em caixas\n * estreitas). Cada página só é renderizada quando se aproxima da área visível.\n *\n * **Usado por:** [DocumentDropzone](?path=/docs/v1-components-documents-documentdropzone--docs) (quando o ficheiro é um PDF).\n */\nexport default function PdfPreview({ file, label, initialFirstPage, className = '' }: PdfPreviewProps) {\n  const [pdf, setPdf] = useState<PDFDocumentProxy | null>(null)\n  const [numPages, setNumPages] = useState(0)\n  const [aspect, setAspect] = useState<number | null>(null)\n  const [imgByPage, setImgByPage] = useState<Record<number, string>>(initialFirstPage ? { 1: initialFirstPage } : {})\n  const [failed, setFailed] = useState(false)\n\n  const scrollRef = useRef<HTMLDivElement>(null)\n  const slotRefs = useRef<(HTMLDivElement | null)[]>([])\n  const requested = useRef<Set<number>>(new Set(initialFirstPage ? [1] : []))\n\n  useEffect(() => {\n    let alive = true\n    let opened: PDFDocumentProxy | null = null\n    let idleId = 0\n    setPdf(null)\n    setNumPages(0)\n    setAspect(null)\n    setFailed(false)\n    // Não semear a página 1 com initialFirstPage aqui: ao mudar de ficheiro, a\n    // prop ainda traz a imagem do anterior. O efeito seguinte adota-a quando chegar.\n    setImgByPage({})\n    requested.current = new Set()\n    slotRefs.current = []\n\n    const open = async () => {\n      try {\n        const { getDocument } = await loadPdfjs()\n        const data = new Uint8Array(await file.arrayBuffer())\n        const doc = await getDocument({ data }).promise\n        if (!alive) {\n          doc.destroy()\n          return\n        }\n        opened = doc\n        setPdf(doc)\n        setNumPages(doc.numPages)\n        const { width, height } = (await doc.getPage(1)).getViewport({ scale: 1 })\n        if (alive && height > 0) setAspect(width / height)\n      } catch {\n        if (alive) setFailed(true)\n      }\n    }\n\n    // O parse corre na thread principal: espera que a animação de entrada acabe\n    // e que a página fique livre, com um limite para nunca ficar parado.\n    const timer = window.setTimeout(() => {\n      if (typeof requestIdleCallback === 'function') idleId = requestIdleCallback(open, { timeout: 1200 })\n      else open()\n    }, 500)\n\n    return () => {\n      alive = false\n      opened?.destroy()\n      window.clearTimeout(timer)\n      if (idleId && typeof cancelIdleCallback === 'function') cancelIdleCallback(idleId)\n    }\n  }, [file])\n\n  useEffect(() => {\n    if (!initialFirstPage) return\n    requested.current.add(1)\n    setImgByPage((cur) => (cur[1] ? cur : { ...cur, 1: initialFirstPage }))\n  }, [initialFirstPage])\n\n  const requestPage = useCallback(\n    (p: number) => {\n      if (!pdf || requested.current.has(p)) return\n      requested.current.add(p)\n      renderPage(pdf, p)\n        .then((url) => setImgByPage((cur) => ({ ...cur, [p]: url })))\n        .catch(() => {\n          requested.current.delete(p)\n        })\n    },\n    [pdf],\n  )\n\n  useEffect(() => {\n    if (!pdf || !numPages) return\n    const io = new IntersectionObserver(\n      (entries) => {\n        for (const e of entries) {\n          if (!e.isIntersecting) continue\n          requestPage(Number((e.target as HTMLElement).dataset.page))\n          io.unobserve(e.target)\n        }\n      },\n      { root: scrollRef.current, rootMargin: '400px 0px' },\n    )\n    slotRefs.current.forEach((el) => el && io.observe(el))\n    return () => io.disconnect()\n  }, [pdf, numPages, requestPage])\n\n  const count = numPages || 1\n  const slotAspect = aspect ?? DEFAULT_ASPECT\n\n  if (failed) {\n    return (\n      <div className={`flex h-full w-full flex-col items-center justify-center gap-2.5 bg-card text-muted-foreground ${className}`}>\n        <svg width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" aria-hidden>\n          <path d=\"M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          <path d=\"M14 2v5h5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n        <span className=\"text-xs\">{label}</span>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      ref={scrollRef}\n      className={`flex h-full min-h-0 w-full flex-col items-center gap-3.5 overflow-x-hidden overflow-y-auto bg-card px-4 pt-3.5 pb-[18px] [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-scrollbar [&::-webkit-scrollbar-thumb]:bg-clip-padding [&::-webkit-scrollbar-thumb:hover]:bg-scrollbar-hover ${className}`}\n    >\n      {Array.from({ length: count }, (_, i) => {\n        const p = i + 1\n        const url = imgByPage[p]\n        return (\n          <div\n            key={p}\n            ref={(el) => {\n              slotRefs.current[i] = el\n            }}\n            data-page={p}\n            style={{ aspectRatio: String(slotAspect) }}\n            className=\"flex w-full flex-none items-center justify-center overflow-hidden rounded border border-border bg-white shadow-page\"\n          >\n            {url ? (\n              <img src={url} alt={`${label} — ${p}/${count}`} className=\"block h-full w-full object-contain\" />\n            ) : (\n              <span role=\"status\" aria-label={label} className=\"inline-block h-[22px] w-[22px] animate-spin rounded-full border-[2.5px] border-primary/20 border-t-primary\" />\n            )}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/v1/primitives/documents/PdfPreview/pdfjs.js

@@ -0,0 +1,26 @@
+let workerSrc = null;
+let loaded = null;
+let loading = null;
+function configurePdfWorker(src) {
+  workerSrc = src;
+  if (loaded) loaded.GlobalWorkerOptions.workerSrc = src;
+}
+function loadPdfjs() {
+  if (!loading) {
+    loading = import("pdfjs-dist").then((pdfjs) => {
+      if (typeof pdfjs.getDocument !== "function") throw new Error("pdfjs-dist indisponível");
+      if (workerSrc) pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
+      loaded = pdfjs;
+      return pdfjs;
+    }).catch((e) => {
+      loading = null;
+      throw e;
+    });
+  }
+  return loading;
+}
+export {
+  configurePdfWorker,
+  loadPdfjs
+};
+//# sourceMappingURL=pdfjs.js.map

package/dist/esm/v1/primitives/documents/PdfPreview/pdfjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdfjs.js","sources":["../../../../../../src/v1/primitives/documents/PdfPreview/pdfjs.ts"],"sourcesContent":["import type * as PdfJs from 'pdfjs-dist'\n\ntype PdfJsModule = typeof PdfJs\n\nlet workerSrc: string | null = null\nlet loaded: PdfJsModule | null = null\nlet loading: Promise<PdfJsModule> | null = null\n\n/**\n * Indica ao pdf.js onde está o worker (`pdf.worker.min.mjs`) servido pela app.\n * Chamar uma vez no arranque. Se a app já define `GlobalWorkerOptions.workerSrc`\n * pela sua própria cópia do pdf.js (a mesma, quando deduplicada), não é preciso.\n */\nexport function configurePdfWorker(src: string) {\n  workerSrc = src\n  if (loaded) loaded.GlobalWorkerOptions.workerSrc = src\n}\n\n/** Carrega o pdf.js só quando há um PDF para mostrar; depois fica em cache. */\nexport function loadPdfjs(): Promise<PdfJsModule> {\n  if (!loading) {\n    loading = import('pdfjs-dist')\n      .then((pdfjs) => {\n        // Salvaguarda: se o pdf.js não chegar (ex: ambiente sem ele), cai no ícone.\n        if (typeof pdfjs.getDocument !== 'function') throw new Error('pdfjs-dist indisponível')\n        if (workerSrc) pdfjs.GlobalWorkerOptions.workerSrc = workerSrc\n        loaded = pdfjs\n        return pdfjs\n      })\n      .catch((e) => {\n        loading = null\n        throw e\n      })\n  }\n  return loading\n}\n"],"names":[],"mappings":"AAIA,IAAI,YAA2B;AAC/B,IAAI,SAA6B;AACjC,IAAI,UAAuC;AAOpC,SAAS,mBAAmB,KAAa;AAC9C,cAAY;AACZ,MAAI,OAAQ,QAAO,oBAAoB,YAAY;AACrD;AAGO,SAAS,YAAkC;AAChD,MAAI,CAAC,SAAS;AACZ,cAAU,OAAO,YAAY,EAC1B,KAAK,CAAC,UAAU;AAEf,UAAI,OAAO,MAAM,gBAAgB,WAAY,OAAM,IAAI,MAAM,yBAAyB;AACtF,UAAI,UAAW,OAAM,oBAAoB,YAAY;AACrD,eAAS;AACT,aAAO;AAAA,IACT,CAAC,EACA,MAAM,CAAC,MAAM;AACZ,gBAAU;AACV,YAAM;AAAA,IACR,CAAC;AAAA,EACL;AACA,SAAO;AACT;"}