@nextelco/common-ui 2.1.97 → 2.1.99

package/dist/types/v1/capabilities/documents/QRScanning/scanQRCodes.d.ts

@@ -0,0 +1,25 @@
+export interface ScanQRCodesOptions {
+    /**
+     * Continuar a procurar até um código satisfazer esta condição (ex: ser o QR
+     * de uma fatura). Um documento pode ter vários QR codes e o primeiro a ser
+     * lido é arbitrário. Por omissão, pára no primeiro código encontrado.
+     */
+    until?: (code: string) => boolean;
+}
+/**
+ * Indica onde está o `zxing_reader.wasm` servido pela app. Chamar uma vez no
+ * arranque, antes da primeira leitura. Sem isto, o ficheiro é descarregado da
+ * CDN jsDelivr (pode ser bloqueado por redes ou políticas de segurança).
+ */
+export declare function configureQRScanner(options: {
+    wasmUrl: string;
+}): void;
+/**
+ * Lê os QR codes de uma imagem ou PDF (1.ª página).
+ *
+ * Devolve o texto de cada código encontrado, sem repetidos, pela ordem em que
+ * foram lidos; vazio se não houver nenhum ou se o ficheiro não se puder ler.
+ * Depois de encontrar o que procura, faz ainda uma passagem para recolher os
+ * outros códigos da página (ex: QR do banco ao lado do QR fiscal).
+ */
+export declare function scanQRCodes(file: File, options?: ScanQRCodesOptions): Promise<string[]>;

package/dist/types/v1/components/documents/DocumentDropzone/DocumentDropzone.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+export interface DocumentDropzoneLabels {
+    title: string;
+    hint?: string;
+    change: string;
+    remove: string;
+    /** Texto enquanto procura QR codes (só com `onQRCodes`), ex: "A procurar QR codes…". */
+    scanningQR?: string;
+    /**
+     * Mensagem quando um ficheiro não é permitido pelo `accept`, ex: "Formato não
+     * permitido. Aceita PDF, JPG ou PNG." Aparece logo ao arrastar e depois de largar.
+     */
+    rejected: string;
+}
+export interface DocumentDropzoneProps {
+    file: File | null;
+    onFileChange: (file: File | null) => void;
+    /**
+     * Tipos permitidos: extensões e/ou tipos MIME, separados por vírgulas, ex:
+     * ".pdf,.jpg,.jpeg,.png". Os restantes são recusados (ver `labels.rejected` e
+     * `onReject`). Sem `accept`, aceita qualquer ficheiro.
+     *
+     * - `image/*` inclui SVG (que pode conter código) e HEIC (sem pré-visualização
+     *   na maioria dos browsers). Para documentos, prefira uma lista explícita.
+     * - Só se verificam o nome e o tipo declarado, não o conteúdo: um ficheiro
+     *   renomeado passa. O servidor deve validar o que recebe.
+     */
+    accept?: string;
+    disabled?: boolean;
+    labels: DocumentDropzoneLabels;
+    /** Pré-visualização própria. Se devolver null/undefined, usa a de omissão (imagem, PDF ou ícone). */
+    renderPreview?: (file: File, url: string) => React.ReactNode;
+    /**
+     * Procura QR codes em cada ficheiro escolhido (imagem ou 1.ª página do PDF) e
+     * entrega o texto de todos os encontrados (vazio se nenhum). Sem esta prop não
+     * se procura nada. Usa a capacidade [QR Scanning](?path=/docs/v1-capabilities-documents-qr-scanning--docs).
+     */
+    onQRCodes?: (codes: string[], file: File) => void;
+    /** Chamado com os ficheiros recusados pelo `accept` (quando nenhum dos largados/escolhidos serve). */
+    onReject?: (files: File[]) => void;
+    /** Continuar a procurar até um QR code satisfazer isto (ex: ser o QR de uma fatura). Por omissão, pára no primeiro. */
+    qrCodeWanted?: (code: string) => boolean;
+    className?: string;
+}
+/**
+ * Se um ficheiro deste tipo é permitido, sabendo só o tipo (durante o arrastar).
+ * `null` quando não dá para saber (tipo desconhecido, ou extensão fora da tabela).
+ */
+export declare function acceptsType(type: string, accept?: string): boolean | null;
+export declare function accepts(file: File, accept?: string): boolean;
+/** Folhas de cálculo (Excel, CSV): pela extensão ou pelo tipo, que o browser às vezes não conhece. */
+export declare const isSpreadsheet: (file: File) => boolean;
+/**
+ * Caixa para anexar um ficheiro a um formulário: arrastar ou clicar para
+ * escolher. Mostra o nome, o tamanho e uma pré-visualização do ficheiro.
+ *
+ * **Usa:** [PdfPreview](?path=/docs/v1-primitives-documents-pdfpreview--docs) para mostrar PDFs; imagens com `<img>`.
+ * Com `onQRCodes`, a capacidade [QR Scanning](?path=/docs/v1-capabilities-documents-qr-scanning--docs).
+ */
+export default function DocumentDropzone({ file, onFileChange, accept, disabled, labels, renderPreview, onQRCodes, qrCodeWanted, onReject, className, }: DocumentDropzoneProps): React.JSX.Element;

