@hanzo/ui 4.5.4 → 4.7.0

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, { type 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,  { type 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

package/primitives/next/nav-items.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-
-import type { LinkDef }  from '../../types'
-import  LinkElement from './link-element'
-import { cn } from '../../util'
-
-const NavItems: React.FC<{
-  items: LinkDef[]
-  className?: string,
-  as?: React.ElementType
-  itemClx?: string | ((def: LinkDef) => string),
-  currentAs?: string
-}> = ({ 
-  items,
-  className='', 
-  itemClx,
-  as: Tag='nav',  
-  currentAs 
-}) => ( items.length ? (
-  <Tag className={className} >
-  {items.map((item, index) => {
-
-    const variant = item.variant ?? 'link'
-    let internalClx = '' 
-
-      // note that linkFG (or any other variant of 'link') 
-      // will not get assigned these classes,
-      // and will remain styles is 'foreground' (hence the name)
-    if (variant === 'link') {
-      internalClx += 'text-nav hover:text-nav-hover '
-      if (currentAs && currentAs === item.href) {
-        internalClx += 'text-nav-current '
-      }
-    } 
-    else {
-      internalClx += 'min-w-0 lg:min-w-0 '   
-    }
-
-    const _itemClx = (itemClx) ? (typeof itemClx === 'string' ? itemClx : itemClx(item)) : '' 
-    return (<LinkElement def={item} key={index} className={cn( internalClx, _itemClx)} />)
-  })}
-  </Tag>) : null
-)
-
-export default NavItems

package/primitives/next/youtube-embed.tsx

@@ -1,83 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import Image from 'next/image'
-
-import * as Icons from '../icons'
-
-// Concept based on https://www.youtube.com/watch?v=lLqRchtjN00
-// (https://github.com/a-trost/fableton)
-
-const YouTubeEmbed: React.FC<{
-  youtubeID: string
-  width: number
-  height: number
-  buttonSize?: number
-  timeAt?: string // '5s'
-  title?: string
-  caption?: string
-  className?: string
-}> = ({
-  youtubeID,
-  width,
-  height,
-  buttonSize=100,
-  timeAt,
-  title,
-  caption,
-  className=''
-}) => {
-
-  const [showVideo, setShowVideo] = useState(false)
-
-    // re autoplay: https://stackoverflow.com/a/45610557/11645689
-  return (
-    <div className={className}>
-      {showVideo ? (
-        <iframe
-          width={width}
-          height={height}
-          src={`https://www.youtube-nocookie.com/embed/${youtubeID + ((timeAt) ? `?t=${timeAt}&` : '?')}rel=0&autoplay=1`}
-          allow='accelerometer ; autoplay *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *;'
-          allowFullScreen
-          title={title || 'Youtube video'}
-          className='aspect-[16/9] h-full w-full p-0 border-0 '
-        />
-      ) : (
-        <button
-          type='button'
-          onClick={() => setShowVideo(true)}
-          className='relative aspect-[16/9] w-full'
-          aria-label={`Play video ${title}`}
-        >
-          <Image
-            src={`https://img.youtube.com/vi/${youtubeID}/maxresdefault.jpg`}
-            alt=''
-            className='h-full w-full'
-            width={width}
-            height={height}
-            loading='lazy'
-          />
-          <div 
-            className={  //https://stackoverflow.com/a/23384995/11645689
-              'absolute z-above-content-2 left-[50%] top-[50%] -translate-y-2/4 -translate-x-2/4 ' + 
-              'grid place-items-center ' + 
-              'text-xl text-white opacity-90'
-            }
-          >
-            <Icons.youtube 
-              width={buttonSize} 
-              height={buttonSize} 
-              role='img'
-              className='transform transition hover:scale-110'
-              {...{'aria-hidden': true}} 
-            />
-          </div>
-          {caption && <p className='hidden md:block whitespace-nowrap typography absolute z-above-content left-[50%] top-[20px] -translate-x-2/4 '>{caption}</p>}
-        </button>
-      )}
-    </div>
-  )
-}
-
-export default YouTubeEmbed

package/primitives/popover.tsx

@@ -1,37 +0,0 @@
-'use client'
-import React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-
-import { cn } from '../util'
-
-const Popover = PopoverPrimitive.Root
-const PopoverTrigger = PopoverPrimitive.Trigger
-const PopoverClose = PopoverPrimitive.Close
-const PopoverAnchor = PopoverPrimitive.Anchor
-const PopoverArrow = PopoverPrimitive.Arrow
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-above-modal-2 w-72 rounded-md border bg-level-1 p-4 text-foreground shadow-md outline-none ' + 
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' + 
-        'data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose, PopoverArrow }

package/primitives/progress.tsx

@@ -1,27 +0,0 @@
-'use client'
-import React from 'react'
-import * as ProgressPrimitive from '@radix-ui/react-progress'
-
-import { cn } from '../util'
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      'relative h-4 w-full overflow-hidden rounded-full bg-level-2',
-      className
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className='h-full w-full flex-1 bg-accent transition-all'
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
-
-export default Progress

package/primitives/radio-group.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
-
-import { cn } from "../util"
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
-    larger?: boolean
-  }
->(({
-  larger=false, 
-  className, 
-  ...props 
-}, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        larger ? 'h-5 w-5' : 'h-4 w-4',
-        'aspect-square rounded-full border border-muted text-foreground ring-offset-background ' ,
-        'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-        'disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="w-full h-full flex items-center justify-center">
-        <div className={cn(
-          larger ? 'h-[70%] w-[70%] ' : 'h-[75%] w-[75%]',
-          'rounded-full aspect-square bg-foreground' , 
-        )}/>
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
-
-export { RadioGroup, RadioGroupItem }

package/primitives/scroll-area.tsx

@@ -1,47 +0,0 @@
-'use client'
-import React from 'react'
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
-
-import { cn } from '../util'
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn('relative overflow-hidden', className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      'flex touch-none select-none transition-colors',
-      orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' &&
-        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-muted-2' />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
-
-export { ScrollArea, ScrollBar }