@hanzo/ui 4.7.0 → 4.8.3

package/primitives/stepper.tsx

@@ -0,0 +1,272 @@
+import { CheckIcon } from '@radix-ui/react-icons';
+import { LoaderCircle } from 'lucide-react';
+import 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,
+};

package/primitives/switch.tsx

@@ -0,0 +1,27 @@
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const Switch = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitives.Root>) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'data-[state=checked]:bg-brand peer data-[state=unchecked]:bg-bg-secondary inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitives.Root>
+);
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
+export default Switch;

package/primitives/table.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const Table = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableElement>) => (
+  <table
+    className={cn('w-full caption-bottom text-sm', className)}
+    {...props}
+  />
+);
+Table.displayName = 'Table';
+
+const TableHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <thead
+    className={cn('[&_tr]:border-0 [&_tr]:border-b', className)}
+    {...props}
+  />
+);
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <tbody className={cn('[&_tr]:border-0', className)} {...props} />
+);
+TableBody.displayName = 'TableBody';
+
+const TableFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <tfoot
+    className={cn('border-t font-medium [&>tr]:last:border-b-0', className)}
+    {...props}
+  />
+);
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableRowElement>) => (
+  <tr
+    className={cn(
+      'data-[state=selected]:bg-muted transition-colors hover:bg-gray-300/50',
+      className,
+    )}
+    {...props}
+  />
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableCellElement>) => (
+  <th
+    className={cn(
+      'text-text-secondary h-12 px-4 text-left align-middle font-medium uppercase [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+);
+TableHead.displayName = 'TableHead';
+
+const TableCell = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableCellElement>) => (
+  <td
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+);
+TableCell.displayName = 'TableCell';
+
+const TableCaption = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableCaptionElement>) => (
+  <caption
+    className={cn('text-text-secondary mt-4 text-sm', className)}
+    {...props}
+  />
+);
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/primitives/tabs.tsx

@@ -0,0 +1,50 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) => (
+  <TabsPrimitive.List
+    className={cn(
+      'text-text-tertiary inline-flex h-10 items-center justify-center rounded-md bg-[#27252B] p-1',
+      className,
+    )}
+    {...props}
+  />
+);
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) => (
+  <TabsPrimitive.Trigger
+    className={cn(
+      'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#2D3239] data-[state=active]:text-white data-[state=active]:shadow-xs',
+      className,
+    )}
+    {...props}
+  />
+);
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) => (
+  <TabsPrimitive.Content
+    className={cn(
+      'ring-offset-background focus-visible:ring-ring mt-3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
+      className,
+    )}
+    {...props}
+  />
+);
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/primitives/text-area.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { cn } from '../util'
+
+export interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-muted-3 px-3 py-2 text-sm ' + 
+          'placeholder:text-muted-2  focus-visible:outline-none focus-visible:ring-2 ' + 
+          'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+TextArea.displayName = 'TextArea'
+
+export default TextArea 

package/primitives/text-link.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+export const TextLink = ({
+  label,
+  url,
+  className,
+  ...props
+}: {
+  label: string;
+  url: string;
+} & React.ButtonHTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn('cursor-pointer text-white underline', className)}
+    onClick={() => {
+      window.open(url);
+    }}
+    {...props}
+  >
+    <a href={url} rel="noreferrer" target="_blank">
+      {label}
+    </a>
+  </span>
+);

package/primitives/textarea.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+
+import { RefCallBack } from 'react-hook-form';
+import { cn } from '../src/utils';
+
+const DEFAULT_MIN_TEXTAREA_HEIGHT = 32;
+const DEFAULT_MAX_TEXTAREA_HEIGHT = 300;
+
+export type TextareaProps =
+  React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    minHeight?: number;
+    maxHeight?: number;
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    ref?: React.RefObject<HTMLTextAreaElement | null> | RefCallBack;
+  };
+
+const Textarea = ({
+  className,
+  minHeight = DEFAULT_MIN_TEXTAREA_HEIGHT,
+  maxHeight = DEFAULT_MAX_TEXTAREA_HEIGHT,
+  resize = 'none',
+  ref,
+  ...props
+}: TextareaProps) => {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useLayoutEffect(() => {
+    // Reset height - important to shrink on delete
+    if (!textareaRef.current) return;
+    textareaRef.current.style.height = 'inherit';
+    // Set height
+    textareaRef.current.style.height = `${Math.max(
+      textareaRef.current.scrollHeight + 2,
+      minHeight,
+    )}px`;
+
+    if (props.autoFocus !== undefined && props.autoFocus) {
+      textareaRef.current.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.value, minHeight, maxHeight]);
+
+  return (
+    <textarea
+      className={cn(
+        'bg-bg-secondary placeholder:!text-text-placeholder border-input focus-visible:ring-border-input-focus flex w-full rounded-md border px-4 py-2 pt-7 text-sm break-words focus-visible:ring-1 focus-visible:outline-hidden focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref || textareaRef}
+      style={{
+        minHeight: `${minHeight}px`,
+        maxHeight: resize === 'vertical' ? undefined : `${maxHeight}px`,
+        resize: resize,
+      }}
+      {...props}
+    />
+  );
+};
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
+export default Textarea;

package/primitives/textfield.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import React from 'react';
+
+import { RefCallBack } from 'react-hook-form';
+import { cn } from '../src/utils';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './form';
+import { Input } from './input';
+
+const TextField = ({
+  classes,
+  field,
+  label,
+  type = 'text',
+  helperMessage,
+  startAdornment,
+  endAdornment,
+  autoFocus,
+  min,
+  max,
+}: {
+  classes?: {
+    formItem?: string;
+    label?: string;
+    input?: string;
+    helperMessage?: string;
+  };
+  field: {
+    onChange?: (...event: any[]) => void;
+    onFocus?: (...event: any[]) => void;
+    onKeyDown?: (...event: any[]) => void;
+    onBlur?: () => void;
+    value: any;
+    disabled?: boolean;
+    name?: string;
+    ref?: React.RefObject<HTMLInputElement | null> | RefCallBack;
+    placeholder?: string;
+    readOnly?: boolean;
+  };
+  autoFocus?: boolean;
+  label: React.ReactNode;
+  helperMessage?: React.ReactNode;
+  type?: 'text' | 'password' | 'number';
+  startAdornment?: React.ReactNode;
+  endAdornment?: React.ReactNode;
+  min?: number;
+  max?: number;
+}) => {
+  return (
+    <FormItem className={cn(classes?.formItem)}>
+      <FormControl>
+        <Input
+          autoFocus={autoFocus}
+          className={cn(classes?.input)}
+          endAdornment={endAdornment}
+          max={max}
+          min={min}
+          spellCheck={false}
+          startAdornment={startAdornment}
+          type={type}
+          {...field}
+        />
+      </FormControl>
+      <FormLabel className={cn(classes?.label)}>{label}</FormLabel>
+      <FormDescription>{helperMessage}</FormDescription>
+      <FormMessage className={cn(classes?.helperMessage)} />
+    </FormItem>
+  );
+};
+
+export { TextField };
+export default TextField;

package/primitives/toast.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Toaster as Sonner } from 'sonner';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      className="toaster group"
+      closeButton
+      position="top-center"
+      richColors
+      theme={'dark' as ToasterProps['theme']}
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-text-default group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-text-secondary',
+          actionButton: 'group-[.toast]:bg-brand group-[.toast]:text-white',
+          cancelButton:
+            'group-[.toast]:bg-transparent group-[.toast]:text-gray=80',
+        },
+      }}
+      visibleToasts={5}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };