@hanzo/ui 4.5.4 → 4.7.0

package/README.md

@@ -0,0 +1,229 @@
+# @hanzo/ui
+
+A comprehensive UI component library for Hanzo applications, built with React and TypeScript.
+
+## Version 4.5.6
+
+## Installation
+
+```bash
+npm install @hanzo/ui
+# or
+pnpm add @hanzo/ui
+# or
+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
+
+```tsx
+import { Button } from '@hanzo/ui';
+
+function App() {
+  return (
+    <Button variant="primary" onClick={() => console.log('clicked')}>
+      Click me
+    </Button>
+  );
+}
+```
+
+### Alert Dialog
+
+```tsx
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel
+} from '@hanzo/ui';
+
+function ConfirmDialog() {
+  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>
+  );
+}
+```
+
+### AI Provider Icons
+
+```tsx
+import { OpenAIIcon, AnthropicIcon, GeminiIcon } from '@hanzo/ui/assets';
+
+function AIProviders() {
+  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>
+  );
+}
+```
+
+## License
+
+BSD-3-Clause
+
+## Author
+
+Hanzo AI, Inc.
+
+## Repository
+
+https://github.com/hanzoai/react-sdk

package/bin/create-registry.js

@@ -16,7 +16,7 @@ const REGISTRY_STYLES = ['default', 'new-york'];
 
 // Registry schema
 const registrySchema = {
-  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "$schema": "https://ui.hanzo.com/schema/registry.json",
   "name": "hanzo",
   "homepage": "https://ui.hanzo.ai",
   "items": []

package/bin/test-mcp.sh

@@ -3,7 +3,7 @@
 # Test script for verifying the Hanzo UI MCP functionality
 
 # Set a test registry URL
-export REGISTRY_URL="https://ui.shadcn.com/registry/registry.json"
+export REGISTRY_URL="https://ui.hanzo.com/registry/registry.json"
 
 echo "Testing Hanzo UI MCP Server"
 echo "============================"

package/bin/update-registry.js

@@ -2,7 +2,7 @@
 
 /**
  * This script updates the registry.json file based on components
- * found in the registry directory. It's similar to the approach used by shadcn/ui.
+ * found in the registry directory. It's similar to the approach used by hanzo/ui.
  */
 
 const fs = require('fs');
@@ -17,7 +17,7 @@ const REGISTRY_STYLES = ['default', 'new-york']; // Add other styles as needed
 
 // Schema for registry.json
 const registrySchema = {
-  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "$schema": "https://ui.hanzo.com/schema/registry.json",
   "name": "hanzo",
   "homepage": "https://ui.hanzo.ai",
   "items": []

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+export * from './primitives/index-common.ts';
+export * from './primitives/next/index.ts';
+import './types/animation-def.ts';
+import './types/breakpoints.ts';
+import './types/bullet-item.ts';
+import './types/button-def.ts';
+import './types/dimensions.ts';
+import './types/grid-def.ts';
+import './types/image-def.ts';
+import './types/link-def.ts';
+import './types/tshirt-dimensions.ts';
+import './types/t-shirt-size.ts';
+import './types/video-def.ts';
+import './types/media-stack-def.ts';
+import './tailwind/tailwind.config.hanzo-preset.js';
+import './tailwind/tw-font-desc.ts';

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export * from './primitives/index-common.ts';
+export * from './primitives/next/index.ts';
+import './types/animation-def.ts';
+import './types/breakpoints.ts';
+import './types/bullet-item.ts';
+import './types/button-def.ts';
+import './types/dimensions.ts';
+import './types/grid-def.ts';
+import './types/image-def.ts';
+import './types/link-def.ts';
+import './types/tshirt-dimensions.ts';
+import './types/t-shirt-size.ts';
+import './types/video-def.ts';
+import './types/media-stack-def.ts';
+import './tailwind/tailwind.config.hanzo-preset.js';
+import './tailwind/tw-font-desc.ts';