@nextelco/common-ui 2.1.105 → 2.1.107

package/dist/types/v1/primitives/display/FilterChips/FilterChips.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface FilterChipItem {
+    /** Identificador único da etiqueta. */
+    key: string;
+    /** Texto (ex: "Estado: Cancelado"). */
+    label: React.ReactNode;
+    /** Tira este filtro. */
+    onRemove: () => void;
+    /** Ícone antes do texto (ex: o de agrupar). */
+    icon?: React.ReactNode;
+    /** `filter` (turquesa): um filtro. `group` (violeta): um agrupamento. */
+    tone?: 'filter' | 'group';
+    /** Cores próprias (classes), em vez das do `tone` — ex: a cor do estado. */
+    colorClassName?: string;
+}
+export interface FilterChipsProps {
+    items: FilterChipItem[];
+    /** Tira todos. Sem isto não aparece o "Limpar tudo". */
+    onClearAll?: () => void;
+    clearAllLabel?: string;
+    /** Nome do botão × para leitores de ecrã (recebe o texto da etiqueta, quando é texto). */
+    removeLabel?: string;
+    className?: string;
+}
+/**
+ * Etiquetas dos filtros ativos, cada uma com × para o tirar, e "Limpar tudo".
+ *
+ * É o mesmo que a `DataTable` mostra por cima da tabela: usar este sempre que
+ * um ecrã mostra os filtros escolhidos (ex: ao clicar num gráfico), para se
+ * reconhecerem como a mesma coisa em todo o lado. Sem itens não desenha nada.
+ */
+export default function FilterChips({ items, onClearAll, clearAllLabel, removeLabel, className }: FilterChipsProps): React.JSX.Element | null;
+export { FilterChips };

package/dist/types/v1/primitives/display/Kpi/Kpi.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+/**
+ * Estados com significado: `ok` (verde), `risco` (âmbar), `incumprido` (vermelho).
+ * Sem estado: `default` (texto normal) e `brand` (azul da marca).
+ * A cor é a do número — não usar cores só para enfeitar: um indicador sem
+ * significado bom/mau fica em `default`.
+ */
+export type KpiTone = 'default' | 'brand' | 'ok' | 'risco' | 'incumprido';
+export interface KpiProps {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    tone?: KpiTone;
+    /** Linha por baixo do valor (ex: "de 120", "+12% do compromisso"). */
+    detail?: React.ReactNode;
+    /** Ícone antes do rótulo (ex: `<Inbox size={14} />`). */
+    icon?: React.ReactNode;
+    /** Ponto colorido antes do rótulo — liga o indicador à cor que ele tem no mapa ou na legenda. */
+    dot?: string;
+    /**
+     * Barra por baixo do valor. Um número é uma percentagem; uma lista é uma
+     * barra repartida, com cada troço proporcional ao seu peso.
+     *
+     * Serve para o indicador dizer a PROPORÇÃO e não só o valor: "253 concluídas"
+     * não diz nada sem saber de quantas.
+     */
+    bar?: number | {
+        weight: number;
+        color: string;
+    }[];
+    /** Linha pequena no fim, para um dado que acompanha mas não é o indicador. */
+    footer?: React.ReactNode;
+    /**
+     * Faixa fina em vez de cartão: alinha à esquerda e corta a altura para metade.
+     * Para muitos indicadores que empurrariam o conteúdo para fora do ecrã.
+     */
+    dense?: boolean;
+    /** Fundo no tom claro da cor, em vez de só o número colorido. */
+    tinted?: boolean;
+    /** Clicável (ex: filtra a tabela). Mostra o funil no canto (ou a seta, com `clickAction="open"`). */
+    onClick?: () => void;
+    /** O que o clique faz: `filter` (funil, por omissão) ou `open` (seta: abre uma lista ou um detalhe, não filtra). */
+    clickAction?: 'filter' | 'open';
+    /** Filtro ativo (Kpi clicável selecionado): contorno azul. */
+    active?: boolean;
+    /** Explicação no tooltip (camada `data-tip`), ex: "Filtrar a tabela" ou como o valor é calculado. */
+    hint?: string;
+    className?: string;
+    /** @deprecated Nome antigo (Legacy) de `detail`. */
+    delta?: React.ReactNode;
+    /** @deprecated Nome antigo (Legacy) de `tinted`. */
+    bgTint?: boolean;
+    /** @deprecated Nome antigo (Legacy) de `bar`. */
+    barra?: number | {
+        peso: number;
+        cor: string;
+    }[];
+    /** @deprecated Nome antigo (Legacy) de `footer`. */
+    rodape?: React.ReactNode;
+    /** @deprecated Nome antigo (Legacy) de `dense`. */
+    denso?: boolean;
+}
+/**
+ * Indicador: um número com o seu rótulo (ex: "Em progresso 13"). Quando é
+ * clicável filtra a vista e mostra-o com o funil; `active` marca o filtro
+ * aplicado. Dispor vários numa grelha (`grid gap-3`).
+ */
+export default function Kpi({ label, value, tone, detail: detailProp, icon, dot, bar: barProp, footer: footerProp, dense: denseProp, tinted: tintedProp, onClick, clickAction, active, hint, className, delta, bgTint, barra, rodape, denso, }: KpiProps): React.JSX.Element;
+export { Kpi };

