@giro-ds/react 3.0.5 → 3.0.7

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

@@ -1,50 +1,77 @@
 import React from 'react';
+import { BaseProps } from '../../types/common.types';
+/**
+ * Representa um item individual do dropdown
+ */
 export interface DropdownItem {
-    /** ID único do item (opcional, será gerado automaticamente se não fornecido) */
+    /** ID único do item (será gerado automaticamente se não fornecido) */
     id?: string;
     /** Texto principal do item */
     text: string;
     /** Texto secundário/descrição do item */
     subText?: string;
-    /** Ícone do item (React node) */
+    /** Ícone do item */
     icon?: React.ReactNode;
     /** Define se o item está desabilitado */
     disabled?: boolean;
 }
+/** Tipos de dropdown disponíveis */
 export type DropdownType = 'text' | 'checkbox' | 'icon';
-export interface DropdownProps {
-    /** Classes CSS adicionais */
-    className?: string;
-    /** Força posição do dropdown: 'top' abre para cima, 'bottom' abre para baixo. Se não especificado, usa detecção automática */
+/**
+ * Props do componente Dropdown
+ * @example
+ * ```tsx
+ * <Dropdown
+ *   items={[
+ *     { text: 'Opção 1', icon: <Icon1 /> },
+ *     { text: 'Opção 2', icon: <Icon2 /> }
+ *   ]}
+ *   type="text"
+ *   placeholder="Selecione uma opção"
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <Dropdown
+ *   items={items}
+ *   type="checkbox"
+ *   applySearch={true}
+ *   onSelectionChange={(ids) => console.log(ids)}
+ *   defaultSelectedIds={['1', '2']}
+ *   maxHeight="300px"
+ * />
+ * ```
+ */
+export interface DropdownProps extends BaseProps {
+    /** Força posição do dropdown: 'top' abre para cima, 'bottom' para baixo (detecção automática se não especificado) */
     position?: 'top' | 'bottom';
-    /** Array de itens para o dropdown - obrigatório */
+    /** Array de itens para o dropdown */
     items: DropdownItem[];
-    /** ID único do componente */
-    id?: string;
     /** Tipo do dropdown */
     type?: DropdownType;
     /** Habilita campo de busca */
     applySearch?: boolean;
     /** Placeholder do campo de busca */
     placeholder?: string;
-    /** Callback para mudanças na seleção */
+    /** Callback executado quando a seleção muda: (selectedIds) => void */
     onSelectionChange?: (selectedIds: string[]) => void;
-    /** Controla exibição do subtexto */
+    /** Controla exibição do subtexto dos itens */
     showSubText?: boolean;
     /** IDs dos itens selecionados por padrão */
     defaultSelectedIds?: string[];
-    /** Estado inicial dos itens selecionados (objeto com chave-valor) */
+    /** Estado inicial dos itens selecionados (objeto chave-valor) */
     initialItemsSelected?: Record<string, boolean>;
+    /** Largura do dropdown */
     width?: string | number;
+    /** Largura máxima do dropdown */
     maxWidth?: string | number;
+    /** Largura mínima do dropdown */
     minWidth?: string | number;
     /** Altura máxima do dropdown */
     maxHeight?: string | number;
-    /** Define se o componente esta sendo usado para filtro */
+    /** Define se o componente está sendo usado para filtro */
     filter?: boolean;
-    /**
-     * Configurações para paginação infinita
-     */
+    /** Configurações para paginação infinita */
     infiniteScroll?: {
         /** Status atual do carregamento */
         status: 'idle' | 'loading' | 'succeeded' | 'failed';
@@ -52,13 +79,13 @@ export interface DropdownProps {
         page: number;
         /** Última página disponível */
         lastPage: number;
-        /** Callback para carregar próxima página */
+        /** Callback executado para carregar próxima página: () => void */
         onLoadMore: () => void;
-        /** Threshold para trigger (0-1) */
+        /** Threshold para trigger do scroll infinito (0-1) */
         threshold?: number;
-        /** Margem para trigger */
+        /** Margem para trigger do scroll infinito */
         rootMargin?: string;
-        /** Debug mode */
+        /** Modo de debug */
         debug?: boolean;
     };
 }

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

@@ -1,46 +1,65 @@
 import { ReactNode, ReactElement } from 'react';
+import { Variant, BaseProps, Locale, Position } from '../../types/common.types';
 import { DropdownItem, DropdownType } from '../Dropdown/Dropdown.types';
-type FilterButtonVariant = 'filled' | 'outlined' | 'text';
-export interface FilterProps {
-    /** Items para o dropdown */
+/**
+ * Props do componente Filter
+ * @example
+ * ```tsx
+ * <Filter
+ *   items={filterItems}
+ *   type="checkbox"
+ *   placeholder="Filtrar por categoria"
+ *   onApplyFilter={(ids) => handleFilter(ids)}
+ *   buttonText="Filtros"
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <Filter
+ *   type="calendar"
+ *   selectedDate={selectedDate}
+ *   onDateSelect={handleDateSelect}
+ *   minDate={new Date('2024-01-01')}
+ *   locale="pt-br"
+ *   icon={<CalendarIcon />}
+ * />
+ * ```
+ */
+export interface FilterProps extends BaseProps {
+    /** Array de itens para filtros do tipo dropdown */
     items?: DropdownItem[];
-    /** Tipo do dropdown */
+    /** Tipo do filtro (dropdown ou calendário) */
     type?: DropdownType | 'calendar';
-    /** IDs selecionados */
+    /** IDs dos itens selecionados */
     selectedIds?: string[];
-    /** Callback quando aplicar filtros */
+    /** Callback executado ao aplicar filtro: (selectedIds) => void */
     onApplyFilter?: (selectedIds: string[]) => void;
-    /** Placeholder do dropdown */
+    /** Placeholder do campo de busca */
     placeholder?: string;
-    /** Habilita busca no dropdown */
+    /** Habilita campo de busca no dropdown */
     enableSearch?: boolean;
-    /** Texto do botão do filtro */
+    /** Texto ou conteúdo do botão de filtro */
     buttonText?: string | ReactNode;
-    /** Ícone do botão */
+    /** Ícone do botão de filtro */
     icon?: ReactElement;
-    /** Variante do botão */
-    variant?: FilterButtonVariant;
-    /** Callback chamado quando o filtro é aberto */
+    /** Variante visual do botão */
+    variant?: Variant;
+    /** Callback executado ao abrir o filtro: () => void */
     onOpen?: () => void;
-    /** Callback chamado quando o filtro é fechado */
+    /** Callback executado ao fechar o filtro: () => void */
     onClose?: () => void;
-    /** Posição do dropdown */
-    position?: 'left' | 'right';
-    /** Se o filtro está desabilitado */
-    disabled?: boolean;
-    /** Classes CSS adicionais */
-    className?: string;
-    /** Data selecionada (quando type='calendar') */
+    /** Posição do dropdown em relação ao botão */
+    position?: Position;
+    /** Data selecionada (para tipo calendar) */
     selectedDate?: Date | null;
-    /** Callback quando data é selecionada */
+    /** Callback executado ao selecionar data: (date) => void */
     onDateSelect?: (date: Date) => void;
-    /** Callback para limpar data */
+    /** Callback executado ao limpar data: () => void */
     onClearDate?: () => void;
-    /** Data mínima permitida */
+    /** Data mínima selecionável (para tipo calendar) */
     minDate?: Date;
-    /** Data máxima permitida */
+    /** Data máxima selecionável (para tipo calendar) */
     maxDate?: Date;
-    /** Locale do calendar */
-    locale?: 'pt-br' | 'en-us';
+    /** Locale do calendário */
+    locale?: Locale;
 }
-export {};

package/dist/components/ListItem/ListItem.d.ts

@@ -1,9 +1,4 @@
 import React from "react";
 import type { ListItemProps } from './ListItem.types';
-/**
- * Componente ListItem do Zanthus Design System
- * Implementa item de lista unificado com variações text, checkbox, radio e icon
- * Segue padrões WCAG 2.1 AA para acessibilidade
- */
 declare const ListItem: React.FC<ListItemProps>;
 export default ListItem;

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

@@ -1,33 +1,51 @@
-import React from 'react';
+import * as React from 'react';
+import { BaseProps } from '../../types/common.types';
+/** Variantes disponíveis para o ListItem */
 export type ListItemVariant = 'text' | 'checkbox' | 'radio' | 'icon';
-export interface ListItemProps {
-    /** ID único do componente */
-    id?: string;
-    /** Classes CSS customizadas */
-    className?: string;
+/**
+ * Props do componente ListItem
+ * @example
+ * ```tsx
+ * <ListItem
+ *   variant="text"
+ *   text="Item da lista"
+ *   subText="Descrição do item"
+ *   onClick={handleClick}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <ListItem
+ *   variant="checkbox"
+ *   text="Aceitar termos"
+ *   checked={isChecked}
+ *   onChange={setIsChecked}
+ *   disabled={false}
+ * />
+ * ```
+ */
+export interface ListItemProps extends BaseProps {
     /** Variante do item da lista */
     variant?: ListItemVariant;
     /** Texto principal do item */
     text?: string;
-    /** Nome do input (para checkbox/radio) */
+    /** Nome do input (para variantes checkbox/radio) */
     name?: string;
-    /** Texto secundário/descrição */
+    /** Texto secundário/descrição do item */
     subText?: string;
-    /** Se o item está desabilitado */
-    disabled?: boolean;
-    /** Estado de checked (para checkbox/radio) */
+    /** Estado de checked (para variantes checkbox/radio) */
     checked?: boolean;
-    /** Estado de selecionado (para text/icon) */
+    /** Estado de selecionado (para variantes text/icon) */
     selected?: boolean;
-    /** Callback para clique no item */
+    /** Callback executado ao clicar no item: (event) => void */
     onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    /** Callback para mudança de estado */
+    /** Callback executado quando o estado muda: (checked) => void */
     onChange?: (checked: boolean) => void;
-    /** Ícone do item (para variant icon) */
+    /** Ícone do item (para variante icon) */
     icon?: React.ReactNode;
-    /** Valor do input (para checkbox/radio) */
+    /** Valor do input (para variantes checkbox/radio) */
     value?: string;
-    /** Se deve mostrar o subtexto */
+    /** Define se deve mostrar o subtexto */
     showSubText?: boolean;
     /** Estado de hover */
     hovered?: boolean;

package/dist/components/Menu/Menu.d.ts

@@ -1,4 +1,4 @@
-import { MenuProps } from './Menu.types';
 import React from 'react';
+import { MenuProps } from './Menu.types';
 declare const Menu: React.FC<MenuProps>;
 export default Menu;

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

@@ -1,32 +1,90 @@
+import * as React from 'react';
 import { ReactElement } from 'react';
+import { BaseProps } from '../../types/common.types';
+/**
+ * Representa um item do menu (suporta subitens aninhados)
+ */
 export interface MenuItemProps {
+    /** ID único do item */
     id?: string;
+    /** Texto principal do item */
     text?: string;
+    /** Texto secundário/descrição do item */
     subText?: string;
+    /** Estado desabilitado do item */
     disabled?: boolean;
+    /** Ícone do item */
     icon?: React.ReactNode;
+    /** Subitens do menu (para menus aninhados) */
     children?: MenuItemProps[];
+    /** Valor do item */
     value?: string;
 }
+/**
+ * Props para renderização customizada de item do menu
+ */
 export interface DefaultMenuItemProps {
+    /** Dados do item */
     item: MenuItemProps;
+    /** Define se o item está selecionado */
     isSelected: boolean;
+    /** Callback executado ao selecionar o item: (item) => void */
     onSelect: (item: MenuItemProps) => void;
 }
-export interface MenuProps {
+/**
+ * Props do componente Menu
+ * @example
+ * ```tsx
+ * <Menu
+ *   items={[
+ *     { id: '1', text: 'Perfil', icon: <UserIcon /> },
+ *     { id: '2', text: 'Configurações', icon: <SettingsIcon /> }
+ *   ]}
+ *   onItemSelect={(item) => handleSelect(item)}
+ * >
+ *   <Button>Menu</Button>
+ * </Menu>
+ * ```
+ * @example
+ * ```tsx
+ * <Menu
+ *   items={menuItems}
+ *   type="icon"
+ *   search={true}
+ *   enableInfiniteScroll={true}
+ *   onScrollEnd={loadMore}
+ *   maxHeight="400px"
+ *   align="end"
+ * />
+ * ```
+ */
+export interface MenuProps extends BaseProps {
+    /** Array de itens do menu */
     items: MenuItemProps[];
+    /** Elemento trigger customizado para abrir o menu */
     children?: ReactElement;
+    /** Tipo de visualização do menu */
     type?: 'text' | 'icon';
-    className?: string;
+    /** Callback executado quando um item é selecionado: (item) => void */
     onItemSelect?: (items: MenuItemProps) => void;
+    /** Array de itens selecionados */
     selectedItems?: MenuItemProps[];
+    /** Habilita campo de busca */
     search?: boolean;
+    /** Alinhamento do menu */
     align?: 'start' | 'end' | 'center';
+    /** Altura máxima do menu */
     maxHeight?: number | string;
+    /** 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: (searchTerm) => void */
     onApiSearch?: (searchTerm: string) => void;
+    /** Callback executado quando o menu abre/fecha: (open) => void */
     onOpenChange?: (open: boolean) => void;
 }

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

@@ -1,20 +1,38 @@
-export interface QuantityProps {
-    /** Valor padrão inicial */
+import { Size, BaseProps } from '../../types/common.types';
+/**
+ * Props do componente Quantity
+ * @example
+ * ```tsx
+ * <Quantity
+ *   value={quantity}
+ *   onChange={setQuantity}
+ *   size="lg"
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <Quantity
+ *   defaultValue={1}
+ *   decimal={true}
+ *   decimalPlaces={2}
+ *   step={0.5}
+ *   disabled={false}
+ * />
+ * ```
+ */
+export interface QuantityProps extends BaseProps {
+    /** Valor inicial (modo não controlado) */
     defaultValue?: number;
-    /** Valor controlado externamente */
+    /** Valor atual (modo controlado) */
     value?: number;
-    /** Callback chamado quando o valor muda */
+    /** Callback executado quando o valor muda: (value) => void */
     onChange?: (value: number) => void;
-    /** Define se o componente está desabilitado */
-    disabled?: boolean;
-    /** Define se o valor do input será decimal ou inteiro */
+    /** Habilita entrada de valores decimais */
     decimal?: boolean;
-    /** Define o tamanho do componente */
-    size?: 'lg' | 'sm';
-    /** Define o número de casas decimais quando decimal for true */
+    /** Tamanho do componente */
+    size?: Size;
+    /** Número de casas decimais permitidas */
     decimalPlaces?: number;
+    /** Incremento/decremento ao clicar nos botões */
     step?: number;
-    id?: string;
-    /** ClassName adicional para customização */
-    className?: string;
 }

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

@@ -1,15 +1,52 @@
+import { BaseProps } from '../../types/common.types';
+/**
+ * Props de um item individual de rádio
+ */
 export interface RadioProps {
+    /** ID único do elemento */
     id?: string | number;
+    /** Valor do radio button */
     value: string;
+    /** Label exibida ao lado do radio button */
     label: string;
+    /** Estado desabilitado do item */
     disabled?: boolean;
 }
-export interface RadioGroupProps {
-    id?: string;
+/**
+ * Props do componente RadioGroup
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   items={[
+ *     { value: 'option1', label: 'Opção 1' },
+ *     { value: 'option2', label: 'Opção 2' }
+ *   ]}
+ *   onValueChange={(value) => setSelected(value)}
+ *   defaultValue="option1"
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   items={options}
+ *   onValueChange={handleChange}
+ *   name="preference"
+ *   orientation="horizontal"
+ *   ariaLabel="Selecione sua preferência"
+ * />
+ * ```
+ */
+export interface RadioGroupProps extends BaseProps {
+    /** Array de itens de rádio */
     items: RadioProps[];
+    /** Callback executado quando o valor muda: (value) => void */
     onValueChange?: (value: string) => void;
+    /** Valor inicial selecionado */
     defaultValue?: string;
+    /** Nome do grupo de radio buttons */
     name?: string;
+    /** Label acessível para leitores de tela */
     ariaLabel?: string;
+    /** Orientação do layout dos radio buttons */
     orientation?: "horizontal" | "vertical";
 }

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

@@ -1,16 +1,45 @@
-import React from 'react';
-export interface SearchProps {
+import * as React from 'react';
+import { BaseProps } from '../../types/common.types';
+/**
+ * Props do componente Search
+ * @example
+ * ```tsx
+ * <Search
+ *   placeholder="Buscar..."
+ *   value={searchTerm}
+ *   onChange={(e) => setSearchTerm(e.target.value)}
+ *   onClear={() => setSearchTerm('')}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <Search
+ *   placeholder="Pesquisar produtos"
+ *   disabled={isLoading}
+ *   onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+ *   onFocus={handleFocus}
+ * />
+ * ```
+ */
+export interface SearchProps extends BaseProps {
+    /** Placeholder do campo de busca */
     placeholder?: string;
-    disabled?: boolean;
+    /** Valor controlado do campo */
     value?: string;
+    /** Callback executado quando o valor muda: (e) => void */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback executado ao pressionar tecla: (e) => void */
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Callback executado ao focar no campo: (e) => void */
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback executado ao desfocar do campo: (e) => void */
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback executado ao limpar o campo: () => void */
     onClear?: () => void;
+    /** Callback executado ao clicar no componente: (e) => void */
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Callback executado ao pressionar mouse no componente: (e) => void */
     onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    className?: string;
-    id?: string;
+    /** ID para testes automatizados */
     'data-testid'?: string;
 }