import { ThemeProvider } from '@your-org/react-theme-system';
import { Button, Card, Alert } from '@your-org/react-theme-system';

function App() {
  return (
    <ThemeProvider>
      <div className="app">
        <Button variant="gradient-sunset" size="lg">
          Get Started
        </Button>
        
        <Card variant="elevated" header="Welcome">
          <p>This is a beautiful card with elevation.</p>
        </Card>
        
        <Alert variant="success" title="Success!">
          Your action was completed successfully.
        </Alert>
      </div>
    </ThemeProvider>
  );
}

import { Button } from '@your-org/react-theme-system';

// Basic variants
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="success">Success Button</Button>

// Gradient variants
<Button variant="gradient-sunset">Sunset Gradient</Button>
<Button variant="gradient-ocean">Ocean Gradient</Button>
<Button variant="gradient-forest">Forest Gradient</Button>

// Sizes and states
<Button size="sm">Small Button</Button>
<Button size="lg">Large Button</Button>
<Button isDisabled>Disabled Button</Button>
<Button isLoading>Loading Button</Button>

// Color schemes
<Button colorScheme="outline">Outline Button</Button>
<Button colorScheme="ghost">Ghost Button</Button>

import { Card } from '@your-org/react-theme-system';

// Basic variants
<Card variant="elevated" header="Card Title" footer="Card Footer">
  <p>Card content goes here.</p>
</Card>

// With images
<Card 
  variant="elevated" 
  header="Product Card"
  image={{
    src: "https://example.com/image.jpg",
    alt: "Product image",
    height: 200
  }}
>
  <h4>Product Name</h4>
  <p>Product description.</p>
</Card>

// Gradient variants
<Card variant="gradient-sunset" header="Gradient Card">
  <p>Beautiful gradient background.</p>
</Card>

import { Alert } from '@your-org/react-theme-system';

// Basic alerts
<Alert variant="success" title="Success!">
  Your action was completed successfully.
</Alert>

<Alert variant="warning" title="Warning">
  Please review your input before proceeding.
</Alert>

<Alert variant="error" title="Error">
  Something went wrong. Please try again.
</Alert>

// Auto-dismiss
<Alert 
  variant="info" 
  autoDismiss 
  dismissDelay={5000}
  onDismiss={() => console.log('Alert dismissed')}
>
  This alert will dismiss automatically.
</Alert>

import { Modal } from '@your-org/react-theme-system';
import { useState } from 'react';

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Open Modal
      </Button>
      
      <Modal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
        title="Example Modal"
        size="lg"
      >
        <p>Modal content goes here.</p>
        <Button onClick={() => setIsOpen(false)}>
          Close
        </Button>
      </Modal>
    </>
  );
}

import { Form, Input } from '@your-org/react-theme-system';

function FormExample() {
  const handleSubmit = (data: any) => {
    console.log('Form submitted:', data);
  };

  return (
    <Form onSubmit={handleSubmit} variant="elevated">
      <div className="form__field-group">
        <label className="form__label">Name</label>
        <Input 
          type="text" 
          name="name" 
          placeholder="Enter your name"
        />
      </div>
      
      <div className="form__field-group">
        <label className="form__label">Email</label>
        <Input 
          type="email" 
          name="email" 
          placeholder="Enter your email"
        />
      </div>
    </Form>
  );
}

import { Navbar, Sidebar } from '@your-org/react-theme-system';

// Navbar
<Navbar brand={<span>My App</span>} variant="primary">
  <a href="/" className="nav-item">Home</a>
  <a href="/about" className="nav-item">About</a>
  <a href="/contact" className="nav-item">Contact</a>
</Navbar>

// Sidebar
const [isSidebarOpen, setIsSidebarOpen] = useState(false);

<Sidebar 
  isOpen={isSidebarOpen} 
  onClose={() => setIsSidebarOpen(false)}
  direction="left"
>
  <h3>Sidebar Content</h3>
  <ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
  </ul>
</Sidebar>

import { Icon } from '@your-org/react-theme-system';

// Basic usage
<Icon name="heart" size="lg" />

// Custom size and color
<Icon name="star" size={24} color="var(--color-primary-500)" />

// Spinning animation
<Icon name="spinner" size="lg" className="icon--spinning" />

// Available icons: success, warning, error, info, search, 
// hamburger, close, login, chevronDown, chevronUp, 
// chevronLeft, chevronRight, check, plus, minus, play, 
// pause, volume, settings, user, home, mail, phone, 
// heart, star, eye, eyeOff, download, upload, edit, 
// trash, copy, link, externalLink, calendar, clock, 
// mapPin, tag, filter, refresh, spinner, menu, palette,
// components, responsive, book, check-circle, lock, circle

import { useTheme } from '@your-org/react-theme-system';

function ThemeToggle() {
  const { theme, toggleTheme, setSystemTheme } = useTheme();

  return (
    <div>
      <p>Current theme: {theme}</p>
      <Button onClick={toggleTheme}>Toggle Theme</Button>
      <Button onClick={setSystemTheme}>Use System Theme</Button>
    </div>
  );
}

import { ThemeProvider } from '@your-org/react-theme-system';

function App() {
  return (
    <ThemeProvider>
      {/* Your app components */}
    </ThemeProvider>
  );
}