@ishtar-sink/vega 0.1.0 → 0.2.0

package/README.md

@@ -17,16 +17,19 @@ A Vega nasce da extração do `@atria/ui` e do `@atria/theme`, a biblioteca e o
 
 | Grupo | Componentes e funções |
 |---|---|
-| Ações | `Button`, `IconButton`, `MenuButton` |
-| Campos | `TextField`, `SelectField`, `Checkbox`, `SegmentedField`, `Autocomplete`, `TagField`, `ColorField`, `ColorPicker`, `DEFAULT_COLOR_FIELD_LABELS`, `hexToRgb`, `rgbToHex`, `hslToRgb`, `rgbToHsl` |
+| Ações | `Button` (com `size` e `block` desde a 0.2.0), `IconButton`, `MenuButton` |
+| Campos | `TextField`, `SelectField`, `Checkbox`, `SegmentedField`, `Autocomplete`, `TagField`, `ColorField`, `ColorPicker`, `DEFAULT_COLOR_FIELD_LABELS`, `hexToRgb`, `rgbToHex`, `hslToRgb`, `rgbToHsl`; na 0.2.0, `Switch`, `RadioGroup`, `TextAreaField` |
 | Data e hora | `Calendar`, `DateField`, `TimeField`, `DateTimeField`, `PeriodField`, `parseTime`, `maskTime`, `resolvePeriod` |
 | Dinheiro | `MoneyField`, `maskMoneyInput`, `parseMoneyInput`, `formatCents` |
-| Estrutura | `Card`, `PageHeader`, `Toolbar`, `Tabs`, `ViewSwitcher`, `FormGrid`, `FormActions` |
-| Diálogos e avisos | `Dialog`, `ConfirmDialog`, `Toast`, `ToastRegion` |
-| Estados | `EmptyState`, `LoadingState`, `Skeleton`, `ErrorState`, `ProgressBar` |
+| Estrutura | `Card`, `PageHeader`, `Toolbar`, `Tabs`, `ViewSwitcher`, `FormGrid`, `FormActions`; na 0.2.0, `CardLink`, `CardButton`, `FocusHeader`, `Disclosure`, `Accordion` |
+| Diálogos e avisos | `Dialog`, `ConfirmDialog`, `Toast`, `ToastRegion`; na 0.2.0, `BottomSheet`, `Callout` |
+| Estados | `EmptyState`, `LoadingState`, `Skeleton`, `ErrorState`, `ProgressBar` (com `valueText` e `indeterminate` desde a 0.2.0) |
 | Marca e itens | `BrandLogo`, `Badge`, `ItemSwatch`, `ListIcon`, `GridIcon`, `ShelfIcon`, `TableIcon`, `DayIcon`, `TimelineIcon` |
