@proef/common-ui 0.0.0-stage → 2.2.0

package/dist/theme.css

@@ -0,0 +1,265 @@
+/* Tokens do V1: tamanhos, tipos de letra, sombras e cores partilhados pelos
+ * componentes. Mudar um valor aqui muda-o em todos os componentes que o usam.
+ *
+ * Cada token gera as classes do Tailwind com o seu nome (ex: --spacing-control
+ * → h-control, w-control; --text-control → text-control; --shadow-card →
+ * shadow-card). Uma app pode sobrepor qualquer um no seu próprio CSS
+ * (ex: `:root { --spacing-control: 38px }`).
+ *
+ * `static`: os tokens vão sempre para o CSS, mesmo os que só são usados
+ * dentro de outros valores (ex: a largura das etiquetas no FormGrid).
+ * Importado por tailwind.css e tailwind.layered.css. */
+@theme static {
+  /* Cores */
+  --color-primary-strong: #00124a; /* navy mais escuro, para gradientes */
+  --color-scrollbar: #c1c1c1;
+  --color-scrollbar-hover: #a8a8a8;
+
+  /* Tipos de letra */
+  --text-page-title: 24px; /* título da página (PageHeader) — o mesmo em todos os portais e ecrãs */
+  --text-page-title--line-height: 2rem;
+  --text-title: 15px; /* títulos de caixas e janelas */
+  --text-control: 13px; /* texto dos campos e botões */
+  --text-caption: 11px; /* contadores, avisos, tamanhos de ficheiro */
+  --text-micro: 10px; /* dicas por baixo das etiquetas */
+
+  /* Tamanhos */
+  --spacing-control: 32px; /* altura de todos os controlos: botões, campos, pesquisa, seletores (iguais lado a lado) */
+  --spacing-form-label: 172px; /* coluna das etiquetas no FormGrid */
+  --spacing-form-label-narrow: 112px; /* a mesma coluna, em sítios estreitos */
+  --spacing-page-x: 48px; /* margem lateral da página (AppShell), a partir de 640px */
+  --spacing-page-x-narrow: 16px; /* a mesma margem em ecrãs estreitos */
+  --spacing-page-top: 32px; /* espaço por cima da página (AppShell), a partir de 1024px */
+  --spacing-page-top-narrow: 80px; /* o mesmo espaço abaixo de 1024px, com lugar para o botão do menu */
+
+  /* Larguras a partir das quais o FormGrid muda (container queries: @max-form-md, @max-form-sm) */
+  --container-form-md: 680px; /* etiquetas mais estreitas */
+  --container-form-sm: 500px; /* etiquetas por cima dos campos */
+
+  /* Larguras máximas das janelas (Dialog): max-w-dialog-sm, -md, -lg, -xl */
+  --container-dialog-sm: 480px;
+  --container-dialog-md: 720px;
+  --container-dialog-lg: 1000px;
+  /* Acompanha o ecrã: mapa e tabela lado a lado precisam de largura, mas o texto não deve atravessar o monitor todo */
+  --container-dialog-xl: min(1600px, 95vw);
+  /* Espaço mínimo entre a janela e as bordas do ecrã */
+  --spacing-dialog-margin: 24px;
+
+  /* Animações de entrada das janelas */
+  --animate-dialog-in: dialog-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
+  --animate-backdrop-in: backdrop-in 0.2s ease-out both;
+
+  @keyframes dialog-in {
+    from { opacity: 0; transform: translateY(10px) scale(0.97); }
+  }
+  @keyframes backdrop-in {
+    from { opacity: 0; }
+  }
+
+  /* Sombras (na cor primária, para seguirem a paleta) */
+  --shadow-card: 0 10px 30px color-mix(in srgb, var(--color-primary) 8%, transparent);
+  --shadow-card-hover: 0 14px 36px color-mix(in srgb, var(--color-primary) 12%, transparent);
+  --shadow-card-active: 0 16px 40px color-mix(in srgb, var(--color-primary) 16%, transparent);
+  --shadow-popover: 0 6px 18px color-mix(in srgb, var(--color-primary) 12%, transparent);
+  --shadow-tile: 0 10px 24px color-mix(in srgb, var(--color-primary) 18%, transparent);
+  --shadow-page: 0 1px 5px color-mix(in srgb, var(--color-primary) 10%, transparent);
+  --shadow-modal: 0 24px 60px color-mix(in srgb, var(--color-primary) 25%, transparent);
+}
+
+/* Fundo do corpo das janelas: um brilho navy que desce do cabeçalho e
+   desvanece para a cor do cartão (branco no tema claro, escuro no tema
+   escuro). Na cor primária, para seguir a paleta. */
+@utility bg-canvas {
+  background-image:
+    radial-gradient(125% 70% at 50% -12%, color-mix(in srgb, var(--color-primary) 7%, transparent) 0%, transparent 55%),
+    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-card)) 0%, color-mix(in srgb, var(--color-primary) 2%, var(--color-card)) 55%, var(--color-card) 100%);
+}
+
+/* Esconde a barra de scroll do browser, mantendo o scroll (ex: quando há uma
+   barra desenhada por cima, como nas tabelas com `overlayScrollbars`). */
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Sem o aspeto do browser dentro de `v1-reset` (ex: a Table): botões sem fundo,
+   borda nem margens, e com a letra de quem os rodeia; tabelas sem espaço entre
+   células. A biblioteca não traz o preflight do Tailwind, para não mexer nas
+   páginas da app; isto só toca no que está dentro da classe.
+   Em `@layer base` e com especificidade zero (`:where`): qualquer classe do
+   componente ganha-lhe. */
+@layer base {
+  :where(.v1-reset) :where(button) {
+    appearance: none;
+    background: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    cursor: pointer;
+  }
+  :where(.v1-reset) :where(button:disabled) {
+    cursor: default;
+  }
+  :where(.v1-reset) :where(input, select) {
+    font: inherit;
+    color: inherit;
+    margin: 0;
+  }
+  :where(.v1-reset) :where(table) {
+    border-collapse: collapse;
+  }
+  :where(.v1-reset) :where(th) {
+    font-weight: inherit;
+    text-align: inherit;
+  }
+}
+
+/* Tema do common-ui: tokens de cor (claro e escuro), raios, estados e a variante `dark:`.
+ *
+ * Fonte única. É importado por tailwind.css e tailwind.layered.css (o CSS compilado da
+ * biblioteca) e, junto com tokens.css, é publicado como `dist/theme.css` para as apps
+ * com Tailwind próprio: importado uma vez, o Tailwind da app passa a gerar, sob pedido,
+ * todas as classes dos tokens (border-foreground, bg-primary/80, ring-primary, ...),
+ * sem depender das que a biblioteca por acaso usa. */
+/* `dark:` passa a reagir a classe `.dark` no <html> (o que o useTheme aplica),
+   e nao ao prefers-color-scheme (default do Tailwind v4). */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Design system proef (fonte de verdade: Tickets/frontend/src/index.css).
+   Os --color-* do @theme geram as utilities (bg-card, text-muted-foreground,
+   border-border, bg-primary, ...). Os que referenciam hsl(var(--x)) buscam o
+   valor ao :where(:root) abaixo (ou ao :root do consumidor, que ganha). */
+@theme {
+  --font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-proef-navy: #001b63;
+  --color-proef-turquoise: #00d28d;
+  --color-proef-blue: #0076ce;
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: #001b63;
+  --color-primary-foreground: #ffffff;
+
+  --color-secondary: #00d28d;
+  --color-secondary-foreground: #001b63;
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: #0076ce;
+
+  /* Status semânticos (universais) — geram bg-ok/text-ok/bg-ok-bg, etc. */
+  --color-ok: #1f8a55;
+  --color-ok-bg: #e5f6ec;
+  --color-risco: #b96e00;
+  --color-risco-bg: #fcf0dc;
+  --color-incumprido: #c23b34;
+  --color-incumprido-bg: #fbeae9;
+  --color-neutral: #767c88;
+  --color-neutral-bg: #eeeff2;
+
+  /* Base do espacamento das utilities (calc com var(--spacing)). Explicito
+     aqui p/ garantir que resolve no consumidor (senao spacing fica a 0). */
+  --spacing: 0.25rem;
+
+  /* Cantos arredondados em todos os portais (decisao 15/10/2026): botoes,
+     campos e itens de menu 8px. Cartoes (rounded-xl), pop-ups (rounded-2xl) e
+     etiquetas (rounded-full) nao dependem destes tokens. */
+  --radius-lg: 0.5rem;
+  --radius-md: 0.375rem;
+  --radius-sm: 0.25rem;
+}
+
+/* Valores default dos tokens (light). `:where(:root)` = specificity 0 → o
+   :root do consumidor (RC/Landing/...) sobrepoe sem esforco; apps novos usam
+   estes. Valores canonicos do Tickets. */
+:where(:root) {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+  --radius: 0.5rem;
+}
+
+/* Cantos quadrados, so para um portal que ainda precise deles durante a
+   transicao: data-cantos="quadrados" no <html>. Unlayered e com atributo:
+   ganha ao @theme (layer). */
+:root[data-cantos="quadrados"] {
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius: 0px;
+}
+
+/* Tema escuro (classe .dark no <html>). Valores do portal de Tickets: superfícies slate e estados com fundo
+   translúcido (500/15) e texto claro (300). Os tokens de estado mudam aqui, por isso Badge, Kpi com tom e tudo o
+   que use text-ok/bg-ok-bg (etc.) acompanha o tema sem classes dark: em cada componente. */
+:where(.dark) {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 48%;
+}
+
+.dark {
+  --color-ok: #6ee7b7;
+  --color-ok-bg: rgb(16 185 129 / 0.15);
+  --color-risco: #fcd34d;
+  --color-risco-bg: rgb(245 158 11 / 0.15);
+  --color-incumprido: #fca5a5;
+  --color-incumprido-bg: rgb(239 68 68 / 0.15);
+  --color-neutral: #cbd5e1;
+  --color-neutral-bg: rgb(148 163 184 / 0.15);
+}

