@hanzo/ui 4.7.0 → 4.8.2

package/primitives/toggle-group.tsx

@@ -0,0 +1,63 @@
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { VariantProps } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from '../src/utils';
+import { toggleVariants } from './toggle';
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: 'default',
+  variant: 'default',
+});
+
+const ToggleGroup = ({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) => (
+  <ToggleGroupPrimitive.Root
+    className={cn('flex items-center justify-center gap-1', className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+);
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = ({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+};
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

package/primitives/toggle.tsx

@@ -0,0 +1,44 @@
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const toggleVariants = cva(
+  '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: 'bg-bg-tertiary',
+        outline:
+          'border-divider hover:bg-bg-tertiary border bg-transparent hover:text-white',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const Toggle = ({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) => (
+  <TogglePrimitive.Root
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+);
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/primitives/tooltip.tsx

@@ -0,0 +1,47 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipPortal = TooltipPrimitive.Portal;
+const TooltipArrow = TooltipPrimitive.TooltipArrow;
+
+const TooltipContent = ({
+  className,
+  sideOffset = 4,
+  showArrow = true,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  showArrow?: boolean;
+}) => (
+  <TooltipPrimitive.Content
+    className={cn(
+      '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}
+  >
+    {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/primitives/video-player.tsx

@@ -0,0 +1,23 @@
+'use client'
+import React from 'react'
+
+interface VideoProps extends React.ComponentPropsWithoutRef<"video"> {
+  sources: string[]
+}
+
+const VideoPlayer = React.forwardRef<HTMLVideoElement, VideoProps>(
+({
+  sources, 
+  ...rest
+}, ref) => {
+  
+  return (
+    <video ref={ref} {...rest} >
+    {sources.map((source, index) => (  
+      <source key={index} src={source} />
+    ))} 
+    </video>
+  )
+})
+
+export default VideoPlayer

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 '../../util/copy-to-clipboard';
+
+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/index-lean.ts

@@ -0,0 +1,87 @@
+/**
+ * @hanzo/ui - Lean Build (Minimal Bundle)
+ *
+ * This is a lightweight version that excludes heavy dependencies.
+ * Heavy components can be imported separately when needed:
+ *
+ * - Syntax highlighting: import from '@hanzo/ui/components/syntax-highlighter'
+ * - Markdown: import from '@hanzo/ui/components/markdown'
+ * - Math rendering: import from '@hanzo/ui/components/katex'
+ * - Animations: import from 'framer-motion' directly
+ */
+
+// Core utilities - must be imported first
+export { cn } from './utils'
+export * from './utils'
+
+// Hooks (lightweight)
+export * from './hooks'
+
+// Only export the core Radix primitives used in the desktop app
+// Button
+export { Button, buttonVariants } from '../primitives/button'
+export type { ButtonProps } from '../primitives/button'
+
+// Form components
+export * from '../primitives/form'
+export * from '../primitives/input'
+export * from '../primitives/label'
+export * from '../primitives/textarea'
+export * from '../primitives/checkbox'
+export * from '../primitives/radio-group'
+export * from '../primitives/select'
+export * from '../primitives/switch'
+
+// Layout
+export * from '../primitives/card'
+export * from '../primitives/separator'
+export * from '../primitives/scroll-area'
+export * from '../primitives/tabs'
+export * from '../primitives/accordion'
+
+// Feedback
+export * from '../primitives/alert'
+export * from '../primitives/alert-dialog'
+export * from '../primitives/dialog'
+export * from '../primitives/toast'
+export * from '../primitives/progress'
+export * from '../primitives/skeleton'
+export * from '../primitives/badge'
+
+// Navigation
+export * from '../primitives/dropdown-menu'
+export * from '../primitives/command'
+export * from '../primitives/breadcrumb'
+export * from '../primitives/sheet'
+
+// Data display
+export * from '../primitives/table'
+export * from '../primitives/avatar'
+export * from '../primitives/hover-card'
+export * from '../primitives/popover'
+export * from '../primitives/tooltip'
+
+// Other essentials
+export * from '../primitives/collapsible'
+export * from '../primitives/context-menu'
+export * from '../primitives/resizable'
+export * from '../primitives/slider'
+export * from '../primitives/toggle'
+export * from '../primitives/toggle-group'
+
+// Re-export assets (icons are lightweight)
+export * from '../assets'
+
+// Re-export utilities
+export * from '../util'
+export * from '../util/index-client'
+
+// Types
+export * from '../types'
+
+// NOTE: Heavy components excluded from lean build:
+// - MarkdownText (react-markdown + plugins)
+// - SyntaxHighlighter (react-syntax-highlighter)
+// - KatexRender (katex)
+// - Animated components (framer-motion)
+// - MediaStack, Mapbox, Spline3D, PlotlyChart

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'