@hanzo/ui 4.6.0 → 4.8.2

package/src/index.ts

@@ -0,0 +1,54 @@
+/**
+ * @hanzo/ui - Complete UI Library
+ * 
+ * This file exports all components, utilities, hooks, and blocks from the @hanzo/ui library.
+ * Components are organized by category and support tree-shaking.
+ */
+
+// Core utilities - must be imported first
+export { cn } from './utils'
+export * from './utils'
+
+// Registry exports for tooling
+export * from './registry'
+
+// MCP (Model Context Protocol) support
+export * from './mcp'
+
+// Hooks
+export * from './hooks'
+
+// Re-export all primitives
+export * from '../primitives/index-next'
+export * from '../primitives/index-common'
+
+// Re-export assets
+export * from '../assets'
+
+// Re-export blocks
+export * from '../blocks'
+
+// Re-export components (if different from primitives)
+export * from '../components'
+
+// Re-export types
+export * from '../types'
+
+// Re-export utilities
+export * from '../util'
+export * from '../util/index-client'
+
+// Re-export tailwind configuration helpers
+export * from '../tailwind'
+
+// Theme provider for brand support
+export { ThemeProvider } from '../style/theme-provider'
+
+// Framework-specific exports
+export * as React from '../frameworks/react'
+export * as Vue from '../frameworks/vue'
+export * as Svelte from '../frameworks/svelte'
+export * as ReactNative from '../frameworks/react-native'
+
+// Export version
+export const VERSION = '4.8.0'

package/src/registry/api.ts

@@ -1,4 +1,4 @@
-import { registryItemSchema, RegistryItem, Registry } from "./schemas"
+import { registryItemSchema, RegistryItem, Registry } from "./index"
 import { z } from "zod"
 
 const registryCache = new Map<string, Promise<any>>()

package/src/utils.ts

@@ -1 +1,19 @@
-export * from '../../../app/lib/utils'
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatDate(input: string | number): string {
+  const date = new Date(input)
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  })
+}
+
+export function absoluteUrl(path: string) {
+  return `${process.env.NEXT_PUBLIC_APP_URL || ''}${path}`
+}

package/tailwind/tailwind.config.hanzo-preset.js

@@ -2,13 +2,13 @@ import animatePlugin from 'tailwindcss-animate'
 import containerQueriesPlugin from '@tailwindcss/container-queries'
 import tailwindInteractionMediaPlugin from 'tailwindcss-interaction-media'
 