package/dist/tokens.css

@@ -0,0 +1,121 @@
+/* Tokens do V1: tamanhos, tipos de letra, sombras e cores partilhados pelos
+ * componentes. Mudar um valor aqui muda-o em todos os componentes que o usam.
+ *
+ * Cada token gera as classes do Tailwind com o seu nome (ex: --spacing-control
+ * → h-control, w-control; --text-control → text-control; --shadow-card →
+ * shadow-card). Uma app pode sobrepor qualquer um no seu próprio CSS
+ * (ex: `:root { --spacing-control: 38px }`).
+ *
+ * `static`: os tokens vão sempre para o CSS, mesmo os que só são usados
+ * dentro de outros valores (ex: a largura das etiquetas no FormGrid).
+ * Importado por tailwind.css e tailwind.layered.css. */
+@theme static {
+  /* Cores */
+  --color-primary-strong: #00124a; /* navy mais escuro, para gradientes */
+  --color-scrollbar: #c1c1c1;
+  --color-scrollbar-hover: #a8a8a8;
+
+  /* Tipos de letra */
+  --text-page-title: 24px; /* título da página (PageHeader) — o mesmo em todos os portais e ecrãs */
+  --text-page-title--line-height: 2rem;
+  --text-title: 15px; /* títulos de caixas e janelas */
+  --text-control: 13px; /* texto dos campos e botões */
+  --text-caption: 11px; /* contadores, avisos, tamanhos de ficheiro */
+  --text-micro: 10px; /* dicas por baixo das etiquetas */
+
+  /* Tamanhos */
+  --spacing-control: 32px; /* altura de todos os controlos: botões, campos, pesquisa, seletores (iguais lado a lado) */
+  --spacing-form-label: 172px; /* coluna das etiquetas no FormGrid */
+  --spacing-form-label-narrow: 112px; /* a mesma coluna, em sítios estreitos */
+  --spacing-page-x: 48px; /* margem lateral da página (AppShell), a partir de 640px */
+  --spacing-page-x-narrow: 16px; /* a mesma margem em ecrãs estreitos */
+  --spacing-page-top: 32px; /* espaço por cima da página (AppShell), a partir de 1024px */
+  --spacing-page-top-narrow: 80px; /* o mesmo espaço abaixo de 1024px, com lugar para o botão do menu */
+
+  /* Larguras a partir das quais o FormGrid muda (container queries: @max-form-md, @max-form-sm) */
+  --container-form-md: 680px; /* etiquetas mais estreitas */
+  --container-form-sm: 500px; /* etiquetas por cima dos campos */
+
+  /* Larguras máximas das janelas (Dialog): max-w-dialog-sm, -md, -lg, -xl */
+  --container-dialog-sm: 480px;
+  --container-dialog-md: 720px;
+  --container-dialog-lg: 1000px;
+  /* Acompanha o ecrã: mapa e tabela lado a lado precisam de largura, mas o texto não deve atravessar o monitor todo */
+  --container-dialog-xl: min(1600px, 95vw);
+  /* Espaço mínimo entre a janela e as bordas do ecrã */
+  --spacing-dialog-margin: 24px;
+
+  /* Animações de entrada das janelas */
+  --animate-dialog-in: dialog-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
+  --animate-backdrop-in: backdrop-in 0.2s ease-out both;
+
+  @keyframes dialog-in {
+    from { opacity: 0; transform: translateY(10px) scale(0.97); }
+  }
+  @keyframes backdrop-in {
+    from { opacity: 0; }
+  }
+
+  /* Sombras (na cor primária, para seguirem a paleta) */
+  --shadow-card: 0 10px 30px color-mix(in srgb, var(--color-primary) 8%, transparent);
+  --shadow-card-hover: 0 14px 36px color-mix(in srgb, var(--color-primary) 12%, transparent);
+  --shadow-card-active: 0 16px 40px color-mix(in srgb, var(--color-primary) 16%, transparent);
+  --shadow-popover: 0 6px 18px color-mix(in srgb, var(--color-primary) 12%, transparent);
+  --shadow-tile: 0 10px 24px color-mix(in srgb, var(--color-primary) 18%, transparent);
+  --shadow-page: 0 1px 5px color-mix(in srgb, var(--color-primary) 10%, transparent);
+  --shadow-modal: 0 24px 60px color-mix(in srgb, var(--color-primary) 25%, transparent);
+}
+
+/* Fundo do corpo das janelas: um brilho navy que desce do cabeçalho e
+   desvanece para a cor do cartão (branco no tema claro, escuro no tema
+   escuro). Na cor primária, para seguir a paleta. */
+@utility bg-canvas {
+  background-image:
+    radial-gradient(125% 70% at 50% -12%, color-mix(in srgb, var(--color-primary) 7%, transparent) 0%, transparent 55%),
+    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-card)) 0%, color-mix(in srgb, var(--color-primary) 2%, var(--color-card)) 55%, var(--color-card) 100%);
+}
+
+/* Esconde a barra de scroll do browser, mantendo o scroll (ex: quando há uma
+   barra desenhada por cima, como nas tabelas com `overlayScrollbars`). */
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Sem o aspeto do browser dentro de `v1-reset` (ex: a Table): botões sem fundo,
+   borda nem margens, e com a letra de quem os rodeia; tabelas sem espaço entre
+   células. A biblioteca não traz o preflight do Tailwind, para não mexer nas
+   páginas da app; isto só toca no que está dentro da classe.
+   Em `@layer base` e com especificidade zero (`:where`): qualquer classe do
+   componente ganha-lhe. */
+@layer base {
+  :where(.v1-reset) :where(button) {
+    appearance: none;
+    background: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    cursor: pointer;
+  }
+  :where(.v1-reset) :where(button:disabled) {
+    cursor: default;
+  }
+  :where(.v1-reset) :where(input, select) {
+    font: inherit;
+    color: inherit;
+    margin: 0;
+  }
+  :where(.v1-reset) :where(table) {
+    border-collapse: collapse;
+  }
+  :where(.v1-reset) :where(th) {
+    font-weight: inherit;
+    text-align: inherit;
+  }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,14 @@
+export * from './legacy/exports/atoms';
+export * from './legacy/exports/molecules';
+export * from './legacy/exports/organisms';
+export * from './legacy/exports/layout';
+export * from './legacy/exports/pages';
+export * from './legacy/exports/contexts';
+export * from './legacy/exports/hooks';
+export * from './legacy/exports/ui';
+export * from './legacy/exports/types';
+export * from './legacy/exports/styles';
+export * from './legacy/exports/utils';
+export * from './legacy/exports/charts';
+export { default as Sidebar } from './legacy/components/layout/Sidebar/Sidebar';
+export * from './v1';

package/dist/types/legacy/components/atoms/Acronym/Acronym.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AcronymTheme } from '../../../types/themes/AcronymThemes';
+import './Acronym.scss';
+type Props = {
+    name: string;
+    acronymOnly?: boolean;
+    theme: AcronymTheme;
+};
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const Acronym: ({ name, acronymOnly, theme }: Props) => React.JSX.Element;
+export default Acronym;