package/dist/types/v1/components/forms/FormField/FormField.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+export interface FormFieldProps {
+    label: string;
+    /** Asterisco vermelho na etiqueta; o campo lá dentro fica `required`. */
+    required?: boolean;
+    /** Texto pequeno por baixo da etiqueta. */
+    hint?: string;
+    /**
+     * Marcas antes da etiqueta, a dizer de onde veio o valor (ex: lido do QR,
+     * identificado pela IA). Usar [FieldMark](#fieldmark).
+     */
+    marks?: React.ReactNode;
+    /**
+     * Lugares reservados para marcas, mesmo sem nenhuma. Assim a etiqueta não
+     * salta quando uma marca aparece depois (ex: ao ler o QR).
+     */
+    markSlots?: number;
+    /** Algo junto à etiqueta, depois das marcas (ex: o valor máximo permitido). */
+    aside?: React.ReactNode;
+    /** Depois do campo, na mesma linha (ex: cadeado, ícone de informação). */
+    end?: React.ReactNode;
+    /** Ocupa a linha toda (ex: observações, anexo). */
+    wide?: boolean;
+    /** Etiqueta alinhada ao topo em vez de ao meio (campos altos, como o TextArea). */
+    alignTop?: boolean;
+    /** O campo: TextInput, SelectInput, TextArea ou outro. */
+    children: React.ReactNode;
+}
+/**
+ * Uma linha do formulário: etiqueta e campo. Vai dentro de um
+ * [FormGrid](?path=/docs/v1-components-forms-formgrid--docs).
+ *
+ * Liga a etiqueta ao campo (clicar na etiqueta foca o campo) e passa-lhe o
+ * `required`, se o campo for TextInput, SelectInput ou TextArea.
+ */
+export default function FormField({ label, required, hint, marks, markSlots, aside, end, wide, alignTop, children }: FormFieldProps): React.JSX.Element;
+export interface FieldMarkProps {
+    /** De onde veio o valor (ex: "Lido do QR Code"). Mostrado ao passar o rato e lido pelos leitores de ecrã. */
+    title: string;
+    /** O ícone, a 11 px (ex: `<QrCodeIcon size={11} />`). */
+    icon: React.ReactNode;
+}
+/** Marca pequena antes da etiqueta de um FormField, a dizer de onde veio o valor. */
+export declare function FieldMark({ title, icon }: FieldMarkProps): React.JSX.Element;

