@orion-ds/react 2.0.0 → 2.0.2

package/AI_COMPONENTS.md

@@ -187,6 +187,13 @@ Use these for landing pages, marketing sites, and product pages. **DO NOT create
 | `Container` | Constrain content width |
 | `Section` | Vertical section with spacing |
 
+### AI Chat Sections
+
+| Section | Use When | Required Props |
+|---------|----------|----------------|
+| `ChatSection` | Chat UI with sidebar | `messages`, `onSendMessage` |
+| `ChatPageTemplate` | Full-page chat app | `messages`, `onSendMessage` |
+
 ---
 
 ## Complete Landing Page Example
@@ -478,6 +485,66 @@ Some components use the compound pattern with dot notation:
 </Drawer>
 ```
 
+### Chat (AI Chat Interface)
+
+Full-featured chat interface with multimodal support (text, images, audio, files, code).
+
+```tsx
+<Chat>
+  <Chat.Header title="AI Assistant" subtitle="Online" />
+  <Chat.Messages>
+    {messages.map(msg => (
+      <Chat.Message
+        key={msg.id}
+        role={msg.role}
+        content={msg.content}
+        timestamp={msg.timestamp}
+        attachments={msg.attachments}
+      />
+    ))}
+    {isTyping && <Chat.TypingIndicator />}
+  </Chat.Messages>
+  <Chat.Input
+    onSend={handleSend}
+    allowAttachments
+    allowVoiceRecording
+  />
+</Chat>
+```
+
+**Chat Sub-components:**
+- `Chat.Header` - Title, avatar, and actions
+- `Chat.Messages` - Scrollable message container with auto-scroll
+- `Chat.Message` - Individual message (user/assistant/system)
+- `Chat.Input` - Multi-line input with attachments and voice
+- `Chat.TypingIndicator` - Animated "typing" dots
+- `Chat.CodeBlock` - Syntax-highlighted code
+- `Chat.Markdown` - Markdown rendering
+- `Chat.ImagePreview` - Image with lightbox
+- `Chat.AudioPlayer` - Audio playback
+- `Chat.VoiceRecorder` - Voice recording
+- `Chat.FileUpload` - Drag-and-drop file upload
+- `Chat.Attachment` - Attachment preview
+- `Chat.Sidebar` - Conversation history list
+
+**Pre-built Sections:**
+- `ChatSection` - Chat with sidebar layout
+- `ChatPageTemplate` - Full-page ChatGPT-style layout
+
+```tsx
+// Full-page template (ChatGPT-style)
+<ChatPageTemplate
+  conversations={conversations}
+  activeConversationId={activeId}
+  messages={messages}
+  onSendMessage={handleSend}
+  onSelectConversation={handleSelect}
+  onNewConversation={handleNew}
+  isTyping={isTyping}
+  user={{ name: 'John', avatar: '...' }}
+/>
+```
+
 ---
 
 ## Icons (Lucide)
@@ -535,7 +602,7 @@ function ThemeSwitcher() {
 }
 ```
 
-**Available brands:** `orion`, `red`, `deepblue`, `orange`
+**Available brands:** `orion`, `red`, `deepblue`, `orange`, `lemon`
 **Available themes:** `light`, `dark`
 
 ---

package/AI_QUICKREF.md

@@ -46,7 +46,7 @@ import { Search } from 'lucide-react';
 ## Theme Switching
 ```tsx
 const { theme, brand, setTheme, setBrand } = useThemeContext();
-// brands: orion, red, deepblue, orange
+// brands: orion, red, deepblue, orange, lemon
 // themes: light, dark
 ```
 

package/README.md

@@ -1,8 +1,8 @@
-# @orion/react
+# @orion-ds/react
 
-> **Orion Design System** - React Component Library
+> **Orion Design System** - AI-First React Component Library
 