+| Ícones de interface | Os 36 da seção [Ícones](#ícones), na 0.2.0 |
+| Navegação | `AppShell`, `Sidebar`, `BottomNav`, `Topbar`, na 0.2.0 |
+| Conteúdo | `Prose`, na 0.2.0, pela entrada `@ishtar-sink/vega/prose` |
 
-Todos os componentes da tabela estão na 0.1.0.
+Os grupos Ações, Campos, Data e hora, Dinheiro, Estrutura, Diálogos e avisos, Estados e Marca e itens entraram na 0.1.0; o que a tabela marca com 0.2.0, e os grupos Ícones de interface, Navegação e Conteúdo, entraram na 0.2.0.
 
 ## Princípios
 
@@ -69,6 +72,39 @@ export function Exemplo() {
 }
 ```
 
+## Ícones
+
+Os 36 ícones de interface vêm do [Lucide](https://lucide.dev), pelo pacote `lucide-react` (licença ISC), com os nomes da Vega: `HomeIcon`, `BookOpenIcon`, `LayersIcon`, `TimerIcon`, `UsersIcon`, `MenuIcon`, `ChevronLeftIcon`, `ChevronRightIcon`, `ChevronDownIcon`, `ArrowLeftIcon`, `CloseIcon`, `PlusIcon`, `MinusIcon`, `DownloadIcon`, `UploadIcon`, `FlagIcon`, `RefreshIcon`, `EyeIcon`, `CheckIcon`, `CircleCheckIcon`, `InfoIcon`, `AlertTriangleIcon`, `CircleAlertIcon`, `WifiOffIcon`, `CloudCheckIcon`, `UserIcon`, `SettingsIcon`, `LogOutIcon`, `SunIcon`, `MoonIcon`, `LightbulbIcon`, `ClockIcon`, `CalendarIcon`, `PencilIcon`, `SearchIcon` e `TrashIcon`.
+
+Os ícones são sempre decorativos (`aria-hidden`), usam a cor do texto (`currentColor`) e têm tamanho 16, 20 ou 24, com 20 por padrão. O nome acessível fica no elemento que contém o ícone.
+
+```tsx
+import { Button, HomeIcon } from '@ishtar-sink/vega';
+
+export function Inicio() {
+  return (
+    <Button variant="primary">
+      <HomeIcon size={16} />
+      Início
+    </Button>
+  );
+}
+```
+
+## Texto formatado (Prose)
+
+O `Prose` sai numa entrada própria, `@ishtar-sink/vega/prose`, para que quem não usa Markdown não carregue o parser. O HTML cru do texto é ignorado, e links com `javascript:`, `data:` ou `vbscript:` são bloqueados.
+
+```tsx
+import { Prose } from '@ishtar-sink/vega/prose';
+
+export function Licao({ texto }: { texto: string }) {
+  return <Prose markdown={texto} size="reading" />;
+}
+```
+
+Extensões do produto, como fórmulas de matemática, entram por `remarkPlugins` (sintaxe nova) e `components` (como cada elemento é renderizado), sem mudar a Vega.
+
 ## Tema próprio
 
 ```ts

package/dist/app-shell/app-shell.constants.d.ts

@@ -0,0 +1,13 @@
+/** Textos padrão da `Sidebar` e da `BottomNav`. */
+export declare const DEFAULT_NAV_LABELS: {
+    readonly navigation: "Principal";
+};
+/** Textos padrão do `AppShell`. */
+export declare const DEFAULT_APP_SHELL_LABELS: {
+    readonly skipToContent: "Pular para o conteúdo";
+    readonly openMenu: "Abrir menu";
+};
+/** Abaixo de 720 px a navegação vira gaveta ou barra inferior, como o `@media` dos estilos. */
+export declare const COMPACT_QUERY: string;
+/** Elementos que recebem foco dentro da gaveta. */
+export declare const FOCUSABLE = "a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";

package/dist/app-shell/app-shell.d.ts

@@ -0,0 +1,6 @@
+import { AppShellProps } from './app-shell.types';
+/**
+ * Estrutura da aplicação: link de pular, `Sidebar`, `Topbar` e `<main>`. Abaixo de 720 px, a
+ * navegação vira gaveta com botão de menu ou `BottomNav`, conforme `mobileNav`.
+ */
+export declare function AppShell({ sidebar, topbar, mobileNav, hideNavigation, children, labels, className, ...rest }: AppShellProps): import('react').JSX.Element;

package/dist/app-shell/app-shell.types.d.ts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { SidebarProps } from './sidebar.types';
+import { TopbarProps } from './topbar.types';
+export interface AppShellProps extends ComponentPropsWithRef<'div'> {
+    /** Props da `Sidebar`; a gaveta é controlada pelo próprio `AppShell`. */
+    sidebar: Omit<SidebarProps, 'drawer' | 'open' | 'onClose'>;
+    /** Props da `Topbar`; sem ela, a barra só aparece no modo gaveta, com o botão de menu. */
+    topbar?: TopbarProps;
+    /** Navegação abaixo de 720 px: gaveta com botão de menu ou barra inferior. Padrão: `drawer`. */
+    mobileNav?: 'drawer' | 'bottom';
+    /** Esconde toda a navegação (barra lateral, gaveta, barra inferior e link de pular). */
+    hideNavigation?: boolean;
+    /** Conteúdo da página, dentro do `<main>`. */
+    children: ReactNode;
+    /** Textos visíveis e nomes acessíveis. Padrão: `Pular para o conteúdo` e `Abrir menu`. */
+    labels?: Partial<{
+        skipToContent: string;
+        openMenu: string;
+    }>;
+}

package/dist/app-shell/bottom-nav.d.ts

@@ -0,0 +1,3 @@
+import { BottomNavProps } from './bottom-nav.types';
+/** Barra inferior fixa com 3 a 5 destinos, sempre com ícone e rótulo. */
+export declare function BottomNav({ items, renderLink, labels, className, ...rest }: BottomNavProps): import('react').JSX.Element;

package/dist/app-shell/bottom-nav.types.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef } from 'react';
+import { NavItem, RenderNavLink } from './nav.types';
+export interface BottomNavProps extends ComponentPropsWithRef<'nav'> {
+    /** De 3 a 5 destinos; fora disso, um aviso no console em desenvolvimento. */
+    items: readonly NavItem[];
+    /** Desenha cada link com o roteador do produto; sem ele, um `<a href>` simples. */
+    renderLink?: RenderNavLink;
+    /** Textos visíveis e nomes acessíveis. Padrão: `{ navigation: 'Principal' }`. */
+    labels?: Partial<{
+        navigation: string;
+    }>;
+}

