@hanzo/ui 4.5.4 → 4.6.0

package/primitives/toggle.tsx

@@ -1,73 +1,44 @@
-'use client'
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import * as React from 'react'
-import * as TogglePrimitive from '@radix-ui/react-toggle'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '../util'
+import { cn } from '../src/utils';
 
 const toggleVariants = cva(
-  'inline-flex items-center justify-center text-sm font-medium ' + 
-  'ring-offset-background ' + 
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' + 
-  'focus-visible:ring-offset-2 disabled:pointer-events-none ' +
-  'active:bg-level-3 active:text-accent ',
+  'ring-offset-background hover:bg-muted hover:text-text-secondary focus-visible:ring-ring data-[state=on]:bg-bg-quaternary inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-white',
   {
     variants: {
       variant: {
-        default: 'text-muted-1 hover:text-accent ' + 
-          'data-[state=off]:bg-level-1 hover:data-[state=off]:text-foreground ' + 
-          'data-[state=on]:text-foreground data-[state=on]:bg-level-3  ' + 
-          'data-[state=on]:hover:bg-level-3 ',
-
-        outline: 'border border-muted-3 text-muted-1 ' +
-          'data-[state=off]:bg-level-1 hover:data-[state=off]:text-foreground ' + 
-          'data-[state=on]:bg-level-3 data-[state=on]:border-muted data-[state=on]:text-foreground',
+        default: 'bg-bg-tertiary',
+        outline:
+          'border-divider hover:bg-bg-tertiary border bg-transparent hover:text-white',
       },
       size: {
         default: 'h-10 px-3',
-        hfull: 'h-full px-3',
-        sm: 'h-9 px-2',
+        sm: 'h-9 px-2.5',
         lg: 'h-11 px-5',
       },
-      rounded: {
-        full: 'rounded-full',
-        sm: 'rounded-sm',
-        lsm: 'rounded-l-sm',
-        rsm: 'rounded-r-sm',
-        md: 'rounded-md',
-        lmd: 'rounded-l-md',
-        rmd: 'rounded-r-md',
-        lg: 'rounded-lg',
-        llg: 'rounded-l-lg',
-        rlg: 'rounded-r-lg',
-        xl: 'rounded-xl',
-        lxl: 'rounded-l-xl',
-        rxl: 'rounded-r-xl',
-        none: 'rounded-none'
-      }
-      
     },
     defaultVariants: {
       variant: 'default',
       size: 'default',
-      rounded: 'md'
     },
-  }
-)
+  },
+);
 
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, rounded, ...props }, ref) => (
+const Toggle = ({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) => (
   <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, rounded} ), className  )}
+    className={cn(toggleVariants({ variant, size, className }))}
     {...props}
   />
-))
+);
 
-Toggle.displayName = TogglePrimitive.Root.displayName
+Toggle.displayName = TogglePrimitive.Root.displayName;
 
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };

package/primitives/tooltip.tsx

@@ -1,48 +1,47 @@
-'use client'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
 
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '../src/utils';
 
-import { cn } from '../util'
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const TooltipProvider = TooltipPrimitive.Provider
+const Tooltip = TooltipPrimitive.Root;
 
-const Tooltip = TooltipPrimitive.Root
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipPortal = TooltipPrimitive.Portal;
+const TooltipArrow = TooltipPrimitive.TooltipArrow;
 
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+const TooltipContent = ({
+  className,
+  sideOffset = 4,
+  showArrow = true,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  showArrow?: boolean;
+}) => (
   <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md border bg-level-1 px-3 py-1.5 text-sm text-muted-foreground shadow-md animate-in fade-in-50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className
+      'border-divider bg-bg-dark animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-w-[280px] rounded-lg border px-3 py-1.5 text-xs text-white',
+      className,
     )}
