@hanzo/ui 5.0.2 → 5.1.0

package/primitives/search-input.tsx

@@ -1,66 +0,0 @@
-import { SearchIcon, XIcon } from 'lucide-react';
-import React from 'react';
-
-import { cn } from '../src/utils';
-import { Button } from './button';
-import { Input } from './input';
-
-export type SearchInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  classNames?: {
-    container?: string;
-    input?: string;
-    button?: string;
-  };
-};
-
-const SearchInput = ({
-  className,
-  value,
-  onChange,
-  classNames,
-  ...props
-}: SearchInputProps) => {
-  return (
-    <div
-      className={cn(
-        'shadow-border-input focus-within:shadow-border-input-focus relative flex h-10 flex-1 items-center overflow-hidden rounded-full shadow-[0_0_0_1px_currentColor] transition-shadow',
-        classNames?.container,
-      )}
-    >
-      <Input
-        className={cn(
-          'placeholder:!text-text-placeholder !h-full border-none bg-transparent py-2 pl-10',
-          classNames?.input,
-        )}
-        onChange={(e) => {
-          onChange?.(e);
-        }}
-        placeholder="Search..."
-        spellCheck={false}
-        value={value}
-        {...props}
-      />
-      <SearchIcon className="text-text-tertiary absolute top-1/2 left-4 -z-[1px] h-4 w-4 -translate-y-1/2" />
-      {value && (
-        <Button
-          className={cn('absolute right-1 h-8 w-8 p-2', classNames?.button)}
-          onClick={() => {
-            onChange?.({
-              target: { value: '' },
-            } as React.ChangeEvent<HTMLInputElement>);
-          }}
-          size="auto"
-          type="button"
-          variant="tertiary"
-        >
-          <XIcon />
-          <span className="sr-only">Clear</span>
-        </Button>
-      )}
-    </div>
-  );
-};
-
-SearchInput.displayName = 'SearchInput';
-
-export { SearchInput };

package/primitives/select.tsx

@@ -1,122 +0,0 @@
-import { CheckIcon } from '@radix-ui/react-icons';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown } from 'lucide-react';
-import React from 'react';
-
-import { cn } from '../src/utils';
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = ({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger>) => (
-  <SelectPrimitive.Trigger
-    className={cn(
-      'h-input border-divider bg-bg-secondary relative flex w-full items-center justify-between rounded-md border px-4 py-2 text-sm shadow-xs',
-      'focus:ring-border-input-focus placeholder:text-text-secondary focus:ring-1 focus:outline-hidden focus:ring-inset disabled:cursor-not-allowed disabled:opacity-50',
-      'peer/select [&[data-placeholder]>svg]:mt-0',
-      'pt-6 data-[placeholder]:pt-2',
-      'aria-expanded:ring-border-input-focus aria-expanded:ring-1 aria-expanded:ring-inset',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="absolute top-[23px] right-3 h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-);
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectContent = ({
-  className,
-  children,
-  position = 'popper',
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      className={cn(
-        '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 border-divider bg-bg-dark relative z-50 min-w-[8rem] overflow-hidden rounded-md border text-gray-50/70 shadow-md',
-        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}
-    >
-      <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>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-);
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) => (
-  <SelectPrimitive.Label
-    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
-    {...props}
-  />
-);
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = ({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) => (
-  <SelectPrimitive.Item
-    className={cn(
-      'focus:bg-bg-secondary focus:text-text-default relative flex w-full cursor-default items-center rounded-xs py-2 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-);
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) => (
-  <SelectPrimitive.Separator
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
-    {...props}
-  />
-);
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-};

package/primitives/separator.tsx

@@ -1,26 +0,0 @@
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import React from 'react';
-
-import { cn } from '../src/utils';
-
-const Separator = ({
-  className,
-  orientation = 'horizontal',
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) => (
-  <SeparatorPrimitive.Root
-    className={cn(
-      'bg-divider shrink-0',
-      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-      className,
-    )}
-    decorative={decorative}
-    orientation={orientation}
-    {...props}
-  />
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
-export default Separator;

package/primitives/sheet.tsx

@@ -1,139 +0,0 @@
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-import React from 'react';
-
-import { cn } from '../src/utils';
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/70',
-      className,
-    )}
-    {...props}
-  />
-);
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  'data-[state=open]:animate-in data-[state=closed]:animate-out bg-bg-dark border-divider fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-  {
-    variants: {
-      side: {
-        top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b',
-        bottom:
-          'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t',
-        left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 max-w-lg border-r',
-        right:
-          'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 max-w-lg border-l',
-      },
-    },
-    defaultVariants: {
-      side: 'right',
-    },
-  },
-);
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {
-  container?: HTMLElement;
-  overlayClassName?: string;
-  hideCloseButton?: boolean;
-}
-
-const SheetContent = ({
-  side = 'right',
-  className,
-  children,
-  container,
-  overlayClassName,
-  hideCloseButton,
-  ...props
-}: SheetContentProps) => (
-  <SheetPortal container={container}>
-    <SheetOverlay className={overlayClassName} />
-    <SheetPrimitive.Content
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      {!hideCloseButton && (
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      )}
-    </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('mt-3 flex flex-col gap-2', className)} {...props} />
-);
-SheetFooter.displayName = 'SheetFooter';
-
-const SheetTitle = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) => (
-  <SheetPrimitive.Title
-    className={cn('text-text-default text-lg font-semibold', className)}
-    {...props}
-  />
-);
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) => (
-  <SheetPrimitive.Description
-    className={cn('text-text-secondary text-sm', className)}
-    {...props}
-  />
-);
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-};

package/primitives/skeleton.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import { cn } from '../src/utils';
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('bg-bg-secondary animate-pulse rounded-md', className)}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };
-export default Skeleton;

package/primitives/slider.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import * as SliderPrimitive from '@radix-ui/react-slider';
-import React from 'react';
-import { cn } from '../src/utils';
-
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max],
-  );
-
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-        className,
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className={cn(
-          'bg-bg-quaternary relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn(
-            'bg-brand absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
-          )}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-brand-500 bg-brand ring-brand/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
-    </SliderPrimitive.Root>
-  );
-}
-
-export { Slider };
-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