@proef/common-ui 2.6.5 → 2.6.6

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { type ButtonProps } from '../../../primitives/buttons/Button/Button';
+export interface DropdownMenuItemAction {
+    /** Ícone do botão pequeno (ex: um caixote do lixo). */
+    icon: React.ReactNode;
+    /** Nome do botão, para o tooltip e leitores de ecrã (ex: "Apagar vista"). */
+    label: string;
+    onSelect: () => void;
+}
+export interface DropdownMenuItem {
+    /** Normalmente texto; aceita JSX. */
+    label: React.ReactNode;
+    /** Linha pequena por baixo do texto. */
+    description?: React.ReactNode;
+    /** Ícone à esquerda (ex: um ícone do lucide com `size={14}`). */
+    icon?: React.ReactNode;
+    /** O que o item faz. Um item normal fecha o menu ao ser escolhido. */
+    onSelect?: () => void;
+    /**
+     * Item de marcar (✓ quando `true`). O menu fica aberto para se marcarem
+     * vários (ex: filtrar por tipos). `false` = por marcar, `undefined` = não é de marcar.
+     */
+    checked?: boolean;
+    /** A opção atual numa escolha de uma só (ex: a vista aplicada): ✓, e escolher fecha o menu como uma ação. */
+    selected?: boolean;
+    /** Apaga ou não se pode desfazer: a vermelho. */
+    danger?: boolean;
+    disabled?: boolean;
+    /** Linha a separar este item do anterior. */
+    separator?: boolean;
+    /** Texto para a pesquisa quando o `label` não é texto. */
+    searchText?: string;
+    /** Botão pequeno à direita do item (ex: apagar uma vista guardada). Não fecha o menu. */
+    action?: DropdownMenuItemAction;
+}
+export interface DropdownMenuLabels {
+    /** Nome do botão sem texto (⋯). */
+    more: string;
+    /** Texto da caixa de pesquisa. */
+    search: string;
+    /** Pesquisa sem resultados. */
+    noResults: string;
+    /** DropdownMenu sem itens (só aparece com `header`; sem `header` o menu nem se mostra). */
+    empty: string;
+}
+export declare const DEFAULT_DROPDOWN_MENU_LABELS: DropdownMenuLabels;
+export interface DropdownMenuProps {
+    /** Os itens; `false`, `null` e `undefined` são ignorados (para `cond && {...}`). */
+    items: (DropdownMenuItem | false | null | undefined)[];
+    /** Texto do botão (com uma seta). Sem texto, o botão é o ⋯ (ações de uma linha ou de um cartão). */
+    label?: React.ReactNode;
+    /** Ícone antes do texto do botão. Sem `label`, substitui o ⋯. */
+    icon?: React.ReactNode;
+    /** Nome do botão para leitores de ecrã e tooltip. Sem `label`, por omissão `labels.more`. */
+    'aria-label'?: string;
+    /** Aspeto do botão, como no Button. Por omissão `secondary` (com texto) ou `ghost` (⋯). */
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    /** Botão ligado (ex: há uma vista ou filtro aplicado). */
+    active?: boolean;
+    /** Para que lado abre a lista, a partir do botão. Por omissão `left` (com texto) ou `right` (⋯). */
+    align?: 'left' | 'right';
+    disabled?: boolean;
+    /** Conteúdo no topo da lista, antes dos itens (ex: campo "Guardar vista atual", filtros). */
+    header?: React.ReactNode;
+    /** Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 itens. */
+    searchable?: boolean;
+    labels?: Partial<DropdownMenuLabels>;
+    /** Classes da lista (ex: a largura, `w-64`). */
+    panelClassName?: string;
+    /** Classes da caixa à volta do botão. */
+    className?: string;
+    /** Avisa quando a lista abre ou fecha (ex: para limpar um campo do `header`). */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Botão que abre uma lista de ações ou opções: o ⋯ de uma linha, "Ações em massa", "Vistas guardadas",
+ * um filtro de escolha múltipla. A mesma lista do [SelectInput](?path=/docs/v1-primitives-forms-selectinput--docs).
+ *
+ * - **Ações**: escolher executa e fecha.
+ * - **Marcar** (`checked`): o item leva ✓ e a lista fica aberta para marcar vários.
+ * - **Escolher um** (`selected`): ✓ na opção atual; escolher fecha.
+ * - **Ação no item** (`action`): um botão pequeno à direita (ex: apagar uma vista).
+ * - **Topo livre** (`header`): ex: um campo para guardar a vista atual.
+ *
+ * Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha. Abre por cima de um
+ * [Dialog](?path=/docs/v1-components-overlays-dialog--docs) e os cliques não chegam a uma linha clicável por baixo.
+ *
+ * Substitui o `MenuAcoes` legacy.
+ */
+export default function DropdownMenu({ items, label, icon, 'aria-label': ariaLabel, variant, size, active, align, disabled, header, searchable, labels, panelClassName, className, onOpenChange, }: DropdownMenuProps): React.JSX.Element | null;
+export { DropdownMenu };

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

@@ -79,3 +79,5 @@ export declare function WarningIcon(props: IconProps): React.JSX.Element;
 export declare function ErrorIcon(props: IconProps): React.JSX.Element;
 /** Intervalo (mínimo e máximo). */
 export declare function SlidersIcon(props: IconProps): React.JSX.Element;
+/** Mais ações (⋯), ex: o botão do Menu sem texto. */
+export declare function MoreIcon(props: IconProps): React.JSX.Element;

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

@@ -8,7 +8,7 @@ export type { ScanQRCodesOptions } from './capabilities/documents/QRScanning/sca
 export { useTheme, applyTheme, themeBootScript, THEME_STORAGE_KEY } from './capabilities/theme/useTheme';
 export type { Theme } from './capabilities/theme/useTheme';
 export { useIsDark } from './capabilities/theme/useIsDark';
-export { QrCodeIcon, SparklesIcon, PrefilledIcon, LockIcon, InfoIcon, SearchIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, CloseIcon, MenuIcon, PanelOpenIcon, SunIcon, MoonIcon, MonitorIcon, GlobeIcon, LogOutIcon, ExternalLinkIcon, WarningIcon, ErrorIcon, ChevronUpIcon, ChevronRightIcon, ChevronsUpDownIcon, FilterIcon, LayersIcon, ListIcon, SlidersIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListBulletIcon, ListNumberedIcon, QuoteIcon, ImageIcon, MaximizeIcon, MinimizeIcon, } from './foundations/icons/icons';
+export { QrCodeIcon, SparklesIcon, PrefilledIcon, LockIcon, InfoIcon, SearchIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, CloseIcon, MenuIcon, PanelOpenIcon, SunIcon, MoonIcon, MonitorIcon, GlobeIcon, LogOutIcon, ExternalLinkIcon, WarningIcon, ErrorIcon, ChevronUpIcon, ChevronRightIcon, ChevronsUpDownIcon, FilterIcon, LayersIcon, ListIcon, SlidersIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListBulletIcon, ListNumberedIcon, QuoteIcon, ImageIcon, MaximizeIcon, MinimizeIcon, MoreIcon, } 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';
@@ -44,6 +44,8 @@ export type { ConfirmDialogProps, ConfirmOptions, ConfirmProviderProps } from '.
 export { default as Tooltip } from './components/overlays/Tooltip/Tooltip';
 export type { TooltipProps } from './components/overlays/Tooltip/Tooltip';
 export { default as TooltipLayer } from './components/overlays/Tooltip/TooltipLayer';
+export { default as DropdownMenu, DEFAULT_DROPDOWN_MENU_LABELS } from './components/overlays/DropdownMenu/DropdownMenu';
+export type { DropdownMenuProps, DropdownMenuItem, DropdownMenuItemAction, DropdownMenuLabels } from './components/overlays/DropdownMenu/DropdownMenu';
 export { default as ToastProvider, useToast } from './components/feedback/Toast/Toast';
 export type { ToastApi, ToastOptions, ToastProviderProps, ToastTone } from './components/feedback/Toast/Toast';
 export { default as AppShell } from './components/layout/AppShell/AppShell';
@@ -79,6 +81,8 @@ export type { KpiProps, KpiTone } from './primitives/display/Kpi/Kpi';
 export { default as Tabs } from './primitives/navigation/Tabs/Tabs';
 export type { TabsProps, TabsSingleProps, TabsMultipleProps, TabItem } from './primitives/navigation/Tabs/Tabs';
 export { default as SegmentedControl } from './primitives/buttons/SegmentedControl/SegmentedControl';
+export { default as Steps, DEFAULT_STEPS_LABELS } from './primitives/navigation/Steps/Steps';
+export type { StepsProps, StepItem, StepsLabels } from './primitives/navigation/Steps/Steps';
 export type { SegmentedControlProps, SegmentedOption } from './primitives/buttons/SegmentedControl/SegmentedControl';
 export { default as Table } from './components/tables/Table/Table';
 export type { TableProps, TableColumn, TableView, TableState } from './components/tables/Table/Table';

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

@@ -0,0 +1,49 @@
+import React from 'react';
+export interface StepItem<K extends string = string> {
+    id: K;
+    /** Normalmente texto; aceita JSX. */
+    label: React.ReactNode;
+    /** Passo já feito e válido (✓). */
+    done?: boolean;
+    /** Passo com alguma coisa por corrigir (!). */
+    error?: boolean;
+}
+export interface StepsLabels {
+    /** Acrescentado ao nome de um passo feito, para leitores de ecrã. */
+    done: string;
+    /** Acrescentado ao nome de um passo com erros, para leitores de ecrã. */
+    error: string;
+    /** No telemóvel, por cima do passo atual: "{current}" e "{total}" são os números. */
+    progress: string;
+}
+export declare const DEFAULT_STEPS_LABELS: StepsLabels;
+export interface StepsProps<K extends string = string> {
+    items: StepItem<K>[];
+    /** O passo atual. A app guarda este estado. */
+    value: K;
+    /** Sem isto, a barra só mostra onde se está (não se clica). */
+    onChange?: (id: K) => void;
+    /**
+     * Todos os passos clicáveis. Por omissão só os já feitos (para voltar atrás); num
+     * registo que já existe (editar, consultar) pode fazer sentido saltar para qualquer um.
+     */
+    free?: boolean;
+    /** Nome da barra, para leitores de ecrã (ex: "Atribuição de equipamento"). */
+    label?: string;
+    labels?: Partial<StepsLabels>;
+    className?: string;
+}
+/**
+ * Barra de passos de um fluxo em várias etapas (ex: Equipamentos → Colaborador →
+ * Termo → Concluído): onde se está, o que já está feito e o que tem erros.
+ *
+ * Fica por cima do conteúdo do passo, numa página ou num
+ * [Dialog](?path=/docs/v1-components-overlays-dialog--docs). Os botões Seguinte e
+ * Anterior são da app (normalmente no fundo do passo).
+ *
+ * No telemóvel mostra os números e só o nome do passo atual.
+ *
+ * Substitui os `Passos` legacy.
+ */
+export default function Steps<K extends string = string>({ items, value, onChange, free, label, labels, className, }: StepsProps<K>): React.JSX.Element;
+export { Steps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proef/common-ui",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",