@hanzo/ui 4.8.5 → 5.0.0

package/primitives/context-menu.tsx

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

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

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

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

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

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