Zedcn Design System

Biblioteca de componentes React moderna com Tailwind CSS v4, Radix UI e design tokens do Figma.

🚀 Instalação

npm install zedcn-ds

📦 Dependências

npm install @radix-ui/react-switch @radix-ui/react-checkbox @radix-ui/react-radio-group @radix-ui/react-select classnames

🎨 Uso

import { Toggle, Button, InputField } from 'zedcn-ds';
import 'zedcn-ds/dist/zedcn.css';

function App() {
  return (
    <div>
      <Toggle 
        label="Notificações" 
        description="Receber notificações por email"
      />
      <Button variant="primary" size="medium">
        Clique aqui
      </Button>
      <InputField 
        label="Email" 
        placeholder="[email protected]"
      />
    </div>
  );
}

🎯 Componentes Disponíveis

• Toggle - Switch interativo com estados
• Button - Botões com múltiplas variantes
• InputField - Campos de texto
• InputSelect - Seletores dropdown
• Checkbox - Caixas de seleção
• RadioButtons - Botões de opção
• ListMenu - Menus de lista
• Icon - Sistema de ícones SVG

🎨 Design Tokens

O sistema usa CSS Variables do Tailwind v4:

@theme {
  --color-btn-primary-bg-normal: oklch(0.85 0.2 87.33);
  --spacing-4: 1rem;
  --radius-xl: 0.75rem;
}

📚 Documentação

• Storybook
• GitHub

🤝 Contribuição

Veja CONTRIBUTING.md para detalhes.

📄 Licença

MIT - veja LICENSE para detalhes.