package/dist/types/legacy/components/atoms/BreadCrumb/BreadCrumb.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './BreadCrumb.scss';
+interface BreadCrumbProps {
+    location: string;
+    onNavigate?: (path: string) => void;
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const BreadCrumb: React.FC<BreadCrumbProps>;
+export default BreadCrumb;

package/dist/types/legacy/components/atoms/Button/variants/ActionButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PropsWithChildren } from 'react';
+import { ActionButtonTheme } from '../../../../types/themes/ButtonThemes';
+import './ActionButton.scss';
+type Props = PropsWithChildren<{
+    icon?: React.ReactNode;
+    title: string;
+    theme: ActionButtonTheme;
+    onClick: () => void;
+    disabled?: boolean;
+}>;
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const ActionButton: ({ icon, title, theme, onClick, disabled, }: Props) => React.JSX.Element;
+export default ActionButton;

package/dist/types/legacy/components/atoms/Button/variants/FilterButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PropsWithChildren } from 'react';
+import './FilterButton.scss';
+type Props = PropsWithChildren<{
+    title: string;
+    selected: boolean;
+    onClick: () => void;
+    disabled?: boolean;
+}>;
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const FilterButton: ({ title, selected, onClick, disabled, }: Props) => React.JSX.Element;
+export default FilterButton;

