@hanzo/ui 4.6.0 → 4.7.0

package/primitives/icons/youtube-logo.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { LucideProps } from 'lucide-react'
-
-const YouTubeLogo: React.FC<LucideProps> = (props: LucideProps) => (
-  <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

@@ -1,303 +0,0 @@
-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,
-  type ButtonProps,
-  buttonVariants,
-} 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 {
-  type DrawerProps,
-  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 {
-  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,
-  SelectScrollDownButton,
-} 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 { default as 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'
-
-// 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

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

@@ -1,65 +0,0 @@
-'use client'
-import * as 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

@@ -1,125 +0,0 @@
-import { EyeIcon, EyeOffIcon } from 'lucide-react';
-import * as 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 };

package/primitives/label.tsx

@@ -1,20 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as 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 };

package/primitives/list-adaptor.ts

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

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

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