@hanzo/ui 5.0.1 → 5.0.3

package/primitives/next/youtube-embed.tsx

@@ -1,83 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import Image from 'next/image'
-
-import * as Icons from '../icons'
-
-// Concept based on https://www.youtube.com/watch?v=lLqRchtjN00
-// (https://github.com/a-trost/fableton)
-
-const YouTubeEmbed: React.FC<{
-  youtubeID: string
-  width: number
-  height: number
-  buttonSize?: number
-  timeAt?: string // '5s'
-  title?: string
-  caption?: string
-  className?: string
-}> = ({
-  youtubeID,
-  width,
-  height,
-  buttonSize=100,
-  timeAt,
-  title,
-  caption,
-  className=''
-}) => {
-
-  const [showVideo, setShowVideo] = useState(false)
-
-    // re autoplay: https://stackoverflow.com/a/45610557/11645689
-  return (
-    <div className={className}>
-      {showVideo ? (
-        <iframe
-          width={width}
-          height={height}
-          src={`https://www.youtube-nocookie.com/embed/${youtubeID + ((timeAt) ? `?t=${timeAt}&` : '?')}rel=0&autoplay=1`}
-          allow='accelerometer ; autoplay *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *;'
-          allowFullScreen
-          title={title || 'Youtube video'}
-          className='aspect-[16/9] h-full w-full p-0 border-0 '
-        />
-      ) : (
-        <button
-          type='button'
-          onClick={() => setShowVideo(true)}
-          className='relative aspect-[16/9] w-full'
-          aria-label={`Play video ${title}`}
-        >
-          <Image
-            src={`https://img.youtube.com/vi/${youtubeID}/maxresdefault.jpg`}
-            alt=''
-            className='h-full w-full'
-            width={width}
-            height={height}
-            loading='lazy'
-          />
-          <div 
-            className={  //https://stackoverflow.com/a/23384995/11645689
-              'absolute z-above-content-2 left-[50%] top-[50%] -translate-y-2/4 -translate-x-2/4 ' + 
-              'grid place-items-center ' + 
-              'text-xl text-white opacity-90'
-            }
-          >
-            <Icons.youtube 
-              width={buttonSize} 
-              height={buttonSize} 
-              role='img'
-              className='transform transition hover:scale-110'
-              {...{'aria-hidden': true}} 
-            />
-          </div>
-          {caption && <p className='hidden md:block whitespace-nowrap typography absolute z-above-content left-[50%] top-[20px] -translate-x-2/4 '>{caption}</p>}
-        </button>
-      )}
-    </div>
-  )
-}
-
-export default YouTubeEmbed

package/primitives/pagination.tsx

