Prosperita Dumbo React - Biblioteca de Componentes

Uma biblioteca de componentes React moderna e acessível, desenvolvida para aplicações financeiras com design system consistente.

📦 Instalação

``bash
npm install prosperita-dumbo-react


ou

`tsx
import { Button, Input, Modal } from 'prosperita-dumbo-react';
import 'prosperita-dumbo-react/dist/style.css';

function App() {
return (


`tsx
import { Button } from 'prosperita-dumbo-react';

// Props
type ButtonProps = {
kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
size: "large" | "medium" | "small" | "extraLarge" | "twoXLarge" | "expressive";
label?: ReactNode;
icon?: ReactNode | string;
loading?: boolean;
disabled?: boolean;
onClick?: (event: React.MouseEvent) => void;
width?: string;
full?: boolean;
borderNone?: boolean;
hasIconSvg?: boolean;
fortable?: boolean;
fortableRadius?: boolean;
dimension?: string;
noPadding?: string;
style?: CSSProperties;
};

// Exemplos
kind="primary"
size="medium"
label="Salvar"
onClick={() => console.log('Clicado!')}
/>

kind="dangerPrimary"
size="large"
label="Excluir"
icon="🗑️"
loading={true}
/>
`

$3

Campo de entrada com diferentes tipos e estados.

`tsx
import { Input } from 'prosperita-dumbo-react';

// Props
type InputProps = {
size?: "small" | "medium" | "large";
label?: string;
message?: ReactNode;
error?: boolean;
warning?: boolean;
maxLength?: number;
disabled?: boolean;
readOnly?: boolean;
loading?: boolean;
type?: "text" | "password" | "email" | "number" | "textarea";
placeholder?: string;
value?: string | number;
onChange?: (event: ChangeEvent) => void;
noRadius?: boolean;
borderNone?: boolean;
forFilter?: boolean;
forModal?: boolean;
forSlider?: boolean;
};

// Exemplos
label="Email"
type="email"
placeholder="Digite seu email"
error={true}
message="Email inválido"
/>

label="Senha"
type="password"
size="large"
disabled={false}
/>
`

$3

Caixa de seleção com diferentes estados.

`tsx
import { Checkbox } from 'prosperita-dumbo-react';

// Props
type CheckboxProps = {
label?: string;
checked?: boolean;
disabled?: boolean;
size?: "small" | "medium" | "large";
onChange?: (checked: boolean) => void;
error?: boolean;
message?: string;
};

// Exemplos
label="Aceito os termos"
checked={true}
onChange={(checked) => console.log(checked)}
/>

label="Notificações"
size="large"
disabled={false}
/>
`

$3

Modal com diferentes tamanhos e configurações.

`tsx
import { Modal } from 'prosperita-dumbo-react';

// Props
type ModalProps = {
open?: boolean;
label?: ReactNode;
textLabel?: ReactNode;
children?: ReactNode;
onClose?: () => void;
backgroundModal?: string;
background?: string;
height?: string;
width?: string;
overflow?: boolean;
radius?: boolean;
closeButtonModal?: boolean;
buttons?: Array<{
label?: string;
icon?: string | ReactNode;
onClick?: () => void;
disabled?: boolean;
hasIconSvg?: boolean;
dimension?: string;
loading?: boolean;
size?: "large" | "medium" | "small" | "extraLarge" | "twoXLarge" | "expressive";
kind?: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
}>;
};

// Exemplos
open={isOpen}
label="Confirmação"
onClose={() => setIsOpen(false)}
buttons={[
{ label: "Cancelar", kind: "secondary", onClick: () => setIsOpen(false) },
{ label: "Confirmar", kind: "primary", onClick: handleConfirm }
]}
>


Tem certeza que deseja excluir este item?



`

$3

Tabela com colunas arrastáveis e funcionalidades avançadas.

`tsx
import { TableColumnDrag } from 'prosperita-dumbo-react';

