@giro-ds/react 3.0.4 → 3.0.6

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

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

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

@@ -1,7 +1,23 @@
-import React from 'react';
-export interface AvatarProps {
-    id?: string;
+import * as React from 'react';
+import { Size, BaseProps } from '../../types';
+/**
+ * Props do componente Avatar
+ * @example
+ * ```tsx
+ * <Avatar icon={<UserIcon />} size="lg" />
+ * ```
+ * @example
+ * ```tsx
+ * <Avatar
+ *   icon={<ProfileIcon />}
+ *   size="sm"
+ *   className="custom-avatar"
+ * />
+ * ```
+ */
+export interface AvatarProps extends BaseProps {
+    /** Ícone ou conteúdo a ser exibido no avatar */
     icon: React.ReactNode;
-    size?: 'small' | 'large';
-    className?: string;
+    /** Tamanho do avatar */
+    size?: Size;
 }

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

@@ -1,19 +1,37 @@
 import { ReactNode } from 'react';
+import { BaseProps } from '../../types';
+/** Tipos de badge suportados */
 export type BadgeType = 'notification' | 'status';
+/** Valores possíveis para exibição no badge */
 export type BadgeValue = number | string | null;
-export interface BadgeProps {
+/**
+ * Props do componente Badge
+ * @example
+ * ```tsx
+ * <Badge type="notification" badgeValue={5}>
+ *   <IconButton icon={<BellIcon />} />
+ * </Badge>
+ * ```
+ * @example
+ * ```tsx
+ * <Badge
+ *   type="status"
+ *   badgeValue="novo"
+ *   aria-label="Novo item disponível"
+ * >
+ *   <Avatar icon={<UserIcon />} />
+ * </Badge>
+ * ```
+ */
+export interface BadgeProps extends BaseProps {
     /** Tipo de badge (notificação ou status) */
     type: BadgeType;
     /** Conteúdo a ser envolvido pelo badge */
     children?: ReactNode;
     /** Valor a ser exibido no badge (número, texto ou null) */
     badgeValue?: BadgeValue;
-    /** Classes CSS adicionais */
-    className?: string;
-    /** ID único do componente */
-    id?: string;
-    /** Se o badge está desabilitado */
+    /** Valor máximo a ser exibido (ex: 99+ quando badgeValue > maxValue) */
     maxValue?: number;
-    /** Props de acessibilidade customizadas */
+    /** Label acessível para leitores de tela */
     'aria-label'?: string;
 }

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

@@ -1,23 +1,56 @@
 import React from 'react';
-export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
+import { Size, BaseProps, Variant, Position } from '../../types/common.types';
+/**
+ * Props do componente Button
+ * @example
+ * ```tsx
+ * <Button variant="filled" size="lg" onClick={handleClick}>
+ *   Clique aqui
+ * </Button>
+ * ```
+ * @example
+ * ```tsx
+ * <Button
+ *   variant="outlined"
+ *   icon={<Icon />}
+ *   iconPosition="left"
+ *   loading={isLoading}
+ * >
+ *   Salvar
+ * </Button>
+ * ```
+ */
+export interface ButtonProps extends BaseProps, React.HTMLAttributes<HTMLElement> {
+    /** Elemento customizado a ser renderizado (ex: 'a', Link do React Router) */
     as?: React.ElementType;
+    /** Conteúdo do botão */
     children?: React.ReactNode;
-    variant?: 'filled' | 'outlined' | 'text';
+    /** Variante visual do botão */
+    variant?: Variant;
+    /** Define se o botão exibe apenas ícone (sem texto) */
     iconOnly?: boolean;
-    iconPosition?: 'left' | 'right' | 'both';
+    /** Posição do ícone em relação ao texto */
+    iconPosition?: Position;
+    /** URL de destino quando usado como link (renderiza <a>) */
     href?: string;
+    /** Rota de destino para roteadores (ex: React Router) */
     to?: string;
+    /** Define se o link abre em nova aba */
     external?: boolean;
+    /** Atributo target do HTML para links */
     target?: string;
+    /** Atributo rel do HTML para links */
     rel?: string;
+    /** Tipo HTML do botão */
     type?: 'button' | 'submit' | 'reset';
-    disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    size?: 'lg' | 'sm';
-    className?: string;
-    id?: string;
+    /** Tamanho do botão */
+    size?: Size;
+    /** Ícone a ser exibido no botão */
     icon?: React.ReactNode;
+    /** Define se o botão ocupa 100% da largura do container */
     fullWidth?: boolean;
+    /** Label acessível para leitores de tela */
     ariaLabel?: string;
+    /** Estado de carregamento (exibe spinner) */
     loading?: boolean;
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import './i18n';
-import type { Locale, DateFormat, CalendarProps } from './Calendar.types';
+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 };

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

@@ -1,42 +1,86 @@
-export type Locale = 'pt-br' | 'en-us';
+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;
 }
-export interface CalendarProps {
-    /** Data do dia Atual */
+/**
+ * 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;
-    /** Classe CSS adicional */
-    className?: string;
-    /** Dia Selecionado pelo usuário */
+    /** Dia selecionado pelo usuário */
     selectedDate?: Date | null;
-    /** Função que é executada quando a data escolhida é alterada */
+    /** Callback executado quando a data escolhida é alterada: (date) => void */
     onDateChange?: (date: Date) => void;
-    /** Função que é executada quando um dia é selecionado */
+    /** Callback executado quando um dia é selecionado: (date) => void */
     onDaySelect?: (date: Date) => void;
+    /** Callback executado ao limpar a seleção: () => void */
     onClear?: () => void;
+    /** Data mínima selecionável */
     minDate?: Date;
+    /** Data máxima selecionável */
     maxDate?: Date;
-    /** Locale do calendário ('pt-br' ou 'en-us') */
+    /** Locale do calendário */
     locale?: Locale;
-    /** Formato de exibição da data ('dd/mm/yyyy' ou 'mm/dd/yyyy') */
+    /** Formato de exibição da data */
     format?: DateFormat;
-    /** Identificador do elemento raiz do calendário */
-    id?: string;
 }

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

@@ -1,17 +1,34 @@
-import React from 'react';
-export interface CalloutProps {
-    /** Define o tipo de callout */
-    type?: 'neutral' | 'color' | 'brand' | 'alert' | 'success';
-    /** Define o título com mais destaque */
+import * as React from 'react';
+import { TextVariant, BaseProps } from '../../types/common.types';
+/**
+ * Props do componente Callout
+ * @example
+ * ```tsx
+ * <Callout
+ *   type="success"
+ *   title="Sucesso!"
+ *   text="Operação realizada com sucesso"
+ *   icon={<CheckIcon />}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <Callout
+ *   type="alert"
+ *   title="Atenção"
+ *   text="Verifique os campos obrigatórios"
+ * />
+ * ```
+ */
+export interface CalloutProps extends BaseProps {
+    /** Tipo visual do callout */
+    type?: TextVariant;
+    /** Título principal do callout (texto em destaque) */
     title?: string | null;
-    /** Define o texto com menos destaque */
+    /** Texto descritivo do callout */
     text?: string;
-    /** Define o ícone a ser importado */
+    /** Ícone a ser exibido no callout */
     icon?: React.ReactNode;
-    /** Define a classe CSS adicional */
-    className?: string;
-    /** Define o id do callout */
-    id?: string;
     /** Props adicionais para o elemento div */
     [key: string]: any;
 }

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

@@ -1,10 +1,34 @@
-export interface CheckboxProps {
-    id?: string;
+import React from 'react';
+import { BaseProps } from '../../types/common.types';
+/**
+ * Props do componente Checkbox
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Aceito os termos"
+ *   checked={accepted}
+ *   onCheckedChange={setAccepted}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Selecionar todos"
+ *   indeterminate={someSelected}
+ *   onCheckedChange={handleSelectAll}
+ *   disabled={isLoading}
+ * />
+ * ```
+ */
+export interface CheckboxProps extends BaseProps {
+    /** Label ou conteúdo a ser exibido ao lado do checkbox */
     label?: React.ReactNode;
+    /** Callback executado quando o estado muda: (checked) => void */
     onCheckedChange?: (checked: boolean) => void;
+    /** Estado inicial (modo não controlado) */
     defaultChecked?: boolean;
+    /** Estado atual (modo controlado) */
     checked?: boolean;
-    disabled?: boolean;
-    className?: string;
+    /** Estado indeterminado (usado em selecionar todos com seleção parcial) */
     indeterminate?: boolean;
 }

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

@@ -1,17 +1,34 @@
-import React from 'react';
-export interface ChipsProps {
-    /** Variante a ser escolhida para utilizar padrões de estilizações pré-definidos */
-    type?: 'neutral' | 'brand' | 'color' | 'success' | 'alert';
-    /** Texto a ser exibido dentro do componente */
+import * as React from 'react';
+import { TextVariant, BaseProps } from '../../types/common.types';
+/**
+ * Props do componente Chips
+ * @example
+ * ```tsx
+ * <Chips
+ *   type="success"
+ *   title="Ativo"
+ *   leftIcon={<CheckIcon />}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <Chips
+ *   type="brand"
+ *   title="Novo"
+ *   rightIcon={<CloseIcon />}
+ *   disabled={false}
+ * />
+ * ```
+ */
+export interface ChipsProps extends BaseProps {
+    /** Tipo visual do chip */
+    type?: TextVariant;
+    /** Texto a ser exibido dentro do chip */
     title: string;
-    /** Ícone react que ficará posicionado à esquerda no componente */
+    /** Ícone posicionado à esquerda do texto */
     leftIcon?: React.ReactNode;
-    /** Ícone react que ficará posicionado à direita no componente */
+    /** Ícone posicionado à direita do texto */
     rightIcon?: React.ReactNode;
-    /** Estado alterável para desabilitar */
-    disabled?: boolean;
-    /** Classe CSS adicional */
-    className?: string;
     /** Props adicionais para o elemento div */
     [key: string]: any;
 }

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

@@ -1,4 +1,15 @@
 import React from 'react';
+/**
+ * Props do componente Container
+ * @example
+ * ```tsx
+ * <Container>
+ *   <h1>Conteúdo da página</h1>
+ *   <p>Texto dentro do container</p>
+ * </Container>
+ * ```
+ */
 export interface ContainerProps {
+    /** Conteúdo a ser renderizado dentro do container */
     children: React.ReactNode;
 }

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

@@ -1,32 +1,50 @@
-export type DatePickerLocale = 'pt-br' | 'en-us';
-export type CalendarPosition = 'left' | 'right';
-export interface DatePickerProps {
+import { Locale, BaseProps, Position } from '../../types/common.types';
+/**
+ * Props do componente DatePicker
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   label="Data de nascimento"
+ *   value={birthDate}
+ *   onChange={setBirthDate}
+ *   locale="pt-br"
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   label="Data de início"
+ *   required
+ *   helperText="Selecione a data de início do projeto"
+ *   minDate={new Date()}
+ *   calendarPosition="right"
+ *   error={errorMessage}
+ * />
+ * ```
+ */
+export interface DatePickerProps extends BaseProps {
     /** Locale para formatação da data */
-    locale?: DatePickerLocale;
-    /** Posição do calendário */
-    calendarPosition?: CalendarPosition;
-    /** Texto de ajuda */
+    locale?: Locale;
+    /** Posição do calendário em relação ao campo */
+    calendarPosition?: Position;
+    /** Texto de ajuda exibido abaixo do campo */
     helperText?: string;
-    /** Se o campo é obrigatório */
+    /** Define se o campo é obrigatório */
     required?: boolean;
-    /** Label do campo */
+    /** Label do campo de data */
     label?: string;
     /** Valor controlado da data */
     value?: Date | null;
     /** Valor inicial para modo não controlado */
     defaultValue?: Date | null;
-    /** Callback chamado quando a data muda */
+    /** Callback executado quando a data muda: (date) => void */
     onChange?: (date: Date | null) => void;
-    /** Se o campo está desabilitado */
-    disabled?: boolean;
-    /** Mensagem de erro */
+    /** Mensagem de erro a ser exibida */
     error?: string;
-    /** Data mínima permitida */
+    /** Data mínima selecionável */
     minDate?: Date;
-    /** Data máxima permitida */
+    /** Data máxima selecionável */
     maxDate?: Date;
-    /** Classes CSS adicionais */
-    className?: string;
-    /** ID para testes */
+    /** ID para testes automatizados */
     'data-testid'?: string;
 }

package/dist/components/DatePicker/DateUtils.d.ts

@@ -1,4 +1,4 @@
-export type Locale = 'pt-br' | 'en-us';
+import { Locale } from '../../types/common.types';
 /**
  * Formata uma data para string conforme o locale.
  * @param date - Data a ser formatada

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

@@ -1,2 +1,2 @@
 export { default } from './DatePicker';
-export type { DatePickerProps, DatePickerLocale, CalendarPosition } from './DatePicker.types';
+export type { DatePickerProps } from './DatePicker.types';

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

@@ -1,24 +1,48 @@
 import { ReactNode } from 'react';
-export interface DialogProps {
+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"
+ *   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;
-    /** Se o Dialog está visível */
+    /** Define se o dialog está visível */
     show: boolean;
-    /** Título exibido no cabeçalho do Dialog (obrigatório) */
+    /** Título exibido no cabeçalho do dialog */
     title: string;
-    /** Texto do corpo do Dialog */
+    /** 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;
-    /** Função chamada ao confirmar */
+    /** Callback executado ao confirmar: () => void */
     fnConfirm?: () => void;
-    /** Função chamada ao cancelar */
+    /** Callback executado ao cancelar: () => void */
     fnCancel?: () => void;
-    /** Função chamada ao fechar o Dialog */
+    /** Callback executado ao fechar o dialog: () => void */
     onClose?: () => void;
-    /** ID opcional para o Dialog */
-    id?: string;
-    /** Classe CSS opcional */
-    className?: string;
 }

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

@@ -1,43 +1,74 @@
 import { ReactNode, ReactElement } from 'react';
-export interface DrawerProps {
-    /** Conteúdo do Drawer */
+import { Variant, BaseProps } from '../../types/common.types';
+/**
+ * Props do componente Drawer
+ * @example
+ * ```tsx
+ * <Drawer
+ *   isOpen={isDrawerOpen}
+ *   onClose={handleClose}
+ *   title="Menu"
+ * >
+ *   <nav>
+ *     <a href="/home">Home</a>
+ *     <a href="/about">Sobre</a>
+ *   </nav>
+ * </Drawer>
+ * ```
+ * @example
+ * ```tsx
+ * <Drawer
+ *   isOpen={showDrawer}
+ *   onClose={() => setShowDrawer(false)}
+ *   title="Configurações"
+ *   customWidth="400px"
+ *   closeOnOverlayClick={true}
+ *   closeOnEscape={true}
+ * >
+ *   <Settings />
+ * </Drawer>
+ * ```
+ */
+export interface DrawerProps extends BaseProps {
+    /** Conteúdo a ser exibido dentro do drawer */
     children?: ReactNode;
-    /** Largura do Drawer (use design tokens quando possível) */
+    /** Largura customizada do drawer (ex: '400px', '50%') */
     customWidth?: string;
-    /** Callback quando o Drawer é fechado */
+    /** Callback executado ao fechar o drawer: () => void */
     onClose: () => void;
-    /** Título do Drawer */
+    /** Título exibido no cabeçalho do drawer */
     title?: string;
-    /** Determina se o drawer está aberto */
+    /** Define se o drawer está aberto */
     isOpen: boolean;
-    /** Callback quando o Drawer é aberto */
+    /** Callback executado ao abrir o drawer: () => void */
     onOpen?: () => void;
-    /** Classes CSS adicionais */
-    className?: string;
-    /** ID único do componente */
-    id?: string;
-    /** Se o drawer está desabilitado */
-    disabled?: boolean;
-    /** Callback chamado quando clica no overlay */
+    /** Callback executado ao clicar no overlay: () => void */
     onOverlayClick?: () => void;
-    /** Se deve fechar ao clicar no overlay */
+    /** Define se o drawer fecha ao clicar no overlay */
     closeOnOverlayClick?: boolean;
-    /** Se deve fechar ao pressionar ESC */
+    /** Define se o drawer fecha ao pressionar ESC */
     closeOnEscape?: boolean;
 }
-export interface DrawerExampleProps {
-    /** Texto do botão */
+/**
+ * Props do componente DrawerExample (trigger para abrir o drawer)
+ * @example
+ * ```tsx
+ * <DrawerExample
+ *   text="Abrir menu"
+ *   icon={<MenuIcon />}
+ *   onOpen={handleOpen}
+ * />
+ * ```
+ */
+export interface DrawerExampleProps extends BaseProps {
+    /** Texto do botão trigger */
     text?: string;
-    /** Ícone do botão */
+    /** Ícone do botão trigger */
     icon?: ReactElement;
-    /** Conteúdo do Drawer */
+    /** Conteúdo customizado do botão trigger */
     children?: ReactNode;
-    /** Callback quando o Drawer é aberto */
+    /** Callback executado ao abrir: () => void */
     onOpen?: () => void;
-    /** Classes CSS adicionais */
-    className?: string;
-    /** Variante do botão */
-    variant?: 'filled' | 'outlined' | 'text';
-    /** Se o botão está desabilitado */
-    disabled?: boolean;
+    /** Variante visual do botão trigger */
+    variant?: Variant;
 }