loce-ds

Biblioteca de componentes React da Loce. Plug and play.

43 componentes prontos, dark mode, whitelabel, componentes de AI.

Setup

1. Instalar

npm install loce-ds

Peer dependencies: React >= 18, Tailwind CSS >= 4, lucide-react >= 0.400.0

2. Importar no CSS global

@import "tailwindcss";
@import "loce-ds/styles.css";

Pronto. Tokens, cores, animacoes e classes AI incluidos.

3. Usar

import { Button, Input, Select, Text, Badge, Card } from "loce-ds";

Customizar cores (opcional)

Cada projeto pode ter sua cor de brand:

@import "tailwindcss";
@import "loce-ds/styles.css";

@theme {
  --color-loce: #sua-cor-primaria;
  --color-loceSec: #sua-cor-secundaria;
}

Componentes

Formularios (12)

| Componente | Descricao | Props principais | |---|---|---| | Button | Botao com variantes | variant (primary, secondary, destructive, ghost, gradient, upgrade, link), size, loading | | Input | Input com label | label, hint, error, loading | | Select | Dropdown customizado | options, label, error, loading. onChange recebe string | | Textarea | Auto-resize | label, error, onSubmit. onChange recebe string | | Checkbox | Com label | label, description | | Switch | Radix Switch | label, description | | SearchInput | Input com busca | onClear, loading | | TimeInput | Input time | label | | DatePicker | Calendar dropdown | label, value (Date), onChange, clearable, minDate, maxDate | | MultiSelect | Multi-select com avatars | options, value (string[]), onChange, addLabel | | ExpandableTextarea | Expande em modal | label, value, onChange, maxLength, modalTitle | | ImageUpload | Drag & drop upload | label, value, onChange, uploadFn (obrigatorio), aspect |

Layout (4)

| Componente | Descricao | Props principais | |---|---|---| | Card | Container | Subcomponentes: CardHeader, CardTitle, CardDescription, CardContent, CardFooter | | Separator | Divisor | label, orientation | | ScrollFade | Fade no scroll | position (top/bottom/both), fadeHeight | | Tabs | Navegacao por abas | tabs (key, label, icon, count), value, onChange, size |

Data display (14)

| Componente | Descricao | Props principais | |---|---|---| | Text | Tipografia | variant (supertitle, title, subtitle, default, description, subdescription, label, code), as | | Badge | Badge de status | variant (default, secondary, destructive, success, warning, info, outline) | | Avatar | Avatar com fallback | src, size (px), fallback, name, offline | | StatusDot | Indicador de status | status (online, offline, busy, away), pulse | | ColorDot | Dot colorido | color, label, size | | LabelBadge | Badge colorido | name, color, onRemove, size | | MetricCard | Card de metrica | title, value, icon, trend, progress, accent, loading | | Timeline | Linha do tempo | items (icon, title, description, time, color) | | DataTable | Tabela com sort | columns, data, actions, mainActions, onRowClick | | PaginationBar | Paginacao | page, totalPages, total, onPageChange | | TextCopy | Texto com copy | text, variant | | AudioPlayer | Player de audio | src, variant (default/ai), speed | | SelectCard | Cards selecionaveis | options, value, onChange, columns, layout | | ImageWithZoom | Zoom em modal | src, width, height |

Feedback (4)

| Componente | Descricao | Props principais | |---|---|---| | Skeleton / SkeletonText / SkeletonCard | Loading placeholders | — | | EmptyState | Estado vazio | variant (default, minimal, horizontal), text, description, icon, action | | TypingIndicator | 3 pontos animados | — | | Tooltip | Tooltip | content, position, wrap |

Modais e overlays (4)

| Componente | Descricao | Props principais | |---|---|---| | ModalDelete | Confirmacao de delete | open, onClose, onConfirm, isLoading. 3 modos: simple, checkbox, input | | ModalConfirm | Confirmacao generica | title, description, variant (primary/destructive) | | SheetEntity | Sheet lateral | title, description, onSubmit, isLoading | | DropdownActions | Menu de acoes | actions, trigger, align |

AI (5)

| Componente | Descricao | Props principais | |---|---|---| | AIIcon | Icone sparkles (3 estrelas) | Use no lugar de Lucide Sparkles | | AIButton | Botao com borda rainbow | loading, size | | AICard | Card para conteudo IA | title, glow, onRefresh, refreshing | | SparklesText | Texto com sparkles | sparkleCount | | TextType | Efeito de digitacao | text, typingSpeed, loop |

Primitives

Para customizacao avancada, tambem exportamos:

• Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogTrigger, DialogClose
• DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator
• Table, TableHeader, TableBody, TableHead, TableRow, TableCell
• Calendar

CSS classes para AI

• .ai-rainbow-btn — borda rainbow animada
• .ai-rainbow-btn-bg — background sutil gradient
• .ai-card — gradient + border com cor brand
• .ai-gradient-text — texto com gradient animado
• .improve-loading — borda conica rotativa (loading IA)
• .ai-border-subtle — borda conica suave

Setup para Claude Code / AI assistants

Para que o Claude Code saiba usar o DS corretamente no seu projeto, copie o arquivo de instrucoes:

# Criar pasta de docs do Claude (se nao existir)
mkdir -p .claude/docs

# Copiar instrucoes do DS
cp node_modules/loce-ds/CLAUDE.consumer.md .claude/docs/loce-ds.md

Isso faz o Claude Code:

• Usar componentes do DS em vez de criar novos
• Seguir as regras visuais (radius, fonts, cores)
• Usar os componentes de AI corretamente
• Respeitar as convencoes de dark mode e whitelabel

Licenca

UNLICENSED — uso interno Loce.