@hanzo/ui 4.5.3 → 4.6.0

package/primitives/breadcrumb.tsx

@@ -1,108 +1,123 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from '../util'
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../src/utils';
+
+type BreadcrumbProps = React.ComponentPropsWithoutRef<'nav'> & {
+  separator?: React.ReactNode;
+  ref?: React.RefObject<HTMLDivElement>;
+};
+
+const Breadcrumb = ({ ref, ...props }: BreadcrumbProps) => (
+  <nav aria-label="breadcrumb" ref={ref} {...props} />
+);
+
+Breadcrumb.displayName = 'Breadcrumb';
+
+type BreadcrumbListProps = React.ComponentPropsWithoutRef<'ol'> & {
+  ref?: React.RefObject<HTMLOListElement>;
+};
+
+const BreadcrumbList = ({ className, ref, ...props }: BreadcrumbListProps) => (
   <ol
-    ref={ref}
     className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-2 sm:gap-2.5",
-      className
+      'text-text-secondary flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+      className,
     )}
+    ref={ref}
     {...props}
   />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+);
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+type BreadcrumbItemProps = React.ComponentPropsWithoutRef<'li'> & {
+  ref?: React.RefObject<HTMLLIElement>;
+};
 
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
+const BreadcrumbItem = ({ className, ref, ...props }: BreadcrumbItemProps) => (
   <li
+    className={cn('inline-flex items-center gap-1.5', className)}
     ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
     {...props}
   />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+);
+BreadcrumbItem.displayName = 'BreadcrumbItem';
 
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<'a'> & {
+  asChild?: boolean;
+  ref?: React.RefObject<HTMLAnchorElement>;
+};
+
+const BreadcrumbLink = ({
+  asChild,
+  className,
+  ref,
+  ...props
+}: BreadcrumbLinkProps) => {
+  const Comp = asChild ? Slot : 'a';
 
   return (
     <Comp
+      className={cn('hover:text-text-default transition-colors', className)}
       ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
+  );
+};
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+type BreadcrumbPageProps = React.ComponentPropsWithoutRef<'span'> & {
+  ref?: React.RefObject<HTMLSpanElement>;
+};
+
+const BreadcrumbPage = ({ className, ref, ...props }: BreadcrumbPageProps) => (
   <span
+    aria-current="page"
+    aria-disabled="true"
+    className={cn('text-text-default font-normal', className)}
     ref={ref}
     role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
     {...props}
   />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+);
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+type BreadcrumbSeparatorProps = React.ComponentProps<'li'> & {
+  ref?: React.RefObject<HTMLLIElement>;
+};
 
 const BreadcrumbSeparator = ({
   children,
   className,
   ...props
-}: React.ComponentProps<"li">) => (
+}: BreadcrumbSeparatorProps) => (
   <li
-    role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
+    className={cn('[&>svg]:h-4 [&>svg]:w-4', className)}
+    role="presentation"
     {...props}
   >
     {children ?? <ChevronRight />}
   </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
 
 const BreadcrumbEllipsis = ({
   className,
   ...props
-}: React.ComponentProps<"span">) => (
+}: React.ComponentProps<'span'>) => (
   <span
-    role="presentation"
     aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    role="presentation"
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
 
 export {
   Breadcrumb,
@@ -112,4 +127,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};

package/primitives/button.tsx

@@ -1,85 +1,82 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from "../util"
+import { cn } from '../src/utils';
 
-// Define all variants
-const variant = {
-  primary: "bg-primary text-primary-fg sm:hover:bg-primary-hover font-nav whitespace-nowrap not-typography",
-  secondary: "bg-secondary text-secondary-fg sm:hover:bg-secondary-hover font-nav whitespace-nowrap not-typography",
-  outline: "text-foreground bg-background border border-muted-4 sm:hover:bg-level-1 sm:hover:text-accent sm:hover:border-accent font-nav whitespace-nowrap not-typography",
-  destructive: "bg-destructive text-destructive-fg font-sans whitespace-nowrap sm:hover:bg-destructive-hover",
-  ghost: "text-foreground sm:hover:bg-level-1 sm:hover:text-accent whitespace-nowrap font-sans ",
-  link: "text-foreground sm:hover:text-muted-1 font-sans ",
-  linkFG: "text-foreground sm:hover:text-muted-1 font-sans ", // marker to style nav as regular link
-  linkMuted: "text-muted-1 sm:hover:text-foreground font-sans ",
-}
-
-// Define all sizes
-const size = {
-  link: '',
-  xs: "h-8 px-2 text-xs",
-  sm: "h-9 px-3 text-xs",
-  square: 'h-9 py-2 px-2 text-sm aspect-square',
-  default: "h-9 py-2 px-4 text-sm md:text-base font-semibold min-w-0",
-  lg: "h-10 px-8 text-sm md:text-base font-semibold min-w-0 md:min-w-[260px] lg:min-w-[300px]",
-  icon: "h-10 w-10",
-}
-
-// Define rounded options
-const rounded = {
-  full: 'rounded-full',
-  sm: 'rounded-sm',
-  md: 'rounded-md',
-  lg: 'rounded-lg',
-  xl: 'rounded-xl',
-  none: ''
-}
-
-// Updated buttonVariants with the latest Shadcn patterns
 const buttonVariants = cva(
-  "inline-flex items-center justify-center font-medium ring-offset-background transition-colors " +
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " +
-  "disabled:opacity-50 disabled:pointer-events-none",
+  'inline-flex items-center justify-center gap-2 border border-transparent text-sm font-semibold transition-colors focus-visible:ring-1 focus-visible:ring-gray-50 focus-visible:outline-hidden focus-visible:ring-inset',
   {
     variants: {
-      variant,
-      size,
-      rounded
+      variant: {
+        default:
+          'bg-brand hover:bg-brand-500 text-black disabled:bg-gray-800 disabled:text-gray-400 disabled:opacity-60',
+        destructive:
+          'disabled:text-text-secondary bg-red-500 text-white hover:bg-red-500/90 disabled:bg-gray-600',
+        outline:
+          'border border-gray-600 bg-transparent text-white hover:border-gray-400 hover:bg-gray-900 hover:text-white',
+        tertiary:
+          'bg-transparent text-gray-300 hover:bg-gray-900 hover:text-white',
+        link: 'text-white underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-[50px] px-8 text-sm',
+        xs: 'h-[34px] gap-1.5 px-3 text-xs',
+        sm: 'h-[36px] gap-1.5 px-3 text-xs',
+        md: 'h-[40px] gap-1.5 px-3 text-xs',
+        lg: 'h-[48px] gap-2 px-2 text-sm',
+        icon: 'h-9 w-9',
+        auto: 'h-auto p-4',
+      },
+      rounded: {
+        full: 'rounded-full',
+        lg: 'rounded-lg',
+      },
     },
     defaultVariants: {
-      variant: "primary",
-      size: "default",
-      rounded: 'md'
+      variant: 'default',
+      size: 'default',
+      rounded: 'full',
     },
-  }
-)
+  },
+);
 
