@hanzo/ui 4.5.3 → 4.6.0

package/primitives/form.tsx

@@ -1,8 +1,6 @@
-'use client'
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
-
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
 import {
   Controller,
   type ControllerProps,
@@ -10,27 +8,27 @@ import {
   type FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form"
+} from 'react-hook-form';
 
-import { cn } from "../util"
-import Label from "./label"
+import { cn } from '../src/utils';
+import { Label } from './label';
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+  {} as FormFieldContextValue,
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -38,21 +36,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error('useFormField should be used within <FormField>');
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -61,110 +59,117 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+  {} as FormItemContextValue,
+);
 
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
+const FormItem = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div className={cn('relative', className)} {...props} />
     </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+  );
+};
+FormItem.displayName = 'FormItem';
 
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+const FormLabel = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) => {
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
+      className={cn(
+        'text-text-secondary pointer-events-none absolute top-3 left-4 flex text-xs leading-tight font-medium transition-all select-none',
+        // input
+        'peer-placeholder-shown:text-text-tertiary z-[1] peer-placeholder-shown:text-base peer-placeholder-shown:leading-[2.3]',
+        'peer-focus:text-text-secondary peer-disabled:peer-placeholder-shown:text-text-tertiary peer-disabled:text-text-tertiary peer-focus:text-xs peer-focus:leading-tight',
+        // select
+        'peer-data-[placeholder]/select:top-5 peer-data-[placeholder]/select:text-base',
+        // adornment
+        'peer-[.adornment]/adornment:text-xs',
+        error && 'text-red-500',
+        className,
+      )}
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+};
+FormLabel.displayName = 'FormLabel';
 
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+const FormControl = ({ ...props }: React.ComponentProps<typeof Slot>) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
-      ref={ref}
-      id={formItemId}
       aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
+        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
       }
       aria-invalid={!!error}
+      id={formItemId}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+};
+FormControl.displayName = 'FormControl';
 
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+const FormDescription = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) => {
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
-      ref={ref}
+      className={cn('text-text-secondary py-1 text-[0.75rem]', className)}
       id={formDescriptionId}
-      className={cn("text-sm text-muted-1", className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+};
+FormDescription.displayName = 'FormDescription';
 
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+const FormMessage = ({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
 
-  const classes = 'text-xs font-medium py-1 ' + 
-                  (error ? 'text-destructive' : 'text-muted-1') + 
-                  (body ? '' : ' invisible') // Hold space in the layout
+  if (!body) {
+    return null;
+  }
 
   return (
     <p
-      ref={ref}
+      className={cn(
+        'text-red text-[0.75rem] font-medium dark:text-red-900',
+        className,
+      )}
       id={formMessageId}
-      className={cn(classes, className)}
       {...props}
     >
-      {body ? body : 'dummy'}
+      {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+};
+FormMessage.displayName = 'FormMessage';
 
 export {
   useFormField,
@@ -175,4 +180,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};

package/primitives/hover-card.tsx

@@ -0,0 +1,28 @@
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from 'react';
+
+import { cn } from '../src/utils';
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = ({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) => (
+  <HoverCardPrimitive.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-[1500000000] flex flex-col gap-3 rounded-md border pt-1 shadow-none outline-hidden data-[side=top]:flex-col-reverse',
+      className,
+    )}
+    sideOffset={sideOffset}
+    {...props}
+  />
+);
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/primitives/icons/github.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { type LucideProps } from 'lucide-react'
+import type { LucideProps } from 'lucide-react'
 
 
 const GitHub: React.FC<LucideProps> = (props: LucideProps) => (

package/primitives/icons/youtube-logo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { type LucideProps } from 'lucide-react'
+import { LucideProps } from 'lucide-react'
 
 const YouTubeLogo: React.FC<LucideProps> = (props: LucideProps) => (
   <svg 

package/primitives/index-common.ts

@@ -1,14 +1,32 @@
-export { 
-  Accordion, 
-  AccordionItem, 
-  AccordionTrigger, 
-  AccordionContent 
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent
 } from './accordion'
 
-export { 
-  Avatar, 
-  AvatarImage, 
-  AvatarFallback 
+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 {
@@ -27,13 +45,13 @@ export {
   buttonVariants,
 } from './button'
 
-export { 
-  Card, 
-  CardHeader, 
-  CardFooter, 
-  CardTitle, 
-  CardDescription, 
-  CardContent 
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent
 } from './card'
 
 export {
@@ -58,6 +76,11 @@ export {
   CommandSeparator,
 } from './command'
 
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from './collapsible'
 
 export {
   ContextMenu,
@@ -77,7 +100,6 @@ export {
   ContextMenuRadioGroup,
 } from './context-menu'
 
-
 export {
   type DrawerProps,
   Drawer,
@@ -106,6 +128,24 @@ export {
   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,
@@ -117,7 +157,13 @@ export {
   FormField,
 } from './form'
 
-export { 
+export {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from './hover-card'
+
+export {
   InputOTP,
   InputOTPGroup,
   InputOTPSeparator,
@@ -136,15 +182,21 @@ export {
   NavigationMenuViewport,
 } from './navigation-menu'
 
-export { 
-  Popover, 
-  PopoverAnchor, 
-  PopoverArrow, 
-  PopoverClose, 
-  PopoverContent, 
-  PopoverTrigger, 
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
 } from './popover'
 
+export {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from './resizable'
+
 export {
   Select,
   SelectGroup,
@@ -182,43 +234,70 @@ export {
   TableCaption,
 } from './table'
 
-export { 
-  Tabs, 
-  TabsList, 
-  TabsTrigger, 
-  TabsContent 
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent
 } from './tabs'
 
-export * from './tooltip' 
+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 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 { default as Progress } from './progress'
 export { RadioGroup, RadioGroupItem } from './radio-group'
-export { ScrollArea, ScrollBar } from './scroll-area' 
-export { default as Separator } from './separator' 
-export { default as Slider } from './slider' 
-export { default as Skeleton } from './skeleton' 
+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 './text-area' 
+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'
 
-export * as Icons from './icons'
+// 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,2 +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'
+export * from './next/index'