@hanzo/ui 5.0.2 → 5.0.3

package/CHANGELOG.md

@@ -0,0 +1,184 @@
+# Changelog
+
+All notable changes to @hanzo/ui will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [5.0.0] - 2025-09-20
+
+### 🎉 Major Release - shadcn/ui v4 Migration
+
+This major release migrates @hanzo/ui to the latest shadcn/ui v4 architecture with significant improvements in performance, accessibility, and developer experience.
+
+### ✨ New Features
+
+- **Registry-Based Architecture**: New component registry system for selective imports
+- **Multi-Brand Support**: Built-in theming for Hanzo, Lux, and Zoo brands
+- **50+ Components**: Complete component library with shadcn/ui v4 components
+- **35+ Custom Hooks**: Comprehensive collection of React hooks
+- **25+ Utilities**: Helper functions for common tasks
+- **AI Integration**: Model Context Protocol (MCP) support for AI-powered development
+- **Dark Mode**: Native dark mode support with theme persistence
+- **OKLCH Colors**: Modern color system with OKLCH color space
+- **TypeScript First**: Full TypeScript support with strict typing
+- **Tree Shaking**: Optimized bundle sizes with proper tree shaking
+- **Accessibility**: WCAG 2.1 AA compliant components
+
+### 🔧 Component Updates
+
+#### New Components
+- Alert
+- Alert Dialog
+- Accordion
+- Avatar
+- Badge
+- Breadcrumb
+- Button (enhanced with variants)
+- Calendar
+- Card
+- Carousel
+- Chart
+- Checkbox
+- Collapsible
+- Command
+- Context Menu
+- Data Table
+- Date Picker
+- Dialog
+- Drawer
+- Dropdown Menu
+- Form
+- Hover Card
+- Input
+- Input OTP
+- Label
+- Menubar
+- Navigation Menu
+- Pagination
+- Popover
+- Progress
+- Radio Group
+- Resizable
+- Scroll Area
+- Select
+- Separator
+- Sheet
+- Skeleton
+- Slider
+- Sonner (Toast)
+- Switch
+- Table
+- Tabs
+- Textarea
+- Toast
+- Toggle
+- Toggle Group
+- Tooltip
+
+#### AI Components
+- Chat Interface
+- Code Block with syntax highlighting
+- Message components
+- Streaming support
+
+#### Block Components
+- Authentication forms
+- Dashboard layouts
+- Marketing sections
+- E-commerce patterns
+
+### 💥 Breaking Changes
+
+#### Package Structure
+- Changed from single export to multiple export paths:
+  - `@hanzo/ui` - Core exports with cn utility
+  - `@hanzo/ui/components` - Component exports
+  - `@hanzo/ui/blocks` - Block patterns
+  - `@hanzo/ui/ai` - AI components
+  - `@hanzo/ui/lib/utils` - Utilities
+
+#### Import Changes
+```typescript
+// Before (v4.x)
+import { Button, Card, cn } from '@hanzo/ui'
+
+// After (v5.0)
+import { cn } from '@hanzo/ui'
+import { Button, Card } from '@hanzo/ui/components'
+// Or selective imports
+import { Button } from '@hanzo/ui/components/button'
+```
+
+#### CSS Variables
+- Migrated from HSL to OKLCH color space
+- New CSS variable naming convention
+- Theme variables now use `--hanzo-` prefix
+
+#### Component API Changes
+- Button: `variant` prop values changed
+- Dialog: Now uses Radix UI Dialog v1.0
+- Toast: Replaced with Sonner for better performance
+- DataTable: New API with tanstack/react-table v8
+
+#### Dependency Updates
+- Requires React 18+
+- Requires Tailwind CSS 3.4+
+- All Radix UI primitives updated to v1.0+
+
+### 🐛 Bug Fixes
+
+- Fixed hydration issues with dark mode
+- Resolved tree-shaking problems in production builds
+- Fixed TypeScript type exports
+- Corrected accessibility issues in form components
+- Fixed z-index stacking context issues
+
+### 📦 Dependencies
+
+#### Updated
+- All @radix-ui/* packages to latest v1.0+
+- class-variance-authority to v0.7.0
+- cmdk to v1.0.3
+- lucide-react to v0.525.0
+- recharts to v2.12.7
+- tailwind-merge to v2.0.0
+
+### 🚀 Performance Improvements
+
+- 40% reduction in bundle size through better tree-shaking
+- Lazy loading for heavy components (Charts, Calendar)
+- Optimized re-renders with proper memo usage
+- CSS-in-JS removed in favor of Tailwind CSS
+
+### 📝 Documentation
+
+- Complete API documentation for all components
+- Interactive Storybook with all components
+- Migration guide from v4 to v5
+- Accessibility documentation
+- Theming and customization guides
+
+### 🔄 Migration Guide
+
+See [MIGRATION.md](./MIGRATION.md) for detailed migration instructions from v4.x to v5.0.
+
+### 🙏 Contributors
+
+Thanks to all contributors who made this release possible!
+
+---
+
+## [4.5.6] - 2024-09-01
+
+### Changed
+- Last version before major v5 rewrite
+
+---
+
+## Previous Versions
+
+For changelog of versions prior to v4.5.6, please refer to the git history.
+
+[5.0.0]: https://github.com/hanzoai/ui/compare/v4.5.6...v5.0.0
+[4.5.6]: https://github.com/hanzoai/ui/releases/tag/v4.5.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Hanzo AI
+
+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

@@ -1,10 +1,29 @@
-# @hanzo/ui
+# @hanzo/ui v5
 
-A comprehensive UI component library for Hanzo applications, built with React and TypeScript.
+[![npm version](https://img.shields.io/npm/v/@hanzo/ui.svg)](https://www.npmjs.com/package/@hanzo/ui)
+[![npm downloads](https://img.shields.io/npm/dm/@hanzo/ui.svg)](https://www.npmjs.com/package/@hanzo/ui)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@hanzo/ui)](https://bundlephobia.com/package/@hanzo/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
 
-## Version 4.5.6
+Modern React component library built on shadcn/ui v4 with Hanzo branding, featuring 50+ accessible components, 35+ hooks, and comprehensive TypeScript support.
 
-## Installation
+## ✨ Features
+
+- 🎨 **Multi-Brand Theming** - Built-in support for Hanzo, Lux, and Zoo brands
+- 📦 **50+ Components** - Comprehensive UI components based on shadcn/ui v4
+- 🪝 **35+ Custom Hooks** - Powerful React hooks for common patterns
+- 🛠️ **25+ Utilities** - Helper functions and utilities
+- 🌙 **Dark Mode** - Native dark mode with system preference detection
+- ♿ **Accessible** - WCAG 2.1 AA compliant components
+- 📱 **Responsive** - Mobile-first responsive design
+- 🎯 **Tree Shakeable** - Import only what you need
+- 💅 **Tailwind CSS** - Utility-first styling with Tailwind v3.4+
+- 🎭 **OKLCH Colors** - Modern color system with OKLCH color space
+- 🤖 **AI Components** - Chat interfaces and AI-specific components
+- 📋 **Copy/Paste** - Components can be copied directly into your project
+
+## 📦 Installation
 
 ```bash
 npm install @hanzo/ui
@@ -14,216 +33,190 @@ pnpm add @hanzo/ui
 yarn add @hanzo/ui
 ```
 
-## Components
-
-### Primitives
-
-Core UI components based on Radix UI primitives:
-
-- **Accordion** - Collapsible content panels
-- **Alert** - Informative alert messages
-- **AlertDialog** - Modal dialogs for important alerts
-- **Avatar** - User avatar display
-- **Badge** - Status and label badges
-- **Breadcrumb** - Navigation breadcrumbs
-- **Button** - Interactive buttons with variants
-- **Calendar** - Date picker calendar
-- **Card** - Container cards for content
-- **Carousel** - Image/content carousel
-- **Checkbox** - Checkbox input
-- **Collapsible** - Collapsible content sections
-- **Combobox** - Searchable select dropdown
-- **Command** - Command palette component
-- **ContextMenu** - Right-click context menus
-- **Dialog** - Modal dialogs
-- **Drawer** - Slide-out drawer panels
-- **DropdownMenu** - Dropdown menu component
-- **Form** - Form components with validation
-- **HoverCard** - Hover-triggered info cards
-- **Input** - Text input field
-- **InputOTP** - One-time password input
-- **Label** - Form labels
-- **NavigationMenu** - Navigation menu bar
-- **Popover** - Popover overlays
-- **Progress** - Progress indicators
-- **RadioGroup** - Radio button groups
-- **ResizablePanel** - Resizable panel layouts
-- **ScrollArea** - Custom scrollable areas
-- **SearchInput** - Search input with icon
-- **Select** - Select dropdown
-- **Separator** - Visual separator line
-- **Sheet** - Side sheet panels
-- **Skeleton** - Loading skeleton screens
-- **Slider** - Range slider input
-- **Switch** - Toggle switch
-- **Table** - Data tables
-- **Tabs** - Tabbed interfaces
-- **TextArea** - Multi-line text input
-- **TextField** - Enhanced text input
-- **Toast** - Toast notifications (via Sonner)
-- **Toggle** - Toggle buttons
-- **ToggleGroup** - Grouped toggle buttons
-- **Tooltip** - Hover tooltips
-- **VideoPlayer** - Video playback component
-
-### Assets
-
-Icon components and visual assets:
-
-#### AI Provider Icons
-- **AnthropicIcon** - Anthropic AI logo
-- **OpenAIIcon** - OpenAI logo
-- **GeminiIcon** - Google Gemini logo
-- **DeepSeekIcon** - DeepSeek logo
-- **MistralIcon** - Mistral AI logo
-- **MetaIcon** - Meta AI logo
-- **GroqIcon** - Groq logo
-- **OllamaIcon** - Ollama logo
-- **HanzoIcon** - Hanzo AI logo
-- **TogetherAI** - Together AI logo
-- **ExoIcon** - Exo logo
-- **GrokIcon** - Grok logo
-- **LmStudioIcon** - LM Studio logo
-- **OpenRouterIcon** - OpenRouter logo
-- **PerplexityIcon** - Perplexity logo
-- **QwenIcon** - Qwen logo
-- **AyaCohereIcon** - Aya/Cohere logo
-
-#### Feature Icons
-- **AIAgentIcon** - AI agent indicator
-- **AisIcon** - AI services icon
-- **ReactJsIcon** - React.js logo
-- **ReasoningIcon** - AI reasoning indicator
-- **ToolsIcon** - Tools/utilities icon
-- **TracingIcon** - Tracing/monitoring icon
-- **ScheduledTasksIcon** - Scheduled tasks icon
-- **SendIcon** - Send/submit icon
-
-#### File Type Icons
-- **FileTypeIcon** - Dynamic file type icon based on extension
-- **DirectoryTypeIcon** - Folder/directory icon
-
-### Utilities
-
-Helper functions and hooks:
-
-- **cn()** - Class name utility (clsx + tailwind-merge)
-- **markdown()** - Markdown to JSX converter
-- **formatText()** - Text formatting utilities
-- **useDebounce()** - Debounce hook
-- **useMap()** - Map state management hook
-- **formatDateToLocaleStringWithTime()** - Date formatting
-- **getFileExt()** - File extension extraction
-- **hexToRgb()** - Color conversion utilities
-
-### Custom Components
-
-Additional enhanced components:
-
-- **ChatInput** - Chat message input
-- **ChatInputArea** - Multi-line chat input
-- **ChatSettingsIcon** - Chat settings icon
-- **CopyToClipboardIcon** - Copy to clipboard button
-- **DotsLoader** - Loading dots animation
-- **FileList** - File list display
-- **FileUploader** - File upload component
-- **JsonForm** - JSON-based dynamic forms
-- **MarkdownText** - Markdown renderer
-- **PrettyJsonPrint** - Formatted JSON display
-
-## Styling
-
-The library uses Tailwind CSS for styling. Make sure your application includes Tailwind CSS configuration.
-
-## Dependencies
-
-Key peer dependencies:
-- React 18.3.1+
-- React DOM 18.3.1+
-- @hookform/resolvers ^3.3.2
-- react-hook-form 7.51.4
-- lucide-react 0.456.0
-- next-themes ^0.2.1
-- embla-carousel ^8.1.6
-
-## Usage Examples
-
-### Basic Button
+## 🚀 Quick Start
+
+### 1. Configure Tailwind CSS
+
+Add the Hanzo UI preset to your `tailwind.config.js`:
+
+```js
+// tailwind.config.js
+import hanzoPreset from '@hanzo/ui/tailwind-preset'
+
+export default {
+  presets: [hanzoPreset],
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    './node_modules/@hanzo/ui/dist/**/*.{js,mjs}'
+  ],
+  // ... your config
+}
+```
+
+### 2. Import Components
 
 ```tsx
