Usage Guide

import { Button, Input, Card } from '@yourproject/components';

function MyComponent() {
  return (
    <Card>
      <Input placeholder="Enter your name" />
      <Button>Submit</Button>
    </Card>
  );
}

import { Button } from '@yourproject/components';
import type { ButtonProps } from '@yourproject/components';

function Example() {
  return (
    <Button 
      variant="primary"
      size="lg"
      disabled={false}
      onClick={() => console.log('Clicked!')}
    >
      Click Me
    </Button>
  );
}

:root {
  --primary-color: #0066cc;
  --primary-hover: #0052a3;
  --border-radius: 8px;
  --font-family: 'Inter', sans-serif;
}

import { Button } from '@yourproject/components';
import styles from './MyComponent.module.css';

function Example() {
  return (
    <Button className={styles.customButton}>
      Custom Styled Button
    </Button>
  );
}

<Button style={{ marginTop: '1rem', width: '100%' }}>
  Full Width Button
</Button>

import { Card, Input, Button, Grid } from '@yourproject/components';

function LoginForm() {
  return (
    <Card>
      <Grid gap="md">
        <Input type="email" placeholder="Email" />
        <Input type="password" placeholder="Password" />
        <Button variant="primary" fullWidth>
          Sign In
        </Button>
      </Grid>
    </Card>
  );
}

import type { 
  ButtonProps, 
  InputProps, 
  CardProps 
} from '@yourproject/components';

interface FormProps {
  onSubmit: (data: FormData) => void;
  submitButton?: ButtonProps;
}

function Form({ onSubmit, submitButton }: FormProps) {
  return (
    <form onSubmit={onSubmit}>
      <Button {...submitButton}>Submit</Button>
    </form>
  );
}