@hanzo/ui 4.6.0 → 4.7.0

package/primitives/mermaid.tsx

@@ -1,196 +0,0 @@
-import { save } from '@tauri-apps/plugin-dialog';
-import * as fs from '@tauri-apps/plugin-fs';
-import { RotateCcw, Download } from 'lucide-react';
-import mermaid from 'mermaid';
-import { FC, useEffect, useRef, useState, useCallback } from 'react';
-import { toast } from 'sonner';
-import svgPanZoom from 'svg-pan-zoom';
-import { cn } from '../src/utils';
-import { Button } from './button';
-import { SyntaxHighlighterProps } from './markdown-preview';
-import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
-
-export type MermaidDiagramProps = SyntaxHighlighterProps & {
-  className?: string;
-  isRunning?: boolean;
-};
-
-mermaid.initialize({
-  startOnLoad: true,
-  mindmap: {
-    useWidth: 800,
-  },
-  theme: 'dark',
-  fontSize: 18,
-  darkMode: true,
-  fontFamily: 'Inter',
-});
-
-const generateId = () => `mermaid-${Math.random().toString(36).slice(2)}`;
-
-const downloadBlob = async (blob: Blob, filename: string) => {
-  const filePath = await save({
-    title: 'Save Mermaid Diagram',
-    filters: [
-      {
-        name: 'SVG Files',
-        extensions: ['svg'],
-      },
-    ],
-    defaultPath: filename,
-  });
-
-  if (filePath) {
-    const arrayBuffer = await blob.arrayBuffer();
-    await fs.writeFile(filePath, new Uint8Array(arrayBuffer), {
-      baseDir: fs.BaseDirectory.Download,
-    });
-    toast.success('Mermaid diagram saved successfully');
-  }
-};
-
-export const MermaidDiagram: FC<MermaidDiagramProps> = ({
-  code,
-  className,
-  isRunning,
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const lastCode = useRef<string | null>(null);
-  const [instance, setInstance] = useState<any>(null);
-
-  const isComplete = !isRunning;
-
-  const resetZoom = useCallback(() => {
-    instance?.fit();
-    instance?.center();
-  }, [instance]);
-
-  const downloadSVG = useCallback(() => {
-    if (ref.current) {
-      const svg = ref.current.innerHTML;
-      const blob = new Blob([svg], { type: 'image/svg+xml' });
-      void downloadBlob(blob, 'mermaid-diagram.svg');
-    }
-  }, []);
-
-  const enableZoom = useCallback(() => {
-    instance?.enablePan();
-    instance?.enableZoom();
-  }, [instance]);
-
-  const disableZoom = useCallback(() => {
-    instance?.disablePan();
-    instance?.disableZoom();
-  }, [instance]);
-
-  const handleFocus = useCallback(() => {
-    enableZoom();
-  }, [enableZoom]);
-
-  const handleBlur = useCallback(() => {
-    disableZoom();
-  }, [disableZoom]);
-
-  const handleClick = useCallback(() => {
-    if (ref.current) {
-      ref.current.focus();
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!isComplete || !ref.current || !code) return;
-
-    if (lastCode.current === code) return;
-
-    void (async () => {
-      try {
-        const id = generateId();
-        const { svg } = await mermaid.render(id, code);
-
-        if (ref.current) {
-          ref.current.innerHTML = svg;
-
-          const svgElement = ref.current.querySelector('svg');
-          if (svgElement) {
-            svgElement.setAttribute('height', '100%');
-            svgElement.setAttribute('width', '100%');
-            svgElement.style.height = '100%';
-            svgElement.style.width = '100%';
-            svgElement.style.position = 'absolute';
-            svgElement.style.top = '0';
-            svgElement.style.left = '0';
-
-            const panZoomInstance = svgPanZoom(svgElement);
-            panZoomInstance.fit();
-            panZoomInstance.center();
-            panZoomInstance.zoomAtPoint(1, { x: 0, y: 0 });
-            panZoomInstance.disablePan();
-            panZoomInstance.disableZoom();
-            setInstance(panZoomInstance);
-          }
-        }
-
-        lastCode.current = code;
-      } catch (e) {
-        console.warn('Failed to render Mermaid diagram:', e);
-      }
-    })();
-  }, [code, isComplete]);
-
-  return (
-    <div className="relative">
-      <div className="absolute top-2 right-2 z-10 flex gap-1">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="tertiary"
-              size="icon"
-              onClick={resetZoom}
-              className="text-text-secondary"
-            >
-              <RotateCcw size={14} />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Reset Zoom</p>
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="tertiary"
-              size="icon"
-              onClick={downloadSVG}
-              className="text-text-secondary"
-            >
-              <Download size={14} />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Download SVG</p>
-          </TooltipContent>
-        </Tooltip>
-      </div>
-      <div
-        onClick={handleClick}
-        className="text-text-secondary bg-bg-quaternary absolute right-2 bottom-2 z-10 rounded px-2 py-1 text-xs"
-      >
-        Click to focus, then scroll to zoom & drag to pan
-      </div>
-      <div
-        ref={ref}
-        tabIndex={0}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onClick={handleClick}
-        className={cn(
-          'text-text-secondary bg-bg-quaternary focus:ring-opacity-50 relative w-full cursor-grab overflow-hidden rounded-b-lg p-4 py-10 text-center text-sm focus:cursor-grabbing focus:ring-2 focus:ring-blue-500 focus:outline-none',
-          className,
-        )}
-        style={{ width: '100%', minHeight: '400px' }}
-      >
-        Drawing diagram...
-      </div>
-    </div>
-  );
-};

package/primitives/navigation-menu.tsx

@@ -1,147 +0,0 @@
-'use client'
-import React from 'react'
-
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-import { cva } from 'class-variance-authority'
-import { ChevronDown } from 'lucide-react'
-
-import { cn } from '../util'
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      'relative z-10 flex max-w-max flex-1 items-center justify-center',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    {/* <NavigationMenuViewport /> */}
-  </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      'group flex flex-1 list-none items-center justify-center space-x-1',
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
-
-const NavigationMenuItem = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Item
-    ref={ref}
-    className={cn("relative", className)}
-    {...props}
-  />
-))
-NavigationMenuItem.displayName = 'NavigationMenuItem'
-
-const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 ' + 
-  'text-sm font-medium transition-colors hover:bg-level-1 text-foreground hover:text-accent ' + 
-  ' focus:text-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 ' + 
-  'data-[active]:bg-level-1/50 data-[state=open]:bg-level-1/50'
-)
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), 'group', className)}
-    {...props}
-  >
-    {children}{' '}
-    <ChevronDown
-      className='relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180'
-      aria-hidden='true'
-    />
-  </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "right-0  absolute",
-      "absolute top-full w-fit bg-popover mt-[5px]",
-      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 bg-background overflow-hidden rounded-md border",
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn('absolute left-0 top-full flex justify-center')}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border ',
-        'bg-background text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', 
-      'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
-      className
-    )}
-    {...props}
-  >
-    <div className='relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md' />
-  </NavigationMenuPrimitive.Indicator>
-))
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-}

