@orion-ds/react 2.0.0 → 2.0.1

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,15 +10,15 @@ 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
 
@@ -88,6 +88,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 +192,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 +275,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 +285,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-ds/react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "description": "Orion Design System - React component library with 40+ AI-ready components and 9 templates",
   "author": "Orion Design System Team",