package/dist/types/legacy/components/atoms/Button/variants/IconButton.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PropsWithChildren } from 'react';
+import { type IconeQualquer } from '../../Icone/Icone';
+import { IconButtonTheme } from '../../../../types/themes/ButtonThemes';
+import './IconButton.scss';
+type Props = PropsWithChildren<{
+    /** FontAwesome, componente lucide ou elemento ja construido. */
+    icon: IconeQualquer;
+    onClick: () => void;
+    theme: IconButtonTheme;
+    disabled?: boolean;
+    /**
+     * Nome acessivel. Um botao so com icone nao tem texto, por isso sem isto fica
+     * anunciado como "botao" por um leitor de ecra — e invisivel para testes.
+     */
+    ariaLabel?: string;
+    /** Tooltip nativa; sem valor proprio assume o `ariaLabel`. */
+    title?: string;
+}>;
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const IconButton: ({ icon, onClick, theme, disabled, ariaLabel, title, }: Props) => React.JSX.Element;
+export default IconButton;

package/dist/types/legacy/components/atoms/Button/variants/MainButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PropsWithChildren } from 'react';
+import { type IconeQualquer } from '../../Icone/Icone';
+import { MainButtonTheme } from '../../../../types/themes/ButtonThemes';
+import './MainButton.scss';
+type Props = PropsWithChildren<{
+    /** FontAwesome, componente lucide ou elemento ja construido. */
+    icon: IconeQualquer;
+    title: string;
+    description?: string;
+    theme: MainButtonTheme;
+    onClick: () => void;
+    disabled?: boolean;
+}>;
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const MainButton: ({ icon, title, description, theme, onClick, disabled, }: Props) => React.JSX.Element;
+export default MainButton;

