import { ThemeProvider } from './context/ThemeContext';
import { ThemeToggle } from './components';

function App() {
  return (
    <ThemeProvider>
      <div>
        <ThemeToggle /> {/* Botão para alternar temas */}
        {/* Seu conteúdo */}
      </div>
    </ThemeProvider>
  );
}

import { useThemeContext } from './context/ThemeContext';

function MyComponent() {
  const { theme, resolvedTheme, setTheme, toggleTheme } = useThemeContext();

  return (
    <div>
      <p>Tema atual: {theme}</p>
      <p>Tema resolvido: {resolvedTheme}</p>
      <button onClick={toggleTheme}>Toggle</button>
      <button onClick={() => setTheme('dark')}>Usar Dark</button>
      <button onClick={() => setTheme('system')}>Usar System</button>
    </div>
  );
}

import { ThemeToggle } from './components';

function App() {
  return (
    <div>
      {/* Default (ghost, circular) */}
      <ThemeToggle />

      {/* Primary variant, large */}
      <ThemeToggle variant="primary" size="lg" />

      {/* Square shape */}
      <ThemeToggle shape="square" />

      {/* Fixed position (comum em headers) */}
      <div className="fixed top-6 right-6">
        <ThemeToggle size="lg" />
      </div>

      {/* In toolbar */}
      <header className="flex justify-between">
        <h1>My App</h1>
        <ThemeToggle variant="ghost" size="md" />
      </header>
    </div>
  );
}

import { Button } from './components';
import { Sparkles, Rocket, Brain, Trash2, Download, ArrowRight } from 'lucide-react';

function App() {
  return (
    <div>
      {/* ========== Variantes Semânticas ========== */}

      {/* Botão primário */}
      <Button variant="primary" label="Save Changes" />

      {/* Botão de perigo */}
      <Button variant="danger" leftIcon={<Trash2 size={18} />} label="Delete Account" />

      {/* Botão AI/ML */}
      <Button variant="neural" leftIcon={<Brain size={18} />} label="Train Model" />

      {/* Botão outline */}
      <Button variant="outline" label="Cancel" />

      {/* Botão ghost */}
      <Button variant="ghost" label="Learn More" />

      {/* ========== Com Ícones ========== */}

      {/* Ícone à esquerda */}
      <Button variant="primary" leftIcon={<Download size={18} />} label="Download" />

      {/* Ícone à direita */}
      <Button variant="neural" rightIcon={<ArrowRight size={18} />} label="Continue" />

      {/* Ambos os lados */}
      <Button
        variant="primary"
        leftIcon={<Rocket size={18} />}
        rightIcon={<ArrowRight size={18} />}
        label="Launch App"
      />

      {/* ========== Estados e Tamanhos ========== */}

      {/* Loading state */}
      <Button variant="primary" loading label="Processing..." />

      {/* Disabled */}
      <Button variant="secondary" disabled label="Disabled Button" />

      {/* Tamanhos diferentes */}
      <Button variant="primary" size="sm" label="Small" />
      <Button variant="primary" size="md" label="Medium" />
      <Button variant="primary" size="lg" label="Large" />
      <Button variant="primary" size="xl" label="Extra Large" />

      {/* Full width */}
      <Button
        variant="primary"
        fullWidth
        leftIcon={<Sparkles size={20} />}
        label="Full Width Button"
      />

      {/* Sem ripple effect */}
      <Button variant="primary" ripple={false} label="No Ripple" />

      {/* ========== Margem e Alinhamento ========== */}

      {/* Margens individuais */}
      <Button variant="primary" marginTop="md" marginBottom="lg" label="Margens individuais" />

      {/* Margem em todos os lados */}
      <Button variant="secondary" margin="md" label="Margem uniforme" />

      {/* Margens vertical e horizontal */}
      <Button variant="neural" marginVertical="lg" label="Margem vertical" />
      <Button variant="primary" marginHorizontal="xl" label="Margem horizontal" />

      {/* Alinhamento de conteúdo */}
      <Button variant="primary" align="left" fullWidth label="Alinhado à esquerda" />
      <Button variant="primary" align="right" fullWidth label="Alinhado à direita" />
      <Button variant="primary" align="left" label="Alinhado sem fullWidth" />
    </div>
  );
}

import { IconButton } from './components';
import { Heart, Settings, Trash2, Plus, X, Send } from 'lucide-react';

function App() {
  return (
    <div>
      {/* ========== Variantes ========== */}

      {/* Primary action */}
      <IconButton icon={<Heart size={20} />} ariaLabel="Like" variant="primary" />

      {/* Settings */}
      <IconButton icon={<Settings size={20} />} ariaLabel="Settings" variant="secondary" />

      {/* Danger action */}
      <IconButton icon={<Trash2 size={20} />} ariaLabel="Delete" variant="danger" />

      {/* AI/ML action */}
      <IconButton icon={<Send size={20} />} ariaLabel="Send to AI" variant="neural" />

      {/* ========== Formatos ========== */}

      {/* Circular (default) */}
      <IconButton icon={<Heart size={20} />} ariaLabel="Like" shape="circle" />

      {/* Square */}
      <IconButton icon={<Plus size={20} />} ariaLabel="Add" shape="square" />

      {/* ========== Tamanhos ========== */}

      <IconButton icon={<Heart size={16} />} ariaLabel="Like" size="sm" />
      <IconButton icon={<Heart size={20} />} ariaLabel="Like" size="md" />
      <IconButton icon={<Heart size={24} />} ariaLabel="Like" size="lg" />
      <IconButton icon={<Heart size={28} />} ariaLabel="Like" size="xl" />

      {/* ========== Com Tooltip ========== */}

      <IconButton
        icon={<Heart size={20} />}
        ariaLabel="Like"
        tooltip="Add to favorites"
      />

      {/* ========== Estados ========== */}

      {/* Loading */}
      <IconButton icon={<Send size={20} />} ariaLabel="Send" loading />

      {/* Disabled */}
      <IconButton icon={<Settings size={20} />} ariaLabel="Settings" disabled />

      {/* ========== Casos de Uso Comuns ========== */}

      {/* Toolbar */}
      <div className="flex gap-2">
        <IconButton icon={<Plus size={20} />} ariaLabel="Add" variant="ghost" shape="square" />
        <IconButton icon={<X size={20} />} ariaLabel="Close" variant="ghost" shape="square" />
      </div>

      {/* Floating Action Button (FAB) */}
      <IconButton icon={<Plus size={24} />} ariaLabel="Add new" variant="primary" size="lg" />
    </div>
  );
}