@archieai/ui 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Archie AI Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,493 @@
+# 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
+- 🧩 **Production-Ready Components** - Button, Input, Checkbox, Toast, Tabs, and more
+- 🎯 **TypeScript First** - Fully typed components with excellent IntelliSense
+- 🎨 **Modern Design System** - Built with Tailwind CSS v4 and CSS variables
+- ♿ **Accessible** - Built with Radix UI primitives following WCAG guidelines
+- 🎭 **Animated** - Smooth animations powered by Framer Motion
+- 📦 **Tree-Shakeable** - Optimized bundle size with separate entry points
+- 🔧 **Class Variance Authority** - Powerful variant management system
+
+## 📦 Installation
+
+```bash
+npm install @archieai/ui
+# or
+pnpm add @archieai/ui
+# or
+yarn add @archieai/ui
+```
+
+### Required Peer Dependencies
+
+```bash
+npm install react react-dom framer-motion sonner @radix-ui/react-tabs @radix-ui/react-tooltip
+```
+
+Or if using pnpm:
+
+```bash
+pnpm add react react-dom framer-motion sonner @radix-ui/react-tabs @radix-ui/react-tooltip
+```
+
+## 🚀 Quick Start
+
+### 1. Import Styles
+
+Add the component styles to your app's entry point (`main.tsx`, `App.tsx`, or `_app.tsx`):
+
+```tsx
+import '@archieai/ui/styles';
+```
+
+### 2. Start Using Components
+
+```tsx
+import { Button, Input, showToast, ToastContainer } from '@archieai/ui';
+import { Star, Send } from '@archieai/ui/icons';
+
+function App() {
+  const handleSubmit = () => {
+    showToast.success('Success!', 'Your changes have been saved.');
+  };
+
+  return (
+    <div>
+      <Input placeholder="Enter your name" />
+
+      <Button
+        variant="primary"
+        startIcon={<Star size={16} />}
+        onClick={handleSubmit}
+      >
+        Save
+      </Button>
+
+      <ToastContainer />
+    </div>
+  );
+}
+```
+
+## 📚 Available Components
+
+### Molecules
+
+#### Button
+
+Flexible button component with multiple variants, sizes, and icon support.
+
+```tsx
+import { Button } from '@archieai/ui';
+import { Star } from '@archieai/ui/icons';
+
+// Basic button
+<Button onClick={handleClick}>Click me</Button>
+
+// With variants
+<Button variant="primary" tone="brand" size="large">Primary</Button>
+<Button variant="secondary" tone="neutral">Secondary</Button>
+<Button variant="tertiary">Tertiary</Button>
+
+// With icons
+<Button startIcon={<Star size={16} />}>Favorite</Button>
+<Button endIcon={<Star size={16} />}>Continue</Button>
+
+// Disabled state
+<Button disabled>Disabled</Button>
+```
+
+**Props:**
+
+- `variant`: `'primary'` | `'secondary'` | `'tertiary'`
+- `tone`: `'brand'` | `'neutral'`
+- `size`: `'small'` | `'medium'` | `'large'`
+- `startIcon`: React node for leading icon
+- `endIcon`: React node for trailing icon
+- All standard button HTML attributes
+
+#### Input
+
+Text input component with icon support and validation states.
+
+```tsx
+import { Input } from '@archieai/ui';
+import { Search } from '@archieai/ui/icons';
+
+<Input placeholder="Search..." />
+<Input type="email" placeholder="Email" />
+<Input
+  startIcon={<Search size={16} />}
+  placeholder="Search..."
+/>
+```
+
+**Props:**
+
+- `startIcon`: React node for leading icon
+- `endIcon`: React node for trailing icon
+- All standard input HTML attributes
+
+#### Checkbox
+
+Styled checkbox component with label support.
+
+```tsx
+import { Checkbox } from '@archieai/ui';
+
+<Checkbox id="terms" label="I agree to the terms" />
+<Checkbox id="newsletter" label="Subscribe to newsletter" defaultChecked />
+```
+
+**Props:**
+
+- `label`: String or React node for checkbox label
+- `id`: Required for accessibility
+- All standard checkbox HTML attributes
+
+#### Toast
+
+Toast notification system with multiple variants.
+
+```tsx
+import { showToast, ToastContainer } from '@archieai/ui';
+
+// Add ToastContainer once at your app root
+<ToastContainer />;
+
+// Show notifications
+showToast.success('Success!', 'Your changes have been saved.');
+showToast.error('Error!', 'Something went wrong.');
+showToast.info('Info', 'Please check your email.');
+showToast.warning('Warning', 'Are you sure?');
+
+// With custom duration
+showToast.success('Success!', 'Saved', { duration: 5000 });
+```
+
+#### Tooltip
+
+Hover tooltips with customizable positioning.
+
+```tsx
+import { Tooltip } from '@archieai/ui';
+import { Info } from '@archieai/ui/icons';
+
+<Tooltip content="This is a tooltip">
+  <button>Hover me</button>
+</Tooltip>
+
+<Tooltip content="Help information" side="right">
+  <Info size={16} />
+</Tooltip>
+```
+
+**Props:**
+
+- `content`: String or React node for tooltip content
+- `side`: `'top'` | `'right'` | `'bottom'` | `'left'`
+- `delayDuration`: Number (milliseconds)
+
+#### Tabs
+
+Tab navigation component with badge support.
+
+```tsx
+import { Tabs } from '@archieai/ui';
+
+const tabs = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'analytics', label: 'Analytics', badge: '12' },
+  { id: 'settings', label: 'Settings' },
+];
+
+<Tabs
+  tabs={tabs}
+  defaultValue="overview"
+  onValueChange={(value) => console.log(value)}
+>
+  <Tabs.Content value="overview">Overview content</Tabs.Content>
+  <Tabs.Content value="analytics">Analytics content</Tabs.Content>
+  <Tabs.Content value="settings">Settings content</Tabs.Content>
+</Tabs>;
+```
+
+#### Tag
+
+Label and badge component with avatar support.
+
+```tsx
+import { Tag } from '@archieai/ui';
+
+<Tag>Default Tag</Tag>
+<Tag variant="success">Success</Tag>
+<Tag variant="error">Error</Tag>
+<Tag onRemove={() => console.log('removed')}>Removable</Tag>
+```
+
+#### Breadcrumbs
+
+Navigation breadcrumb component.
+
+```tsx
+import { Breadcrumbs } from '@archieai/ui';
+import { Home, Settings } from '@archieai/ui/icons';
+
+const items = [
+  {
+    label: 'Home',
+    href: '/',
+    icon: <Home size={16} />,
+    onClick: () => navigate('/'),
+  },
+  {
+    label: 'Settings',
+    href: '/settings',
+    icon: <Settings size={16} />,
+  },
+  { label: 'Profile' },
+];
+
+<Breadcrumbs items={items} />;
+```
+
+#### LoadingSpinner
+
+Loading indicator component.
+
+```tsx
+import { LoadingSpinner } from '@archieai/ui';
+
+<LoadingSpinner />
+<LoadingSpinner size="small" />
+<LoadingSpinner size="large" />
+```
+
+### Organisms
+
+#### ChatInput
+
+Rich chat input with file upload support.
+
+```tsx
+import { ChatInput } from '@archieai/ui';
+
+<ChatInput
+  placeholder="Type a message..."
+  onSend={(message, files) => {
+    console.log('Message:', message);
+    console.log('Files:', files);
+  }}
+  onFileSelect={(files) => console.log('Files selected:', files)}
+/>;
+```
+
+#### Navbar
+
+Navigation bar component.
+
+```tsx
+import { Navbar } from '@archieai/ui';
+
+<Navbar
+  logo={<YourLogo />}
+  items={[
+    { label: 'Home', href: '/' },
+    { label: 'About', href: '/about' },
+    { label: 'Contact', href: '/contact' },
+  ]}
+/>;
+```
+
+### Atoms
+
+#### Typography
+
+Text components with semantic HTML.
+
+```tsx
+import { Typography } from '@archieai/ui';
+
+<Typography variant="h1">Heading 1</Typography>
+<Typography variant="h2">Heading 2</Typography>
+<Typography variant="body1">Body text</Typography>
+<Typography variant="caption">Caption text</Typography>
+```
+
+#### Icons (287+)
+
+All icons are available as React components. Import from the dedicated `/icons` entry point for better tree-shaking:
+
+```tsx
+// Recommended: Import from /icons entry point
+import {
+  Home, Settings, User, Mail, Star, Check, X,
+  Plus, Minus, Search, Filter, Edit, Trash,
+  ArrowLeft, ArrowRight, ChevronDown, ChevronUp,
+  Heart, Bell, Calendar, Clock, Download, Upload
+} from '@archieai/ui/icons';
+
+// All icons support size and color props
+<Home size={24} color="#8C92AF" />
+<Settings size={20} color="var(--color-blue-800)" />
+<Star size={16} />
+```
+
+**Icon Props:**
+
+- `size`: Number (default: 24)
+- `color`: String (CSS color value)
+- `className`: String for additional styling
+
+## 🎨 Theming
+
+The library uses CSS custom properties for theming. You can customize colors by overriding these variables:
+
+```css
+:root {
+  /* Primary Colors */
+  --color-white: #ffffff;
+  --color-blue-1000: #022e40;
+  --color-blue-800: #15b1cd;
+  --color-blue-400: #6aeafd;
+  --color-blue-200: #d6f4ff;
+
+  /* Neutral Colors */
+  --color-gray-1000: #000626;
+  --color-gray-800: #595f7a;
+  --color-gray-600: #8c92af;
+  --color-gray-200: #e5e7f0;
+  --color-gray-100: #f5f6fa;
+}
+```
+
+## 📘 TypeScript Support
+
+All components are fully typed with TypeScript:
+
+```tsx
+import type {
+  ButtonProps,
+  InputProps,
+  CheckboxProps,
+  ToastProps,
+  TabsProps,
+  BreadcrumbsProps,
+} from '@archieai/ui';
+
+// Use types in your components
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
+```
+
+## 🌐 Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## 🛠️ Tech Stack
+
+- **React** 18.3+ - UI library
+- **TypeScript** - Type safety
+- **Tailwind CSS v4** - Utility-first styling
+- **Framer Motion** - Animations
+- **Radix UI** - Accessible primitives
+- **Class Variance Authority** - Variant management
+- **Vite** - Build tool
+
+## 📦 Bundle Size
+
+The library is optimized for minimal bundle size:
+
+- **Separate entry points** for icons and styles
+- **Tree-shakeable** - only import what you use
+- **CSS**: ~50 KB (minified)
+- **JS**: ~49 KB (minified, gzipped)
+
+```tsx
+// Import only what you need
+import { Button, Input } from '@archieai/ui'; // Main components
+import { Home, Star } from '@archieai/ui/icons'; // Icons separately
+import '@archieai/ui/styles'; // Styles
+```
+
+## 📝 Development
+
+### Running Locally
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+
+# Run tests
+pnpm test
+
+# Build library
+pnpm build:lib
+
+# Run Storybook
+pnpm storybook
+```
+
+### Building
+
+```bash
+# Build the library for production
+pnpm build:lib
+
+# This generates:
+# - dist/index.js (ESM)
+# - dist/index.cjs (CommonJS)
+# - dist/index.d.ts (TypeScript declarations)
+# - dist/icons.js (Icons ESM)
+# - dist/icons.cjs (Icons CommonJS)
+# - dist/styles.js (Styles entry point)
+# - dist/archie-ui-components.css (Compiled CSS)
+```
+
+## 📄 License
+
+MIT License - See LICENSE file for details.
+
+## 🤝 Contributing
+
+This package is maintained by the Archie AI team. For internal contributors:
+
+1. Follow the component creation standards in `.cursor/rules/component-creation.mdc`
+2. Ensure all components have:
+   - Main component file (`.tsx`)
+   - Styles file (`.styles.ts`)
+   - Stories file (`.stories.tsx`)
+   - Test file (`.test.tsx`)
+3. Run tests before committing
+4. Update CHANGELOG.md for significant changes
+
+## 📞 Support
+
+For issues and questions:
+
+- Internal team: Contact the Archie AI development team
+- GitHub Issues: [https://github.com/archieai/archie-ui/issues](https://github.com/archieai/archie-ui/issues)
+
+## 📚 Additional Resources
+
+- [Changelog](./CHANGELOG.md) - Version history and updates
+- [Figma Design System](https://www.figma.com/design/lXoDTTuMaUscHm9sG86eh8/Archie-Design-System) - Design specifications
+
+---
+
+Made with ❤️ by the Archie AI Team