-TypeScript-first React component library built on the Orion Design System tokens. Features 22 production-ready components with full type safety, theme switching, and multi-brand support.
+TypeScript-first React component library built on the Orion Design System. Features 40+ components, 30+ sections, and 9 page templates with full type safety, theme switching, and multi-brand support.
 
 [![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue)](https://www.typescriptlang.org/)
 [![Tests](https://img.shields.io/badge/tests-passing-brightgreen)](#)
@@ -10,18 +10,20 @@ TypeScript-first React component library built on the Orion Design System tokens
 
 ## Features
 
-- ✅ **22 TypeScript Components** - Fully typed with IntelliSense support
+- 🤖 **AI-First Design** - Optimized for AI/LLM code generation (see AI_GUIDE.md)
+- ✅ **40+ Components** - Fully typed with IntelliSense support
+- 📐 **30+ Sections** - Pre-built page sections (Hero, Features, Pricing, etc.)
+- 📄 **9 Templates** - Complete page templates (Landing, Dashboard, Profile, etc.)
 - 🎨 **Theme Switching** - Light/Dark modes with CSS variables
-- 🏢 **Multi-Brand** - Orion, UVM, Unitec, Laureate brands
-- 🎯 **Lucide Icons** - 5000+ icons built-in (icon support in Button, Field, Alert, etc.)
-- ♿ **Accessible** - WCAG AA compliant, keyboard navigation
-- 📦 **Tree-Shakeable** - Import only what you need (ESM + CJS)
-- 🎭 **CSS Modules** - Scoped styling, no conflicts
-- 🧪 **Tested** - 19+ unit tests with Vitest
-- 📚 **Documented** - 50+ Storybook stories
+- 🏢 **Multi-Brand** - orion, red, deepblue, orange, lemon brands
+- 🎯 **Lucide Icons** - 5000+ icons built-in
+- ♿ **Accessible** - WCAG AA compliant
+- 📦 **Tree-Shakeable** - ESM + CJS
 
 ## Installation
 
+### Option A: npm install (full library)
+
 \`\`\`bash
 npm install @orion-ds/react @orion-ds/core
 # or
@@ -32,6 +34,18 @@ yarn add @orion-ds/react @orion-ds/core
 
 > **Note**: `@orion-ds/core` is a peer dependency that must be installed alongside `@orion-ds/react`.
 
+### Option B: CLI copy (own the code)
+
+Copy individual components into your project, shadcn-style. You own the source and can modify freely.
+
+\`\`\`bash
+npx @orion-ds/cli init                    # Creates orion.json, installs @orion-ds/core
+npx @orion-ds/cli add button card modal   # Copies component source files
+npx @orion-ds/cli list                    # Shows all 90 available items
+\`\`\`
+
+See [@orion-ds/cli README](../cli/README.md) for full documentation.
+
 ## CSS Setup
 
 ### Option 1: Single Import (Recommended)
@@ -88,6 +102,18 @@ function MyApp() {
 }
 \`\`\`
 
+## AI / LLM Integration
+
+This library is optimized for AI code generation. When using with Claude, Cursor, Copilot, or other AI tools:
+
+| Document | Purpose |
+|----------|---------|
+| `AI_GUIDE.md` | Complete integration guide, decision trees, anti-patterns |
+| `AI_QUICKREF.md` | Quick reference for common patterns |
+| `AI_COMPONENTS.md` | All components with examples |
+
+These files are included in the npm package.
+
 ## Google Fonts (Automatic)
 
 **Fonts are loaded automatically by `ThemeProvider`** (since v1.1.4). No manual setup required!
@@ -180,12 +206,58 @@ if (missing.length > 0) {
 - **ThemeController** - Theme & brand selector
 - **useTheme** - Theme management hook
 
+## Sections
+
+Pre-built page sections for rapid development:
+
+| Category | Sections |
+|----------|----------|
+| **Marketing** | Hero, Features, Pricing, CTA, Testimonials, FAQ, Footer |
+| **App** | Sidebar, Header, DetailPanel, StatCards |
+| **Content** | ArticleContent, MediaGallery, Timeline |
+
+\`\`\`tsx
+import { Hero, Features, Pricing } from '@orion-ds/react';
+
+<Hero title="Welcome" description="Build faster" />
+<Features items={[...]} columns={3} />
+<Pricing plans={[...]} />
+\`\`\`
+
+[View all 30+ sections in AI_COMPONENTS.md](./AI_COMPONENTS.md)
+
+## Templates
+
+Complete page templates ready to use:
+
+| Template | Use Case |
+|----------|----------|
+| `LandingPageTemplate` | Marketing landing pages |
+| `DashboardTemplate` | Admin dashboards |
+| `ProfilePageTemplate` | User profile pages |
+| `SettingsTemplate` | Settings pages |
+| `LoginTemplate` | Authentication pages |
+| `OnboardingTemplate` | User onboarding flows |
+| `NotFoundTemplate` | 404 error pages |
+| `MaintenanceTemplate` | Maintenance pages |
+| `ComingSoonTemplate` | Pre-launch pages |
+
+\`\`\`tsx
+import { LandingPageTemplate } from '@orion-ds/react';
+
+<LandingPageTemplate
+  hero={{ title: 'Welcome', description: '...' }}
+  features={{ items: [...] }}
+  pricing={{ plans: [...] }}
+/>
+\`\`\`
+
 ## Lucide Icons
 
 All components support **Lucide icons** - 5000+ beautiful, consistent icons.
 
 \`\`\`tsx
-import { Button, Field, Alert } from '@orion/react';
+import { Button, Field, Alert } from '@orion-ds/react';
 import { Search, Download, AlertCircle } from 'lucide-react';
 
 // Icon in button (left side)
@@ -217,7 +289,7 @@ See [LUCIDE_ICONS.md](./LUCIDE_ICONS.md) for complete icon documentation.
 ### Using the Hook
 
 \`\`\`tsx
-import { useTheme } from '@orion/react';
+import { useTheme } from '@orion-ds/react';
 
 function ThemeSwitcher() {
   const { theme, brand, setTheme, setBrand, toggleTheme } = useTheme();
@@ -227,14 +299,38 @@ function ThemeSwitcher() {
       <button onClick={toggleTheme}>
         Current: {theme}
       </button>
-      <button onClick={() => setBrand('uvm')}>
-        Switch to UVM Brand
+      <button onClick={() => setBrand('deepblue')}>
+        Switch to Deepblue Brand
       </button>
     </>
   );
 }
 \`\`\`
 
+## v2.0.0 Migration Guide
+
+### Breaking Changes
+
+#### Hero & CTA: `headline` → `title`
+\`\`\`diff
+- <Hero headline="Welcome" description="..." />
++ <Hero title="Welcome" description="..." />
+\`\`\`
+
+#### DetailPanel: `subtitle` → `description`
+\`\`\`diff
+- <DetailPanel title="Edit" subtitle="User profile" />
++ <DetailPanel title="Edit" description="User profile" />
+\`\`\`
+
+#### ThemeProvider: Flat Props (Optional)
+\`\`\`diff
+- <ThemeProvider options={{ defaultBrand: 'red' }}>
++ <ThemeProvider defaultBrand="red">
+\`\`\`
+
+> **Backward Compatibility**: The old props still work but show deprecation warnings in development.
+
 ## License
 
 MIT © Orion Team

package/dist/components/Chat/Chat.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Chat Component
+ *
+ * A flexible compound component for building AI chat interfaces.
+ * Supports multimodal content including text, images, audio, files, and code.
+ *
+ * @example
+ * ```tsx
+ * <Chat>
+ *   <Chat.Header title="AI Assistant" />
+ *   <Chat.Messages>
+ *     {messages.map(msg => (
+ *       <Chat.Message
+ *         key={msg.id}
+ *         role={msg.role}
+ *         content={msg.content}
+ *       />
+ *     ))}
+ *     {isTyping && <Chat.TypingIndicator />}
+ *   </Chat.Messages>
+ *   <Chat.Input onSend={handleSend} />
+ * </Chat>
+ * ```
+ */
+import React from 'react';
+import type { ChatProps } from './Chat.types';
+import { ChatMessage, ChatMessages, ChatInput, ChatHeader, ChatTypingIndicator, ChatCodeBlock, ChatMarkdown, ChatImagePreview, ChatAudioPlayer, ChatVoiceRecorder, ChatFileUpload, ChatAttachment, ChatSidebar } from './components';
+type ChatComponent = React.FC<ChatProps> & {
+    Header: typeof ChatHeader;
+    Messages: typeof ChatMessages;
+    Message: typeof ChatMessage;
+    Input: typeof ChatInput;
+    TypingIndicator: typeof ChatTypingIndicator;
+    CodeBlock: typeof ChatCodeBlock;
+    Markdown: typeof ChatMarkdown;
+    ImagePreview: typeof ChatImagePreview;
+    AudioPlayer: typeof ChatAudioPlayer;
+    VoiceRecorder: typeof ChatVoiceRecorder;
+    FileUpload: typeof ChatFileUpload;
+    Attachment: typeof ChatAttachment;
+    Sidebar: typeof ChatSidebar;
+};
+export declare const Chat: ChatComponent;
+export {};
+//# sourceMappingURL=Chat.d.ts.map

package/dist/components/Chat/Chat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,WAAW,EACZ,MAAM,cAAc,CAAC;AAwBtB,KAAK,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACzC,MAAM,EAAE,OAAO,UAAU,CAAC;IAC1B,QAAQ,EAAE,OAAO,YAAY,CAAC;IAC9B,OAAO,EAAE,OAAO,WAAW,CAAC;IAC5B,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,eAAe,EAAE,OAAO,mBAAmB,CAAC;IAC5C,SAAS,EAAE,OAAO,aAAa,CAAC;IAChC,QAAQ,EAAE,OAAO,YAAY,CAAC;IAC9B,YAAY,EAAE,OAAO,gBAAgB,CAAC;IACtC,WAAW,EAAE,OAAO,eAAe,CAAC;IACpC,aAAa,EAAE,OAAO,iBAAiB,CAAC;IACxC,UAAU,EAAE,OAAO,cAAc,CAAC;IAClC,UAAU,EAAE,OAAO,cAAc,CAAC;IAClC,OAAO,EAAE,OAAO,WAAW,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,IAAI,EAAe,aAAa,CAAC"}