# @campminder/ui

A comprehensive UI component library for CampMinder applications, built with React and Chakra UI.

## 📦 Installation

```bash
npm install @campminder/ui
# or
yarn add @campminder/ui
# or
pnpm add @campminder/ui
```

## 🚀 Quick Start

### React Applications

```jsx
import React from 'react'
import { UIProvider, Button, Chip } from '@campminder/ui'
import { AddIcon, SearchIcon } from '@campminder/ui'

function App() {
  return (
    <UIProvider>
      <div>
        <h1>My CampMinder App</h1>
        
        <Button colorScheme="blue" onClick={() => alert('Hello!')}>
          <AddIcon boxSize={4} />
          Add Item
        </Button>
        
        <Chip colorScheme="green">
          Active
        </Chip>
      </div>
    </UIProvider>
  )
}

export default App
```

### Non-React Applications (HTML/JavaScript)

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My App</title>
  
  <!-- Load React & ReactDOM -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  
  <!-- Load CampMinder UI -->
  <script src="https://unpkg.com/@campminder/ui@latest/dist/index.umd.js"></script>
</head>
<body>
  <div id="app"></div>

  <script>
    const { UIProvider, Button } = window.CampMinderUI
    
    const App = React.createElement(UIProvider, {
      children: React.createElement(Button, {
        colorScheme: 'blue',
        children: 'Click me'
      })
    })
    
    ReactDOM.render(App, document.getElementById('app'))
  </script>
</body>
</html>
```
