@hanzo/ui 4.5.3 → 4.6.0

package/primitives/sheet.tsx

@@ -1,116 +1,85 @@
-// @ts-nocheck
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
 
-'use client'
+import { cn } from '../src/utils';
 
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { cva, type VariantProps } from 'class-variance-authority'
+const Sheet = SheetPrimitive.Root;
 
-import { cn } from '../util'
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const Sheet = SheetPrimitive.Root
+const SheetClose = SheetPrimitive.Close;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetPortal = SheetPrimitive.Portal;
 
-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) => (
+const SheetOverlay = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) => (
   <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
+      '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}
-    ref={ref}
   />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+);
+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',
+  '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: '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',
+        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:
-          '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',
+          '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 
+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>
-    )
-  }
-)
+    VariantProps<typeof sheetVariants> {
+  container?: HTMLElement;
+  overlayClassName?: string;
+  hideCloseButton?: boolean;
+}
 
-SheetContent.displayName = SheetPrimitive.Content.displayName
+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,
@@ -119,50 +88,42 @@ const SheetHeader = ({
   <div
     className={cn(
       'flex flex-col space-y-2 text-center sm:text-left',
-      className
+      className,
     )}
     {...props}
   />
-)
-SheetHeader.displayName = 'SheetHeader'
+);
+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'
+  <div className={cn('mt-3 flex flex-col gap-2', className)} {...props} />
+);
+SheetFooter.displayName = 'SheetFooter';
 
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
+const SheetTitle = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) => (
   <SheetPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold text-foreground', className)}
+    className={cn('text-text-default text-lg font-semibold', className)}
     {...props}
   />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+);
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
+const SheetDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) => (
   <SheetPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-1', className)}
+    className={cn('text-text-secondary text-sm', className)}
     {...props}
   />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+);
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -175,4 +136,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};

package/primitives/skeleton.tsx

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

package/primitives/slider.tsx

@@ -1,72 +1,62 @@
-'use client'
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
+'use client';
 
-import { cn } from '../util'
-import { useState } from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
+import { cn } from '../src/utils';
 
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
-    trackBgClx?: string
-    rangeBgClx?: string
-    thumbClx?: string
-    thumbSlidingClx?: string
-  }
->(({ 
+function Slider({
   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)
-    }
-  }
+  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
-      ref={ref}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
       className={cn(
-        'relative flex w-full touch-none select-none items-center',
-        className
+        '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,
       )}
-      onValueChange={_onChange}
-      onValueCommit={_onCommit}
-      {...rest}
+      {...props}
     >
-      <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
+        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>
-      <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 : '')
-      )}/>
+      {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>
-  )
-})
-
-Slider.displayName = SliderPrimitive.Root.displayName
+  );
+}
 
-export default Slider 
+export { Slider };

package/primitives/stepper.tsx

