prosperita-dumbo-react 1.4.14 → 1.4.15

package/README.md

@@ -1,1594 +1,1594 @@
-# 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
-yarn add prosperita-dumbo-react
-```
-
-## 🚀 Uso Básico
-
-```tsx
-import { Button, Input, Modal } from 'prosperita-dumbo-react';
-import 'prosperita-dumbo-react/dist/style.css';
-
-function App() {
-  return (
-    <div>
-      <Button kind="primary" size="medium" label="Clique aqui" />
-      <Input label="Nome" placeholder="Digite seu nome" />
-    </div>
-  );
-}
-```
-
-## 🎨 Componentes
-
-### Button
-
-Botão com múltiplas variantes e tamanhos.
-
-```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<HTMLButtonElement>) => void;
-  width?: string;
-  full?: boolean;
-  borderNone?: boolean;
-  hasIconSvg?: boolean;
-  fortable?: boolean;
-  fortableRadius?: boolean;
-  dimension?: string;
-  noPadding?: string;
-  style?: CSSProperties;
-};
-
-// Exemplos
-<Button 
-  kind="primary" 
-  size="medium" 
-  label="Salvar" 
-  onClick={() => console.log('Clicado!')} 
-/>
-
-<Button 
-  kind="dangerPrimary" 
-  size="large" 
-  label="Excluir" 
-  icon="🗑️" 
-  loading={true} 
-/>
-```
-
-### Input
-
-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<HTMLInputElement | HTMLTextAreaElement>) => void;
-  noRadius?: boolean;
-  borderNone?: boolean;
-  forFilter?: boolean;
-  forModal?: boolean;
-  forSlider?: boolean;
-};
-
-// Exemplos
-<Input 
-  label="Email" 
-  type="email" 
-  placeholder="Digite seu email" 
-  error={true} 
-  message="Email inválido" 
-/>
-
-<Input 
-  label="Senha" 
-  type="password" 
-  size="large" 
-  disabled={false} 
-/>
-```
-
-### Checkbox
-
-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
-<Checkbox 
-  label="Aceito os termos" 
-  checked={true} 
-  onChange={(checked) => console.log(checked)} 
-/>
-
-<Checkbox 
-  label="Notificações" 
-  size="large" 
-  disabled={false} 
-/>
-```
-
-### Modal
-
-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
-<Modal 
-  open={isOpen} 
-  label="Confirmação" 
-  onClose={() => setIsOpen(false)}
-  buttons={[
-    { label: "Cancelar", kind: "secondary", onClick: () => setIsOpen(false) },
-    { label: "Confirmar", kind: "primary", onClick: handleConfirm }
-  ]}
->
-  <p>Tem certeza que deseja excluir este item?</p>
-</Modal>
-```
-
-### TableColumnDrag
-
-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<HTMLInputElement | HTMLTextAreaElement>) => void;
-    onChangeMoney?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => 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<HTMLInputElement>) => 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<HTMLInputElement | HTMLTextAreaElement>) => 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' }
-];
-
-<TableColumnDrag
-  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') }
-  ]}
-/>
-```
-
-### Dropdown
-
-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
-<Dropdown
-  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"
-/>
-```
-
-### TabPane
-
-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
-<TabPane
-  label="Perfil"
-  isActive={activeTab === 'profile'}
-  onClick={() => setActiveTab('profile')}
-  icon="👤"
-  bordercolor="#007bff"
->
-  <div>Conteúdo da aba Perfil</div>
-</TabPane>
-```
-
-### Search
-
-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<HTMLInputElement>) => void;
-  borderTable?: boolean;
-  disabled?: boolean;
-  loading?: boolean;
-};
-
-// Exemplo
-<Search
-  placeholder="Digite para pesquisar..."
-  onChange={(e) => setSearchTerm(e.target.value)}
-  size="medium"
-  borderTable
-/>
-```
-
-### Notification
-
-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
-<Notification
-  title="Sucesso!"
-  message="Operação realizada com sucesso."
-  kind="success"
-  position="top-right"
-  duration={5000}
-/>
-```
-
-### Tooltip
-
-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
-<Tooltip label="Informação adicional" align="top" size="small">
-  <Button label="Hover me" />
-</Tooltip>
-```
-
-### Loading
-
-Indicador de carregamento.
-
-```tsx
-import { Loading } from 'prosperita-dumbo-react';
-
-// Props
-type LoadingProps = {
-  size?: "small" | "medium" | "large";
-  kind?: "spinner" | "skeleton";
-  text?: string;
-};
-
-// Exemplo
-<Loading size="medium" text="Carregando..." />
-```
-
-### InlineLoading
-
-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
-<InlineLoading size="small" text="Salvando..." />
-```
-
-### ProgressIndicator
-
-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
-<ProgressIndicator current={75} total={100} showPercentage />
-```
-
-### Slider
-
-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
-<Slider
-  min={0}
-  max={100}
-  value={50}
-  onChange={(value) => console.log(value)}
-  step={1}
-  showValue
-  label="Volume"
-/>
-```
-
-### Toggle
-
-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
-<Toggle
-  checked={isEnabled}
-  onChange={setIsEnabled}
-  label="Notificações"
-  size="medium"
-/>
-```
-
-### Radio
-
-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
-<Radio
-  name="gender"
-  value="male"
-  checked={gender === 'male'}
-  onChange={setGender}
-  label="Masculino"
-/>
-```
-
-### Tag
-
-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
-<Tag
-  label="React"
-  kind="primary"
-  size="medium"
-  onRemove={() => console.log('Removido')}
-/>
-```
-
-### Tile
-
-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
-<Tile
-  kind="selectable"
-  selected={isSelected}
-  onClick={() => setIsSelected(!isSelected)}
->
-  <h3>Título do Tile</h3>
-  <p>Conteúdo do tile</p>
-</Tile>
-```
-
-### Breadcrumb
-
-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
-<Breadcrumb
-  items={[
-    { label: 'Home', href: '/' },
-    { label: 'Produtos', href: '/products' },
-    { label: 'Detalhes' }
-  ]}
-  separator="/"
-/>
-```
-
-### FileUploader
-
-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
-<FileUploader
-  onUpload={(files) => console.log(files)}
-  accept=".pdf,.doc,.docx"
-  multiple={true}
-  maxSize={5242880}
-  label="Upload de documentos"
-  description="Arraste arquivos ou clique para selecionar"
-/>
-```
-
-### ContentSwitcher
-
-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
-<ContentSwitcher
-  items={[
-    { id: 'tab1', label: 'Aba 1', content: <div>Conteúdo 1</div> },
-    { id: 'tab2', label: 'Aba 2', content: <div>Conteúdo 2</div> }
-  ]}
-  activeId={activeTab}
-  onChange={setActiveTab}
-/>
-```
-
-### MenuButton
-
-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
-<MenuButton
-  label="Ações"
-  icon="⚙️"
-  items={[
-    { label: 'Editar', onClick: () => console.log('Editar') },
-    { label: 'Excluir', onClick: () => console.log('Excluir') }
-  ]}
-/>
-```
-
-### Margin
-
-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
-<Margin top={20} bottom={10}>
-  <Button label="Botão com margem" />
-</Margin>
-```
-
-### InputCurrency
-
-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<HTMLInputElement | HTMLTextAreaElement>) => void;
-};
-
-// Exemplo
-<InputCurrency
-  label="Valor"
-  SymbolCipher="R$"
-  placeholder="0,00"
-  onChange={(e) => console.log(e.target.value)}
-/>
-```
-
-### InputCurrencyFluid
-
-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<HTMLInputElement | HTMLTextAreaElement>) => void;
-};
-
-// Exemplo
-<InputCurrencyFluid
-  SymbolCipher="R$"
-  placeholder="0,00"
-  onChange={(e) => console.log(e.target.value)}
-/>
-```
-
-### InputFluid
-
-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<HTMLInputElement>) => 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
-<InputFluid
-  label="Nome"
-  placeholder="Digite seu nome"
-  loading={false}
-  tootipLabel={{
-    align: "top",
-    label: "Informação adicional",
-    size: "small"
-  }}
-/>
-```
-
-### InputSelect
-
-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
-<InputSelect
-  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)}
-/>
-```
-
-### Tab
-
-Container para sistema de abas.
-
-```tsx
-import { Tab } from 'prosperita-dumbo-react';
-
-// Props
-type TabProps = {
-  children: ReactNode;
-  width: string;
-  bottom?: boolean;
-};
-
-// Exemplo
-<Tab width="100%" bottom={false}>
-  <TabPane label="Aba 1" isActive={true} onClick={() => {}} />
-  <TabPane label="Aba 2" isActive={false} onClick={() => {}} />
-</Tab>
-```
-
-### Table
-
-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<HTMLInputElement | HTMLTextAreaElement>) => 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
-<Table
-  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}
-/>
-```
-
-### TableBasic
-
-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
-<TableBasic
-  columnTitles={['Nome', 'Email']}
-  rowData={[
-    { name: 'João', email: 'joao@email.com' },
-    { name: 'Maria', email: 'maria@email.com' }
-  ]}
-  pageSizes={[10, 25, 50]}
-  search={true}
-/>
-```
-
-### TableExpandable
-
-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<HTMLInputElement>) => 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
-<TableExpandable
-  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}
-/>
-```
-
-### TableExpandableDrag
-
-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<HTMLInputElement | HTMLTextAreaElement>) => void;
-    onChangeMoney?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => 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<HTMLInputElement>) => 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<HTMLInputElement | HTMLTextAreaElement>) => void;
-  };
-};
-
-// Exemplo
-<TableExpandableDrag
-  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']}
-/>
-```
-
-### TableBatchActions
-
-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
-<TableBatchActions
-  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}
-/>
-```
-
-### CodeSnippet
-
-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
-<CodeSnippet
-  language="javascript"
-  code="console.log('Hello World!');"
-  background="#f4f4f4"
-  color="#161616"
-/>
-```
-
-### CodeSnippetInline
-
-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
-<CodeSnippetInline
-  code={`function hello() {
-  console.log('Hello World!');
-}`}
-  language="javascript"
-  expanded={true}
-  numbers={true}
-  copy={true}
-/>
-```
-
-### DuoList
-
-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
-<DuoList
-  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"
-/>
-```
-
-### UINavigationHeader
-
-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
-<UINavigationHeader
-  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')}
-/>
-```
-
-### UISHELLHeader
-
-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
-<UISHELLHeader
-  label="Menu"
-  options={[
-    { label: 'Opção 1', onClick: () => console.log('Opção 1') },
-    { label: 'Opção 2', onClick: () => console.log('Opção 2') }
-  ]}
-/>
-```
-
-### UIHeaderNav
-
-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
-<UIHeaderNav
-  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 <repository>
-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.
+# 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
+yarn add prosperita-dumbo-react
+```
+
+## 🚀 Uso Básico
+
+```tsx
+import { Button, Input, Modal } from 'prosperita-dumbo-react';
+import 'prosperita-dumbo-react/dist/style.css';
+
+function App() {
+  return (
+    <div>
+      <Button kind="primary" size="medium" label="Clique aqui" />
+      <Input label="Nome" placeholder="Digite seu nome" />
+    </div>
+  );
+}
+```
+
+## 🎨 Componentes
+
+### Button
+
+Botão com múltiplas variantes e tamanhos.
+
+```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<HTMLButtonElement>) => void;
+  width?: string;
+  full?: boolean;
+  borderNone?: boolean;
+  hasIconSvg?: boolean;
+  fortable?: boolean;
+  fortableRadius?: boolean;
+  dimension?: string;
+  noPadding?: string;
+  style?: CSSProperties;
+};
+
+// Exemplos
+<Button 
+  kind="primary" 
+  size="medium" 
+  label="Salvar" 
+  onClick={() => console.log('Clicado!')} 
+/>
+
+<Button 
+  kind="dangerPrimary" 
+  size="large" 
+  label="Excluir" 
+  icon="🗑️" 
+  loading={true} 
+/>
+```
+
+### Input
+
+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<HTMLInputElement | HTMLTextAreaElement>) => void;
+  noRadius?: boolean;
+  borderNone?: boolean;
+  forFilter?: boolean;
+  forModal?: boolean;
+  forSlider?: boolean;
+};
+
+// Exemplos
+<Input 
+  label="Email" 
+  type="email" 
+  placeholder="Digite seu email" 
+  error={true} 
+  message="Email inválido" 
+/>
+
+<Input 
+  label="Senha" 
+  type="password" 
+  size="large" 
+  disabled={false} 
+/>
+```
+
+### Checkbox
+
+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
+<Checkbox 
+  label="Aceito os termos" 
+  checked={true} 
+  onChange={(checked) => console.log(checked)} 
+/>
+
+<Checkbox 
+  label="Notificações" 
+  size="large" 
+  disabled={false} 
+/>
+```
+
+### Modal
+
+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
+<Modal 
+  open={isOpen} 
+  label="Confirmação" 
+  onClose={() => setIsOpen(false)}
+  buttons={[
+    { label: "Cancelar", kind: "secondary", onClick: () => setIsOpen(false) },
+    { label: "Confirmar", kind: "primary", onClick: handleConfirm }
+  ]}
+>
+  <p>Tem certeza que deseja excluir este item?</p>
+</Modal>
+```
+
+### TableColumnDrag
+
+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<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChangeMoney?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => 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<HTMLInputElement>) => 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<HTMLInputElement | HTMLTextAreaElement>) => 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' }
+];
+
+<TableColumnDrag
+  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') }
+  ]}
+/>
+```
+
+### Dropdown
+
+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
+<Dropdown
+  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"
+/>
+```
+
+### TabPane
+
+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
+<TabPane
+  label="Perfil"
+  isActive={activeTab === 'profile'}
+  onClick={() => setActiveTab('profile')}
+  icon="👤"
+  bordercolor="#007bff"
+>
+  <div>Conteúdo da aba Perfil</div>
+</TabPane>
+```
+
+### Search
+
+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<HTMLInputElement>) => void;
+  borderTable?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+};
+
+// Exemplo
+<Search
+  placeholder="Digite para pesquisar..."
+  onChange={(e) => setSearchTerm(e.target.value)}
+  size="medium"
+  borderTable
+/>
+```
+
+### Notification
+
+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
+<Notification
+  title="Sucesso!"
+  message="Operação realizada com sucesso."
+  kind="success"
+  position="top-right"
+  duration={5000}
+/>
+```
+
+### Tooltip
+
+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
+<Tooltip label="Informação adicional" align="top" size="small">
+  <Button label="Hover me" />
+</Tooltip>
+```
+
+### Loading
+
+Indicador de carregamento.
+
+```tsx
+import { Loading } from 'prosperita-dumbo-react';
+
+// Props
+type LoadingProps = {
+  size?: "small" | "medium" | "large";
+  kind?: "spinner" | "skeleton";
+  text?: string;
+};
+
+// Exemplo
+<Loading size="medium" text="Carregando..." />
+```
+
+### InlineLoading
+
+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
+<InlineLoading size="small" text="Salvando..." />
+```
+
+### ProgressIndicator
+
+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
+<ProgressIndicator current={75} total={100} showPercentage />
+```
+
+### Slider
+
+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
+<Slider
+  min={0}
+  max={100}
+  value={50}
+  onChange={(value) => console.log(value)}
+  step={1}
+  showValue
+  label="Volume"
+/>
+```
+
+### Toggle
+
+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
+<Toggle
+  checked={isEnabled}
+  onChange={setIsEnabled}
+  label="Notificações"
+  size="medium"
+/>
+```
+
+### Radio
+
+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
+<Radio
+  name="gender"
+  value="male"
+  checked={gender === 'male'}
+  onChange={setGender}
+  label="Masculino"
+/>
+```
+
+### Tag
+
+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
+<Tag
+  label="React"
+  kind="primary"
+  size="medium"
+  onRemove={() => console.log('Removido')}
+/>
+```
+
+### Tile
+
+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
+<Tile
+  kind="selectable"
+  selected={isSelected}
+  onClick={() => setIsSelected(!isSelected)}
+>
+  <h3>Título do Tile</h3>
+  <p>Conteúdo do tile</p>
+</Tile>
+```
+
+### Breadcrumb
+
+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
+<Breadcrumb
+  items={[
+    { label: 'Home', href: '/' },
+    { label: 'Produtos', href: '/products' },
+    { label: 'Detalhes' }
+  ]}
+  separator="/"
+/>
+```
+
+### FileUploader
+
+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
+<FileUploader
+  onUpload={(files) => console.log(files)}
+  accept=".pdf,.doc,.docx"
+  multiple={true}
+  maxSize={5242880}
+  label="Upload de documentos"
+  description="Arraste arquivos ou clique para selecionar"
+/>
+```
+
+### ContentSwitcher
+
+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
+<ContentSwitcher
+  items={[
+    { id: 'tab1', label: 'Aba 1', content: <div>Conteúdo 1</div> },
+    { id: 'tab2', label: 'Aba 2', content: <div>Conteúdo 2</div> }
+  ]}
+  activeId={activeTab}
+  onChange={setActiveTab}
+/>
+```
+
+### MenuButton
+
+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
+<MenuButton
+  label="Ações"
+  icon="⚙️"
+  items={[
+    { label: 'Editar', onClick: () => console.log('Editar') },
+    { label: 'Excluir', onClick: () => console.log('Excluir') }
+  ]}
+/>
+```
+
+### Margin
+
+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
+<Margin top={20} bottom={10}>
+  <Button label="Botão com margem" />
+</Margin>
+```
+
+### InputCurrency
+
+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<HTMLInputElement | HTMLTextAreaElement>) => void;
+};
+
+// Exemplo
+<InputCurrency
+  label="Valor"
+  SymbolCipher="R$"
+  placeholder="0,00"
+  onChange={(e) => console.log(e.target.value)}
+/>
+```
+
+### InputCurrencyFluid
+
+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<HTMLInputElement | HTMLTextAreaElement>) => void;
+};
+
+// Exemplo
+<InputCurrencyFluid
+  SymbolCipher="R$"
+  placeholder="0,00"
+  onChange={(e) => console.log(e.target.value)}
+/>
+```
+
+### InputFluid
+
+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<HTMLInputElement>) => 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
+<InputFluid
+  label="Nome"
+  placeholder="Digite seu nome"
+  loading={false}
+  tootipLabel={{
+    align: "top",
+    label: "Informação adicional",
+    size: "small"
+  }}
+/>
+```
+
+### InputSelect
+
+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
+<InputSelect
+  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)}
+/>
+```
+
+### Tab
+
+Container para sistema de abas.
+
+```tsx
+import { Tab } from 'prosperita-dumbo-react';
+
+// Props
+type TabProps = {
+  children: ReactNode;
+  width: string;
+  bottom?: boolean;
+};
+
+// Exemplo
+<Tab width="100%" bottom={false}>
+  <TabPane label="Aba 1" isActive={true} onClick={() => {}} />
+  <TabPane label="Aba 2" isActive={false} onClick={() => {}} />
+</Tab>
+```
+
+### Table
+
+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<HTMLInputElement | HTMLTextAreaElement>) => 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
+<Table
+  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}
+/>
+```
+
+### TableBasic
+
+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
+<TableBasic
+  columnTitles={['Nome', 'Email']}
+  rowData={[
+    { name: 'João', email: 'joao@email.com' },
+    { name: 'Maria', email: 'maria@email.com' }
+  ]}
+  pageSizes={[10, 25, 50]}
+  search={true}
+/>
+```
+
+### TableExpandable
+
+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<HTMLInputElement>) => 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
+<TableExpandable
+  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}
+/>
+```
+
+### TableExpandableDrag
+
+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<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChangeMoney?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => 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<HTMLInputElement>) => 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<HTMLInputElement | HTMLTextAreaElement>) => void;
+  };
+};
+
+// Exemplo
+<TableExpandableDrag
+  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']}
+/>
+```
+
+### TableBatchActions
+
+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
+<TableBatchActions
+  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}
+/>
+```
+
+### CodeSnippet
+
+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
+<CodeSnippet
+  language="javascript"
+  code="console.log('Hello World!');"
+  background="#f4f4f4"
+  color="#161616"
+/>
+```
+
+### CodeSnippetInline
+
+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
+<CodeSnippetInline
+  code={`function hello() {
+  console.log('Hello World!');
+}`}
+  language="javascript"
+  expanded={true}
+  numbers={true}
+  copy={true}
+/>
+```
+
+### DuoList
+
+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
+<DuoList
+  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"
+/>
+```
+
+### UINavigationHeader
+
+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
+<UINavigationHeader
+  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')}
+/>
+```
+
+### UISHELLHeader
+
+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
+<UISHELLHeader
+  label="Menu"
+  options={[
+    { label: 'Opção 1', onClick: () => console.log('Opção 1') },
+    { label: 'Opção 2', onClick: () => console.log('Opção 2') }
+  ]}
+/>
+```
+
+### UIHeaderNav
+
+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
+<UIHeaderNav
+  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 <repository>
+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.