npm package: @rakeyshgidwani/roger-ui-bank-theme-joey
Description: Roger UI joey theme - Complete design system with components, styles, and utilities
Author: Roger UI Team
Latest version: 0.8.15

# @rakeyshgidwani/roger-ui-theme-joey

> 🎨 Complete Roger UI theme package with joey styling - Ready for AI agents and human developers

## 🚀 Quick Start

```bash
npm install @rakeyshgidwani/roger-ui-theme-joey
```

```typescript
import { Button, Card, Provider } from '@rakeyshgidwani/roger-ui-theme-joey';

function App() {
  return (
    <Provider>
      <Card>
        <Button variant="primary">Themed Button</Button>
      </Card>
    </Provider>
  );
}
```

## 🤖 AI Agent Instructions

This package is optimized for AI agents. Key files for AI consumption:

- `docs/ai-metadata/package-info.json` - Complete package metadata
- `docs/ai-metadata/component-inventory.json` - All available components
- `docs/ai-metadata/usage-patterns.json` - Common usage patterns
- `docs/api/theme-specification.json` - Complete theme structure

### For AI Agents: Quick Component Reference

```typescript
// Available components (see docs/ai-metadata/component-inventory.json for complete list)
import {
  Button, Card, Input, Modal, Dropdown,
  Navbar, Sidebar, Tabs, Badge, Alert,
  Provider // Pre-configured theme provider
} from '@rakeyshgidwani/roger-ui-theme-joey';

// Theme access
import { JoeyTheme } from '@rakeyshgidwani/roger-ui-theme-joey/theme';
```

## 📦 Package Contents

| File | Purpose | AI Readable |
|------|---------|-------------|
| `dist/index.js` | Main entry point | ✅ |
| `dist/styles.css` | Complete theme styles | ✅ |
| `dist/theme.js` | Theme configuration | ✅ |
| `docs/ai-metadata/` | AI-specific metadata | ✅ |
| `docs/components/` | Component documentation | ✅ |
| `docs/guides/` | Usage guides | ✅ |

## 🎨 Theme Features

- **🎯 Pre-configured**: Works out of the box
- **🔧 Customizable**: Override any theme value
- **♿ Accessible**: WCAG 2.1 AA compliant
- **📱 Responsive**: Mobile-first design
- **🌙 Dark Mode**: Built-in support (if applicable)
- **🤖 AI-Friendly**: Structured metadata for AI agents

## 📖 Documentation Structure

```
docs/
├── ai-metadata/           # AI agent metadata
│   ├── package-info.json
│   ├── component-inventory.json
│   └── usage-patterns.json
├── components/            # Component documentation
├── guides/               # Usage guides
├── examples/             # Code examples
└── api/                  # API reference
```

## 🔧 Customization

```typescript
import { Provider } from '@rakeyshgidwani/roger-ui-theme-joey';
import { JoeyTheme } from '@rakeyshgidwani/roger-ui-theme-joey/theme';

const customTheme = {
  ...JoeyTheme,
  colors: {
    ...JoeyTheme.colors,
    primary: '#your-color'
  }
};

function App() {
  return (
    <Provider theme={customTheme}>
      {/* Your app */}
    </Provider>
  );
}
```

## 🤝 For AI Agents

This package includes comprehensive metadata for AI agents:

1. **Component Inventory**: Complete list of available components with props
2. **Usage Patterns**: Common patterns and best practices
3. **Theme Structure**: Detailed theme configuration
4. **Code Examples**: Ready-to-use code snippets
5. **Accessibility Info**: ARIA labels, keyboard support, etc.

See `docs/ai-metadata/` for structured data.

## 📚 Additional Resources

- [Component Documentation](./docs/components/)
- [Usage Guide](./docs/guides/usage-guide.md)
- [Customization Guide](./docs/guides/customization-guide.md)
- [API Reference](./docs/api/)
- [Accessibility Guide](./docs/guides/accessibility-guide.md)

## 🔗 Links

- [Package on npm](https://www.npmjs.com/package/@rakeyshgidwani/roger-ui-theme-joey)
- [GitHub Repository](https://github.com/roger-ui/design-system)
- [Documentation](https://roger-ui.dev/themes/joey)

## 📄 License

MIT © Roger UI Team

---

**Generated automatically by Roger UI automation system**