@ishtar-sink/vega 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,100 @@
-# Temporary Holding Version
+# Vega
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Biblioteca de componentes React e temas do ecossistema [Ishtar Sink](https://github.com/Ishtar-Sink). Todo produto da organização monta a interface com as mesmas peças (botões, campos, diálogos, avisos, abas, cartões) e recebe daqui o tema. O tema do Ishtar Sink é o padrão: quando ele muda aqui, todos os produtos que o usam acompanham na próxima atualização. Quem precisar pode trocar a paleta pela sua.
+
+Código aberto (AGPL-3.0) e aberto a qualquer projeto, dentro ou fora do ecossistema.
+
+A Vega nasce da extração do `@atria/ui` e do `@atria/theme`, a biblioteca e o tema que o [Atria](https://github.com/Ishtar-Sink/Atria) construiu para a própria interface, e é publicada como `@ishtar-sink/vega`. As mudanças de cada versão estão no [CHANGELOG](CHANGELOG.md).
+
+## Temas
+
+- **Tema Ishtar Sink, padrão.** É a paleta das [diretrizes do ecossistema](https://github.com/Ishtar-Sink/.github/blob/main/docs/identidade-ecossistema.md), nos temas claro e escuro, junto com a tipografia (Outfit e Inter), os raios, o espaço e o movimento.
+- **Paleta própria.** Uma aplicação cria o próprio tema com a API de tema da Vega, preenchendo os mesmos tokens (`bg`, `surface`, `primary`, `success`, os `*Soft`…) nos dois temas, e passa esse tema para os componentes. Nenhum componente tem cor fixa.
+- **Contraste verificado.** A Vega traz as verificações de contraste que o tema padrão usa (AA para texto), para que um tema próprio passe pelas mesmas regras nos testes da aplicação.
+- **Troca em tempo de execução.** A camada de marca pode ser sobrescrita sem rebuild, o que permite o white label por instância nos produtos que o oferecem.
+
+## Componentes
+
+| 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` |
+| 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` |
+| Marca e itens | `BrandLogo`, `Badge`, `ItemSwatch`, `ListIcon`, `GridIcon`, `ShelfIcon`, `TableIcon`, `DayIcon`, `TimelineIcon` |
+
+Todos os componentes da tabela estão na 0.1.0.
+
+## Princípios
+
+- **Uma fonte para a identidade.** Os componentes leem os tokens do tema e não declaram cor, raio, espaço nem fonte próprios.
+- **Acessível por padrão.** Cada componente é testado com axe e com navegação por teclado, e o contraste dos tokens é verificado em AA.
+- **Tema claro e escuro.** Os dois funcionam sem configuração, com o claro como padrão.
+- **Sem dependência de serviço externo.** Fontes e ícones vêm junto com o pacote, nunca de um CDN em tempo de execução.
+- **Nenhum produto do ecossistema recria um componente que já existe aqui.** Se faltar algo, o componente entra na Vega, não no produto.
+
+## Instalação
+
+```bash
+pnpm add @ishtar-sink/vega react react-dom
+```
+
+`react` e `react-dom` `^19.3.1` são peer dependencies.
+
+## Estilos
+
+```ts
+import '@ishtar-sink/vega/tokens.css';
+import '@ishtar-sink/vega/styles.css';
+```
+
+O `tokens.css` traz as variáveis dos dois temas e as fontes; o `styles.css`, o CSS dos componentes. Importe os dois uma vez, na entrada da aplicação, nessa ordem.
+
+O tema claro é o padrão. Para o escuro, use `data-theme="dark"` num elemento ancestral, como o `<html>`. A marca pode ser sobrescrita por variáveis como `--primary` num contêiner, sem rebuild.
+
+## Uso
+
+```tsx
+import { Button, Card } from '@ishtar-sink/vega';
+
+export function Exemplo() {
+  return (
+    <Card>
+      <Button variant="primary">Salvar</Button>
+    </Card>
+  );
+}
+```
+
+## Tema próprio
+
+```ts
+import { dark, defineTheme, light } from '@ishtar-sink/vega';
+
+export const meuTema = defineTheme({
+  light: { ...light, primary: '#115e59' },
+  dark: { ...dark, primary: '#5eead4' },
+});
+```
+
+Um teste da aplicação confere que o tema passa nas mesmas regras de contraste do tema padrão:
+
+```ts
+import { checkThemeContrast } from '@ishtar-sink/vega';
+import { meuTema } from './tema';
+
+it('o tema próprio passa no contraste AA', () => {
+  expect(checkThemeContrast(meuTema)).toEqual([]);
+});
+```
+
+## Sobre o nome
+
+Vega, a estrela mais brilhante da Lira, é a referência de brilho da astronomia: por séculos, o brilho de todas as outras estrelas foi medido em relação a ela, que é o ponto zero da escala de magnitude. A biblioteca é a referência visual contra a qual todos os produtos do Ishtar Sink se medem, mesmo os que escolhem uma cor própria.
+
+## Licença
+
+[AGPL-3.0](LICENSE).

package/dist/autocomplete/autocomplete.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithRef } from 'react';
+export interface AutocompleteOption<T extends string | number> {
+    value: T;
+    label: string;
+}
+interface AutocompleteBaseProps<T extends string | number> extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'multiple' | 'type' | 'role' | 'children'> {
+    /** Rótulo visível do campo. */
+    label: string;
+    /** Opções da lista. */
+    options: readonly AutocompleteOption<T>[];
+    /** Texto de ajuda abaixo do campo. */
+    help?: string;
+    /** Mensagem de erro; aparece com `role="alert"` e marca o campo como inválido. */
+    error?: string;
+    /** Chamada quando o campo perde o foco com a lista fechada. */
+    onBlur?: () => void;
+    /** Texto mostrado quando nenhuma opção combina com o que foi digitado; padrão `Nenhuma opção encontrada`. */
+    emptyText?: string;
+    /** Nome da lista de pílulas, só no modo múltiplo; padrão `{label} escolhidas`. */
+    listLabel?: string;
+    /** Nome do "×" de cada pílula, só no modo múltiplo; padrão `Remover {opção}`. */
+    removeLabel?: (label: string) => string;
+}
+export interface AutocompleteSingleProps<T extends string | number> extends AutocompleteBaseProps<T> {
+    multiple?: false;
+    value: T | null;
+    onChange: (value: T | null) => void;
+}
+export interface AutocompleteMultipleProps<T extends string | number> extends AutocompleteBaseProps<T> {
+    multiple: true;
+    value: readonly T[];
+    onChange: (value: T[]) => void;
+}
+export type AutocompleteProps<T extends string | number> = AutocompleteSingleProps<T> | AutocompleteMultipleProps<T>;
+export declare function Autocomplete<T extends string | number>(props: AutocompleteSingleProps<T>): React.JSX.Element;
+export declare function Autocomplete<T extends string | number>(props: AutocompleteMultipleProps<T>): React.JSX.Element;
+export {};

package/dist/badge/badge.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef } from 'react';
+export type BadgeTone = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+export interface BadgeProps extends ComponentPropsWithRef<'span'> {
+    /** Tom do selo; o fundo é sempre o *Soft do tom e o texto diz o estado, sem depender só da cor. Padrão: primary. */
+    tone?: BadgeTone;
+}
+/** Selo curto de estado ou categoria. */
+export declare function Badge({ tone, className, ...rest }: BadgeProps): import('react').JSX.Element;

package/dist/brand-logo/brand-logo.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface BrandLogoProps extends ComponentPropsWithRef<'div'> {
+    /** Nome do produto ao lado da marca, já traduzido por quem usa. */
+    name: string;
+    /** Desenho da marca (SVG ou imagem), mostrado no quadrado em gradiente; é decorativo, o nome é o texto acessível. */
+    mark: ReactNode;
+}
+/** Marca de um produto: quadrado em gradiente com o desenho recebido e o nome em texto com gradiente. */
+export declare function BrandLogo({ name, mark, className, ...rest }: BrandLogoProps): import('react').JSX.Element;

package/dist/button/button.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithRef } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'muted' | 'success';
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+    /** Variação visual. Padrão: `secondary`. */
+    variant?: ButtonVariant;
+    /** Mostra o indicador, anuncia `aria-busy` e bloqueia o clique. */
+    loading?: boolean;
+    /** Cor CSS usada pela variação `muted` (ex.: a cor de uma categoria). */
+    tint?: string;
+}
+export declare function Button({ variant, loading, tint, type, disabled, className, style, children, ...rest }: ButtonProps): import('react').JSX.Element;

