Design System

Design System baseado em Chakra UI.

Instalação

npm install @luizmauro/design-system

Uso

import { ChakraProvider, Button, theme } from '@luizmauro/design-system';

function App() {
  return (
    <ChakraProvider theme={theme}>
      <Button>Meu Botão</Button>
    </ChakraProvider>
  );
}

Componentes

• Button - Botões com variáveis solid, outline e ghost
• Input - Campos de entrada com diferentes estilos
• Card - Cartões com sombra ou borda
• Container - Container responsivo para layout
• Row - Sistema de linhas para grid
• Col - Sistema de colunas responsivo (12 colunas)
• Toast - Alertas e notificações
• Steps - Indicador de progresso em etapas
• Select - Seletor dropdown customizado
• RadioGroup - Grupo de opções de rádio
• Modal - Janelas modais para interações
• Drawer - Painéis deslizantes (lateral/bottom)
• CodeInput - Campo para entrada de códigos
• Breadcrumb - Navegação hierárquica
• Accordion - Conteúdo expansível
• InfoCard - Cartões informativos
• LinkButton - Botões com estilo de link
• (mais componentes em breve)

Features

• ✨ Baseado no Chakra UI
• 🎨 Tema customizável
• 📝 TypeScript completo
• 🚀 Animações suaves
• 🎨 Design consistente