@giro-ds/react 6.0.1 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +342 -180
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +305 -49
- package/dist/index.esm.js +344 -183
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +3 -1
- package/package.json +3 -1
package/dist/index.d.ts
CHANGED
|
@@ -2,18 +2,30 @@ import * as React$1 from 'react';
|
|
|
2
2
|
import React__default, { ReactNode, ReactElement, ComponentPropsWithoutRef, CSSProperties } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { Matcher } from 'react-day-picker';
|
|
5
|
+
import { RowData, ColumnDef } from '@tanstack/react-table';
|
|
5
6
|
import { Toast as Toast$1 } from 'radix-ui';
|
|
6
7
|
|
|
8
|
+
/** Tamanho do componente: 'sm' (pequeno) ou 'lg' (grande) */
|
|
7
9
|
type Size = 'sm' | 'lg';
|
|
10
|
+
/** Variante visual do componente: 'filled' (preenchido), 'outlined' (contorno) ou 'text' (apenas texto) */
|
|
8
11
|
type Variant = 'filled' | 'outlined' | 'text';
|
|
12
|
+
/** Variante de cor do texto: 'neutral' (neutro), 'brand' (marca), 'color' (colorido), 'success' (sucesso) ou 'alert' (alerta) */
|
|
9
13
|
type TextVariant = 'neutral' | 'brand' | 'color' | 'success' | 'alert';
|
|
14
|
+
/** Lado de posicionamento: 'top' (topo), 'right' (direita), 'bottom' (base) ou 'left' (esquerda) */
|
|
10
15
|
type Side = 'top' | 'right' | 'bottom' | 'left';
|
|
16
|
+
/** Alinhamento do componente: 'start' (início), 'center' (centro) ou 'end' (fim) */
|
|
11
17
|
type Align = 'start' | 'center' | 'end';
|
|
18
|
+
/** Posição horizontal de um elemento secundário: 'right' (direita), 'left' (esquerda) ou 'both' (ambos os lados) */
|
|
12
19
|
type Position = 'right' | 'left' | 'both';
|
|
20
|
+
/** Localidade do componente: 'pt-br' (Português do Brasil) ou 'en-us' (Inglês dos EUA) */
|
|
13
21
|
type Locale = 'pt-br' | 'en-us';
|
|
22
|
+
/** Props base compartilhadas por todos os componentes do design system */
|
|
14
23
|
interface BaseProps {
|
|
24
|
+
/** Identificador único do elemento HTML */
|
|
15
25
|
id?: string;
|
|
26
|
+
/** Classes CSS adicionais a serem aplicadas ao componente */
|
|
16
27
|
className?: string;
|
|
28
|
+
/** Quando `true`, desabilita interações com o componente */
|
|
17
29
|
disabled?: boolean;
|
|
18
30
|
}
|
|
19
31
|
|
|
@@ -28,7 +40,7 @@ interface BaseProps {
|
|
|
28
40
|
* <Avatar src="https://example.com/avatar.jpg" icon={<UserIcon />} size="sm" />
|
|
29
41
|
* ```
|
|
30
42
|
*/
|
|
31
|
-
interface AvatarProps extends BaseProps {
|
|
43
|
+
interface AvatarProps extends Omit<BaseProps, 'disabled'> {
|
|
32
44
|
/** Ícone ou conteúdo a ser exibido no fallback quando não há imagem ou ela falha ao carregar */
|
|
33
45
|
icon?: React$1.ReactNode;
|
|
34
46
|
/** Tamanho do avatar: 'sm' (32px) ou 'lg' (44px). @default 'lg' */
|
|
@@ -37,44 +49,38 @@ interface AvatarProps extends BaseProps {
|
|
|
37
49
|
src?: string;
|
|
38
50
|
/** Texto alternativo da imagem do avatar, usado como as iniciais do nome */
|
|
39
51
|
initialLetters?: string;
|
|
52
|
+
/** Classe CSS opcional */
|
|
53
|
+
className?: string;
|
|
40
54
|
}
|
|
41
55
|
|
|
42
56
|
declare const Avatar: React__default.FC<AvatarProps>;
|
|
43
57
|
|
|
44
|
-
/** Tipos de badge suportados */
|
|
45
|
-
type BadgeType = 'notification' | 'status';
|
|
46
|
-
/** Valores possíveis para exibição no badge */
|
|
47
|
-
type BadgeValue = number | string | null;
|
|
48
58
|
/**
|
|
49
59
|
* Props do componente Badge
|
|
50
60
|
* @example
|
|
51
61
|
* ```tsx
|
|
52
|
-
*
|
|
62
|
+
* // Modo overlay: badge flutua sobre o children
|
|
63
|
+
* <Badge badgeValue={5}>
|
|
53
64
|
* <IconButton icon={<BellIcon />} />
|
|
54
65
|
* </Badge>
|
|
55
66
|
* ```
|
|
56
67
|
* @example
|
|
57
68
|
* ```tsx
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
* badgeValue="novo"
|
|
61
|
-
* aria-label="Novo item disponível"
|
|
62
|
-
* >
|
|
63
|
-
* <Avatar icon={<UserIcon />} />
|
|
64
|
-
* </Badge>
|
|
69
|
+
* // Modo inline: badge standalone ao lado de outros elementos
|
|
70
|
+
* <Badge badgeValue="+3" aria-label="3 novos itens" />
|
|
65
71
|
* ```
|
|
66
72
|
*/
|
|
67
73
|
interface BadgeProps extends BaseProps {
|
|
68
|
-
/**
|
|
69
|
-
type: BadgeType;
|
|
70
|
-
/** Conteúdo a ser envolvido pelo badge */
|
|
74
|
+
/** Conteúdo a ser envolvido pelo badge. Quando presente, o badge é posicionado sobre o children (modo overlay). */
|
|
71
75
|
children?: ReactNode;
|
|
72
|
-
/** Valor
|
|
73
|
-
badgeValue?:
|
|
74
|
-
/** Valor máximo a ser exibido (ex: 99+ quando badgeValue > maxValue) */
|
|
75
|
-
maxValue?: number;
|
|
76
|
+
/** Valor exibido no badge — aceita número ou string formatada (ex: "+3") */
|
|
77
|
+
badgeValue?: number | string | null;
|
|
76
78
|
/** Label acessível para leitores de tela */
|
|
77
79
|
'aria-label'?: string;
|
|
80
|
+
/** Prop que sinaliza se o Badge será usado no Filter ou não, pois no Filter ele tem uma cor diferente */
|
|
81
|
+
filterVariant?: boolean;
|
|
82
|
+
/** Classe CSS opcional */
|
|
83
|
+
className?: string;
|
|
78
84
|
}
|
|
79
85
|
|
|
80
86
|
declare const Badge: React__default.FC<BadgeProps>;
|
|
@@ -119,6 +125,10 @@ type ButtonOwnPropsBase = {
|
|
|
119
125
|
tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
|
|
120
126
|
/** Alinhamento do tooltip */
|
|
121
127
|
tooltipAlign?: 'start' | 'center' | 'end';
|
|
128
|
+
/**
|
|
129
|
+
* Classe CSS adicional para customização. Use com moderação e prefira as variantes e estilos pré-definidos do design system.
|
|
130
|
+
*/
|
|
131
|
+
className?: string;
|
|
122
132
|
/** Handler de clique; tipado em HTMLElement para ser compatível com todos os modos */
|
|
123
133
|
onClick?: React__default.MouseEventHandler<HTMLElement>;
|
|
124
134
|
} & BaseProps;
|
|
@@ -210,7 +220,7 @@ interface CalendarBaseProps extends Omit<BaseProps, 'disabled'> {
|
|
|
210
220
|
*/
|
|
211
221
|
format?: DateFormat;
|
|
212
222
|
/**
|
|
213
|
-
*
|
|
223
|
+
* Idioma da interface — aceita os códigos internos do design system.
|
|
214
224
|
* @default 'pt-br'
|
|
215
225
|
*/
|
|
216
226
|
locale?: Locale;
|
|
@@ -223,14 +233,14 @@ interface CalendarBaseProps extends Omit<BaseProps, 'disabled'> {
|
|
|
223
233
|
}
|
|
224
234
|
type CalendarProps = CalendarBaseProps;
|
|
225
235
|
|
|
226
|
-
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;
|
|
236
|
+
declare const Calendar: ({ selected, currentDate, defaultMonth, startMonth, endMonth, onDaySelect, onDateChange, onClear: _onClear, minDate, maxDate, disabled, format: _format, locale, autoFocus, className, id, "aria-label": ariaLabel, ...rest }: CalendarProps) => react_jsx_runtime.JSX.Element;
|
|
227
237
|
|
|
228
238
|
/**
|
|
229
239
|
* Props do componente Callout
|
|
230
240
|
* @example
|
|
231
241
|
* ```tsx
|
|
232
242
|
* <Callout
|
|
233
|
-
*
|
|
243
|
+
* variant="success"
|
|
234
244
|
* title="Sucesso!"
|
|
235
245
|
* text="Operação realizada com sucesso"
|
|
236
246
|
* icon={<CheckIcon />}
|
|
@@ -239,21 +249,39 @@ declare const Calendar: ({ selected, currentDate, defaultMonth, startMonth, endM
|
|
|
239
249
|
* @example
|
|
240
250
|
* ```tsx
|
|
241
251
|
* <Callout
|
|
242
|
-
*
|
|
252
|
+
* variant="alert"
|
|
243
253
|
* title="Atenção"
|
|
244
254
|
* text="Verifique os campos obrigatórios"
|
|
255
|
+
* dismiss
|
|
256
|
+
* onDismiss={() => setVisible(false)}
|
|
245
257
|
* />
|
|
246
258
|
* ```
|
|
247
259
|
*/
|
|
248
|
-
interface CalloutProps extends BaseProps {
|
|
249
|
-
/**
|
|
250
|
-
|
|
251
|
-
/** Título principal do callout
|
|
252
|
-
title?:
|
|
253
|
-
/**
|
|
254
|
-
text
|
|
260
|
+
interface CalloutProps extends Omit<BaseProps, 'disabled'>, Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
261
|
+
/** Variante semântica do callout */
|
|
262
|
+
variant?: Exclude<TextVariant, 'color'>;
|
|
263
|
+
/** Título principal do callout */
|
|
264
|
+
title?: React$1.ReactNode;
|
|
265
|
+
/** Conteúdo descritivo do callout */
|
|
266
|
+
text: React$1.ReactNode;
|
|
255
267
|
/** Ícone a ser exibido no callout */
|
|
256
268
|
icon?: React$1.ReactNode;
|
|
269
|
+
/** Callback chamado ao clicar no botão de fechar. */
|
|
270
|
+
onDismiss?: () => void;
|
|
271
|
+
/** Exibe o botão de fechar. Requer onDismiss. */
|
|
272
|
+
dismiss?: boolean;
|
|
273
|
+
/**
|
|
274
|
+
* Nome do token de cor de fundo (sem `--`). Sobrescreve a cor da variante.
|
|
275
|
+
* @example backgroundColor="color-brand-secondary-medium"
|
|
276
|
+
*/
|
|
277
|
+
backgroundColor?: string;
|
|
278
|
+
/**
|
|
279
|
+
* Nome do token de cor do texto e ícone (sem `--`). Sobrescreve a cor padrão.
|
|
280
|
+
* @example textColor="color-neutral-low-default"
|
|
281
|
+
*/
|
|
282
|
+
textColor?: string;
|
|
283
|
+
/** Classe CSS opcional */
|
|
284
|
+
className?: string;
|
|
257
285
|
/** Props adicionais para o elemento div */
|
|
258
286
|
[key: string]: any;
|
|
259
287
|
}
|
|
@@ -291,6 +319,8 @@ interface CheckboxProps extends BaseProps {
|
|
|
291
319
|
checked?: boolean;
|
|
292
320
|
/** Estado indeterminado (usado em selecionar todos com seleção parcial) */
|
|
293
321
|
indeterminate?: boolean;
|
|
322
|
+
/** Classe CSS opcional */
|
|
323
|
+
className?: string;
|
|
294
324
|
}
|
|
295
325
|
|
|
296
326
|
declare const Checkbox: React$1.FC<CheckboxProps>;
|
|
@@ -328,6 +358,8 @@ interface ChipsProps extends BaseProps, Omit<React$1.HTMLAttributes<HTMLDivEleme
|
|
|
328
358
|
rightIcon?: React$1.ReactNode;
|
|
329
359
|
/** Estilos inline adicionais */
|
|
330
360
|
style?: React$1.CSSProperties;
|
|
361
|
+
/** Classe CSS opcional */
|
|
362
|
+
className?: string;
|
|
331
363
|
}
|
|
332
364
|
|
|
333
365
|
declare const MemoizedChips: React__default.NamedExoticComponent<ChipsProps>;
|
|
@@ -345,9 +377,11 @@ declare const MemoizedChips: React__default.NamedExoticComponent<ChipsProps>;
|
|
|
345
377
|
interface ContainerProps {
|
|
346
378
|
/** Conteúdo a ser renderizado dentro do container */
|
|
347
379
|
children: React__default.ReactNode;
|
|
380
|
+
/** Classe CSS customizada aplicada ao elemento raiz do container */
|
|
381
|
+
className?: string;
|
|
348
382
|
}
|
|
349
383
|
|
|
350
|
-
declare function Container({ children }: ContainerProps): react_jsx_runtime.JSX.Element;
|
|
384
|
+
declare function Container({ children, className }: ContainerProps): react_jsx_runtime.JSX.Element;
|
|
351
385
|
|
|
352
386
|
/**
|
|
353
387
|
* Props do componente DatePicker
|
|
@@ -373,7 +407,7 @@ declare function Container({ children }: ContainerProps): react_jsx_runtime.JSX.
|
|
|
373
407
|
* ```
|
|
374
408
|
*/
|
|
375
409
|
interface DatePickerProps extends BaseProps {
|
|
376
|
-
/**
|
|
410
|
+
/** Idioma para formatação da data */
|
|
377
411
|
locale?: Locale;
|
|
378
412
|
/** Posição do calendário em relação ao campo */
|
|
379
413
|
calendarSide?: Side;
|
|
@@ -399,6 +433,8 @@ interface DatePickerProps extends BaseProps {
|
|
|
399
433
|
maxDate?: Date;
|
|
400
434
|
/** ID para testes automatizados */
|
|
401
435
|
'data-testid'?: string;
|
|
436
|
+
/** Classe CSS opcional */
|
|
437
|
+
className?: string;
|
|
402
438
|
}
|
|
403
439
|
|
|
404
440
|
declare const _default$2: React__default.NamedExoticComponent<DatePickerProps>;
|
|
@@ -414,10 +450,11 @@ declare const _default$2: React__default.NamedExoticComponent<DatePickerProps>;
|
|
|
414
450
|
* />
|
|
415
451
|
*/
|
|
416
452
|
interface DialogProps extends BaseProps, React.HTMLAttributes<HTMLDivElement> {
|
|
453
|
+
/** Controla a visibilidade do Dialog */
|
|
417
454
|
show?: boolean;
|
|
418
|
-
/** Título exibido no cabeçalho do
|
|
455
|
+
/** Título exibido no cabeçalho do Dialog */
|
|
419
456
|
title?: string;
|
|
420
|
-
/** Texto ou conteúdo do corpo do
|
|
457
|
+
/** Texto ou conteúdo do corpo do Dialog */
|
|
421
458
|
bodyContent?: ReactNode;
|
|
422
459
|
/** Texto do botão de ação primária */
|
|
423
460
|
textPrimaryAction?: string;
|
|
@@ -427,6 +464,8 @@ interface DialogProps extends BaseProps, React.HTMLAttributes<HTMLDivElement> {
|
|
|
427
464
|
onPrimaryAction?: () => void;
|
|
428
465
|
/** Função chamada ao executar a ação secundária */
|
|
429
466
|
onSecondaryAction?: () => void;
|
|
467
|
+
/** Classe CSS opcional */
|
|
468
|
+
className?: string;
|
|
430
469
|
}
|
|
431
470
|
|
|
432
471
|
declare const Dialog: React$1.FC<DialogProps>;
|
|
@@ -481,11 +520,13 @@ interface DrawerProps extends BaseProps {
|
|
|
481
520
|
closeOnOverlayClick?: boolean;
|
|
482
521
|
/** Define se o drawer fecha ao pressionar ESC */
|
|
483
522
|
closeOnEscape?: boolean;
|
|
523
|
+
/** Classe CSS opcional */
|
|
524
|
+
className?: string;
|
|
484
525
|
}
|
|
485
526
|
|
|
486
527
|
declare const Drawer: React__default.FC<DrawerProps>;
|
|
487
528
|
|
|
488
|
-
interface FilterItem$
|
|
529
|
+
interface FilterItem$2 {
|
|
489
530
|
id?: string;
|
|
490
531
|
text: string;
|
|
491
532
|
subText?: string;
|
|
@@ -519,7 +560,7 @@ type FilterType = 'text' | 'checkbox' | 'icon' | 'calendar';
|
|
|
519
560
|
*/
|
|
520
561
|
interface FilterProps extends BaseProps {
|
|
521
562
|
/** Array de itens para filtros do tipo dropdown */
|
|
522
|
-
items?: FilterItem$
|
|
563
|
+
items?: FilterItem$2[];
|
|
523
564
|
/** Tipo do filtro (dropdown ou calendário) */
|
|
524
565
|
type?: FilterType;
|
|
525
566
|
/** IDs dos itens selecionados */
|
|
@@ -554,8 +595,10 @@ interface FilterProps extends BaseProps {
|
|
|
554
595
|
minDate?: Date;
|
|
555
596
|
/** Data máxima selecionável (para tipo calendar) */
|
|
556
597
|
maxDate?: Date;
|
|
557
|
-
/**
|
|
598
|
+
/** Idioma do calendário */
|
|
558
599
|
locale?: Locale;
|
|
600
|
+
/** Classe CSS opcional */
|
|
601
|
+
className?: string;
|
|
559
602
|
}
|
|
560
603
|
|
|
561
604
|
declare const Filter: React__default.FC<FilterProps>;
|
|
@@ -609,6 +652,8 @@ interface ListItemProps extends BaseProps {
|
|
|
609
652
|
showSubText?: boolean;
|
|
610
653
|
/** Estado de hover */
|
|
611
654
|
hovered?: boolean;
|
|
655
|
+
/** Classe CSS opcional */
|
|
656
|
+
className?: string;
|
|
612
657
|
}
|
|
613
658
|
|
|
614
659
|
declare const ListItem: React__default.FC<ListItemProps>;
|
|
@@ -688,6 +733,8 @@ interface MenuProps extends BaseProps {
|
|
|
688
733
|
onApiSearch?: (searchTerm: string) => void;
|
|
689
734
|
/** Callback executado quando o menu abre/fecha: (open) => void */
|
|
690
735
|
onOpenChange?: (open: boolean) => void;
|
|
736
|
+
/** Classe CSS opcional */
|
|
737
|
+
className?: string;
|
|
691
738
|
}
|
|
692
739
|
|
|
693
740
|
declare const Menu: React__default.FC<MenuProps>;
|
|
@@ -735,6 +782,8 @@ interface ModalProps extends BaseProps {
|
|
|
735
782
|
customWidth?: string;
|
|
736
783
|
/** Define se o modal ocupa toda a tela. Tem prioridade sobre customWidth */
|
|
737
784
|
fullscreen?: boolean;
|
|
785
|
+
/** Classe CSS opcional */
|
|
786
|
+
className?: string;
|
|
738
787
|
}
|
|
739
788
|
|
|
740
789
|
declare const Modal: React$1.FC<ModalProps>;
|
|
@@ -764,6 +813,8 @@ interface PopoverProps {
|
|
|
764
813
|
onCloseAutoFocus?: (event: Event) => void;
|
|
765
814
|
/** Quando `true`, exibe uma seta apontando para o trigger */
|
|
766
815
|
showArrow?: boolean;
|
|
816
|
+
/** Classe CSS opcional */
|
|
817
|
+
className?: string;
|
|
767
818
|
}
|
|
768
819
|
|
|
769
820
|
declare const Popover: React$1.FC<PopoverProps>;
|
|
@@ -813,12 +864,14 @@ interface QuantityProps extends BaseProps {
|
|
|
813
864
|
minValue?: number;
|
|
814
865
|
/** Valor máximo permitido */
|
|
815
866
|
maxValue?: number;
|
|
816
|
-
/** Aria label
|
|
867
|
+
/** Aria label para o botão de decremento. Padrão: 'Diminuir quantidade' */
|
|
817
868
|
decrementAriaLabel?: string;
|
|
818
|
-
/** Aria label
|
|
869
|
+
/** Aria label para o botão de incremento. Padrão: 'Aumentar quantidade' */
|
|
819
870
|
incrementAriaLabel?: string;
|
|
820
|
-
/** Aria label
|
|
871
|
+
/** Aria label para a entrada de quantidade. Padrão: 'Quantidade' */
|
|
821
872
|
inputAriaLabel?: string;
|
|
873
|
+
/** Classe CSS opcional */
|
|
874
|
+
className?: string;
|
|
822
875
|
}
|
|
823
876
|
|
|
824
877
|
declare const memorizedQuantity: React__default.NamedExoticComponent<QuantityProps>;
|
|
@@ -835,6 +888,8 @@ interface RadioProps {
|
|
|
835
888
|
label: string;
|
|
836
889
|
/** Estado desabilitado do item */
|
|
837
890
|
disabled?: boolean;
|
|
891
|
+
/** Classe CSS opcional */
|
|
892
|
+
className?: string;
|
|
838
893
|
}
|
|
839
894
|
/**
|
|
840
895
|
* Props do componente RadioGroup
|
|
@@ -920,6 +975,8 @@ interface SearchProps extends BaseProps, NativeInputProps {
|
|
|
920
975
|
onMouseDown?: (e: React$1.MouseEvent<HTMLDivElement>) => void;
|
|
921
976
|
/** ID para testes automatizados */
|
|
922
977
|
'data-testid'?: string;
|
|
978
|
+
/** Classe CSS opcional */
|
|
979
|
+
className?: string;
|
|
923
980
|
}
|
|
924
981
|
|
|
925
982
|
declare const Search: React__default.ForwardRefExoticComponent<SearchProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
@@ -1021,6 +1078,8 @@ interface SelectProps extends BaseProps {
|
|
|
1021
1078
|
onApiSearch?: (term: string) => void;
|
|
1022
1079
|
/** Estado de busca em andamento */
|
|
1023
1080
|
isSearching?: boolean;
|
|
1081
|
+
/** Classe CSS opcional */
|
|
1082
|
+
className?: string;
|
|
1024
1083
|
}
|
|
1025
1084
|
|
|
1026
1085
|
declare const Select: React__default.FC<SelectProps>;
|
|
@@ -1096,7 +1155,7 @@ interface TableProps<T = TableRowData> extends BaseProps {
|
|
|
1096
1155
|
|
|
1097
1156
|
declare const Table: <T extends TableRowData = TableRowData>({ columns, dataSource, className, loading, rowSelection, locale, onRow, ...rest }: TableProps<T>) => react_jsx_runtime.JSX.Element | null;
|
|
1098
1157
|
|
|
1099
|
-
interface BaseFilterItem {
|
|
1158
|
+
interface BaseFilterItem$1 {
|
|
1100
1159
|
id?: string;
|
|
1101
1160
|
buttonText: string | React__default.ReactNode;
|
|
1102
1161
|
icon?: React__default.ReactElement;
|
|
@@ -1106,15 +1165,15 @@ interface BaseFilterItem {
|
|
|
1106
1165
|
onToggle?: (isOpen: boolean) => void;
|
|
1107
1166
|
tooltip?: string;
|
|
1108
1167
|
}
|
|
1109
|
-
interface CheckboxFilterItem extends BaseFilterItem {
|
|
1168
|
+
interface CheckboxFilterItem$1 extends BaseFilterItem$1 {
|
|
1110
1169
|
type: 'checkbox' | 'text' | 'icon';
|
|
1111
|
-
items: FilterItem$
|
|
1170
|
+
items: FilterItem$2[];
|
|
1112
1171
|
selectedIds?: string[];
|
|
1113
1172
|
onSelectionChange?: (selectedIds: string[]) => void;
|
|
1114
1173
|
placeholder?: string;
|
|
1115
1174
|
enableSearch?: boolean;
|
|
1116
1175
|
}
|
|
1117
|
-
interface CalendarFilterItem extends BaseFilterItem {
|
|
1176
|
+
interface CalendarFilterItem$1 extends BaseFilterItem$1 {
|
|
1118
1177
|
type: 'calendar';
|
|
1119
1178
|
selectedDate?: Date | null;
|
|
1120
1179
|
onDateSelect?: (date: Date) => void;
|
|
@@ -1124,7 +1183,7 @@ interface CalendarFilterItem extends BaseFilterItem {
|
|
|
1124
1183
|
locale?: string;
|
|
1125
1184
|
placeholder?: string;
|
|
1126
1185
|
}
|
|
1127
|
-
type FilterItem = CheckboxFilterItem | CalendarFilterItem;
|
|
1186
|
+
type FilterItem$1 = CheckboxFilterItem$1 | CalendarFilterItem$1;
|
|
1128
1187
|
interface TableHeaderProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
1129
1188
|
searchValue?: string;
|
|
1130
1189
|
onSearchChange?: (value: string) => void;
|
|
@@ -1132,7 +1191,7 @@ interface TableHeaderProps extends React__default.HTMLAttributes<HTMLDivElement>
|
|
|
1132
1191
|
showSearch?: boolean;
|
|
1133
1192
|
showFilters?: boolean;
|
|
1134
1193
|
filters?: React__default.ReactNode;
|
|
1135
|
-
filterItems?: FilterItem[];
|
|
1194
|
+
filterItems?: FilterItem$1[];
|
|
1136
1195
|
className?: string;
|
|
1137
1196
|
onSearch?: (value: string) => void;
|
|
1138
1197
|
showClearSearch?: boolean;
|
|
@@ -1151,6 +1210,188 @@ interface TablePaginationProps extends React__default.HTMLAttributes<HTMLDivElem
|
|
|
1151
1210
|
}
|
|
1152
1211
|
declare const TablePagination: React__default.FC<TablePaginationProps>;
|
|
1153
1212
|
|
|
1213
|
+
declare module '@tanstack/react-table' {
|
|
1214
|
+
interface ColumnMeta<TData extends RowData, TValue> {
|
|
1215
|
+
/** Alinhamento do conteúdo da célula */
|
|
1216
|
+
align?: 'left' | 'center' | 'right';
|
|
1217
|
+
/** Altura máxima do conteúdo da célula (ex: 48, '3rem'). Aplica overflow: hidden */
|
|
1218
|
+
maxHeight?: number | string;
|
|
1219
|
+
}
|
|
1220
|
+
}
|
|
1221
|
+
/**
|
|
1222
|
+
* Props base compartilhadas por todos os tipos de filtro da tabela.
|
|
1223
|
+
*/
|
|
1224
|
+
interface BaseFilterItem {
|
|
1225
|
+
/** Identificador único do filtro */
|
|
1226
|
+
id?: string;
|
|
1227
|
+
/** Texto ou nó exibido no botão que abre o filtro */
|
|
1228
|
+
buttonText: string | ReactNode;
|
|
1229
|
+
/** Ícone exibido no botão do filtro */
|
|
1230
|
+
icon?: ReactElement;
|
|
1231
|
+
/** Lado em que o dropdown do filtro será exibido */
|
|
1232
|
+
side?: Side;
|
|
1233
|
+
/** Alinhamento do dropdown do filtro */
|
|
1234
|
+
align?: Exclude<Align, 'center'>;
|
|
1235
|
+
/** Desabilita o botão do filtro */
|
|
1236
|
+
disabled?: boolean;
|
|
1237
|
+
/** Callback chamado quando o estado de abertura do filtro muda */
|
|
1238
|
+
onToggle?: (isOpen: boolean) => void;
|
|
1239
|
+
}
|
|
1240
|
+
/**
|
|
1241
|
+
* Props de filtro do tipo checkbox, texto ou ícone.
|
|
1242
|
+
* Renderiza uma lista de opções selecionáveis.
|
|
1243
|
+
*/
|
|
1244
|
+
interface CheckboxFilterItem extends BaseFilterItem {
|
|
1245
|
+
/** Tipo do filtro */
|
|
1246
|
+
type: 'checkbox' | 'text' | 'icon';
|
|
1247
|
+
/** Lista de itens disponíveis para seleção */
|
|
1248
|
+
items: FilterItem$2[];
|
|
1249
|
+
/** IDs dos itens atualmente selecionados */
|
|
1250
|
+
selectedIds?: string[];
|
|
1251
|
+
/** Callback chamado quando a seleção muda */
|
|
1252
|
+
onSelectionChange?: (selectedIds: string[]) => void;
|
|
1253
|
+
/** Placeholder do campo de busca interno do filtro */
|
|
1254
|
+
placeholder?: string;
|
|
1255
|
+
/** Habilita campo de busca dentro do dropdown */
|
|
1256
|
+
enableSearch?: boolean;
|
|
1257
|
+
}
|
|
1258
|
+
/**
|
|
1259
|
+
* Props de filtro do tipo calendário.
|
|
1260
|
+
* Renderiza um seletor de data.
|
|
1261
|
+
*/
|
|
1262
|
+
interface CalendarFilterItem extends BaseFilterItem {
|
|
1263
|
+
/** Tipo do filtro */
|
|
1264
|
+
type: 'calendar';
|
|
1265
|
+
/** Data atualmente selecionada */
|
|
1266
|
+
selectedDate?: Date | null;
|
|
1267
|
+
/** Callback chamado quando uma data é selecionada */
|
|
1268
|
+
onDateSelect?: (date: Date) => void;
|
|
1269
|
+
/** Callback chamado ao limpar a data selecionada */
|
|
1270
|
+
onClear?: () => void;
|
|
1271
|
+
/** Data mínima permitida para seleção */
|
|
1272
|
+
minDate?: Date;
|
|
1273
|
+
/** Data máxima permitida para seleção */
|
|
1274
|
+
maxDate?: Date;
|
|
1275
|
+
/** Locale utilizado para formatar datas no calendário */
|
|
1276
|
+
locale?: Locale;
|
|
1277
|
+
/** Placeholder exibido quando nenhuma data está selecionada */
|
|
1278
|
+
placeholder?: string;
|
|
1279
|
+
}
|
|
1280
|
+
/**
|
|
1281
|
+
* Union type representando um item de filtro da tabela.
|
|
1282
|
+
* Pode ser do tipo checkbox/texto/ícone ou calendário.
|
|
1283
|
+
*/
|
|
1284
|
+
type FilterItem = CheckboxFilterItem | CalendarFilterItem;
|
|
1285
|
+
/**
|
|
1286
|
+
* Props do cabeçalho do TableV2, com busca global e filtros.
|
|
1287
|
+
*/
|
|
1288
|
+
interface TableV2HeaderProps {
|
|
1289
|
+
/** Placeholder do campo de busca global */
|
|
1290
|
+
searchPlaceholder?: string;
|
|
1291
|
+
/** Exibe o campo de busca (padrão: true) */
|
|
1292
|
+
showSearch?: boolean;
|
|
1293
|
+
/** Items de filtro (Status, Data de início, etc.) */
|
|
1294
|
+
filterItems?: FilterItem[];
|
|
1295
|
+
}
|
|
1296
|
+
/**
|
|
1297
|
+
* Props do rodapé do TableV2, com controles de paginação.
|
|
1298
|
+
*/
|
|
1299
|
+
interface TableV2FooterProps {
|
|
1300
|
+
/** Total de itens (para calcular número de páginas) */
|
|
1301
|
+
totalItems: number;
|
|
1302
|
+
/** Itens por página inicial (padrão: 10) */
|
|
1303
|
+
defaultPageSize?: number;
|
|
1304
|
+
/** Opções do seletor de itens por página */
|
|
1305
|
+
pageSizeOptions?: number[];
|
|
1306
|
+
/** Callback chamado quando a página muda */
|
|
1307
|
+
onPageChange?: (page: number) => void;
|
|
1308
|
+
/** Callback chamado quando o tamanho da página muda */
|
|
1309
|
+
onPageSizeChange?: (pageSize: number) => void;
|
|
1310
|
+
}
|
|
1311
|
+
/**
|
|
1312
|
+
* Props para personalização do estado vazio da tabela.
|
|
1313
|
+
*/
|
|
1314
|
+
interface EmptyStateProps {
|
|
1315
|
+
/** Ícone exibido no estado vazio */
|
|
1316
|
+
emptyIcon?: ReactNode;
|
|
1317
|
+
/** Título exibido no estado vazio */
|
|
1318
|
+
emptyTitle?: ReactNode;
|
|
1319
|
+
/** Texto descritivo exibido no estado vazio */
|
|
1320
|
+
emptyText?: ReactNode;
|
|
1321
|
+
}
|
|
1322
|
+
/**
|
|
1323
|
+
* Definição de uma ação em massa disponível na barra de seleção.
|
|
1324
|
+
*/
|
|
1325
|
+
interface BulkAction {
|
|
1326
|
+
/** Label do botão de ação */
|
|
1327
|
+
label: ReactNode;
|
|
1328
|
+
/** Callback ao clicar no botão */
|
|
1329
|
+
onClick: () => void;
|
|
1330
|
+
/** Desabilita o botão */
|
|
1331
|
+
disabled?: boolean;
|
|
1332
|
+
/** Variante visual do botão (padrão: 'outlined') */
|
|
1333
|
+
variant?: 'filled' | 'outlined' | 'text';
|
|
1334
|
+
}
|
|
1335
|
+
/**
|
|
1336
|
+
* Props da barra de ações em massa do TableV2.
|
|
1337
|
+
* Exibida quando há linhas selecionadas.
|
|
1338
|
+
*/
|
|
1339
|
+
interface TableV2BulkActionsProps<T = Record<string, unknown>> {
|
|
1340
|
+
/** Função que retorna o label da barra de ações em massa.
|
|
1341
|
+
* Recebe a contagem de itens selecionados e os itens originais.
|
|
1342
|
+
* Se não fornecido, exibe "{count} itens selecionados". */
|
|
1343
|
+
label?: (count: number, selectedRows: T[]) => ReactNode;
|
|
1344
|
+
/** Lista de ações disponíveis quando há itens selecionados */
|
|
1345
|
+
actions: BulkAction[];
|
|
1346
|
+
/** Callback chamado ao clicar no botão de limpar seleção (X) */
|
|
1347
|
+
onClear?: () => void;
|
|
1348
|
+
}
|
|
1349
|
+
/**
|
|
1350
|
+
* Props do componente TableV2.
|
|
1351
|
+
* @example
|
|
1352
|
+
* ```tsx
|
|
1353
|
+
* <TableV2
|
|
1354
|
+
* columns={columns}
|
|
1355
|
+
* data={data}
|
|
1356
|
+
* enableSorting
|
|
1357
|
+
* enableRowSelection
|
|
1358
|
+
* loading={isLoading}
|
|
1359
|
+
* />
|
|
1360
|
+
* ```
|
|
1361
|
+
*/
|
|
1362
|
+
interface TableV2Props<T = Record<string, unknown>> extends EmptyStateProps {
|
|
1363
|
+
/** Definições das colunas da tabela */
|
|
1364
|
+
columns: ColumnDef<T, any>[];
|
|
1365
|
+
/** Dados exibidos na tabela */
|
|
1366
|
+
data: T[];
|
|
1367
|
+
/** Habilita filtros individuais por coluna no <th> */
|
|
1368
|
+
enableFilters?: boolean;
|
|
1369
|
+
/** Habilita seleção de linhas via checkbox */
|
|
1370
|
+
enableRowSelection?: boolean;
|
|
1371
|
+
/** Habilita ordenação de colunas ao clicar no cabeçalho */
|
|
1372
|
+
enableSorting?: boolean;
|
|
1373
|
+
/** Callback chamado quando a seleção de linhas muda */
|
|
1374
|
+
onRowSelectionChange?: (selectedRows: T[]) => void;
|
|
1375
|
+
/** Configuração das ações em massa exibidas quando há linhas selecionadas */
|
|
1376
|
+
bulkActions?: TableV2BulkActionsProps<T>;
|
|
1377
|
+
/** Header acima da tabela com busca + filtros */
|
|
1378
|
+
header?: TableV2HeaderProps;
|
|
1379
|
+
/** Footer com paginação */
|
|
1380
|
+
footer?: TableV2FooterProps;
|
|
1381
|
+
/** Classe CSS personalizada para o componente */
|
|
1382
|
+
className?: string;
|
|
1383
|
+
/** Estado de carregamento — exibe skeleton animado no lugar da tabela */
|
|
1384
|
+
loading?: boolean;
|
|
1385
|
+
/** Eventos e classe aplicados por linha */
|
|
1386
|
+
onRow?: (row: T, index: number) => {
|
|
1387
|
+
onClick?: () => void;
|
|
1388
|
+
onDoubleClick?: () => void;
|
|
1389
|
+
className?: string;
|
|
1390
|
+
};
|
|
1391
|
+
}
|
|
1392
|
+
|
|
1393
|
+
declare const TableV2: <T>({ columns, data, enableFilters, enableRowSelection, enableSorting, onRowSelectionChange, bulkActions, header, footer, loading, emptyIcon, emptyTitle, emptyText, onRow, className, }: TableV2Props<T>) => react_jsx_runtime.JSX.Element;
|
|
1394
|
+
|
|
1154
1395
|
/**
|
|
1155
1396
|
* Props do componente TextArea
|
|
1156
1397
|
* @example
|
|
@@ -1203,7 +1444,10 @@ interface TextAreaProps extends Omit<React__default.TextareaHTMLAttributes<HTMLT
|
|
|
1203
1444
|
resize?: 'none' | 'vertical' | 'both';
|
|
1204
1445
|
/** Exibe contador de caracteres (requer maxLength) */
|
|
1205
1446
|
showCharCount?: boolean;
|
|
1447
|
+
/** Altura do textarea em pixels */
|
|
1206
1448
|
height?: number;
|
|
1449
|
+
/** Classe CSS opcional */
|
|
1450
|
+
className?: string;
|
|
1207
1451
|
}
|
|
1208
1452
|
|
|
1209
1453
|
declare const _default$1: React__default.NamedExoticComponent<TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -1267,6 +1511,8 @@ interface TextFieldProps extends Omit<React__default.InputHTMLAttributes<HTMLInp
|
|
|
1267
1511
|
icon?: React__default.ReactNode;
|
|
1268
1512
|
/** Mantém o ícone visível mesmo quando o campo tem valor */
|
|
1269
1513
|
persistIcon?: boolean;
|
|
1514
|
+
/** Classe CSS opcional */
|
|
1515
|
+
className?: string;
|
|
1270
1516
|
}
|
|
1271
1517
|
|
|
1272
1518
|
declare const _default: React__default.NamedExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
@@ -1324,6 +1570,8 @@ interface ToastProps extends BaseProps, Omit<React$1.ComponentPropsWithoutRef<ty
|
|
|
1324
1570
|
* @default 'Info'
|
|
1325
1571
|
*/
|
|
1326
1572
|
iconType?: 'Info' | 'Success' | 'Alert';
|
|
1573
|
+
/** Classe CSS opcional */
|
|
1574
|
+
className?: string;
|
|
1327
1575
|
}
|
|
1328
1576
|
|
|
1329
1577
|
/**
|
|
@@ -1451,9 +1699,13 @@ declare const useToast: () => {
|
|
|
1451
1699
|
};
|
|
1452
1700
|
|
|
1453
1701
|
interface TooltipProps extends BaseProps {
|
|
1702
|
+
/** Conteúdo textual exibido dentro do tooltip */
|
|
1454
1703
|
text: React__default.ReactNode;
|
|
1704
|
+
/** Lado em que o tooltip aparece em relação ao elemento filho. @default 'top' */
|
|
1455
1705
|
side?: Side;
|
|
1706
|
+
/** Alinhamento do tooltip em relação ao elemento filho. @default 'center' */
|
|
1456
1707
|
align?: Align;
|
|
1708
|
+
/** Deslocamento em pixels no eixo lateral (side) entre o tooltip e o elemento filho */
|
|
1457
1709
|
sideOffset?: number;
|
|
1458
1710
|
/** Deslocamento em pixels no eixo de alinhamento */
|
|
1459
1711
|
alignOffset?: number;
|
|
@@ -1461,6 +1713,8 @@ interface TooltipProps extends BaseProps {
|
|
|
1461
1713
|
maxWidth?: number;
|
|
1462
1714
|
/** Elemento que dispara o tooltip ao hover */
|
|
1463
1715
|
children: React__default.ReactNode;
|
|
1716
|
+
/** Classe CSS opcional */
|
|
1717
|
+
className?: string;
|
|
1464
1718
|
}
|
|
1465
1719
|
|
|
1466
1720
|
declare const Tooltip: React__default.FC<TooltipProps>;
|
|
@@ -1495,6 +1749,8 @@ interface SwitchProps extends BaseProps {
|
|
|
1495
1749
|
value?: string;
|
|
1496
1750
|
/** Estado atual (modo controlado) */
|
|
1497
1751
|
checked?: boolean;
|
|
1752
|
+
/** Classe CSS opcional */
|
|
1753
|
+
className?: string;
|
|
1498
1754
|
}
|
|
1499
1755
|
|
|
1500
1756
|
declare const Switch: React$1.FC<SwitchProps>;
|
|
@@ -1652,5 +1908,5 @@ declare function useInfiniteScroll({ status, page, lastPage, onLoadMore, thresho
|
|
|
1652
1908
|
|
|
1653
1909
|
declare const normalizeText: (text: React.ReactNode) => string;
|
|
1654
1910
|
|
|
1655
|
-
export { Avatar, Badge, Button, Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, _default$2 as DatePicker, Dialog, Drawer, Filter, ListItem, Menu, Modal, 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 };
|
|
1656
|
-
export type { AvatarProps, BadgeProps, ButtonProps, CalendarProps, CalloutProps, CheckboxProps, ChipsProps, ContainerProps, DatePickerProps, DialogProps, DrawerProps, FilterItem, FilterProps, ListItemProps, MenuProps, ModalProps, PopoverProps, QuantityProps, RadioGroupProps, RadioProps, SearchProps, SelectProps, SwitchProps, TableHeaderProps, TablePaginationProps, TableProps, TextAreaProps, TextFieldProps, ToastProps, TooltipProps, VerificationCodeProps };
|
|
1911
|
+
export { Avatar, Badge, Button, Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, _default$2 as DatePicker, Dialog, Drawer, Filter, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, TableV2, _default$1 as TextArea, _default as TextField, Toast, ToastContainer, ToastProvider, Tooltip, VerificationCode, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
1912
|
+
export type { AvatarProps, BadgeProps, ButtonProps, CalendarProps, CalloutProps, CheckboxProps, ChipsProps, ContainerProps, DatePickerProps, DialogProps, DrawerProps, FilterItem$1 as FilterItem, FilterProps, ListItemProps, MenuProps, ModalProps, PopoverProps, QuantityProps, RadioGroupProps, RadioProps, SearchProps, SelectProps, SwitchProps, TableHeaderProps, TablePaginationProps, TableProps, TableV2FooterProps, TableV2HeaderProps, TableV2Props, TextAreaProps, TextFieldProps, ToastProps, TooltipProps, VerificationCodeProps };
|