@@ -0,0 +1,272 @@
+import { CheckIcon } from '@radix-ui/react-icons';
+import { LoaderCircle } from 'lucide-react';
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+
+import { cn } from '../src/utils';
+
+type StepperContextValue = {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+  orientation: 'horizontal' | 'vertical';
+};
+
+type StepItemContextValue = {
+  step: number;
+  state: StepState;
+  isDisabled: boolean;
+  isLoading: boolean;
+};
+
+type StepState = 'active' | 'completed' | 'inactive' | 'loading';
+
+const StepperContext = createContext<StepperContextValue | undefined>(
+  undefined,
+);
+const StepItemContext = createContext<StepItemContextValue | undefined>(
+  undefined,
+);
+
+const useStepper = () => {
+  const context = useContext(StepperContext);
+  if (!context) {
+    throw new Error('useStepper must be used within a Stepper');
+  }
+  return context;
+};
+
+const useStepItem = () => {
+  const context = useContext(StepItemContext);
+  if (!context) {
+    throw new Error('useStepItem must be used within a StepperItem');
+  }
+  return context;
+};
+
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: number;
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+const Stepper = ({
+  defaultValue = 0,
+  value,
+  onValueChange,
+  orientation = 'horizontal',
+  className,
+  ...props
+}: StepperProps) => {
+  const [activeStep, setInternalStep] = React.useState(defaultValue);
+
+  const setActiveStep = React.useCallback(
+    (step: number) => {
+      if (value === undefined) {
+        setInternalStep(step);
+      }
+      onValueChange?.(step);
+    },
+    [value, onValueChange],
+  );
+
+  const currentStep = value ?? activeStep;
+
+  return (
+    <StepperContext.Provider
+      value={{
+        activeStep: currentStep,
+        setActiveStep,
+        orientation,
+      }}
+    >
+      <div
+        className={cn(
+          'group/stepper inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',
+          className,
+        )}
+        data-orientation={orientation}
+        {...props}
+      />
+    </StepperContext.Provider>
+  );
+};
+Stepper.displayName = 'Stepper';
+
+// StepperItem
+interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number;
+  completed?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+const StepperItem = ({
+  step,
+  completed = false,
+  disabled = false,
+  loading = false,
+  className,
+  children,
+  ...props
+}: StepperItemProps) => {
+  const { activeStep } = useStepper();
+
+  const state: StepState =
+    completed || step < activeStep
+      ? 'completed'
+      : activeStep === step
+        ? 'active'
+        : 'inactive';
+
+  const isLoading = loading && step === activeStep;
+
+  return (
+    <StepItemContext.Provider
+      value={{ step, state, isDisabled: disabled, isLoading }}
+    >
+      <div
+        className={cn(
+          'group/step flex items-center group-data-[orientation=horizontal]/stepper:flex-row group-data-[orientation=vertical]/stepper:flex-col',
+          className,
+        )}
+        data-state={state}
+        {...(isLoading ? { 'data-loading': true } : {})}
+        {...props}
+      >
+        {children}
+      </div>
+    </StepItemContext.Provider>
+  );
+};
+
+StepperItem.displayName = 'StepperItem';
+
+// StepperTrigger
+interface StepperTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+}
+
+const StepperTrigger = ({
+  asChild = false,
+  className,
+  children,
+  ...props
+}: StepperTriggerProps) => {
+  const { setActiveStep } = useStepper();
+  const { step, isDisabled } = useStepItem();
+
+  if (asChild) {
+    return <div className={className}>{children}</div>;
+  }
+
+  return (
+    <button
+      className={cn(
+        'inline-flex items-center gap-3 disabled:pointer-events-none',
+        className,
+      )}
+      disabled={isDisabled}
+      onClick={() => setActiveStep(step)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+StepperTrigger.displayName = 'StepperTrigger';
+
+interface StepperIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+const StepperIndicator = ({
+  asChild = false,
+  className,
+  children,
+  ...props
+}: StepperIndicatorProps) => {
+  const { state, step, isLoading } = useStepItem();
+
+  return (
+    <div
+      className={cn(
+        'bg-bg-tertiary text-text-secondary data-[state=completed]:bg-brand data-[state=active]:text-text-default data-[state=completed]:text-primary-foreground data-[state=active]:bg-bg-secondary relative flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium',
+        className,
+      )}
+      data-state={state}
+      {...props}
+    >
+      {asChild ? (
+        children
+      ) : (
+        <>
+          <span className="transition-all group-data-[loading=true]/step:scale-0 group-data-[loading=true]/step:opacity-0 group-data-[loading=true]/step:transition-none group-data-[state=completed]/step:scale-0 group-data-[state=completed]/step:opacity-0">
+            {step}
+          </span>
+          <CheckIcon
+            aria-hidden="true"
+            className="absolute scale-0 opacity-0 transition-all group-data-[state=completed]/step:scale-100 group-data-[state=completed]/step:opacity-100"
+            // size={16}
+            strokeWidth={2}
+          />
+          {isLoading && (
+            <span className="absolute transition-all">
+              <LoaderCircle
+                aria-hidden="true"
+                className="animate-spin"
+                size={14}
+                strokeWidth={2}
+              />
+            </span>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+StepperIndicator.displayName = 'StepperIndicator';
+
+// StepperTitle
+const StepperTitle = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h3 className={cn('text-sm font-medium', className)} {...props} />
+);
+StepperTitle.displayName = 'StepperTitle';
+
+const StepperDescription = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) => (
+  <p className={cn('text-text-secondary text-sm', className)} {...props} />
+);
+StepperDescription.displayName = 'StepperDescription';
+
+const StepperSeparator = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={cn(
+        'bg-muted group-data-[state=completed]/step:bg-primary m-0.5 group-data-[orientation=horizontal]/stepper:h-0.5 group-data-[orientation=horizontal]/stepper:w-full group-data-[orientation=horizontal]/stepper:flex-1 group-data-[orientation=vertical]/stepper:h-12 group-data-[orientation=vertical]/stepper:w-0.5',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+StepperSeparator.displayName = 'StepperSeparator';
+
+export {
+  Stepper,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+};