package/dist/types/legacy/components/atoms/Button/variants/TabButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PropsWithChildren } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import './TabButton.scss';
+type Props = PropsWithChildren<{
+    icon: IconProp;
+    title: string;
+    selected: boolean;
+    onClick: () => void;
+    disabled?: boolean;
+}>;
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const TabButton: ({ icon, title, selected, onClick, disabled }: Props) => React.JSX.Element;
+export default TabButton;

package/dist/types/legacy/components/atoms/Field/Field.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './Field.scss';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+type Props = {
+    iconPrev?: IconProp;
+    type?: 'cui-added' | 'cui-adding' | 'cui-adding_operator_name' | 'cui-number';
+    placeholder?: string;
+    disabled: boolean;
+    readOnly: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const Field: ({ type, placeholder, disabled, readOnly, iconPrev, value, onChange, }: Props) => React.JSX.Element;
+export default Field;

package/dist/types/legacy/components/atoms/IconText/IconText.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import './IconText.scss';
+import { IconTextTheme } from '../../../types/themes/IconTextThemes';
+interface IconTextProps {
+    icon: IconProp;
+    text: string;
+    theme: IconTextTheme;
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const IconText: React.FC<IconTextProps>;
+export default IconText;

package/dist/types/legacy/components/atoms/Icone/Icone.d.ts

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from 'react';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+/**
+ * Ícone agnóstico da biblioteca de ícones.
+ *
+ * A biblioteca nasceu em FontAwesome, mas todos os portais usam lucide — e o
+ * `Sidebar` sempre aceitou componentes ao estilo lucide. Resultado: metade da
+ * API pedia `IconProp` e obrigava um portal a instalar o FontAwesome só para
+ * pôr um ícone num botão.
+ *
+ * Este componente aceita as três formas, para a API poder ser uniformizada sem
+ * partir quem já passa `IconProp`:
+ *  - `IconProp` (FontAwesome), como antes;
+ *  - um elemento React já construído (`<Play size={14} />`);
+ *  - um componente de ícone (lucide: `Play`), que recebe `size` e `className`.
+ * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.
+ */
+export type IconeQualquer = IconProp | ReactNode | React.ComponentType<{
+    size?: number;
+    className?: string;
+}>;
+interface Props {
+    icone: IconeQualquer;
+    /** Só aplicado às formas que o aceitam (componente de ícone e FontAwesome). */
+    tamanho?: number;
+    cor?: string;
+    className?: string;
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export default function Icone({ icone, tamanho, cor, className }: Props): React.JSX.Element | null;
+export {};

package/dist/types/legacy/components/atoms/Input/Input.d.ts

@@ -0,0 +1,13 @@
+import React, { ChangeEvent } from 'react';
+import './Input.scss';
+type Props = {
+    placeholder?: string;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: ChangeEvent<HTMLInputElement>) => void;
+    type?: 'number' | 'text';
+    value?: string | number | null;
+    disabled?: boolean;
+};
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const Input: ({ placeholder, onChange, onBlur, type, value, disabled, }: Props) => React.JSX.Element;
+export default Input;

package/dist/types/legacy/components/atoms/InputData/InputData.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+/**
+ * Campo de data e campo de hora.
+ *
+ * Deliberadamente em cima do `<input type="date|time">` do browser: o calendário
+ * nativo é acessível, traduzido e com teclado, e um calendário próprio seria
+ * centenas de linhas para ficar pior. O que a biblioteca acrescenta é o aspeto
+ * uniforme e a mesma API dos restantes campos.
+ *
+ * O valor é sempre `yyyy-mm-dd` (data) e `hh:mm` (hora) — os formatos que o
+ * input devolve, independentemente do que o browser mostra ao utilizador.
+ */
+interface PropsBase {
+    value: string;
+    onChange: (valor: string) => void;
+    disabled?: boolean;
+    /** Para associar a uma etiqueta externa. */
+    id?: string;
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface InputDataProps extends PropsBase {
+    /** Limites, no mesmo formato do valor (yyyy-mm-dd). */
+    min?: string;
+    max?: string;
+}
+/**
+ * Migrado para o V1: adaptador do `DateInput` (dd/mm/aaaa sempre, calendário pelo ícone).
+ * @deprecated Legacy — usar o `DateInput` do V1. Ver Storybook › Legacy.
+ */
+export declare function InputData({ value, onChange, disabled, id, min, max }: InputDataProps): React.JSX.Element;
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface InputHoraProps extends PropsBase {
+    /** Passo em segundos; 60 esconde os segundos (o default do browser). */
+    step?: number;
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export declare function InputHora({ value, onChange, disabled, id, step }: InputHoraProps): React.JSX.Element;
+export default InputData;

package/dist/types/legacy/components/atoms/Label/Label.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './Label.scss';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+type Props = {
+    title: string;
+    type: 'cui-main_options' | 'cui-added' | 'cui-adding' | 'cui-form_title' | 'cui-choose_operator_title' | 'cui-add_operator_title' | 'cui-choose_operator_name' | 'cui-add_operator_name' | 'cui-title' | 'cui-mode' | 'cui-breadcrumb';
+    iconPrev?: IconProp;
+};
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const Label: ({ title, type, iconPrev }: Props) => React.JSX.Element;
+export default Label;

package/dist/types/legacy/components/atoms/MultiTagPickerTag/MultiTagPickerTag.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './MultiTagPickerTag.scss';
+interface TagProps {
+    id: string;
+    label: string;
+    selected: boolean;
+    handleTagChange: (changedTo: boolean) => void;
+}
+declare const Select: React.FC<TagProps>;
+export default Select;

package/dist/types/legacy/components/atoms/SearchSelect/SearchSelect.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './SearchSelect.scss';
+interface Option {
+    value: string;
+    label: string;
+}
+type Props = {
+    placeholder: string;
+    options: Option[];
+    option: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+};
+declare function SearchSelect({ placeholder, options, option, disabled, onChange, }: Props): React.JSX.Element;
+export default SearchSelect;