@@ -1,117 +0,0 @@
-import { MoreHorizontal, RedoIcon, UndoIcon } from 'lucide-react';
-import React from 'react';
-
-import { cn } from '../src/utils';
-import { ButtonProps, buttonVariants } from './button';
-
-const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
-  <nav
-    aria-label="pagination"
-    className={cn('mx-auto flex w-full justify-center', className)}
-    role="navigation"
-    {...props}
-  />
-);
-Pagination.displayName = 'Pagination';
-
-const PaginationContent = ({
-  className,
-  ...props
-}: React.ComponentProps<'ul'>) => (
-  <ul
-    className={cn('flex flex-row items-center gap-1', className)}
-    {...props}
-  />
-);
-PaginationContent.displayName = 'PaginationContent';
-
-const PaginationItem = ({
-  className,
-  ...props
-}: React.ComponentProps<'li'>) => (
-  <li className={cn('', className)} {...props} />
-);
-PaginationItem.displayName = 'PaginationItem';
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<ButtonProps, 'size'> &
-  React.ComponentProps<'a'>;
-
-const PaginationLink = ({
-  className,
-  isActive,
-  size = 'icon',
-  ...props
-}: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? 'page' : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? 'outline' : 'tertiary',
-        size,
-      }),
-      'size-[30px] rounded-lg p-0.5',
-      className,
-    )}
-    {...props}
-  />
-);
-PaginationLink.displayName = 'PaginationLink';
-
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    className={cn('gap-1', className)}
-    size="sm"
-    {...props}
-  >
-    <UndoIcon className="h-4 w-4" />
-    <span className="sr-only">Previous</span>
-  </PaginationLink>
-);
-PaginationPrevious.displayName = 'PaginationPrevious';
-
-const PaginationNext = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    className={cn('gap-1', className)}
-    size="sm"
-    {...props}
-  >
-    <span className="sr-only">Next</span>
-    <RedoIcon className="h-4 w-4" />
-  </PaginationLink>
-);
-PaginationNext.displayName = 'PaginationNext';
-
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<'span'>) => (
-  <span
-    aria-hidden
-    className={cn('flex h-9 w-9 items-center justify-center', className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-);
-PaginationEllipsis.displayName = 'PaginationEllipsis';
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-};

package/primitives/popover.tsx

@@ -1,34 +0,0 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import React from 'react';
-
-import { cn } from '../src/utils';
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverAnchor = PopoverPrimitive.Anchor;
-const PopoverArrow = PopoverPrimitive.Arrow;
-const PopoverClose = PopoverPrimitive.Close;
-
-const PopoverContent = ({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      align={align}
-      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',
-        'bg-bg-dark border-divider z-50 w-72 rounded-md border p-4 text-gray-50 shadow-lg shadow-md outline-hidden',
-        className,
-      )}
-      sideOffset={sideOffset}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-);
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow, PopoverClose };

package/primitives/pretty-json-print.tsx

@@ -1,28 +0,0 @@
-import { useMemo } from 'react';
-import { cn } from '../src/utils';
-
-export const PrettyJsonPrint = ({
-  json,
-  className,
-}: {
-  json: string | object;
-  className?: string;
-}) => {
-  const formattedJson = useMemo(() => {
-    let formattedValue = `Unparseable JSON: String(${json})`;
-    if (typeof json === 'object') {
-      formattedValue = JSON.stringify(json, null, 2);
-    } else if (typeof json === 'string') {
-      try {
-        const parsedJson = JSON.parse(json);
-        formattedValue = JSON.stringify(parsedJson, null, 2);
-      } catch (error) {
-        console.error('error parsing json', error);
-      }
-    }
-    return formattedValue;
-  }, [json]);
-  return (
-    <pre className={cn('overflow-x-scroll', className)}>{formattedJson}</pre>
-  );
-};

package/primitives/progress.tsx