-interface ButtonProps extends
-  React.ButtonHTMLAttributes<HTMLButtonElement>, 
-  VariantProps<typeof buttonVariants> 
-{
-  asChild?: boolean
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  isLoading?: boolean;
+  ref?: React.RefObject<HTMLButtonElement>;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, rounded, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, rounded }), className )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
+const Button = ({
+  className,
+  variant,
+  size,
+  rounded,
+  asChild = false,
+  isLoading = false,
+  ref,
+  ...props
+}: ButtonProps) => {
+  const Comp = asChild ? Slot : 'button';
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props}
+    >
+      {isLoading ? (
+        <Loader2
+          className={cn('h-4 w-4 animate-spin', size !== 'icon' && 'mr-2')}
+        />
+      ) : null}
+      {isLoading && size === 'icon' ? null : props.children}
+    </Comp>
+  );
+};
 
-Button.displayName = "Button"
+Button.displayName = 'Button';
 
-export { 
-  Button as default, 
-  type ButtonProps,
-  buttonVariants,
-}
+export { Button, buttonVariants };

package/primitives/card.tsx

@@ -1,83 +1,97 @@
-'use client'
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "../util"
+import { cn } from '../src/utils';
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  return(
-    <div
-      ref={ref}
-      className={cn(
-        "rounded-lg border overflow-hidden shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-})
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement>;
+};
 
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+const Card = ({ className, ref, ...props }: CardProps) => (
   <div
+    className={cn(
+      'bg-card text-card-foreground rounded-lg border shadow-xs',
+      className,
+    )}
     ref={ref}
-    className={cn("flex flex-col p-4 lg:p-5 xl:px-6 xl:py-5 border-b", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+);
+Card.displayName = 'Card';
+
+type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement>;
+};
 
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
+const CardHeader = ({ className, ref, ...props }: CardHeaderProps) => (
+  <div
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
     ref={ref}
+    {...props}
+  />
+);
+
+CardHeader.displayName = 'CardHeader';
+
+type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+  ref?: React.RefObject<HTMLHeadingElement>;
+};
+
+const CardTitle = ({ className, ref, ...props }: CardTitleProps) => (
+  <h3
     className={cn(
-      "leading-none tracking-tight",
-      className
+      'text-2xl leading-none font-semibold tracking-tight',
+      className,
     )}
+    ref={ref}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+);
+CardTitle.displayName = 'CardTitle';
 
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <h6
+type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.RefObject<HTMLParagraphElement>;
+};
+
+const CardDescription = ({
+  className,
+  ref,
+  ...props
+}: CardDescriptionProps) => (
+  <p
+    className={cn('text-text-secondary text-sm', className)}
     ref={ref}
-    className={className}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+);
+CardDescription.displayName = 'CardDescription';
+
+type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement>;
+};
+
+const CardContent = ({ className, ref, ...props }: CardContentProps) => (
+  <div className={cn('p-6 pt-0', className)} ref={ref} {...props} />
+);
+CardContent.displayName = 'CardContent';
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement>;
+};
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+const CardFooter = ({ className, ref, ...props }: CardFooterProps) => (
   <div
+    className={cn('flex items-center p-6 pt-0', className)}
     ref={ref}
-    className={cn("flex items-center px-6 py-3 border-t", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+);
+CardFooter.displayName = 'CardFooter';
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/primitives/chat/chat-input-area.tsx

@@ -0,0 +1,87 @@
+import { useTranslation } from '@hanzo_network/hanzo-i18n';
+import * as React from 'react';
+
+import { useCombinedRefs } from '../../hooks/use-combined-refs';
+import { cn } from '../src/utils';
+import { ChatInput } from './chat-input';
+
+type ChatInputAreaProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onPaste?: (e: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+  onSubmit: () => void;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  isLoading?: boolean;
+  placeholder?: string;
+  topAddons?: React.ReactNode;
+  bottomAddons?: React.ReactNode;
+  textareaClassName?: string;
+  className?: string;
+  alternateElement?: React.ReactNode;
+  ref?: React.RefObject<HTMLTextAreaElement | null>;
+};
+export const ChatInputArea = ({
+  value,
+  onChange,
+  onPaste,
+  onKeyDown,
+  autoFocus,
+  onSubmit,
+  disabled,
+  isLoading,
+  placeholder,
+  topAddons,
+  bottomAddons,
+  textareaClassName,
+  alternateElement,
+  className,
+  ref,
+}: ChatInputAreaProps) => {
+  const { t } = useTranslation();
+  const textareaRef = useCombinedRefs<HTMLTextAreaElement>(
+    ref as React.RefObject<HTMLTextAreaElement>,
+  );
+
+  return (
+    <div
+      className={cn(
+        'bg-bg-secondary flex w-full max-w-full flex-col rounded-xl text-sm aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
+        'shadow-border-input focus-within:shadow-border-input-focus overflow-hidden shadow-[0_0_0_1px_currentColor] transition-shadow',
+        className,
+      )}
+    >
+      {topAddons}
+      <div
+        aria-disabled={disabled}
+        className="flex cursor-text flex-col aria-disabled:cursor-not-allowed"
+        onClick={(e) => {
+          if (e.target === e.currentTarget) {
+            textareaRef?.current?.focus();
+          }
+        }}
+      >
+        {alternateElement ? (
+          alternateElement
+        ) : (
+          <ChatInput
+            autoFocus={autoFocus}
+            className={textareaClassName}
+            disabled={disabled || isLoading}
+            onChange={(e) => onChange(e.target.value)}
+            onKeyDown={onKeyDown}
+            onPaste={onPaste}
+            onSend={onSubmit}
+            placeholder={placeholder ?? t('chat.sendMessagePlaceholder')}
+            ref={textareaRef}
+            value={value}
+          />
+        )}
+        {bottomAddons}
+      </div>
+    </div>
+  );
+};
+
+ChatInputArea.displayName = 'ChatInputArea';

package/primitives/chat/chat-input.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import { cn } from '../src/utils';
+
+export interface ChatInputProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  onSend?: () => void;
+  ref: React.RefObject<HTMLTextAreaElement | null>;
+}
+
+export const useAutoResizeTextarea = (
+  ref: React.RefObject<HTMLTextAreaElement | null>,
+  value: string | number | readonly string[] | undefined,
+  autoResize = true, //later to unify
+) => {
+  const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useImperativeHandle(ref, () => textAreaRef.current!);
+
+  React.useEffect(() => {
+    const ref = textAreaRef?.current;
+
+    const updateTextareaHeight = () => {
+      if (ref && autoResize) {
+        ref.style.height = 'auto';
+        ref.style.height = ref?.scrollHeight + 'px';
+      }
+    };
+
+    updateTextareaHeight();
+
+    ref?.addEventListener('input', updateTextareaHeight);
+    return () => ref?.removeEventListener('input', updateTextareaHeight);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return { textAreaRef };
+};
+
+const ChatInputBase = ({
+  className,
+  onSend,
+  onKeyDown,
+  ref,
+  ...props
+}: ChatInputProps) => {
+  const { textAreaRef } = useAutoResizeTextarea(ref, props.value);
+
+  return (
+    <textarea
+      className={cn(
+        'placeholder:!text-text-placeholder flex max-h-[40vh] min-h-[80px] w-full resize-none overflow-y-auto border-none bg-transparent px-3 py-2 text-base leading-normal break-words focus:outline-hidden focus-visible:ring-0 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      id="chat-input"
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        if (event.key === 'Enter' && !event.shiftKey) {
+          event.preventDefault();
+          onSend?.();
+        }
+      }}
+      ref={textAreaRef}
+      spellCheck={false}
+      {...props}
+    />
+  );
+};
+
+ChatInputBase.displayName = 'ChatInput';
+export const ChatInput = React.memo(ChatInputBase);