package/dist/types/v1/components/forms/FormGrid/FormGrid.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface FormGridProps {
+    /** Campos por linha: 2 (etiqueta · campo · etiqueta · campo) ou 1. */
+    columns?: 1 | 2;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const useFormGrid: () => {
+    columns: 1 | 2;
+};
+/**
+ * Grelha de um formulário: etiquetas à esquerda, alinhadas à direita, e os
+ * campos ao lado. Os filhos são [FormField](?path=/docs/v1-components-forms-formfield--docs)
+ * e, entre grupos, `FormDivider`.
+ *
+ * Adapta-se à largura do sítio onde está (não à do ecrã): abaixo de 680 px as
+ * etiquetas estreitam; abaixo de 500 px cada etiqueta fica por cima do campo.
+ */
+export default function FormGrid({ columns, className, children }: FormGridProps): React.JSX.Element;
+/** Linha de separação entre grupos de campos, a toda a largura. */
+export declare function FormDivider(): React.JSX.Element;

package/dist/types/v1/components/overlays/Dialog/Dialog.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+/**
+ * O elemento da janela aberta, para usar como destino de `createPortal` (ex:
+ * avisos, confirmações, sobreposições). Com a janela aberta, tudo o que está
+ * fora dela fica por baixo e não responde; um portal para `document.body` fica
+ * escondido atrás. Fora de um Dialog devolve `null`.
+ *
+ * `createPortal(conteudo, useDialogContainer() ?? document.body)`
+ */
+export declare const useDialogContainer: () => HTMLElement | null;
+export interface DialogProps {
+    /** Aberta ou fechada. A app guarda este estado. */
+    open: boolean;
+    /** Pedido para fechar (×, Esc ou clique fora): a app põe `open` a `false`. */
+    onClose: () => void;
+    title: string;
+    /** Linha por baixo do título (ex: nome · departamento). */
+    subtitle?: string;
+    /** Botões no rodapé, sempre visíveis (ex: Confirmar, Fechar). */
+    footer?: React.ReactNode;
+    /** Largura máxima: `sm` 480px, `md` 720px, `lg` 1000px. Nunca passa o ecrã. */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Altura: `auto` (por omissão) cresce com o conteúdo; `full` ocupa sempre a
+     * altura disponível (útil quando o conteúdo muda de tamanho e a janela não
+     * deve saltar). Em ambos, se o conteúdo não couber, o corpo faz scroll.
+     */
+    height?: 'auto' | 'full';
+    /** Fechar ao clicar fora da janela. Por omissão sim; num formulário longo pode valer a pena desligar. */
+    closeOnBackdrop?: boolean;
+    /** Nome do botão ×, para leitores de ecrã. Por omissão: "Fechar". */
+    closeLabel?: string;
+    /**
+     * Corpo sem margens e sem scroll: o conteúdo ocupa-o todo e gere o seu próprio
+     * scroll (ex: passos que deslizam, rodapé próprio de cada passo).
+     */
+    flush?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * Janela por cima da página: cabeçalho navy com título, corpo que faz scroll e
+ * rodapé com os botões.
+ *
+ * É a janela modal da V1 (substitui o `Modal` legacy).
+ *
+ * Usa o [<dialog>](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog)
+ * do browser: fundo escurecido, Esc para fechar, o teclado fica dentro da
+ * janela e, ao fechar, volta ao sítio onde estava.
+ *
+ * O tamanho adapta-se ao ecrã só com CSS: nunca passa a largura nem a altura
+ * da janela do browser (com uma margem), e acompanha-a quando é
+ * redimensionada. O que não couber faz scroll no corpo; o cabeçalho e o
+ * rodapé ficam sempre visíveis.
+ */
+export default function Dialog({ open, onClose, title, subtitle, footer, size, height, closeOnBackdrop, closeLabel, flush, children, }: DialogProps): React.JSX.Element;

package/dist/types/v1/foundations/icons/icons.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+/**
+ * Conjunto de ícones do V1: traço de 1,7 a 1,9 em grelha de 24, cor do texto
+ * (`currentColor`), sem preenchimento. Decorativos por omissão (`aria-hidden`):
+ * quem os usa dá o nome acessível ao botão ou etiqueta à volta.
+ */
+export interface IconProps {
+    /** Lado em px. */
+    size?: number;
+    className?: string;
+}
+/** Lido de um QR code. */
+export declare function QrCodeIcon(props: IconProps): React.JSX.Element;
+/** Identificado automaticamente (IA). */
+export declare function SparklesIcon(props: IconProps): React.JSX.Element;
+/** Pré-preenchido a partir de outro registo (ex: linha de um extrato). */
+export declare function PrefilledIcon(props: IconProps): React.JSX.Element;
+/** Bloqueado: o valor não se pode alterar. */
+export declare function LockIcon(props: IconProps): React.JSX.Element;
+/** Mais informação. */
+export declare function InfoIcon(props: IconProps): React.JSX.Element;
+export declare function SearchIcon(props: IconProps): React.JSX.Element;
+export declare function CheckIcon(props: IconProps): React.JSX.Element;
+export declare function ChevronDownIcon(props: IconProps): React.JSX.Element;

package/dist/types/v1/index.d.ts

@@ -0,0 +1,25 @@
+export { default as DocumentDropzone, accepts as documentDropzoneAccepts } from './components/documents/DocumentDropzone/DocumentDropzone';
+export type { DocumentDropzoneProps, DocumentDropzoneLabels } from './components/documents/DocumentDropzone/DocumentDropzone';
+export { default as PdfPreview } from './primitives/documents/PdfPreview/PdfPreview';
+export type { PdfPreviewProps } from './primitives/documents/PdfPreview/PdfPreview';
+export { configurePdfWorker } from './primitives/documents/PdfPreview/pdfjs';
+export { scanQRCodes, configureQRScanner } from './capabilities/documents/QRScanning/scanQRCodes';
+export type { ScanQRCodesOptions } from './capabilities/documents/QRScanning/scanQRCodes';
+export { QrCodeIcon, SparklesIcon, PrefilledIcon, LockIcon, InfoIcon, SearchIcon, CheckIcon, ChevronDownIcon } from './foundations/icons/icons';
+export type { IconProps } from './foundations/icons/icons';
+export { default as TextInput } from './primitives/forms/TextInput/TextInput';
+export type { TextInputProps } from './primitives/forms/TextInput/TextInput';
+export { default as SelectInput } from './primitives/forms/SelectInput/SelectInput';
+export type { SelectInputProps } from './primitives/forms/SelectInput/SelectInput';
+export { default as TextArea } from './primitives/forms/TextArea/TextArea';
+export type { TextAreaProps } from './primitives/forms/TextArea/TextArea';
+export { default as LookupInput } from './primitives/forms/LookupInput/LookupInput';
+export type { LookupInputProps } from './primitives/forms/LookupInput/LookupInput';
+export { default as FormGrid, FormDivider } from './components/forms/FormGrid/FormGrid';
+export type { FormGridProps } from './components/forms/FormGrid/FormGrid';
+export { default as FormField, FieldMark } from './components/forms/FormField/FormField';
+export type { FormFieldProps, FieldMarkProps } from './components/forms/FormField/FormField';
+export { default as Button } from './primitives/buttons/Button/Button';
+export type { ButtonProps } from './primitives/buttons/Button/Button';
+export { default as Dialog, useDialogContainer } from './components/overlays/Dialog/Dialog';
+export type { DialogProps } from './components/overlays/Dialog/Dialog';

package/dist/types/v1/primitives/buttons/Button/Button.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** `primary`: a ação principal (navy, uma por ecrã). `secondary`: as outras (ex: Fechar). */
+    variant?: 'primary' | 'secondary';
+    /** Ícone antes do texto (ex: `<CheckIcon size={13} />`). */
+    icon?: React.ReactNode;
+    /** A guardar/enviar: mostra uma roda no lugar do ícone e fica desativado. */
+    loading?: boolean;
+}
+/**
+ * Botão de ação (ex: Confirmar, Fechar). Por omissão não submete formulários
+ * (`type="button"`); para submeter, passar `type="submit"`.
+ *
+ * **Aceita os atributos HTML do [&lt;button&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button)**, com o mesmo comportamento: `onClick`, `disabled`, `type`, `name`, `form`, `ref`, ...
+ * Só os próprios do V1 aparecem na tabela abaixo.
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/types/v1/primitives/documents/PdfPreview/PdfPreview.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface PdfPreviewProps {
+    file: File;
+    /** Texto alternativo das páginas e mensagem quando o PDF não abre. */
+    label: string;
+    /** Imagem da 1.ª página já renderizada pela app, para aparecer de imediato. */
+    initialFirstPage?: string;
+    className?: string;
+}
+/**
+ * Pré-visualização de PDF com pdf.js: as páginas em coluna, com scroll vertical
+ * e sem a barra de ferramentas do visualizador nativo (que transborda em caixas
+ * estreitas). Cada página só é renderizada quando se aproxima da área visível.
+ *
+ * **Usado por:** [DocumentDropzone](?path=/docs/v1-components-documents-documentdropzone--docs) (quando o ficheiro é um PDF).
+ */
+export default function PdfPreview({ file, label, initialFirstPage, className }: PdfPreviewProps): React.JSX.Element;

