@archieai/ui 1.0.0

package/README.md

@@ -0,0 +1,187 @@
+# Archie UI Components
+
+A comprehensive React component library built with TypeScript, featuring 287+ custom icons and production-ready components.
+
+[![npm version](https://img.shields.io/npm/v/@archieai/ui.svg)](https://www.npmjs.com/package/@archieai/ui)
+[![License](https://img.shields.io/npm/l/@archieai/ui.svg)](https://github.com/archieai/archie-ui)
+
+## Features
+
+✨ **287+ Custom Icons** - Beautiful SVG icons with customizable size and color
+🎨 **Modern Design System** - Built with Tailwind CSS and CSS variables
+♿ **Accessible** - Built with Radix UI primitives
+🎭 **Animated** - Smooth animations with Framer Motion
+📦 **Tree-shakeable** - Only import what you need
+🔧 **TypeScript** - Fully typed components
+🚀 **Production Ready** - Optimized and tested
+
+## Installation
+
+```bash
+npm install @archieai/ui
+# or
+pnpm add @archieai/ui
+# or
+yarn add @archieai/ui
+```
+
+### Peer Dependencies
+
+Install the required peer dependencies:
+
+```bash
+npm install react react-dom framer-motion sonner @radix-ui/react-tabs @radix-ui/react-tooltip
+```
+
+## Quick Start
+
+### 1. Import Styles
+
+In your main file (`main.tsx`, `App.tsx`, or `_app.tsx`):
+
+```tsx
+// Import the component styles
+import '@archieai/ui/styles';
+```
+
+### 2. Use Components
+
+```tsx
+import { Button, Input, Toast, showToast, ToastContainer } from '@archieai/ui';
+
+function App() {
+  return (
+    <div>
+      <Input placeholder="Enter your name" />
+
+      <Button
+        onClick={() => showToast.success('Hello!', 'Welcome to Archie UI')}
+      >
+        Click Me
+      </Button>
+
+      <ToastContainer />
+    </div>
+  );
+}
+```
+
+## Available Components
+
+### UI Components
+
+- **Button** - Primary, secondary, tertiary variants with icons
+- **Input** - Text inputs with icons and validation states
+- **Checkbox** - Styled checkboxes with labels
+- **Breadcrumbs** - Navigation breadcrumbs
+- **Tabs** - Tab navigation with badges
+- **Tag** - Labels and badges with avatars
+- **Toast** - Toast notifications with actions
+- **Tooltip** - Hover tooltips
+- **ChatInput** - Rich chat input with file uploads
+- **Navbar** - Navigation bar
+- **LoadingSpinner** - Loading indicators
+
+### Icons (287+)
+
+All icons are available as React components. Import from the dedicated icons entry for better tree-shaking:
+
+```tsx
+// Recommended: Import from /icons for better bundle splitting
+import { Home, Settings, User, Mail, Star } from '@archieai/ui/icons';
+
+// Also works: Import from main entry
+import { Plus, X, Check, ArrowUp } from '@archieai/ui';
+
+function MyComponent() {
+  return <Home size={24} color="#8C92AF" />;
+}
+```
+
+## Documentation
+
+- [Quick Start Guide](./QUICK_START.md)
+- [Comprehensive Examples](./USAGE_EXAMPLE.md)
+- [Changelog](./CHANGELOG.md)
+
+## Component Examples
+
+### Button
+
+```tsx
+import { Button } from '@archieai/ui';
+import { Star } from '@archieai/ui/icons';
+
+<Button onClick={() => console.log('Clicked!')}>Click me</Button>
+
+<Button variant="secondary" size="small" startIcon={<Star size={16} />}>
+  Favorite
+</Button>
+```
+
+### Toast Notifications
+
+```tsx
+import { showToast, ToastContainer } from '@archieai/ui';
+
+showToast.success('Success!', 'Your changes have been saved.');
+showToast.error('Error!', 'Something went wrong.');
+
+// Add ToastContainer once in your app
+<ToastContainer />;
+```
+
+### Breadcrumbs
+
+```tsx
+import { Breadcrumbs } from '@archieai/ui';
+import { Home, Settings } from '@archieai/ui/icons';
+
+const items = [
+  { label: 'Home', href: '/', icon: <Home size={16} />, onClick: () => {} },
+  { label: 'Settings', href: '/settings', icon: <Settings size={16} /> },
+  { label: 'Profile' },
+];
+
+<Breadcrumbs items={items} />;
+```
+
+## TypeScript Support
+
+All components are fully typed:
+
+```tsx
+import type { ButtonProps, InputProps, ToastProps } from '@archieai/ui';
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Tech Stack
+
+- **React** 18.3+ - UI library
+- **TypeScript** - Type safety
+- **Tailwind CSS** - Utility-first styling
+- **Framer Motion** - Animations
+- **Radix UI** - Accessible primitives
+- **Class Variance Authority** - Variant management
+
+## License
+
+UNLICENSED
+
+## Contributing
+
+This is a private package for the Archie team.
+
+## Support
+
+For issues and questions, please contact the Archie team.
+
+---
+
+Made with ❤️ by the Archie Team