package/primitives/next/image.tsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import NextImage from 'next/image'
-
-import type { ImageDef, Dimensions, MediaTransform } from '../../types'
-import { constrain, cn, spreadToTransform } from '../../util'
-
-const Image: React.FC<{
-  def: ImageDef
-  constrainTo?: Dimensions
-  transform?: MediaTransform
-  fullWidth?: boolean
-  className?: string
-  preload?: boolean
-}> = ({
-  def,
-  constrainTo,
-  transform={},
-  fullWidth=false,
-  className='',
-  preload=false
-}) => {
-  
-  const {
-    src, 
-    alt: _alt, 
-    dim, 
-    sizes,
-    svgFillClass: _svgFillClass,
-  } = def
-
-  const toSpread: any = {}
-  if (fullWidth) {
-    toSpread.style = {
-      width: '100%',
-      height: 'auto',
-      ...spreadToTransform(transform)
-    }
-    if (constrainTo) {
-      toSpread.style.maxWidth = constrainTo.w  
-      toSpread.style.maxHeight = constrainTo.h  
-    }
-  }
-  else {
-    const resolved = constrainTo ? constrain(dim, constrainTo) : dim
-    toSpread.width = resolved.w
-    toSpread.height = resolved.h
-    toSpread.style = {...spreadToTransform(transform)}
-  } 
-
-  if (sizes) {
-    toSpread.sizes = sizes
-  }
-
-    // Note: cannot be spread (a Next thing)
-  let alt: string
-  if (_alt) {
-    alt = _alt
-  }
-  else {
-    const tokens = src.split('/')
-      // Something remotely meaningful
-    alt = (tokens.length > 0) ? tokens[tokens.length - 1] : src
-  }
-
-  const svgFillClass = _svgFillClass ?? ''
-
-  return (fullWidth) ? (
-    <div className='relative flex flex-col items-center justify-center w-full'>
-      <NextImage 
-        src={src} 
-        alt={alt} 
-        {...toSpread} 
-        priority={preload} 
-        loading={preload ? 'eager' : 'lazy'} 
-        className={cn(svgFillClass, className)}
-      />
-    </div>
-  ) : (
-    <NextImage 
-      src={src} 
-      alt={alt} 
-      {...toSpread} 
-      priority={preload} 
-      loading={preload ? 'eager' : 'lazy'} 
-      className={cn(svgFillClass, className)}
-    />   
-  )
-}
-
-export default Image