package/dist/types/v1/primitives/display/Notice/Notice.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export type NoticeTone = 'info' | 'warning' | 'error' | 'success';
+export interface NoticeProps {
+    /** `info` (azul), `warning` (âmbar), `error` (vermelho), `success` (verde). */
+    tone?: NoticeTone;
+    /** Título curto em cima (ex: "Automação — saída de colaborador"). */
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Ícone à esquerda; por omissão, o do tom. `null` sem ícone. */
+    icon?: React.ReactNode | null;
+    /** Ação à direita (ex: "Voltar ao meu perfil"). */
+    action?: {
+        label: React.ReactNode;
+        onClick: () => void;
+    };
+    /**
+     * `box` (por omissão): caixa no meio do conteúdo, para explicar uma regra ou avisar de algo nesse sítio.
+     * `banner`: faixa a toda a largura no topo, para um estado que afeta a página inteira (ex: "Ver como").
+     */
+    variant?: 'box' | 'banner';
+    className?: string;
+}
+/**
+ * Aviso ou explicação: uma caixa com ícone, título e texto (ex: a regra de uma
+ * automação, dados possivelmente incompletos), ou uma faixa no topo da página.
+ * Não é para o resultado de uma ação — esse é um toast (`useToast`).
+ */
+export default function Notice({ tone, title, children, icon, action, variant, className }: NoticeProps): React.JSX.Element;
+export { Notice };

package/dist/types/v1/primitives/display/Person/Person.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type AvatarProps } from '../Avatar/Avatar';
+export interface PersonProps extends AvatarProps {
+    /** Só o avatar (o nome fica no cartão e no tooltip), ex: em colunas estreitas. */
+    hideName?: boolean;
+    /** O que mostrar sem nome nem email. */
+    empty?: React.ReactNode;
+}
+/**
+ * Uma pessoa, igual em todo o lado: o avatar (fotografia ou iniciais, com o cartão
+ * de detalhes ao passar o rato) e o nome ao lado, numa linha. Usar sempre que se
+ * mostra o nome de alguém (ex: solicitante, responsável, quem aprovou).
+ */
+export default function Person({ hideName, empty, className, ...avatar }: PersonProps): React.JSX.Element;
+export { Person };

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

@@ -2,6 +2,13 @@ import React from 'react';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /** Marca a caixa a vermelho (ex: aceitar os termos, por marcar ao submeter). */
     invalid?: boolean;
