@hanzo/ui 4.5.4 → 4.7.0

package/primitives/combobox.tsx

@@ -1,239 +0,0 @@
-'use client'
-import React, { useState } from 'react'
-
-import { Check, ChevronDown } from 'lucide-react'
-
-import { cn } from '../util'
-import Button from './button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from './command'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from './popover'
-
-import type ListAdaptor from './list-adaptor'
-
-const DEFAULT_IMAGE_SIZE = 32
-
-interface ComboboxTriggerProps<T> {
-  current: T | null
-  currentLabel: string | null
-  imageUrl: string | null
-  placeholder?: string 
-  buttonClx?: string
-  imageClx?: string
-  disabled?: boolean
-  imageSize?: number  
-  noChevron?: boolean
-  open: boolean
-}
-
-const DefaultTriggerInner = <T,>(
-  {
-    current,
-    currentLabel,
-    imageUrl,
-    buttonClx='',
-    imageClx='',
-    placeholder='(select)',
-    disabled=false,
-    imageSize=DEFAULT_IMAGE_SIZE,  
-    noChevron=false,
-    open,
-    ...rest
-  }: ComboboxTriggerProps<T>,
-  ref: React.ForwardedRef<HTMLButtonElement>
-) => (
-  <Button
-    ref={ref}
-    {...rest}
-    variant='outline'
-    role='combobox'
-    aria-expanded={open}
-    className={cn(
-      'flex',
-      noChevron ? 'justify-start' : 'justify-between',
-      buttonClx
-    )}
-    disabled={disabled}
-  >
-    <div className='flex justify-start items-center gap-2'>
-    {(current && imageUrl) ? (
-      <img
-        src={imageUrl}
-        alt={currentLabel + ' image'}
-        height={imageSize}
-        width={imageSize}
-        loading="eager"
-        className={cn('block', imageClx)}
-      />
-    ) : (
-      <div style={{width: imageSize, height: imageSize}} />
-    )}
-      <span className='block'>{currentLabel}</span>
-    </div>
-    {!noChevron && (<ChevronDown className={cn('block', open ? '' : 'opacity-50')} />)}
-  </Button>
-)
-
-const DefaultTrigger = React.forwardRef(DefaultTriggerInner) as <T, P>(props: P & { ref?: React.ForwardedRef<HTMLButtonElement> }) => React.ReactNode
-
-const Combobox = <T, P extends ComboboxTriggerProps<T>>({
-  elements,
-  initial,
-  current,
-  setCurrent,
-  closeOnSelect=true,
-  adaptor,
-  popoverClx='',
-  listItemClx='',
-  listItemSelectedClx='',
-  listItemDisabledClx='',
-  noCheckmark=false,
-  listItemImageClx='',
-  searchPlaceholder='Search...',
-  noneFoundMessage='None found.',
-  listItemImageSize=DEFAULT_IMAGE_SIZE,
-  noSearch=false,
-  popoverAlign = 'center', 
-  popoverSideOffset = 4,
-  Trigger, 
-  triggerProps
-}: {
-  elements: T[]
-  initial?: T | null
-  current?: T | null
-  setCurrent: (c: T | null) => void 
-  closeOnSelect?: boolean
-  adaptor: ListAdaptor<T>
-  popoverClx?: string
-  listItemClx?: string
-  listItemSelectedClx?: string
-  listItemDisabledClx?: string
-  listItemImageClx?: string
-  listItemImageSize?: number
-  noCheckmark?: boolean
-  searchPlaceholder?: string
-  noneFoundMessage?: string
-  noSearch?: boolean
-  popoverAlign?: "center" | "end" | "start"
-  popoverSideOffset?: number
-    /** If (custom) Trigger is not supplied, 
-     * passed to default trigger */
-  triggerProps: P
-  Trigger?: 
-    <T, P>(props: P & { ref?: React.ForwardedRef<HTMLButtonElement> }) => React.ReactNode
-}) => {
-
-  const [_open, _setOpen] = useState<boolean>(false)
-    // for non-controlled base (must declare the hook either way)
-  const [_current, _setCurrent] = useState<T | null>(initial ?? null)
-
-  const handleSelect = (selString: string) => {
-
-    const found = elements.find((el: T) => (adaptor.valueEquals(el, selString)))
-    if (found) {
-        // non-controlled ('initial' supplied (may have been null))
-      if (initial !== undefined) {
-        _setCurrent(found)
-      }
-      setCurrent(found)
-    }
-    if (closeOnSelect) {
-      _setOpen(false)
-    }
-  }
-
-  const isCurrent = (el: T): boolean => {
-
-      // non-controlled?
-    const curr = (current === undefined) ? _current : current
-    return !!curr && adaptor.equals(el, curr)
-  }  
-
-  const _triggerProps = current ? {
-    ...triggerProps,
-    current,
-    currentLabel: adaptor.getLabel ? adaptor.getLabel(current) : adaptor.getValue(current),
-    imageUrl: adaptor.getImageUrl ? adaptor.getImageUrl(current) : null,
-    open: _open
-  } : {
-    ...triggerProps,
-    current: null,
-    currentLabel: null,
-    imageUrl: null,
-    open: _open 
-  }
-
-  return (
-    <Popover open={_open} onOpenChange={_setOpen}>
-      <PopoverTrigger asChild>
-        {Trigger ? (
-          <Trigger<T, P> {..._triggerProps} />
-        ) : (
-          <DefaultTrigger<T, P> {..._triggerProps} />
-        )}
-      </PopoverTrigger>
-      <PopoverContent className={cn('p-0', popoverClx)} align={popoverAlign} sideOffset={popoverSideOffset}>
-        <Command>
-          {!noSearch && (<CommandInput placeholder={searchPlaceholder} />)}
-          <CommandList>
-            <CommandEmpty>{noneFoundMessage}</CommandEmpty>
-            <CommandGroup>
-            {elements.map((el) => (
-              <CommandItem
-                key={adaptor.getValue(el)}
-                value={adaptor.getValue(el)}
-                onSelect={handleSelect}
-                disabled={adaptor.isDisabled ? adaptor.isDisabled(el) : false}
-                className={cn(
-                  'flex', 
-                  noCheckmark ? 'justify-start' : 'justify-between', 
-                  listItemClx, 
-                  (isCurrent(el) ? listItemSelectedClx : ''),
-                  ((adaptor.isDisabled && adaptor.isDisabled(el)) ? listItemDisabledClx : '')
-                )}
-              >
-                <div className='flex justify-start items-center gap-2'>
-                { (adaptor.getImageUrl && adaptor.getImageUrl(el)) ? (
-                  <img
-                    src={adaptor.getImageUrl(el)!}
-                    alt={adaptor.getValue(el) + ' image'}
-                    height={listItemImageSize}
-                    width={listItemImageSize}
-                    loading="eager"
-                    className={listItemImageClx}
-                  />
-                ) : (
-                  <div style={{width: listItemImageSize, height: listItemImageSize}} />
-                )}
-                  <span>{ adaptor.getLabel ? adaptor.getLabel(el) : adaptor.getValue(el) }</span>
-                </div>
-                {!noCheckmark && (
-                <div>
-                  <Check className={cn('ml-auto', (isCurrent(el)) ? '' : 'invisible' )} />
-                </div>
-                )}
-              </CommandItem>
-            ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export {
-  Combobox as default,
-  type ComboboxTriggerProps
-} 

package/primitives/command.tsx

@@ -1,157 +0,0 @@
-"use client"
-import React from "react"
-
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
-
-import { cn } from "../util"
-import { Dialog, DialogContent } from "./dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-level-1 text-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-1 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-      'data-selected:bg-level-3 aria-selected:text-accent',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-35',
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}

package/primitives/context-menu.tsx

@@ -1,200 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "../util"
-
-const ContextMenu = ContextMenuPrimitive.Root
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-const ContextMenuGroup = ContextMenuPrimitive.Group
-const ContextMenuPortal = ContextMenuPrimitive.Portal
-const ContextMenuSub = ContextMenuPrimitive.Sub
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none ' + 
-        'focus:bg-level-1 focus:text-accent data-[state=open]:bg-level-1 data-[state=open]:text-accent',
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-popup min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md ' + 
-      '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}
-  />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "z-popup min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md animate-in fade-in-80 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}
-    />
-  </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-level-1 focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-level-1 focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-level-1 focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
-
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}

package/primitives/dialog-video-controller.tsx

@@ -1,38 +0,0 @@
-'use client'
-
-import React, { type PropsWithChildren, useState } from 'react'
-
-const DialogVideoController: React.FC<PropsWithChildren> = ({
-  children,
-}) => {
-
-  const [open, setOpen] = useState<boolean>(false)
-
-  const onOpenChange = (b: boolean) => {
-    setOpen(b)
-    const videos = document.getElementsByTagName('video')
-    const videoArray = Array.from(videos)
-    videoArray.forEach((v) => {
-      if (b) {
-        v.pause()
-      }
-      else {
-        v.play()
-      }
-    }) 
-  }
-
-    // https://stackoverflow.com/a/49052730/11645689
-  const updatedChildren = React.Children.map(
-    children,
-    (child) => (React.cloneElement(
-      child as any, { open, onOpenChange }
-    ))
-  )
-
-  return (<>
-    {updatedChildren}
-  </>)
-}
-
-export default DialogVideoController