package/dist/app-shell/nav-link.d.ts

@@ -0,0 +1,11 @@
+import { NavItem, RenderNavLink } from './nav.types';
+interface NavLinkProps {
+    item: NavItem;
+    className: string | undefined;
+    iconClassName?: string | undefined;
+    badgeClassName?: string | undefined;
+    renderLink?: RenderNavLink;
+}
+/** Link de um destino: usa o `renderLink` do produto ou, sem ele, um `<a href>` simples. */
+export declare function NavLink({ item, className, iconClassName, badgeClassName, renderLink, }: NavLinkProps): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import('react').JSX.Element | null | undefined;
+export {};

package/dist/app-shell/nav.types.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+/** Destino da navegação, usado pela `Sidebar`, pela `BottomNav` e pelo `AppShell`. */
+export interface NavItem {
+    /** Identificador estável do destino, usado como chave. */
+    id: string;
+    /** Rótulo visível do destino. */
+    label: string;
+    /** Ícone em SVG inline; fica dentro de um `<span aria-hidden="true">`. */
+    icon: ReactNode;
+    /** Endereço do destino, usado pelo `<a>` simples ou pelo `renderLink`. */
+    href: string;
+    /** Marca o destino atual com `aria-current="page"`. */
+    current?: boolean;
+    /** Selo opcional ao lado do rótulo (ex.: a contagem de pendências). */
+    badge?: ReactNode;
+}
+/** Desenha o link com o componente do roteador do produto, repassando as props recebidas. */
+export type RenderNavLink = (item: NavItem, props: {
+    className: string;
+    'aria-current'?: 'page';
+    children: ReactNode;
+}) => ReactNode;

package/dist/app-shell/sidebar.d.ts

@@ -0,0 +1,3 @@
+import { SidebarProps } from './sidebar.types';
+/** Barra lateral com a marca, a navegação principal e o rodapé; vira gaveta com `drawer`. */
+export declare function Sidebar({ brand, items, renderLink, footer, drawer, open, onClose, labels, className, onKeyDown, ref, ...rest }: SidebarProps): import('react').JSX.Element;

