@hanzo/ui 4.5.4 → 4.6.0

package/primitives/dot-pattern.tsx

@@ -0,0 +1,57 @@
+import { useId } from 'react';
+
+import { cn } from '../src/utils';
+
+interface DotPatternProps {
+  width?: any;
+  height?: any;
+  x?: any;
+  y?: any;
+  cx?: any;
+  cy?: any;
+  cr?: any;
+  className?: string;
+  [key: string]: any;
+}
+
+function DotPattern({
+  width = 16,
+  height = 16,
+  x = 0,
+  y = 0,
+  cx = 1,
+  cy = 1,
+  cr = 1,
+  className,
+  ...props
+}: DotPatternProps) {
+  const id = useId();
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        'pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80',
+        className,
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          height={height}
+          id={id}
+          patternContentUnits="userSpaceOnUse"
+          patternUnits="userSpaceOnUse"
+          width={width}
+          x={x}
+          y={y}
+        >
+          <circle cx={cx} cy={cy} id="pattern-circle" r={cr} />
+        </pattern>
+      </defs>
+      <rect fill={`url(#${id})`} height="100%" strokeWidth={0} width="100%" />
+    </svg>
+  );
+}
+
+export { DotPattern };

package/primitives/dots-loader.tsx

@@ -0,0 +1,13 @@
+const DotsLoader = ({ className }: { className?: string }) => {
+  return (
+    <div className={className}>
+      <div className="flex h-4 space-x-1.5">
+        <div className="h-2 w-2 animate-[loaderDots_0.6s_0s_infinite_alternate] rounded-full bg-slate-100" />
+        <div className="h-2 w-2 animate-[loaderDots_0.6s_0.3s_infinite_alternate] rounded-full bg-slate-100" />
+        <div className="h-2 w-2 animate-[loaderDots_0.6s_0.6s_infinite_alternate] rounded-full bg-slate-100" />
+      </div>
+    </div>
+  );
+};
+
+export { DotsLoader };

package/primitives/drawer.tsx

@@ -1,9 +1,7 @@
-'use client'
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
 
-import * as React from 'react'
-import { Drawer as DrawerPrimitive } from '@hanzo/react-drawer'
-
-import { cn } from '../util'
+import { cn } from '../src/utils';
 
 const Drawer = ({
   shouldScaleBackground = false,
@@ -13,74 +11,54 @@ const Drawer = ({
     shouldScaleBackground={shouldScaleBackground}
     {...props}
   />
-)
-Drawer.displayName = 'Drawer'
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
 
-const DrawerTrigger = DrawerPrimitive.Trigger
-const DrawerPortal = DrawerPrimitive.Portal
-const DrawerHandle = DrawerPrimitive.Handle
-const DrawerClose = DrawerPrimitive.Close
+const DrawerPortal = DrawerPrimitive.Portal;
 
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) => (
   <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn('fixed inset-0 bg-overlay backdrop-blur-sm', className)}
+    className={cn('fixed inset-0 z-50 bg-black/70', className)}
     {...props}
   />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
-    overlayClx?: string
-    defaultHandle?: boolean
-  }
->(({ 
-  className, 
-  children, 
-  overlayClx='', 
-  defaultHandle=true,
-  ...props 
- }, ref) => {
-  
-  return (
-    <DrawerPortal>
-      {/* If no or same z index, overlay should precede content */}
-      <DrawerOverlay className={cn('z-below-modal', overlayClx)}/>
-      <DrawerPrimitive.Content
-        ref={ref}
-        className={cn('fixed left-0 right-0 bottom-0 z-modal',
-          'mt-24 flex flex-col rounded-t-[10px] pt-6 border bg-background',
-          // 'h-[80%]' 
-          className
-        )}
-        {...props}
-      >
-        {defaultHandle && (
-          <div className='absolute left-0 right-0 mx-auto top-2 h-2 w-[100px] rounded-full bg-level-3 shrink-0' />
-        )}
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPortal>
-  )
-})
+);
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
-DrawerContent.displayName = 'DrawerContent'
+const DrawerContent = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      className={cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-gray-500 px-6 pb-6 focus:outline-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-gray-300" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+);
+DrawerContent.displayName = 'DrawerContent';
 
 const DrawerHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = 'DrawerHeader'
+  <div className={cn('pt-5 pb-0', className)} {...props} />
+);
+DrawerHeader.displayName = 'DrawerHeader';
 
 const DrawerFooter = ({
   className,
@@ -90,49 +68,43 @@ const DrawerFooter = ({
     className={cn('mt-auto flex flex-col gap-2 p-4', className)}
     {...props}
   />
-)
-DrawerFooter.displayName = 'DrawerFooter'
+);
+DrawerFooter.displayName = 'DrawerFooter';
 
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
+const DrawerTitle = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) => (
   <DrawerPrimitive.Title
-    ref={ref}
     className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
-      className
+      'text-lg leading-none font-semibold tracking-tight',
+      className,
     )}
     {...props}
   />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+);
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
+const DrawerDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) => (
   <DrawerPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted', className)}
+    className={cn('text-text-secondary text-sm', className)}
     {...props}
   />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
-
-type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>
+);
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
-  type DrawerProps,
   Drawer,
   DrawerPortal,
   DrawerOverlay,
   DrawerTrigger,
   DrawerClose,
   DrawerContent,