+    sideOffset={sideOffset}
     {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-const TooltipWrapper: React.FC<{
-  text: string
-  tooltipClx?: string
-} & React.PropsWithChildren> = ({
-  children,
-  text,
-  tooltipClx=''
-}) => (
-  <Tooltip>
-    <TooltipTrigger asChild>
-      {children}
-    </TooltipTrigger>
-    <TooltipContent className={tooltipClx}>
-      {text}
-    </TooltipContent>
-  </Tooltip>
-)
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipWrapper }
+  >
+    {props.children}
+
+    {showArrow && (
+      <TooltipPrimitive.Arrow className="fill-bg-dark -my-px drop-shadow-[0_1px_0_#313336]" />
+    )}
+  </TooltipPrimitive.Content>
+);
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipPortal,
+  TooltipArrow,
+};

package/registry.json

@@ -1,5 +1,5 @@
 {
-  "$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/src/button.ts

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

package/src/hooks/index.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/src/hooks/use-click-away.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export function useClickAway<T extends Element>(
+  cb: (e: Event) => void,
+): React.RefObject<T | null> {
+  const ref = React.useRef<T | null>(null);
+  const refCb = React.useRef(cb);
+
+  React.useLayoutEffect(() => {
+    refCb.current = cb;
+  });
+
+  React.useEffect(() => {
+    const handler = (e: Event) => {
+      const element = ref.current;
+      if (element && !element.contains(e.target as Node)) {
+        refCb.current(e);
+      }
+    };
+
+    document.addEventListener('mousedown', handler);
+    document.addEventListener('touchstart', handler);
+
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      document.removeEventListener('touchstart', handler);
+    };
+  }, []);
+
+  return ref;
+}

package/src/hooks/use-combined-refs.ts

