@giro-ds/react 1.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/LICENCE +11 -0
- package/dist/components/Avatar/Avatar.d.ts +3 -0
- package/dist/components/Avatar/Avatar.types.d.ts +7 -0
- package/dist/components/Avatar/index.d.ts +1 -0
- package/dist/components/Badge/Badge.d.ts +4 -0
- package/dist/components/Badge/Badge.types.d.ts +19 -0
- package/dist/components/Badge/index.d.ts +2 -0
- package/dist/components/Button/Button.d.ts +4 -0
- package/dist/components/Button/Button.types.d.ts +43 -0
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/Calendar/Calendar.d.ts +6 -0
- package/dist/components/Calendar/Calendar.types.d.ts +42 -0
- package/dist/components/Calendar/i18n.d.ts +56 -0
- package/dist/components/Calendar/index.d.ts +1 -0
- package/dist/components/Callout/Callout.d.ts +4 -0
- package/dist/components/Callout/Callout.types.d.ts +17 -0
- package/dist/components/Callout/index.d.ts +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +4 -0
- package/dist/components/Checkbox/Checkbox.types.d.ts +25 -0
- package/dist/components/Checkbox/index.d.ts +2 -0
- package/dist/components/CheckboxRadix/CheckboxRadix.d.ts +4 -0
- package/dist/components/CheckboxRadix/CheckboxRadix.types.d.ts +10 -0
- package/dist/components/CheckboxRadix/index.d.ts +2 -0
- package/dist/components/Chips/Chips.d.ts +4 -0
- package/dist/components/Chips/Chips.types.d.ts +17 -0
- package/dist/components/Chips/index.d.ts +1 -0
- package/dist/components/Container/Container.types.d.ts +4 -0
- package/dist/components/Container/index.d.ts +2 -0
- package/dist/components/DatePicker/DatePicker.d.ts +4 -0
- package/dist/components/DatePicker/DatePicker.types.d.ts +32 -0
- package/dist/components/DatePicker/DateUtils.d.ts +23 -0
- package/dist/components/DatePicker/index.d.ts +2 -0
- package/dist/components/Dialog/Dialog.d.ts +4 -0
- package/dist/components/Dialog/Dialog.types.d.ts +24 -0
- package/dist/components/Dialog/index.d.ts +2 -0
- package/dist/components/Dialog/utils/DialogUtils.d.ts +1 -0
- package/dist/components/Drawer/Drawer.d.ts +9 -0
- package/dist/components/Drawer/Drawer.types.d.ts +43 -0
- package/dist/components/Drawer/index.d.ts +1 -0
- package/dist/components/Dropdown/Dropdown.d.ts +4 -0
- package/dist/components/Dropdown/Dropdown.types.d.ts +64 -0
- package/dist/components/Dropdown/DropdownUtils.d.ts +8 -0
- package/dist/components/Dropdown/index.d.ts +2 -0
- package/dist/components/Filter/Filter.d.ts +4 -0
- package/dist/components/Filter/Filter.types.d.ts +46 -0
- package/dist/components/Filter/index.d.ts +2 -0
- package/dist/components/ListItem/ListItem.d.ts +9 -0
- package/dist/components/ListItem/ListItem.types.d.ts +34 -0
- package/dist/components/ListItem/index.d.ts +2 -0
- package/dist/components/Menu/Menu.d.ts +4 -0
- package/dist/components/Menu/Menu.types.d.ts +41 -0
- package/dist/components/Menu/index.d.ts +2 -0
- package/dist/components/MenuRadix/MenuRadix.d.ts +4 -0
- package/dist/components/MenuRadix/MenuRadix.types.d.ts +27 -0
- package/dist/components/MenuRadix/components/MenuItem.d.ts +8 -0
- package/dist/components/MenuRadix/hooks/useMenuLogic.d.ts +15 -0
- package/dist/components/MenuRadix/hooks/useSearchLogic.d.ts +13 -0
- package/dist/components/MenuRadix/index.d.ts +2 -0
- package/dist/components/Quantity/Quantity.d.ts +4 -0
- package/dist/components/Quantity/Quantity.types.d.ts +20 -0
- package/dist/components/Quantity/index.d.ts +2 -0
- package/dist/components/Radio/Radio.d.ts +4 -0
- package/dist/components/Radio/Radio.types.d.ts +18 -0
- package/dist/components/Radio/index.d.ts +1 -0
- package/dist/components/RadioRadix/RadioRadix.d.ts +4 -0
- package/dist/components/RadioRadix/RadioRadix.types.d.ts +15 -0
- package/dist/components/RadioRadix/index.d.ts +2 -0
- package/dist/components/Search/Search.d.ts +4 -0
- package/dist/components/Search/Search.types.d.ts +15 -0
- package/dist/components/Search/index.d.ts +2 -0
- package/dist/components/Select/Select.d.ts +4 -0
- package/dist/components/Select/Select.types.d.ts +67 -0
- package/dist/components/Select/index.d.ts +2 -0
- package/dist/components/SelectField/SelectField.d.ts +4 -0
- package/dist/components/SelectField/SelectField.types.d.ts +35 -0
- package/dist/components/SelectRadix/SelectRadix.d.ts +4 -0
- package/dist/components/SelectRadix/SelectRadix.types.d.ts +112 -0
- package/dist/components/SelectRadix/components/CheckboxSelectItem.d.ts +4 -0
- package/dist/components/SelectRadix/components/SelectItem.d.ts +7 -0
- package/dist/components/SelectRadix/hooks/useSelectLogic.d.ts +3 -0
- package/dist/components/SelectRadix/index.d.ts +5 -0
- package/dist/components/Table/EmptyRows150Color.d.ts +8 -0
- package/dist/components/Table/LoaderList.d.ts +10 -0
- package/dist/components/Table/MultiLineText/MultiLineText.d.ts +14 -0
- package/dist/components/Table/MultiLineText/index.d.ts +2 -0
- package/dist/components/Table/Table.d.ts +4 -0
- package/dist/components/Table/Table.types.d.ts +35 -0
- package/dist/components/Table/TableHeader.d.ts +47 -0
- package/dist/components/Table/TablePagination.d.ts +21 -0
- package/dist/components/Table/index.d.ts +7 -0
- package/dist/components/Table/utils/tableActions.d.ts +21 -0
- package/dist/components/TextField/TextField.d.ts +4 -0
- package/dist/components/TextField/TextField.types.d.ts +22 -0
- package/dist/components/TextField/ValidationUtils.d.ts +8 -0
- package/dist/components/TextField/index.d.ts +2 -0
- package/dist/components/Toast/Toast.d.ts +13 -0
- package/dist/components/Toast/Toast.types.d.ts +22 -0
- package/dist/components/Toast/index.d.ts +2 -0
- package/dist/components/Tooltip/Tooltip.d.ts +4 -0
- package/dist/components/Tooltip/Tooltip.types.d.ts +7 -0
- package/dist/components/Tooltip/index.d.ts +1 -0
- package/dist/components/VerificationCode/VerificationCode.d.ts +20 -0
- package/dist/components/VerificationCode/VerificationCode.types.d.ts +19 -0
- package/dist/components/VerificationCode/index.d.ts +2 -0
- package/dist/components/index.d.ts +65 -0
- package/dist/hooks/ApiSimulation.d.ts +53 -0
- package/dist/hooks/InfiniteScroll.d.ts +41 -0
- package/dist/hooks/NormalizeText.d.ts +1 -0
- package/dist/index.cjs +7354 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +1045 -0
- package/dist/index.esm.js +7299 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/shared/Label/index.d.ts +13 -0
- package/dist/shared/icons/CheckHalf.d.ts +10 -0
- package/dist/shared/icons/CheckSmall.d.ts +10 -0
- package/dist/shared/icons/index.d.ts +4 -0
- package/dist/styles.css +1 -0
- package/package.json +72 -0
package/LICENCE
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
Copyright (c) 2025 Zanthus
|
|
2
|
+
|
|
3
|
+
Este repositório e todos os seus conteúdos são propriedade intelectual da Zanthus.
|
|
4
|
+
|
|
5
|
+
É estritamente proibido copiar, distribuir, modificar ou utilizar qualquer parte deste design system sem autorização expressa da Zanthus.
|
|
6
|
+
|
|
7
|
+
O acesso a este código é restrito a membros autorizados da equipe Zanthus e parceiros com contrato de confidencialidade vigente.
|
|
8
|
+
|
|
9
|
+
Este projeto **não é software de código aberto** e não possui licença pública de uso.
|
|
10
|
+
|
|
11
|
+
Todos os direitos reservados.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Avatar';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type BadgeType = 'notification' | 'status';
|
|
3
|
+
export type BadgeValue = number | string | null;
|
|
4
|
+
export interface BadgeProps {
|
|
5
|
+
/** Tipo de badge (notificação ou status) */
|
|
6
|
+
type: BadgeType;
|
|
7
|
+
/** Conteúdo a ser envolvido pelo badge */
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
/** Valor a ser exibido no badge (número, texto ou null) */
|
|
10
|
+
badgeValue?: BadgeValue;
|
|
11
|
+
/** Classes CSS adicionais */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** ID único do componente */
|
|
14
|
+
id?: string;
|
|
15
|
+
/** Se o badge está desabilitado */
|
|
16
|
+
maxValue?: number;
|
|
17
|
+
/** Props de acessibilidade customizadas */
|
|
18
|
+
'aria-label'?: string;
|
|
19
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ButtonProps {
|
|
3
|
+
/** Define o elemento a ser renderizado (ex: 'button', 'a', ou componente de roteamento) */
|
|
4
|
+
as?: React.ElementType;
|
|
5
|
+
/** Define o texto principal do botão */
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
/** Define tipo do botão entre as opções */
|
|
8
|
+
variant?: 'filled' | 'outlined' | 'text';
|
|
9
|
+
iconOnly?: boolean;
|
|
10
|
+
/** Define a posição do ícone entre as opções */
|
|
11
|
+
iconPosition?: 'none' | 'left' | 'right';
|
|
12
|
+
/** URL para links externos (ex: https://example.com) */
|
|
13
|
+
href?: string;
|
|
14
|
+
/** Rota interna para navegação SPA (ex: /dashboard, /profile) */
|
|
15
|
+
to?: string;
|
|
16
|
+
/** Indica se o link é externo */
|
|
17
|
+
external?: boolean;
|
|
18
|
+
/** Target para links (_blank, _self, etc.) */
|
|
19
|
+
target?: string;
|
|
20
|
+
/** Rel attribute para links */
|
|
21
|
+
rel?: string;
|
|
22
|
+
/** Props para React Router (replace, state, etc.) */
|
|
23
|
+
routerProps?: Record<string, any>;
|
|
24
|
+
type?: 'button' | 'submit' | 'reset';
|
|
25
|
+
/** Desabilita interações do botão */
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/** Função a ser chamada quando o botão é clicado */
|
|
28
|
+
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
29
|
+
/** Define o tamanho do botão entre as opções */
|
|
30
|
+
size?: 'lg' | 'sm';
|
|
31
|
+
/** Classe CSS opcional */
|
|
32
|
+
className?: string;
|
|
33
|
+
/** ID opcional */
|
|
34
|
+
id?: string;
|
|
35
|
+
/** Ícone opcional */
|
|
36
|
+
icon?: React.ReactNode;
|
|
37
|
+
/** Define se o botão deve ocupar toda a largura */
|
|
38
|
+
fullWidth?: boolean;
|
|
39
|
+
/** Texto para acessibilidade */
|
|
40
|
+
ariaLabel?: string;
|
|
41
|
+
/** Outros props específicos do elemento/componente */
|
|
42
|
+
[key: string]: any;
|
|
43
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './i18n';
|
|
3
|
+
import type { Locale, DateFormat, CalendarProps } from './Calendar.types';
|
|
4
|
+
declare const MemoizedCalendar: React.NamedExoticComponent<CalendarProps>;
|
|
5
|
+
export default MemoizedCalendar;
|
|
6
|
+
export type { CalendarProps, Locale, DateFormat };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export type Locale = 'pt-br' | 'en-us';
|
|
2
|
+
export type DateFormat = 'dd/mm/yyyy' | 'mm/dd/yyyy';
|
|
3
|
+
export interface DayItem {
|
|
4
|
+
type: 'day';
|
|
5
|
+
key: number;
|
|
6
|
+
day: number;
|
|
7
|
+
date: Date;
|
|
8
|
+
isToday: boolean;
|
|
9
|
+
isSelected: boolean;
|
|
10
|
+
label: string;
|
|
11
|
+
}
|
|
12
|
+
export interface EmptyItem {
|
|
13
|
+
type: 'empty';
|
|
14
|
+
key: string;
|
|
15
|
+
}
|
|
16
|
+
export type CalendarItem = DayItem | EmptyItem;
|
|
17
|
+
export interface YearItem {
|
|
18
|
+
year: number;
|
|
19
|
+
isCurrent: boolean;
|
|
20
|
+
key: number;
|
|
21
|
+
}
|
|
22
|
+
export interface CalendarProps {
|
|
23
|
+
/** Data do dia Atual */
|
|
24
|
+
currentDate: Date | null;
|
|
25
|
+
/** Classe CSS adicional */
|
|
26
|
+
className?: string;
|
|
27
|
+
/** Dia Selecionado pelo usuário */
|
|
28
|
+
selectedDate?: Date | null;
|
|
29
|
+
/** Função que é executada quando a data escolhida é alterada */
|
|
30
|
+
onDateChange?: (date: Date) => void;
|
|
31
|
+
/** Função que é executada quando um dia é selecionado */
|
|
32
|
+
onDaySelect?: (date: Date) => void;
|
|
33
|
+
onClear?: () => void;
|
|
34
|
+
minDate?: Date;
|
|
35
|
+
maxDate?: Date;
|
|
36
|
+
/** Locale do calendário ('pt-br' ou 'en-us') */
|
|
37
|
+
locale?: Locale;
|
|
38
|
+
/** Formato de exibição da data ('dd/mm/yyyy' ou 'mm/dd/yyyy') */
|
|
39
|
+
format?: DateFormat;
|
|
40
|
+
/** Identificador do elemento raiz do calendário */
|
|
41
|
+
id?: string;
|
|
42
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import i18n from 'i18next';
|
|
2
|
+
interface CalendarTranslations {
|
|
3
|
+
today: string;
|
|
4
|
+
selected: string;
|
|
5
|
+
monthChanged: string;
|
|
6
|
+
yearChanged: string;
|
|
7
|
+
calendar: string;
|
|
8
|
+
yearSelection: string;
|
|
9
|
+
previousMonth: string;
|
|
10
|
+
nextMonth: string;
|
|
11
|
+
previousYears: string;
|
|
12
|
+
nextYears: string;
|
|
13
|
+
openYearSelection: string;
|
|
14
|
+
closeYearSelection: string;
|
|
15
|
+
currentYear: string;
|
|
16
|
+
selectYear: string;
|
|
17
|
+
monthNames: {
|
|
18
|
+
january: string;
|
|
19
|
+
february: string;
|
|
20
|
+
march: string;
|
|
21
|
+
april: string;
|
|
22
|
+
may: string;
|
|
23
|
+
june: string;
|
|
24
|
+
july: string;
|
|
25
|
+
august: string;
|
|
26
|
+
september: string;
|
|
27
|
+
october: string;
|
|
28
|
+
november: string;
|
|
29
|
+
december: string;
|
|
30
|
+
};
|
|
31
|
+
weekDays: {
|
|
32
|
+
sunday: string;
|
|
33
|
+
monday: string;
|
|
34
|
+
tuesday: string;
|
|
35
|
+
wednesday: string;
|
|
36
|
+
thursday: string;
|
|
37
|
+
friday: string;
|
|
38
|
+
saturday: string;
|
|
39
|
+
};
|
|
40
|
+
weekDaysShort: {
|
|
41
|
+
sunday: string;
|
|
42
|
+
monday: string;
|
|
43
|
+
tuesday: string;
|
|
44
|
+
wednesday: string;
|
|
45
|
+
thursday: string;
|
|
46
|
+
friday: string;
|
|
47
|
+
saturday: string;
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
export declare const useCalendarTranslation: () => {
|
|
51
|
+
t: (key: keyof CalendarTranslations | string, options?: any) => string;
|
|
52
|
+
i18n: import("i18next").i18n;
|
|
53
|
+
changeLanguage: (lng: "pt-br" | "en-us") => Promise<import("i18next").TFunction<"translation", undefined>>;
|
|
54
|
+
currentLanguage: "pt-br" | "en-us";
|
|
55
|
+
};
|
|
56
|
+
export default i18n;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Calendar';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface CalloutProps {
|
|
3
|
+
/** Define o tipo de callout */
|
|
4
|
+
type?: 'neutral' | 'color' | 'brand' | 'alert' | 'success';
|
|
5
|
+
/** Define o título com mais destaque */
|
|
6
|
+
title?: string | null;
|
|
7
|
+
/** Define o texto com menos destaque */
|
|
8
|
+
text?: string;
|
|
9
|
+
/** Define o ícone a ser importado */
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
/** Define a classe CSS adicional */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** Define o id do callout */
|
|
14
|
+
id?: string;
|
|
15
|
+
/** Props adicionais para o elemento div */
|
|
16
|
+
[key: string]: any;
|
|
17
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Callout';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface CheckboxProps {
|
|
3
|
+
/** Unique identifier for the checkbox input */
|
|
4
|
+
id?: string;
|
|
5
|
+
/** Name attribute for the checkbox, used for form identification */
|
|
6
|
+
name?: string;
|
|
7
|
+
/** Controlled value indicating whether the checkbox is checked */
|
|
8
|
+
checked?: boolean;
|
|
9
|
+
/** Callback function triggered when the checkbox value changes */
|
|
10
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
11
|
+
/** Label text displayed next to the checkbox */
|
|
12
|
+
label?: string | React.ReactNode;
|
|
13
|
+
/** Additional CSS classes for custom styling */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Value attribute for the checkbox input element */
|
|
16
|
+
value?: string;
|
|
17
|
+
/** AriaDescribedBy for the checkbox input element */
|
|
18
|
+
ariaDescribedby?: string;
|
|
19
|
+
/** Disables the checkbox, preventing user interaction */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** Sets the checkbox to an indeterminate state (useful for parent-child relationships) */
|
|
22
|
+
indeterminate?: boolean;
|
|
23
|
+
/** Additional props passed to the checkbox input element */
|
|
24
|
+
[key: string]: any;
|
|
25
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ChipsProps {
|
|
3
|
+
/** Variante a ser escolhida para utilizar padrões de estilizações pré-definidos */
|
|
4
|
+
type?: 'neutral' | 'brand' | 'color' | 'success' | 'alert';
|
|
5
|
+
/** Texto a ser exibido dentro do componente */
|
|
6
|
+
title: string;
|
|
7
|
+
/** Ícone react que ficará posicionado à esquerda no componente */
|
|
8
|
+
leftIcon?: React.ReactNode;
|
|
9
|
+
/** Ícone react que ficará posicionado à direita no componente */
|
|
10
|
+
rightIcon?: React.ReactNode;
|
|
11
|
+
/** Estado alterável para desabilitar */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Classe CSS adicional */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Props adicionais para o elemento div */
|
|
16
|
+
[key: string]: any;
|
|
17
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Chips';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export type DatePickerLocale = 'pt-br' | 'en-us';
|
|
2
|
+
export type CalendarPosition = 'left' | 'right';
|
|
3
|
+
export interface DatePickerProps {
|
|
4
|
+
/** Locale para formatação da data */
|
|
5
|
+
locale?: DatePickerLocale;
|
|
6
|
+
/** Posição do calendário */
|
|
7
|
+
calendarPosition?: CalendarPosition;
|
|
8
|
+
/** Texto de ajuda */
|
|
9
|
+
helperText?: string;
|
|
10
|
+
/** Se o campo é obrigatório */
|
|
11
|
+
required?: boolean;
|
|
12
|
+
/** Label do campo */
|
|
13
|
+
label?: string;
|
|
14
|
+
/** Valor controlado da data */
|
|
15
|
+
value?: Date | null;
|
|
16
|
+
/** Valor inicial para modo não controlado */
|
|
17
|
+
defaultValue?: Date | null;
|
|
18
|
+
/** Callback chamado quando a data muda */
|
|
19
|
+
onChange?: (date: Date | null) => void;
|
|
20
|
+
/** Se o campo está desabilitado */
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
/** Mensagem de erro */
|
|
23
|
+
error?: string;
|
|
24
|
+
/** Data mínima permitida */
|
|
25
|
+
minDate?: Date;
|
|
26
|
+
/** Data máxima permitida */
|
|
27
|
+
maxDate?: Date;
|
|
28
|
+
/** Classes CSS adicionais */
|
|
29
|
+
className?: string;
|
|
30
|
+
/** ID para testes */
|
|
31
|
+
'data-testid'?: string;
|
|
32
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export type Locale = 'pt-br' | 'en-us';
|
|
2
|
+
/**
|
|
3
|
+
* Formata uma data para string conforme o locale.
|
|
4
|
+
* @param date - Data a ser formatada
|
|
5
|
+
* @param locale - Locale para formatação ('pt-br' ou 'en-us')
|
|
6
|
+
* @returns String formatada da data
|
|
7
|
+
*/
|
|
8
|
+
export declare function formatDate(date: Date, locale?: Locale): string;
|
|
9
|
+
/**
|
|
10
|
+
* Aplica máscara de data conforme o usuário digita.
|
|
11
|
+
* @param value - Valor atual do input
|
|
12
|
+
* @param locale - Locale para determinar o formato da máscara
|
|
13
|
+
* @returns String com a máscara aplicada
|
|
14
|
+
*/
|
|
15
|
+
export declare function applyDateMask(value: string, locale?: Locale): string;
|
|
16
|
+
/**
|
|
17
|
+
* Valida se uma string está no formato correto de data para o locale.
|
|
18
|
+
* @param value - String a ser validada
|
|
19
|
+
* @param locale - Locale para validação
|
|
20
|
+
* @returns true se o formato está correto
|
|
21
|
+
*/
|
|
22
|
+
export declare function isValidDateFormat(value: string, locale?: Locale): boolean;
|
|
23
|
+
export declare function parseDate(dateString: string, locale?: Locale): Date | null;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface DialogProps {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
/** Se o Dialog está visível */
|
|
5
|
+
show: boolean;
|
|
6
|
+
/** Título exibido no cabeçalho do Dialog (obrigatório) */
|
|
7
|
+
title: string;
|
|
8
|
+
/** Texto do corpo do Dialog */
|
|
9
|
+
text?: ReactNode;
|
|
10
|
+
/** Texto do botão de confirmação */
|
|
11
|
+
textConfirm?: string;
|
|
12
|
+
/** Texto do botão de cancelamento */
|
|
13
|
+
textCancel?: string;
|
|
14
|
+
/** Função chamada ao confirmar */
|
|
15
|
+
fnConfirm?: () => void;
|
|
16
|
+
/** Função chamada ao cancelar */
|
|
17
|
+
fnCancel?: () => void;
|
|
18
|
+
/** Função chamada ao fechar o Dialog */
|
|
19
|
+
onClose?: () => void;
|
|
20
|
+
/** ID opcional para o Dialog */
|
|
21
|
+
id?: string;
|
|
22
|
+
/** Classe CSS opcional */
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useFocusTrap: (isActive: boolean) => import("react").RefObject<HTMLDivElement | null>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DrawerProps } from './Drawer.types';
|
|
3
|
+
/**
|
|
4
|
+
* Componente Drawer do Zanthus Design System
|
|
5
|
+
* Implementa um painel lateral deslizante com overlay
|
|
6
|
+
* Segue padrões WCAG 2.1 AA para acessibilidade
|
|
7
|
+
*/
|
|
8
|
+
declare const Drawer: React.FC<DrawerProps>;
|
|
9
|
+
export default Drawer;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { ReactNode, ReactElement } from 'react';
|
|
2
|
+
export interface DrawerProps {
|
|
3
|
+
/** Conteúdo do Drawer */
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
/** Largura do Drawer (use design tokens quando possível) */
|
|
6
|
+
customWidth?: string;
|
|
7
|
+
/** Callback quando o Drawer é fechado */
|
|
8
|
+
onClose: () => void;
|
|
9
|
+
/** Título do Drawer */
|
|
10
|
+
title?: string;
|
|
11
|
+
/** Determina se o drawer está aberto */
|
|
12
|
+
isOpen: boolean;
|
|
13
|
+
/** Callback quando o Drawer é aberto */
|
|
14
|
+
onOpen?: () => void;
|
|
15
|
+
/** Classes CSS adicionais */
|
|
16
|
+
className?: string;
|
|
17
|
+
/** ID único do componente */
|
|
18
|
+
id?: string;
|
|
19
|
+
/** Se o drawer está desabilitado */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** Callback chamado quando clica no overlay */
|
|
22
|
+
onOverlayClick?: () => void;
|
|
23
|
+
/** Se deve fechar ao clicar no overlay */
|
|
24
|
+
closeOnOverlayClick?: boolean;
|
|
25
|
+
/** Se deve fechar ao pressionar ESC */
|
|
26
|
+
closeOnEscape?: boolean;
|
|
27
|
+
}
|
|
28
|
+
export interface DrawerExampleProps {
|
|
29
|
+
/** Texto do botão */
|
|
30
|
+
text?: string;
|
|
31
|
+
/** Ícone do botão */
|
|
32
|
+
icon?: ReactElement;
|
|
33
|
+
/** Conteúdo do Drawer */
|
|
34
|
+
children?: ReactNode;
|
|
35
|
+
/** Callback quando o Drawer é aberto */
|
|
36
|
+
onOpen?: () => void;
|
|
37
|
+
/** Classes CSS adicionais */
|
|
38
|
+
className?: string;
|
|
39
|
+
/** Variante do botão */
|
|
40
|
+
variant?: 'filled' | 'outlined' | 'text';
|
|
41
|
+
/** Se o botão está desabilitado */
|
|
42
|
+
disabled?: boolean;
|
|
43
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Drawer';
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface DropdownItem {
|
|
3
|
+
/** ID único do item (opcional, será gerado automaticamente se não fornecido) */
|
|
4
|
+
id?: string;
|
|
5
|
+
/** Texto principal do item */
|
|
6
|
+
text: string;
|
|
7
|
+
/** Texto secundário/descrição do item */
|
|
8
|
+
subText?: string;
|
|
9
|
+
/** Ícone do item (React node) */
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
/** Define se o item está desabilitado */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export type DropdownType = 'text' | 'checkbox' | 'icon';
|
|
15
|
+
export interface DropdownProps {
|
|
16
|
+
/** Classes CSS adicionais */
|
|
17
|
+
className?: string;
|
|
18
|
+
/** Força posição do dropdown: 'top' abre para cima, 'bottom' abre para baixo. Se não especificado, usa detecção automática */
|
|
19
|
+
position?: 'top' | 'bottom';
|
|
20
|
+
/** Array de itens para o dropdown - obrigatório */
|
|
21
|
+
items: DropdownItem[];
|
|
22
|
+
/** ID único do componente */
|
|
23
|
+
id?: string;
|
|
24
|
+
/** Tipo do dropdown */
|
|
25
|
+
type?: DropdownType;
|
|
26
|
+
/** Habilita campo de busca */
|
|
27
|
+
applySearch?: boolean;
|
|
28
|
+
/** Placeholder do campo de busca */
|
|
29
|
+
placeholder?: string;
|
|
30
|
+
/** Callback para mudanças na seleção */
|
|
31
|
+
onSelectionChange?: (selectedIds: string[]) => void;
|
|
32
|
+
/** Controla exibição do subtexto */
|
|
33
|
+
showSubText?: boolean;
|
|
34
|
+
/** IDs dos itens selecionados por padrão */
|
|
35
|
+
defaultSelectedIds?: string[];
|
|
36
|
+
/** Estado inicial dos itens selecionados (objeto com chave-valor) */
|
|
37
|
+
initialItemsSelected?: Record<string, boolean>;
|
|
38
|
+
width?: string | number;
|
|
39
|
+
maxWidth?: string | number;
|
|
40
|
+
minWidth?: string | number;
|
|
41
|
+
/** Altura máxima do dropdown */
|
|
42
|
+
maxHeight?: string | number;
|
|
43
|
+
/** Define se o componente esta sendo usado para filtro */
|
|
44
|
+
filter?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Configurações para paginação infinita
|
|
47
|
+
*/
|
|
48
|
+
infiniteScroll?: {
|
|
49
|
+
/** Status atual do carregamento */
|
|
50
|
+
status: 'idle' | 'loading' | 'succeeded' | 'failed';
|
|
51
|
+
/** Página atual */
|
|
52
|
+
page: number;
|
|
53
|
+
/** Última página disponível */
|
|
54
|
+
lastPage: number;
|
|
55
|
+
/** Callback para carregar próxima página */
|
|
56
|
+
onLoadMore: () => void;
|
|
57
|
+
/** Threshold para trigger (0-1) */
|
|
58
|
+
threshold?: number;
|
|
59
|
+
/** Margem para trigger */
|
|
60
|
+
rootMargin?: string;
|
|
61
|
+
/** Debug mode */
|
|
62
|
+
debug?: boolean;
|
|
63
|
+
};
|
|
64
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { DropdownItem, DropdownType } from './Dropdown.types';
|
|
2
|
+
/**
|
|
3
|
+
* Valida e filtra itens do dropdown baseado no tipo especificado
|
|
4
|
+
* @param items - Array de itens para validar
|
|
5
|
+
* @param type - Tipo do dropdown ('text' | 'checkbox' | 'icon')
|
|
6
|
+
* @returns Array de itens válidos filtrados
|
|
7
|
+
*/
|
|
8
|
+
export declare const validateItems: (items: unknown, type: DropdownType) => DropdownItem[];
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { ReactNode, ReactElement } from 'react';
|
|
2
|
+
import { DropdownItem, DropdownType } from '../Dropdown/Dropdown.types';
|
|
3
|
+
type FilterButtonVariant = 'filled' | 'outlined' | 'text';
|
|
4
|
+
export interface FilterProps {
|
|
5
|
+
/** Items para o dropdown */
|
|
6
|
+
items?: DropdownItem[];
|
|
7
|
+
/** Tipo do dropdown */
|
|
8
|
+
type?: DropdownType | 'calendar';
|
|
9
|
+
/** IDs selecionados */
|
|
10
|
+
selectedIds?: string[];
|
|
11
|
+
/** Callback quando aplicar filtros */
|
|
12
|
+
onApplyFilter?: (selectedIds: string[]) => void;
|
|
13
|
+
/** Placeholder do dropdown */
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
/** Habilita busca no dropdown */
|
|
16
|
+
enableSearch?: boolean;
|
|
17
|
+
/** Texto do botão do filtro */
|
|
18
|
+
buttonText?: string | ReactNode;
|
|
19
|
+
/** Ícone do botão */
|
|
20
|
+
icon?: ReactElement;
|
|
21
|
+
/** Variante do botão */
|
|
22
|
+
variant?: FilterButtonVariant;
|
|
23
|
+
/** Callback chamado quando o filtro é aberto */
|
|
24
|
+
onOpen?: () => void;
|
|
25
|
+
/** Callback chamado quando o filtro é fechado */
|
|
26
|
+
onClose?: () => void;
|
|
27
|
+
/** Posição do dropdown */
|
|
28
|
+
position?: 'left' | 'right';
|
|
29
|
+
/** Se o filtro está desabilitado */
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
/** Classes CSS adicionais */
|
|
32
|
+
className?: string;
|
|
33
|
+
/** Data selecionada (quando type='calendar') */
|
|
34
|
+
selectedDate?: Date | null;
|
|
35
|
+
/** Callback quando data é selecionada */
|
|
36
|
+
onDateSelect?: (date: Date) => void;
|
|
37
|
+
/** Callback para limpar data */
|
|
38
|
+
onClearDate?: () => void;
|
|
39
|
+
/** Data mínima permitida */
|
|
40
|
+
minDate?: Date;
|
|
41
|
+
/** Data máxima permitida */
|
|
42
|
+
maxDate?: Date;
|
|
43
|
+
/** Locale do calendar */
|
|
44
|
+
locale?: 'pt-br' | 'en-us';
|
|
45
|
+
}
|
|
46
|
+
export {};
|