@hanzo/ui 5.0.0 → 5.0.2

package/primitives/search-input.tsx

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,63 @@
+'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

@@ -0,0 +1,35 @@
+'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

@@ -0,0 +1,69 @@
+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