// Props
type TableColumnDragProps = {
columnTitles: Array<{
id: string;
label: ReactNode;
name: string;
hasFilter?: boolean;
width?: string;
text: boolean;
value?: string;
placeholder?: string;
options?: Array<{ label: string; value: string }>;
onChange?: (event: ChangeEvent) => void;
onChangeMoney?: (event: ChangeEvent) => void;
type?: string;
paddingDrop?: string;
}>;
rowData: Array<{ [key: string]: ReactNode | string | JSX.Element }>;
pageSizes: number[];
clearFilesFilter: boolean;
label?: string;
search?: boolean;
nofilter?: boolean;
messagedatalength?: ReactNode;
width?: string;
sizeSearch?: "small" | "large" | "medium";
rowSizes?: string;
columnSizes?: string;
stickyFirstColumn?: boolean;
radiusButtonFilter: number;
column_storage_name: string;
widthOverflow?: string;
values?: { [key: string]: any };
onChangePage?: (event: number) => void;
onFilterStateChange?: (isFiltering: boolean, data: any[]) => void;
onChangeSearch?: (event: ChangeEvent) => void;
buttons?: Array<{
label: string;
onClick?: () => void;
icon?: string | ReactNode;
kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
position?: "right" | "left";
width?: string;
hasIconSvg?: boolean;
dimension?: string;
size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
}>;
actions?: Array<{
text: ReactNode;
icon?: ReactNode;
onClick?: () => void;
feature?: boolean;
noPadding?: string;
size: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
hasIconSvg?: boolean;
width?: string;
}>;
headerAction?: {
active: boolean;
count: number;
};
datePicker?: {
label: string;
type?: string;
value?: string;
onChange?: (event: ChangeEvent) => void;
};
};

// Exemplo
const columns = [
{ id: 'name', label: 'Nome', name: 'name', hasFilter: true, text: true },
{ id: 'email', label: 'Email', name: 'email', hasFilter: true, text: true },
{ id: 'status', label: 'Status', name: 'status', hasFilter: true, text: false, options: [
{ label: 'Ativo', value: 'active' },
{ label: 'Inativo', value: 'inactive' }
]}
];

const data = [
{ name: 'João Silva', email: 'joao@email.com', status: 'Ativo' },
{ name: 'Maria Santos', email: 'maria@email.com', status: 'Inativo' }
];

columnTitles={columns}
rowData={data}
pageSizes={[10, 25, 50]}
clearFilesFilter={false}
search={true}
column_storage_name="user-table"
radiusButtonFilter={2}
buttons={[
{ label: "Novo", kind: "primary", position: "left", onClick: () => console.log('Novo') },
{ label: "Excluir", kind: "dangerPrimary", position: "right", onClick: () => console.log('Excluir') }
]}
/>
`

$3

Menu dropdown com opções customizáveis.

`tsx
import { Dropdown } from 'prosperita-dumbo-react';

// Props
type DropdownProps = {
options: Array<{ label: string; value: string }>;
placeholder?: string;
value?: string;
onChange?: (data: { selectedItem: any }) => void;
size?: "small" | "medium" | "large";
kind?: "default" | "fluid";
disabled?: boolean;
loading?: boolean;
error?: boolean;
message?: string;
noRadius?: boolean;
borderNone?: boolean;
forFilter?: boolean;
clearFiles?: boolean;
paddingDrop?: string;
autoComplete?: string;
name?: string;
};

// Exemplo
options={[
{ label: 'Opção 1', value: '1' },
{ label: 'Opção 2', value: '2' }
]}
placeholder="Selecione uma opção"
onChange={({ selectedItem }) => console.log(selectedItem)}
size="medium"
/>
`

$3

Aba individual para sistema de abas.

`tsx
import { TabPane } from 'prosperita-dumbo-react';

// Props
type TabPaneProps = {
children?: ReactNode;
label: string;
onClick: () => void;
isActive: boolean;
icon?: string | ReactNode;
bordercolor?: string;
width?: string;
disabled?: boolean;
position?: "center" | "right" | "left";
padding?: string;
bottom?: boolean;
borderRadius?: string;
};

// Exemplo
label="Perfil"
isActive={activeTab === 'profile'}
onClick={() => setActiveTab('profile')}
icon="👤"
bordercolor="#007bff"
>


