@hanzo/ui 4.7.0 → 4.8.3

package/primitives/icons/youtube-logo.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { LucideProps } from 'lucide-react'
+
+const YouTubeLogo = (props) => (
+  <svg 
+    viewBox="0 0 256 256" 
+    xmlns="http://www.w3.org/2000/svg" 
+    {...props}
+  >
+    <g 
+      style={{
+        stroke: 'none',
+        strokeWidth: 0,
+        strokeDasharray: 'none',
+        strokeLinecap: 'butt',
+        strokeLinejoin: 'miter',
+        strokeMiterlimit: 10,
+        fill: 'none',
+        fillRule: 'nonzero',
+        opacity: 1
+      }}
+      transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" 
+    >
+      <path 
+        d="M 88.119 23.338 c -1.035 -3.872 -4.085 -6.922 -7.957 -7.957 C 73.144 13.5 45 13.5 45 13.5 s -28.144 0 -35.162 1.881 c -3.872 1.035 -6.922 4.085 -7.957 7.957 C 0 30.356 0 45 0 45 s 0 14.644 1.881 21.662 c 1.035 3.872 4.085 6.922 7.957 7.957 C 16.856 76.5 45 76.5 45 76.5 s 28.144 0 35.162 -1.881 c 3.872 -1.035 6.922 -4.085 7.957 -7.957 C 90 59.644 90 45 90 45 S 90 30.356 88.119 23.338 z" 
+        style={{
+          stroke: 'none',
+          strokeWidth: 1,
+          strokeDasharray: 'none',
+          strokeLinecap: 'butt',
+          strokeLinejoin: 'miter',
+          strokeMiterlimit: 10,
+          fill: 'red',
+          fillRule: 'nonzero',
+          opacity: 1
+        }}
+        transform=" matrix(1 0 0 1 0 0) " 
+        strokeLinecap="round" 
+      />
+      <polygon 
+        points="36,58.5 59.38,45 36,31.5 " 
+        style={{
+          stroke: 'none',
+          strokeWidth: 1,
+          strokeDasharray: 'none',
+          strokeLinecap: 'butt',
+          strokeLinejoin: 'miter',
+          strokeMiterlimit: 10,
+          fill: 'white',
+          fillRule: 'nonzero',
+          opacity: 1
+        }}
+        transform="matrix(1 0 0 1 0 0)"
+      />
+    </g>
+  </svg>
+)
+
+export default YouTubeLogo

package/primitives/index-common.ts

@@ -0,0 +1,304 @@
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent
+} from './accordion'
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from './alert-dialog'
+
+export {
+  Alert,
+  AlertTitle,
+  AlertDescription
+} from './alert'
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback
+} from './avatar'
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from './breadcrumb'
+
+export {
+  default as Button,
+  buttonVariants,
+} from './button'
+export type { ButtonProps } from './button'
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent
+} from './card'
+
+export {
+  type CarouselApi,
+  type CarouselOptions,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from './carousel'
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from './command'
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from './collapsible'
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+} from './context-menu'
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHandle,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from './drawer'
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './dialog'
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './dropdown-menu'
+
+export { ErrorMessage } from './error-message'
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+} from './form'
+
+export {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from './hover-card'
+
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from './input-otp'
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+} from './navigation-menu'
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from './popover'
+
+export {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from './resizable'
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  // SelectScrollUpButton, // Does not exist in select.tsx
+  // SelectScrollDownButton, // Does not exist in select.tsx
+} from './select'
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from './sheet'
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from './table'
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent
+} from './tabs'
+
+export * from './tooltip'
+
+export { default as ActionButton } from './action-button'
+export { default as ApplyTypography, type TypographySize} from './apply-typography'
+export { default as AspectRatio } from './aspect-ratio'
+export { default as Badge } from './badge'
+export { default as BreakpointIndicator } from './breakpoint-indicator'
+export { default as Calendar } from './calendar'
+export { default as Checkbox } from './checkbox'
+export { default as Combobox, type ComboboxTriggerProps } from './combobox'
+export { default as DialogVideoController } from './dialog-video-controller'
+export { default as Input } from './input'
+export { default as Label } from './label'
+export type { default as ListAdaptor } from './list-adaptor'
+export { default as ListBox } from './list-box'
+export { default as LoadingSpinner } from './loading-spinner'
+export { default as Progress } from './progress'
+export { RadioGroup, RadioGroupItem } from './radio-group'
+export { ScrollArea, ScrollBar } from './scroll-area'
+export { SearchInput } from './search-input'
+export { default as Separator } from './separator'
+export { default as Slider } from './slider'
+export { default as Skeleton } from './skeleton'
+export { default as StepIndicator } from './step-indicator'
+export { default as Switch } from './switch'
+export { Textarea } from './textarea'
+export { default as TextField } from './textfield'
+export { Toaster, toast } from './sonner'
+export { Toggle, toggleVariants } from './toggle'
+export { ToggleGroup, ToggleGroupItem } from './toggle-group'
+export { default as VideoPlayer } from './video-player'
+
+// Chat components
+export { ChatInput } from './chat/chat-input'
+export { ChatInputArea } from './chat/chat-input-area'
+// export { FileList } from './chat/files-preview' // Uses Tauri APIs not available in web
+
+// Additional components
+export { CopyToClipboardIcon } from './copy-to-clipboard-icon'
+export { DotsLoader } from './dots-loader'
+export { FileUploader } from './file-uploader'
+export { default as JsonForm } from './chat/json-form'
+export { MarkdownText, MarkdownPreview } from './markdown-preview'
+export { PrettyJsonPrint } from './pretty-json-print'
+
+// Re-export Tooltip components individually
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipArrow,
+  TooltipPortal,
+} from './tooltip'
+
+// Export icons
+export * as Icons from './icons'
+
+// Re-export assets for compatibility
+export * from '../assets'

