@hanzo/ui 4.5.3 → 4.6.0

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/blocks/components/content.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentType, type ReactNode} from 'react'
+import React, { ComponentType, type ReactNode} from 'react'
 
 import type * as B from '../def'
 

package/blocks/components/grid-block/index.tsx

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import { cn, containsToken } from '../../../util'
 import type { GridBlock } from '../../def'

package/blocks/components/screenful-block/content.tsx

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import type { Block, ScreenfulBlock} from '../../def'
 import { containsToken, cn } from '../../../util'

package/blocks/components/screenful-block/poster-background.tsx

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import type { VideoBlock } from '../../def'
 import { cn } from '../../../util'

package/components/index.ts

@@ -0,0 +1,56 @@
+// Auto-generated component exports
+// This file provides a central import point for all UI components
+// Usage: import { Button, Card, cn } from '@hanzo/ui/components'
+
+// Export commonly used utilities
+export { cn } from '../../../app/lib/utils'
+
+export * from '../../../app/registry/new-york/ui/accordion'
+export * from '../../../app/registry/new-york/ui/alert-dialog'
+export * from '../../../app/registry/new-york/ui/alert'
+export * from '../../../app/registry/new-york/ui/aspect-ratio'
+export * from '../../../app/registry/new-york/ui/avatar'
+export * from '../../../app/registry/new-york/ui/badge'
+export * from '../../../app/registry/new-york/ui/breadcrumb'
+export * from '../../../app/registry/new-york/ui/button'
+export * from '../../../app/registry/new-york/ui/calendar'
+export * from '../../../app/registry/new-york/ui/card'
+export * from '../../../app/registry/new-york/ui/carousel'
+export * from '../../../app/registry/new-york/ui/chart'
+export * from '../../../app/registry/new-york/ui/checkbox'
+export * from '../../../app/registry/new-york/ui/collapsible'
+export * from '../../../app/registry/new-york/ui/command'
+export * from '../../../app/registry/new-york/ui/context-menu'
+export * from '../../../app/registry/new-york/ui/dialog'
+export * from '../../../app/registry/new-york/ui/drawer'
+export * from '../../../app/registry/new-york/ui/dropdown-menu'
+export * from '../../../app/registry/new-york/ui/form'
+export * from '../../../app/registry/new-york/ui/hover-card'
+export * from '../../../app/registry/new-york/ui/input-otp'
+export * from '../../../app/registry/new-york/ui/input'
+export * from '../../../app/registry/new-york/ui/label'
+export * from '../../../app/registry/new-york/ui/menubar'
+export * from '../../../app/registry/new-york/ui/navigation-menu'
+export * from '../../../app/registry/new-york/ui/pagination'
+export * from '../../../app/registry/new-york/ui/popover'
+export * from '../../../app/registry/new-york/ui/progress'
+export * from '../../../app/registry/new-york/ui/radio-group'
+export * from '../../../app/registry/new-york/ui/resizable'
+export * from '../../../app/registry/new-york/ui/scroll-area'
+export * from '../../../app/registry/new-york/ui/select'
+export * from '../../../app/registry/new-york/ui/separator'
+export * from '../../../app/registry/new-york/ui/sheet'
+export * from '../../../app/registry/new-york/ui/sidebar'
+export * from '../../../app/registry/new-york/ui/skeleton'
+export * from '../../../app/registry/new-york/ui/slider'
+export * from '../../../app/registry/new-york/ui/sonner'
+export * from '../../../app/registry/new-york/ui/switch'
+export * from '../../../app/registry/new-york/ui/table'
+export * from '../../../app/registry/new-york/ui/tabs'
+export * from '../../../app/registry/new-york/ui/textarea'
+export * from '../../../app/registry/new-york/ui/toast'
+export * from '../../../app/registry/new-york/ui/toaster'
+export * from '../../../app/registry/new-york/ui/toggle-group'
+export * from '../../../app/registry/new-york/ui/toggle'
+export * from '../../../app/registry/new-york/ui/tooltip'
+export * from '../../../app/registry/new-york/ui/use-toast'

package/dist/button.d.ts

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

package/dist/button.js

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

package/dist/hooks/index.d.ts

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

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

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

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

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

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

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

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

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