package/primitives/next/index.ts

@@ -1,7 +0,0 @@
-export { default as Image } from './image'
-export { default as InlineIcon } from './inline-icon' 
-export { default as LinkElement } from './link-element' 
-export { default as MDXLink } from './mdx-link'
-export { default as MediaStack } from './media-stack'
-export { default as NavItems } from './nav-items'
-export { default as YouTubeEmbed } from './youtube-embed'

package/primitives/next/inline-icon.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-
-
-const InlineIcon: React.FC<{
-    /**
-     * If a ReactNode is passed in, it should be set to 'w-full h-auto' so that it can be sized
-     * according to width of parent. 
-     */
-  icon: React.ReactNode
-    /** default should be handled by calling code. */
-  size?: number
-
-  agent?: string,
-  className?: string
-}> = ({
-  icon,
-  size, 
-  agent,
-  className=''
-}) => {
-  if (!icon) return null
-
-  const phone = agent === 'phone'
-  if (typeof icon === 'string') {
-    const _size = (phone && size) ? (size * .75) : size
-    return (<Image src={icon} width={_size} height={_size} alt='icon' className={className}/>)
-  }
-  return (
-    <div className={className}>
-      {icon}
-    </div>
-  )
-}
-
-export default InlineIcon

package/primitives/next/link-element.tsx

@@ -1,109 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-import Link from 'next/link'
-
-import type { LinkDef }  from '../../types'
-import { buttonVariants } from '../button'
-import { cn, type VariantProps } from '../../util'
-
-  /**
-   * If this is rendered directly (and not auto generated in a Block)
-   * and it has any children, title, icon, and iconAfter
-   * are ignore.
-   */
-const LinkElement: React.FC<
-  PropsWithChildren & 
-  VariantProps<typeof buttonVariants> & 
-{
-  def: LinkDef,
-
-    /** 
-     * Use to trigger other events in addition to the 
-     * link action itself. For example, to also close a drawer menu.  
-     */  
-  onClick?: () => void  
-
-    /** overrides def (eg, for title area)*/
-  icon?: React.ReactNode          
-    /** overrides def */
-  iconAfter?: boolean   
-  className?: string,
-}> = ({ 
-  def,
-    // DO NOT provide a default to any of the props that also appear in def!
-  onClick,
-  size, 
-  variant,
-  rounded,
-  icon,     
-  iconAfter, 
-  className = '',
-  children,
-} ) => {
-
-  const {
-    href,
-    newTab,
-    variant: defVariant,
-    size: defSize, 
-    rounded: defRounded, 
-    title
-  } = def
-
-  const linkProps: any = {}
-
-      // As per LinkDef docs
-  if (href.startsWith('http') || href.startsWith('mailto')) { 
-    linkProps.rel = 'noreferrer noopener'
-    if (newTab ?? true) {
-      linkProps.target = '_blank'
-    }
-  } 
-  else if (newTab) {
-    linkProps.target = '_blank'
-  }
-
-  const toSpread = {
-    href,
-    ...(onClick ? { onClick } : {}),
-    ...linkProps
-  }
-
-  const Contents: React.FC = () => {
-
-    if (React.Children.count(children) > 0) return children
-
-      // Props > def fields > defaults.
-    const _icon = (icon) ? icon : (def.icon) ? def.icon : undefined
-    const _iconAfter = (iconAfter) ? iconAfter : (def.iconAfter) ? def.iconAfter : false
-
-      // 'title' is not guaranteed as it could be an icon only button / link
-    return (<>
-      {_icon && !_iconAfter && (<div className='pr-1'>{_icon}</div>)}
-      {title && (<div>{title}</div>)}
-      {_icon && _iconAfter  && (<div className='pl-1'>{_icon}</div>)}
-    </>)
-  }
-
-  return (
-    <Link
-      className={cn(
-        buttonVariants({ 
-          variant: variant ?  variant : (defVariant ? defVariant : 'link'), 
-          size: (!defVariant || defVariant.includes('link') || variant?.includes('link'))  ? 
-            'link' 
-            : 
-            (size ? size : defSize),
-          rounded: rounded ?  rounded : (defRounded ? defRounded : 'md'), 
-        }), 
-          // This is a "label only" LinkDef.  cf: footer"
-        ((href.length > 0 || onClick) ? '' : 'pointer-events-none'),
-        className 
-      )}
-      {...toSpread}
-    >
-      <Contents />
-    </Link>
-  )
-}
-
-export default LinkElement