Conteúdo da aba Perfil



`

$3

Campo de busca com funcionalidades avançadas.

`tsx
import { Search } from 'prosperita-dumbo-react';

// Props
type SearchProps = {
kind?: "default" | "fluid";
size?: "small" | "medium" | "large";
placeholder?: string;
value?: string;
onChange?: (event: ChangeEvent) => void;
borderTable?: boolean;
disabled?: boolean;
loading?: boolean;
};

// Exemplo
placeholder="Digite para pesquisar..."
onChange={(e) => setSearchTerm(e.target.value)}
size="medium"
borderTable
/>
`

$3

Notificação com diferentes tipos e posições.

`tsx
import { Notification } from 'prosperita-dumbo-react';

// Props
type NotificationProps = {
title?: string;
message?: string;
kind?: "info" | "success" | "warning" | "error";
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
duration?: number;
onClose?: () => void;
icon?: ReactNode;
};

// Exemplo
title="Sucesso!"
message="Operação realizada com sucesso."
kind="success"
position="top-right"
duration={5000}
/>
`

$3

Tooltip com diferentes posições e tamanhos.

`tsx
import { Tooltip } from 'prosperita-dumbo-react';

// Props
type TooltipProps = {
children: ReactNode;
label: string;
align?: "top" | "top-right" | "top-left" | "bottom" | "bottom-right" | "bottom-left" | "left" | "right";
size?: "small" | "medium" | "large";
width?: string;
disabled?: boolean;
};

// Exemplo





`

$3

Indicador de carregamento.

`tsx
import { Loading } from 'prosperita-dumbo-react';

// Props
type LoadingProps = {
size?: "small" | "medium" | "large";
kind?: "spinner" | "skeleton";
text?: string;
};

// Exemplo

`

$3

Indicador de carregamento inline.

`tsx
import { InlineLoading } from 'prosperita-dumbo-react';

// Props
type InlineLoadingProps = {
size?: "small" | "medium" | "large";
text?: string;
success?: boolean;
error?: boolean;
};

// Exemplo

`

$3

Indicador de progresso.

`tsx
import { ProgressIndicator } from 'prosperita-dumbo-react';

// Props
type ProgressIndicatorProps = {
current: number;
total: number;
size?: "small" | "medium" | "large";
showPercentage?: boolean;
color?: string;
};

// Exemplo

`

$3

Controle deslizante.

`tsx
import { Slider } from 'prosperita-dumbo-react';

// Props
type SliderProps = {
min: number;
max: number;
value: number;
onChange: (value: number) => void;
step?: number;
disabled?: boolean;
showValue?: boolean;
label?: string;
};

// Exemplo
min={0}
max={100}
value={50}
onChange={(value) => console.log(value)}
step={1}
showValue
label="Volume"
/>
`

$3

Interruptor on/off.

`tsx
import { Toggle } from 'prosperita-dumbo-react';

// Props
type ToggleProps = {
checked: boolean;
onChange: (checked: boolean) => void;
disabled?: boolean;
size?: "small" | "medium" | "large";
label?: string;
};

// Exemplo
checked={isEnabled}
onChange={setIsEnabled}
label="Notificações"
size="medium"
/>
`

$3

Botão de opção única.

`tsx
import { Radio } from 'prosperita-dumbo-react';

// Props
type RadioProps = {
name: string;
value: string;
checked: boolean;
onChange: (value: string) => void;
label?: string;
disabled?: boolean;
size?: "small" | "medium" | "large";
};

// Exemplo
name="gender"
value="male"
checked={gender === 'male'}
onChange={setGender}
label="Masculino"
/>
`

$3

Tag para categorização.

`tsx
import { Tag } from 'prosperita-dumbo-react';

// Props
type TagProps = {
label: string;
kind?: "primary" | "secondary" | "success" | "warning" | "error";
size?: "small" | "medium" | "large";
onRemove?: () => void;
disabled?: boolean;
};

