@archieai/ui 0.1.0 → 0.1.2

package/README.md

@@ -3,12 +3,13 @@
 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)
+[![License](https://img.shields.io/npm/l/@archieai/ui.svg)](https://github.com/heyarchie-ai/Archie-UI)
 
 ## ✨ Features
 
 - 🎨 **287+ Custom Icons** - Beautiful SVG icons with customizable size and color
 - 🧩 **Production-Ready Components** - Button, Input, Checkbox, Toast, Tabs, and more
+- 💬 **Chat Components** - MessageBubble, ChatInput, MarkdownRenderer for AI/chat UIs
 - 🎯 **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
@@ -51,27 +52,21 @@ import '@archieai/ui/styles';
 ### 2. Start Using Components
 
 ```tsx
-import { Button, Input, showToast, ToastContainer } from '@archieai/ui';
+import { Button, Input, MessageBubble, MarkdownRenderer } 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" />
+      <Input placeholder="Enter your message" />
 
-      <Button
-        variant="primary"
-        startIcon={<Star size={16} />}
-        onClick={handleSubmit}
-      >
+      <Button variant="primary" startIcon={<Star size={16} />}>
         Save
       </Button>
 
-      <ToastContainer />
+      <MessageBubble variant="assistant">
+        <MarkdownRenderer content="Hello! How can I **help** you today?" />
+      </MessageBubble>
     </div>
   );
 }
@@ -79,6 +74,134 @@ function App() {
 
 ## 📚 Available Components
 
+### Atoms
+
+#### Avatar
+
+User avatar component with text initials or image support.
+
+```tsx
+import { Avatar } from '@archieai/ui';
+
+// Text avatar with initials
+<Avatar type="text" initials="JD" />
+
+// Image avatar
+<Avatar type="image" src="/path/to/image.jpg" alt="John Doe" />
+
+// Different shapes
+<Avatar type="text" initials="AR" shape="circular" />
+<Avatar type="text" initials="AR" shape="square" />
+
+// Different sizes
+<Avatar type="text" initials="AR" size="small" />
+<Avatar type="text" initials="AR" size="big" />
+
+// With fallback when image fails to load
+<Avatar
+  type="image"
+  src="/invalid-image.jpg"
+  fallbackInitials="JD"
+/>
+```
+
+**Props:**
+
+- `type`: `'text'` | `'image'`
+- `shape`: `'circular'` | `'square'`
+- `size`: `'small'` | `'big'`
+- `initials`: String for text avatar
+- `src`: Image URL for image avatar
+- `alt`: Alt text for accessibility
+- `fallbackInitials`: Initials to show when image fails
+
+#### StatusIndicator
+
+Visual status indicator dot with optional animation.
+
+```tsx
+import { StatusIndicator } from '@archieai/ui';
+
+<StatusIndicator variant="success" />
+<StatusIndicator variant="warning" />
+<StatusIndicator variant="error" />
+<StatusIndicator variant="info" />
+<StatusIndicator variant="neutral" />
+
+// With animation
+<StatusIndicator variant="success" animated />
+
+// Different sizes
+<StatusIndicator variant="info" size="small" />
+<StatusIndicator variant="info" size="medium" />
+<StatusIndicator variant="info" size="large" />
+```
+
+**Props:**
+
+- `variant`: `'success'` | `'warning'` | `'error'` | `'info'` | `'neutral'`
+- `size`: `'small'` | `'medium'` | `'large'`
+- `animated`: Boolean for pulsing animation
+
+#### 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>
+```
+
+#### Logos
+
+Archie brand logos with customizable colors and animations.
+
+```tsx
+import { LogoA, SignatureA, FullLogo } from '@archieai/ui';
+
+// Logo A (icon mark)
+<LogoA size={32} colorVariant="lightTeal" />
+<LogoA size={32} colorVariant="darkTeal" />
+
+// Animated Signature
+<SignatureA size={40} colorVariant="orange" animated animationDuration={2} />
+
+// Full Logo
+<FullLogo width={120} />
+```
+
+#### 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,
+  Clipboard, ThumbsUp, ThumbsDown, FileText
+} 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
+
+---
+
 ### Molecules
 
 #### Button
@@ -153,6 +276,271 @@ import { Checkbox } from '@archieai/ui';
 - `id`: Required for accessibility
 - All standard checkbox HTML attributes
 
+#### MessageBubble
+
+Chat message bubble component for user, assistant, and system messages.
+
+```tsx
+import { MessageBubble, MarkdownRenderer } from '@archieai/ui';
+
+// User message
+<MessageBubble variant="user">
+  What is the weather today?
+</MessageBubble>
+
+// Assistant message with avatar
+<MessageBubble variant="assistant">
+  <MarkdownRenderer content="The weather is **sunny** with a high of 72°F." />
+</MessageBubble>
+
+// Initial prompt (centered)
+<MessageBubble variant="user" isInitialPrompt>
+  Help me write a poem about nature
+</MessageBubble>
+
+// System message
+<MessageBubble variant="system">
+  Connected to the assistant
+</MessageBubble>
+
+// Loading state
+<MessageBubble variant="loader" />
+
+// With action handlers
+<MessageBubble
+  variant="assistant"
+  onCopy={() => console.log('Copied')}
+  onHelpful={() => console.log('Helpful')}
+  onUnhelpful={() => console.log('Not helpful')}
+>
+  Here's my response...
+</MessageBubble>
+
+// Sticky mode (no action controls, adds shadow)
+<MessageBubble variant="assistant" isSticky>
+  Pinned message
+</MessageBubble>
+```
+
+**Props:**
+
+- `variant`: `'user'` | `'assistant'` | `'system'` | `'loader'`
+- `heading`: Optional heading text (assistant only)
+- `isLoading`: Shows loading animation
+- `showAvatar`: Show Archie logo (defaults to true for assistant)
+- `showTimestamp`: Show timestamp (default: false)
+- `timestamp`: Date or string for timestamp
+- `isSticky`: Sticky mode with shadow
+- `isInitialPrompt`: Center align (user variant only)
+- `alignment`: `'left'` | `'center'` | `'right'`
+- `onCopy`, `onEdit`, `onHelpful`, `onUnhelpful`: Action callbacks
+
+#### ChatFile
+
+File attachment component with upload progress states.
+
+```tsx
+import { ChatFile, FileStatus } from '@archieai/ui';
+
+// Completed file
+<ChatFile filename="document.pdf" status={FileStatus.Done} />
+
+// Uploading with progress
+<ChatFile
+  filename="report.xlsx"
+  status={FileStatus.Uploading}
+  progress={45}
+/>
+
+// Processing
+<ChatFile filename="image.png" status={FileStatus.Processing} progress={80} />
+
+// Error state
+<ChatFile filename="failed.doc" status={FileStatus.Error} />
+
+// With delete handler
+<ChatFile
+  filename="attachment.pdf"
+  status={FileStatus.Done}
+  onDelete={() => console.log('Delete file')}
+/>
+```
+
+**Props:**
+
+- `filename`: File name to display
+- `status`: `FileStatus.Uploading` | `FileStatus.Processing` | `FileStatus.Done` | `FileStatus.Error`
+- `progress`: Number (0-100) for upload progress
+- `onDelete`: Callback when delete is clicked
+
+#### Dropdown
+
+Dropdown menu component with animation support.
+
+```tsx
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownContent,
+  DropdownItem,
+} from '@archieai/ui';
+import { Button } from '@archieai/ui';
+
+<Dropdown>
+  <DropdownTrigger>
+    <Button>Open Menu</Button>
+  </DropdownTrigger>
+  <DropdownContent align="start">
+    <DropdownItem onClick={() => console.log('Edit')}>Edit</DropdownItem>
+    <DropdownItem onClick={() => console.log('Duplicate')}>
+      Duplicate
+    </DropdownItem>
+    <DropdownItem variant="destructive" onClick={() => console.log('Delete')}>
+      Delete
+    </DropdownItem>
+  </DropdownContent>
+</Dropdown>;
+
+// Controlled dropdown
+const [isOpen, setIsOpen] = useState(false);
+<Dropdown open={isOpen} onOpenChange={setIsOpen}>
+  ...
+</Dropdown>;
+```
+
+**Props:**
+
+- `Dropdown`: `defaultOpen`, `open`, `onOpenChange`
+- `DropdownContent`: `align` (`'start'` | `'end'` | `'center'`), `attached`
+- `DropdownItem`: `active`, `variant` (`'default'` | `'destructive'`), `closeOnSelect`
+
+#### ProgressBar
+
+Progress indicator component with labels and variants.
+
+```tsx
+import { ProgressBar } from '@archieai/ui';
+
+// Basic progress
+<ProgressBar value={60} />
+
+// With label and value display
+<ProgressBar value={75} max={100} label="Uploading..." showValueLabel />
+
+// Different variants
+<ProgressBar value={100} variant="success" />
+<ProgressBar value={30} variant="warning" />
+<ProgressBar value={15} variant="error" />
+
+// Different sizes
+<ProgressBar value={50} size="small" />
+<ProgressBar value={50} size="medium" />
+<ProgressBar value={50} size="large" />
+
+// Custom value formatter
+<ProgressBar
+  value={750}
+  max={1000}
+  showValueLabel
+  valueFormatter={(value, max) => `${value}/${max} items`}
+/>
+```
+
+**Props:**
+
+- `value`: Current progress value
+- `max`: Maximum value (default: 100)
+- `variant`: `'default'` | `'success'` | `'error'` | `'warning'`
+- `size`: `'small'` | `'medium'` | `'large'`
+- `showValueLabel`: Show percentage/value label
+- `label`: Custom label text
+- `valueFormatter`: Custom value formatting function
+
+#### StatusMessage
+
+Status message component with icon and indicator.
+
+```tsx
+import { StatusMessage } from '@archieai/ui';
+
+<StatusMessage status="success" message="Operation completed successfully" />
+<StatusMessage status="warning" message="Please review your changes" />
+<StatusMessage status="error" message="An error occurred" />
+<StatusMessage status="info" message="Processing your request" />
+<StatusMessage status="loading" message="Loading data..." />
+<StatusMessage status="neutral" message="No updates available" />
+```
+
+**Props:**
+
+- `status`: `'success'` | `'warning'` | `'error'` | `'info'` | `'neutral'` | `'loading'`
+- `message`: Message text to display
+
+#### SidebarItem
+
+Navigation sidebar item component.
+
+```tsx
+import { SidebarItem } from '@archieai/ui';
+import { Home, Settings, User } from '@archieai/ui/icons';
+
+// Basic item
+<SidebarItem icon={<Home size={20} />} label="Home" onClick={() => navigate('/')} />
+
+// Active state
+<SidebarItem icon={<Settings size={20} />} label="Settings" isActive />
+
+// Brand variant
+<SidebarItem icon={<User size={20} />} label="Profile" variant="brand" />
+
+// Collapsed mode (icon only)
+<SidebarItem icon={<Home size={20} />} label="Home" isCollapsed />
+```
+
+**Props:**
+
+- `icon`: React node for the icon
+- `label`: Label text
+- `isCollapsed`: Collapsed mode (icon only)
+- `isActive`: Active/selected state
+- `variant`: `'default'` | `'brand'`
+- `onClick`: Click handler
+
+#### Timestamp
+
+Formatted timestamp component with relative time support.
+
+```tsx
+import { Timestamp } from '@archieai/ui';
+
+// Relative time (default)
+<Timestamp date={new Date()} /> // "just now"
+<Timestamp date={Date.now() - 3600000} /> // "1 hour ago"
+
+// Different formats
+<Timestamp date={new Date()} format="relative" /> // "just now"
+<Timestamp date={new Date()} format="short" /> // "Nov 26, 2024"
+<Timestamp date={new Date()} format="long" /> // "November 26, 2024"
+<Timestamp date={new Date()} format="time" /> // "3:45 PM"
+<Timestamp date={new Date()} format="datetime" /> // "Nov 26, 2024, 3:45 PM"
+
+// With icon
+<Timestamp date={new Date()} showIcon />
+
+// Different sizes and variants
+<Timestamp date={new Date()} size="small" variant="muted" />
+<Timestamp date={new Date()} size="large" variant="primary" />
+```
+
+**Props:**
+
+- `date`: Date object, timestamp number, or ISO string
+- `format`: `'relative'` | `'short'` | `'long'` | `'time'` | `'datetime'`
+- `size`: `'small'` | `'medium'` | `'large'`
+- `variant`: `'default'` | `'primary'` | `'muted'`
+- `showIcon`: Show clock icon
+- `locale`: Locale string (default: 'en-US')
+
 #### Toast
 
 Toast notification system with multiple variants.
@@ -271,6 +659,8 @@ import { LoadingSpinner } from '@archieai/ui';
 <LoadingSpinner size="large" />
 ```
 
+---
+
 ### Organisms
 
 #### ChatInput
@@ -290,62 +680,145 @@ import { ChatInput } from '@archieai/ui';
 />;
 ```
 
-#### Navbar
+**Props:**
+
+- `placeholder`: Input placeholder text
+- `onSend`: Callback with message and files
+- `onFileSelect`: Callback when files are selected
+- All standard textarea HTML attributes
+
+#### ConversationHeader
 
-Navigation bar component.
+Header component for chat conversations with breadcrumbs, tags, and collaborators.
 
 ```tsx
-import { Navbar } from '@archieai/ui';
-
-<Navbar
-  logo={<YourLogo />}
-  items={[
-    { label: 'Home', href: '/' },
-    { label: 'About', href: '/about' },
-    { label: 'Contact', href: '/contact' },
-  ]}
+import { ConversationHeader } from '@archieai/ui';
+import { Home, MessageSquare } from '@archieai/ui/icons';
+
+const breadcrumbs = [
+  { label: 'Conversations', icon: <Home size={16} />, onClick: () => {} },
+  { label: 'Project Discussion', icon: <MessageSquare size={16} /> },
+];
+
+const tags = [
+  { id: '1', label: 'Design' },
+  { id: '2', label: 'Urgent' },
+];
+
+const collaborators = [
+  { id: '1', name: 'John Doe', src: '/avatar1.jpg' },
+  { id: '2', name: 'Jane Smith', src: '/avatar2.jpg' },
+];
+
+<ConversationHeader
+  breadcrumbs={breadcrumbs}
+  tags={tags}
+  collaborators={collaborators}
+  onAddTag={() => console.log('Add tag')}
+  onAddCollaborator={() => console.log('Add collaborator')}
+  tagsOverflowCount={3}
 />;
 ```
 
-### Atoms
+**Props:**
 
-#### Typography
+- `breadcrumbs`: Array of breadcrumb items
+- `tags`: Array of tag objects with `id` and `label`
+- `collaborators`: Array of collaborator objects with `id`, `name`, and optional `src`
+- `onAddTag`: Callback for adding a tag
+- `onAddCollaborator`: Callback for adding a collaborator
+- `tagsOverflowCount`: Number showing additional hidden tags
 
-Text components with semantic HTML.
+---
+
+### Renderers
+
+#### MarkdownRenderer
+
+Markdown content renderer with support for headings, lists, code blocks, tables, math (LaTeX), and more.
 
 ```tsx
-import { Typography } from '@archieai/ui';
+import { MarkdownRenderer } 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>
-```
+// Basic markdown
+<MarkdownRenderer content="# Hello World\n\nThis is **bold** and *italic* text." />
 
-#### Icons (287+)
+// With code blocks
+<MarkdownRenderer
+  content={`
+## Code Example
 
-All icons are available as React components. Import from the dedicated `/icons` entry point for better tree-shaking:
+\`\`\`javascript
+const greeting = 'Hello, World!';
+console.log(greeting);
+\`\`\`
 
-```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';
+Inline \`code\` also works!
+  `}
+/>
 
-// All icons support size and color props
-<Home size={24} color="#8C92AF" />
-<Settings size={20} color="var(--color-blue-800)" />
-<Star size={16} />
+// With tables
+<MarkdownRenderer
+  content={`
+| Feature | Status |
+|---------|--------|
+| Tables | ✅ |
+| Lists | ✅ |
+| Code | ✅ |
+  `}
+/>
+
+// With math (LaTeX)
+<MarkdownRenderer
+  content={`
+The quadratic formula: $x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$
+
+Block math:
+$$
+\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}
+$$
+  `}
+/>
+
+// Custom renderers
+<MarkdownRenderer
+  content="Check `this code` and [this link](https://example.com)"
+  renderCodeBlock={(code, language) => (
+    <SyntaxHighlighter language={language}>{code}</SyntaxHighlighter>
+  )}
+  renderLink={(href, text) => (
+    <CustomLink href={href}>{text}</CustomLink>
+  )}
+/>
+
+// Size and variant
+<MarkdownRenderer content="# Title" size="small" variant="muted" />
 ```
 
-**Icon Props:**
+**Props:**
 
-- `size`: Number (default: 24)
-- `color`: String (CSS color value)
-- `className`: String for additional styling
+- `content`: Markdown string to render
+- `size`: `'small'` | `'medium'` | `'large'`
+- `variant`: `'default'` | `'muted'` | `'primary'`
+- `renderCodeBlock`: Custom code block renderer
+- `renderInlineCode`: Custom inline code renderer
+- `renderMathBlock`: Custom math block renderer (LaTeX)
+- `renderInlineMath`: Custom inline math renderer
+- `renderLink`: Custom link renderer
+
+**Supported Markdown Features:**
+
+- Headings (H1-H6)
+- Bold, italic, strikethrough
+- Links
+- Inline code and code blocks with language support
+- Ordered and unordered lists
+- Blockquotes
+- Tables with alignment
+- Horizontal rules
+- Math/LaTeX (inline with `$...$`, block with `$$...$$`)
+
+---
 
 ## 🎨 Theming
 
@@ -360,12 +833,25 @@ The library uses CSS custom properties for theming. You can customize colors by
   --color-blue-400: #6aeafd;
   --color-blue-200: #d6f4ff;
 
+  /* Orange Colors */
+  --color-orange-1000: #e15713;
+  --color-orange-800: #ff6f00;
+  --color-orange-200: #fff2e2;
+
   /* Neutral Colors */
   --color-gray-1000: #000626;
   --color-gray-800: #595f7a;
   --color-gray-600: #8c92af;
   --color-gray-200: #e5e7f0;
   --color-gray-100: #f5f6fa;
+  --color-gray-50: #fafafc;
+
+  /* System Colors */
+  --color-red-1000: #fb6060;
+  --color-red-200: #ffecec;
+  --color-green-1000: #71d481;
+  --color-green-200: #e2f7e5;
+  --color-amber-1000: #8f6c1a;
 }
 ```
 
@@ -381,6 +867,17 @@ import type {
   ToastProps,
   TabsProps,
   BreadcrumbsProps,
+  MessageBubbleProps,
+  ChatFileProps,
+  DropdownProps,
+  ProgressBarProps,
+  StatusMessageProps,
+  SidebarItemProps,
+  TimestampProps,
+  AvatarProps,
+  StatusIndicatorProps,
+  ConversationHeaderProps,
+  MarkdownRendererProps,
 } from '@archieai/ui';
 
 // Use types in your components
@@ -403,6 +900,7 @@ const MyButton: React.FC<ButtonProps> = (props) => {
 - **Tailwind CSS v4** - Utility-first styling
 - **Framer Motion** - Animations
 - **Radix UI** - Accessible primitives
+- **KaTeX** - Math/LaTeX rendering
 - **Class Variance Authority** - Variant management
 - **Vite** - Build tool
 
@@ -417,7 +915,7 @@ The library is optimized for minimal bundle size:
 
 ```tsx
 // Import only what you need
-import { Button, Input } from '@archieai/ui'; // Main components
+import { Button, Input, MessageBubble } from '@archieai/ui'; // Main components
 import { Home, Star } from '@archieai/ui/icons'; // Icons separately
 import '@archieai/ui/styles'; // Styles
 ```
@@ -456,7 +954,7 @@ pnpm build:lib
 # - dist/icons.js (Icons ESM)
 # - dist/icons.cjs (Icons CommonJS)
 # - dist/styles.js (Styles entry point)
-# - dist/archie-ui-components.css (Compiled CSS)
+# - dist/ui.css (Compiled CSS)
 ```
 
 ## 📄 License
@@ -481,7 +979,7 @@ This package is maintained by the Archie AI team. For internal contributors:
 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)
+- GitHub Issues: [https://github.com/heyarchie-ai/Archie-UI/issues](https://github.com/heyarchie-ai/Archie-UI/issues)
 
 ## 📚 Additional Resources