-import colors from './colors.tailwind'
-import safelist from './safelist.tailwind'
-import screens from './screens.tailwind'
-import spacing from './spacing.tailwind'
-import fontSize from './fontSize.tailwind'
-import fontFamily from './fontFamily.tailwind'
-import zIndex from './z-index.tailwind'
+import colors from './colors.tailwind.js'
+import safelist from './safelist.tailwind.js'
+import screens from './screens.tailwind.js'
+import spacing from './spacing.tailwind.js'
+import fontSize from './fontSize.tailwind.ts'
+import fontFamily from './fontFamily.tailwind.ts'
+import zIndex from './z-index.tailwind.js'
 import typographyPlugin from './typo-plugin'
 
 export default {

package/tailwind/typo-plugin/index.js

@@ -1,4 +1,4 @@
-import plugin from 'tailwindcss/plugin'
+import plugin from 'tailwindcss/plugin.js'
 import merge from 'lodash.merge'
 import castArray from 'lodash.castarray'
 import getStyles from './get-plugin-styles'

package/types/animation-def.ts

@@ -1,3 +1,3 @@
 type AnimationDef = string
 
-export { AnimationDef as default }
+export type { AnimationDef as default }

package/types/index.ts

@@ -1,6 +1,7 @@
 
 export type { default as AnimationDef } from './animation-def'
-export { Breakpoint, Breakpoints } from './breakpoints'
+export type { Breakpoint } from './breakpoints'
+export { Breakpoints } from './breakpoints'
 export type { default as BulletItem } from './bullet-item'
 
 export type {

package/util/blob.ts

@@ -1,5 +1,3 @@
-import { Buffer } from 'buffer';
-
 export const blobToBase64 = (blob: Blob): Promise<string> => {
   const reader = new FileReader();
   reader.readAsDataURL(blob);
@@ -23,6 +21,13 @@ export const dataUrlToFile = (
     return undefined;
   }
   const mime = mimeArr[1];
-  const buff = Buffer.from(arr[1], 'base64');
-  return new File([buff], filename, { type: mime });
+
+  // Convert base64 to binary string, then to Uint8Array (browser-compatible)
+  const binaryString = atob(arr[1]);
+  const bytes = new Uint8Array(binaryString.length);
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+
+  return new File([bytes], filename, { type: mime });
 };

package/util/date.ts

@@ -1,4 +1,5 @@
-import { FormattedMessage } from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
+// import { FormattedMessage } from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
+type FormattedMessage = any;
 
 export type ChatConversationMessage = {
   hash: string;

package/util/format-text.ts

@@ -1,4 +1,5 @@
-import { HanzoToolHeader } from '@hanzo_network/hanzo-message-ts/api/tools/types';
+// import { HanzoToolHeader } from '@hanzo_network/hanzo-message-ts/api/tools/types';
+type HanzoToolHeader = any;
 
 export const formatText = (text: string) => {
   const camelToSpaces = text.replace(/([a-z])([A-Z])/g, '$1 $2');

package/util/index.ts

@@ -1,3 +1,4 @@
+// Export all utilities
 export * from './date';
 export * from './file';
 export * from './create-shadow-root';
@@ -7,3 +8,105 @@ export * from './copy-to-clipboard';
 export * from './format-text';
 export * from './toasts';
 export * from './debounce';
+export { default as spreadToTransform } from './spread-to-transform';
+export * from './specifier';
+export * from './number-abbreviate';
+export * from './format-to-max-char';
+export * from './format-and-abbreviate-as-currency';
+export * from './two-way-map';
+
+// Import and re-export cn utility and other common functions
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatDate(input: string | number): string {
+  const date = new Date(input);
+  return date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function absoluteUrl(path: string): string {
+  if (typeof window !== 'undefined') return path;
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}${path}`;
+  return `http://localhost:${process.env.PORT ?? 3000}${path}`;
+}
+
+// Export VariantProps type from class-variance-authority
+export type { VariantProps } from 'class-variance-authority';
+
+// For backward compatibility with components importing from util
+export function constrain(value: number, min: number, max: number): number;
+export function constrain(dim: { w: number; h: number }, constrainTo: { w: number; h: number }): { w: number; h: number };
+export function constrain(
+  value: number | { w: number; h: number },
+  minOrConstrainTo: number | { w: number; h: number },
+  max?: number
+): number | { w: number; h: number } {
+  if (typeof value === 'number' && typeof minOrConstrainTo === 'number' && typeof max === 'number') {
+    return Math.min(Math.max(value, minOrConstrainTo), max);
+  }
+
+  if (typeof value === 'object' && typeof minOrConstrainTo === 'object') {
+    const dim = value;
+    const constrainTo = minOrConstrainTo;
+    const aspectRatio = dim.w / dim.h;
+    const constrainAspectRatio = constrainTo.w / constrainTo.h;
+
+    if (aspectRatio > constrainAspectRatio) {
+      // constrain by width
+      return {
+        w: constrainTo.w,
+        h: constrainTo.w / aspectRatio
+      };
+    } else {
+      // constrain by height
+      return {
+        w: constrainTo.h * aspectRatio,
+        h: constrainTo.h
+      };
+    }
+  }
+
+  throw new Error('Invalid parameters for constrain function');
+}
+
+// Export round, pxToRem, pxToEm for tailwind plugin
+export function round(value: number): number {
+  return Math.round(value * 100) / 100;
+}
+
+export function pxToRem(px: number, base = 16): string {
+  return `${px / base}rem`;
+}
+
+export function pxToEm(px: number, base = 16): string {
+  return `${px / base}em`;
+}
+
+// Missing utility functions
+export function containsToken(text: string, token: string): boolean {
+  return text.toLowerCase().includes(token.toLowerCase());
+}
+
+export function ldMerge(...objects: any[]): any {
+  // Simple merge function for lodash compatibility
+  const result = {};
+  for (const obj of objects) {
+    if (obj && typeof obj === 'object') {
+      Object.assign(result, obj);
+    }
+  }
+  return result;
+}
+
+export function asNum(value: any, defaultValue = 0): number {
+  const num = Number(value);
+  return isNaN(num) ? defaultValue : num;
+}

package/util/spread-to-transform.ts

@@ -1,19 +1,18 @@
 import type { MediaTransform } from '../types'
 
-export default (t: MediaTransform) => {
-
-  let transformStrings: string[] = [] 
+export function spreadToTransform(t: MediaTransform) {
+  let transformStrings: string[] = []
   const scaleVal = 'scale' in t ? t.scale : undefined
   if (scaleVal) {
     if (typeof scaleVal === 'number') {
-      transformStrings.push(`scale(${scaleVal})`)   
+      transformStrings.push(`scale(${scaleVal})`)
     }
     else if (
-      Array.isArray(scaleVal) && 
-      scaleVal.length == 2 && 
+      Array.isArray(scaleVal) &&
+      scaleVal.length == 2 &&
       typeof scaleVal[0] === 'number'
     ) {
-      transformStrings.push(`scale(${scaleVal[0]}, ${scaleVal[1]})`)   
+      transformStrings.push(`scale(${scaleVal[0]}, ${scaleVal[1]})`)
     }
     else {
       throw new Error("parsing MediaTransform: Unrecognized value for 'scale'!")
@@ -21,4 +20,6 @@ export default (t: MediaTransform) => {
   }
 
   return transformStrings.length > 0 ? { transform: transformStrings.join(' ') } : {}
-}
+}
+
+export default spreadToTransform

package/MCP-INSTRUCTIONS.md

@@ -1,73 +0,0 @@
-# Using @hanzo/ui with AI Assistants
-
-This guide explains how to use @hanzo/ui with AI assistants through the Model Context Protocol (MCP).
-
-## Getting Started
-
-1. Install the package:
-
-```bash
-npm install @hanzo/ui
-```
-
-2. Start the MCP server:
-
-```bash
-npx @hanzo/ui registry:mcp
-```
-
-3. Configure your AI assistant to use the server.
-
-## Available Commands
-
-- **Initialize a new project**:
-  ```bash
-  npx @hanzo/ui init --style=default
-  ```
-
-- **List available components**:
-  ```bash
-  npx @hanzo/ui list
-  ```
-
-- **Add a component**:
-  ```bash
-  npx @hanzo/ui add button
-  ```
-
-## Using with LLMs
-
-AI Assistants like Claude or ChatGPT can help you explore and use the components. Just describe what you need, and the AI can guide you through:
-
-- Finding the right component
-- Installing and configuring it
-- Using it in your project
-
-Example prompt: "I need a dropdown menu component for my React project. Can you help me find and set it up using @hanzo/ui?"
-
-## Registry Configuration
-
-You can create a custom registry for your components, making them available through the same interface. To create a registry:
-
-1. Set up the registry structure
-2. Run the update-registry script
-3. Host the registry files
-4. Point to your custom registry:
-
-```bash
-npx @hanzo/ui registry:mcp --registry=https://your-registry-url.com/registry.json
-```
-
-## HTTP Mode
-
-For web-based applications, you can run the MCP server in HTTP mode:
-
-```bash
-npx @hanzo/ui registry:mcp --http --port=3333
-```
-
-This exposes an HTTP endpoint at http://localhost:3333 that you can use to communicate with the MCP server.
-
-## Learn More
-
-For detailed documentation, see [README-MCP.md](./README-MCP.md) or visit the [Hanzo UI website](https://ui.hanzo.ai).

package/README-MCP.md

@@ -1,175 +0,0 @@
-# Hanzo UI with MCP Support
-
-This implementation provides Model Context Protocol (MCP) support for the Hanzo UI library, enabling AI assistants to interact with the component registry based on hanzo/ui.
-
-## Quick Start
-
-```bash
-# Run with npx (recommended)
-npx @hanzo/ui registry:mcp
-
-# Or set a custom registry URL
-npx @hanzo/ui registry:mcp --registry=https://ui.hanzo.ai/registry/registry.json
-
-# Run in HTTP mode instead of stdio
-npx @hanzo/ui registry:mcp --http --port=3333
-```
-
-## Setup and Usage
-
-### Configure Your LLM Tool
-
-To configure your AI assistant or LLM to use the Hanzo UI MCP server, add the following configuration:
-
-```json
-{
-  "name": "hanzo-ui",
-  "command": "npx @hanzo/ui registry:mcp"
-}
-```
-
-### Available Tools
-
-The MCP server provides the following tools for AI assistants:
-
-1. `init` - Initialize a new project using @hanzo/ui components and styles
-2. `list_components` - List all available components in the registry
-3. `get_component` - Get detailed information about a specific component
-4. `add_component` - Get instructions for adding a component to a project
-5. `list_styles` - List all available styles in the registry
-6. `search_registry` - Search the registry for components matching criteria
-
-### Registry Configuration
-
-The registry URL can be configured by setting the `REGISTRY_URL` environment variable:
-
-```bash
-export REGISTRY_URL="https://ui.hanzo.ai/registry/registry.json"
-npx @hanzo/ui registry:mcp
-```
-
-Or by using the `--registry` command-line option:
-
-```bash
-npx @hanzo/ui registry:mcp --registry=https://ui.hanzo.ai/registry/registry.json
-```
-
-## HTTP Mode
-
-You can run the MCP server in HTTP mode, which exposes the server over HTTP rather than stdio:
-
-```bash
-npx @hanzo/ui registry:mcp --http --port=3333
-```
-
-This allows you to access the MCP server directly from web applications or other HTTP clients.
-
-## Developer Instructions
-
-### Building from Source
-
-```bash
-# Clone the repository
-git clone https://github.com/hanzoai/ui.git
-cd ui/pkg/ui
-
-# Install dependencies
-npm install
-
-# Build the package
-npm run build
-
-# Run the MCP server
-node ./bin/cli.js registry:mcp
-```
-
-### Project Structure
-
-- `/pkg/ui/mcp/`: MCP server implementation
-- `/pkg/ui/registry/`: Registry schema and API
-- `/pkg/ui/bin/`: CLI tools for running the MCP server
-
-### Creating a Registry
-
-The registry is compatible with hanzo/ui's registry format. To create a custom registry:
-
-1. Create a `registry.json` file using the schema from `/pkg/ui/registry/schema.ts`
-2. Build the registry using a build script
-3. Host the registry files on a web server or CDN
-4. Point the MCP server to your custom registry using the `--registry` option
-
-## How It Works
-
-The MCP server enables AI assistants to:
-
-1. Discover and browse available components in your registry
-2. Fetch detailed information about specific components
-3. Provide instructions on adding components to projects
-4. Initialize new projects with your component library
-
-This makes it easy for users to interact with your UI library through conversational interfaces.
-
-## Example Interactions
-
-### Initialize a Project
-
-```
-Assistant: To create a new project with Hanzo UI components, you can run:
-
-npx create-next-app@latest my-app
-cd my-app
-npx @hanzo/ui@latest init
-```
-
-### Add a Component
-
-```
-Assistant: To add the Button component to your project:
-
-npx @hanzo/ui@latest add button
-
-This will install the component and its dependencies.
-```
-
-### Search for Components
-
-```
-Assistant: I found several form-related components:
-- form
-- input
-- checkbox
-- select
-- textarea
-
-Which one would you like to add to your project?
-```
-
-## Technical Details
-
-### Registry Schema
-
-The registry schema is compatible with hanzo/ui and includes:
-
-- Component metadata (name, description, type)
-- Dependencies (npm packages)
-- Registry dependencies (other components)
-- Component files with source code
-- Category and subcategory information
-
-### MCP Integration
-
-The MCP server implements the Model Context Protocol, enabling AI assistants to:
-
-- Query the registry for components
-- Get detailed information about components
-- Provide installation instructions
-- Generate example usage code
-
-### Command-Line Interface
-
-The CLI provides options for:
-
-- Setting the registry URL
-- Running in HTTP mode
-- Specifying the port for HTTP mode
-- Verbose logging

package/dist/button.d.ts

@@ -1 +0,0 @@
-export * from '../../../app/registry/new-york/ui/button';

package/dist/button.js

@@ -1 +0,0 @@
-export * from '../../../app/registry/new-york/ui/button';

package/dist/hooks/index.d.ts

@@ -1,7 +0,0 @@
-export * from './use-debounce';
-export * from './use-map';
-export * from './use-measure';
-export * from './use-click-away';
-export * from './use-copy-clipboard';
-export * from './use-reverse-video-playback';
-export * from './use-scroll-restoration';

package/dist/hooks/index.js

@@ -1,7 +0,0 @@
-export * from './use-debounce';
-export * from './use-map';
-export * from './use-measure';
-export * from './use-click-away';
-export * from './use-copy-clipboard';
-export * from './use-reverse-video-playback';
-export * from './use-scroll-restoration';

package/dist/hooks/use-click-away.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function useClickAway<T extends Element>(cb: (e: Event) => void): React.RefObject<T | null>;

package/dist/hooks/use-click-away.js

@@ -1,23 +0,0 @@
-import React from 'react';
-export function useClickAway(cb) {
-    const ref = React.useRef(null);
-    const refCb = React.useRef(cb);
-    React.useLayoutEffect(() => {
-        refCb.current = cb;
-    });
-    React.useEffect(() => {
-        const handler = (e) => {
-            const element = ref.current;
-            if (element && !element.contains(e.target)) {
-                refCb.current(e);
-            }
-        };
-        document.addEventListener('mousedown', handler);
-        document.addEventListener('touchstart', handler);
-        return () => {
-            document.removeEventListener('mousedown', handler);
-            document.removeEventListener('touchstart', handler);
-        };
-    }, []);
-    return ref;
-}

package/dist/hooks/use-combined-refs.d.ts

@@ -1,3 +0,0 @@
-import type React from 'react';
-declare function useCombinedRefs<T>(...refs: React.ForwardedRef<T>[]): React.RefObject<T | null>;
-export { useCombinedRefs };

package/dist/hooks/use-combined-refs.js

@@ -1,18 +0,0 @@
-import { useEffect, useRef } from 'react';
-function useCombinedRefs(...refs) {
-    const targetRef = useRef(null);
-    useEffect(() => {
-        refs.forEach((ref) => {
-            if (!ref)
-                return;
-            if (typeof ref === 'function') {
-                ref(targetRef.current);
-            }
-            else {
-                ref.current = targetRef.current;
-            }
-        });
-    }, [refs]);
-    return targetRef;
-}
-export { useCombinedRefs };

package/dist/hooks/use-copy-clipboard.d.ts

@@ -1,9 +0,0 @@
-type UseCopyClipboardProps = {
-    string?: string;
-    onCopyClipboard?: () => void;
-};
-export declare const useCopyClipboard: ({ string, onCopyClipboard, }: UseCopyClipboardProps) => {
-    isCopied: boolean;
-    onCopy: () => Promise<void>;
-};
-export {};

package/dist/hooks/use-copy-clipboard.js

@@ -1,21 +0,0 @@
-import { useState } from 'react';
-import { copyToClipboard } from '../helpers';
-export const useCopyClipboard = ({ string, onCopyClipboard, }) => {
-    const [isCopied, setIsCopied] = useState(false);
-    let timeout;
-    const onCopy = async () => {
-        if (!string)
-            return;
-        const string_ = string.trim();
-        if (onCopyClipboard && typeof onCopyClipboard === 'function') {
-            onCopyClipboard();
-        }
-        else {
-            await copyToClipboard(string_);
-        }
-        setIsCopied(true);
-        clearTimeout(timeout);
-        timeout = setTimeout(() => setIsCopied(false), 1000);
-    };
-    return { isCopied, onCopy };
-};

package/dist/hooks/use-debounce.d.ts

@@ -1 +0,0 @@
-export declare function useDebounce(value: string, delay?: number): string;