@giro-ds/react 3.0.7 → 4.0.0

package/dist/components/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { AvatarProps } from './Avatar.types';
-declare let Avatar: ({ id, icon, size, className, ...rest }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

package/dist/components/Avatar/Avatar.types.d.ts

@@ -1,23 +1,23 @@
 import * as React from 'react';
-import { Size, BaseProps } from '../../types';
+import { BaseProps, Size } from '../../types';
 /**
  * Props do componente Avatar
  * @example
  * ```tsx
+ * // Avatar com ícone
  * <Avatar icon={<UserIcon />} size="lg" />
- * ```
- * @example
- * ```tsx
- * <Avatar
- *   icon={<ProfileIcon />}
- *   size="sm"
- *   className="custom-avatar"
- * />
+ *
+ * // Avatar com imagem
+ * <Avatar src="https://example.com/avatar.jpg" icon={<UserIcon />} size="sm" />
  * ```
  */
 export interface AvatarProps extends BaseProps {
-    /** Ícone ou conteúdo a ser exibido no avatar */
-    icon: React.ReactNode;
-    /** Tamanho do avatar */
+    /** Ícone ou conteúdo a ser exibido no fallback quando não há imagem ou ela falha ao carregar */
+    icon?: React.ReactNode;
+    /** Tamanho do avatar: 'sm' (32px) ou 'lg' (44px). @default 'lg' */
     size?: Size;
+    /** URL da imagem do avatar. Quando fornecido, exibe a imagem; caso contrário, mostra o ícone */
+    src?: string;
+    /** Texto alternativo da imagem do avatar, usado como as iniciais do nome */
+    initialLetters?: string;
 }

package/dist/components/Avatar/__tests__/Avatar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Avatar/index.d.ts

@@ -1 +1,2 @@
 export { default } from './Avatar';
+export type { AvatarProps } from './Avatar.types';

package/dist/components/Button/Button.types.d.ts

@@ -53,4 +53,10 @@ export interface ButtonProps extends BaseProps, React.HTMLAttributes<HTMLElement
     ariaLabel?: string;
     /** Estado de carregamento (exibe spinner) */
     loading?: boolean;
+    /** Texto do tooltip exibido quando o botão é apenas ícone */
+    tooltipText?: string;
+    /** Lado em que o tooltip será exibido */
+    tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
+    /** Alinhamento do tooltip */
+    tooltipAlign?: 'start' | 'center' | 'end';
 }

package/dist/components/Calendar/Calendar.d.ts

