@hanzo/ui 4.5.3 → 4.6.0

package/primitives/switch.tsx

@@ -1,35 +1,26 @@
-'use client'
-import React from 'react'
-import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as React from 'react';
 
-import { cn } from '../util'
+import { cn } from '../src/utils';
 
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & 
-  { thumbClx?: string }
->(({ className, thumbClx='', ...props }, ref) => (
+const Switch = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitives.Root>) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full ' + 
-      'border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none ' + 
-      'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' + 
-      'focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 ' + 
-      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-level-3',
-      className
+      '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}
-    ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ' + 
-        'ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
-        thumbClx
-)}
+        '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
+);
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export default Switch 
+export { Switch };

package/primitives/table.tsx

@@ -1,109 +1,97 @@
-import * as React from 'react'
+import * as React from 'react';
 
-import { cn } from '../util'
+import { cn } from '../src/utils';
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className='relative w-full overflow-auto'>
-    <table
-      ref={ref}
-      className={cn('w-full caption-bottom text-sm', className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = 'Table'
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
-))
-TableHeader.displayName = 'TableHeader'
+const Table = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableElement>) => (
+  <table
+    className={cn('w-full caption-bottom text-sm', className)}
+    {...props}
+  />
+);
+Table.displayName = 'Table';
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn('[&_tr:last-child]:border-0', className)}
+const TableHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <thead
+    className={cn('[&_tr]:border-0 [&_tr]:border-b', className)}
     {...props}
   />
-))
-TableBody.displayName = 'TableBody'
+);
+TableHeader.displayName = 'TableHeader';
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+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
-    ref={ref}
-    className={cn(
-      'border-t bg-level-1 font-medium [&>tr]:last:border-b-0',
-      className
-    )}
+    className={cn('border-t font-medium [&>tr]:last:border-b-0', className)}
     {...props}
   />
-))
-TableFooter.displayName = 'TableFooter'
+);
+TableFooter.displayName = 'TableFooter';
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+const TableRow = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableRowElement>) => (
   <tr
-    ref={ref}
     className={cn(
-      'border-b transition-colors hover:bg-level-1 data-[state=selected]:bg-level-1',
-      className
+      'data-[state=selected]:bg-muted transition-colors hover:bg-gray-300/50',
+      className,
     )}
     {...props}
   />
-))
-TableRow.displayName = 'TableRow'
+);
+TableRow.displayName = 'TableRow';
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+const TableHead = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableCellElement>) => (
   <th
-    ref={ref}
     className={cn(
-      'h-12 px-4 text-left align-middle font-medium text-muted [&:has([role=checkbox])]:pr-0',
-      className
+      'text-text-secondary h-12 px-4 text-left align-middle font-medium uppercase [&:has([role=checkbox])]:pr-0',
+      className,
     )}
     {...props}
   />
-))
-TableHead.displayName = 'TableHead'
+);
+TableHead.displayName = 'TableHead';
 
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+const TableCell = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableCellElement>) => (
   <td
-    ref={ref}
     className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
     {...props}
   />
-))
-TableCell.displayName = 'TableCell'
+);
+TableCell.displayName = 'TableCell';
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
+const TableCaption = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableCaptionElement>) => (
   <caption
-    ref={ref}
-    className={cn('mt-4 text-sm text-muted', className)}
+    className={cn('text-text-secondary mt-4 text-sm', className)}
     {...props}
   />
-))
-TableCaption.displayName = 'TableCaption'
+);
+TableCaption.displayName = 'TableCaption';
 
 export {
   Table,
@@ -114,4 +102,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};

package/primitives/tabs.tsx

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

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,61 @@
+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

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

@@ -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 };

package/primitives/toggle-group.tsx

@@ -1,63 +1,63 @@
-'use client'
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import * as React from 'react'
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
-import type { VariantProps } from 'class-variance-authority'
-
-import { cn } from '../util'
-import { toggleVariants } from './toggle'
+import { cn } from '../src/utils';
+import { toggleVariants } from './toggle';
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>
 >({
   size: 'default',
   variant: 'default',
-  rounded: 'md'
-})
-
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, rounded, children, ...props }, ref) => (
+});
+
+const ToggleGroup = ({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) => (
   <ToggleGroupPrimitive.Root
-    ref={ref}
     className={cn('flex items-center justify-center gap-1', className)}
     {...props}
   >
-    <ToggleGroupContext.Provider value={{ variant, size, rounded }}>
-      {children as React.ReactNode}
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
     </ToggleGroupContext.Provider>
   </ToggleGroupPrimitive.Root>
-))
+);
 
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, rounded, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
+const ToggleGroupItem = ({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) => {
+  const context = React.useContext(ToggleGroupContext);
 
   return (
     <ToggleGroupPrimitive.Item
-      ref={ref}
       className={cn(
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
-          rounded: context.rounded || rounded,
         }),
-        className
+        className,
       )}
       {...props}
     >
       {children}
     </ToggleGroupPrimitive.Item>
-  )
-})
+  );
+};
 
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };