@proef/common-ui 0.0.0-stage → 2.2.1

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

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+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, 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: 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-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
+      }
+    ),
+    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,
+        className: "pointer-events-none absolute inset-0 m-auto hidden text-primary-foreground peer-checked:block peer-disabled:text-muted-foreground"
+      }
+    )
+  ] });
+});
+export {
+  Checkbox as default
+};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"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":";;;AAgCA,MAAM,UAAU,CAAC,QAAwB;AACvC,QAAM,IAAI,2BAA2B,KAAK,OAAO,EAAE;AACnD,SAAO,IAAI,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK;AACzC;AAEA,MAAM,UAAU,CAAC,OAAuB;AACtC,QAAM,IAAI,8BAA8B,KAAK,GAAG,MAAM;AACtD,MAAI,CAAC,EAAG,QAAO;AACf,QAAM,GAAG,IAAI,IAAI,IAAI,IAAI;AACzB,QAAM,wBAAQ,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,WAAW;AAEjD,MAAI,OAAO,MAAM,EAAE,SAAS,KAAK,EAAE,cAAc,OAAO,EAAE,KAAK,EAAE,SAAA,IAAa,MAAM,OAAO,EAAE,EAAG,QAAO;AACvG,SAAO,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE;AAC5B;AAGA,MAAM,OAAO,CAAC,QAAwB;AACpC,QAAM,IAAI,IAAI,QAAQ,OAAO,EAAE,EAAE,MAAM,GAAG,CAAC;AAC3C,MAAI,EAAE,UAAU,EAAG,QAAO;AAC1B,MAAI,EAAE,UAAU,EAAG,QAAO,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AACxD,SAAO,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AACxD;AAEA,SAAS,eAAe;AACtB,8BACG,OAAA,EAAI,eAAW,MAAC,SAAQ,aAAY,OAAO,IAAI,QAAQ,IAAI,MAAK,QAAO,QAAO,gBAAe,aAAa,GAAG,eAAc,SAAQ,gBAAe,SACjJ,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,IAAA,CAAI;AAAA,IAChD,oBAAC,QAAA,EAAK,GAAE,wBAAA,CAAwB;AAAA,EAAA,GAClC;AAEJ;AAcA,SAAwB,UAAU;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,YAAY;AACd,GAAmB;AACjB,QAAM,QAAQ,SAAA;AACd,QAAM,aAAa,UAAU;AAC7B,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,SAAS,gBAAgB,EAAE;AAC1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,QAAQ,SAAS,gBAAgB,EAAE,CAAC;AACrE,QAAM,YAAY,OAAyB,IAAI;AAI/C,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AACjB,UAAM,UAAU,SAAS;AACzB,QAAI,YAAY,QAAQ,IAAI,EAAG;AAC/B,WAAO,OAAO;AACd,YAAQ,QAAQ,OAAO,CAAC;AAAA,EAE1B,GAAG,CAAC,OAAO,UAAU,CAAC;AAKtB,QAAM,YAAY,OAAO,MAAM;AAC/B,YAAU,MAAM;AACd,cAAU,UAAU;AAAA,EACtB,CAAC;AACD,QAAM,gBAAgB,OAAO,KAAK;AAClC,YAAU,MAAM;AACd,QAAI,CAAC,cAAc,QAAS;AAC5B,kBAAc,UAAU;AACxB,cAAU,UAAA;AAAA,EACZ,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,OAAO,CAAC,SAAiB;AAC7B,WAAO,IAAI;AACX,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,OAAO,CAAC,QAAgB;AAC5B,UAAM,SAAS,KAAK,GAAG;AACvB,YAAQ,MAAM;AACd,QAAI,WAAW,GAAI,QAAO,KAAK,EAAE;AACjC,UAAM,OAAO,QAAQ,MAAM;AAC3B,QAAI,WAAW,IAAI;AAAA,EACrB;AAGA,QAAM,QAAQ,MAAM;AAClB,QAAI,SAAS,MAAM,CAAC,QAAQ,IAAI,EAAG,SAAQ,QAAQ,GAAG,CAAC;AACvD,aAAA;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AACzB,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,MAAM,YAAY,SAAU;AAEjC,QAAI,OAAQ,GAAsD,eAAe,eAAe,WAAA;AAAA,YACxF,MAAA;AAAA,EACV;AAEA,SACE,qBAAC,QAAA,EAAK,WAAW,4CAA4C,SAAS,IACpE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,MAAM;AAAA,QAChB,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAa;AAAA,QACb,cAAY;AAAA,QACZ,gBAAc,WAAW;AAAA,QACzB;AAAA,QACA,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,QACpC,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY,MAAM;AAAA,QAC5B,WAAW,aAAa,YAAY,IAAI,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,IAExD,CAAC,YAAY,CAAC,YACb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAY;AAAA,QACZ,YAAU;AAAA,QACV,WAAU;AAAA,QAEV,8BAAC,cAAA,CAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAMlB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAU;AAAA,QACV,eAAW;AAAA,QACX,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,UAAU,CAAC,MAAM;AACf,gBAAM,IAAI,EAAE,OAAO;AACnB,kBAAQ,QAAQ,CAAC,CAAC;AAClB,eAAK,CAAC;AAEN,cAAI,0BAA0B,UAAU;AAAA,yBACzB,UAAA;AAAA,QACjB;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}

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

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { SearchIcon } from "../../../foundations/icons/icons.js";
+import { useField, fieldClasses, readOnlyClasses } from "../field.js";
+function LookupInput({ value, onLookup, lookupLabel, placeholder, invalid, disabled, id, className = "" }) {
+  const field = useField();
+  return /* @__PURE__ */ jsxs("div", { className: `flex min-w-0 items-center gap-1.5 ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: id ?? field.id,
+        readOnly: true,
+        required: field.required,
+        disabled,
+        value,
+        placeholder,
+        "aria-invalid": invalid || void 0,
+        className: `h-control ${fieldClasses} ${readOnlyClasses}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onLookup,
+        disabled,
+        "aria-label": lookupLabel,
+        title: lookupLabel,
+        className: "flex h-control w-control flex-none cursor-pointer items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground transition-colors duration-150 hover:border-primary/25 hover:bg-primary/5 hover:text-primary focus-visible:border-primary/40 focus-visible:ring-3 focus-visible:ring-primary/10 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border disabled:hover:bg-muted disabled:hover:text-muted-foreground",
+        children: /* @__PURE__ */ jsx(SearchIcon, { size: 14 })
+      }
+    )
+  ] });
+}
+export {
+  LookupInput as default
+};
+//# sourceMappingURL=LookupInput.js.map

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