package/dist/calendar/calendar.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithRef } from 'react';
+export interface CalendarValue {
+    /** `YYYY-MM-DD` ou `''`. */
+    from: string;
+    to?: string;
+}
+export interface CalendarLabels {
+    previous: string;
+    next: string;
+    /** Sufixo do dia atual no nome acessível ("hoje"). */
+    today: string;
+}
+export interface CalendarProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    /** `single` escolhe um dia; `range` escolhe um intervalo com dois cliques. */
+    mode: 'single' | 'range';
+    /** Mês exibido, `YYYY-MM`. */
+    month: string;
+    onMonthChange: (month: string) => void;
+    value: CalendarValue;
+    onChange: (value: CalendarValue) => void;
+    /** Dia atual, `YYYY-MM-DD`. */
+    today: string;
+    /** Locale das datas e dos nomes de mês e dia. Padrão: `pt-BR`. */
+    locale?: string;
+    /** Textos do calendário; o que faltar usa o padrão em pt-br, qualquer que seja o `locale`. */
+    labels?: Partial<CalendarLabels>;
+}
+export declare function Calendar({ mode, month, onMonthChange, value, onChange, today, locale, labels, className, ref, ...rest }: CalendarProps): import('react').JSX.Element;

package/dist/card/card.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef } from 'react';
+export type CardTone = 'default' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+export interface CardProps extends ComponentPropsWithRef<'div'> {
+    /** Elemento HTML da raiz. Padrão: `div`. */
+    as?: 'div' | 'section' | 'article';
+    /** Tom do fundo e da borda. Padrão: `default`. */
+    tone?: CardTone;
+}
+export declare function Card({ as: Tag, tone, className, ...rest }: CardProps): import('react').JSX.Element;

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef } from 'react';
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type'> {
+    /** Rótulo visível ao lado da caixa. */
+    label: string;
+}
+export declare function Checkbox({ label, id, className, style, ...rest }: CheckboxProps): import('react').JSX.Element;

