@roit/lovable-library

Biblioteca de Design System ROIT para projetos Lovable com React e Tailwind CSS.

🎨 Características

• Cores ROIT: Paleta de cores oficial da ROIT
• Componentes React: Componentes pré-estilizados e reutilizáveis
• Hooks Utilitários: Hooks para gerenciamento de estilos
• Classes CSS: Classes utilitárias para estilização rápida
• TypeScript: Totalmente tipado para melhor experiência de desenvolvimento

📦 Instalação

npm install @roit/lovable-library

🚀 Uso Básico

1. Importe os estilos no seu projeto

// No seu arquivo principal (main.tsx ou App.tsx)
import '@roit/lovable-library/dist/index.css';

2. Configure o Tailwind CSS

Adicione as cores ROIT ao seu tailwind.config.ts:

export default {
  theme: {
    extend: {
      colors: {
        'roit-blue': 'hsl(210, 57%, 16%)',
        'roit-navy': 'hsl(210, 65%, 11%)',
        'roit-lightblue': 'hsl(203, 47%, 44%)',
        'roit-teal': 'hsl(175, 42%, 51%)',
        'roit-gold': 'hsl(37, 80%, 70%)',
        'roit-orange': 'hsl(28, 95%, 55%)',
        'roit-red': 'hsl(4, 77%, 62%)',
        'roit-green': 'hsl(142, 69%, 58%)',
      }
    }
  }
}

3. Use os componentes

import { RoitButton, RoitToggleGroup, useRoitStyles } from '@roit/lovable-library';

function MyComponent() {
  const { getButtonStyles } = useRoitStyles();
  
  const toggleItems = [
    { value: 'option1', label: 'Opção 1' },
    { value: 'option2', label: 'Opção 2' },
  ];

  return (
    <div>
      <RoitButton variant="gold" size="md">
        Botão ROIT
      </RoitButton>
      
      <RoitToggleGroup 
        items={toggleItems}
        onValueChange={(value) => console.log(value)}
      />
    </div>
  );
}

🎨 Componentes Disponíveis

RoitButton

Botão estilizado com as cores ROIT.

<RoitButton variant="gold" size="lg">
  Clique aqui
</RoitButton>

Props:

• variant: "gold" | "goldOutline" | "blue" | "teal" | "orange"
• size: "sm" | "md" | "lg"

RoitToggleGroup

Grupo de botões toggle com estilo ROIT.

<RoitToggleGroup 
  items={[
    { value: 'tab1', label: 'Tab 1' },
    { value: 'tab2', label: 'Tab 2' }
  ]}
  onValueChange={(value) => console.log(value)}
/>

🪝 Hooks

useRoitStyles

Hook para gerenciamento de estilos condicionais.

const { getButtonStyles, getToggleStyles } = useRoitStyles({
  defaultSelected: 'item1'
});

🎨 Classes CSS Utilitárias

Botões

.btn-roit          /* Botão azul principal */
.btn-roit-gold     /* Botão dourado */
.btn-roit-orange   /* Botão laranja */
.btn-roit-teal     /* Botão verde-azulado */

Cards

.card-roit         /* Card com borda dourada */
.gradient-bg       /* Fundo com gradiente ROIT */

Navegação

.nav-link          /* Link de navegação */
.nav-link-active   /* Link ativo */

Tags e Status

.tag               /* Tag básica */
.tag-gold          /* Tag dourada */
.status-success    /* Status de sucesso */
.status-pending    /* Status pendente */
.status-error      /* Status de erro */

🎨 Cores ROIT

A biblioteca inclui as seguintes cores:

• roit-blue: #0E2F44 (Azul principal)
• roit-navy: #0A192F (Azul marinho)
• roit-lightblue: #3B7EA5 (Azul claro)
• roit-teal: #4FB7B2 (Verde-azulado)
• roit-gold: #DBA958 (Dourado)
• roit-orange: #F7971E (Laranja)
• roit-red: #E55C57 (Vermelho)
• roit-green: #5FCE88 (Verde)

📄 Licença

MIT © ROIT

🤝 Contribuição

Para contribuir com a biblioteca, entre em contato com a equipe ROIT.