@giro-ds/react 3.0.5 → 3.0.6

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

@@ -1,56 +1,131 @@
+import * as React from 'react';
 import { ReactNode } from 'react';
-export interface SelectItemProps {
-    id?: string;
+import { Side, Align, BaseProps } from '../../types/common.types';
+/**
+ * Representa um item do select
+ */
+export interface SelectItemProps extends BaseProps {
+    /** Texto principal do item */
     text: ReactNode;
+    /** Subtítulo ou descrição do item */
     subTitle?: ReactNode;
+    /** Ícone do item */
     icon?: ReactNode;
-    disabled?: boolean;
+    /** Valor do item */
     value: string;
+    /** Define se o item está selecionado */
     selected?: boolean;
+    /** Subitens do select (para selects aninhados) */
     children?: SelectItemProps[];
 }
+/**
+ * Props de um item com checkbox
+ */
 export interface CheckboxItemProps extends SelectItemProps {
+    /** Estado de checked do checkbox */
     checked: boolean;
+    /** Callback executado quando o estado muda: (checked) => void */
     onCheckedChange: (checked: boolean) => void;
 }
+/** Variantes disponíveis para o Select */
 export type SelectVariant = 'text' | 'icon' | 'checkbox';
-export interface SelectProps {
+/**
+ * Props do componente Select
+ * @example
+ * ```tsx
+ * <Select
+ *   items={[
+ *     { value: '1', text: 'Opção 1' },
+ *     { value: '2', text: 'Opção 2' }
+ *   ]}
+ *   variant="text"
+ *   placeholder="Selecione uma opção"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <Select
+ *   items={options}
+ *   variant="checkbox"
+ *   multiple={true}
+ *   search={true}
+ *   label="Selecione múltiplas opções"
+ *   helperText="Você pode selecionar mais de uma"
+ *   required={true}
+ * />
+ * ```
+ */
+export interface SelectProps extends BaseProps {
+    /** Array de itens do select */
     items: SelectItemProps[];
+    /** Callback executado quando o valor muda: (value) => void */
     onValueChange?: (value: string | string[]) => void;
+    /** Callback executado quando o select abre/fecha: (open) => void */
     onOpenChange?: (open: boolean) => void;
+    /** Variante visual do select */
     variant: SelectVariant;
+    /** Define se o campo é obrigatório */
     required?: boolean;
+    /** Valor(es) selecionado(s) */
     value?: string | string[];
+    /** Habilita seleção múltipla */
     multiple?: boolean;
+    /** Placeholder do campo */
     placeholder?: string;
+    /** Habilita campo de busca */
     search?: boolean;
+    /** Label do campo */
     label?: string;
+    /** Texto de ajuda exibido abaixo do campo */
     helperText?: string;
+    /** Largura máxima do select */
     maxWidth?: number;
+    /** Mensagem de erro a ser exibida */
     errorMessage?: string;
-    disabled?: boolean;
-    className?: string;
+    /** Label acessível para leitores de tela */
     'aria-label'?: string;
+    /** ID para testes automatizados */
     'data-testid'?: string;
+    /** Habilita tooltip */
     tooltip?: boolean;
+    /** Texto do tooltip */
     tooltipText?: string;
-    side?: "top" | "right" | "bottom" | "left";
-    align?: "start" | "center" | "end";
+    /** Lado onde o dropdown abre */
+    side?: Side;
+    /** Alinhamento do dropdown */
+    align?: Align;
+    /** Habilita scroll infinito */
     enableInfiniteScroll?: boolean;
+    /** Callback executado ao chegar ao final do scroll: () => void */
     onScrollEnd?: () => void;
+    /** Estado de carregamento de mais itens */
     isLoadingMore?: boolean;
+    /** Habilita busca via API */
     enableApiSearch?: boolean;
+    /** Callback executado na busca via API: (term) => void */
     onApiSearch?: (term: string) => void;
+    /** Estado de busca em andamento */
     isSearching?: boolean;
 }
+/**
+ * Estado interno do componente Select
+ */
 export interface SelectState {
+    /** Define se o select está aberto */
     isOpen: boolean;
+    /** Valores selecionados */
     selectedValues: string[];
+    /** Texto digitado no campo de busca */
     searchInput: string;
+    /** Termo de busca aplicado */
     searchTerm: string;
+    /** Define se o campo foi tocado */
     touched: boolean;
+    /** Define se há erro de validação */
     hasError: boolean;
 }
+/** Ações disponíveis para o reducer do Select */
 export type SelectAction = {
     type: 'SET_OPEN';
     payload: boolean;
@@ -77,39 +152,73 @@ export type SelectAction = {
         required: boolean;
     };
 };
+/**
+ * Props do hook useSelectLogic
+ */
 export interface UseSelectLogicProps {
+    /** Valor(es) controlado(s) */
     value?: string | string[];
+    /** Define se o campo é obrigatório */
     required?: boolean;
+    /** Habilita busca */
     search?: boolean;
+    /** Callback executado quando o valor muda: (value) => void */
     onValueChange?: (value: string | string[]) => void;
+    /** Callback executado quando o select abre/fecha: (open) => void */
     onOpenChange?: (open: boolean) => void;
+    /** Habilita busca via API */
     enableApiSearch?: boolean;
+    /** Callback executado na busca via API: (term) => void */
     onApiSearch?: (term: string) => void;
+    /** Estado de busca em andamento */
     isSearching?: boolean;
 }
+/**
+ * Retorno do hook useSelectLogic
+ */
 export interface UseSelectLogicReturn {
+    /** Estado atual do select */
     state: SelectState;
+    /** Ações disponíveis */
     actions: {
+        /** Define se o select está aberto */
         setOpen: (open: boolean) => void;
+        /** Define os valores selecionados */
         setSelectedValues: (values: string[]) => void;
+        /** Define o texto de busca */
         setSearchInput: (input: string) => void;
+        /** Define o termo de busca aplicado */
         setSearchTerm: (term: string) => void;
+        /** Define se o campo foi tocado */
         setTouched: (touched: boolean) => void;
+        /** Define se há erro */
         setError: (error: boolean) => void;
+        /** Reseta a busca */
         resetSearch: () => void;
+        /** Valida o campo */
         validate: () => void;
+        /** Manipula seleção simples */
         handleSingleSelect: (value: string) => void;
+        /** Manipula seleção múltipla */
         handleMultipleSelect: (value: string, checked: boolean) => void;
     };
+    /** Valores computados */
     computed: {
+        /** Texto a ser exibido no campo */
         displayText: string;
+        /** Itens filtrados pela busca */
         filteredItems: SelectItemProps[];
     };
+    /** Referências */
     refs: {
+        /** Referência do input de busca */
         searchInputRef: React.RefObject<HTMLInputElement | null>;
     };
+    /** Funções utilitárias */
     utils: {
+        /** Obtém o texto a ser exibido */
         getDisplayText: (selectedValues: string[], placeholder: string, variant: string, items: SelectItemProps[]) => string;
+        /** Filtra os itens pela busca */
         getFilteredItems: (items: SelectItemProps[], searchTerm: string) => SelectItemProps[];
     };
 }

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

@@ -1,8 +1,32 @@
-export interface SwitchProps {
+import { BaseProps } from '../../types/common.types';
+/**
+ * Props do componente Switch
+ * @example
+ * ```tsx
+ * <Switch
+ *   checked={isEnabled}
+ *   onCheckedChange={setIsEnabled}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <Switch
+ *   defaultChecked={true}
+ *   disabled={isLoading}
+ *   onCheckedChange={(checked) => console.log(checked)}
+ *   name="notifications"
+ * />
+ * ```
+ */
+export interface SwitchProps extends BaseProps {
+    /** Estado inicial (modo não controlado) */
     defaultChecked?: boolean;
-    disabled?: boolean;
+    /** Callback executado quando o estado muda: (checked) => void */
     onCheckedChange?: (checked: boolean) => void;
+    /** Nome do input */
     name?: string;
+    /** Valor do input */
     value?: string;
+    /** Estado atual (modo controlado) */
     checked?: boolean;
 }

package/dist/components/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import type { TableRowData, TableProps } from './Table.types';
-declare const Table: <T extends TableRowData = TableRowData>({ columns, dataSource, className, loading, rowSelection, locale, onRow, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+declare const Table: <T extends TableRowData = TableRowData>({ columns, dataSource, className, loading, rowSelection, locale, onRow, ...rest }: TableProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 export default Table;

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

@@ -1,4 +1,5 @@
 import { ReactNode, CSSProperties } from 'react';
+import { BaseProps } from '../../types';
 /**
  * Tipo base para dados da tabela. Use `<Table<SeuTipo>>` para type-safety completo.
  * @example <Table<User> dataSource={users} />
@@ -32,13 +33,11 @@ export interface TableColumn<T = TableRowData> {
  * Props do componente Table. Use genérico para autocomplete: `<Table<User>>`
  * @typeParam T - Tipo dos dados da linha
  */
-export interface TableProps<T = TableRowData> {
+export interface TableProps<T = TableRowData> extends BaseProps {
     /** Configuração das colunas */
     columns: TableColumn<T>[];
     /** Array de dados a serem exibidos */
     dataSource: T[];
-    /** Classe CSS customizada */
-    className?: string;
     /** Estado de carregamento */
     loading?: boolean;
     /** Configuração de seleção de linhas */

package/dist/components/Table/TableHeader.d.ts

@@ -30,7 +30,7 @@ interface CalendarFilterItem extends BaseFilterItem {
 export type FilterItem = CheckboxFilterItem | CalendarFilterItem;
 declare const isCalendarFilter: (filter: FilterItem) => filter is CalendarFilterItem;
 declare const isCheckboxFilter: (filter: FilterItem) => filter is CheckboxFilterItem;
-export interface TableHeaderProps {
+export interface TableHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     searchValue?: string;
     onSearchChange?: (value: string) => void;
     searchPlaceholder?: string;

package/dist/components/Table/TablePagination.d.ts

@@ -1,20 +1,12 @@
 import React from 'react';
-export interface TablePaginationProps {
-    /** Página atual */
+export interface TablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {
     currentPage: number;
-    /** Total de itens */
     totalItems: number;
-    /** Itens por página */
     itemsPerPage: number;
-    /** Callback quando a página muda */
     onPageChange: (page: number) => void;
-    /** Callback quando itens por página muda */
     onItemsPerPageChange: (itemsPerPage: number) => void;
-    /** Opções disponíveis para itens por página */
     pageSizeOptions?: number[];
-    /** Desabilita a paginação */
     disabled?: boolean;
-    /** Classes CSS adicionais */
     className?: string;
 }
 declare const TablePagination: React.FC<TablePaginationProps>;

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

@@ -1,31 +1,69 @@
 import React from 'react';
+import { Side, Align } from '../../types/common.types';
+/** Tipos de input suportados pelo TextField */
 export type TextFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-export type TooltipPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/**
+ * Props do componente TextField
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Email"
+ *   type="email"
+ *   value={email}
+ *   onChange={setEmail}
+ *   placeholder="Digite seu email"
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Senha"
+ *   type="password"
+ *   required
+ *   helperText="Mínimo 8 caracteres"
+ *   errorMessage={error}
+ *   tooltip={true}
+ *   tooltipText="Deve conter letras e números"
+ *   icon={<LockIcon />}
+ * />
+ * ```
+ */
 export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'type'> {
-    /** Controlled value */
+    /** Valor controlado do campo */
     value?: string | number;
-    /** Change handler - receives string value */
+    /** Callback executado quando o valor muda: (value) => void */
     onChange?: (value: string) => void;
-    /** Label text */
+    /** Label do campo */
     label?: string;
-    /** Input type */
+    /** Tipo do input */
     type?: TextFieldType;
-    /** Helper text (shown below input) */
+    /** Texto de ajuda exibido abaixo do campo */
     helperText?: string;
-    /** Show tooltip with info icon */
+    /** Habilita tooltip */
     tooltip?: boolean;
-    /** Tooltip content */
+    /** Texto do tooltip */
     tooltipText?: string;
-    side?: "top" | "right" | "bottom" | "left";
-    align?: "start" | "center" | "end";
+    /** Lado onde o tooltip aparece */
+    side?: Side;
+    /** Alinhamento do tooltip */
+    align?: Align;
+    /** Mensagem de erro a ser exibida */
     errorMessage?: string;
-    /** Leading icon */
+    /** Ícone a ser exibido no campo */
     icon?: React.ReactNode;
 }
+/**
+ * Parâmetros para validação do TextField
+ */
 export interface ValidationParams {
+    /** Valor a ser validado */
     value: string;
+    /** Comprimento máximo permitido */
     maxLength?: number;
+    /** Tipo do campo (influencia a validação) */
     type?: TextFieldType;
+    /** Mensagem de erro customizada */
     errorMessage?: string;
+    /** Define se o campo é obrigatório */
     required?: boolean;
 }

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

@@ -1,22 +1,59 @@
 import { ReactNode } from 'react';
+/** Tipos de toast disponíveis */
 export type ToastType = 'success' | 'alert' | 'info';
+/**
+ * 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();
+ *
+ * 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>
+ * ```
+ */
 export interface ToastProviderProps {
+    /** Conteúdo da aplicação */
     children: ReactNode;
 }

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

@@ -1,11 +1,39 @@
 import React from 'react';
-export interface TooltipProps {
-    id?: string;
+import { Side, Align, BaseProps } from '../../types/common.types';
+/**
+ * Props do componente Tooltip
+ * @example
+ * ```tsx
+ * <Tooltip text="Informação adicional">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ * ```
+ * @example
+ * ```tsx
+ * <Tooltip
+ *   text="Clique para mais detalhes"
+ *   side="top"
+ *   align="center"
+ *   sideOffset={10}
+ *   maxWidth={300}
+ * >
+ *   <IconButton icon={<InfoIcon />} />
+ * </Tooltip>
+ * ```
+ */
+export interface TooltipProps extends BaseProps {
+    /** Conteúdo do tooltip */
     text: React.ReactNode;
-    side?: "top" | "right" | "bottom" | "left";
-    align?: "start" | "center" | "end";
+    /** Lado onde o tooltip aparece em relação ao elemento */
+    side?: Side;
+    /** Alinhamento do tooltip */
+    align?: Align;
+    /** Distância em pixels do lado do elemento */
     sideOffset?: number;
+    /** Deslocamento em pixels no eixo de alinhamento */
     alignOffset?: number;
+    /** Largura máxima do tooltip em pixels */
     maxWidth?: number;
+    /** Elemento que dispara o tooltip ao hover */
     children: React.ReactNode;
 }

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

@@ -1,19 +1,39 @@
+import { BaseProps } from '../../types/common.types';
+/** Tipos de entrada suportados pelo VerificationCode */
 export type InputType = 'numeric' | 'alpha' | 'alphanumeric';
-export interface VerificationCodeProps {
-    /** Define o número de dígitos do código (padrão: 6) */
+/**
+ * Props do componente VerificationCode
+ * @example
+ * ```tsx
+ * <VerificationCode
+ *   length={6}
+ *   inputType="numeric"
+ *   onComplete={(code) => handleVerification(code)}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <VerificationCode
+ *   length={4}
+ *   inputType="alphanumeric"
+ *   onComplete={handleCode}
+ *   hasError={!!error}
+ *   errorMessage="Código inválido"
+ *   disabled={isVerifying}
+ * />
+ * ```
+ */
+export interface VerificationCodeProps extends BaseProps {
+    /** Número de dígitos do código (padrão: 6) */
     length?: number;
-    /** Define tipo de entrada: números, letras ou alfanumérico (padrão: "numeric") */
+    /** Tipo de entrada permitida (padrão: "numeric") */
     inputType?: InputType;
-    /** Callback chamado quando todos os campos são preenchidos */
+    /** Callback executado quando todos os campos são preenchidos: (value) => void */
     onComplete?: (value: string) => void;
-    /** Indica se o campo está em estado de erro */
+    /** Define se o campo está em estado de erro */
     hasError?: boolean;
     /** Mensagem de erro exibida abaixo do componente */
     errorMessage?: string;
-    /** Define se o componente deve estar desabilitado */
-    disabled?: boolean;
-    /** Classe CSS adicional para estilização externa */
-    className?: string;
     /** Props adicionais passadas para os inputs */
     [key: string]: any;
 }

package/dist/components/index.d.ts

@@ -5,7 +5,7 @@ export { type BadgeProps } from './Badge/Badge.types';
 export { default as Button } from './Button';
 export { type ButtonProps } from './Button/Button.types';
 export { default as Calendar } from './Calendar';
-export { type CalendarProps, type Locale, type DateFormat, type DayItem, type EmptyItem, type CalendarItem, type YearItem } from './Calendar/Calendar.types';
+export { type CalendarProps, type DateFormat, type DayItem, type EmptyItem, type CalendarItem, type YearItem } from './Calendar/Calendar.types';
 export { default as Callout } from './Callout';
 export { type CalloutProps } from './Callout/Callout.types';
 export { default as Checkbox } from './Checkbox';