-import { Button } from '@hanzo/ui';
+// Import utilities
+import { cn } from '@hanzo/ui'
 
-function App() {
+// Import components
+import { Button, Card, Dialog } from '@hanzo/ui/components'
+
+// Or import individually
+import { Button } from '@hanzo/ui/components/button'
+import { Card } from '@hanzo/ui/components/card'
+
+// Import AI components
+import { ChatInterface } from '@hanzo/ui/ai'
+
+// Import block patterns
+import { AuthForm } from '@hanzo/ui/blocks'
+```
+
+### 3. Use Components
+
+```tsx
+export function App() {
   return (
-    <Button variant="primary" onClick={() => console.log('clicked')}>
-      Click me
-    </Button>
-  );
+    <Card className="p-6">
+      <h1>Welcome to Hanzo UI</h1>
+      <Button variant="default" size="lg">
+        Get Started
+      </Button>
+    </Card>
+  )
+}
+```
+
+## 📚 Component Categories
+
+### Core Components
+- **Layout**: Container, Grid, Stack, Spacer
+- **Typography**: Heading, Text, Label
+- **Buttons**: Button, IconButton, ButtonGroup
+- **Forms**: Input, Textarea, Select, Checkbox, Radio, Switch
+- **Feedback**: Alert, Toast, Progress, Skeleton
+- **Overlay**: Dialog, Sheet, Popover, Tooltip
+- **Navigation**: Tabs, Breadcrumb, Pagination
+- **Data Display**: Table, DataTable, Card, Badge
+- **Media**: Avatar, Image, Video
+
+### AI Components
+- Chat Interface
+- Message Components
+- Code Block with Syntax Highlighting
+- Streaming Support
+- Tool Use Display
+
+### Block Patterns
+- Authentication Forms
+- Dashboard Layouts
+- Marketing Sections
+- E-commerce Patterns
+- Landing Pages
+
+## 🎨 Theming
+
+### Using CSS Variables
+
+Hanzo UI uses CSS variables for theming. You can customize the theme by overriding these variables:
+
+```css
+@layer base {
+  :root {
+    --hanzo-background: 0 0% 100%;
+    --hanzo-foreground: 0 0% 3.9%;
+    --hanzo-primary: 0 0% 9%;
+    --hanzo-primary-foreground: 0 0% 98%;
+    /* ... more variables */
+  }
+
+  .dark {
+    --hanzo-background: 0 0% 3.9%;
+    --hanzo-foreground: 0 0% 98%;
+    /* ... dark mode variables */
+  }
 }
 ```
 
-### Alert Dialog
+### Multiple Brands
+
+Switch between brand themes:
 
 ```tsx
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel
-} from '@hanzo/ui';
-
-function ConfirmDialog() {
+import { ThemeProvider } from '@hanzo/ui/components/theme-provider'
+
+function App() {
   return (
-    <AlertDialog>
-      <AlertDialogTrigger>
-        <Button>Open Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
+    <ThemeProvider defaultTheme="hanzo" storageKey="ui-theme">
+      {/* Your app */}
+    </ThemeProvider>
+  )
 }
 ```
 
-### AI Provider Icons
+## 🔧 Advanced Usage
+
+### Custom Styling with cn()
+
+The `cn()` utility combines clsx and tailwind-merge:
 
 ```tsx
-import { OpenAIIcon, AnthropicIcon, GeminiIcon } from '@hanzo/ui/assets';
+import { cn } from '@hanzo/ui'
 
-function AIProviders() {
+function CustomButton({ className, ...props }) {
   return (
-    <div className="flex gap-4">
-      <OpenAIIcon className="h-6 w-6" />
-      <AnthropicIcon className="h-6 w-6" />
-      <GeminiIcon className="h-6 w-6" />
-    </div>
-  );
+    <button
+      className={cn(
+        'px-4 py-2 rounded-lg bg-primary text-primary-foreground',
+        'hover:bg-primary/90 transition-colors',
+        className
+      )}
+      {...props}
+    />
+  )
 }
 ```
 
-## License
+### TypeScript Support
+
+All components are fully typed:
+
+```tsx
+import type { ButtonProps } from '@hanzo/ui/components/button'
+
+interface CustomButtonProps extends ButtonProps {
+  customProp?: string
+}
+
+export function CustomButton({ customProp, ...props }: CustomButtonProps) {
+  return <Button {...props} />
+}
+```
+
+## 📖 Documentation
+
+- [Full Documentation](https://ui.hanzo.ai)
+- [Component Examples](https://ui.hanzo.ai/components)
+- [Migration Guide](https://ui.hanzo.ai/docs/migration)
+- [Storybook](https://ui.hanzo.ai/storybook)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our [Contributing Guide](https://github.com/hanzoai/ui/blob/main/CONTRIBUTING.md) for details.
+
+## 📄 License
 
-BSD-3-Clause
+MIT © [Hanzo AI](https://hanzo.ai)
 
-## Author
+## 🔗 Links
 
-Hanzo AI, Inc.
+- [GitHub Repository](https://github.com/hanzoai/ui)
+- [NPM Package](https://www.npmjs.com/package/@hanzo/ui)
+- [Documentation](https://ui.hanzo.ai)
+- [Storybook](https://ui.hanzo.ai/storybook)
+- [Discord Community](https://discord.gg/hanzo)
 
-## Repository
+---
 
-https://github.com/hanzoai/react-sdk
+Built with ❤️ by [Hanzo AI](https://hanzo.ai)

package/dist/ai/index.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var chunkBDZQJ6GK_js = require('../chunk-BDZQJ6GK.js');
+require('../chunk-DN2AEEA2.js');
+
+
+
+Object.defineProperty(exports, "AIActions", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.AIActions; }
+});
+Object.defineProperty(exports, "AIAgents", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.AIAgents; }
+});
+Object.defineProperty(exports, "AIAssistant", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.AIAssistant; }
+});
+Object.defineProperty(exports, "AIChat", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.AIChat; }
+});
+Object.defineProperty(exports, "AIModels", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.AIModels; }
+});
+Object.defineProperty(exports, "AIPlayground", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.AIPlayground; }
+});
+Object.defineProperty(exports, "AITools", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.AITools; }
+});
+Object.defineProperty(exports, "AIVision", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.AIVision; }
+});
+Object.defineProperty(exports, "AnthropicProvider", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.AnthropicProvider; }
+});
+Object.defineProperty(exports, "OpenAIProvider", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.OpenAIProvider; }
+});
+Object.defineProperty(exports, "configureAI", {
+  enumerable: true,
+  get: function () { return chunkBDZQJ6GK_js.configureAI; }
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/ai/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/ai/index.mjs

@@ -0,0 +1,4 @@
+export { AIActions, AIAgents, AIAssistant, AIChat, AIModels, AIPlayground, AITools, AIVision, AnthropicProvider, OpenAIProvider, configureAI } from '../chunk-UNUTTHCH.mjs';
+import '../chunk-TH2UKMCO.mjs';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/ai/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}