+    /**
+     * Meio marcada: um traço em vez do visto (ex: "selecionar todos" com só
+     * algumas marcadas). Só o aspeto: ao clicar, o browser tira-o e a caixa passa
+     * a marcada ou desmarcada pelo `onChange`, como sempre. Para leitores de ecrã é
+     * "parcialmente marcada".
+     */
+    indeterminate?: boolean;
 }
 /**
  * Caixa de marcar.

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

@@ -0,0 +1,43 @@
+import React from 'react';
+export interface DateInputProps {
+    /** Data em ISO (`aaaa-mm-dd`) ou `''` (vazio). Controlado. */
+    value?: string;
+    /** Valor inicial, sem controlar (ISO). */
+    defaultValue?: string;
+    /** Recebe só datas completas e válidas, em ISO; `''` quando se apaga. Enquanto se escreve, não é chamado. */
+    onChange?: (value: string) => void;
+    /** Ao terminar a edição: sair do campo ou escolher no calendário. */
+    onBlur?: () => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Limites, em ISO (só no calendário). */
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    /** Marca o campo a vermelho (ex: obrigatório por preencher ao submeter). */
+    invalid?: boolean;
+    placeholder?: string;
+    /** Nome do campo para leitores de ecrã, quando não há etiqueta. */
+    'aria-label'?: string;
+    /** Texto do botão do calendário. */
+    calendarLabel?: string;
+    /** Classes da caixa à volta (ex: largura). */
+    className?: string;
+}
+/**
+ * Campo de data, sempre em **dd/mm/aaaa**.
+ *
+ * O `<input type="date">` do browser mostra a data no idioma do BROWSER, não no
+ * da página (num Chrome em inglês aparece mm/dd/aaaa), e não há atributo que o
+ * force. Aqui o texto é escrito pela biblioteca, com máscara; o calendário
+ * continua a ser o nativo (acessível e traduzido), aberto pelo ícone.
+ *
+ * O valor entra e sai em ISO (`aaaa-mm-dd`). Dentro de um
+ * [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à
+ * etiqueta automaticamente.
+ */
+export default function DateInput({ value, defaultValue, onChange, onBlur, onKeyDown, min, max, disabled, readOnly, required, autoFocus, id, invalid, placeholder, 'aria-label': ariaLabel, calendarLabel, className, }: DateInputProps): React.JSX.Element;
+export { DateInput };

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

@@ -20,6 +20,9 @@ export interface LookupInputProps {
  * lupa ao lado (ex: escolher um projeto). A pesquisa é da app; este campo só
  * mostra o que foi escolhido.
  *
+ * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica
+ * ligado à etiqueta automaticamente.
+ *
  * 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/SearchInput/SearchInput.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type' | 'className'> {
+    value: string;
+    /** O texto novo, a cada tecla (e `''` ao limpar). */
+    onChange: (value: string) => void;
+    /** Nome do campo para leitores de ecrã. Por omissão, o placeholder. */
+    label?: string;
+    /** Nome do botão ×, para leitores de ecrã. Por omissão: "Limpar pesquisa". */
+    clearLabel?: string;
+    /** Largura e posição (classes do invólucro). Por omissão `w-56`. */
+    className?: string;
+    /** Ícone à esquerda, no lugar da lupa, quando o filtro é de algo concreto (ex: empresa, colaborador). Tamanho 14. */
+    icon?: React.ReactNode;
+}
+/**
+ * Caixa de pesquisa das barras de páginas, tabelas e listas: a mesma altura
+ * dos botões ao lado. Lupa à esquerda; com texto, um × para limpar (Esc também
+ * limpa).
+ *
+ * Aceita os outros atributos do `<input>` (`autoFocus`, `name`, `onKeyDown`, …).
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+export default SearchInput;

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

@@ -1,19 +1,70 @@
 import React from 'react';
-export interface SelectInputProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+export interface SelectOption {
+    value: string;
+    label: string;
+    /** Texto pequeno por baixo do rótulo, na lista. */
+    description?: string;
+    disabled?: boolean;
+}
+export interface SelectInputLabels {
+    /** Texto da caixa de pesquisa. */
+    search: string;
+    /** Nome da caixa de pesquisa para leitores de ecrã; "{label}" é o nome do campo. */
+    searchIn: string;
+    noResults: string;
+}
+export declare const DEFAULT_SELECT_LABELS: SelectInputLabels;
+export interface SelectInputProps {
+    /** A opção escolhida (controlado). `''` = nenhuma. */
+    value?: string;
+    defaultValue?: string;
+    /** As opções: texto simples (valor = rótulo) ou `{ value, label, description }`. */
+    options?: readonly (string | SelectOption)[];
+    /** Em alternativa a `options`: `<option>` como num `<select>` (compatível com o uso antigo). */
+    children?: React.ReactNode;
+    /** Recebe o valor escolhido. */
+    onValueChange?: (value: string) => void;
+    /** Como no `<select>`: `e.target.value` é o valor escolhido. */
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    /** Texto do botão sem nada escolhido; com `placeholderOption`, também a primeira opção (vazia). */
+    placeholder?: string;
+    /** O `placeholder` é também uma opção (vazia) na lista. Por omissão sim, como no `<select>`. */
+    placeholderOption?: boolean;
+    /** Primeira opção vazia para desfazer a escolha (ex: "Todas"). */
+    emptyOption?: string;
+    /** Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 opções. */
+    searchable?: boolean;
+    disabled?: boolean;
+    required?: boolean;
     /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */
     invalid?: boolean;
-    /** Texto da primeira opção, vazia (ex: "Selecionar"). */
-    placeholder?: string;
+    id?: string;
+    /** Nome no formulário (vai num campo escondido). */
+    name?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** `field` (por omissão): campo. `pill`: etiqueta arredondada (ex: o estado numa linha de tabela). A lista é a mesma. */
+    variant?: 'field' | 'pill';
+    /** Cores da etiqueta (`pill`), normalmente conforme o valor escolhido; pode trazer contorno (ex: `border border-dashed`). */
+    pillClassName?: string;
+    /** 38px em vez da altura dos controlos (para alinhar com campos de formulários mais altos). */
+    tall?: boolean;
+    labels?: Partial<SelectInputLabels>;
+    /** Classes da caixa à volta (ex: a largura). */
+    className?: string;
 }
 /**
- * Lista de escolha (o `<select>` do browser, com o aspeto dos outros campos).
- * As opções são `<option>` como num `<select>` normal.
+ * Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o
+ * tema nem o aspeto dos portais). A opção escolhida tem ✓; com muitas opções há pesquisa.
+ *
+ * Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha; sem pesquisa, uma letra salta para a opção.
  *
- * O `className` aplica-se à caixa à volta (para a largura, por exemplo).
+ * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à etiqueta
+ * automaticamente. Clicar não chega a uma linha clicável por baixo (ex: numa tabela).
  *
- * **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).
+ * Usa-se como um `<select>`: `<option>` como filhos e `onChange` com `e.target.value`; `placeholder`
+ * acrescenta uma primeira opção vazia.
  */
-declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<HTMLSelectElement>>;
+declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<HTMLButtonElement>>;
 export default SelectInput;
+export { SelectInput };

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

@@ -29,6 +29,9 @@ export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextArea
  * 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.
  *
+ * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica
+ * ligado à etiqueta automaticamente.
+ *
  * **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.

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

@@ -3,6 +3,8 @@
  * clara, anel suave no foco, vermelho quando inválido (`aria-invalid`) e cinzento
  * quando desativado.
  */
+/** O aspeto do campo sem o `display`/largura (para quem é flex, ex: o botão do SelectInput). */
+export declare const fieldBoxClasses: string;
 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";

package/dist/types/v1/primitives/lists/ListItem/ListItem.d.ts

@@ -28,7 +28,8 @@ export interface ListItemProps extends ListItemContent {
  *
  * Não sabe o que mostra: a app dá as partes (etiquetas, código, título,
  * detalhes) e o ListItem arruma-as sempre da mesma forma. Com
- * `onCheckedChange` leva uma caixa à esquerda, para marcar vários.
+ * `onCheckedChange` leva uma caixa à esquerda, para marcar vários (um
+ * [Checkbox](?path=/docs/v1-primitives-forms-checkbox--docs)).
  *
  * É um `<li>`: vai dentro de um `<ul>`.
  */

package/dist/types/v1/primitives/navigation/Tabs/Tabs.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+export interface TabItem<K extends string = string> {
+    id: K;
+    /** Normalmente texto; aceita JSX. Com `iconOnly`, tem de ser texto (vai para o nome do botão e para o tooltip). */
+    label: React.ReactNode;
+    /** Ícone antes do texto (ex: um ícone do lucide com `size={14}`). */
+    icon?: React.ReactNode;
+    /** Número ao lado do texto (ex: pendentes). Não aparece se for `undefined`. */
+    count?: number;
+    /** Explicação no tooltip (`data-tip`, com o `TooltipLayer`), com o `label` como título. */
+    tip?: string;
+    disabled?: boolean;
+}
+interface TabsBase<K extends string> {
+    items: TabItem<K>[];
+    /** Nome do conjunto, para leitores de ecrã (ex: "Estado das faturas"). */
+    label?: string;
+    /**
+     * `underline` (por omissão): separadores da página, com a linha por baixo.
+     * `segmented`: botões juntos numa caixa, para trocar de vista dentro de uma
+     * secção (ex: Lista · Quadro).
+     */
+    variant?: 'underline' | 'segmented';
+    /** Só os ícones; o `label` fica no tooltip e no nome do botão. */
+    iconOnly?: boolean;
+    className?: string;
+}
+export interface TabsSingleProps<K extends string = string> extends TabsBase<K> {
+    multiple?: false;
+    /** O separador escolhido. A app guarda este estado. */
+    value: K;
+    onChange: (id: K) => void;
+}
+export interface TabsMultipleProps<K extends string = string> extends TabsBase<K> {
+    /**
+     * Vários escolhidos ao mesmo tempo: um clique escolhe só esse separador;
+     * Ctrl/⌘/Shift + clique junta-o ou tira-o dos escolhidos.
+     */
+    multiple: true;
+    value: K[];
+    /** Os escolhidos depois do clique, e o separador clicado. */
+    onChange: (ids: K[], clicked: K) => void;
+    /** O separador "Todos": escolhê-lo limpa a escolha, e fica ativo quando não há nenhum escolhido. */
+    allId?: K;
+}
+export type TabsProps<K extends string = string> = TabsSingleProps<K> | TabsMultipleProps<K>;
+/**
+ * Separadores: escolher uma de várias vistas do mesmo ecrã.
+ *
+ * Só desenha os botões; o conteúdo de cada vista fica na app, que mostra o
+ * que corresponde a `value`. Setas ← → (e Home/End) mudam de separador,
+ * saltando os desativados. O escolhido fica a navy (não turquesa: turquesa
+ * sobre branco não tem contraste para texto).
+ *
+ * Com `multiple`, vários podem estar escolhidos (ex: estados de uma lista).
+ */
+export default function Tabs<K extends string = string>(props: TabsProps<K>): React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextelco/common-ui",
-  "version": "2.1.105",
+  "version": "2.1.107",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -10,6 +10,7 @@
       "types": "./dist/types/index.d.ts",
       "default": "./dist/esm/index.js"
     },