package/dist/color-field/color-field.d.ts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithRef } from 'react';
+import { ColorFieldLabels } from './color-picker';
+export type { ColorFieldLabels } from './color-picker';
+export interface ColorFieldProps extends Omit<ComponentPropsWithRef<'button'>, 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'children' | 'type'> {
+    /** Rótulo visível do campo. */
+    label: string;
+    /** HEX atual. */
+    value: string;
+    /** Chamado com o HEX `#RRGGBB` ao aplicar. */
+    onChange: (hex: string) => void;
+    /** Chamado quando o diálogo fecha. */
+    onBlur?: () => void;
+    /** Textos do campo e do seletor; os que faltarem usam o padrão em pt-br. */
+    labels?: Partial<ColorFieldLabels>;
+    /** Mensagem de erro, anunciada com `role="alert"`. */
+    error?: string;
+    /** Texto de ajuda sob o campo. */
+    help?: string;
+}
+export declare function ColorField({ label, value, onChange, onBlur, labels, error, help, id, className, style, ref, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...rest }: ColorFieldProps): import('react').JSX.Element;

package/dist/color-field/color-picker.d.ts

@@ -0,0 +1,42 @@
+import { ComponentPropsWithRef } from 'react';
+/** Textos do campo de cor e do seletor. */
+export interface ColorFieldLabels {
+    /** Título do diálogo. */
+    title: string;
+    /** Rótulo do controle de luminosidade. */
+    lightness: string;
+    /** Rótulo do campo HEX. */
+    hex: string;
+    /** Legenda do grupo RGB. */
+    rgb: string;
+    /** Rótulo do canal vermelho. */
+    red: string;
+    /** Rótulo do canal verde. */
+    green: string;
+    /** Rótulo do canal azul. */
+    blue: string;
+    /** Legenda do grupo HSL. */
+    hsl: string;
+    /** Rótulo do matiz. */
+    hue: string;
+    /** Rótulo da saturação. */
+    saturation: string;
+    /** Texto do botão que cancela. */
+    cancel: string;
+    /** Texto do botão que aplica. */
+    apply: string;
+    /** Nome da roda de matiz e saturação. */
+    wheel: string;
+    /** Texto do valor da roda para leitores de tela. */
+    wheelValue: (hue: number, saturation: number) => string;
+}
+export declare const DEFAULT_COLOR_FIELD_LABELS: ColorFieldLabels;
+export interface ColorPickerProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'children' | 'defaultValue'> {
+    /** Cor inicial (HEX); o seletor guarda o próprio estado depois disso. */
+    value: string;
+    /** Chamado com o HEX `#RRGGBB` a cada mudança. */
+    onChange: (hex: string) => void;
+    /** Textos do seletor; os que faltarem usam o padrão em pt-br. */
+    labels?: Partial<ColorFieldLabels>;
+}
+export declare function ColorPicker({ value, onChange, labels, className, style, ...rest }: ColorPickerProps): import('react').JSX.Element;

