@hanzo/ui 4.5.4 → 4.7.0

package/primitives/select.tsx

@@ -1,169 +0,0 @@
-'use client'
-
-import React from 'react'
-import * as SelectPrimitive from '@radix-ui/react-select'
-import { Check, ChevronDown, ChevronUp } from 'lucide-react'
-
-import { cn } from '../util'
-
-const Select = SelectPrimitive.Root
-const SelectGroup = SelectPrimitive.Group
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-muted-3 ' + 
-      'bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-2 ' + 
-      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ' + 
-      'disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className='h-4 w-4 opacity-50' />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className='h-4 w-4' />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className='h-4 w-4' />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'relative z-popup max-h-96 min-w-[8rem] overflow-hidden rounded-md border ' + 
-        'bg-level-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',
-        (position === 'popper') &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 ' + 
-          'data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm ' + 
-      'py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-level-2 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'>
-      <SelectPrimitive.ItemIndicator>
-        <Check className='h-4 w-4' />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-level-1', className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-}

package/primitives/separator.tsx

@@ -1,29 +0,0 @@
-'use client'
-import React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
-
-import { cn } from '../util'
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->((
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'shrink-0 bg-muted-2',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export default Separator

package/primitives/sheet.tsx

@@ -1,178 +0,0 @@
-// @ts-nocheck
-
-'use client'
-
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '../util'
-
-const Sheet = SheetPrimitive.Root
-
-const SheetTrigger = SheetPrimitive.Trigger
-
-const SheetClose = SheetPrimitive.Close
-
-const SheetPortal = SheetPrimitive.Portal
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-below-modal bg-overlay backdrop-blur-sm',
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
-
-const sheetVariants = cva(
-  'fixed z-modal gap-4 bg-background p-3 sm:p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300',
-  {
-    variants: {
-      side: {
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-        bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-5/6 sm:w-2/3 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-        right:
-          'inset-y-0 right-0 h-full w-5/6 sm:w-2/3 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-      },
-    },
-    defaultVariants: {
-      side: 'right',
-    },
-  }
-)
-
-interface SheetContentProps 
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-  VariantProps<typeof sheetVariants> {}
-
-const closeUIclx = 'rounded-sm opacity-70 ring-offset-background ' + 
-  'transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-primary'
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps & 
-  { 
-    closeButtonClass? : string
-    closeElement?: ReactNode
-    centerElement?: ReactNode
-    duplicateCloseOnBottom?: boolean
-  }
->(({ 
-    side = 'right', 
-    className, 
-    children, 
-    closeElement,
-    centerElement,
-    duplicateCloseOnBottom=false,
-    closeButtonClass, 
-    ...props 
-  }, ref ) => {
-
-    const xOfCloseUIClass = (side === 'right') ? 'left-2' : 'right-2'
-    
-    return (
-      <SheetPortal>
-        <SheetOverlay />
-        <SheetPrimitive.Content
-          ref={ref}
-          className={cn(sheetVariants({ side }), className)}
-          {...props}
-        >
-          {children}
-
-          {closeElement && (
-            <SheetPrimitive.Close className={cn(closeUIclx, 'absolute z-above-content top-3', xOfCloseUIClass, closeButtonClass)}>
-              {closeElement}
-            </SheetPrimitive.Close>
-          )}
-          {closeElement && duplicateCloseOnBottom && (
-            <SheetPrimitive.Close className={cn(closeUIclx, 'absolute z-above-content bottom-3', xOfCloseUIClass, closeButtonClass)}>
-            {closeElement}
-            </SheetPrimitive.Close>
-          )}
-          {centerElement && (
-            <div className={'absolute z-content top-3 left-0 right-0 flex flex-row justify-center align-start'} >
-              {centerElement}
-            </div>
-          )}
-        </SheetPrimitive.Content>
-      </SheetPortal>
-    )
-  }
-)
-
-SheetContent.displayName = SheetPrimitive.Content.displayName
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = 'SheetHeader'
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = 'SheetFooter'
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold text-foreground', className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-1', className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}

package/primitives/skeleton.tsx

@@ -1,20 +0,0 @@
-import { cn } from '../util'
-
-const Skeleton: React.FC<{
-  reverse?: boolean  
-} & React.HTMLAttributes<HTMLDivElement>> = ({
-  reverse=false,
-  className,
-  ...props
-}) => (
-  <div
-    className={cn(
-      'rounded-md bg-level-2', 
-      reverse ? 'animate-pulsereverse' : 'animate-pulse',  
-      className
-    )}
-    {...props}
-  />
-)
-
-export default Skeleton

package/primitives/slider.tsx

@@ -1,72 +0,0 @@
-'use client'
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
-
-import { cn } from '../util'
-import { useState } from 'react'
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
-    trackBgClx?: string
-    rangeBgClx?: string
-    thumbClx?: string
-    thumbSlidingClx?: string
-  }
->(({ 
-  className,
-  trackBgClx='bg-level-2',
-  rangeBgClx='bg-primary',
-  thumbClx='',
-  thumbSlidingClx='',
-  onValueChange,
-  onValueCommit,
-  ...rest 
-}, ref) => { 
-
-  const [sliding, setSliding] = useState<boolean>(false)
-
-  const _onChange = (value: number[]): void => {
-    if (!sliding) {
-      setSliding(true)
-    }
-    if (onValueChange) {
-      onValueChange(value)
-    }
-  }
-
-  const _onCommit = (value: number[]): void => {
-    setSliding(false)
-    if (onValueCommit) {
-      onValueCommit(value)
-    }
-  }
-
-  return (
-    <SliderPrimitive.Root
-      ref={ref}
-      className={cn(
-        'relative flex w-full touch-none select-none items-center',
-        className
-      )}
-      onValueChange={_onChange}
-      onValueCommit={_onCommit}
-      {...rest}
-    >
-      <SliderPrimitive.Track data-vaul-no-drag className={'relative h-2 w-full grow overflow-hidden rounded-full ' + trackBgClx}>
-        <SliderPrimitive.Range data-vaul-no-drag className={'absolute h-full ' + rangeBgClx} />
-      </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb data-vaul-no-drag className={cn(
-        'block h-5 w-5 rounded-full border-2 border-primary bg-background ',
-        'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 ', 
-        'focus-visible:ring-muted-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50',
-        thumbClx,
-        (sliding ? thumbSlidingClx : '')
-      )}/>
-    </SliderPrimitive.Root>
-  )
-})
-
-Slider.displayName = SliderPrimitive.Root.displayName
-
-export default Slider 

package/primitives/sonner.tsx

@@ -1,35 +0,0 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import { Toaster as Sonner } from 'sonner'
-import { toast } from 'sonner'
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps['theme']}
-      className='toaster group'
-      toastOptions={{
-        classNames: {
-          toast:
-            'group toast group-[.toaster]:bg-level-2 group-[.toaster]:text-foreground group-[.toaster]:border-muted-3 group-[.toaster]:shadow-lg',
-          description: 'group-[.toast]:text-foreground',
-          actionButton:
-            'group-[.toast]:bg-primary group-[.toast]:text-primary-fg',
-          cancelButton:
-            'group-[.toast]:bg-transparent group-[.toast]:text-foreground',
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export {
-  toast,
-  Toaster
-}

package/primitives/step-indicator.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-
-import { cn } from '../util'
-
-const StepIndicator: React.FC<{
-  steps: string[]
-  currentStep: number
-  dotSizeRem: number 
-  className?: string
-  muted?: boolean
-}> = ({
-  steps,
-  currentStep,
-  dotSizeRem,
-  className='',
-  muted=false
-}) => {
-
-  const pX = `calc(${1 / (steps.length * 2) * 100}% - ${dotSizeRem / 2}rem)`
-
-    // This code current throws 'Warning: Each child in a list should have a unique "key" prop.'
-    // As is evident, we supply keys that should suffice.  < shrug >
-  return ( 
-    <div className={cn('flex flex-col', className)}>
-      <div 
-        key='one' 
-        /* id='FOO' */
-        className='flex flex-row items-center justify-start w-full'
-        style={{ paddingLeft: pX, paddingRight: pX }}
-      >
-        {steps.map((ignore, index) => (<>
-          {index !== 0 && (
-            <div
-              key={`sep-${index}`}
-              className={cn(
-                'h-[1px] grow',
-                currentStep >= index ? (muted ? 'bg-muted' : 'bg-foreground') : (muted ? 'bg-muted-3' : 'bg-level-3'),
-              )}
-            />
-          )}
-          <div 
-            key={`circle-${index}`} 
-            style={{width: `${dotSizeRem}rem`, height: `${dotSizeRem}rem`}} 
-            className={cn(
-              'shrink-0 rounded-full border-[1.5px]', 
-              currentStep >= index ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : '',
-              //currentStep > index || currentStep === steps.length - 1 ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : ''
-            )} 
-          />
-        </>))}
-      </div>
-      <div key='two' className={'grid ' + `grid-cols-${steps.length}` /* These are white listed already */} >
-        {steps.map((label, index) => (
-          <div
-            key={index}
-            className={cn(
-              'text-center whitespace-nowrap',
-              (muted ? 'text-muted' : 'text-foreground')
-            )}
-          >
-            {label}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default StepIndicator

package/primitives/switch.tsx

@@ -1,35 +0,0 @@
-'use client'
-import React from 'react'
-import * as SwitchPrimitives from '@radix-ui/react-switch'
-
-import { cn } from '../util'
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & 
-  { thumbClx?: string }
->(({ className, thumbClx='', ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full ' + 
-      'border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none ' + 
-      'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' + 
-      'focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 ' + 
-      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-level-3',
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ' + 
-        'ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
-        thumbClx
-)}
-    />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
-
-export default Switch