@hanzo/ui 4.7.0 → 4.8.2

package/primitives/context-menu.tsx

@@ -0,0 +1,206 @@
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+type ContextMenuSubTriggerProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubTrigger
+> & {
+  inset?: boolean;
+  ref?: React.RefObject<
+    React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>
+  >;
+};
+
+const ContextMenuSubTrigger = ({
+  className,
+  inset,
+  children,
+  ref,
+  ...props
+}: ContextMenuSubTriggerProps) => (
+  <ContextMenuPrimitive.SubTrigger
+    className={cn(
+      'focus:bg-accent data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none focus:text-white',
+      inset && 'pl-8',
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+);
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) => (
+  <ContextMenuPrimitive.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-50 min-w-[8rem] overflow-hidden rounded-md border bg-gray-300 p-1 text-white shadow-md',
+      className,
+    )}
+    {...props}
+  />
+);
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      className={cn(
+        'animate-in fade-in-80 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-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-600 bg-gray-300 p-1 text-gray-50 shadow-md',
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+);
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = ({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+}) => (
+  <ContextMenuPrimitive.Item
+    className={cn(
+      'relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none focus:bg-gray-200 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+);
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = ({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) => (
+  <ContextMenuPrimitive.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 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">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+);
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) => (
+  <ContextMenuPrimitive.RadioItem
+    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 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">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+);
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = ({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) => (
+  <ContextMenuPrimitive.Label
+    className={cn(
+      'text-text-default px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+);
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) => (
+  <ContextMenuPrimitive.Separator
+    className={cn('bg-border -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+);
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'text-text-secondary ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+ContextMenuShortcut.displayName = 'ContextMenuShortcut';
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

package/primitives/copy-to-clipboard-icon.tsx

@@ -0,0 +1,60 @@
+import { CheckCircle2, CopyIcon } from 'lucide-react';
+import React, { cloneElement, type ReactElement } from 'react';
+
+import { useCopyClipboard } from '../src/hooks';
+import { cn } from '../src/utils';
+import { Button } from './button';
+
+type CopyToClipboardIconProps = {
+  string?: string;
+  children?: ReactElement<{
+    className?: string;
+    onClick?: () => void;
+  }>;
+  className?: string;
+  onCopyClipboard?: () => void;
+  asChild?: boolean;
+};
+
+const CopyToClipboardIcon = ({
+  string,
+  children,
+  className,
+  onCopyClipboard,
+  asChild = false,
+}: CopyToClipboardIconProps) => {
+  const { isCopied, onCopy } = useCopyClipboard({
+    string,
+    onCopyClipboard,
+  });
+
+  const ClipboardIcon = isCopied ? CheckCircle2 : CopyIcon;
+
+  if (asChild && children) {
+    return cloneElement(children, {
+      onClick: onCopy,
+      className: cn(children.props?.className, className),
+    });
+  }
+
+  return (
+    <Button
+      className={cn(
+        'text-text-secondary hover:bg-bg-tertiary bg-bg-tertiary flex h-8 w-8 gap-2 rounded-lg text-xs font-normal transition-colors hover:text-white',
+        className,
+      )}
+      disabled={!string}
+      onClick={onCopy}
+      size={'icon'}
+      type="button"
+      variant="tertiary"
+    >
+      <ClipboardIcon
+        className={cn('h-3.5 w-3.5', isCopied && 'text-green-500')}
+      />
+      {children}
+    </Button>
+  );
+};
+
+export { CopyToClipboardIcon, useCopyClipboard };

package/primitives/dialog-video-controller.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import React, { PropsWithChildren, useState } from 'react'
+
+const DialogVideoController: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+
+  const [open, setOpen] = useState<boolean>(false)
+
+  const onOpenChange = (b: boolean) => {
+    setOpen(b)
+    const videos = document.getElementsByTagName('video')
+    const videoArray = Array.from(videos)
+    videoArray.forEach((v) => {
+      if (b) {
+        v.pause()
+      }
+      else {
+        v.play()
+      }
+    }) 
+  }
+
+    // https://stackoverflow.com/a/49052730/11645689
+  const updatedChildren = React.Children.map(
+    children,
+    (child) => (React.cloneElement(
+      child as any, { open, onOpenChange }
+    ))
+  )
+
+  return (<>
+    {updatedChildren}
+  </>)
+}
+
+export default DialogVideoController

package/primitives/dialog.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      '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-bg-dark/90',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = ({
+  className,
+  children,
+  showCloseButton = false,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      className={cn(
+        'bg-bg-default 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 border-divider fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close
+        className={cn(
+          'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-text-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',
+          !showCloseButton && 'hidden',
+        )}
+      >
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) => (
+  <DialogPrimitive.Title
+    className={cn(
+      'text-lg leading-none font-semibold tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) => (
+  <DialogPrimitive.Description
+    className={cn('text-text-secondary text-sm', className)}
+    {...props}
+  />
+);
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '../src/utils';
+
+const Drawer = ({
+  shouldScaleBackground = false,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerHandle = DrawerPrimitive.Handle;
+
+const DrawerOverlay = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) => (
+  <DrawerPrimitive.Overlay
+    className={cn('fixed inset-0 z-50 bg-black/70', className)}
+    {...props}
+  />
+);
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+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('pt-5 pb-0', className)} {...props} />
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) => (
+  <DrawerPrimitive.Title
+    className={cn(
+      'text-lg leading-none font-semibold tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+);
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) => (
+  <DrawerPrimitive.Description
+    className={cn('text-text-secondary text-sm', className)}
+    {...props}
+  />
+);
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerHandle,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};