+    "./tailwind.css": "./dist/tailwind.css",
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },
@@ -22,7 +23,7 @@
   ],
   "scripts": {
     "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 && node scripts/css-components-layer.mjs && node scripts/extrair-imagens-css.mjs && node scripts/gerar-tema.mjs",
+    "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 && node scripts/css-components-layer.mjs && node scripts/extrair-imagens-css.mjs && node scripts/gerar-tema.mjs && node -e \"const fs=require('fs');fs.copyFileSync('src/styles/tailwind.app.css','dist/tailwind.css');fs.copyFileSync('src/styles/tokens.css','dist/tokens.css')\" && node -e \"import('./dist/esm/v1/capabilities/theme/useTheme.js').then(m=>require('fs').writeFileSync('dist/theme-boot.js',m.themeBootScript))\"",
     "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",
@@ -109,7 +110,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",
     "zxing-wasm": "^3.1.5"

package/dist/esm/legacy/components/atoms/Tooltip/Tooltip.css

@@ -1,17 +0,0 @@
-.cui-tooltip-wrapper {
-  position: relative;
-}
-
-.cui-tooltip,
-.cui-tooltip-interactive {
-  position: fixed;
-  z-index: 9999999;
-  background-color: black;
-  border: 1px solid black;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.cui-tooltip-interactive {
-  pointer-events: auto !important;
-}

package/dist/esm/legacy/components/atoms/Tooltip/Tooltip.js

@@ -1,41 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import ReactDOM from "react-dom";
-import { Tooltip } from "react-tooltip";
-import "react-tooltip/dist/react-tooltip.css";
-import './Tooltip.css';/* empty css             */
-const TooltipWrapper = ({
-  id,
-  children,
-  tip,
-  interactive = false,
-  disabled = false
-}) => {
-  const generatedId = useId();
-  const tooltipId = id || generatedId;
-  if (disabled) return /* @__PURE__ */ jsx("div", { children });
-  return /* @__PURE__ */ jsxs("div", { "data-tooltip-id": tooltipId, className: "cui-tooltip-wrapper", children: [
-    children,
-    ReactDOM.createPortal(
-      /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          id: tooltipId,
-          place: "top",
-          variant: "dark",
-          delayShow: 0,
-          delayHide: interactive ? 200 : 0,
-          className: interactive ? "cui-tooltip-interactive" : "cui-tooltip",
-          "data-interactive": interactive,
-          children: /* @__PURE__ */ jsx("div", { className: "cui-tooltip__tip", children: tip })
-        }
-      ),
-      document.body
-      // Render the tooltip directly to the body element
-    )
-  ] });
-};
-export {
-  TooltipWrapper as default
-};
-//# sourceMappingURL=Tooltip.js.map