package/dist/hooks/use-debounce.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export function useDebounce(value, delay = 500) {
+    const [debouncedValue, setDebouncedValue] = React.useState(value);
+    React.useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/dist/hooks/use-fill-ids.d.ts

@@ -0,0 +1,8 @@
+export declare const useFillId: (namespace: string) => {
+    fill: string;
+    id: string;
+};
+export declare const useFillIds: (namespace: string, length: number) => {
+    fill: string;
+    id: string;
+}[];

package/dist/hooks/use-fill-ids.js

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+export const useFillId = (namespace) => {
+    const id = `lobe-icons-${namespace.toLowerCase()}-fill`;
+    return useMemo(() => ({
+        fill: `url(#${id})`,
+        id,
+    }), [namespace]);
+};
+export const useFillIds = (namespace, length) => {
+    return useMemo(() => {
+        const ids = Array.from({ length }, (_, i) => {
+            const id = `lobe-icons-${namespace.toLowerCase()}-fill-${i}`;
+            return {
+                fill: `url(#${id})`,
+                id,
+            };
+        });
+        return ids;
+    }, [namespace]);
+};

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

@@ -0,0 +1 @@
+export declare function useMap<Key, Value>(initialState?: [Key, Value][]): Map<Key, Value>;

package/dist/hooks/use-map.js

@@ -0,0 +1,20 @@
+import React from 'react';
+export function useMap(initialState = []) {
+    const mapRef = React.useRef(new Map(initialState));
+    const [, reRender] = React.useReducer((x) => x + 1, 0);
+    mapRef.current.set = (...args) => {
+        Map.prototype.set.apply(mapRef.current, args);
+        reRender();
+        return mapRef.current;
+    };
+    mapRef.current.clear = (...args) => {
+        Map.prototype.clear.apply(mapRef.current, args);
+        reRender();
+    };
+    mapRef.current.delete = (...args) => {
+        const res = Map.prototype.delete.apply(mapRef.current, args);
+        reRender();
+        return res;
+    };
+    return mapRef.current;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare function useMeasure<T extends Element>(): [
+    React.RefCallback<T>,
+    {
+        width: number | null;
+        height: number | null;
+    }
+];

package/dist/hooks/use-measure.js

@@ -0,0 +1,25 @@
+import React from 'react';
+export function useMeasure() {
+    const [dimensions, setDimensions] = React.useState({
+        width: null,
+        height: null,
+    });
+    const previousObserver = React.useRef(null);
+    const customRef = React.useCallback((node) => {
+        if (previousObserver.current) {
+            previousObserver.current.disconnect();
+            previousObserver.current = null;
+        }
+        if (node?.nodeType === Node.ELEMENT_NODE) {
+            const observer = new ResizeObserver(([entry]) => {
+                if (entry && entry.borderBoxSize) {
+                    const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
+                    setDimensions({ width, height });
+                }
+            });
+            observer.observe(node);
+            previousObserver.current = observer;
+        }
+    }, []);
+    return [customRef, dimensions];
+}

package/dist/hooks/use-reverse-video-playback.d.ts

@@ -0,0 +1 @@
+export declare const useReverseVideoPlayback: () => import("react").RefObject<HTMLVideoElement>;

package/dist/hooks/use-reverse-video-playback.js

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from 'react';
+export const useReverseVideoPlayback = () => {
+    const videoRef = useRef(null);
+    const [isReversing, setIsReversing] = useState(false);
+    const playReverse = () => {
+        if (!videoRef.current)
+            return;
+        const video = videoRef.current;
+        const reversePlayback = () => {
+            if (video.currentTime <= 0) {
+                setIsReversing(false);
+                void video.play();
+                return;
+            }
+            video.currentTime -= 0.023;
+            requestAnimationFrame(reversePlayback);
+        };
+        reversePlayback();
+    };
+    useEffect(() => {
+        const videoElement = videoRef.current;
+        if (videoElement) {
+            const handleVideoEnd = () => {
+                if (isReversing) {
+                    setIsReversing(false);
+                    videoElement.currentTime = 0;
+                    void videoElement.play();
+                }
+                else {
+                    setIsReversing(true);
+                    playReverse();
+                }
+            };
+            videoElement.addEventListener('ended', handleVideoEnd);
+            return () => {
+                videoElement.removeEventListener('ended', handleVideoEnd);
+            };
+        }
+    }, [isReversing]);
+    return videoRef;
+};

package/dist/hooks/use-scroll-restoration.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const useScrollRestoration: ({ key, containerRef, scrollTopStateRef, }: {
+    key: string;
+    containerRef: React.RefObject<HTMLElement | null>;
+    scrollTopStateRef: React.RefObject<{
+        [key: string]: number;
+    } | null>;
+}) => void;

package/dist/hooks/use-scroll-restoration.js

@@ -0,0 +1,36 @@
+import React from 'react';
+export const useScrollRestoration = ({ key, containerRef, scrollTopStateRef, }) => {
+    const saveScroll = React.useCallback(() => {
+        if (scrollTopStateRef.current) {
+            scrollTopStateRef.current[`${key}-scrollTop`] =
+                containerRef?.current?.scrollTop ?? 0;
+        }
+    }, [containerRef, scrollTopStateRef, key]);
+    const restoreScroll = React.useCallback(() => {
+        if (containerRef.current) {
+            containerRef.current.scrollTo({
+                top: scrollTopStateRef?.current?.[`${key}-scrollTop`] ?? 0,
+            });
+        }
+    }, [containerRef, key, scrollTopStateRef]);
+    React.useLayoutEffect(() => {
+        return () => {
+            saveScroll();
+        };
+    }, [saveScroll]);
+    React.useEffect(() => {
+        // Small delay to ensure content is rendered
+        const timeoutId = setTimeout(restoreScroll, 100);
+        return () => clearTimeout(timeoutId);
+    }, [restoreScroll]);
+    React.useEffect(() => {
+        restoreScroll();
+    }, [restoreScroll]);
+    React.useEffect(() => {
+        const element = containerRef?.current;
+        element?.addEventListener('scroll', saveScroll);
+        return () => {
+            element?.removeEventListener('scroll', saveScroll);
+        };
+    }, [containerRef, saveScroll]);
+};

package/dist/mcp/enhanced-server.js

@@ -1,4 +1,4 @@
-import { registrySchema, Registry, RegistryItem } from "../registry";
+import { registrySchema } from "../registry";
 import { fetchRegistry, getRegistryItem, getRegistryItemUrl } from "../registry/api";
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { CallToolRequestSchema, ListToolsRequestSchema, ListResourcesRequestSchema, ReadResourceRequestSchema, ListPromptsRequestSchema, GetPromptRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
@@ -303,7 +303,7 @@ module.exports = {
 ### 3. Add the cn() utility
 Create \`lib/utils.ts\`:
 \`\`\`typescript
-import { type ClassValue, clsx } from "clsx"
+import { ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
@@ -1056,7 +1056,7 @@ Add to your \`globals.css\`:
 Create \`lib/utils.ts\`:
 
 \`\`\`typescript
-import { type ClassValue, clsx } from "clsx"
+import { ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {

package/dist/mcp/index.js

@@ -1,4 +1,4 @@
-import { registrySchema, Registry, RegistryItem } from "../registry";
+import { registrySchema } from "../registry";
 import { fetchRegistry, getRegistryItem, getRegistryItemUrl } from "../registry/api";
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";

package/dist/registry/api.d.ts

@@ -1,4 +1,4 @@
-import { RegistryItem, Registry } from ".";
+import { RegistryItem, Registry } from "./schemas";
 /**
  * Gets the full registry URL based on the registry name or URL provided
  * @param registry - Registry name, URL, or file path

package/dist/registry/api.js

@@ -1,5 +1,4 @@
-import { registryItemSchema, RegistryItem, Registry } from ".";
-import { z } from "zod";
+import { registryItemSchema } from "./schemas";
 const registryCache = new Map();
 /**
  * Gets the full registry URL based on the registry name or URL provided
@@ -11,8 +10,8 @@ export function getRegistryUrl(registry) {
     if (registry.startsWith("http")) {
         return registry;
     }
-    // Default to Hanzo registry if REGISTRY_BASE_URL is defined, otherwise use shadcn
-    const baseUrl = process.env.REGISTRY_BASE_URL || "https://ui.shadcn.com/registry";
+    // Default to Hanzo registry if REGISTRY_BASE_URL is defined, otherwise use hanzo
+    const baseUrl = process.env.REGISTRY_BASE_URL || "https://ui.hanzo.com/registry";
     // Check if registry is a path to a JSON file
     if (registry.endsWith(".json")) {
         return `${baseUrl}/${registry}`;