npm package: @mhome/ui
Description: mHome UI Component Library
Author: mhome.ai
Latest version: 0.1.12

# @mhome/ui

A comprehensive React UI component library built with Tailwind CSS, providing a set of reusable and customizable components for building modern web applications.

## Installation

### Option 1: Install from Git Repository (Recommended for Development)

```bash
npm install github:your-username/pallas-cat-examples#packages/ui
```

Or add to your `package.json`:

```json
{
  "dependencies": {
    "@mhome/ui": "github:your-username/pallas-cat-examples#packages/ui"
  }
}
```

You can also specify a specific branch or tag:

```bash
npm install github:your-username/pallas-cat-examples#main:packages/ui
```

### Option 2: Install from NPM (When Published)

```bash
npm install @mhome/ui
```

## Quick Start

### 1. Import CSS

Import the component styles in your main entry file (e.g., `index.js` or `App.jsx`):

```javascript
import '@mhome/ui/dist/index.css';
```

### 2. Import and Use Components

```javascript
import { Button, Menu, MenuItem, MenuItemText } from '@mhome/ui';

function App() {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  return (
    <div>
      <Button onClick={(e) => setAnchorEl(e.currentTarget)}>
        Open Menu
      </Button>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={() => setAnchorEl(null)}
      >
        <MenuItem onClick={() => setAnchorEl(null)}>
          <MenuItemText>Profile</MenuItemText>
        </MenuItem>
        <MenuItem onClick={() => setAnchorEl(null)}>
          <MenuItemText>Settings</MenuItemText>
        </MenuItem>
      </Menu>
    </div>
  );
}
```

## Requirements

- **React** ^18.2.0
- **React DOM** ^18.2.0
- **Tailwind CSS** - Must be configured in your project

## Available Components

### Layout Components
- `Box` - Container component with flexible styling
- `Container` - Responsive container component
- `Stack` - Flexbox layout component
- `Grid` - Grid layout system
- `Paper` - Surface component with elevation
- `Divider` - Separator component

### Navigation Components
- `Menu`, `MenuItem`, `MenuItemIcon`, `MenuItemText` - Menu system
- `Tabs`, `Tab` - Tab navigation
- `Drawer` - Side navigation drawer
- `AppBar` - Application bar
- `Toolbar` - Toolbar component

### Form Components
- `Button` - Button component with variants
- `IconButton` - Icon-only button
- `TextField` - Text input field
- `Select`, `FormControl`, `SelectMenuItem` - Select dropdown
- `Checkbox` - Checkbox input
- `Radio`, `RadioGroup` - Radio button group
- `Slider` - Range slider
- `DatePicker` - Date picker component
- `Autocomplete` - Autocomplete input
- `FormControlLabel` - Form control with label
- `FormLabel` - Form label
- `FormGroup` - Form control group
- `InputLabel` - Input label
- `InputAdornment` - Input adornment (icons, text)

### Data Display Components
- `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`, `CardActionArea` - Card components
- `List`, `ListItem`, `ListItemIcon`, `ListItemText`, `ListItemButton`, `ListItemAvatar` - List components
- `Table`, `TableContainer`, `TableHead`, `TableBody`, `TableRow`, `TableCell` - Table components
- `Chip` - Chip component
- `Avatar` - Avatar component
- `Typography` - Typography component
- `Alert` - Alert/notification component

### Feedback Components
- `Dialog`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogActions`, `DialogContentText` - Dialog components
- `Tooltip` - Tooltip component
- `Collapse` - Collapsible content

### Other Components
- `Accordion`, `AccordionSummary`, `AccordionDetails` - Accordion component
- `ToggleButton`, `ToggleButtonGroup` - Toggle button components

## Styling

This component library uses Tailwind CSS and CSS variables for theming. Make sure your project has Tailwind CSS configured and includes the CSS variables defined in `src/index.css`.

### Required CSS Variables

The components rely on CSS variables for theming. Ensure your project includes these variables (they are defined in `src/index.css`):

```css
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  /* ... and more */
}
```

## Development

### Building the Package

```bash
cd packages/ui
npm run build
```

This will generate the `dist` directory with:
- `index.cjs.js` - CommonJS format
- `index.esm.js` - ES Module format
- `index.css` - Compiled styles

### Project Structure

```
packages/ui/
├── src/
│   ├── components/     # Component source files
│   ├── lib/            # Utility functions
│   ├── index.js        # Main entry point
│   └── index.css       # CSS variables and Tailwind imports
├── dist/               # Built files (generated)
├── package.json
└── README.md
```

## Examples

Visit the Storybook documentation for interactive examples and component API documentation.

## License

MIT

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.