@@ -1,27 +0,0 @@
-import * as ProgressPrimitive from '@radix-ui/react-progress';
-import React from 'react';
-
-import { cn } from '../src/utils';
-
-const Progress = ({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) => (
-  <ProgressPrimitive.Root
-    className={cn(
-      'bg-bg-quaternary relative h-4 w-full overflow-hidden',
-      className,
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-green-500 transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-);
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };
-export default Progress;

package/primitives/prompt-textarea.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-
-import { cn } from '../src/utils';
-import { DotsLoader } from './dots-loader';
-import { FormLabel } from './form';
-
-const MIN_TEXTAREA_HEIGHT = 32;
-export interface PromptTextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  isLoading?: boolean;
-  label?: string;
-  field: {
-    onChange: (...event: any[]) => void;
-    onBlur: () => void;
-    value: any;
-    disabled?: boolean;
-    name: string;
-    placeholder?: string;
-  };
-}
-
-const PromptTextarea = ({ className, ...props }: PromptTextareaProps) => {
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-
-  React.useLayoutEffect(() => {
-    // Reset height - important to shrink on delete
-
-    if (!textareaRef.current) return;
-
-    textareaRef.current.style.height = '60px';
-    // Set height
-    textareaRef.current.style.height = `${Math.max(
-      textareaRef.current.scrollHeight + 2,
-      MIN_TEXTAREA_HEIGHT,
-    )}px`;
-
-    if (props.autoFocus !== undefined && props.autoFocus) {
-      textareaRef.current.focus();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.value]);
-
-  return (
-    <>
-      <textarea
-        className={cn(
-          'flex w-full rounded-md border border-gray-200 bg-gray-400 px-4 py-2 pt-4 text-sm break-words placeholder-gray-100 placeholder:text-base focus-visible:ring-1 focus-visible:ring-gray-100 focus-visible:outline-hidden focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        style={{
-          minHeight: MIN_TEXTAREA_HEIGHT,
-          resize: 'none',
-          maxHeight: '300px',
-        }}
-        {...props.field}
-        onKeyDown={props.onKeyDown}
-        ref={textareaRef}
-        {...(!props.isLoading && {
-          placeholder: props.label,
-        })}
-      />
-
-      {props.isLoading ? (
-        <DotsLoader className="absolute top-6 left-4" />
-      ) : null}
-      <FormLabel className="sr-only">{props.label}</FormLabel>
-    </>
-  );
-};
-PromptTextarea.displayName = 'PromptTextarea';
-
-export { PromptTextarea };

package/primitives/qr-code.tsx

@@ -1,112 +0,0 @@
-import { DownloadIcon } from '@radix-ui/react-icons';
-import { Check } from 'lucide-react';
-import React, { useState } from 'react';
-import { IProps, QRCode as ReactQRCode } from 'react-qrcode-logo';
-
-import hanzoLogo from '../assets/images/app-icon.png';
-import { Button } from './button';
-import { Dialog, DialogContent } from './dialog';
-
-export function QRCode({
-  value,
-  size,
-  id,
-  ...props
-}: {
-  value: IProps['value'];
-  size: IProps['size'];
-  id?: IProps['id'];
-} & React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
-  return (
-    <div {...props}>
-      <ReactQRCode
-        ecLevel={'M'}
-        eyeColor="black"
-        eyeRadius={10}
-        fgColor="black"
-        id={id}
-        logoHeight={size ? size * 0.2 : undefined}
-        logoImage={hanzoLogo}
-        logoPaddingStyle="circle"
-        logoWidth={size ? size * 0.2 : undefined}
-        qrStyle="dots"
-        removeQrCodeBehindLogo
-        size={size ?? 300}
-        value={value}
-      />
-    </div>
-  );
-}
-
-export function QrCodeModal({
-  open,
-  onOpenChange,
-  value,
-  onSave,
-  title,
-  description,
-  modalClassName,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  value: IProps['value'];
-  onSave: (key: string) => void;
-  title: React.ReactNode;
-  description: React.ReactNode;
-  modalClassName?: string;
-}) {
-  const [saved, setSaved] = useState(false);
-  const downloadCode = async () => {
-    const canvas = document.querySelector('#registration-code-qr');
-    if (canvas instanceof HTMLCanvasElement) {
-      try {
-        const pngUrl = canvas.toDataURL();
-        onSave(pngUrl);
-        setSaved(true);
-      } catch (error) {
-        console.error(error);
-      } finally {
-        setTimeout(() => {
-          setSaved(false);
-        }, 3000);
-      }
-    }
-  };
-
-  return (
-    <Dialog onOpenChange={onOpenChange} open={open}>
-      <DialogContent className={modalClassName}>
-        <div className="flex flex-col items-center py-4">
-          <h2 className="mb-1 text-lg font-semibold">{title}</h2>
-          <p className="text-text-secondary mb-5 text-center text-xs">
-            {description}
-          </p>
-          <div className="mb-7 overflow-hidden rounded-lg shadow-2xl">
-            <QRCode size={190} value={value} />
-            <QRCode
-              className="hidden"
-              id="registration-code-qr"
-              size={1024}
-              value={value}
-            />
-          </div>
-          <div className="flex flex-col gap-4">
-            <Button className="flex gap-1" onClick={downloadCode}>
-              {saved ? <Check /> : <DownloadIcon className="h-4 w-4" />}
-              {saved ? 'Saved' : 'Download'}
-            </Button>
-            <Button
-              className="flex gap-1"
-              onClick={() => {
-                onOpenChange(false);
-              }}
-              variant="tertiary"
-            >
-              I saved it, close
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/primitives/radio-group.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { Circle } from 'lucide-react';
-import React from 'react';
-
-import { cn } from '../src/utils';
-
-const RadioGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn('grid gap-2', className)}
-      {...props}
-    />
-  );
-};
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) => {
-  return (
-    <RadioGroupPrimitive.Item
-      className={cn(
-        'border-brand text-brand ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-};
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };

package/primitives/resizable.tsx

@@ -1,47 +0,0 @@
-import { GripVertical } from 'lucide-react';
-import * as ResizablePrimitive from 'react-resizable-panels';
-
-import { cn } from '../src/utils';
-
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
-      className,
-    )}
-    {...props}
-  />
-);
-
-const ResizablePanel = ResizablePrimitive.Panel;
-
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean;
-}) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      'focus-visible:ring-ring relative flex w-px items-center justify-center bg-gray-100 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden',
-      'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
-      'data-[resize-handle-state=drag]:after:bg-bg-secondary',
-      'data-[resize-handle-state=hover]:after:bg-bg-secondary',
-      'after:w-[1px] data-[panel-group-direction=vertical]:after:h-[1px]',
-      className,
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-gray-200">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </ResizablePrimitive.PanelResizeHandle>
-);
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/primitives/scroll-area.tsx

