@simpledotstudio/simple-banner/README.md

SimpleBanner - A reusable React component

# SimpleBanner

A reusable banner component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-banner
```

## Usage

```tsx
import { SimpleBanner } from '@simpledotstudio/simple-banner';

function App() {
  return (
    <SimpleBanner variant="primary" size="medium">
      SimpleBanner Content
    </SimpleBanner>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Component children |
| `className` | `string` | `''` | Additional CSS class name |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
| `disabled` | `boolean` | `false` | Disabled state |

## Examples

### Variants

```tsx
<SimpleBanner variant="default">Default</SimpleBanner>
<SimpleBanner variant="primary">Primary</SimpleBanner>
<SimpleBanner variant="secondary">Secondary</SimpleBanner>
```

### Sizes

```tsx
<SimpleBanner size="small">Small</SimpleBanner>
<SimpleBanner size="medium">Medium</SimpleBanner>
<SimpleBanner size="large">Large</SimpleBanner>
```

### States

```tsx
<SimpleBanner disabled>Disabled</SimpleBanner>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To build the component:

```bash
npm run build
```