package/dist/color-field/color.d.ts

@@ -0,0 +1,11 @@
+export type Rgb = [number, number, number];
+/** Limita `value` ao intervalo de `min` a `max`. */
+export declare function clamp(value: number, min: number, max: number): number;
+/** Converte HSL (matiz, saturação e luminosidade) em RGB (0 a 255 por canal). */
+export declare function hslToRgb(h: number, s: number, l: number): Rgb;
+/** Converte RGB (0 a 255 por canal) em HSL (matiz, saturação e luminosidade). */
+export declare function rgbToHsl(r: number, g: number, b: number): Rgb;
+/** Converte os canais RGB em `#RRGGBB` maiúsculo. */
+export declare function rgbToHex(rgb: readonly number[]): string;
+/** Aceita 3 ou 6 dígitos, com ou sem `#`; `null` se inválido. */
+export declare function hexToRgb(hex: string): Rgb | null;

package/dist/confirm-dialog/confirm-dialog.d.ts

@@ -0,0 +1,15 @@
+import { DialogProps } from '../dialog/dialog';
+export interface ConfirmDialogProps extends Omit<DialogProps, 'children' | 'actions' | 'role' | 'onClose'> {
+    /** Texto explicativo do corpo, lido como descrição do diálogo. */
+    description: string;
+    /** Rótulo do botão de confirmar. Padrão: `Confirmar`. */
+    confirmLabel?: string;
+    /** Rótulo do botão de cancelar. Padrão: `Cancelar`. */
+    cancelLabel?: string;
+    /** Chamado ao confirmar. */
+    onConfirm: () => void;
+    /** Chamado ao cancelar ou ao apertar Esc. */
+    onCancel: () => void;
+}
+/** Confirmação simples, montada sobre o `Dialog`. */
+export declare function ConfirmDialog({ description, confirmLabel, cancelLabel, onConfirm, onCancel, ...rest }: ConfirmDialogProps): import('react').JSX.Element;

package/dist/date-field/date-field.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithRef } from 'react';
+export interface DateFieldLabels {
+    /** Texto do gatilho sem data. */
+    placeholder: string;
+    /** Botão que escolhe o dia atual. */
+    today: string;
+    /** Botão que limpa a data. */
+    clear: string;
+    /** Nome do botão do mês anterior. */
+    previous: string;
+    /** Nome do botão do próximo mês. */
+    next: string;
+    /** Sufixo do dia atual no nome acessível. */
+    todayMarker: string;
+}
+export interface DateFieldProps extends Omit<ComponentPropsWithRef<'button'>, 'onChange' | 'onBlur' | 'value' | 'defaultValue' | 'children' | 'type'> {
+    /** Rótulo visível do campo. */
+    label: string;
+    /** Data no formato `YYYY-MM-DD`, ou `''` quando vazia. */
+    value: string;
+    /** Chamado com a data escolhida (`YYYY-MM-DD`) ou `''` ao limpar. */
+    onChange: (value: string) => void;
+    /** Chamado quando o calendário fecha por clique fora, sem escolher. */
+    onBlur?: () => void;
+    /** Locale das datas. Padrão: `pt-BR`. */
+    locale?: string;
+    /** Textos do campo; o que faltar usa o padrão em pt-br, qualquer que seja o `locale`. */
+    labels?: Partial<DateFieldLabels>;
+    /** Dia atual (`YYYY-MM-DD`); padrão: a data do navegador, lida só quando a prop falta. */
+    today?: string;
+    /** Esconde o rótulo visualmente, mantendo-o para leitores de tela. */
+    hideLabel?: boolean;
+    /** Texto de ajuda abaixo do campo. */
+    help?: string;
+    /** Mensagem de erro; aparece com `role="alert"` e marca o campo como inválido. */
+    error?: string;
+}
+export declare function DateField({ label, value, onChange, onBlur, locale, labels, today, hideLabel, help, error, id, className, style, ref, ...rest }: DateFieldProps): import('react').JSX.Element;