package/dist/app-shell/sidebar.types.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { NavItem, RenderNavLink } from './nav.types';
+export interface SidebarProps extends ComponentPropsWithRef<'aside'> {
+    /** Marca do produto, no topo da barra. */
+    brand: ReactNode;
+    /** Destinos da navegação principal. */
+    items: readonly NavItem[];
+    /** Desenha cada link com o roteador do produto; sem ele, um `<a href>` simples. */
+    renderLink?: RenderNavLink;
+    /** Conteúdo do rodapé (ex.: conta, tema, ajustes). */
+    footer?: ReactNode;
+    /** Modo gaveta: barra fixa sobre o conteúdo, com foco preso enquanto aberta. Padrão: `false`. */
+    drawer?: boolean;
+    /** Gaveta aberta; fechada, ela fica `inert`. Só vale com `drawer`. */
+    open?: boolean;
+    /** Chamado no Escape e ao escolher um link com a gaveta aberta. */
+    onClose?: () => void;
+    /** Textos visíveis e nomes acessíveis. Padrão: `{ navigation: 'Principal' }`. */
+    labels?: Partial<{
+        navigation: string;
+    }>;
+}

package/dist/app-shell/topbar.d.ts

@@ -0,0 +1,3 @@
+import { TopbarProps } from './topbar.types';
+/** Barra superior com os slots de início, meio e fim. */
+export declare function Topbar({ start, center, end, className, ...rest }: TopbarProps): import('react').JSX.Element;

package/dist/app-shell/topbar.types.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface TopbarProps extends ComponentPropsWithRef<'header'> {
+    /** Slot do início da barra (ex.: o botão de menu ou o voltar). */
+    start?: ReactNode;
+    /** Slot do meio da barra (ex.: o título da tela). */
+    center?: ReactNode;
+    /** Slot do fim da barra (ex.: ações e busca). */
+    end?: ReactNode;
+}

package/dist/app-shell/use-focus-trap.d.ts

@@ -0,0 +1,6 @@
+import { KeyboardEvent, RefObject } from 'react';
+/**
+ * Prende o foco dentro de `ref` enquanto `active`: foca o primeiro item ao ativar, faz o Tab dar a
+ * volta e entrega o Escape a `onEscape`. Devolve o `onKeyDown` a ligar no elemento.
+ */
+export declare function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean, onEscape?: () => void): (event: KeyboardEvent<HTMLElement>) => void;

package/dist/app-shell/use-media-query.d.ts

@@ -0,0 +1,2 @@
+/** Diz se a media query casa agora e acompanha as mudanças de largura da janela. */
+export declare function useMediaQuery(query: string): boolean;

package/dist/bottom-sheet/bottom-sheet.constants.d.ts

@@ -0,0 +1,3 @@
+import { BottomSheetLabels } from './bottom-sheet.types';
+export declare const DEFAULT_LABELS: BottomSheetLabels;
+export declare const FOCUSABLE = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";

package/dist/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,3 @@
+import { BottomSheetProps } from './bottom-sheet.types';
+/** Folha modal sobre o `<dialog>` nativo: embaixo em telas estreitas e na lateral a partir de 720 px. */
+export declare function BottomSheet({ open, onClose, title, description, footer, placement, labels, children, className, ref, ...rest }: BottomSheetProps): import('react').JSX.Element | null;

package/dist/bottom-sheet/bottom-sheet.types.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+/** Posição da folha: `auto` fica embaixo abaixo de 720 px e na lateral a partir daí. */
+export type BottomSheetPlacement = 'auto' | 'bottom' | 'side';
+/** Textos visíveis do `BottomSheet`. */
+export interface BottomSheetLabels {
+    /** Nome acessível do botão de fechar. Padrão: `Fechar`. */
+    close: string;
+}
+export interface BottomSheetProps extends Omit<ComponentPropsWithRef<'dialog'>, 'title' | 'open'> {
+    /** Abre a folha como modal (`showModal()`); ao ficar `false`, fecha e devolve o foco. */
+    open: boolean;
+    /** Chamado no Esc, no clique no fundo e no botão de fechar. */
+    onClose: () => void;
+    /** Título, lido como nome acessível. */
+    title: ReactNode;
+    /** Descrição curta, ligada ao diálogo por `aria-describedby`. */
+    description?: ReactNode;
+    /** Rodapé fixo, fora da rolagem do conteúdo. */
+    footer?: ReactNode;
+    /** Posição da folha. Padrão: `auto`. */
+    placement?: BottomSheetPlacement;
+    /** Sobrescreve os textos padrão. */
+    labels?: Partial<BottomSheetLabels>;
+    /** Conteúdo rolável. */
+    children: ReactNode;
+}