package/primitives/next/mdx-link.tsx

@@ -1,22 +0,0 @@
-import React,  { AnchorHTMLAttributes, type PropsWithChildren } from 'react'
-import Link from 'next/link'
-
-const MDXLink: React.FC<AnchorHTMLAttributes<HTMLAnchorElement> > = ({
-  href,
-  children,
-  ...rest
-}) => {
-
-    // internal link
-  if (href && (href.startsWith('/'))) {
-    return (
-      <Link href={href} {...rest}>
-        {children}
-      </Link>
-    )
-  }
-
-  return <a target="_blank" href={href} {...rest} >{children}</a>
-}
-
-export default MDXLink

package/primitives/next/media-stack.tsx

@@ -1,69 +0,0 @@
-'use client'
-import React from 'react'
-
-import Spline from '@splinetool/react-spline'
-
-import { cn, constrain, spreadToTransform } from '../../util'
-import type { MediaStackDef, Dimensions } from '../../types'
-
-import Image from './image'
-import VideoPlayer from '../video-player'
-
-const MediaStack: React.FC<{
-  media: MediaStackDef
-  constrainTo?: Dimensions
-  clx?: string
-}> = ({
-  media,
-  constrainTo: cnst = {w: 250, h: 250},
-  clx=''
-}) => {
-  const {img, video, animation, mediaTransform} = media
-
-  const transform = mediaTransform ?? {}
-
-    // Order of precedence: 3D > MP4 > Image
-  if (animation) {
-    return ( 
-      <Spline
-        scene={animation}
-        className={cn(clx, 'pointer-events-none')} 
-        data-vaul-no-drag 
-        style={{
-            // // !aspect-[12/10] 
-          width: (6/5 * (typeof cnst.h === 'number' ? cnst.h as number : parseInt(cnst.h as string)) ),
-          height: cnst.h,
-          ...spreadToTransform(transform)
-        }}
-      />
-    )
-  } 
-  if (video) {
-    const dim = constrain(video.dim.md, cnst)
-    return (
-      <VideoPlayer 
-        className={clx} 
-        sources={video.sources} 
-        width={dim.w} 
-        height={dim.h} 
-        style={{
-          minHeight: dim.h, // prevents layout jumps
-          ...spreadToTransform(transform)
-        }}
-        {...video.videoProps} 
-      />
-    )
-  } 
-  return img ? ( 
-    <Image
-      def={img}
-      constrainTo={cnst} 
-      className={clx}
-      transform={transform}
-    />
-  ) : (
-    <div style={{width: cnst.w, height: cnst.h}} className={cn('bg-level-2', clx)} />
-  )
-}
-
-export default MediaStack