package/primitives/index-next.ts

@@ -0,0 +1,4 @@
+// Re-export everything from common primitives and Next.js specific components
+// Note: Using comment to avoid Turbopack issues with relative imports in symlinked packages
+export * from './index-common'
+export * from './next/index'

package/primitives/input-otp.tsx

@@ -0,0 +1,65 @@
+'use client'
+import React from 'react';
+
+import { OTPInput, type SlotProps } from 'input-otp'
+import { Dot } from 'lucide-react'
+
+import { cn } from '../util'
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn('flex items-center gap-2', className)}
+    {...props}
+  />
+))
+InputOTP.displayName = 'InputOTP'
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+))
+InputOTPGroup.displayName = 'InputOTPGroup'
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<'div'>,
+  SlotProps & React.ComponentPropsWithoutRef<'div'>
+>(({ char, hasFakeCaret, isActive, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-muted-3 text-sm ',
+        'transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'z-above-content ring-2 ring-muted', // TODO: couldn't find: 'ring-offset-background' 
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
+          <div className='animate-caret-blink h-4 w-px bg-foreground duration-1000' />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = 'InputOTPSlot'
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ ...props }, ref) => (
+  <div ref={ref} role='separator' {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = 'InputOTPSeparator'
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/primitives/input.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+import React from 'react';
+import { useEffect, useImperativeHandle, useRef } from 'react';
+
+import { RefCallBack } from 'react-hook-form';
+import { cn } from '../src/utils';
+import { Badge } from './badge';
+import { Button } from './button';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  startAdornment?: React.ReactNode;
+  endAdornment?: React.ReactNode;
+  hidePasswordToggle?: boolean;
+  ref?: React.RefObject<HTMLInputElement | null> | RefCallBack;
+}
+
+const Input = ({
+  className,
+  type,
+  startAdornment,
+  endAdornment,
+  hidePasswordToggle,
+  ref,
+  ...props
+}: InputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const startAdornmentRef = useRef<HTMLDivElement>(null);
+  const endAdornmentRef = useRef<HTMLDivElement>(null);
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const style: React.CSSProperties = {};
+  if (startAdornment) {
+    style.paddingLeft = `${
+      (startAdornmentRef?.current?.offsetWidth ?? 0) + 20
+    }px`;
+  }
+  if (endAdornment) {
+    style.paddingRight = `${
+      (endAdornmentRef?.current?.offsetWidth ?? 0) + 20
+    }px`;
+  }
+
+  useImperativeHandle(ref, () => inputRef.current!, []);
+
+  useEffect(() => {
+    if (props.autoFocus) {
+      setTimeout(() => {
+        // trick to wait the modal to be opened to focus
+        inputRef?.current?.focus();
+      }, 0);
+    }
+  }, [props.autoFocus]);
+
+  const inputType = type === 'password' && showPassword ? 'text' : type;
+
+  return (
+    <>
+      <input
+        className={cn(
+          'h-input border-border-input bg-bg-secondary focus:border-border-input-focus disabled:bg-bg-input-disabled peer placeholder-shown:border-border-input text-text-default w-full rounded-lg border px-4 py-3 pt-8 text-sm font-medium placeholder-transparent outline outline-0 transition-all placeholder-shown:border focus:border focus:outline-0 disabled:border-0 disabled:text-gray-400',
+          startAdornment && 'pl-[var(--custom-padding-left-input)]',
+          endAdornment && 'pr-[var(--custom-padding-right-input)]',
+          type === 'password' && 'pr-[60px]',
+          className,
+        )}
+        placeholder=" "
+        ref={inputRef}
+        spellCheck={false}
+        style={style}
+        type={inputType}
+        {...props}
+      />
+      {startAdornment ? (
+        <Badge
+          className="peer/adornment adornment absolute top-[30px] left-4"
+          ref={startAdornmentRef}
+          variant="inputAdornment"
+        >
+          {startAdornment}
+        </Badge>
+      ) : null}
+      {endAdornment && typeof endAdornment === 'string' ? (
+        <Badge
+          className="peer/adornment adornment absolute top-[30px] right-4"
+          ref={endAdornmentRef}
+          variant="inputAdornment"
+        >
+          {endAdornment}
+        </Badge>
+      ) : null}
+      {endAdornment &&
+      typeof endAdornment !== 'string' &&
+      React.isValidElement(endAdornment)
+        ? React.cloneElement(endAdornment, {
+            ref: endAdornmentRef,
+          } as React.ComponentProps<typeof Badge>)
+        : null}
+      {type === 'password' && !hidePasswordToggle && (
+        <Button
+          aria-label={showPassword ? 'Hide password' : 'Show password'}
+          className="absolute top-3 right-3"
+          onClick={togglePasswordVisibility}
+          size={'icon'}
+          type="button"
+          variant="tertiary"
+        >
+          {showPassword ? (
+            <EyeOffIcon aria-hidden="true" className="h-4 w-4" />
+          ) : (
+            <EyeIcon aria-hidden="true" className="h-4 w-4" />
+          )}
+        </Button>
+      )}
+    </>
+  );
+};
+
+Input.displayName = 'Input';
+
+export { Input };
+export default Input;

package/primitives/label.tsx

@@ -0,0 +1,21 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const labelVariants = cva(
+  'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+);
+
+const Label = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants>) => (
+  <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />
+);
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
+export default Label;

package/primitives/list-adaptor.ts

@@ -0,0 +1,12 @@
+interface ListAdaptor<T> {
+  getValue:   (el: T) => string
+  equals:     (el1: T, el2: T) => boolean
+  valueEquals: (el: T, v: string) => boolean
+  getLabel?:  (el: T) => string 
+  getImageUrl?:  (el: T) => string | null
+  isDisabled?: (el: T) => boolean
+}
+
+export {
+  type ListAdaptor as default
+}

package/primitives/list-box.tsx

@@ -0,0 +1,74 @@
+'use client'
+import React from 'react'
+import { cn } from '../util'
+
+function Item<T>({
+  value,
+  label,
+  className,
+  onClick,
+  first=false,
+  last=false,
+  selected=false
+}:{
+  value: T
+  label: string
+  className: string
+  onClick: (val: T) => void
+  first?: boolean
+  last?: boolean
+  selected?: boolean
+}) {
+
+  return (
+    <div 
+      className={cn(
+        'font-normal text-muted-1 px-3 py-1 cursor-pointer hover:text-foreground ', 
+        last ? '' : 'border-b', 
+        selected ? 'font-semibold text-accent hover:text-accent' : '', 
+        className
+      )} 
+      onClick={() => {onClick(value)}}
+    >
+      <span>{label}</span>
+    </div>
+  )
+}
+
+function ListBox<T>({
+  values,
+  labels,
+  onValueChange,
+  value,
+  isEqual,
+  clx = '',
+  itemClx = '' 
+}:{
+  values: T[]
+  labels: string[]
+  onValueChange: (val: T) => void
+  value: T | undefined
+  isEqual: (v1: T, v2: T) => boolean
+  clx?: string
+  itemClx?: string 
+}): JSX.Element {
+
+  return (
+    <div className={cn('border rounded-md select-none', clx)} >
+    {values.map((val, i) => (
+      <Item<T> 
+        value={val} 
+        label={labels[i]} 
+        onClick={onValueChange} 
+        className={itemClx}
+        first={i === 0}
+        last={i === values.length - 1}
+        selected={value && isEqual(val, value)}
+        key={labels[i]}
+      />
+    ))}
+    </div>
+  )
+}
+
+export default ListBox

package/primitives/loading-spinner.tsx

@@ -0,0 +1,33 @@
+import { cn } from '../util'
+
+// cf: https://github.com/hanzo-ui/ui/discussions/1694#discussioncomment-7851248
+const LoadingSpinner: React.FC<
+  {
+    size?: number
+    className?: string
+  }
+  & React.SVGProps<SVGSVGElement>
+> = ({
+  size = 24,
+  className='',
+  ...props
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      {...props}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("animate-spin", className)}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  )
+}
+
+export default LoadingSpinner