-  DrawerHandle,
   DrawerHeader,
   DrawerFooter,
   DrawerTitle,
-  DrawerDescription
-}
+  DrawerDescription,
+};

package/primitives/dropdown-menu.tsx

@@ -0,0 +1,199 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../src/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = ({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) => (
+  <DropdownMenuPrimitive.SubTrigger
+    className={cn(
+      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+);
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => (
+  <DropdownMenuPrimitive.SubContent
+    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 z-[2000000000] min-w-[8rem] space-y-3 overflow-hidden rounded-md bg-gray-300 text-white shadow-lg',
+      className,
+    )}
+    {...props}
+  />
+);
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = ({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      className={cn(
+        'font-inter border-divider 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 bg-bg-dark z-[2000000000] min-w-[8rem] overflow-hidden rounded-lg border px-4 py-6 text-white shadow-md',
+        className,
+      )}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+);
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = ({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+}) => (
+  <DropdownMenuPrimitive.Item
+    className={cn(
+      'focus:bg-bg-secondary relative flex cursor-default items-center rounded-lg px-2 py-2 text-sm outline-hidden transition-colors select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+);
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = ({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    checked={checked}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center rounded-xs bg-gray-300">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-3 w-3" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+);
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) => (
+  <DropdownMenuPrimitive.RadioItem
+    className={cn(
+      'focus:bg-bg-secondary relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'hover:bg-bg-secondary data-[state=checked]:bg-bg-secondary',
+      className,
+    )}
+    {...props}
+  >
+    {/*<span className="absolute left-2 flex items-center justify-center">*/}
+    {/*  <DropdownMenuPrimitive.ItemIndicator>*/}
+    {/*    <Check className="h-4 w-4 text-inherit" />*/}
+    {/*  </DropdownMenuPrimitive.ItemIndicator>*/}
+    {/*</span>*/}
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+);
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = ({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) => (
+  <DropdownMenuPrimitive.Label
+    className={cn(
+      'text-text-secondary text-xs tracking-[2px] uppercase',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+);
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) => (
+  <DropdownMenuPrimitive.Separator
+    className={cn('bg-divider -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+);
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/primitives/error-message.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  message: string;
+}
+
+const ErrorMessage = ({ message, ...props }: ErrorMessageProps) => {
+  return (
+    <div
+      className="rounded-sm bg-red-500/10 px-4 py-2 text-sm text-red-700"
+      {...props}
+    >
+      <strong className="font-bold">Error: </strong>
+      <span className="block sm:inline"> {message} </span>
+    </div>
+  );
+};
+
+export { ErrorMessage };

package/primitives/file-uploader.tsx

@@ -0,0 +1,200 @@
+import { useTranslation } from '@hanzo_network/hanzo-i18n';
+import { partial } from 'filesize';
+import { Loader2, Trash, Upload } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+
+import { fileIconMap, FileTypeIcon, PaperClipIcon } from '../assets';
+import { getFileExt } from '../helpers/file';
+import { cn } from '../src/utils';
+import { Button } from './button';
+import { ScrollArea } from './scroll-area';
+
+const openFile = (file: File): void => {
+  const fileURL = window.URL.createObjectURL(file);
+  window.open(fileURL, '_blank');
+  URL.revokeObjectURL(fileURL);
+};
+
+export const FileItem = ({
+  file,
+  actions,
+}: {
+  file: File;
+  actions?: {
+    label: string;
+    icon: React.ReactNode;
+    onClick: (file: File) => void;
+  }[];
+}) => {
+  const size = partial({ standard: 'jedec' });
+  const hasPreviewImage = file?.type?.includes('image/');
+
+  return (
+    <div className="bg-bg-quaternary relative flex items-center gap-2 rounded-xl px-3 py-1.5 pr-2">
+      <span className="flex w-[30px] items-center justify-center">
+        {hasPreviewImage ? (
+          <FileImagePreview
+            className="h-full rounded-md object-cover"
+            file={file}
+          />
+        ) : fileIconMap[getFileExt(file.name)] ? (
+          <FileTypeIcon
+            className="text-text-secondary"
+            type={getFileExt(file.name)}
+          />
+        ) : (
+          <PaperClipIcon className="text-text-secondary h-4 w-4" />
+        )}
+      </span>
+      <div className="line-clamp-1 flex flex-1 flex-col gap-1">
+        <button
+          className="text-left hover:underline"
+          onClick={() => openFile(file)}
+          type="button"
+        >
+          <span className="text-text-default line-clamp-1 text-sm">
+            {decodeURIComponent(file.name)}
+          </span>
+        </button>
+        {file.size && (
+          <span className="text-text-tertiary shrink-0 text-xs">
+            {size(file.size)}
+          </span>
+        )}
+      </div>
+      {!!actions?.length && (
+        <div className="shrink-0">
+          {actions?.map((action) => (
+            <Button
+              className="h-8 w-8 border-0 bg-transparent"
+              key={action.label}
+              onClick={() => action.onClick(file)}
+              size="icon"
+              type="button"
+              variant="outline"
+            >
+              <span className="sr-only">{action.label}</span>
+              {action.icon}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const FileUploader = ({
+  value,
+  onChange,
+  maxFiles,
+  accept,
+  allowMultiple,
+  disabled,
+  descriptionText,
+  shouldDisableScrolling,
+}: {
+  value: File[];
+  onChange: (files: File[]) => void;
+  maxFiles?: number;
+  accept?: string;
+  allowMultiple?: boolean;
+  disabled?: boolean;
+  descriptionText?: string;
+  shouldDisableScrolling?: boolean;
+}) => {
+  const { t } = useTranslation();
+  const { getRootProps: getRootFileProps, getInputProps: getInputFileProps } =
+    useDropzone({
+      multiple: allowMultiple,
+      maxFiles: maxFiles,
+      onDrop: (acceptedFiles) => {
+        onChange(acceptedFiles);
+      },
+      disabled: disabled,
+    });
+
+  return (
+    <div className="flex w-full flex-col gap-2.5">
+      <div
+        {...getRootFileProps({
+          className:
+            'dropzone py-4 bg-bg-secondary group relative mt-3 flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-dashed border-divider transition-colors hover:border-border-input-focus',
+        })}
+      >
+        <div className="flex flex-col items-center justify-center space-y-1 px-2">
+          <div className="bg-bg-tertiary rounded-full p-2 shadow-xs">
+            <Upload className="h-4 w-4" />
+          </div>
+          <p className="text-sm text-white">{t('common.clickToUpload')}</p>
+          {descriptionText && (
+            <p className="text-text-tertiary line-clamp-1 text-xs">
+              {descriptionText}
+            </p>
+          )}
+        </div>
+
+        <input
+          {...getInputFileProps({
+            accept: accept,
+          })}
+        />
+      </div>
+
+      {!!value?.length && (
+        <ScrollArea
+          className={cn(
+            'max-h-[40vh] flex-1 grow overflow-y-scroll pr-1 [&>div>div]:!block',
+            shouldDisableScrolling && 'max-h-full overflow-y-auto pr-0',
+          )}
+        >
+          <div className="flex flex-col gap-2">
+            {value?.map((file, idx) => (
+              <FileItem
+                actions={[
+                  {
+                    label: 'Delete',
+                    icon: <Trash className="text-text-tertiary h-4 w-4" />,
+                    onClick: (file) => {
+                      const newFiles = [...value];
+                      newFiles.splice(newFiles.indexOf(file), 1);
+                      onChange(newFiles);
+                    },
+                  },
+                ]}
+                file={file}
+                key={file.name + idx}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+};
+
+interface FileImagePreview extends React.HTMLAttributes<HTMLDivElement> {
+  file: File;
+}
+
+const FileImagePreview = ({ file, ...props }: FileImagePreview) => {
+  const [imageSrc, setImageSrc] = useState('');
+  useEffect(() => {
+    const reader = new FileReader();
+    reader.addEventListener(
+      'load',
+      function () {
+        setImageSrc(reader.result as string);
+      },
+      false,
+    );
+    if (file) {
+      reader.readAsDataURL(file);
+    }
+  }, [file]);
+  return imageSrc ? (
+    <img alt="preview" src={imageSrc} {...props} />
+  ) : (
+    <Loader2 />
+  );
+};