@giro-ds/react 4.0.0 → 5.0.1

package/dist/index.d.ts

@@ -3,7 +3,6 @@ import React__default, { ReactNode, ReactElement, ComponentPropsWithoutRef, CSSP
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Matcher } from 'react-day-picker';
 import { Toast as Toast$1 } from 'radix-ui';
-import { BaseProps as BaseProps$1, Side as Side$1, Align as Align$1 } from '@/types';
 
 type Size = 'sm' | 'lg';
 type Variant = 'filled' | 'outlined' | 'text';
@@ -145,11 +144,9 @@ declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & Rea
 
 /** Formato de exibição da data aceito pelo componente. */
 type DateFormat = 'dd/mm/yyyy' | 'mm/dd/yyyy' | (string & {});
-interface CalendarProps extends Omit<BaseProps, 'disabled'> {
+interface CalendarBaseProps extends Omit<BaseProps, 'disabled'> {
     /** Data selecionada atualmente (usada pelo DatePicker). */
     selected?: Date | null;
-    /** Data selecionada atualmente (usada pelo Filter). */
-    selectedDate?: Date | null;
     /**
      * Mês exibido no calendário. Use junto com `onDateChange` para
      * controlar a navegação externamente.
@@ -157,15 +154,13 @@ interface CalendarProps extends Omit<BaseProps, 'disabled'> {
     currentDate?: Date | null;
     /**
      * Mês inicial padrão exibido quando não controlado.
-     * @default currentMonth
+     * @default currentDate
      */
     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;
     /** Chamado quando o usuário navega entre meses. */
@@ -181,10 +176,6 @@ interface CalendarProps extends Omit<BaseProps, 'disabled'> {
      * (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'
@@ -195,62 +186,16 @@ interface CalendarProps extends Omit<BaseProps, 'disabled'> {
      * @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__default.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__default.ReactNode;
 }
+type CalendarProps = CalendarBaseProps;
 
-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) => react_jsx_runtime.JSX.Element;
+declare const Calendar: ({ selected, currentDate, defaultMonth, startMonth, endMonth, onDaySelect, onDateChange, onClear: _onClear, minDate, maxDate, disabled, format: _format, locale, autoFocus, id, "aria-label": ariaLabel, }: CalendarProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * Props do componente Callout
@@ -392,7 +337,7 @@ declare function Container({ children }: ContainerProps): react_jsx_runtime.JSX.
  *   required
  *   helperText="Selecione a data de início do projeto"
  *   minDate={new Date()}
- *   calendarPosition="right"
+ *   calendarSide="right"
  *   error={errorMessage}
  * />
  * ```
@@ -401,7 +346,9 @@ interface DatePickerProps extends BaseProps {
     /** Locale para formatação da data */
     locale?: Locale;
     /** Posição do calendário em relação ao campo */
-    calendarPosition?: Position;
+    calendarSide?: Side;
+    /** Alinhamento do calendário em relação ao campo */
+    calendarAlign?: Exclude<Align, 'center'>;
     /** Texto de ajuda exibido abaixo do campo */
     helperText?: string;
     /** Define se o campo é obrigatório */
@@ -424,7 +371,7 @@ interface DatePickerProps extends BaseProps {
     'data-testid'?: string;
 }
 
-declare const _default$1: React__default.NamedExoticComponent<DatePickerProps>;
+declare const _default$2: React__default.NamedExoticComponent<DatePickerProps>;
 
 /**
  * Props do componente Dialog
@@ -432,13 +379,12 @@ declare const _default$1: React__default.NamedExoticComponent<DatePickerProps>;
  * <Dialog
  *   title="Confirmar ação"
  *   bodyContent="Tem certeza que deseja continuar?"
- *   textConfirm="Confirmar"
- *   textCancel="Cancelar"
+ *   textPrimaryAction="Confirmar"
+ *   textSecondaryAction="Cancelar"
  * />
  */
 interface DialogProps extends BaseProps, React.HTMLAttributes<HTMLDivElement> {
-    /** Conteúdo customizado do diálogo */
-    show: boolean;
+    show?: boolean;
     /** Título exibido no cabeçalho do diálogo */
     title?: string;
     /** Texto ou conteúdo do corpo do diálogo */
@@ -487,6 +433,8 @@ declare const Dialog: React$1.FC<DialogProps>;
 interface DrawerProps extends BaseProps {
     /** Conteúdo a ser exibido dentro do drawer */
     children?: ReactNode;
+    /** Conteúdo customizado do cabeçalho */
+    headerContent?: ReactNode;
     /** Largura customizada do drawer (ex: '400px', '50%') */
     customWidth?: string;
     /** Callback executado ao fechar o drawer: () => void */
@@ -505,105 +453,16 @@ interface DrawerProps extends BaseProps {
     closeOnEscape?: boolean;
 }
 
-/**
- * Componente Drawer do Zanthus Design System
- * Implementa um painel lateral deslizante com overlay
- * Segue padrões WCAG 2.1 AA para acessibilidade
- */
 declare const Drawer: React__default.FC<DrawerProps>;
 
-/**
- * Representa um item individual do dropdown
- */
-interface DropdownItem {
-    /** ID único do item (será gerado automaticamente se não fornecido) */
+interface FilterItem$1 {
     id?: string;
-    /** Texto principal do item */
     text: string;
-    /** Texto secundário/descrição do item */
     subText?: string;
-    /** Ícone do item */
-    icon?: React__default.ReactNode;
-    /** Define se o item está desabilitado */
+    icon?: ReactNode;
     disabled?: boolean;
 }
-/** Tipos de dropdown disponíveis */
-type DropdownType = 'text' | 'checkbox' | 'icon';
-/**
- * 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"
- * />
- * ```
- */
-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 */
-    items: DropdownItem[];
-    /** Tipo do dropdown */
-    type?: DropdownType;
-    /** Habilita campo de busca */
-    applySearch?: boolean;
-    /** Placeholder do campo de busca */
-    placeholder?: string;
-    /** Callback executado quando a seleção muda: (selectedIds) => void */
-    onSelectionChange?: (selectedIds: string[]) => void;
-    /** Controla exibição do subtexto dos itens */
-    showSubText?: boolean;
-    /** IDs dos itens selecionados por padrão */
-    defaultSelectedIds?: string[];
-    /** 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 está sendo usado para filtro */
-    filter?: boolean;
-    /** Configurações para paginação infinita */
-    infiniteScroll?: {
-        /** Status atual do carregamento */
-        status: 'idle' | 'loading' | 'succeeded' | 'failed';
-        /** Página atual */
-        page: number;
-        /** Última página disponível */
-        lastPage: number;
-        /** Callback executado para carregar próxima página: () => void */
-        onLoadMore: () => void;
-        /** Threshold para trigger do scroll infinito (0-1) */
-        threshold?: number;
-        /** Margem para trigger do scroll infinito */
-        rootMargin?: string;
-        /** Modo de debug */
-        debug?: boolean;
-    };
-}
-
-declare const MemoizedDropdown: React__default.NamedExoticComponent<DropdownProps>;
-
+type FilterType = 'text' | 'checkbox' | 'icon' | 'calendar';
 /**
  * Props do componente Filter
  * @example
@@ -630,9 +489,9 @@ declare const MemoizedDropdown: React__default.NamedExoticComponent<DropdownProp
  */
 interface FilterProps extends BaseProps {
     /** Array de itens para filtros do tipo dropdown */
-    items?: DropdownItem[];
+    items?: FilterItem$1[];
     /** Tipo do filtro (dropdown ou calendário) */
-    type?: DropdownType | 'calendar';
+    type?: FilterType;
     /** IDs dos itens selecionados */
     selectedIds?: string[];
     /** Callback executado ao aplicar filtro: (selectedIds) => void */
@@ -651,8 +510,10 @@ interface FilterProps extends BaseProps {
     onOpen?: () => void;
     /** Callback executado ao fechar o filtro: () => void */
     onClose?: () => void;
-    /** Posição do dropdown em relação ao botão */
-    position?: Position;
+    /** Posição do popover em relação ao botão */
+    side?: Side;
+    /** Alinhamento do popover em relação ao botão */
+    align?: Exclude<Align, 'center'>;
     /** Data selecionada (para tipo calendar) */
     selectedDate?: Date | null;
     /** Callback executado ao selecionar data: (date) => void */
@@ -804,9 +665,28 @@ declare const Menu: React__default.FC<MenuProps>;
 interface PopoverProps {
     trigger: React.ReactNode;
     content: React.ReactNode;
-    onDateSelect?: (date: Date) => void;
     align?: Align;
     side?: Side;
+    /** Distância em pixels entre o conteúdo e o trigger */
+    sideOffset?: number;
+    /** Controla o estado de abertura em modo controlado */
+    open?: boolean;
+    /** Callback chamado quando o estado de abertura muda */
+    onOpenChange?: (open: boolean) => void;
+    /**
+    * Quando `true`, o trigger atua como âncora de posicionamento e o popover
+    * é aberto/fechado exclusivamente via `open`/`onOpenChange` (modo DatePicker).
+    * Quando `false` (padrão), o trigger continua abrindo/fechando o popover
+    * normalmente, mas o estado pode ser sincronizado via `open`/`onOpenChange`
+    * (modo Filter).
+    */
+    asAnchor?: boolean;
+    /** Callback chamado quando o foco automático é ativado ao abrir o popover */
+    onOpenAutoFocus?: (event: Event) => void;
+    /** Callback chamado quando o foco automático é ativado ao fechar o popover */
+    onCloseAutoFocus?: (event: Event) => void;
+    /** Quando `true`, exibe uma seta apontando para o trigger */
+    showArrow?: boolean;
 }
 
 declare const Popover: React$1.FC<PopoverProps>;
@@ -1128,14 +1008,15 @@ interface BaseFilterItem {
     id?: string;
     buttonText: string | React__default.ReactNode;
     icon?: React__default.ReactElement;
-    position?: 'left' | 'right';
+    side?: Side;
+    align?: Exclude<Align, 'center'>;
     disabled?: boolean;
     onToggle?: (isOpen: boolean) => void;
     tooltip?: string;
 }
 interface CheckboxFilterItem extends BaseFilterItem {
     type: 'checkbox' | 'text' | 'icon';
-    items: DropdownItem[];
+    items: FilterItem$1[];
     selectedIds?: string[];
     onSelectionChange?: (selectedIds: string[]) => void;
     placeholder?: string;
@@ -1178,6 +1059,63 @@ interface TablePaginationProps extends React__default.HTMLAttributes<HTMLDivElem
 }
 declare const TablePagination: React__default.FC<TablePaginationProps>;
 
+/**
+ * Props do componente TextArea
+ * @example
+ * ```tsx
+ * <TextArea
+ *   label="Descrição"
+ *   value={description}
+ *   onChange={setDescription}
+ *   placeholder="Digite uma descrição"
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * <TextArea
+ *   label="Comentário"
+ *   required
+ *   maxLength={500}
+ *   showCharCount
+ *   helperText="Máximo de 500 caracteres"
+ *   errorMessage={error}
+ * />
+ * ```
+ */
+interface TextAreaProps extends Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'value'> {
+    /** Valor controlado do campo */
+    value?: string;
+    /** Callback executado quando o valor muda: (value) => void */
+    onChange?: (value: string) => void;
+    /** Label do campo */
+    label?: string;
+    /** Texto de ajuda exibido abaixo do campo */
+    helperText?: string;
+    /** Habilita tooltip */
+    tooltip?: boolean;
+    /** Texto do tooltip */
+    tooltipText?: string;
+    /** Lado onde o tooltip aparece */
+    side?: Side;
+    /** Alinhamento do tooltip */
+    align?: Align;
+    /**
+     * Mensagem de erro exibida no campo.
+     * Usada tanto pela validação interna (required, etc.)
+     * quanto pelo controle externo via formulários (react-hook-form, formik, etc.)
+     */
+    errorMessage?: string;
+    /** Sinaliza erro externo para controle via formulários (react-hook-form, formik, etc.) */
+    error?: boolean;
+    /** Controla o redimensionamento do textarea */
+    resize?: 'none' | 'vertical' | 'both';
+    /** Exibe contador de caracteres (requer maxLength) */
+    showCharCount?: boolean;
+    height?: number;
+}
+
+declare const _default$1: React__default.NamedExoticComponent<TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
+
 /** Tipos de input suportados pelo TextField */
 type TextFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
 /**
@@ -1225,10 +1163,18 @@ interface TextFieldProps extends Omit<React__default.InputHTMLAttributes<HTMLInp
     side?: Side;
     /** Alinhamento do tooltip */
     align?: Align;
-    /** Mensagem de erro a ser exibida */
+    /**
+     * Mensagem de erro exibida no campo.
+     * Usada tanto pela validação interna (required, formato, etc.)
+     * quanto pelo controle externo via formulários (react-hook-form, formik, etc.)
+     */
     errorMessage?: string;
+    /** Sinaliza erro externo para controle via formulários (react-hook-form, formik, etc.) */
+    error?: boolean;
     /** Ícone a ser exibido no campo */
     icon?: React__default.ReactNode;
+    /** Mantém o ícone visível mesmo quando o campo tem valor */
+    persistIcon?: boolean;
 }
 
 declare const _default: React__default.NamedExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLInputElement>>;
@@ -1412,10 +1358,10 @@ declare const useToast: () => {
     dismissToast: (id: string) => void;
 };
 
-interface TooltipProps extends BaseProps$1 {
+interface TooltipProps extends BaseProps {
     text: React__default.ReactNode;
-    side?: Side$1;
-    align?: Align$1;
+    side?: Side;
+    align?: Align;
     sideOffset?: number;
     /** Deslocamento em pixels no eixo de alinhamento */
     alignOffset?: number;
@@ -1614,5 +1560,5 @@ declare function useInfiniteScroll({ status, page, lastPage, onLoadMore, thresho
 
 declare const normalizeText: (text: React.ReactNode) => string;
 
-export { Avatar, Badge, Button, Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, _default$1 as DatePicker, Dialog, Drawer, MemoizedDropdown as Dropdown, Filter, ListItem, Menu, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, _default as TextField, Toast, ToastContainer, ToastProvider, Tooltip, VerificationCode, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
-export type { AvatarProps, BadgeProps, ButtonProps, CalendarProps, CalloutProps, CheckboxProps, ChipsProps, ContainerProps, DatePickerProps, DialogProps, DrawerProps, DropdownItem, DropdownProps, DropdownType, FilterItem, FilterProps, ListItemProps, MenuProps, PopoverProps, QuantityProps, RadioGroupProps, RadioProps, SearchProps, SelectProps, SwitchProps, TableHeaderProps, TablePaginationProps, TableProps, TextFieldProps, ToastProps, TooltipProps, VerificationCodeProps };
+export { Avatar, Badge, Button, Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, _default$2 as DatePicker, Dialog, Drawer, Filter, ListItem, Menu, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, _default$1 as TextArea, _default as TextField, Toast, ToastContainer, ToastProvider, Tooltip, VerificationCode, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
+export type { AvatarProps, BadgeProps, ButtonProps, CalendarProps, CalloutProps, CheckboxProps, ChipsProps, ContainerProps, DatePickerProps, DialogProps, DrawerProps, FilterItem, FilterProps, ListItemProps, MenuProps, PopoverProps, QuantityProps, RadioGroupProps, RadioProps, SearchProps, SelectProps, SwitchProps, TableHeaderProps, TablePaginationProps, TableProps, TextAreaProps, TextFieldProps, ToastProps, TooltipProps, VerificationCodeProps };