@@ -0,0 +1,22 @@
+import type React from 'react';
+import { useEffect, useRef } from 'react';
+
+function useCombinedRefs<T>(
+  ...refs: React.ForwardedRef<T>[]
+): React.RefObject<T | null> {
+  const targetRef = useRef<T>(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/src/hooks/use-copy-clipboard.ts

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { copyToClipboard } from '../helpers';
+
+type UseCopyClipboardProps = {
+  string?: string;
+  onCopyClipboard?: () => void;
+};
+
+export const useCopyClipboard = ({
+  string,
+  onCopyClipboard,
+}: UseCopyClipboardProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  let timeout: ReturnType<typeof setTimeout>;
+  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/src/hooks/use-debounce.ts

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

package/src/hooks/use-fill-ids.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+
+export const useFillId = (namespace: string) => {
+  const id = `lobe-icons-${namespace.toLowerCase()}-fill`;
+  return useMemo(
+    () => ({
+      fill: `url(#${id})`,
+      id,
+    }),
+    [namespace],
+  );
+};
+
+export const useFillIds = (namespace: string, length: number) => {
+  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/src/hooks/use-map.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export function useMap<Key, Value>(initialState: [Key, Value][] = []) {
+  const mapRef = React.useRef(new Map<Key, Value>(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/src/hooks/use-measure.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+
+export function useMeasure<T extends Element>(): [
+  React.RefCallback<T>,
+  {
+    width: number | null;
+    height: number | null;
+  },
+] {
+  const [dimensions, setDimensions] = React.useState<{
+    width: number | null;
+    height: number | null;
+  }>({
+    width: null,
+    height: null,
+  });
+
+  const previousObserver = React.useRef<ResizeObserver | null>(null);
+
+  const customRef = React.useCallback((node: T) => {
+    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/src/hooks/use-reverse-video-playback.ts

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useReverseVideoPlayback = () => {
+  const videoRef = useRef<HTMLVideoElement>(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/src/hooks/use-scroll-restoration.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+
+export const useScrollRestoration = ({
+  key,
+  containerRef,
+  scrollTopStateRef,
+}: {
+  key: string;
+  containerRef: React.RefObject<HTMLElement | null>;
+  scrollTopStateRef: React.RefObject<{ [key: string]: number } | null>;
+}): void => {
+  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/src/mcp/README.md

@@ -122,7 +122,7 @@ This will compile the TypeScript files and make the MCP server available.
 
 ## Registry Format
 
-The registry follows the same format as shadcn/ui registries, with items defined as:
+The registry follows the same format as hanzo/ui registries, with items defined as:
 
 ```json
 {

package/src/mcp/enhanced-server.ts

@@ -339,7 +339,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[]) {
@@ -1132,7 +1132,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/src/registry/api.ts

@@ -1,4 +1,4 @@
-import { registryItemSchema, RegistryItem, Registry } from "."
+import { registryItemSchema, RegistryItem, Registry } from "./schemas"
 import { z } from "zod"
 
 const registryCache = new Map<string, Promise<any>>()
@@ -14,8 +14,8 @@ export function getRegistryUrl(registry: string): string {
     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")) {

package/src/registry/index.ts

@@ -1,6 +1,6 @@
 import { z } from "zod"
 
-// Define the file schema to match shadcn/ui's format
+// Define the file schema to match hanzo/ui's format
 export const fileSchema = z.object({
   path: z.string(),
   content: z.string().optional(),
@@ -8,7 +8,7 @@ export const fileSchema = z.object({
   target: z.string().optional(),
 })
 
-// Registry item schema aligned with shadcn/ui format
+// Registry item schema aligned with hanzo/ui format
 export const registryItemSchema = z.object({
   name: z.string(),
   type: z.string(),
@@ -26,7 +26,7 @@ export const registryItemSchema = z.object({
   subcategory: z.string().optional(),
 })
 
-// Registry schema aligned with shadcn/ui format
+// Registry schema aligned with hanzo/ui format
 export const registrySchema = z.object({
   $schema: z.string().optional(),
   name: z.string(),

package/src/utils.ts

@@ -0,0 +1 @@
+export * from '../../../app/lib/utils'

package/style/theme-provider.tsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes/dist/types"
+import { ThemeProviderProps } from "next-themes/dist/types"
 
 const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, ...props }) => (
   <NextThemesProvider 

package/test-imports.mjs

@@ -0,0 +1,19 @@
+// Test file to verify all import styles work correctly
+
+// Test 1: Direct import from @hanzo/ui (top-level)
+import { Button, Card } from '@hanzo/ui'
+console.log('✓ Top-level import works:', typeof Button, typeof Card)
+
+// Test 2: Import from /components (same as top-level)
+import { Badge, Alert } from '@hanzo/ui/components'
+console.log('✓ Components import works:', typeof Badge, typeof Alert)
+
+// Test 3: Utility imports
+import { cn } from '@hanzo/ui/lib/utils'
+console.log('✓ Utils import works:', typeof cn)
+
+console.log('\n🎉 All main import styles are working correctly!')
+console.log('\nSupported import styles:')
+console.log('  - import { Button } from "@hanzo/ui"')
+console.log('  - import { Button } from "@hanzo/ui/components"')
+console.log('  - import { cn } from "@hanzo/ui/lib/utils"')

package/types/animation-def.ts

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

package/types/button-def.ts

@@ -1,4 +1,4 @@
-import { type ButtonProps } from '../primitives/button'
+import { ButtonProps } from '../primitives/button'
 
 type SubmitServerAction = (data: any, enclosure?: any) => Promise<any>
 

package/types/index.ts

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

package/util/blob.ts

@@ -0,0 +1,28 @@
+import { Buffer } from 'buffer';
+
+export const blobToBase64 = (blob: Blob): Promise<string> => {
+  const reader = new FileReader();
+  reader.readAsDataURL(blob);
+  return new Promise((resolve) => {
+    reader.onloadend = () => {
+      resolve(reader.result as string);
+    };
+  });
+};
+
+export const dataUrlToFile = (
+  dataUrl: string,
+  filename: string,
+): File | undefined => {
+  const arr = dataUrl.split(',');
+  if (arr.length < 2) {
+    return undefined;
+  }
+  const mimeArr = arr[0].match(/:(.*?);/);
+  if (!mimeArr || mimeArr.length < 2) {
+    return undefined;
+  }
+  const mime = mimeArr[1];
+  const buff = Buffer.from(arr[1], 'base64');
+  return new File([buff], filename, { type: mime });
+};