package/dist/date-time-field/date-time-field.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithRef } from 'react';
+import { DateFieldLabels } from '../date-field/date-field';
+export interface DateTimeFieldLabels extends DateFieldLabels {
+    /** Nome do campo de data. Padrão: `"<label>: data"`. */
+    date: string;
+    /** Nome do campo de hora. Padrão: `"<label>: hora (24 horas)"`. */
+    time: string;
+    /** Texto de exemplo do campo de hora. Padrão: `hh:mm`. */
+    timePlaceholder: string;
+}
+export interface DateTimeFieldProps extends Omit<ComponentPropsWithRef<'fieldset'>, 'onChange' | 'onBlur' | 'defaultValue' | 'disabled'> {
+    /** Título do grupo; também deriva os nomes das duas partes. */
+    label: string;
+    /** Data e hora no formato `YYYY-MM-DDTHH:mm`, ou `''` quando vazia. */
+    value: string;
+    /** Chamado com `YYYY-MM-DDTHH:mm`, ou `''` enquanto falta uma das partes. */
+    onChange: (value: string) => void;
+    /** Chamado quando uma das partes perde o foco. */
+    onBlur?: () => void;
+    /** Locale das datas. Padrão: `pt-BR`. */
+    locale?: string;
+    /** Textos do campo; o que faltar usa o padrão em pt-br, qualquer que seja o `locale`. */
+    labels?: Partial<DateTimeFieldLabels>;
+    /** Dia atual (`YYYY-MM-DD`); padrão: a data do navegador. */
+    today?: string;
+    /** Desabilita as duas partes. */
+    disabled?: boolean;
+    /** Texto de ajuda abaixo do campo. */
+    help?: string;
+    /** Mensagem de erro; aparece com `role="alert"` no campo de data. */
+    error?: string;
+}
+export declare function DateTimeField({ label, value, onChange, onBlur, locale, labels, today, disabled, help, error, className, ...rest }: DateTimeFieldProps): import('react').JSX.Element;

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface DialogProps extends Omit<ComponentPropsWithRef<'dialog'>, 'title' | 'open' | 'onClose' | 'role' | 'children'> {
+    /** Abre o diálogo como modal (`showModal()`); ao ficar `false`, fecha e devolve o foco. */
+    open: boolean;
+    /** Título do diálogo, lido como nome acessível. */
+    title: string;
+    /** Chamado no Esc, no `cancel` nativo e no clique no fundo (se `closeOnBackdrop`). */
+    onClose: () => void;
+    /** Conteúdo do corpo. */
+    children: ReactNode;
+    /** Ações do rodapé. */
+    actions: ReactNode;
+    /** Papel ARIA. Padrão: `dialog`. */
+    role?: 'dialog' | 'alertdialog';
+    /** Largura máxima. Padrão: `default`. */
+    size?: 'default' | 'wide';
+    /** Chama `onClose` ao clicar no fundo. Padrão: `false`. */
+    closeOnBackdrop?: boolean;
+}
+/** Diálogo modal genérico: corpo, ações no rodapé, foco preso e Esc entregue ao `onClose`. */
+export declare function Dialog({ open, title, onClose, children, actions, role, size, closeOnBackdrop, 'aria-describedby': describedBy, className, ref, ...rest }: DialogProps): import('react').JSX.Element | null;

package/dist/empty-state/empty-state.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface EmptyStateProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+    /** Título do estado vazio. */
+    title: string;
+    /** Explicação do que fazer ou do porquê de estar vazio. */
+    description: string;
+    /** Ação principal, como um botão ou link para criar o primeiro item. */
+    action?: ReactNode;
+}
+export declare function EmptyState({ title, description, action, className, style, ...rest }: EmptyStateProps): import('react').JSX.Element;