// Exemplo
label="React"
kind="primary"
size="medium"
onRemove={() => console.log('Removido')}
/>
`

$3

Bloco de conteúdo.

`tsx
import { Tile } from 'prosperita-dumbo-react';

// Props
type TileProps = {
children: ReactNode;
kind?: "default" | "selectable" | "expandable";
selected?: boolean;
expanded?: boolean;
onClick?: () => void;
onExpand?: () => void;
disabled?: boolean;
size?: "small" | "medium" | "large";
};

// Exemplo
kind="selectable"
selected={isSelected}
onClick={() => setIsSelected(!isSelected)}
>


Título do Tile

Conteúdo do tile

`

$3

Navegação em migalhas.

`tsx
import { Breadcrumb } from 'prosperita-dumbo-react';

// Props
type BreadcrumbProps = {
items: Array<{
label: string;
href?: string;
onClick?: () => void;
}>;
separator?: string;
size?: "small" | "medium" | "large";
};

// Exemplo
items={[
{ label: 'Home', href: '/' },
{ label: 'Produtos', href: '/products' },
{ label: 'Detalhes' }
]}
separator="/"
/>
`

$3

Upload de arquivos.

`tsx
import { FileUploader } from 'prosperita-dumbo-react';

// Props
type FileUploaderProps = {
onUpload: (files: File[]) => void;
accept?: string;
multiple?: boolean;
maxSize?: number;
disabled?: boolean;
label?: string;
description?: string;
error?: boolean;
message?: string;
};

// Exemplo
onUpload={(files) => console.log(files)}
accept=".pdf,.doc,.docx"
multiple={true}
maxSize={5242880}
label="Upload de documentos"
description="Arraste arquivos ou clique para selecionar"
/>
`

$3

Alternador de conteúdo.

`tsx
import { ContentSwitcher } from 'prosperita-dumbo-react';

// Props
type ContentSwitcherProps = {
items: Array<{
id: string;
label: string;
content: ReactNode;
}>;
activeId: string;
onChange: (id: string) => void;
size?: "small" | "medium" | "large";
};

// Exemplo
items={[
{ id: 'tab1', label: 'Aba 1', content:

Conteúdo 1

},
{ id: 'tab2', label: 'Aba 2', content:

Conteúdo 2

}
]}
activeId={activeTab}
onChange={setActiveTab}
/>
`

$3

Botão de menu.

`tsx
import { MenuButton } from 'prosperita-dumbo-react';

// Props
type MenuButtonProps = {
label?: string;
icon?: ReactNode;
items: Array<{
label: string;
onClick: () => void;
disabled?: boolean;
icon?: ReactNode;
}>;
size?: "small" | "medium" | "large";
kind?: "primary" | "secondary" | "tertiary" | "ghost";
disabled?: boolean;
};

// Exemplo
label="Ações"
icon="⚙️"
items={[
{ label: 'Editar', onClick: () => console.log('Editar') },
{ label: 'Excluir', onClick: () => console.log('Excluir') }
]}
/>
`

$3

Componente para espaçamento.

`tsx
import { Margin } from 'prosperita-dumbo-react';

// Props
type MarginProps = {
children: ReactNode;
top?: string | number;
bottom?: string | number;
left?: string | number;
right?: string | number;
all?: string | number;
};

// Exemplo





`

$3

Campo de entrada para valores monetários com formatação automática.

`tsx
import { InputCurrency } from 'prosperita-dumbo-react';

// Props
type InputCurrencyProps = {
size?: "small" | "medium" | "large";
label?: string;
message?: string;
SymbolCipher?: string;
randomSymbol?: string;
error?: boolean;
warning?: boolean;
maxLength?: number;
disabled?: boolean;
readOnly?: boolean;
forModal?: boolean;
forSlider?: boolean;
noRadius?: boolean;
borderNone?: boolean;
clearFilds?: boolean;
onChange?: (event: ChangeEvent) => void;
};

// Exemplo
label="Valor"
SymbolCipher="R$"
placeholder="0,00"
onChange={(e) => console.log(e.target.value)}
/>
`

$3

Versão fluida do campo de entrada monetária.

`tsx
import { InputCurrencyFluid } from 'prosperita-dumbo-react';