package/dist/bottom-sheet/use-bottom-sheet.d.ts

@@ -0,0 +1,14 @@
+import { KeyboardEvent, MouseEvent, Ref, SyntheticEvent } from 'react';
+interface UseBottomSheetArgs {
+    open: boolean;
+    onClose: () => void;
+    ref?: Ref<HTMLDialogElement>;
+}
+/** Abre o `<dialog>` como modal, prende o Tab e devolve o foco a quem abriu. */
+export declare function useBottomSheet({ open, onClose, ref }: UseBottomSheetArgs): {
+    dialogRef: import('react').RefObject<HTMLDialogElement | null>;
+    onKeyDown: (event: KeyboardEvent<HTMLDialogElement>) => void;
+    onCancel: (event: SyntheticEvent<HTMLDialogElement>) => void;
+    onClick: (event: MouseEvent<HTMLDialogElement>) => void;
+};
+export {};

package/dist/button/button.d.ts

@@ -7,5 +7,9 @@ export interface ButtonProps extends ComponentPropsWithRef<'button'> {
     loading?: boolean;
     /** Cor CSS usada pela variação `muted` (ex.: a cor de uma categoria). */
     tint?: string;
+    /** `lg`: altura mínima de 48 px. Padrão: `md`. */
+    size?: 'md' | 'lg';
+    /** Ocupa a largura toda do contêiner. */
+    block?: boolean;
 }
-export declare function Button({ variant, loading, tint, type, disabled, className, style, children, ...rest }: ButtonProps): import('react').JSX.Element;
+export declare function Button({ variant, loading, tint, size, block, type, disabled, className, style, children, ...rest }: ButtonProps): import('react').JSX.Element;

package/dist/callout/callout.constants.d.ts

@@ -0,0 +1,4 @@
+import { InfoIcon } from '../icons/interface-icons';
+import { CalloutTone } from './callout.types';
+/** Ícone padrão de cada tom. */
+export declare const TONE_ICONS: Record<CalloutTone, typeof InfoIcon>;

package/dist/callout/callout.d.ts

@@ -0,0 +1,3 @@
+import { CalloutProps } from './callout.types';
+/** Aviso fixo na página, com tom, ícone, ação e região viva opcional. */
+export declare function Callout({ tone, title, icon, action, live, className, role, children, ...rest }: CalloutProps): import('react').JSX.Element;

package/dist/callout/callout.types.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type CalloutTone = 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+export interface CalloutProps extends Omit<ComponentPropsWithRef<'aside'>, 'title'> {
+    /** Tom do aviso, que define o fundo, a cor e o ícone. Padrão: `neutral`. */
+    tone?: CalloutTone;
+    /** Título do aviso; também dá o nome acessível ao `<aside>`. */
+    title?: ReactNode;
+    /** Ícone no lugar do padrão do tom; `false` remove o ícone. */
+    icon?: ReactNode | false;
+    /** Ação no fim do aviso, como um botão ou um link. */
+    action?: ReactNode;
+    /** `polite` anuncia o aviso como região viva (`role="status"`). Padrão: `off`. */
+    live?: 'off' | 'polite';
+}

package/dist/card-link/card-button.d.ts

@@ -0,0 +1,3 @@
+import { CardButtonProps } from './card-link.types';
+export type { CardButtonProps } from './card-link.types';
+export declare function CardButton({ tone, type, className, ...rest }: CardButtonProps): import('react').JSX.Element;

package/dist/card-link/card-link.d.ts

@@ -0,0 +1,3 @@
+import { CardLinkProps } from './card-link.types';
+export type { CardLinkProps } from './card-link.types';
+export declare function CardLink({ tone, className, children, ...rest }: CardLinkProps): import('react').JSX.Element;

