@hanzo/ui 5.0.3 → 5.1.1

package/style/drawer.css

@@ -0,0 +1,163 @@
+/*  This is a copy of vaul/src/style.css */
+
+[vaul-drawer] {
+  touch-action: none;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, 100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='top'] {
+  transform: translate3d(0, -100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='left'] {
+  transform: translate3d(-100%, 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='right'] {
+  transform: translate3d(100%, 0, 0);
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
+  overflow-y: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
+  overflow-x: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
+  overflow-x: hidden !important;
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-overlay] {
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[vaul-overlay][vaul-drawer-visible='true'] {
+  opacity: 1;
+}
+
+[vaul-drawer]::after {
+  content: '';
+  position: absolute;
+  background: inherit;
+  background-color: inherit;
+}
+
+[vaul-drawer][vaul-drawer-direction='top']::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom']::after {
+  top: 100%;
+  bottom: initial;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='left']::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='right']::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-handle] {
+  display: block;
+  position: relative;
+  opacity: 0.8;
+  margin-left: auto;
+  margin-right: auto;
+  height: 5px;
+  width: 56px;
+  border-radius: 1rem;
+  touch-action: pan-y;
+  cursor: grab;
+}
+
+[vaul-handle]:hover,
+[vaul-handle]:active {
+  opacity: 1;
+}
+
+[vaul-handle]:active {
+  cursor: grabbing;
+}
+
+[vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem); /* 44px */
+  height: max(100%, 2.75rem); /* 44px */
+  touch-action: inherit;
+}
+
+[vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
+  opacity: 0;
+}
+
+[vaul-overlay][vaul-snap-points-overlay='true']:not([vaul-drawer-visible='false']) {
+  opacity: 1;
+}
+
+/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
+@keyframes fake-animation {
+  from {
+  }
+  to {
+  }
+}
+
+@media (pointer: fine) {
+  [vaul-handle-hitarea] {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [vaul-drawer] {
+    user-select: none;
+  }
+}
+

package/style/globals.css

@@ -0,0 +1,13 @@
+/* Note, preflight is applied first: 
+  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
+*/
+@import "tailwindcss/base";
+
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+@import "hanzo-common";
+@import "hanzo-default-colors";
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+

package/style/hanzo-common.css

@@ -0,0 +1,31 @@
+@tailwind base;
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+
+@layer base {
+  
+  * {
+    box-sizing: inherit;
+  }
+
+  /*
+    using this approach: 
+    https://stackoverflow.com/a/76066443/11645689
+    see src/app/(home)/scroll-snap
+  */
+
+  html {
+    scroll-snap-type: y mandatory;
+    height: 100vh;
+
+    overflow-y: scroll;
+    box-sizing: border-box;
+
+    scrollbar-width: none;
+  }
+
+  body {
+    font-feature-settings: "rlig" 1, "calt" 1;
+    font-size: 16px; 
+    letter-spacing: 0.15px;
+  }
+}

package/style/hanzo-default-colors.css

@@ -0,0 +1,82 @@
+@tailwind base;
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+
+@layer base {
+
+  :root, .hanzo-ui-light-theme {
+    --hz-ui-fg-0: hsl(0 0% 0%);
+    --hz-ui-fg-body: hsl(0 0% 10%);
+    --hz-ui-fg-1: hsl(0 0% 20%);
+    --hz-ui-fg-2: hsl(0 0% 35%);
+    --hz-ui-fg-3: hsl(0 0% 50%);
+    --hz-ui-fg-4: hsl(0 0% 70%);
+    --hz-ui-fg-5: hsl(0 0% 90%);
+
+    --hz-ui-bg-0: hsl(0 0% 100%);
+    --hz-ui-bg-1: hsl(0 0% 90%);
+    --hz-ui-bg-2: hsl(0 0% 75%);
+    --hz-ui-bg-3: hsl(0 0% 55%);
+
+    --hz-ui-bg-overlay: hsla(0 0% 100% 0.60);
+
+    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
+    --hz-ui-bg-inverted-hover:  hsla(0 0% 0% 0.85);
+
+    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
+
+    --hz-ui-secondary-0: hsl(266, 79%, 80%);
+    --hz-ui-secondary-1: hsl(266, 79%, 70%);
+    --hz-ui-secondary-2: hsl(266, 79%, 60%);
+    --hz-ui-secondary-3: hsl(266, 79%, 50%);
+
+    --hz-ui-primary: var(--hz-ui-bg-inverted);
+    --hz-ui-primary-hover: var(--hz-ui-bg-inverted-hover);
+    --hz-ui-primary-fg: var(--hz-ui-fg-inverted);
+
+    --hz-ui-secondary: var(--hz-ui-secondary-0);
+    --hz-ui-secondary-hover: var(--hz-ui-secondary-2);
+    --hz-ui-secondary-fg: var(--hz-ui-fg-0);
+
+    --hz-ui-nav: var(--hz-ui-fg-4);
+    --hz-ui-nav-current: var(--hz-ui-fg-0);
+    --hz-ui-nav-hover: var(--hz-ui-fg-0);
+
+    --hz-ui-destructive: hsl(0 62.8% 45%);
+    --hz-ui-destructive-hover: hsl(0 62.8% 25%);
+    --hz-ui-destructive-fg: hsl(0 0% 100%);
+
+    --hz-ui-ring: var(--hz-ui-fg-2);
+
+    --hz-ui-radius: 0.5rem;
+  }
+ 
+  .hanzo-ui-dark-theme {
+
+    --hz-ui-fg-0: hsl(0 0% 100%);
+    --hz-ui-fg-body: hsl(0, 0%, 97%);
+    --hz-ui-fg-1: hsl(0 0% 85%);
+    --hz-ui-fg-2: hsl(0 0% 70%);
+    --hz-ui-fg-3: hsl(0 0% 55%);
+    --hz-ui-fg-4: hsl(0 0% 40%);
+    --hz-ui-fg-5: hsl(0 0% 25%);
+
+    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
+    --hz-ui-bg-inverted-hover:  hsla(0, 0%, 100%, 0.85);
+
+    --hz-ui-bg-3: hsl(0 0% 25%);
+    --hz-ui-bg-2: hsl(0 0% 18%);
+    --hz-ui-bg-1: hsl(0 0% 12%);
+    --hz-ui-bg-0: hsl(0 0% 0%);
+
+    --hz-ui-bg-overlay: hsla(0 0% 0% 0.60);
+
+    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
+
+    --hz-ui-secondary-0: hsl(266, 79%, 40%);
+    --hz-ui-secondary-1: hsl(266, 79%, 50%);
+    --hz-ui-secondary-2: hsl(266, 79%, 60%);
+    --hz-ui-secondary-3: hsl(266, 79%, 70%);
+  }
+
+}
+

package/style/theme-provider.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { ThemeProviderProps } from "next-themes/dist/types"
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, ...props }) => (
+  <NextThemesProvider 
+    attribute="class" 
+    {...props}
+    value={{
+      light: 'hanzo-ui-light-theme',
+      dark: 'hanzo-ui-dark-theme'
+    }}
+  >
+    {children}
+  </NextThemesProvider>
+)
+
+export default ThemeProvider

package/CHANGELOG.md

@@ -1,184 +0,0 @@
-# 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

@@ -1,21 +0,0 @@
-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/dist/ai/index.js

@@ -1,53 +0,0 @@
-'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

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

package/dist/ai/index.mjs

@@ -1,4 +0,0 @@
-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

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