@hanzo/ui 5.0.2 → 5.1.0

package/primitives/toggle-group.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,54 +0,0 @@
-/**
- * @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'