@nextelco/common-ui 2.1.105 → 2.1.107

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/forms/Checkbox/Checkbox.js

@@ -1,23 +1,28 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useRef, useImperativeHandle, useEffect } from "react";
 import { CheckIcon } from "../../../foundations/icons/icons.js";
 import { useField } from "../field.js";
-const Checkbox = forwardRef(function Checkbox2({ invalid, className = "", id, required, ...props }, ref) {
+const Checkbox = forwardRef(function Checkbox2({ invalid, indeterminate = false, className = "", id, required, ...props }, ref) {
   const field = useField();
+  const caixa = useRef(null);
+  useImperativeHandle(ref, () => caixa.current);
+  useEffect(() => {
+    if (caixa.current) caixa.current.indeterminate = indeterminate;
+  });
   return /* @__PURE__ */ jsxs("span", { className: `relative inline-flex size-4 shrink-0 ${className}`, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
-        ref,
+        ref: caixa,
         type: "checkbox",
         id: id ?? field.id,
         required: required ?? field.required,
         "aria-invalid": invalid || void 0,
-        className: "peer absolute inset-0 m-0 size-full cursor-pointer appearance-none rounded-sm border border-border bg-card outline-none transition-[background-color,border-color,box-shadow] duration-150 checked:border-primary checked:bg-primary focus-visible:ring-3 focus-visible:ring-primary/20 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/15 disabled:cursor-not-allowed disabled:bg-muted disabled:checked:border-border disabled:checked:bg-muted",
+        className: "peer absolute inset-0 m-0 size-full cursor-pointer appearance-none rounded-sm border border-muted-foreground/40 bg-card outline-none transition-[background-color,border-color,box-shadow] duration-150 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:ring-3 focus-visible:ring-primary/20 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/15 disabled:cursor-not-allowed disabled:bg-muted disabled:checked:border-border disabled:checked:bg-muted disabled:indeterminate:border-border disabled:indeterminate:bg-muted",
         ...props
       }
     ),
-    /* @__PURE__ */ jsx(
+    indeterminate ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 m-auto h-0.5 w-2 rounded-full bg-primary-foreground peer-disabled:bg-muted-foreground" }) : /* @__PURE__ */ jsx(
       CheckIcon,
       {
         size: 12,

package/dist/esm/v1/primitives/forms/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../src/v1/primitives/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\r\nimport { CheckIcon } from '../../../foundations/icons/icons'\r\nimport { useField } from '../field'\r\n\r\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\r\n  /** Marca a caixa a vermelho (ex: aceitar os termos, por marcar ao submeter). */\r\n  invalid?: boolean\r\n}\r\n\r\n/**\r\n * Caixa de marcar.\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica\r\n * ligada à etiqueta automaticamente. Fora dele, dar-lhe um `aria-label` ou\r\n * envolvê-la num `<label>`: sozinha não tem nome para os leitores de ecrã.\r\n *\r\n * **Aceita os atributos HTML do [&lt;input type=\"checkbox\"&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox)**, com o mesmo comportamento: `checked`/`defaultChecked`, `onChange`, `required`, `disabled`, `name`, `value`, `ref`, ...\r\n * Só os próprios do V1 aparecem na tabela abaixo.\r\n * Diferenças: o `className` aplica-se à caixa à volta; o `type` é sempre `checkbox`.\r\n */\r\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox({ invalid, className = '', id, required, ...props }, ref) {\r\n  const field = useField()\r\n  return (\r\n    <span className={`relative inline-flex size-4 shrink-0 ${className}`}>\r\n      <input\r\n        ref={ref}\r\n        type=\"checkbox\"\r\n        id={id ?? field.id}\r\n        required={required ?? field.required}\r\n        aria-invalid={invalid || undefined}\r\n        className={\r\n          'peer absolute inset-0 m-0 size-full cursor-pointer appearance-none rounded-sm border border-border bg-card outline-none ' +\r\n          'transition-[background-color,border-color,box-shadow] duration-150 ' +\r\n          'checked:border-primary checked:bg-primary ' +\r\n          'focus-visible:ring-3 focus-visible:ring-primary/20 ' +\r\n          'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/15 ' +\r\n          'disabled:cursor-not-allowed disabled:bg-muted disabled:checked:border-border disabled:checked:bg-muted'\r\n        }\r\n        {...props}\r\n      />\r\n      <CheckIcon\r\n        size={12}\r\n        className=\"pointer-events-none absolute inset-0 m-auto hidden text-primary-foreground peer-checked:block peer-disabled:text-muted-foreground\"\r\n      />\r\n    </span>\r\n  )\r\n})\r\n\r\nexport default Checkbox\r\n"],"names":["Checkbox"],"mappings":";;;;AAoBA,MAAM,WAAW,WAA4C,SAASA,UAAS,EAAE,SAAS,YAAY,IAAI,IAAI,UAAU,GAAG,MAAA,GAAS,KAAK;AACvI,QAAM,QAAQ,SAAA;AACd,SACE,qBAAC,QAAA,EAAK,WAAW,wCAAwC,SAAS,IAChE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,IAAI,MAAM,MAAM;AAAA,QAChB,UAAU,YAAY,MAAM;AAAA,QAC5B,gBAAc,WAAW;AAAA,QACzB,WACE;AAAA,QAOD,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../src/v1/primitives/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'\r\nimport { CheckIcon } from '../../../foundations/icons/icons'\r\nimport { useField } from '../field'\r\n\r\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\r\n  /** Marca a caixa a vermelho (ex: aceitar os termos, por marcar ao submeter). */\r\n  invalid?: boolean\r\n  /**\r\n   * Meio marcada: um traço em vez do visto (ex: \"selecionar todos\" com só\r\n   * algumas marcadas). Só o aspeto: ao clicar, o browser tira-o e a caixa passa\r\n   * a marcada ou desmarcada pelo `onChange`, como sempre. Para leitores de ecrã é\r\n   * \"parcialmente marcada\".\r\n   */\r\n  indeterminate?: boolean\r\n}\r\n\r\n/**\r\n * Caixa de marcar.\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica\r\n * ligada à etiqueta automaticamente. Fora dele, dar-lhe um `aria-label` ou\r\n * envolvê-la num `<label>`: sozinha não tem nome para os leitores de ecrã.\r\n *\r\n * **Aceita os atributos HTML do [&lt;input type=\"checkbox\"&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox)**, com o mesmo comportamento: `checked`/`defaultChecked`, `onChange`, `required`, `disabled`, `name`, `value`, `ref`, ...\r\n * Só os próprios do V1 aparecem na tabela abaixo.\r\n * Diferenças: o `className` aplica-se à caixa à volta; o `type` é sempre `checkbox`.\r\n */\r\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox({ invalid, indeterminate = false, className = '', id, required, ...props }, ref) {\r\n  const field = useField()\r\n  // O meio-marcado não é atributo HTML, só propriedade do elemento: vai pela ref.\r\n  const caixa = useRef<HTMLInputElement>(null)\r\n  useImperativeHandle(ref, () => caixa.current!)\r\n  // A cada render, e não só quando a prop muda: um clique tira-o no browser, e\r\n  // se a app o mantiver, tem de voltar.\r\n  useEffect(() => { if (caixa.current) caixa.current.indeterminate = indeterminate })\r\n  return (\r\n    <span className={`relative inline-flex size-4 shrink-0 ${className}`}>\r\n      <input\r\n        ref={caixa}\r\n        type=\"checkbox\"\r\n        id={id ?? field.id}\r\n        required={required ?? field.required}\r\n        aria-invalid={invalid || undefined}\r\n        className={\r\n          'peer absolute inset-0 m-0 size-full cursor-pointer appearance-none rounded-sm border border-muted-foreground/40 bg-card outline-none ' +\r\n          'transition-[background-color,border-color,box-shadow] duration-150 ' +\r\n          'checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary ' +\r\n          'focus-visible:ring-3 focus-visible:ring-primary/20 ' +\r\n          'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/15 ' +\r\n          'disabled:cursor-not-allowed disabled:bg-muted disabled:checked:border-border disabled:checked:bg-muted disabled:indeterminate:border-border disabled:indeterminate:bg-muted'\r\n        }\r\n        {...props}\r\n      />\r\n      {indeterminate ? (\r\n        <span aria-hidden className=\"pointer-events-none absolute inset-0 m-auto h-0.5 w-2 rounded-full bg-primary-foreground peer-disabled:bg-muted-foreground\" />\r\n      ) : (\r\n        <CheckIcon\r\n          size={12}\r\n          className=\"pointer-events-none absolute inset-0 m-auto hidden text-primary-foreground peer-checked:block peer-disabled:text-muted-foreground\"\r\n        />\r\n      )}\r\n    </span>\r\n  )\r\n})\r\n\r\nexport default Checkbox\r\n"],"names":["Checkbox"],"mappings":";;;;AA2BA,MAAM,WAAW,WAA4C,SAASA,UAAS,EAAE,SAAS,gBAAgB,OAAO,YAAY,IAAI,IAAI,UAAU,GAAG,MAAA,GAAS,KAAK;AAC9J,QAAM,QAAQ,SAAA;AAEd,QAAM,QAAQ,OAAyB,IAAI;AAC3C,sBAAoB,KAAK,MAAM,MAAM,OAAQ;AAG7C,YAAU,MAAM;AAAE,QAAI,MAAM,QAAS,OAAM,QAAQ,gBAAgB;AAAA,EAAc,CAAC;AAClF,SACE,qBAAC,QAAA,EAAK,WAAW,wCAAwC,SAAS,IAChE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,IAAI,MAAM,MAAM;AAAA,QAChB,UAAU,YAAY,MAAM;AAAA,QAC5B,gBAAc,WAAW;AAAA,QACzB,WACE;AAAA,QAOD,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,gBACC,oBAAC,QAAA,EAAK,eAAW,MAAC,WAAU,8HAA6H,IAEzJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ,CAAC;"}

package/dist/esm/v1/primitives/forms/DateInput/DateInput.js

@@ -0,0 +1,150 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useField, fieldClasses, readOnlyClasses } from "../field.js";
+const isoToBr = (iso) => {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(iso ?? "");
+  return m ? `${m[3]}/${m[2]}/${m[1]}` : "";
+};
+const brToIso = (br) => {
+  const m = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(br.trim());
+  if (!m) return "";
+  const [, dd, mm, yyyy] = m;
+  const d = /* @__PURE__ */ new Date(`${yyyy}-${mm}-${dd}T00:00:00`);
+  if (Number.isNaN(d.getTime()) || d.getDate() !== Number(dd) || d.getMonth() + 1 !== Number(mm)) return "";
+  return `${yyyy}-${mm}-${dd}`;
+};
+const mask = (raw) => {
+  const d = raw.replace(/\D/g, "").slice(0, 8);
+  if (d.length <= 2) return d;
+  if (d.length <= 4) return `${d.slice(0, 2)}/${d.slice(2)}`;
+  return `${d.slice(0, 2)}/${d.slice(2, 4)}/${d.slice(4)}`;
+};
+function CalendarIcon() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, viewBox: "0 0 24 24", width: 13, height: 13, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+  ] });
+}
+function DateInput({
+  value,
+  defaultValue,
+  onChange,
+  onBlur,
+  onKeyDown,
+  min,
+  max,
+  disabled,
+  readOnly,
+  required,
+  autoFocus,
+  id,
+  invalid,
+  placeholder = "dd/mm/aaaa",
+  "aria-label": ariaLabel,
+  calendarLabel = "Abrir calendário",
+  className = ""
+}) {
+  const field = useField();
+  const controlled = value !== void 0;
+  const [iso, setIso] = useState(value ?? defaultValue ?? "");
+  const [text, setText] = useState(isoToBr(value ?? defaultValue ?? ""));
+  const nativeRef = useRef(null);
+  useEffect(() => {
+    if (!controlled) return;
+    const outside = value ?? "";
+    if (outside === brToIso(text)) return;
+    setIso(outside);
+    setText(isoToBr(outside));
+  }, [value, controlled]);
+  const onBlurRef = useRef(onBlur);
+  useEffect(() => {
+    onBlurRef.current = onBlur;
+  });
+  const pendingCommit = useRef(false);
+  useEffect(() => {
+    if (!pendingCommit.current) return;
+    pendingCommit.current = false;
+    onBlurRef.current?.();
+  }, [value]);
+  const emit = (next) => {
+    setIso(next);
+    onChange?.(next);
+  };
+  const type = (raw) => {
+    const masked = mask(raw);
+    setText(masked);
+    if (masked === "") return emit("");
+    const next = brToIso(masked);
+    if (next) emit(next);
+  };
+  const leave = () => {
+    if (text !== "" && !brToIso(text)) setText(isoToBr(iso));
+    onBlur?.();
+  };
+  const openCalendar = () => {
+    const el = nativeRef.current;
+    if (!el || disabled || readOnly) return;
+    if (typeof el.showPicker === "function") el.showPicker();
+    else el.click();
+  };
+  return /* @__PURE__ */ jsxs("span", { className: `relative inline-flex w-full items-center ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: id ?? field.id,
+        type: "text",
+        inputMode: "numeric",
+        autoComplete: "off",
+        "aria-label": ariaLabel,
+        "aria-invalid": invalid || void 0,
+        placeholder,
+        value: text,
+        onChange: (e) => type(e.target.value),
+        onBlur: leave,
+        onKeyDown,
+        autoFocus,
+        disabled,
+        readOnly,
+        required: required ?? field.required,
+        className: `h-control ${fieldClasses} ${readOnlyClasses} pr-8 tabular-nums`
+      }
+    ),
+    !disabled && !readOnly && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        onClick: openCalendar,
+        "aria-label": calendarLabel,
+        "data-tip": calendarLabel,
+        className: "absolute right-1.5 flex h-6 w-6 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground hover:text-foreground",
+        children: /* @__PURE__ */ jsx(CalendarIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: nativeRef,
+        type: "date",
+        tabIndex: -1,
+        "aria-hidden": true,
+        value: iso,
+        min,
+        max,
+        onChange: (e) => {
+          const v = e.target.value;
+          setText(isoToBr(v));
+          emit(v);
+          if (controlled) pendingCommit.current = true;
+          else onBlurRef.current?.();
+        },
+        className: "sr-only absolute right-1.5 bottom-0 h-0 w-0 border-0 p-0"
+      }
+    )
+  ] });
+}
+export {
+  DateInput,
+  DateInput as default
+};
+//# sourceMappingURL=DateInput.js.map

package/dist/esm/v1/primitives/forms/DateInput/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","sources":["../../../../../../src/v1/primitives/forms/DateInput/DateInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\r\nimport { fieldClasses, readOnlyClasses, useField } from '../field'\r\n\r\nexport interface DateInputProps {\r\n  /** Data em ISO (`aaaa-mm-dd`) ou `''` (vazio). Controlado. */\r\n  value?: string\r\n  /** Valor inicial, sem controlar (ISO). */\r\n  defaultValue?: string\r\n  /** Recebe só datas completas e válidas, em ISO; `''` quando se apaga. Enquanto se escreve, não é chamado. */\r\n  onChange?: (value: string) => void\r\n  /** Ao terminar a edição: sair do campo ou escolher no calendário. */\r\n  onBlur?: () => void\r\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void\r\n  /** Limites, em ISO (só no calendário). */\r\n  min?: string\r\n  max?: string\r\n  disabled?: boolean\r\n  readOnly?: boolean\r\n  required?: boolean\r\n  autoFocus?: boolean\r\n  id?: string\r\n  /** Marca o campo a vermelho (ex: obrigatório por preencher ao submeter). */\r\n  invalid?: boolean\r\n  placeholder?: string\r\n  /** Nome do campo para leitores de ecrã, quando não há etiqueta. */\r\n  'aria-label'?: string\r\n  /** Texto do botão do calendário. */\r\n  calendarLabel?: string\r\n  /** Classes da caixa à volta (ex: largura). */\r\n  className?: string\r\n}\r\n\r\nconst isoToBr = (iso: string): string => {\r\n  const m = /^(\\d{4})-(\\d{2})-(\\d{2})/.exec(iso ?? '')\r\n  return m ? `${m[3]}/${m[2]}/${m[1]}` : ''\r\n}\r\n\r\nconst brToIso = (br: string): string => {\r\n  const m = /^(\\d{2})\\/(\\d{2})\\/(\\d{4})$/.exec(br.trim())\r\n  if (!m) return ''\r\n  const [, dd, mm, yyyy] = m\r\n  const d = new Date(`${yyyy}-${mm}-${dd}T00:00:00`)\r\n  // Rejeita 31/02 e afins: o Date normaliza para 03/03 em vez de falhar.\r\n  if (Number.isNaN(d.getTime()) || d.getDate() !== Number(dd) || d.getMonth() + 1 !== Number(mm)) return ''\r\n  return `${yyyy}-${mm}-${dd}`\r\n}\r\n\r\n/** Mascara o que se escreve, deixando só dígitos e pondo as barras no sítio. */\r\nconst mask = (raw: string): string => {\r\n  const d = raw.replace(/\\D/g, '').slice(0, 8)\r\n  if (d.length <= 2) return d\r\n  if (d.length <= 4) return `${d.slice(0, 2)}/${d.slice(2)}`\r\n  return `${d.slice(0, 2)}/${d.slice(2, 4)}/${d.slice(4)}`\r\n}\r\n\r\nfunction CalendarIcon() {\r\n  return (\r\n    <svg aria-hidden viewBox=\"0 0 24 24\" width={13} height={13} fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" />\r\n      <path d=\"M16 2v4M8 2v4M3 10h18\" />\r\n    </svg>\r\n  )\r\n}\r\n\r\n/**\r\n * Campo de data, sempre em **dd/mm/aaaa**.\r\n *\r\n * O `<input type=\"date\">` do browser mostra a data no idioma do BROWSER, não no\r\n * da página (num Chrome em inglês aparece mm/dd/aaaa), e não há atributo que o\r\n * force. Aqui o texto é escrito pela biblioteca, com máscara; o calendário\r\n * continua a ser o nativo (acessível e traduzido), aberto pelo ícone.\r\n *\r\n * O valor entra e sai em ISO (`aaaa-mm-dd`). Dentro de um\r\n * [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à\r\n * etiqueta automaticamente.\r\n */\r\nexport default function DateInput({\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  onBlur,\r\n  onKeyDown,\r\n  min,\r\n  max,\r\n  disabled,\r\n  readOnly,\r\n  required,\r\n  autoFocus,\r\n  id,\r\n  invalid,\r\n  placeholder = 'dd/mm/aaaa',\r\n  'aria-label': ariaLabel,\r\n  calendarLabel = 'Abrir calendário',\r\n  className = '',\r\n}: DateInputProps) {\r\n  const field = useField()\r\n  const controlled = value !== undefined\r\n  const [iso, setIso] = useState(value ?? defaultValue ?? '')\r\n  const [text, setText] = useState(isoToBr(value ?? defaultValue ?? ''))\r\n  const nativeRef = useRef<HTMLInputElement>(null)\r\n\r\n  // Segue o valor de fora, exceto enquanto o campo tem uma data a meio: senão\r\n  // um re-render durante a escrita apagava os dígitos já introduzidos.\r\n  useEffect(() => {\r\n    if (!controlled) return\r\n    const outside = value ?? ''\r\n    if (outside === brToIso(text)) return\r\n    setIso(outside)\r\n    setText(isoToBr(outside))\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [value, controlled])\r\n\r\n  // Escolher no calendário conta como terminar a edição (quem grava está quase\r\n  // sempre no `onBlur`). O aviso espera que o valor novo volte em `value`:\r\n  // chamado logo, o `onBlur` de fora ainda lia o valor anterior.\r\n  const onBlurRef = useRef(onBlur)\r\n  useEffect(() => {\r\n    onBlurRef.current = onBlur\r\n  })\r\n  const pendingCommit = useRef(false)\r\n  useEffect(() => {\r\n    if (!pendingCommit.current) return\r\n    pendingCommit.current = false\r\n    onBlurRef.current?.()\r\n  }, [value])\r\n\r\n  const emit = (next: string) => {\r\n    setIso(next)\r\n    onChange?.(next)\r\n  }\r\n\r\n  const type = (raw: string) => {\r\n    const masked = mask(raw)\r\n    setText(masked)\r\n    if (masked === '') return emit('')\r\n    const next = brToIso(masked)\r\n    if (next) emit(next)\r\n  }\r\n\r\n  // Ao sair, uma data incompleta ou impossível volta ao último valor bom.\r\n  const leave = () => {\r\n    if (text !== '' && !brToIso(text)) setText(isoToBr(iso))\r\n    onBlur?.()\r\n  }\r\n\r\n  const openCalendar = () => {\r\n    const el = nativeRef.current\r\n    if (!el || disabled || readOnly) return\r\n    // showPicker() é o caminho normal; sem ele (browsers antigos) resta o clique.\r\n    if (typeof (el as HTMLInputElement & { showPicker?: () => void }).showPicker === 'function') el.showPicker()\r\n    else el.click()\r\n  }\r\n\r\n  return (\r\n    <span className={`relative inline-flex w-full items-center ${className}`}>\r\n      <input\r\n        id={id ?? field.id}\r\n        type=\"text\"\r\n        inputMode=\"numeric\"\r\n        autoComplete=\"off\"\r\n        aria-label={ariaLabel}\r\n        aria-invalid={invalid || undefined}\r\n        placeholder={placeholder}\r\n        value={text}\r\n        onChange={(e) => type(e.target.value)}\r\n        onBlur={leave}\r\n        onKeyDown={onKeyDown}\r\n        autoFocus={autoFocus}\r\n        disabled={disabled}\r\n        readOnly={readOnly}\r\n        required={required ?? field.required}\r\n        className={`h-control ${fieldClasses} ${readOnlyClasses} pr-8 tabular-nums`}\r\n      />\r\n      {!disabled && !readOnly && (\r\n        <button\r\n          type=\"button\"\r\n          tabIndex={-1}\r\n          onClick={openCalendar}\r\n          aria-label={calendarLabel}\r\n          data-tip={calendarLabel}\r\n          className=\"absolute right-1.5 flex h-6 w-6 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground hover:text-foreground\"\r\n        >\r\n          <CalendarIcon />\r\n        </button>\r\n      )}\r\n      {/* O nativo só serve de calendário: nunca se vê, por isso o idioma dele não\r\n          chega ao ecrã. `sr-only` em vez de display:none — o showPicker() recusa\r\n          abrir num campo escondido. */}\r\n      <input\r\n        ref={nativeRef}\r\n        type=\"date\"\r\n        tabIndex={-1}\r\n        aria-hidden\r\n        value={iso}\r\n        min={min}\r\n        max={max}\r\n        onChange={(e) => {\r\n          const v = e.target.value\r\n          setText(isoToBr(v))\r\n          emit(v)\r\n          // Sem `value` de fora não há nada por que esperar.\r\n          if (controlled) pendingCommit.current = true\r\n          else onBlurRef.current?.()\r\n        }}\r\n        className=\"sr-only absolute right-1.5 bottom-0 h-0 w-0 border-0 p-0\"\r\n      />\r\n    </span>\r\n  )\r\n}\r\n\r\nexport { DateInput }\r\n"],"names":[],"mappings":"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"}

package/dist/esm/v1/primitives/forms/LookupInput/LookupInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"LookupInput.js","sources":["../../../../../../src/v1/primitives/forms/LookupInput/LookupInput.tsx"],"sourcesContent":["import React from 'react'\r\nimport { SearchIcon } from '../../../foundations/icons/icons'\r\nimport { fieldClasses, readOnlyClasses, useField } from '../field'\r\n\r\nexport interface LookupInputProps {\r\n  /** O que foi escolhido, como a app o quer mostrar (ex: \"PRJ-0001 - Projeto de exemplo\"). Vazio se nada. */\r\n  value: string\r\n  /** Chamado ao carregar na lupa: a app abre a sua pesquisa e, quando se escolhe algo, atualiza o `value`. */\r\n  onLookup: () => void\r\n  /** O que a lupa faz (ex: \"Pesquisar projeto\"). Lido pelos leitores de ecrã e mostrado ao passar o rato. */\r\n  lookupLabel: string\r\n  /** Texto quando não há nada escolhido (ex: \"Nenhum projeto\"). */\r\n  placeholder?: string\r\n  /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */\r\n  invalid?: boolean\r\n  disabled?: boolean\r\n  id?: string\r\n  /** Aplica-se à caixa à volta (para a largura, por exemplo). */\r\n  className?: string\r\n}\r\n\r\n/**\r\n * Campo que **não se escreve**: o valor escolhe-se numa pesquisa, aberta pela\r\n * lupa ao lado (ex: escolher um projeto). A pesquisa é da app; este campo só\r\n * mostra o que foi escolhido.\r\n *\r\n * Não é como um `<input>` HTML: só aceita as props da tabela abaixo.\r\n */\r\nexport default function LookupInput({ value, onLookup, lookupLabel, placeholder, invalid, disabled, id, className = '' }: LookupInputProps) {\r\n  const field = useField()\r\n  return (\r\n    <div className={`flex min-w-0 items-center gap-1.5 ${className}`}>\r\n      <input\r\n        id={id ?? field.id}\r\n        readOnly\r\n        required={field.required}\r\n        disabled={disabled}\r\n        value={value}\r\n        placeholder={placeholder}\r\n        aria-invalid={invalid || undefined}\r\n        className={`h-control ${fieldClasses} ${readOnlyClasses}`}\r\n      />\r\n      <button\r\n        type=\"button\"\r\n        onClick={onLookup}\r\n        disabled={disabled}\r\n        aria-label={lookupLabel}\r\n        title={lookupLabel}\r\n        className={\r\n          'flex h-control w-control flex-none cursor-pointer items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground ' +\r\n          'transition-colors duration-150 hover:border-primary/25 hover:bg-primary/5 hover:text-primary ' +\r\n          'focus-visible:border-primary/40 focus-visible:ring-3 focus-visible:ring-primary/10 focus-visible:outline-none ' +\r\n          'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border disabled:hover:bg-muted disabled:hover:text-muted-foreground'\r\n        }\r\n      >\r\n        <SearchIcon size={14} />\r\n      </button>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;AA4BA,SAAwB,YAAY,EAAE,OAAO,UAAU,aAAa,aAAa,SAAS,UAAU,IAAI,YAAY,GAAA,GAAwB;AAC1I,QAAM,QAAQ,SAAA;AACd,SACE,qBAAC,OAAA,EAAI,WAAW,qCAAqC,SAAS,IAC5D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,MAAM;AAAA,QAChB,UAAQ;AAAA,QACR,UAAU,MAAM;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc,WAAW;AAAA,QACzB,WAAW,aAAa,YAAY,IAAI,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,IAEzD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,cAAY;AAAA,QACZ,OAAO;AAAA,QACP,WACE;AAAA,QAMF,UAAA,oBAAC,YAAA,EAAW,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACxB,GACF;AAEJ;"}
+{"version":3,"file":"LookupInput.js","sources":["../../../../../../src/v1/primitives/forms/LookupInput/LookupInput.tsx"],"sourcesContent":["import React from 'react'\r\nimport { SearchIcon } from '../../../foundations/icons/icons'\r\nimport { fieldClasses, readOnlyClasses, useField } from '../field'\r\n\r\nexport interface LookupInputProps {\r\n  /** O que foi escolhido, como a app o quer mostrar (ex: \"PRJ-0001 - Projeto de exemplo\"). Vazio se nada. */\r\n  value: string\r\n  /** Chamado ao carregar na lupa: a app abre a sua pesquisa e, quando se escolhe algo, atualiza o `value`. */\r\n  onLookup: () => void\r\n  /** O que a lupa faz (ex: \"Pesquisar projeto\"). Lido pelos leitores de ecrã e mostrado ao passar o rato. */\r\n  lookupLabel: string\r\n  /** Texto quando não há nada escolhido (ex: \"Nenhum projeto\"). */\r\n  placeholder?: string\r\n  /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */\r\n  invalid?: boolean\r\n  disabled?: boolean\r\n  id?: string\r\n  /** Aplica-se à caixa à volta (para a largura, por exemplo). */\r\n  className?: string\r\n}\r\n\r\n/**\r\n * Campo que **não se escreve**: o valor escolhe-se numa pesquisa, aberta pela\r\n * lupa ao lado (ex: escolher um projeto). A pesquisa é da app; este campo só\r\n * mostra o que foi escolhido.\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica\r\n * ligado à etiqueta automaticamente.\r\n *\r\n * Não é como um `<input>` HTML: só aceita as props da tabela abaixo.\r\n */\r\nexport default function LookupInput({ value, onLookup, lookupLabel, placeholder, invalid, disabled, id, className = '' }: LookupInputProps) {\r\n  const field = useField()\r\n  return (\r\n    <div className={`flex min-w-0 items-center gap-1.5 ${className}`}>\r\n      <input\r\n        id={id ?? field.id}\r\n        readOnly\r\n        required={field.required}\r\n        disabled={disabled}\r\n        value={value}\r\n        placeholder={placeholder}\r\n        aria-invalid={invalid || undefined}\r\n        className={`h-control ${fieldClasses} ${readOnlyClasses}`}\r\n      />\r\n      <button\r\n        type=\"button\"\r\n        onClick={onLookup}\r\n        disabled={disabled}\r\n        aria-label={lookupLabel}\r\n        title={lookupLabel}\r\n        className={\r\n          'flex h-control w-control flex-none cursor-pointer items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground ' +\r\n          'transition-colors duration-150 hover:border-primary/25 hover:bg-primary/5 hover:text-primary ' +\r\n          'focus-visible:border-primary/40 focus-visible:ring-3 focus-visible:ring-primary/10 focus-visible:outline-none ' +\r\n          'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border disabled:hover:bg-muted disabled:hover:text-muted-foreground'\r\n        }\r\n      >\r\n        <SearchIcon size={14} />\r\n      </button>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;AA+BA,SAAwB,YAAY,EAAE,OAAO,UAAU,aAAa,aAAa,SAAS,UAAU,IAAI,YAAY,GAAA,GAAwB;AAC1I,QAAM,QAAQ,SAAA;AACd,SACE,qBAAC,OAAA,EAAI,WAAW,qCAAqC,SAAS,IAC5D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,MAAM;AAAA,QAChB,UAAQ;AAAA,QACR,UAAU,MAAM;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc,WAAW;AAAA,QACzB,WAAW,aAAa,YAAY,IAAI,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,IAEzD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,cAAY;AAAA,QACZ,OAAO;AAAA,QACP,WACE;AAAA,QAMF,UAAA,oBAAC,YAAA,EAAW,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACxB,GACF;AAEJ;"}

package/dist/esm/v1/primitives/forms/SearchInput/SearchInput.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { fieldClasses } from "../field.js";
+import { SearchIcon, CloseIcon } from "../../../foundations/icons/icons.js";
+const SearchInput = forwardRef(function SearchInput2({ value, onChange, placeholder = "Pesquisar…", label, clearLabel = "Limpar pesquisa", className = "w-56", icon, onKeyDown, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute top-1/2 left-2.5 flex -translate-y-1/2 text-muted-foreground", children: icon ?? /* @__PURE__ */ jsx(SearchIcon, { size: 14 }) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "search",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Escape" && value) {
+            e.stopPropagation();
+            onChange("");
+          }
+          onKeyDown?.(e);
+        },
+        placeholder,
+        "aria-label": label ?? placeholder,
+        className: `h-control ${fieldClasses} pr-7 pl-8 [&::-webkit-search-cancel-button]:hidden`,
+        ...props
+      }
+    ),
+    value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(""),
+        "aria-label": clearLabel,
+        className: "absolute top-1/2 right-1.5 flex h-5 w-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none",
+        children: /* @__PURE__ */ jsx(CloseIcon, { size: 12 })
+      }
+    )
+  ] });
+});
+export {
+  SearchInput as default
+};
+//# sourceMappingURL=SearchInput.js.map