package/dist/types/v1/primitives/documents/PdfPreview/pdfjs.d.ts

@@ -0,0 +1,11 @@
+import type * as PdfJs from 'pdfjs-dist';
+type PdfJsModule = typeof PdfJs;
+/**
+ * Indica ao pdf.js onde está o worker (`pdf.worker.min.mjs`) servido pela app.
+ * Chamar uma vez no arranque. Se a app já define `GlobalWorkerOptions.workerSrc`
+ * pela sua própria cópia do pdf.js (a mesma, quando deduplicada), não é preciso.
+ */
+export declare function configurePdfWorker(src: string): void;
+/** Carrega o pdf.js só quando há um PDF para mostrar; depois fica em cache. */
+export declare function loadPdfjs(): Promise<PdfJsModule>;
+export {};

package/dist/types/v1/primitives/forms/LookupInput/LookupInput.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface LookupInputProps {
+    /** O que foi escolhido, como a app o quer mostrar (ex: "PRJ-0001 - Projeto de exemplo"). Vazio se nada. */
+    value: string;
+    /** Chamado ao carregar na lupa: a app abre a sua pesquisa e, quando se escolhe algo, atualiza o `value`. */
+    onLookup: () => void;
+    /** O que a lupa faz (ex: "Pesquisar projeto"). Lido pelos leitores de ecrã e mostrado ao passar o rato. */
+    lookupLabel: string;
+    /** Texto quando não há nada escolhido (ex: "Nenhum projeto"). */
+    placeholder?: string;
+    /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */
+    invalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+    /** Aplica-se à caixa à volta (para a largura, por exemplo). */
+    className?: string;
+}
+/**
+ * Campo que **não se escreve**: o valor escolhe-se numa pesquisa, aberta pela
+ * lupa ao lado (ex: escolher um projeto). A pesquisa é da app; este campo só
+ * mostra o que foi escolhido.
+ *
+ * Não é como um `<input>` HTML: só aceita as props da tabela abaixo.
+ */
+export default function LookupInput({ value, onLookup, lookupLabel, placeholder, invalid, disabled, id, className }: LookupInputProps): React.JSX.Element;

package/dist/types/v1/primitives/forms/SelectInput/SelectInput.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface SelectInputProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */
+    invalid?: boolean;
+    /** Texto da primeira opção, vazia (ex: "Selecionar"). */
+    placeholder?: string;
+}
+/**
+ * Lista de escolha (o `<select>` do browser, com o aspeto dos outros campos).
+ * As opções são `<option>` como num `<select>` normal.
+ *
+ * O `className` aplica-se à caixa à volta (para a largura, por exemplo).
+ *
+ * **Aceita os atributos HTML do [&lt;select&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select)**, com o mesmo comportamento: `value`/`onChange`, `required`, `disabled`, `name`, `ref`, ...
+ * Só os próprios do V1 aparecem na tabela abaixo.
+ * Diferença: `placeholder` acrescenta uma primeira opção vazia (o `<select>` HTML não tem placeholder).
+ */
+declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<HTMLSelectElement>>;
+export default SelectInput;

package/dist/types/v1/primitives/forms/TextArea/TextArea.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Marca o campo a vermelho (ex: obrigatório por preencher ao submeter). */
+    invalid?: boolean;
+    /** Mostra no canto quantos caracteres tem. Com `maxLength`, "usados/máximo", e fica âmbar perto do limite. */
+    counter?: boolean;
+    /**
+     * Deixar o texto passar o `maxLength`, e como o mostrar:
+     * - sem `overflow` (por omissão): não passa. Tentar escrever ou colar a mais
+     *   avisa (`limitReachedLabel`, `truncatedLabel`).
+     * - `warning`: passa, com aviso a âmbar. O campo continua válido.
+     * - `error`: passa, com aviso a vermelho, e o campo fica inválido.
+     *
+     * Com `overflow`, o texto não é cortado: a app tem de verificar o tamanho
+     * antes de guardar.
+     */
+    overflow?: 'warning' | 'error';
+    /** Sem `overflow`: aviso ao tentar escrever com o campo cheio. Por omissão: "Chegou ao limite de {maxLength} caracteres." */
+    limitReachedLabel?: string;
+    /** Sem `overflow`: aviso quando um texto colado é cortado. Por omissão: "Texto cortado: só cabem {maxLength} caracteres." */
+    truncatedLabel?: string;
+    /** Com `overflow`: aviso enquanto o texto passa o limite. Por omissão: "{a mais} caracteres a mais (máximo {maxLength})." */
+    overflowLabel?: (excess: number, max: number) => string;
+}
+/**
+ * Texto em várias linhas. Pode ser esticado na vertical.
+ *
+ * Com `counter`, mostra quantos caracteres tem (e o máximo, se houver `maxLength`).
+ * Com `maxLength`, o texto não passa do limite e o campo avisa quando se tenta
+ * escrever ou colar a mais. Com `overflow`, pode passar, como aviso ou erro.
+ *
+ * **Aceita os atributos HTML do [&lt;textarea&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea)**, com o mesmo comportamento: `value`/`onChange`, `required`, `disabled`, `readOnly`, `name`, `placeholder`, `maxLength`, `minLength`, `ref`, ...
+ * Só os próprios do V1 aparecem na tabela abaixo.
+ * Diferenças: o `className` aplica-se à caixa à volta; com `overflow`, o `maxLength` deixa de ser imposto.
+ */
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/dist/types/v1/primitives/forms/TextInput/TextInput.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Marca o campo a vermelho (ex: obrigatório por preencher ao submeter). */
+    invalid?: boolean;
+}
+/**
+ * Campo de texto de uma linha (também data, número, etc. pelo `type`).
+ *
+ * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica
+ * ligado à etiqueta automaticamente.
+ *
+ * **Aceita os atributos HTML do [&lt;input&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input)**, com o mesmo comportamento: `value`/`onChange`, `required`, `disabled`, `readOnly`, `name`, `placeholder`, `type`, `min`/`max`, `maxLength`, `pattern`, `ref`, ...
+ * Só os próprios do V1 aparecem na tabela abaixo.
+ */
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+export default TextInput;