@@ -1,57 +0,0 @@
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import React from 'react';
-
-import { cn } from '../src/utils';
-
-const ScrollArea = ({
-  className,
-  children,
-  ref,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
-  ref?: React.RefObject<HTMLDivElement | null>;
-}) => (
-  <ScrollAreaPrimitive.Root
-    className={cn('relative overflow-hidden', className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport
-      className="h-full w-full rounded-[inherit]"
-      ref={ref}
-    >
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-);
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = ({
-  className,
-  orientation = 'vertical',
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    className={cn(
-      'flex touch-none transition-colors select-none',
-      orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' &&
-        'h-2.5 border-t border-t-transparent p-[1px]',
-      className,
-    )}
-    orientation={orientation}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb
-      className={cn(
-        'relative rounded-full bg-gray-300',
-        orientation === 'vertical' && 'flex-1',
-      )}
-    />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-);
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };

package/primitives/search-input.tsx

@@ -1,66 +0,0 @@
-import { SearchIcon, XIcon } from 'lucide-react';
-import React from 'react';
-
-import { cn } from '../src/utils';
-import { Button } from './button';
-import { Input } from './input';
-
-export type SearchInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  classNames?: {
-    container?: string;
-    input?: string;
-    button?: string;
-  };
-};
-
-const SearchInput = ({
-  className,
-  value,
-  onChange,
-  classNames,
-  ...props
-}: SearchInputProps) => {
-  return (
-    <div
-      className={cn(
-        'shadow-border-input focus-within:shadow-border-input-focus relative flex h-10 flex-1 items-center overflow-hidden rounded-full shadow-[0_0_0_1px_currentColor] transition-shadow',
-        classNames?.container,
-      )}
-    >
-      <Input
-        className={cn(
-          'placeholder:!text-text-placeholder !h-full border-none bg-transparent py-2 pl-10',
-          classNames?.input,
-        )}
-        onChange={(e) => {
-          onChange?.(e);
-        }}
-        placeholder="Search..."
-        spellCheck={false}
-        value={value}
-        {...props}
-      />
-      <SearchIcon className="text-text-tertiary absolute top-1/2 left-4 -z-[1px] h-4 w-4 -translate-y-1/2" />
-      {value && (
-        <Button
-          className={cn('absolute right-1 h-8 w-8 p-2', classNames?.button)}
-          onClick={() => {
-            onChange?.({
-              target: { value: '' },
-            } as React.ChangeEvent<HTMLInputElement>);
-          }}
-          size="auto"
-          type="button"
-          variant="tertiary"
-        >
-          <XIcon />
-          <span className="sr-only">Clear</span>
-        </Button>
-      )}
-    </div>
-  );
-};
-
-SearchInput.displayName = 'SearchInput';
-
-export { SearchInput };