@hanzo/ui 4.6.0 → 4.7.0

package/primitives/stepper.tsx

@@ -1,272 +0,0 @@
-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,
-};

package/primitives/switch.tsx

@@ -1,26 +0,0 @@
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import * as 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 };

package/primitives/table.tsx

@@ -1,105 +0,0 @@
-import * as 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

@@ -1,50 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as 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

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

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

@@ -1,61 +0,0 @@
-import * as 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 };

package/primitives/textfield.tsx

@@ -1,75 +0,0 @@
-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 };

package/primitives/toast.tsx

@@ -1,30 +0,0 @@
-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 };