// Props
type InputCurrencyFluidProps = {
size?: "small" | "medium" | "large";
message?: string;
SymbolCipher?: string;
randomSymbol?: string;
error?: boolean;
warning?: boolean;
maxLength?: number;
disabled?: boolean;
readOnly?: boolean;
forModal?: boolean;
forSlider?: boolean;
noRadius?: boolean;
borderNone?: boolean;
clearFiles?: boolean;
onChange?: (event: ChangeEvent) => void;
};

// Exemplo
SymbolCipher="R$"
placeholder="0,00"
onChange={(e) => console.log(e.target.value)}
/>
`

$3

Campo de entrada fluido com funcionalidades avançadas.

`tsx
import { InputFluid } from 'prosperita-dumbo-react';

// Props
type InputFluidProps = {
label?: string;
message?: string;
placeholder?: string;
error?: boolean;
warning?: boolean;
onChange?: (event: ChangeEvent) => void;
maxLength?: number;
disabled?: boolean;
readOnly?: boolean;
loading?: boolean;
cols?: number;
rows?: number;
noRadius?: boolean;
borderNone?: boolean;
tootipLabel?: {
align: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
width?: string;
children?: ReactNode;
size: "small" | "large" | "medium";
label?: string;
};
};

// Exemplo
label="Nome"
placeholder="Digite seu nome"
loading={false}
tootipLabel={{
align: "top",
label: "Informação adicional",
size: "small"
}}
/>
`

$3

Campo de seleção baseado em react-select.

`tsx
import { InputSelect } from 'prosperita-dumbo-react';

// Props
type InputSelectProps = {
size: "small" | "large" | "medium";
kind: "default" | "fluid" | "little";
message?: string;
label?: string;
placeholder?: string;
disabled?: boolean;
error?: boolean;
warning?: boolean;
readonly?: boolean;
loading?: boolean;
options?: Array<{ label: string; value: string }>;
styles?: StylesConfig;
name?: string;
id?: string;
noRadius?: boolean;
isMulti?: boolean;
value?: string;
onChange?: (event: any) => void;
clearInput?: boolean;
noBorder?: boolean;
};

// Exemplo
size="medium"
kind="default"
label="Selecione uma opção"
options={[
{ label: 'Opção 1', value: '1' },
{ label: 'Opção 2', value: '2' }
]}
onChange={(selected) => console.log(selected)}
/>
`

$3

Container para sistema de abas.

`tsx
import { Tab } from 'prosperita-dumbo-react';

// Props
type TabProps = {
children: ReactNode;
width: string;
bottom?: boolean;
};

// Exemplo

{}} />
{}} />

`

$3

Tabela básica com funcionalidades de paginação e busca.

`tsx
import { Table } from 'prosperita-dumbo-react';

// Props
type TableProps = {
columnTitles: string[];
rowData: Array<{ [key: string]: ReactNode | string | JSX.Element }>;
sizeHeightMessage?: string;
actions?: Array<{
text: ReactNode;
onClick?: () => void;
}>;
label?: {
content: JSX.Element | ReactNode;
padding?: string;
margin?: string;
};
buttons?: Array<{
label: string;
onClick?: () => void;
icon?: string;
kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
position?: "right" | "left";
width?: string;
dimension?: string;
size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
disabled?: boolean;
tooltip?: {
align: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
width?: string;
children?: ReactNode;
size: "small" | "large" | "medium";
label?: string;
};
}>;
pageSizes: number[];
datePicker?: {
label: string;
type?: string;
value?: string;
onChange?: (event: ChangeEvent) => void;
};
search?: boolean;
pagination?: boolean;
messagedatalength?: string;
width?: string;
sizeSearch?: "small" | "large" | "medium";
rowSizes?: string;
radius?: boolean;
footer?: {
ht: string;
element: ReactNode;
bg: string;
};
bg?: string;
ht?: string;
};