@@ -1,7 +1,3 @@
-import React from 'react';
-import './i18n';
-import type { DateFormat, CalendarProps } from './Calendar.types';
-import { Locale } from '../../types/common.types';
-declare const MemoizedCalendar: React.NamedExoticComponent<CalendarProps>;
-export default MemoizedCalendar;
-export type { CalendarProps, Locale, DateFormat };
+import type { CalendarProps } from "./Calendar.types";
+declare const Calendar: ({ selected, selectedDate, currentDate, defaultMonth, startMonth, endMonth, numberOfMonths, onDaySelect, onDateChange, onClear: _onClear, minDate, maxDate, disabled, hidden, format: _format, locale, captionLayout, reverseYears, fixedWeeks, showOutsideDays, showWeekNumber, hideNavigation, disableNavigation, navLayout, role, title, animate, timeZone, modifiers, modifiersClassNames, footer, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export default Calendar;

package/dist/components/Calendar/Calendar.types.d.ts

@@ -1,86 +1,109 @@
-import { Locale, BaseProps } from '../../types/common.types';
-/** Formatos de exibição de data disponíveis */
-export type DateFormat = 'dd/mm/yyyy' | 'mm/dd/yyyy';
-/**
- * Representa um dia no calendário
- */
-export interface DayItem {
-    /** Tipo do item (sempre 'day') */
-    type: 'day';
-    /** Chave única para renderização */
-    key: number;
-    /** Número do dia */
-    day: number;
-    /** Objeto Date completo */
-    date: Date;
-    /** Indica se é o dia atual */
-    isToday: boolean;
-    /** Indica se o dia está selecionado */
-    isSelected: boolean;
-    /** Label acessível do dia */
-    label: string;
-}
-/**
- * Representa um espaço vazio no grid do calendário
- */
-export interface EmptyItem {
-    /** Tipo do item (sempre 'empty') */
-    type: 'empty';
-    /** Chave única para renderização */
-    key: string;
-}
-/** Item do calendário (pode ser um dia ou espaço vazio) */
-export type CalendarItem = DayItem | EmptyItem;
-/**
- * Representa um ano na visualização de seleção de ano
- */
-export interface YearItem {
-    /** Número do ano */
-    year: number;
-    /** Indica se é o ano atual */
-    isCurrent: boolean;
-    /** Chave única para renderização */
-    key: number;
-}
-/**
- * Props do componente Calendar
- * @example
- * ```tsx
- * <Calendar
- *   currentDate={new Date()}
- *   onDateChange={(date) => console.log(date)}
- *   locale="pt-br"
- * />
- * ```
- * @example
- * ```tsx
- * <Calendar
- *   currentDate={new Date()}
- *   selectedDate={selectedDate}
- *   onDaySelect={handleDaySelect}
- *   minDate={new Date('2024-01-01')}
- *   maxDate={new Date('2024-12-31')}
- *   format="dd/mm/yyyy"
- * />
- * ```
- */
-export interface CalendarProps extends BaseProps {
-    /** Data do dia atual */
-    currentDate: Date | null;
-    /** Dia selecionado pelo usuário */
+import React from 'react';
+import type { Matcher } from 'react-day-picker';
+import type { BaseProps, Locale } from '../../types/common.types';
+/** Formato de exibição da data aceito pelo componente. */
+export type DateFormat = 'dd/mm/yyyy' | 'mm/dd/yyyy' | (string & {});
+export interface CalendarProps extends Omit<BaseProps, 'disabled'> {
+    /** Data selecionada atualmente (usada pelo DatePicker). */
+    selected?: Date | null;
+    /** Data selecionada atualmente (usada pelo Filter). */
     selectedDate?: Date | null;
-    /** Callback executado quando a data escolhida é alterada: (date) => void */
-    onDateChange?: (date: Date) => void;
-    /** Callback executado quando um dia é selecionado: (date) => void */
+    /**
+     * Mês exibido no calendário. Use junto com `onDateChange` para
+     * controlar a navegação externamente.
+     */
+    currentDate?: Date | null;
+    /**
+     * Mês inicial padrão exibido quando não controlado.
+     * @default currentMonth
+     */
+    defaultMonth?: Date;
+    /** Primeiro mês navegável. */
+    startMonth?: Date;
+    /** Último mês navegável. */
+    endMonth?: Date;
+    /** Número de meses exibidos simultaneamente. @default 1 */
+    numberOfMonths?: number;
+    /** Chamado quando o usuário seleciona um dia. */
     onDaySelect?: (date: Date) => void;
-    /** Callback executado ao limpar a seleção: () => void */
+    /** Chamado quando o usuário navega entre meses. */
+    onDateChange?: (date: Date) => void;
+    /** Chamado quando o usuário limpa a seleção. */
     onClear?: () => void;
-    /** Data mínima selecionável */
+    /** Data mínima selecionável. */
     minDate?: Date;
-    /** Data máxima selecionável */
+    /** Data máxima selecionável. */
     maxDate?: Date;
-    /** Locale do calendário */
-    locale?: Locale;
-    /** Formato de exibição da data */
+    /**
+     * Dias desabilitados — aceita qualquer `Matcher` do react-day-picker
+     * (Date, DateRange, DateBefore, DateAfter, DayOfWeek, função…).
+     */
+    disabled?: Matcher | Matcher[];
+    /**
+     * Dias ocultados — aceita qualquer `Matcher` do react-day-picker.
+     */
+    hidden?: Matcher | Matcher[];
+    /**
+     * Formato de exibição da data.
+     * @example 'dd/mm/yyyy' | 'mm/dd/yyyy'
+     */
     format?: DateFormat;
+    /**
+     * Locale da interface — aceita os códigos internos do design system.
+     * @default 'pt-br'
+     */
+    locale?: Locale;
+    /**
+     * Layout do cabeçalho do calendário.
+     * - `'label'` — exibe mês/ano como texto (padrão).
+     * - `'dropdown'` — exibe dropdowns para mês e ano.
+     * - `'dropdown-months'` — dropdown apenas para mês.
+     * - `'dropdown-years'` — dropdown apenas para ano.
+     */
+    captionLayout?: 'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years';
+    /** Inverte a ordem dos anos no dropdown. */
+    reverseYears?: boolean;
+    /** Sempre exibe 6 semanas por mês, preenchendo com dias do mês seguinte. */
+    fixedWeeks?: boolean;
+    /** Exibe os dias pertencentes ao mês anterior/próximo. */
+    showOutsideDays?: boolean;
+    /** Exibe a coluna com o número da semana. */
+    showWeekNumber?: boolean;
+    /** Oculta os botões de navegação (sem desabilitar a navegação). */
+    hideNavigation?: boolean;
+    /** Desabilita a navegação entre meses. */
+    disableNavigation?: boolean;
+    /**
+     * Posicionamento dos botões de navegação.
+     * - `'around'` — um botão de cada lado do caption.
+     * - `'after'` — ambos após o caption.
+     */
+    navLayout?: 'after' | 'around';
+    /** Atributo `aria-label` para o elemento raiz. */
+    'aria-label'?: string;
+    /** Atributo `aria-labelledby` para o elemento raiz. */
+    'aria-labelledby'?: string;
+    /** Foca automaticamente o primeiro dia selecionado ou hoje. */
+    autoFocus?: boolean;
+    /** Atributo `role` do elemento raiz (`'application'` ou `'dialog'`). */
+    role?: 'application' | 'dialog';
+    /** Atributo `title` do elemento raiz. */
+    title?: string;
+    /** Anima a transição entre meses. */
+    animate?: boolean;
+    /**
+     * Fuso horário IANA usado nos cálculos de datas.
+     * @example 'America/Sao_Paulo'
+     */
+    timeZone?: string;
+    /** Estilos inline para o elemento raiz. */
+    style?: React.CSSProperties;
+    /** Substitui os `classNames` padrão do react-day-picker. */
+    classNames?: Partial<Record<string, string>>;
+    /** Modificadores customizados para dias específicos. */
+    modifiers?: Record<string, Matcher | Matcher[] | undefined>;
+    /** ClassNames aplicadas aos dias que correspondem aos `modifiers`. */
+    modifiersClassNames?: Record<string, string>;
+    /** Rodapé do calendário — exibido como live region para acessibilidade. */
+    footer?: React.ReactNode;
 }

package/dist/components/Calendar/__tests__/Calendar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Container/__tests__/Container.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Dialog/Dialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { DialogProps } from './Dialog.types';
-declare const MemoizedDialog: React.NamedExoticComponent<DialogProps>;
-export default MemoizedDialog;
+import * as React from "react";
+import { DialogProps } from "./Dialog.types";
+declare const Dialog: React.FC<DialogProps>;
+export default Dialog;

package/dist/components/Dialog/Dialog.types.d.ts

@@ -3,46 +3,26 @@ import { BaseProps } from '../../types/common.types';
 /**
  * Props do componente Dialog
  * @example
- * ```tsx
  * <Dialog
- *   show={isOpen}
- *   title="Confirmar exclusão"
- *   text="Tem certeza que deseja excluir este item?"
- *   textConfirm="Excluir"
+ *   title="Confirmar ação"
+ *   bodyContent="Tem certeza que deseja continuar?"
+ *   textConfirm="Confirmar"
  *   textCancel="Cancelar"
- *   fnConfirm={handleDelete}
- *   fnCancel={handleCancel}
- *   onClose={handleClose}
  * />
- * ```
- * @example
- * ```tsx
- * <Dialog
- *   show={showDialog}
- *   title="Informação"
- *   onClose={() => setShowDialog(false)}
- * >
- *   <p>Conteúdo customizado do dialog</p>
- * </Dialog>
- * ```
  */
-export interface DialogProps extends BaseProps {
-    /** Conteúdo customizado do dialog */
-    children?: ReactNode;
-    /** Define se o dialog está visível */
+export interface DialogProps extends BaseProps, React.HTMLAttributes<HTMLDivElement> {
+    /** Conteúdo customizado do diálogo */
     show: boolean;
-    /** Título exibido no cabeçalho do dialog */
-    title: string;
-    /** Texto ou conteúdo do corpo do dialog */
-    text?: ReactNode;
-    /** Texto do botão de confirmação */
-    textConfirm?: string;
-    /** Texto do botão de cancelamento */
-    textCancel?: string;
-    /** Callback executado ao confirmar: () => void */
-    fnConfirm?: () => void;
-    /** Callback executado ao cancelar: () => void */
-    fnCancel?: () => void;
-    /** Callback executado ao fechar o dialog: () => void */
-    onClose?: () => void;
+    /** Título exibido no cabeçalho do diálogo */
+    title?: string;
+    /** Texto ou conteúdo do corpo do diálogo */
+    bodyContent?: ReactNode;
+    /** Texto do botão de ação primária */
+    textPrimaryAction?: string;
+    /** Texto do botão de ação secundária */
+    textSecondaryAction?: string;
+    /** Função chamada ao executar a ação primária */
+    onPrimaryAction?: () => void;
+    /** Função chamada ao executar a ação secundária */
+    onSecondaryAction?: () => void;
 }

package/dist/components/Dialog/__tests__/Dialog.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { PopoverProps } from "./Popover.types";
+declare const Popover: React.FC<PopoverProps>;
+export default Popover;

package/dist/components/Popover/Popover.types.d.ts

@@ -0,0 +1,8 @@
+import { Align, Side } from '../../types/common.types';
+export interface PopoverProps {
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+    onDateSelect?: (date: Date) => void;
+    align?: Align;
+    side?: Side;
+}

package/dist/components/Popover/__test__/Popover.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Popover';
+export type { PopoverProps } from './Popover.types';

package/dist/components/Search/Search.types.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { BaseProps } from '../../types/common.types';
 /**
  * Props do componente Search
@@ -21,7 +22,8 @@ import { BaseProps } from '../../types/common.types';
  * />
  * ```
  */
-export interface SearchProps extends BaseProps {
+type NativeInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'onMouseDown'>;
+export interface SearchProps extends BaseProps, NativeInputProps {
     /** Placeholder do campo de busca */
     placeholder?: string;
     /** Valor controlado do campo */
@@ -43,3 +45,4 @@ export interface SearchProps extends BaseProps {
     /** ID para testes automatizados */
     'data-testid'?: string;
 }
+export {};

package/dist/components/Search/__tests__/Search.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/Toast.d.ts

@@ -1,13 +1,34 @@
-import React, { ReactNode } from 'react';
-import type { ToastType, ToastOptions, ToastContextType } from './Toast.types';
-export interface ToastProviderProps {
-    children: ReactNode;
-    maxToasts?: number;
-}
-export declare const ToastProvider: React.FC<ToastProviderProps>;
-export declare const useToast: () => ToastContextType;
-export declare const Toast: {
-    show: (message: string, type?: ToastType, options?: ToastOptions) => string;
-    setContext: (context: ToastContextType) => void;
-};
-export default ToastProvider;
+import * as React from "react";
+import { ToastProps } from './Toast.types';
+/**
+ * Componente individual de notificação Toast.
+ *
+ * Consome o contexto do `ToastProvider` para gerenciar seu próprio ciclo de vida.
+ * Cada instância recebe um `id` único gerado pelo provider e o utiliza para
+ * se remover da fila ao ser fechada.
+ *
+ * Construído sobre `Toast.Root` do **Radix UI**, com suporte completo a
+ * acessibilidade (ARIA) e gesto de swipe para a esquerda.
+ *
+ * @remarks
+ * Este componente não deve ser usado diretamente. Utilize o hook `useToast`
+ * para exibir toasts programaticamente.
+ *
+ * @example
+ * ```tsx
+ * // Uso indireto via hook (recomendado)
+ * const { showToast } = useToast();
+ *
+ * showToast({
+ *   title: 'Item salvo',
+ *   iconType: 'Success',
+ *   duration: 3000,
+ * });
+ * ```
+ *
+ * @param props - {@link ToastProps} combinadas com o `id` único do toast
+ */
+declare const Toast: React.FC<ToastProps & {
+    id: string;
+}>;
+export default Toast;

package/dist/components/Toast/Toast.types.d.ts

@@ -1,59 +1,57 @@
-import { ReactNode } from 'react';
-/** Tipos de toast disponíveis */
-export type ToastType = 'success' | 'alert' | 'info';
+import { Toast } from 'radix-ui';
+import * as React from 'react';
+import { BaseProps } from '../../types';
 /**
- * Representa uma mensagem de toast
- */
-export interface ToastMessage {
-    /** ID único da mensagem */
-    id: string;
-    /** Conteúdo da mensagem */
-    message: string;
-    /** Tipo visual do toast */
-    type: ToastType;
-    /** Define se o toast permanece até ser fechado manualmente */
-    persistent?: boolean;
-    /** Duração em milissegundos antes de auto-fechar */
-    duration?: number;
-    /** Timestamp de quando foi criado */
-    timestamp: number;
-}
-/**
- * Opções para exibição do toast
- */
-export interface ToastOptions {
-    /** Define se o toast permanece até ser fechado manualmente */
-    persistent?: boolean;
-    /** Duração em milissegundos antes de auto-fechar */
-    duration?: number;
-}
-/**
- * Contexto do sistema de toasts
- * @example
- * ```tsx
- * const { showToast, hideToast } = useToast();
+ * Props do componente individual de notificação `Toast`.
+ *
+ * Estende {@link BaseProps} e os atributos nativos do `Toast.Root` do Radix UI,
+ * excluindo as propriedades controladas internamente (`open`, `onOpenChange`,
+ * `duration`, `className`).
  *
- * showToast('Operação realizada com sucesso!', 'success');
- * ```
- */
-export interface ToastContextType {
-    /** Exibe um toast e retorna seu ID: (message, type?, options?) => string */
-    showToast: (message: string, type?: ToastType, options?: ToastOptions) => string;
-    /** Oculta um toast específico: (id) => void */
-    hideToast: (id: string) => void;
-    /** Oculta todos os toasts: () => void */
-    hideAllToasts: () => void;
-}
-/**
- * Props do componente ToastProvider
  * @example
  * ```tsx
- * <ToastProvider>
- *   <App />
- * </ToastProvider>
+ * showToast({
+ *   title: 'Sucesso!',
+ *   iconType: 'Success',
+ *   duration: 3000,
+ * });
  * ```
  */
-export interface ToastProviderProps {
-    /** Conteúdo da aplicação */
-    children: ReactNode;
+export interface ToastProps extends BaseProps, Omit<React.ComponentPropsWithoutRef<typeof Toast.Root>, 'open' | 'onOpenChange' | 'duration' | 'className'> {
+    /**
+     * Título principal exibido no toast.
+     */
+    title: string;
+    /**
+     * Define se o toast fecha automaticamente após o tempo definido em `duration`.
+     * @default true
+     */
+    automaticClose?: boolean;
+    /**
+     * Tempo em milissegundos até o toast fechar automaticamente.
+     * Só tem efeito quando `automaticClose` é `true`.
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Ícone customizado exibido no toast.
+     * Quando fornecido, substitui o ícone gerado automaticamente por `iconType`.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Ícone exibido no botão de fechar o toast.
+     * @default <Dismiss16Filled />
+     */
+    iconClosed?: React.ReactNode;
+    /**
+     * Tipo do ícone exibido automaticamente no toast.
+     *
+     * - `'Info'` → ícone informativo (`Info20Filled`)
+     * - `'Success'` → ícone de sucesso (`CheckmarkCircle20Filled`)
+     * - `'Alert'` → ícone de alerta/erro (`Warning20Filled`)
+     *
+     * Ignorado quando a prop `icon` for fornecida.
+     * @default 'Info'
+     */
+    iconType?: 'Info' | 'Success' | 'Alert';
 }

package/dist/components/Toast/__tests__/Toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/components/ToastContainer.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * Componente responsável por renderizar todos os toasts ativos na tela.
+ *
+ * Lê a lista de toasts do contexto fornecido pelo `ToastProvider` e os
+ * renderiza individualmente. Configura o `Toast.Provider` do Radix UI com
+ * direção de swipe para a esquerda.
+ *
+ * @remarks
+ * - Deve ser posicionado **dentro** do `ToastProvider`.
+ * - Geralmente é colocado próximo à raiz da aplicação, após os demais filhos.
+ * - Toasts sem `id` são ignorados automaticamente.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider>
+ *   <App />
+ *   <ToastContainer /> {/* Deve estar aqui *\/}
+ * </ToastProvider>
+ * ```
+ */
+export declare const ToastContainer: React.FC;

package/dist/components/Toast/components/ToastProvider.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+/**
+ * Provider que gerencia o estado global dos toasts na aplicação.
+ *
+ * Deve envolver toda a árvore de componentes que precisará exibir toasts.
+ * Disponibiliza o contexto com `showToast` e `dismissToast` para todos os
+ * componentes filhos via `useToast()`.
+ *
+ * @remarks
+ * O `ToastContainer` deve ser renderizado **dentro** do `ToastProvider`.
+ *
+ * @example
+ * ```tsx
+ * // App.tsx ou layout principal
+ * import { ToastProvider, ToastContainer } from '@giro-ds/react';
+ *
+ * function App() {
+ *   return (
+ *     <ToastProvider maxToasts={5}>
+ *       <Routes />
+ *       <ToastContainer />
+ *     </ToastProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @param children - Árvore de componentes filhos da aplicação.
+ * @param maxToasts - Número máximo de toasts exibidos simultaneamente.
+ *   Quando o limite é excedido, o toast mais antigo é removido automaticamente.
+ *   @default 5
+ */
+export declare const ToastProvider: React.FC<{
+    children: React.ReactNode;
+    maxToasts?: number;
+}>;

package/dist/components/Toast/index.d.ts

@@ -1,2 +1,5 @@
-export { default } from './Toast';
-export { Toast, ToastProvider, useToast } from './Toast';
+export { default as Toast } from './Toast';
+export { ToastProvider } from './components/ToastProvider';
+export { ToastContainer } from './components/ToastContainer';
+export { useToast } from '../../hooks/useToast';
+export type { ToastProps } from './Toast.types';