package/dist/esm/v1/primitives/forms/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../../../../src/v1/primitives/forms/SearchInput/SearchInput.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\r\nimport { fieldClasses } from '../field'\r\nimport { CloseIcon, SearchIcon } from '../../../foundations/icons/icons'\r\n\r\nexport interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type' | 'className'> {\r\n  value: string\r\n  /** O texto novo, a cada tecla (e `''` ao limpar). */\r\n  onChange: (value: string) => void\r\n  /** Nome do campo para leitores de ecrã. Por omissão, o placeholder. */\r\n  label?: string\r\n  /** Nome do botão ×, para leitores de ecrã. Por omissão: \"Limpar pesquisa\". */\r\n  clearLabel?: string\r\n  /** Largura e posição (classes do invólucro). Por omissão `w-56`. */\r\n  className?: string\r\n  /** Ícone à esquerda, no lugar da lupa, quando o filtro é de algo concreto (ex: empresa, colaborador). Tamanho 14. */\r\n  icon?: React.ReactNode\r\n}\r\n\r\n/**\r\n * Caixa de pesquisa das barras de páginas, tabelas e listas: a mesma altura\r\n * dos botões ao lado. Lupa à esquerda; com texto, um × para limpar (Esc também\r\n * limpa).\r\n *\r\n * Aceita os outros atributos do `<input>` (`autoFocus`, `name`, `onKeyDown`, …).\r\n */\r\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(function SearchInput(\r\n  { value, onChange, placeholder = 'Pesquisar…', label, clearLabel = 'Limpar pesquisa', className = 'w-56', icon, onKeyDown, ...props },\r\n  ref,\r\n) {\r\n  return (\r\n    <div className={`relative ${className}`}>\r\n      <span aria-hidden className=\"pointer-events-none absolute top-1/2 left-2.5 flex -translate-y-1/2 text-muted-foreground\">\r\n        {icon ?? <SearchIcon size={14} />}\r\n      </span>\r\n      <input\r\n        ref={ref}\r\n        type=\"search\"\r\n        value={value}\r\n        onChange={(e) => onChange(e.target.value)}\r\n        onKeyDown={(e) => {\r\n          if (e.key === 'Escape' && value) {\r\n            e.stopPropagation()\r\n            onChange('')\r\n          }\r\n          onKeyDown?.(e)\r\n        }}\r\n        placeholder={placeholder}\r\n        aria-label={label ?? placeholder}\r\n        className={`h-control ${fieldClasses} pr-7 pl-8 [&::-webkit-search-cancel-button]:hidden`}\r\n        {...props}\r\n      />\r\n      {value && (\r\n        <button\r\n          type=\"button\"\r\n          onClick={() => onChange('')}\r\n          aria-label={clearLabel}\r\n          className=\"absolute top-1/2 right-1.5 flex h-5 w-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none\"\r\n        >\r\n          <CloseIcon size={12} />\r\n        </button>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nexport default SearchInput\r\n"],"names":["SearchInput"],"mappings":";;;;AAyBA,MAAM,cAAc,WAA+C,SAASA,aAC1E,EAAE,OAAO,UAAU,cAAc,cAAc,OAAO,aAAa,mBAAmB,YAAY,QAAQ,MAAM,WAAW,GAAG,MAAA,GAC9H,KACA;AACA,SACE,qBAAC,OAAA,EAAI,WAAW,YAAY,SAAS,IACnC,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,eAAW,MAAC,WAAU,6FACzB,kBAAQ,oBAAC,YAAA,EAAW,MAAM,GAAA,CAAI,EAAA,CACjC;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,YAAY,OAAO;AAC/B,cAAE,gBAAA;AACF,qBAAS,EAAE;AAAA,UACb;AACA,sBAAY,CAAC;AAAA,QACf;AAAA,QACA;AAAA,QACA,cAAY,SAAS;AAAA,QACrB,WAAW,aAAa,YAAY;AAAA,QACnC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,SACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,EAAE;AAAA,QAC1B,cAAY;AAAA,QACZ,WAAU;AAAA,QAEV,UAAA,oBAAC,WAAA,EAAU,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACvB,GAEJ;AAEJ,CAAC;"}