@@ -0,0 +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 * 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/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,253 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import { useEditor, Extension, useEditorState, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import { useField } from "../field.js";
+import { richTextContentClasses, isRichText, textToRichText, richTextIsEmpty } from "../../display/RichText/utils.js";
+import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListBulletIcon, ListNumberedIcon, QuoteIcon, ImageIcon, MinimizeIcon, MaximizeIcon } from "../../../foundations/icons/icons.js";
+const DEFAULT_LABELS = {
+  bold: "Negrito (Ctrl+B)",
+  italic: "Itálico (Ctrl+I)",
+  underline: "Sublinhado (Ctrl+U)",
+  strike: "Riscado",
+  bulletList: "Lista com marcas",
+  orderedList: "Lista numerada",
+  quote: "Citação",
+  image: "Inserir imagem",
+  maximize: "Maximizar",
+  restore: "Restaurar"
+};
+function imageFiles(data) {
+  return Array.from(data?.files ?? []).filter((f) => f.type.startsWith("image/"));
+}
+function editorValue(editor) {
+  const html = editor.getHTML();
+  return richTextIsEmpty(html) ? "" : html;
+}
+function ToolbarButton({ label, active, disabled, onClick, children }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      "aria-pressed": active === void 0 ? void 0 : active,
+      disabled,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick,
+      className: "inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 " + (active ? "bg-primary/10 text-primary dark:bg-slate-700 dark:text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground dark:hover:bg-slate-800"),
+      children
+    }
+  );
+}
+const Separator = () => /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-1 h-4 w-px bg-border" });
+function RichTextEditor({
+  value,
+  onChange,
+  placeholder,
+  invalid,
+  disabled,
+  minHeight = 80,
+  maxHeight,
+  onUploadImage,
+  maximizable,
+  onSubmit,
+  submitOnEnter,
+  autoFocus,
+  "aria-label": ariaLabel,
+  id,
+  className = "",
+  labels: labelsProp
+}) {
+  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const field = useField();
+  const fileInputRef = useRef(null);
+  const [maximized, setMaximized] = useState(false);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const uploadRef = useRef(onUploadImage);
+  uploadRef.current = onUploadImage;
+  const submitRef = useRef({ onSubmit, submitOnEnter });
+  submitRef.current = { onSubmit, submitOnEnter };
+  const emitted = useRef(null);
+  const editorRef = useRef(null);
+  const insertImages = useCallback(async (files) => {
+    for (const file of files) {
+      try {
+        const src = await uploadRef.current(file);
+        editorRef.current?.chain().focus().setImage({ src }).run();
+      } catch {
+      }
+    }
+  }, []);
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: false,
+        horizontalRule: false,
+        link: { openOnClick: false, autolink: true, defaultProtocol: "https" }
+      }),
+      Image.configure({ inline: false, allowBase64: true }),
+      Extension.create({
+        name: "submitShortcut",
+        addKeyboardShortcuts() {
+          const submit = () => {
+            const { onSubmit: send } = submitRef.current;
+            if (!send) return false;
+            send();
+            return true;
+          };
+          return {
+            "Mod-Enter": submit,
+            Enter: ({ editor: ed }) => {
+              if (!submitRef.current.submitOnEnter) return false;
+              if (ed.isActive("bulletList") || ed.isActive("orderedList")) return false;
+              return submit();
+            }
+          };
+        }
+      })
+    ],
+    content: isRichText(value) ? value : textToRichText(value),
+    editable: !disabled,
+    autofocus: autoFocus ? "end" : false,
+    onUpdate: ({ editor: ed }) => {
+      const html = editorValue(ed);
+      emitted.current = html;
+      onChangeRef.current(html);
+    },
+    editorProps: {
+      attributes: {
+        class: `px-2.5 py-2 text-control leading-normal text-foreground outline-none ${richTextContentClasses}`,
+        role: "textbox",
+        "aria-multiline": "true"
+      },
+      // Colar/largar imagens só onde há sítio para as guardar.
+      handlePaste: (_view, event) => {
+        if (!uploadRef.current) return false;
+        const files = imageFiles(event.clipboardData);
+        if (!files.length) return false;
+        event.preventDefault();
+        event.stopPropagation();
+        void insertImages(files);
+        return true;
+      },
+      handleDrop: (_view, event) => {
+        if (!uploadRef.current) return false;
+        const files = imageFiles(event.dataTransfer);
+        if (!files.length) return false;
+        event.preventDefault();
+        event.stopPropagation();
+        void insertImages(files);
+        return true;
+      }
+    }
+  });
+  editorRef.current = editor;
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: ed }) => ed ? {
+      empty: ed.isEmpty,
+      bold: ed.isActive("bold"),
+      italic: ed.isActive("italic"),
+      underline: ed.isActive("underline"),
+      strike: ed.isActive("strike"),
+      bulletList: ed.isActive("bulletList"),
+      orderedList: ed.isActive("orderedList"),
+      quote: ed.isActive("blockquote")
+    } : null
+  });
+  useEffect(() => {
+    if (!editor || value === emitted.current) return;
+    if (!value && editor.isEmpty) return;
+    editor.commands.setContent(isRichText(value) ? value : textToRichText(value), { emitUpdate: false });
+    emitted.current = value;
+  }, [value, editor]);
+  useEffect(() => {
+    editor?.setEditable(!disabled);
+  }, [editor, disabled]);
+  useEffect(() => {
+    if (!editor) return;
+    const el = editor.view.dom;
+    const set = (name, v) => v ? el.setAttribute(name, v) : el.removeAttribute(name);
+    set("id", id ?? field.id);
+    set("aria-label", ariaLabel);
+    set("aria-invalid", invalid ? "true" : void 0);
+    set("aria-required", field.required ? "true" : void 0);
+    set("aria-disabled", disabled ? "true" : void 0);
+  }, [editor, id, field.id, field.required, ariaLabel, invalid, disabled]);
+  useEffect(() => {
+    if (!maximized) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        setMaximized(false);
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [maximized]);
+  if (!editor || !state) return null;
+  const run = (fn) => () => fn(editor.chain().focus()).run();
+  const writeArea = maximized ? {} : { minHeight, maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    maximized && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[60] bg-black/40 backdrop-blur-sm", onClick: () => setMaximized(false) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "overflow-clip rounded-lg border bg-card transition-[border-color,box-shadow] duration-150 dark:bg-slate-900 " + (invalid ? "border-destructive ring-3 ring-destructive/15 " : "border-border focus-within:border-primary/40 focus-within:ring-3 focus-within:ring-primary/10 dark:border-slate-600 ") + (disabled ? "bg-muted opacity-70 " : "") + (maximized ? "fixed inset-4 z-[61] flex flex-col shadow-2xl md:inset-10 " : "w-full min-w-0 ") + className,
+        children: [
+          /* @__PURE__ */ jsxs("div", { role: "toolbar", "aria-label": "Formatação", className: "sticky top-0 z-10 flex flex-wrap items-center gap-0.5 border-b border-border bg-muted/40 px-1.5 py-1 dark:border-slate-700 dark:bg-slate-800/60", children: [
+            /* @__PURE__ */ jsx(ToolbarButton, { label: labels.bold, active: state.bold, disabled, onClick: run((c) => c.toggleBold()), children: /* @__PURE__ */ jsx(BoldIcon, { size: 14 }) }),
+            /* @__PURE__ */ jsx(ToolbarButton, { label: labels.italic, active: state.italic, disabled, onClick: run((c) => c.toggleItalic()), children: /* @__PURE__ */ jsx(ItalicIcon, { size: 14 }) }),
+            /* @__PURE__ */ jsx(ToolbarButton, { label: labels.underline, active: state.underline, disabled, onClick: run((c) => c.toggleUnderline()), children: /* @__PURE__ */ jsx(UnderlineIcon, { size: 14 }) }),
+            /* @__PURE__ */ jsx(ToolbarButton, { label: labels.strike, active: state.strike, disabled, onClick: run((c) => c.toggleStrike()), children: /* @__PURE__ */ jsx(StrikethroughIcon, { size: 14 }) }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsx(ToolbarButton, { label: labels.bulletList, active: state.bulletList, disabled, onClick: run((c) => c.toggleBulletList()), children: /* @__PURE__ */ jsx(ListBulletIcon, { size: 14 }) }),
+            /* @__PURE__ */ jsx(ToolbarButton, { label: labels.orderedList, active: state.orderedList, disabled, onClick: run((c) => c.toggleOrderedList()), children: /* @__PURE__ */ jsx(ListNumberedIcon, { size: 14 }) }),
+            /* @__PURE__ */ jsx(ToolbarButton, { label: labels.quote, active: state.quote, disabled, onClick: run((c) => c.toggleBlockquote()), children: /* @__PURE__ */ jsx(QuoteIcon, { size: 14 }) }),
+            onUploadImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Separator, {}),
+              /* @__PURE__ */ jsx(ToolbarButton, { label: labels.image, disabled, onClick: () => fileInputRef.current?.click(), children: /* @__PURE__ */ jsx(ImageIcon, { size: 14 }) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  accept: "image/*",
+                  multiple: true,
+                  hidden: true,
+                  onChange: (e) => {
+                    const files = Array.from(e.target.files ?? []);
+                    e.target.value = "";
+                    void insertImages(files);
+                  }
+                }
+              )
+            ] }),
+            maximizable && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(ToolbarButton, { label: maximized ? labels.restore : labels.maximize, onClick: () => setMaximized((m) => !m), children: maximized ? /* @__PURE__ */ jsx(MinimizeIcon, { size: 14 }) : /* @__PURE__ */ jsx(MaximizeIcon, { size: 14 }) }) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `relative cursor-text ${maximized ? "flex-1 overflow-y-auto" : "overflow-y-auto"} [&>div]:h-full [&_.ProseMirror]:min-h-full`,
+              style: writeArea,
+              onClick: () => !disabled && !editor.isFocused && editor.chain().focus().run(),
+              children: [
+                state.empty && placeholder && /* @__PURE__ */ jsx("p", { "aria-hidden": true, className: "pointer-events-none absolute top-2 left-2.5 m-0 text-control text-muted-foreground/70 select-none", children: placeholder }),
+                /* @__PURE__ */ jsx(EditorContent, { editor, className: "h-full" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  RichTextEditor,
+  RichTextEditor as default
+};
+//# sourceMappingURL=RichTextEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.js","sources":["../../../../../../src/v1/primitives/forms/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react'\r\nimport { EditorContent, Extension, useEditor, useEditorState, type Editor } from '@tiptap/react'\r\nimport StarterKit from '@tiptap/starter-kit'\r\nimport Image from '@tiptap/extension-image'\r\nimport { useField } from '../field'\r\nimport { isRichText, richTextContentClasses, richTextIsEmpty, textToRichText } from '../../display/RichText/utils'\r\nimport {\r\n  BoldIcon,\r\n  ItalicIcon,\r\n  UnderlineIcon,\r\n  StrikethroughIcon,\r\n  ListBulletIcon,\r\n  ListNumberedIcon,\r\n  QuoteIcon,\r\n  ImageIcon,\r\n  MaximizeIcon,\r\n  MinimizeIcon,\r\n} from '../../../foundations/icons/icons'\r\n\r\nexport interface RichTextEditorLabels {\r\n  bold: string\r\n  italic: string\r\n  underline: string\r\n  strike: string\r\n  bulletList: string\r\n  orderedList: string\r\n  quote: string\r\n  image: string\r\n  maximize: string\r\n  restore: string\r\n}\r\n\r\nconst DEFAULT_LABELS: RichTextEditorLabels = {\r\n  bold: 'Negrito (Ctrl+B)',\r\n  italic: 'Itálico (Ctrl+I)',\r\n  underline: 'Sublinhado (Ctrl+U)',\r\n  strike: 'Riscado',\r\n  bulletList: 'Lista com marcas',\r\n  orderedList: 'Lista numerada',\r\n  quote: 'Citação',\r\n  image: 'Inserir imagem',\r\n  maximize: 'Maximizar',\r\n  restore: 'Restaurar',\r\n}\r\n\r\nexport interface RichTextEditorProps {\r\n  /** O texto, em HTML. Texto simples (antigo, sem formatação) também serve: cada linha vira um parágrafo. */\r\n  value: string\r\n  /** Recebe o HTML a cada alteração; `''` quando fica vazio (para validar \"obrigatório\" sem olhar para `<p></p>`). */\r\n  onChange: (html: string) => void\r\n  placeholder?: string\r\n  /** Marca o campo a vermelho (ex: obrigatório por preencher ao submeter). */\r\n  invalid?: boolean\r\n  disabled?: boolean\r\n  /** Altura mínima da área de escrita, em px. Por omissão 80. */\r\n  minHeight?: number\r\n  /** Altura máxima (px ou CSS, ex: `'50vh'`): cresce com o texto até aqui e depois faz scroll por dentro. Sem isto, cresce sempre. */\r\n  maxHeight?: number | string\r\n  /**\r\n   * Onde guardar uma imagem (escolhida na barra, colada ou largada); devolve o `src` a pôr no texto.\r\n   * Sem isto, o editor não aceita imagens.\r\n   */\r\n  onUploadImage?: (file: File) => Promise<string>\r\n  /** Mostra na barra o botão para escrever com o editor em ecrã quase inteiro (Esc volta). */\r\n  maximizable?: boolean\r\n  /**\r\n   * Enviar com o teclado (ex: uma conversa): Ctrl+Enter chama-o sempre. Com `submitOnEnter`,\r\n   * também o Enter — exceto dentro de uma lista, onde o Enter cria o item seguinte. Shift+Enter muda de linha.\r\n   */\r\n  onSubmit?: () => void\r\n  submitOnEnter?: boolean\r\n  autoFocus?: boolean\r\n  /** Nome acessível, quando não há etiqueta à volta (ex: \"Escrever comentário\"). */\r\n  'aria-label'?: string\r\n  id?: string\r\n  /** Aplica-se à caixa à volta. */\r\n  className?: string\r\n  /** Textos da barra (para outra língua). */\r\n  labels?: Partial<RichTextEditorLabels>\r\n}\r\n\r\nfunction imageFiles(data: DataTransfer | null): File[] {\r\n  return Array.from(data?.files ?? []).filter((f) => f.type.startsWith('image/'))\r\n}\r\n\r\n/** O HTML que o editor tem, ou `''` se estiver vazio. */\r\nfunction editorValue(editor: Editor): string {\r\n  const html = editor.getHTML()\r\n  return richTextIsEmpty(html) ? '' : html\r\n}\r\n\r\nfunction ToolbarButton({ label, active, disabled, onClick, children }: {\r\n  label: string\r\n  active?: boolean\r\n  disabled?: boolean\r\n  onClick: () => void\r\n  children: React.ReactNode\r\n}) {\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      aria-label={label}\r\n      title={label}\r\n      aria-pressed={active === undefined ? undefined : active}\r\n      disabled={disabled}\r\n      // Não tira o foco ao editor: a formatação aplica-se ao que está selecionado.\r\n      onMouseDown={(e) => e.preventDefault()}\r\n      onClick={onClick}\r\n      className={\r\n        'inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition-colors duration-150 ' +\r\n        'focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ' +\r\n        (active\r\n          ? 'bg-primary/10 text-primary dark:bg-slate-700 dark:text-foreground'\r\n          : 'text-muted-foreground hover:bg-muted hover:text-foreground dark:hover:bg-slate-800')\r\n      }\r\n    >\r\n      {children}\r\n    </button>\r\n  )\r\n}\r\n\r\nconst Separator = () => <span aria-hidden className=\"mx-1 h-4 w-px bg-border\" />\r\n\r\n/**\r\n * Texto com formatação, que se vê enquanto se escreve: negrito, itálico, sublinhado, riscado,\r\n * listas, citações e (com `onUploadImage`) imagens. Atalhos habituais: Ctrl+B, Ctrl+I, Ctrl+U;\r\n * \"- \" ou \"1. \" no início da linha começam uma lista.\r\n *\r\n * Guarda HTML. Para o mostrar, usar sempre o [RichText](?path=/docs/v1-primitives-display-richtext--docs),\r\n * que o limpa antes de entrar na página. Para validar \"obrigatório\", o `onChange` dá `''` quando está vazio\r\n * (ou `richTextIsEmpty`).\r\n *\r\n * Para uma conversa: `onSubmit` + `submitOnEnter` (Enter envia, Shift+Enter muda de linha) e `maxHeight`\r\n * para crescer com o texto até um limite.\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica com o `id` do campo.\r\n */\r\nexport function RichTextEditor({\r\n  value,\r\n  onChange,\r\n  placeholder,\r\n  invalid,\r\n  disabled,\r\n  minHeight = 80,\r\n  maxHeight,\r\n  onUploadImage,\r\n  maximizable,\r\n  onSubmit,\r\n  submitOnEnter,\r\n  autoFocus,\r\n  'aria-label': ariaLabel,\r\n  id,\r\n  className = '',\r\n  labels: labelsProp,\r\n}: RichTextEditorProps) {\r\n  const labels = { ...DEFAULT_LABELS, ...labelsProp }\r\n  const field = useField()\r\n  const fileInputRef = useRef<HTMLInputElement>(null)\r\n  const [maximized, setMaximized] = useState(false)\r\n\r\n  // Em refs: o editor é criado uma vez e os handlers do ProseMirror ficariam presos à primeira versão das props.\r\n  const onChangeRef = useRef(onChange)\r\n  onChangeRef.current = onChange\r\n  const uploadRef = useRef(onUploadImage)\r\n  uploadRef.current = onUploadImage\r\n  const submitRef = useRef({ onSubmit, submitOnEnter })\r\n  submitRef.current = { onSubmit, submitOnEnter }\r\n  // O último valor que o editor deu: um `value` igual vem dele e não volta a ser posto lá dentro.\r\n  const emitted = useRef<string | null>(null)\r\n  const editorRef = useRef<Editor | null>(null)\r\n\r\n  const insertImages = useCallback(async (files: File[]) => {\r\n    for (const file of files) {\r\n      try {\r\n        const src = await uploadRef.current!(file)\r\n        editorRef.current?.chain().focus().setImage({ src }).run()\r\n      } catch {\r\n        // Falhar a subir uma imagem não leva o texto já escrito; quem chama mostra o erro pelo seu lado.\r\n      }\r\n    }\r\n  }, [])\r\n\r\n  const editor = useEditor({\r\n    extensions: [\r\n      StarterKit.configure({\r\n        heading: false,\r\n        codeBlock: false,\r\n        horizontalRule: false,\r\n        link: { openOnClick: false, autolink: true, defaultProtocol: 'https' },\r\n      }),\r\n      Image.configure({ inline: false, allowBase64: true }),\r\n      Extension.create({\r\n        name: 'submitShortcut',\r\n        addKeyboardShortcuts() {\r\n          const submit = () => {\r\n            const { onSubmit: send } = submitRef.current\r\n            if (!send) return false\r\n            send()\r\n            return true\r\n          }\r\n          return {\r\n            'Mod-Enter': submit,\r\n            Enter: ({ editor: ed }) => {\r\n              if (!submitRef.current.submitOnEnter) return false\r\n              if (ed.isActive('bulletList') || ed.isActive('orderedList')) return false\r\n              return submit()\r\n            },\r\n          }\r\n        },\r\n      }),\r\n    ],\r\n    content: isRichText(value) ? value : textToRichText(value),\r\n    editable: !disabled,\r\n    autofocus: autoFocus ? 'end' : false,\r\n    onUpdate: ({ editor: ed }) => {\r\n      const html = editorValue(ed)\r\n      emitted.current = html\r\n      onChangeRef.current(html)\r\n    },\r\n    editorProps: {\r\n      attributes: {\r\n        class: `px-2.5 py-2 text-control leading-normal text-foreground outline-none ${richTextContentClasses}`,\r\n        role: 'textbox',\r\n        'aria-multiline': 'true',\r\n      },\r\n      // Colar/largar imagens só onde há sítio para as guardar.\r\n      handlePaste: (_view, event) => {\r\n        if (!uploadRef.current) return false\r\n        const files = imageFiles(event.clipboardData)\r\n        if (!files.length) return false\r\n        event.preventDefault()\r\n        event.stopPropagation()\r\n        void insertImages(files)\r\n        return true\r\n      },\r\n      handleDrop: (_view, event) => {\r\n        if (!uploadRef.current) return false\r\n        const files = imageFiles((event as DragEvent).dataTransfer)\r\n        if (!files.length) return false\r\n        event.preventDefault()\r\n        event.stopPropagation()\r\n        void insertImages(files)\r\n        return true\r\n      },\r\n    },\r\n  })\r\n  editorRef.current = editor\r\n\r\n  // A barra só volta a desenhar quando muda o que mostra (o editor não redesenha a cada tecla).\r\n  const state = useEditorState({\r\n    editor,\r\n    selector: ({ editor: ed }) =>\r\n      ed\r\n        ? {\r\n            empty: ed.isEmpty,\r\n            bold: ed.isActive('bold'),\r\n            italic: ed.isActive('italic'),\r\n            underline: ed.isActive('underline'),\r\n            strike: ed.isActive('strike'),\r\n            bulletList: ed.isActive('bulletList'),\r\n            orderedList: ed.isActive('orderedList'),\r\n            quote: ed.isActive('blockquote'),\r\n          }\r\n        : null,\r\n  })\r\n\r\n  // Valor mudado por fora (ex: limpar depois de enviar, abrir outro registo).\r\n  useEffect(() => {\r\n    if (!editor || value === emitted.current) return\r\n    if (!value && editor.isEmpty) return\r\n    editor.commands.setContent(isRichText(value) ? value : textToRichText(value), { emitUpdate: false })\r\n    emitted.current = value\r\n  }, [value, editor])\r\n\r\n  useEffect(() => {\r\n    editor?.setEditable(!disabled)\r\n  }, [editor, disabled])\r\n\r\n  // Atributos que dependem das props, no próprio campo editável.\r\n  useEffect(() => {\r\n    if (!editor) return\r\n    const el = editor.view.dom as HTMLElement\r\n    const set = (name: string, v: string | undefined) => (v ? el.setAttribute(name, v) : el.removeAttribute(name))\r\n    set('id', id ?? field.id)\r\n    set('aria-label', ariaLabel)\r\n    set('aria-invalid', invalid ? 'true' : undefined)\r\n    set('aria-required', field.required ? 'true' : undefined)\r\n    set('aria-disabled', disabled ? 'true' : undefined)\r\n  }, [editor, id, field.id, field.required, ariaLabel, invalid, disabled])\r\n\r\n  // Esc sai do modo maximizado (e só isso — não fecha a janela à volta).\r\n  useEffect(() => {\r\n    if (!maximized) return\r\n    const onKey = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') {\r\n        e.stopPropagation()\r\n        setMaximized(false)\r\n      }\r\n    }\r\n    window.addEventListener('keydown', onKey, true)\r\n    return () => window.removeEventListener('keydown', onKey, true)\r\n  }, [maximized])\r\n\r\n  if (!editor || !state) return null\r\n\r\n  const run = (fn: (chain: ReturnType<Editor['chain']>) => ReturnType<Editor['chain']>) => () => fn(editor.chain().focus()).run()\r\n  const writeArea: React.CSSProperties = maximized\r\n    ? {}\r\n    : { minHeight, maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }\r\n\r\n  return (\r\n    <>\r\n      {maximized && <div className=\"fixed inset-0 z-[60] bg-black/40 backdrop-blur-sm\" onClick={() => setMaximized(false)} />}\r\n      {/* overflow-clip e não overflow-hidden: o hidden faria disto um contentor de scroll e a barra deixava de ficar presa. */}\r\n      <div\r\n        className={\r\n          'overflow-clip rounded-lg border bg-card transition-[border-color,box-shadow] duration-150 dark:bg-slate-900 ' +\r\n          (invalid\r\n            ? 'border-destructive ring-3 ring-destructive/15 '\r\n            : 'border-border focus-within:border-primary/40 focus-within:ring-3 focus-within:ring-primary/10 dark:border-slate-600 ') +\r\n          (disabled ? 'bg-muted opacity-70 ' : '') +\r\n          (maximized ? 'fixed inset-4 z-[61] flex flex-col shadow-2xl md:inset-10 ' : 'w-full min-w-0 ') +\r\n          className\r\n        }\r\n      >\r\n        <div role=\"toolbar\" aria-label=\"Formatação\" className=\"sticky top-0 z-10 flex flex-wrap items-center gap-0.5 border-b border-border bg-muted/40 px-1.5 py-1 dark:border-slate-700 dark:bg-slate-800/60\">\r\n          <ToolbarButton label={labels.bold} active={state.bold} disabled={disabled} onClick={run((c) => c.toggleBold())}>\r\n            <BoldIcon size={14} />\r\n          </ToolbarButton>\r\n          <ToolbarButton label={labels.italic} active={state.italic} disabled={disabled} onClick={run((c) => c.toggleItalic())}>\r\n            <ItalicIcon size={14} />\r\n          </ToolbarButton>\r\n          <ToolbarButton label={labels.underline} active={state.underline} disabled={disabled} onClick={run((c) => c.toggleUnderline())}>\r\n            <UnderlineIcon size={14} />\r\n          </ToolbarButton>\r\n          <ToolbarButton label={labels.strike} active={state.strike} disabled={disabled} onClick={run((c) => c.toggleStrike())}>\r\n            <StrikethroughIcon size={14} />\r\n          </ToolbarButton>\r\n          <Separator />\r\n          <ToolbarButton label={labels.bulletList} active={state.bulletList} disabled={disabled} onClick={run((c) => c.toggleBulletList())}>\r\n            <ListBulletIcon size={14} />\r\n          </ToolbarButton>\r\n          <ToolbarButton label={labels.orderedList} active={state.orderedList} disabled={disabled} onClick={run((c) => c.toggleOrderedList())}>\r\n            <ListNumberedIcon size={14} />\r\n          </ToolbarButton>\r\n          <ToolbarButton label={labels.quote} active={state.quote} disabled={disabled} onClick={run((c) => c.toggleBlockquote())}>\r\n            <QuoteIcon size={14} />\r\n          </ToolbarButton>\r\n          {onUploadImage && (\r\n            <>\r\n              <Separator />\r\n              <ToolbarButton label={labels.image} disabled={disabled} onClick={() => fileInputRef.current?.click()}>\r\n                <ImageIcon size={14} />\r\n              </ToolbarButton>\r\n              <input\r\n                ref={fileInputRef}\r\n                type=\"file\"\r\n                accept=\"image/*\"\r\n                multiple\r\n                hidden\r\n                onChange={(e) => {\r\n                  const files = Array.from(e.target.files ?? [])\r\n                  e.target.value = ''\r\n                  void insertImages(files)\r\n                }}\r\n              />\r\n            </>\r\n          )}\r\n          {maximizable && (\r\n            <span className=\"ml-auto\">\r\n              <ToolbarButton label={maximized ? labels.restore : labels.maximize} onClick={() => setMaximized((m) => !m)}>\r\n                {maximized ? <MinimizeIcon size={14} /> : <MaximizeIcon size={14} />}\r\n              </ToolbarButton>\r\n            </span>\r\n          )}\r\n        </div>\r\n        {/* A área de escrita: clicar em qualquer ponto dela põe o cursor no editor. */}\r\n        <div\r\n          className={`relative cursor-text ${maximized ? 'flex-1 overflow-y-auto' : 'overflow-y-auto'} [&>div]:h-full [&_.ProseMirror]:min-h-full`}\r\n          style={writeArea}\r\n          onClick={() => !disabled && !editor.isFocused && editor.chain().focus().run()}\r\n        >\r\n          {state.empty && placeholder && (\r\n            <p aria-hidden className=\"pointer-events-none absolute top-2 left-2.5 m-0 text-control text-muted-foreground/70 select-none\">\r\n              {placeholder}\r\n            </p>\r\n          )}\r\n          <EditorContent editor={editor} className=\"h-full\" />\r\n        </div>\r\n      </div>\r\n    </>\r\n  )\r\n}\r\n\r\nexport default RichTextEditor\r\n"],"names":[],"mappings":";;;;;;;;AAgCA,MAAM,iBAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AACX;AAsCA,SAAS,WAAW,MAAmC;AACrD,SAAO,MAAM,KAAK,MAAM,SAAS,CAAA,CAAE,EAAE,OAAO,CAAC,MAAM,EAAE,KAAK,WAAW,QAAQ,CAAC;AAChF;AAGA,SAAS,YAAY,QAAwB;AAC3C,QAAM,OAAO,OAAO,QAAA;AACpB,SAAO,gBAAgB,IAAI,IAAI,KAAK;AACtC;AAEA,SAAS,cAAc,EAAE,OAAO,QAAQ,UAAU,SAAS,YAMxD;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,gBAAc,WAAW,SAAY,SAAY;AAAA,MACjD;AAAA,MAEA,aAAa,CAAC,MAAM,EAAE,eAAA;AAAA,MACtB;AAAA,MACA,WACE,6OAEC,SACG,sEACA;AAAA,MAGL;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,YAAY,MAAM,oBAAC,UAAK,eAAW,MAAC,WAAU,2BAA0B;AAgBvE,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AACV,GAAwB;AACtB,QAAM,SAAS,EAAE,GAAG,gBAAgB,GAAG,WAAA;AACvC,QAAM,QAAQ,SAAA;AACd,QAAM,eAAe,OAAyB,IAAI;AAClD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAGhD,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AACtB,QAAM,YAAY,OAAO,aAAa;AACtC,YAAU,UAAU;AACpB,QAAM,YAAY,OAAO,EAAE,UAAU,eAAe;AACpD,YAAU,UAAU,EAAE,UAAU,cAAA;AAEhC,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,YAAY,OAAsB,IAAI;AAE5C,QAAM,eAAe,YAAY,OAAO,UAAkB;AACxD,eAAW,QAAQ,OAAO;AACxB,UAAI;AACF,cAAM,MAAM,MAAM,UAAU,QAAS,IAAI;AACzC,kBAAU,SAAS,MAAA,EAAQ,MAAA,EAAQ,SAAS,EAAE,KAAK,EAAE,IAAA;AAAA,MACvD,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS,UAAU;AAAA,IACvB,YAAY;AAAA,MACV,WAAW,UAAU;AAAA,QACnB,SAAS;AAAA,QACT,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,MAAM,EAAE,aAAa,OAAO,UAAU,MAAM,iBAAiB,QAAA;AAAA,MAAQ,CACtE;AAAA,MACD,MAAM,UAAU,EAAE,QAAQ,OAAO,aAAa,MAAM;AAAA,MACpD,UAAU,OAAO;AAAA,QACf,MAAM;AAAA,QACN,uBAAuB;AACrB,gBAAM,SAAS,MAAM;AACnB,kBAAM,EAAE,UAAU,KAAA,IAAS,UAAU;AACrC,gBAAI,CAAC,KAAM,QAAO;AAClB,iBAAA;AACA,mBAAO;AAAA,UACT;AACA,iBAAO;AAAA,YACL,aAAa;AAAA,YACb,OAAO,CAAC,EAAE,QAAQ,SAAS;AACzB,kBAAI,CAAC,UAAU,QAAQ,cAAe,QAAO;AAC7C,kBAAI,GAAG,SAAS,YAAY,KAAK,GAAG,SAAS,aAAa,EAAG,QAAO;AACpE,qBAAO,OAAA;AAAA,YACT;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,IAEH,SAAS,WAAW,KAAK,IAAI,QAAQ,eAAe,KAAK;AAAA,IACzD,UAAU,CAAC;AAAA,IACX,WAAW,YAAY,QAAQ;AAAA,IAC/B,UAAU,CAAC,EAAE,QAAQ,SAAS;AAC5B,YAAM,OAAO,YAAY,EAAE;AAC3B,cAAQ,UAAU;AAClB,kBAAY,QAAQ,IAAI;AAAA,IAC1B;AAAA,IACA,aAAa;AAAA,MACX,YAAY;AAAA,QACV,OAAO,wEAAwE,sBAAsB;AAAA,QACrG,MAAM;AAAA,QACN,kBAAkB;AAAA,MAAA;AAAA;AAAA,MAGpB,aAAa,CAAC,OAAO,UAAU;AAC7B,YAAI,CAAC,UAAU,QAAS,QAAO;AAC/B,cAAM,QAAQ,WAAW,MAAM,aAAa;AAC5C,YAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,aAAK,aAAa,KAAK;AACvB,eAAO;AAAA,MACT;AAAA,MACA,YAAY,CAAC,OAAO,UAAU;AAC5B,YAAI,CAAC,UAAU,QAAS,QAAO;AAC/B,cAAM,QAAQ,WAAY,MAAoB,YAAY;AAC1D,YAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,aAAK,aAAa,KAAK;AACvB,eAAO;AAAA,MACT;AAAA,IAAA;AAAA,EACF,CACD;AACD,YAAU,UAAU;AAGpB,QAAM,QAAQ,eAAe;AAAA,IAC3B;AAAA,IACA,UAAU,CAAC,EAAE,QAAQ,GAAA,MACnB,KACI;AAAA,MACE,OAAO,GAAG;AAAA,MACV,MAAM,GAAG,SAAS,MAAM;AAAA,MACxB,QAAQ,GAAG,SAAS,QAAQ;AAAA,MAC5B,WAAW,GAAG,SAAS,WAAW;AAAA,MAClC,QAAQ,GAAG,SAAS,QAAQ;AAAA,MAC5B,YAAY,GAAG,SAAS,YAAY;AAAA,MACpC,aAAa,GAAG,SAAS,aAAa;AAAA,MACtC,OAAO,GAAG,SAAS,YAAY;AAAA,IAAA,IAEjC;AAAA,EAAA,CACP;AAGD,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,UAAU,QAAQ,QAAS;AAC1C,QAAI,CAAC,SAAS,OAAO,QAAS;AAC9B,WAAO,SAAS,WAAW,WAAW,KAAK,IAAI,QAAQ,eAAe,KAAK,GAAG,EAAE,YAAY,MAAA,CAAO;AACnG,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,YAAU,MAAM;AACd,YAAQ,YAAY,CAAC,QAAQ;AAAA,EAC/B,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAGrB,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,KAAK,OAAO,KAAK;AACvB,UAAM,MAAM,CAAC,MAAc,MAA2B,IAAI,GAAG,aAAa,MAAM,CAAC,IAAI,GAAG,gBAAgB,IAAI;AAC5G,QAAI,MAAM,MAAM,MAAM,EAAE;AACxB,QAAI,cAAc,SAAS;AAC3B,QAAI,gBAAgB,UAAU,SAAS,MAAS;AAChD,QAAI,iBAAiB,MAAM,WAAW,SAAS,MAAS;AACxD,QAAI,iBAAiB,WAAW,SAAS,MAAS;AAAA,EACpD,GAAG,CAAC,QAAQ,IAAI,MAAM,IAAI,MAAM,UAAU,WAAW,SAAS,QAAQ,CAAC;AAGvE,YAAU,MAAM;AACd,QAAI,CAAC,UAAW;AAChB,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,gBAAA;AACF,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,OAAO,IAAI;AAC9C,WAAO,MAAM,OAAO,oBAAoB,WAAW,OAAO,IAAI;AAAA,EAChE,GAAG,CAAC,SAAS,CAAC;AAEd,MAAI,CAAC,UAAU,CAAC,MAAO,QAAO;AAE9B,QAAM,MAAM,CAAC,OAA4E,MAAM,GAAG,OAAO,QAAQ,OAAO,EAAE,IAAA;AAC1H,QAAM,YAAiC,YACnC,KACA,EAAE,WAAW,WAAW,OAAO,cAAc,WAAW,GAAG,SAAS,OAAO,UAAA;AAE/E,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,aAAa,oBAAC,SAAI,WAAU,qDAAoD,SAAS,MAAM,aAAa,KAAK,GAAG;AAAA,IAErH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WACE,kHACC,UACG,mDACA,2HACH,WAAW,yBAAyB,OACpC,YAAY,+DAA+D,qBAC5E;AAAA,QAGF,UAAA;AAAA,UAAA,qBAAC,SAAI,MAAK,WAAU,cAAW,cAAa,WAAU,mJACpD,UAAA;AAAA,YAAA,oBAAC,eAAA,EAAc,OAAO,OAAO,MAAM,QAAQ,MAAM,MAAM,UAAoB,SAAS,IAAI,CAAC,MAAM,EAAE,YAAY,GAC3G,8BAAC,UAAA,EAAS,MAAM,IAAI,EAAA,CACtB;AAAA,YACA,oBAAC,iBAAc,OAAO,OAAO,QAAQ,QAAQ,MAAM,QAAQ,UAAoB,SAAS,IAAI,CAAC,MAAM,EAAE,aAAA,CAAc,GACjH,UAAA,oBAAC,YAAA,EAAW,MAAM,GAAA,CAAI,EAAA,CACxB;AAAA,YACA,oBAAC,iBAAc,OAAO,OAAO,WAAW,QAAQ,MAAM,WAAW,UAAoB,SAAS,IAAI,CAAC,MAAM,EAAE,gBAAA,CAAiB,GAC1H,UAAA,oBAAC,eAAA,EAAc,MAAM,GAAA,CAAI,EAAA,CAC3B;AAAA,YACA,oBAAC,iBAAc,OAAO,OAAO,QAAQ,QAAQ,MAAM,QAAQ,UAAoB,SAAS,IAAI,CAAC,MAAM,EAAE,aAAA,CAAc,GACjH,UAAA,oBAAC,mBAAA,EAAkB,MAAM,GAAA,CAAI,EAAA,CAC/B;AAAA,gCACC,WAAA,EAAU;AAAA,YACX,oBAAC,iBAAc,OAAO,OAAO,YAAY,QAAQ,MAAM,YAAY,UAAoB,SAAS,IAAI,CAAC,MAAM,EAAE,iBAAA,CAAkB,GAC7H,UAAA,oBAAC,gBAAA,EAAe,MAAM,GAAA,CAAI,EAAA,CAC5B;AAAA,YACA,oBAAC,iBAAc,OAAO,OAAO,aAAa,QAAQ,MAAM,aAAa,UAAoB,SAAS,IAAI,CAAC,MAAM,EAAE,kBAAA,CAAmB,GAChI,UAAA,oBAAC,kBAAA,EAAiB,MAAM,GAAA,CAAI,EAAA,CAC9B;AAAA,YACA,oBAAC,iBAAc,OAAO,OAAO,OAAO,QAAQ,MAAM,OAAO,UAAoB,SAAS,IAAI,CAAC,MAAM,EAAE,iBAAA,CAAkB,GACnH,UAAA,oBAAC,WAAA,EAAU,MAAM,GAAA,CAAI,EAAA,CACvB;AAAA,YACC,iBACC,qBAAA,UAAA,EACE,UAAA;AAAA,cAAA,oBAAC,WAAA,EAAU;AAAA,kCACV,eAAA,EAAc,OAAO,OAAO,OAAO,UAAoB,SAAS,MAAM,aAAa,SAAS,SAC3F,UAAA,oBAAC,WAAA,EAAU,MAAM,IAAI,GACvB;AAAA,cACA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK;AAAA,kBACL,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,UAAQ;AAAA,kBACR,QAAM;AAAA,kBACN,UAAU,CAAC,MAAM;AACf,0BAAM,QAAQ,MAAM,KAAK,EAAE,OAAO,SAAS,EAAE;AAC7C,sBAAE,OAAO,QAAQ;AACjB,yBAAK,aAAa,KAAK;AAAA,kBACzB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF,GACF;AAAA,YAED,eACC,oBAAC,QAAA,EAAK,WAAU,WACd,UAAA,oBAAC,eAAA,EAAc,OAAO,YAAY,OAAO,UAAU,OAAO,UAAU,SAAS,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,GACtG,UAAA,gCAAa,cAAA,EAAa,MAAM,GAAA,CAAI,IAAK,oBAAC,cAAA,EAAa,MAAM,GAAA,CAAI,GACpE,EAAA,CACF;AAAA,UAAA,GAEJ;AAAA,UAEA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,wBAAwB,YAAY,2BAA2B,iBAAiB;AAAA,cAC3F,OAAO;AAAA,cACP,SAAS,MAAM,CAAC,YAAY,CAAC,OAAO,aAAa,OAAO,MAAA,EAAQ,MAAA,EAAQ,IAAA;AAAA,cAEvE,UAAA;AAAA,gBAAA,MAAM,SAAS,eACd,oBAAC,KAAA,EAAE,eAAW,MAAC,WAAU,qGACtB,UAAA,YAAA,CACH;AAAA,gBAEF,oBAAC,eAAA,EAAc,QAAgB,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACpD;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,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;"}