package/dist/esm/legacy/components/atoms/Tooltip/Tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../src/legacy/components/atoms/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { ReactNode, useId } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport { Tooltip } from 'react-tooltip'\r\nimport 'react-tooltip/dist/react-tooltip.css'\r\nimport './Tooltip.scss'\r\n\r\ninterface TooltipWrapperProps {\r\n  id?: string\r\n  interactive?: boolean\r\n  disabled?: boolean\r\n  tip: ReactNode\r\n  children: ReactNode\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst TooltipWrapper: React.FC<TooltipWrapperProps> = ({\r\n  id,\r\n  children,\r\n  tip,\r\n  interactive = false,\r\n  disabled = false,\r\n}) => {\r\n  const generatedId = useId()\r\n  const tooltipId = id || generatedId\r\n\r\n  if (disabled) return <div>{children}</div>\r\n\r\n  return (\r\n    <div data-tooltip-id={tooltipId} className=\"cui-tooltip-wrapper\">\r\n      {children}\r\n      {ReactDOM.createPortal(\r\n        <Tooltip\r\n          id={tooltipId}\r\n          place=\"top\"\r\n          variant=\"dark\"\r\n          delayShow={0}\r\n          delayHide={interactive ? 200 : 0}\r\n          className={interactive ? 'cui-tooltip-interactive' : 'cui-tooltip'}\r\n          data-interactive={interactive}\r\n        >\r\n          <div className=\"cui-tooltip__tip\">{tip}</div>\r\n        </Tooltip>,\r\n        document.body // Render the tooltip directly to the body element\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default TooltipWrapper\r\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,iBAAgD,CAAC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AACb,MAAM;AACJ,QAAM,cAAc,MAAA;AACpB,QAAM,YAAY,MAAM;AAExB,MAAI,SAAU,QAAO,oBAAC,OAAA,EAAK,SAAA,CAAS;AAEpC,SACE,qBAAC,OAAA,EAAI,mBAAiB,WAAW,WAAU,uBACxC,UAAA;AAAA,IAAA;AAAA,IACA,SAAS;AAAA,MACR;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,WAAW;AAAA,UACX,WAAW,cAAc,MAAM;AAAA,UAC/B,WAAW,cAAc,4BAA4B;AAAA,UACrD,oBAAkB;AAAA,UAElB,UAAA,oBAAC,OAAA,EAAI,WAAU,oBAAoB,UAAA,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAEzC,SAAS;AAAA;AAAA,IAAA;AAAA,EACX,GACF;AAEJ;"}

package/dist/esm/legacy/components/molecules/Search/Search.css

@@ -1,18 +0,0 @@
-.cui-search {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-}
-.cui-search__icon-container {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.cui-search__icon {
-  width: 100%;
-  height: 100%;
-  color: var(--dark-blue);
-}
-.cui-search__input {
-  width: 100%;
-}

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

@@ -1,30 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import Input from "../../atoms/Input/Input.js";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
-import './Search.css';/* empty css            */
-const Search = ({ handleSearch }) => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const handleChange = (e) => {
-    const { value } = e.target;
-    setSearchTerm(value);
-    handleSearch(value);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "cui-search", children: [
-    /* @__PURE__ */ jsx("div", { className: "cui-search__icon-container", children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faSearch, className: "cui-search__icon" }) }),
-    /* @__PURE__ */ jsx("div", { className: "cui-search__input", children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        onChange: handleChange,
-        value: searchTerm,
-        placeholder: "Pesquisa aqui..."
-      }
-    ) })
-  ] });
-};
-export {
-  Search,
-  Search as default
-};
-//# sourceMappingURL=Search.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Search.js","sources":["../../../../../../src/legacy/components/molecules/Search/Search.tsx"],"sourcesContent":["import React, { useState } from 'react'\r\nimport Input from '../../atoms/Input/Input'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faSearch } from '@fortawesome/free-solid-svg-icons'\r\n\r\nimport './Search.scss'\r\n\r\ntype Props = {\r\n  handleSearch: (searchTerm: string) => void\r\n}\r\n\r\nexport const Search = ({ handleSearch }: Props) => {\r\n  const [searchTerm, setSearchTerm] = useState('')\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const { value } = e.target\r\n    setSearchTerm(value)\r\n    handleSearch(value)\r\n  }\r\n\r\n  return (\r\n    <div className={'cui-search'}>\r\n      <div className={'cui-search__icon-container'}>\r\n        <FontAwesomeIcon icon={faSearch} className=\"cui-search__icon\" />\r\n      </div>\r\n      <div className={'cui-search__input'}>\r\n        <Input\r\n          onChange={handleChange}\r\n          value={searchTerm}\r\n          placeholder=\"Pesquisa aqui...\"\r\n        />\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Search\r\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,SAAS,CAAC,EAAE,mBAA0B;AACjD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAE/C,QAAM,eAAe,CAAC,MAA2C;AAC/D,UAAM,EAAE,UAAU,EAAE;AACpB,kBAAc,KAAK;AACnB,iBAAa,KAAK;AAAA,EACpB;AAEA,SACE,qBAAC,OAAA,EAAI,WAAW,cACd,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAW,8BACd,UAAA,oBAAC,mBAAgB,MAAM,UAAU,WAAU,mBAAA,CAAmB,EAAA,CAChE;AAAA,IACA,oBAAC,OAAA,EAAI,WAAW,qBACd,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU;AAAA,QACV,OAAO;AAAA,QACP,aAAY;AAAA,MAAA;AAAA,IAAA,EACd,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/esm/legacy/hooks/useTheme.js