package/dist/types/v1/primitives/forms/field.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Aspeto comum dos campos (TextInput, SelectInput, TextArea): altura `--spacing-control`, borda
+ * clara, anel suave no foco, vermelho quando inválido (`aria-invalid`) e cinzento
+ * quando desativado.
+ */
+export declare const fieldClasses: string;
+/** Só para campos de texto: um `<select>` também conta como `:read-only` no browser. */
+export declare const readOnlyClasses = "read-only:cursor-default read-only:bg-muted";
+/**
+ * Dado pelo FormField ao campo lá dentro: o `id` que liga a etiqueta ao campo e
+ * se é obrigatório. Fora de um FormField, os campos funcionam sozinhos.
+ */
+export declare const FieldContext: import("react").Context<{
+    id?: string;
+    required?: boolean;
+}>;
+export declare const useField: () => {
+    id?: string;
+    required?: boolean;
+};

package/package.json

@@ -1,14 +1,28 @@
 {
   "name": "@nextelco/common-ui",
-  "version": "2.1.97",
+  "version": "2.1.99",
   "description": "",
-  "main": "dist/bundle.js",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "webpack --mode production && tailwindcss -i src/styles/tailwind.css -o dist/style.css --minify && tailwindcss -i src/styles/tailwind.layered.css -o dist/style.layered.css --minify",
+    "prebuild": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
+    "build": "vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json && tailwindcss -i src/styles/tailwind.css -o dist/style.css --minify && tailwindcss -i src/styles/tailwind.layered.css -o dist/style.layered.css --minify",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "pub": "git add . && git commit -m \"update\" && git push && npm test && npm version patch && npm run build && npm publish",
@@ -25,8 +39,6 @@
   "peerDependencies": {
     "@azure/msal-browser": ">=3",
     "@azure/msal-react": ">=2",
-    "leaflet": "^1.9.0",
-    "leaflet.markercluster": "^1.5.0",
     "react": ">=18",
     "react-dom": ">=18",
     "react-router-dom": ">=6"
@@ -37,26 +49,18 @@
     },
     "@azure/msal-browser": {
       "optional": true
-    },
-    "leaflet": {
-      "optional": true
-    },
-    "leaflet.markercluster": {
-      "optional": true
     }
   },
   "devDependencies": {
     "@azure/msal-browser": "^5.17.3",
     "@azure/msal-react": "^5.5.4",
-    "@chromatic-com/storybook": "^4.0.0",
-    "@storybook/addon-docs": "^9.0.0",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^9.0.0",
-    "@storybook/addon-onboarding": "^9.0.0",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react-webpack5": "^9.0.0",
+    "@chromatic-com/storybook": "^5.5.1",
+    "@storybook/addon-docs": "^10.6.2",
+    "@storybook/addon-links": "^10.6.2",
+    "@storybook/addon-onboarding": "^10.6.2",
+    "@storybook/react-vite": "^10.6.2",
     "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/postcss": "^4.3.3",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.3",
@@ -70,25 +74,17 @@
     "@types/storybook__react": "^5.2.1",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/coverage-v8": "^3.2.7",
-    "chart.js": "^4.5.1",
-    "chartjs-plugin-datalabels": "^2.2.0",
-    "css-loader": "^7.1.2",
     "jsdom": "^26.1.0",
-    "leaflet": "^1.9.4",
-    "leaflet.markercluster": "^1.5.3",
     "msw": "^2.7.3",
-    "react-chartjs-2": "^5.3.1",
+    "qrcode": "^1.5.4",
     "react-router-dom": "^6.30.4",
     "sass": "^1.84.0",
-    "sass-loader": "^16.0.4",
-    "storybook": "^9.0.0",
-    "style-loader": "^4.0.0",
+    "storybook": "^10.6.2",
     "tailwindcss": "^4.3.3",
-    "ts-loader": "^9.5.2",
     "typescript": "^5.7.3",
-    "vitest": "^3.2.7",
-    "webpack": "^5.97.1",
-    "webpack-cli": "^6.0.1"
+    "vite": "^7.3.7",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vitest": "^3.2.7"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -96,18 +92,27 @@
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@zxing/library": "^0.23.0",
     "axios": "^1.8.1",
+    "chart.js": "^4.5.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "iconoir-react": "^7.11.0",
     "js-cookie": "^3.0.5",
     "keycloak-js": "^25.0.0",
+    "leaflet": "^1.9.4",
     "leaflet.heat": "^0.2.0",
+    "leaflet.markercluster": "^1.5.3",
+    "pdfjs-dist": "^4.10.38",
+    "qr-scanner": "^1.4.2",
+    "react-chartjs-2": "^5.3.1",
     "react-focus-lock": "^2.13.6",
     "react-infinite-scroll-component": "^6.1.0",
     "react-remove-scroll": "^2.6.3",
     "react-switch": "^7.1.0",
     "react-tooltip": "^5.28.0",
     "socket.io-client": "^4.8.1",
-    "tough-cookie": "^5.1.2"
+    "tough-cookie": "^5.1.2",
+    "zxing-wasm": "^3.1.5"
   },
   "overrides": {
     "storybook": "$storybook"