package/dist/error-state/error-state.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef } from 'react';
+export interface ErrorStateProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+    /** Título do erro. */
+    title?: string;
+    /** Explicação opcional do que aconteceu. */
+    description?: string;
+    /** Texto do botão de nova tentativa. */
+    retryLabel?: string;
+    /** Ação de nova tentativa; o botão só aparece quando ela existe. */
+    onRetry?: () => void;
+}
+export declare function ErrorState({ title, description, retryLabel, onRetry, className, style, ...rest }: ErrorStateProps): import('react').JSX.Element;

package/dist/form-layout/form-layout.d.ts

@@ -0,0 +1,17 @@
+import { ComponentPropsWithRef } from 'react';
+export type FormGridProps = ComponentPropsWithRef<'div'>;
+/** Grade do formulário; um filho com `data-span="full"` ocupa a linha inteira. */
+export declare function FormGrid({ className, ...rest }: FormGridProps): import('react').JSX.Element;
+export interface FormActionsProps extends ComponentPropsWithRef<'div'> {
+    /** Texto do botão de cancelar. Padrão: `Cancelar`. */
+    cancelLabel?: string;
+    /** Texto do botão de enviar. Padrão: `Salvar`. */
+    submitLabel?: string;
+    /** Chamado ao cancelar. */
+    onCancel: () => void;
+    /** Mostra o carregamento no botão de enviar e bloqueia o clique. */
+    loading?: boolean;
+    /** Desabilita o botão de enviar. */
+    submitDisabled?: boolean;
+}
+export declare function FormActions({ cancelLabel, submitLabel, onCancel, loading, submitDisabled, className, ...rest }: FormActionsProps): import('react').JSX.Element;

package/dist/icon-button/icon-button.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'aria-label'> {
+    /** Nome acessível: obrigatório, porque o botão não tem texto. */
+    'aria-label': string;
+    /** Ícone em SVG inline; fica dentro de um `<span aria-hidden="true">`. */
+    icon: ReactNode;
+    /** Padrão: `ghost`. */
+    variant?: 'ghost' | 'secondary';
+}
+export declare function IconButton({ icon, variant, type, className, ...rest }: IconButtonProps): import('react').JSX.Element;

package/dist/icons/index.d.ts

@@ -0,0 +1,2 @@
+export { ListIcon, GridIcon, ShelfIcon, TableIcon, DayIcon, TimelineIcon } from './view-icons';
+export type { ViewIconProps } from './view-icons';

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