// Exemplo
columnTitles={['Nome', 'Email', 'Status']}
rowData={[
{ name: 'João', email: 'joao@email.com', status: 'Ativo' },
{ name: 'Maria', email: 'maria@email.com', status: 'Inativo' }
]}
pageSizes={[10, 25, 50]}
search={true}
pagination={true}
/>
`

$3

Tabela básica simplificada.

`tsx
import { TableBasic } from 'prosperita-dumbo-react';

// Props
type TableBasicProps = {
columnTitles: string[];
rowData: Array<{ [key: string]: ReactNode | string | JSX.Element }>;
pageSizes: number[];
actions?: Array<{
text: ReactNode;
onClick?: () => void;
}>;
label?: string;
buttons?: Array<{
label: string;
onClick?: () => void;
icon?: string;
kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
position?: "right" | "left";
width?: string;
dimension?: string;
size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
disabled?: boolean;
dropOptions?: {
options: Array<{
label: string;
onClick?: () => void;
}>;
};
}>;
search?: boolean;
messagedatalength?: string;
width?: string;
sizeSearch?: "small" | "large" | "medium";
rowSizes?: string;
columnSizes?: string;
};

// Exemplo
columnTitles={['Nome', 'Email']}
rowData={[
{ name: 'João', email: 'joao@email.com' },
{ name: 'Maria', email: 'maria@email.com' }
]}
pageSizes={[10, 25, 50]}
search={true}
/>
`

$3

Tabela com linhas expansíveis.

`tsx
import { TableExpandable } from 'prosperita-dumbo-react';

// Props
type TableExpandableProps = {
columnTitles: ReactNode[];
rowData: Array<{ [key: string]: any; onClick?: () => void }>;
pageSizes: number[];
actions?: Array<{
text: ReactNode;
icon?: string | ReactNode;
onClick?: () => void;
feature?: boolean;
noPadding?: string;
size: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
hasIconSvg?: boolean;
width?: string;
}>;
label?: string;
buttons?: Array<{
label: string;
onClick?: () => void;
icon?: string;
kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
position?: "right" | "left";
size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
dimension?: string;
width?: string;
disabled?: boolean;
loading?: boolean;
}>;
search?: boolean;
onChangeSearch?: (event: ChangeEvent) => void;
arrow?: { thSize: string; iconSize?: string; transform?: string };
messageDatalength?: string;
width?: string;
expandedRowData?: string[];
columsKeys?: string[];
headerAction?: {
active: boolean;
count: number;
};
sizeSearch?: "small" | "large" | "medium";
rowSizes?: string;
columnSizes?: string;
overflowPagination?: boolean;
};

// Exemplo
columnTitles={['Nome', 'Email', 'Ações']}
rowData={[
{ name: 'João', email: 'joao@email.com', details: 'Detalhes do João' },
{ name: 'Maria', email: 'maria@email.com', details: 'Detalhes da Maria' }
]}
pageSizes={[10, 25, 50]}
expandedRowData={['details']}
search={true}
/>
`

$3

Tabela expansível com colunas arrastáveis.

`tsx
import { TableExpandableDrag } from 'prosperita-dumbo-react';

// Props
type TableExpandableDragProps = {
columnTitles: Array<{
id: string;
label: ReactNode;
name: string;
hasFilter?: boolean;
width?: string;
text: boolean;
value?: string;
paddingDrop?: string;
type?: string;
placeholder?: string;
options?: Array<{ label: string; value: string }>;
onChange?: (event: ChangeEvent) => void;
onChangeMoney?: (event: ChangeEvent) => void;
}>;
clearFilesFilter: boolean;
rowData: Array<{ [key: string]: ReactNode | string | JSX.Element }>;
pageSizes: number[];
actions?: Array<{
text: ReactNode;
icon?: ReactNode;
onClick?: () => void;
feature?: boolean;
noPadding?: string;
size: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
hasIconSvg?: boolean;
width?: string;
}>;
label?: ReactNode;
buttons?: Array<{
label: string;
onClick?: () => void;
icon?: string | ReactNode;
kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
position?: "right" | "left";
width?: string;
hasIconSvg?: boolean;
dimension?: string;
size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
disabled?: boolean;
loading?: boolean;
}>;
search?: boolean;
nofilter?: boolean;
messagedatalength?: ReactNode;
width?: string;
onChangePage?: (event: number) => void;
onChangeSearch?: (event: ChangeEvent) => void;
sizeSearch?: "small" | "large" | "medium";
rowSizes?: number;
sizesRow?: string;
radiusButtonFilter: number;
columnSizes?: string;
expandedRowData?: string[];
onFilterStateChange?: (isFiltering: boolean, data: any[]) => void;
columsKeys?: string[];
arrow?: { thSize: string; iconSize?: string; transform?: string };
headerAction?: {
active: boolean;
count: number;
};
column_storage_name: string;
values?: { [key: string]: any };
stickyFirstColumn?: boolean;
widthOverflow?: string;
datePicker?: {
label: string;
type?: string;
value?: string;
onChange?: (event: ChangeEvent) => void;
};
};