package/dist/card-link/card-link.types.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef } from 'react';
+import { CardTone } from '../card/card';
+export interface CardLinkProps extends ComponentPropsWithRef<'a'> {
+    /** Tom do fundo e da borda, o mesmo do `Card`. Padrão: `default`. */
+    tone?: CardTone;
+}
+export interface CardButtonProps extends ComponentPropsWithRef<'button'> {
+    /** Tom do fundo e da borda, o mesmo do `Card`. Padrão: `default`. */
+    tone?: CardTone;
+}

package/dist/disclosure/accordion-context.d.ts

@@ -0,0 +1,5 @@
+export interface AccordionContextValue {
+    name: string;
+    onOpen: (details: HTMLDetailsElement) => void;
+}
+export declare const AccordionContext: import('react').Context<AccordionContextValue | null>;

package/dist/disclosure/accordion.d.ts

@@ -0,0 +1,3 @@
+import { AccordionProps } from './disclosure.types';
+/** Agrupa `Disclosure`: no `single`, abrir um fecha os outros do grupo. */
+export declare function Accordion({ type, ref, ...rest }: AccordionProps): import('react').JSX.Element;

package/dist/disclosure/disclosure.d.ts

@@ -0,0 +1,3 @@
+import { DisclosureProps } from './disclosure.types';
+/** Seção recolhível sobre `<details>` e `<summary>` nativos. */
+export declare function Disclosure({ title, icon, open, defaultOpen, onOpenChange, tone, className, children, ...rest }: DisclosureProps): import('react').JSX.Element;

package/dist/disclosure/disclosure.types.d.ts

@@ -0,0 +1,24 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type DisclosureTone = 'default' | 'accent' | 'warning' | 'info';
+export interface DisclosureProps extends Omit<ComponentPropsWithRef<'details'>, 'title' | 'open' | 'onToggle'> {
+    /** Título, exibido no resumo e lido como nome acessível. */
+    title: ReactNode;
+    /** Ícone decorativo antes do título. */
+    icon?: ReactNode;
+    /** Estado aberto. Quando definido, o componente é controlado. */
+    open?: boolean;
+    /** Estado inicial quando não controlado. Padrão: `false`. */
+    defaultOpen?: boolean;
+    /** Chamado com o novo estado; no modo controlado, o pai decide se muda `open`. */
+    onOpenChange?: (open: boolean) => void;
+    /** Tom do fundo, do título e do ícone. Padrão: `default`. */
+    tone?: DisclosureTone;
+}
+export interface AccordionProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * `single` mantém só um `Disclosure` aberto (use-os não controlados); `multiple` os deixa
+     * independentes. Padrão: `multiple`.
+     */
+    type?: 'single' | 'multiple';
+    children: ReactNode;
+}

package/dist/disclosure/use-disclosure.d.ts