@@ -0,0 +1,17 @@
+import { ComponentPropsWithRef } from 'react';
+export interface ViewIconProps extends Omit<ComponentPropsWithRef<'svg'>, 'children'> {
+    /** Lado do ícone em pixels. Padrão: 18. */
+    size?: number;
+}
+/** Visualização em lista. */
+export declare function ListIcon(props: ViewIconProps): import('react').JSX.Element;
+/** Visualização em grade. */
+export declare function GridIcon(props: ViewIconProps): import('react').JSX.Element;
+/** Visualização em estante. */
+export declare function ShelfIcon(props: ViewIconProps): import('react').JSX.Element;
+/** Visualização em tabela. */
+export declare function TableIcon(props: ViewIconProps): import('react').JSX.Element;
+/** Visualização por dia. */
+export declare function DayIcon(props: ViewIconProps): import('react').JSX.Element;
+/** Visualização em linha do tempo. */
+export declare function TimelineIcon(props: ViewIconProps): import('react').JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+export { Button } from './button/button';
+export type { ButtonProps, ButtonVariant } from './button/button';
+export { IconButton } from './icon-button/icon-button';
+export type { IconButtonProps } from './icon-button/icon-button';
+export { MenuButton } from './menu-button/menu-button';
+export type { MenuButtonProps, MenuItem } from './menu-button/menu-button';
+export { TextField } from './text-field/text-field';
+export type { TextFieldProps } from './text-field/text-field';
+export { SelectField } from './select-field/select-field';
+export type { SelectFieldProps } from './select-field/select-field';
+export { Checkbox } from './checkbox/checkbox';
+export type { CheckboxProps } from './checkbox/checkbox';
+export { SegmentedField } from './segmented-field/segmented-field';
+export type { SegmentedFieldProps, SegmentedOption } from './segmented-field/segmented-field';
+export { Autocomplete } from './autocomplete/autocomplete';
+export type { AutocompleteProps, AutocompleteOption, AutocompleteSingleProps, AutocompleteMultipleProps, } from './autocomplete/autocomplete';
+export { TagField } from './tag-field/tag-field';
+export type { TagFieldProps } from './tag-field/tag-field';
+export { ColorField } from './color-field/color-field';
+export type { ColorFieldProps } from './color-field/color-field';
+export { ColorPicker, DEFAULT_COLOR_FIELD_LABELS } from './color-field/color-picker';
+export type { ColorFieldLabels, ColorPickerProps } from './color-field/color-picker';
+export { hexToRgb, rgbToHex, hslToRgb, rgbToHsl } from './color-field/color';
+export { Calendar } from './calendar/calendar';
+export type { CalendarProps, CalendarValue, CalendarLabels } from './calendar/calendar';
+export { DateField } from './date-field/date-field';
+export type { DateFieldProps, DateFieldLabels } from './date-field/date-field';
+export { TimeField } from './time-field/time-field';
+export type { TimeFieldProps } from './time-field/time-field';
+export { DateTimeField } from './date-time-field/date-time-field';
+export type { DateTimeFieldProps, DateTimeFieldLabels } from './date-time-field/date-time-field';
+export { PeriodField } from './period-field/period-field';
+export type { PeriodFieldProps, PeriodFieldLabels } from './period-field/period-field';
+export { parseTime, maskTime } from './time-field/parse-time';
+export { resolvePeriod } from './period-field/period';
+export type { PeriodPreset, PeriodRule, PeriodValue, PeriodRange } from './period-field/period';
+export { MoneyField } from './money-field/money-field';
+export type { MoneyFieldProps } from './money-field/money-field';
+export { maskMoneyInput, parseMoneyInput, formatCents } from './money-field/money-mask';
+export { Card } from './card/card';
+export type { CardProps, CardTone } from './card/card';
+export { PageHeader } from './page-header/page-header';
+export type { PageHeaderProps } from './page-header/page-header';
+export { Toolbar } from './toolbar/toolbar';
+export type { ToolbarProps } from './toolbar/toolbar';
+export { Tabs } from './tabs/tabs';
+export type { TabItem, TabsProps } from './tabs/tabs';
+export { ViewSwitcher } from './view-switcher/view-switcher';
+export type { ViewOption, ViewSwitcherProps } from './view-switcher/view-switcher';
+export { FormGrid, FormActions } from './form-layout/form-layout';
+export type { FormGridProps, FormActionsProps } from './form-layout/form-layout';
+export { Dialog } from './dialog/dialog';
+export type { DialogProps } from './dialog/dialog';
+export { ConfirmDialog } from './confirm-dialog/confirm-dialog';
+export type { ConfirmDialogProps } from './confirm-dialog/confirm-dialog';
+export { Toast, ToastRegion } from './toast/toast';
+export type { ToastProps, ToastTone } from './toast/toast';
+export { EmptyState } from './empty-state/empty-state';
+export type { EmptyStateProps } from './empty-state/empty-state';
+export { LoadingState, Skeleton } from './loading-state/loading-state';
+export type { LoadingStateProps, SkeletonProps } from './loading-state/loading-state';
+export { ErrorState } from './error-state/error-state';
+export type { ErrorStateProps } from './error-state/error-state';
+export { ProgressBar } from './progress-bar/progress-bar';
+export type { ProgressBarProps } from './progress-bar/progress-bar';
+export { BrandLogo } from './brand-logo/brand-logo';
+export type { BrandLogoProps } from './brand-logo/brand-logo';
+export { Badge } from './badge/badge';
+export type { BadgeProps, BadgeTone } from './badge/badge';
+export { ItemSwatch } from './item-swatch/item-swatch';
+export type { ItemSwatchProps } from './item-swatch/item-swatch';
+export { ListIcon, GridIcon, ShelfIcon, TableIcon, DayIcon, TimelineIcon } from './icons';
+export type { ViewIconProps } from './icons';
+export { light, dark, radii, space, spacing, fontSizes, fontWeights, lineHeights, zIndices, motion, gradients, fonts, breakpoints, itemPalette, defineTheme, ishtarSinkTheme, contrastRatio, checkThemeContrast, CONTRAST_REQUIREMENTS, } from './theme';
+export type { Theme, ThemeName, ThemeTokens, ContrastRequirement, ContrastViolation, } from './theme';