// Exemplo
columnTitles={[
{ id: 'name', label: 'Nome', name: 'name', hasFilter: true, text: true },
{ id: 'email', label: 'Email', name: 'email', hasFilter: true, text: true }
]}
rowData={[
{ name: 'João', email: 'joao@email.com', details: 'Detalhes' },
{ name: 'Maria', email: 'maria@email.com', details: 'Detalhes' }
]}
pageSizes={[10, 25, 50]}
clearFilesFilter={false}
column_storage_name="expandable-table"
radiusButtonFilter={2}
expandedRowData={['details']}
/>
`

$3

Tabela com ações em lote.

`tsx
import { TableBatchActions } from 'prosperita-dumbo-react';

// Props
type TableBatchActionsProps = {
columnTitles: ReactNode[];
rowData: Array<{ [key: string]: ReactNode | string | JSX.Element }>;
pageSizes: number[];
actions?: Array<{
text: ReactNode;
icon?: string;
feature?: boolean;
onClick?: () => void;
}>;
label?: string;
buttons?: Array<{
label: string;
onClick?: () => void;
icon?: string | ReactNode;
kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
position?: "right" | "left";
hasIconSvg?: boolean;
dimension?: string;
width?: string;
size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
disabled?: boolean;
}>;
search?: boolean;
messagedatalength?: string;
width?: string;
columsKeys?: string[];
sizeSearch?: "small" | "large" | "medium";
headerAction?: {
active: boolean;
count: number;
};
rowSizes?: string;
};

// Exemplo
columnTitles={['Nome', 'Email', 'Selecionar']}
rowData={[
{ name: 'João', email: 'joao@email.com', selected: false },
{ name: 'Maria', email: 'maria@email.com', selected: false }
]}
pageSizes={[10, 25, 50]}
headerAction={{ active: true, count: 0 }}
search={true}
/>
`

$3

Snippet de código com funcionalidade de cópia.

`tsx
import { CodeSnippet } from 'prosperita-dumbo-react';

// Props
type CodeSnippetProps = {
language?: string;
code: string;
background?: string;
color?: string;
icon?: ReactNode;
};

// Exemplo
language="javascript"
code="console.log('Hello World!');"
background="#f4f4f4"
color="#161616"
/>
`

$3

Snippet de código inline com numeração de linhas.

`tsx
import { CodeSnippetInline } from 'prosperita-dumbo-react';

// Props
type CodeSnippetInlineProps = {
code: string;
language?: string;
expanded?: boolean;
numbers?: boolean;
copy?: boolean;
};

// Exemplo
code={function hello() {
console.log('Hello World!');
}}
language="javascript"
expanded={true}
numbers={true}
copy={true}
/>
`

$3

Lista dupla para seleção de itens.

`tsx
import { DuoList } from 'prosperita-dumbo-react';

// Props
type DuoListProps = {
options: Array<{
label: string;
value: number;
checked?: boolean;
}>;
onClick?: () => void;
selecteds?: Array<{
label: string;
value: number;
checked?: boolean;
}>;
onChange?: (selected: Array<{ label: string; value: number; checked?: boolean }>) => void;
width?: string;
};