@@ -1,39 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-const STORAGE_KEY = "proef-theme";
-const ORDER = ["light", "dark", "system"];
-function systemPrefersDark() {
-  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-function apply(theme) {
-  if (typeof document === "undefined") return;
-  const dark = theme === "dark" || theme === "system" && systemPrefersDark();
-  document.documentElement.classList.toggle("dark", dark);
-}
-function useTheme() {
-  const [theme, setThemeState] = useState(() => {
-    if (typeof localStorage === "undefined") return "system";
-    return localStorage.getItem(STORAGE_KEY) || "system";
-  });
-  useEffect(() => {
-    apply(theme);
-  }, [theme]);
-  useEffect(() => {
-    if (theme !== "system" || typeof window === "undefined") return;
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const onChange = () => apply("system");
-    mq.addEventListener("change", onChange);
-    return () => mq.removeEventListener("change", onChange);
-  }, [theme]);
-  const setTheme = useCallback((t) => {
-    if (typeof localStorage !== "undefined") localStorage.setItem(STORAGE_KEY, t);
-    setThemeState(t);
-  }, []);
-  const cycle = useCallback(() => {
-    setTheme(ORDER[(ORDER.indexOf(theme) + 1) % ORDER.length]);
-  }, [theme, setTheme]);
-  return { theme, setTheme, cycle };
-}
-export {
-  useTheme
-};
-//# sourceMappingURL=useTheme.js.map

package/dist/esm/legacy/hooks/useTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTheme.js","sources":["../../../../src/legacy/hooks/useTheme.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport type Theme = 'light' | 'dark' | 'system'\r\n\r\nconst STORAGE_KEY = 'proef-theme'\r\nconst ORDER: Theme[] = ['light', 'dark', 'system']\r\n\r\n/** Resolve system → light|dark via matchMedia. */\r\nfunction systemPrefersDark(): boolean {\r\n  return typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches\r\n}\r\n\r\n/** Aplica/remove a classe `.dark` no <html> conforme o tema efetivo. */\r\nfunction apply(theme: Theme) {\r\n  if (typeof document === 'undefined') return\r\n  const dark = theme === 'dark' || (theme === 'system' && systemPrefersDark())\r\n  document.documentElement.classList.toggle('dark', dark)\r\n}\r\n\r\n/**\r\n * Gestor de tema light/dark/system para o `Sidebar`/`Layout` do common-ui.\r\n * Persiste em localStorage e aplica a classe `.dark` no <html> (o CSS do\r\n * design system reage via `.dark`). Uso:\r\n *\r\n *   const { theme, setTheme } = useTheme()\r\n *   <Layout theme={theme} onThemeChange={setTheme} ... />\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function useTheme() {\r\n  const [theme, setThemeState] = useState<Theme>(() => {\r\n    if (typeof localStorage === 'undefined') return 'system'\r\n    return (localStorage.getItem(STORAGE_KEY) as Theme) || 'system'\r\n  })\r\n\r\n  // Aplica sempre que o tema muda.\r\n  useEffect(() => {\r\n    apply(theme)\r\n  }, [theme])\r\n\r\n  // Segue a preferência do SO quando em 'system'.\r\n  useEffect(() => {\r\n    if (theme !== 'system' || typeof window === 'undefined') return\r\n    const mq = window.matchMedia('(prefers-color-scheme: dark)')\r\n    const onChange = () => apply('system')\r\n    mq.addEventListener('change', onChange)\r\n    return () => mq.removeEventListener('change', onChange)\r\n  }, [theme])\r\n\r\n  const setTheme = useCallback((t: Theme) => {\r\n    if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, t)\r\n    setThemeState(t)\r\n  }, [])\r\n\r\n  const cycle = useCallback(() => {\r\n    setTheme(ORDER[(ORDER.indexOf(theme) + 1) % ORDER.length])\r\n  }, [theme, setTheme])\r\n\r\n  return { theme, setTheme, cycle }\r\n}\r\n\r\nexport default useTheme\r\n"],"names":[],"mappings":";AAKA,MAAM,cAAc;AACpB,MAAM,QAAiB,CAAC,SAAS,QAAQ,QAAQ;AAGjD,SAAS,oBAA6B;AACpC,SAAO,OAAO,WAAW,eAAe,OAAO,WAAW,8BAA8B,EAAE;AAC5F;AAGA,SAAS,MAAM,OAAc;AAC3B,MAAI,OAAO,aAAa,YAAa;AACrC,QAAM,OAAO,UAAU,UAAW,UAAU,YAAY,kBAAA;AACxD,WAAS,gBAAgB,UAAU,OAAO,QAAQ,IAAI;AACxD;AAWO,SAAS,WAAW;AACzB,QAAM,CAAC,OAAO,aAAa,IAAI,SAAgB,MAAM;AACnD,QAAI,OAAO,iBAAiB,YAAa,QAAO;AAChD,WAAQ,aAAa,QAAQ,WAAW,KAAe;AAAA,EACzD,CAAC;AAGD,YAAU,MAAM;AACd,UAAM,KAAK;AAAA,EACb,GAAG,CAAC,KAAK,CAAC;AAGV,YAAU,MAAM;AACd,QAAI,UAAU,YAAY,OAAO,WAAW,YAAa;AACzD,UAAM,KAAK,OAAO,WAAW,8BAA8B;AAC3D,UAAM,WAAW,MAAM,MAAM,QAAQ;AACrC,OAAG,iBAAiB,UAAU,QAAQ;AACtC,WAAO,MAAM,GAAG,oBAAoB,UAAU,QAAQ;AAAA,EACxD,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,WAAW,YAAY,CAAC,MAAa;AACzC,QAAI,OAAO,iBAAiB,YAAa,cAAa,QAAQ,aAAa,CAAC;AAC5E,kBAAc,CAAC;AAAA,EACjB,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQ,YAAY,MAAM;AAC9B,aAAS,OAAO,MAAM,QAAQ,KAAK,IAAI,KAAK,MAAM,MAAM,CAAC;AAAA,EAC3D,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,SAAO,EAAE,OAAO,UAAU,MAAA;AAC5B;"}