@@ -0,0 +1,22 @@
+import { KeyboardEvent, MouseEvent, SyntheticEvent } from 'react';
+interface Options {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** Estado controlado ou não do `<details>`, teclado do resumo e aviso ao `Accordion`. */
+export declare function useDisclosure({ open, defaultOpen, onOpenChange }: Options): {
+    detailsProps: {
+        open: true | undefined;
+        onToggle: (event: SyntheticEvent<HTMLDetailsElement>) => void;
+    } | {
+        open: boolean;
+        onToggle?: undefined;
+    };
+    summaryProps: {
+        onClick: (event: MouseEvent<HTMLElement>) => void;
+        onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    };
+    accordion: import('./accordion-context').AccordionContextValue | null;
+};
+export {};

package/dist/focus-header/focus-header.constants.d.ts

@@ -0,0 +1,2 @@
+import { FocusHeaderLabels } from './focus-header.types';
+export declare const DEFAULT_FOCUS_HEADER_LABELS: FocusHeaderLabels;

package/dist/focus-header/focus-header.d.ts

@@ -0,0 +1,3 @@
+import { FocusHeaderProps } from './focus-header.types';
+export type { FocusHeaderProps, FocusHeaderLabels } from './focus-header.types';
+export declare function FocusHeader({ title, onExit, position, progress, labels, className, ...rest }: FocusHeaderProps): import('react').JSX.Element;

package/dist/focus-header/focus-header.types.d.ts

@@ -0,0 +1,24 @@
+import { ComponentPropsWithRef } from 'react';
+export interface FocusHeaderLabels {
+    /** Nome acessível do botão de sair. Padrão: `Sair`. */
+    exit: string;
+}
+export interface FocusHeaderProps extends Omit<ComponentPropsWithRef<'header'>, 'title'> {
+    /** Título do fluxo, exibido como `h1` em uma linha. */
+    title: string;
+    /** Chamado quando a pessoa aciona o botão de sair. */
+    onExit: () => void;
+    /** Posição no fluxo, em texto livre (ex.: `3/8`). */
+    position?: string;
+    /** Progresso do fluxo; sem ele a barra não aparece. */
+    progress?: {
+        /** Valor atual. */
+        value: number;
+        /** Valor que representa 100%. */
+        max: number;
+        /** Nome acessível da barra. */
+        label: string;
+    };
+    /** Textos sobrescrevíveis, com padrão em pt-br. */
+    labels?: Partial<FocusHeaderLabels>;
+}

package/dist/icons/icon.d.ts

@@ -0,0 +1,10 @@
+import { LucideIcon } from 'lucide-react';
+import { IconProps } from './icon.types';
+/**
+ * Embrulha um ícone do `lucide-react` com os padrões da Vega: traço `currentColor`
+ * de espessura 2 e tamanho 20.
+ */
+export declare function createIcon(Lucide: LucideIcon, displayName: string): {
+    ({ size, ...rest }: IconProps): import('react').JSX.Element;
+    displayName: string;
+};

package/dist/icons/icon.types.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithRef } from 'react';
+export interface IconProps extends Omit<ComponentPropsWithRef<'svg'>, 'children'> {
+    /** Lado em px. Padrão: 20. */
+    size?: 16 | 20 | 24;
+}

package/dist/icons/index.d.ts

@@ -1,2 +1,4 @@
 export { ListIcon, GridIcon, ShelfIcon, TableIcon, DayIcon, TimelineIcon } from './view-icons';
 export type { ViewIconProps } from './view-icons';
+export { HomeIcon, BookOpenIcon, LayersIcon, TimerIcon, UsersIcon, MenuIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ArrowLeftIcon, CloseIcon, PlusIcon, MinusIcon, DownloadIcon, UploadIcon, FlagIcon, RefreshIcon, EyeIcon, CheckIcon, CircleCheckIcon, InfoIcon, AlertTriangleIcon, CircleAlertIcon, WifiOffIcon, CloudCheckIcon, UserIcon, SettingsIcon, LogOutIcon, SunIcon, MoonIcon, LightbulbIcon, ClockIcon, CalendarIcon, PencilIcon, SearchIcon, TrashIcon, } from './interface-icons';
+export type { IconProps } from './icon.types';

package/dist/icons/interface-icons.d.ts

@@ -0,0 +1,144 @@
+export declare const HomeIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const BookOpenIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const LayersIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const TimerIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const UsersIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const MenuIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const ChevronLeftIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const ChevronRightIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const ChevronDownIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const ArrowLeftIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const CloseIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const PlusIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const MinusIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const DownloadIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const UploadIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const FlagIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const RefreshIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const EyeIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const CheckIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const CircleCheckIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const InfoIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const AlertTriangleIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const CircleAlertIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const WifiOffIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const CloudCheckIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const UserIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const SettingsIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const LogOutIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const SunIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const MoonIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const LightbulbIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const ClockIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const CalendarIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const PencilIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const SearchIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};
+export declare const TrashIcon: {
+    ({ size, ...rest }: import('./icon.types').IconProps): import('react').JSX.Element;
+    displayName: string;
+};