// Exemplo
options={[
{ label: 'Opção 1', value: 1 },
{ label: 'Opção 2', value: 2 },
{ label: 'Opção 3', value: 3 }
]}
onChange={(selected) => console.log(selected)}
width="400px"
/>
`

$3

Cabeçalho de navegação com menu e perfil do usuário.

`tsx
import { UINavigationHeader } from 'prosperita-dumbo-react';

// Props
type UINavigationHeaderProps = {
options?: Array<{
normalMode?: boolean;
label?: string | ReactNode;
icon?: ReactNode;
onClick?: () => void;
href?: string;
permission?: boolean;
optionsMenu?: Array<{
label?: string;
onClick?: () => void;
permission?: boolean;
children?: Array<{
label?: string;
onClick?: () => void;
permission?: boolean;
}>;
}>;
minColumnWidth?: string;
gap?: string;
}>;
icon?: string | ReactNode;
emailuser?: string | ReactNode;
userName?: string | ReactNode;
children?: ReactNode;
SectionRightTime?: ReactNode;
open?: boolean;
bgHeader?: string;
navigateProfile?: () => void;
columnsMax?: number;
};

// Exemplo
userName="João Silva"
emailuser="joao@email.com"
options={[
{
label: 'Dashboard',
onClick: () => console.log('Dashboard'),
optionsMenu: [
{ label: 'Submenu 1', onClick: () => console.log('Submenu 1') }
]
}
]}
navigateProfile={() => console.log('Perfil')}
/>
`

$3

Cabeçalho simples com menu dropdown.

`tsx
import { UISHELLHeader } from 'prosperita-dumbo-react';

// Props
type UISHELLHeaderProps = {
options: Array<{
label: string;
onClick: () => void;
}>;
label?: string;
};

// Exemplo
label="Menu"
options={[
{ label: 'Opção 1', onClick: () => console.log('Opção 1') },
{ label: 'Opção 2', onClick: () => console.log('Opção 2') }
]}
/>
`

$3

Cabeçalho de navegação com funcionalidades avançadas.

`tsx
import { UIHeaderNav } from 'prosperita-dumbo-react';

// Props
type UIHeaderNavProps = {
options?: Array<{
label?: string | ReactNode;
onClick?: () => void;
href?: string;
permission?: boolean;
optionsMenu?: Array<{
label?: string;
onClick?: () => void;
permission?: boolean;
}>;
}>;
icon?: string | ReactNode;
emailuser?: string | ReactNode;
userName?: string | ReactNode;
children?: ReactNode;
SectionRightTime?: ReactNode;
open?: boolean;
bgHeader?: string;
navigateProfile?: () => void;
search?: {
onClick: () => void;
on: boolean;
};
};

// Exemplo
userName="João Silva"
emailuser="joao@email.com"
options={[
{ label: 'Dashboard', onClick: () => console.log('Dashboard') }
]}
search={{ onClick: () => console.log('Search'), on: true }}
navigateProfile={() => console.log('Perfil')}
/>
`

🎨 Tema

A biblioteca usa um sistema de temas consistente. Para customizar:

`tsx
import theme from 'prosperita-dumbo-react/theme';

// Cores disponíveis
theme.buttonPrimary // Cor primária dos botões
theme.textPrimary // Cor primária do texto
theme.layer01 // Cor de fundo da camada 1
theme.borderSubtle00 // Cor da borda sutil
`

📱 Responsividade

Todos os componentes são responsivos por padrão e se adaptam automaticamente a diferentes tamanhos de tela.

♿ Acessibilidade

A biblioteca segue as diretrizes WCAG 2.1 para acessibilidade, incluindo:
- Navegação por teclado
- Suporte a leitores de tela
- Contraste adequado
- Estados focáveis

🔧 Desenvolvimento

Para contribuir com o projeto:

`bash
git clone
cd prosperita-dumbo-react
yarn install
yarn dev
``

📄 Licença

MIT License - veja o arquivo LICENSE para detalhes.

🤝 Contribuição

Contribuições são bem-vindas! Por favor, leia o guia de contribuição antes de submeter um PR.