spb/vquant Public MIT

1/*2 * =============================================================================3 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 *  File:      client/src/components/ui/form.tsx6 *7 *  Author:    Simon-Pierre Boucher8 *  Contact:   contact@spboucher.ai9 *  Website:   https://www.spboucher.ai10 *  Demo:      https://www.vquant.ai11 *  License:   MIT (see LICENSE)12 *13 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617"use client"1819import * as React from "react"20import * as LabelPrimitive from "@radix-ui/react-label"21import { Slot } from "@radix-ui/react-slot"22import {23  Controller,24  FormProvider,25  useFormContext,26  type ControllerProps,27  type FieldPath,28  type FieldValues,29} from "react-hook-form"3031import { cn } from "@/lib/utils"32import { Label } from "@/components/ui/label"3334const Form = FormProvider3536type FormFieldContextValue<37  TFieldValues extends FieldValues = FieldValues,38  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>39> = {40  name: TName41}4243const FormFieldContext = React.createContext<FormFieldContextValue>(44  {} as FormFieldContextValue45)4647const FormField = <48  TFieldValues extends FieldValues = FieldValues,49  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>50>({51  ...props52}: ControllerProps<TFieldValues, TName>) => {53  return (54    <FormFieldContext.Provider value={{ name: props.name }}>55      <Controller {...props} />56    </FormFieldContext.Provider>57  )58}5960const useFormField = () => {61  const fieldContext = React.useContext(FormFieldContext)62  const itemContext = React.useContext(FormItemContext)63  const { getFieldState, formState } = useFormContext()6465  const fieldState = getFieldState(fieldContext.name, formState)6667  if (!fieldContext) {68    throw new Error("useFormField should be used within <FormField>")69  }7071  const { id } = itemContext7273  return {74    id,75    name: fieldContext.name,76    formItemId: `${id}-form-item`,77    formDescriptionId: `${id}-form-item-description`,78    formMessageId: `${id}-form-item-message`,79    ...fieldState,80  }81}8283type FormItemContextValue = {84  id: string85}8687const FormItemContext = React.createContext<FormItemContextValue>(88  {} as FormItemContextValue89)9091const FormItem = React.forwardRef<92  HTMLDivElement,93  React.HTMLAttributes<HTMLDivElement>94>(({ className, ...props }, ref) => {95  const id = React.useId()9697  return (98    <FormItemContext.Provider value={{ id }}>99      <div ref={ref} className={cn("space-y-2", className)} {...props} />100    </FormItemContext.Provider>101  )102})103FormItem.displayName = "FormItem"104105const FormLabel = React.forwardRef<106  React.ElementRef<typeof LabelPrimitive.Root>,107  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>108>(({ className, ...props }, ref) => {109  const { error, formItemId } = useFormField()110111  return (112    <Label113      ref={ref}114      className={cn(error && "text-destructive", className)}115      htmlFor={formItemId}116      {...props}117    />118  )119})120FormLabel.displayName = "FormLabel"121122const FormControl = React.forwardRef<123  React.ElementRef<typeof Slot>,124  React.ComponentPropsWithoutRef<typeof Slot>125>(({ ...props }, ref) => {126  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()127128  return (129    <Slot130      ref={ref}131      id={formItemId}132      aria-describedby={133        !error134          ? `${formDescriptionId}`135          : `${formDescriptionId} ${formMessageId}`136      }137      aria-invalid={!!error}138      {...props}139    />140  )141})142FormControl.displayName = "FormControl"143144const FormDescription = React.forwardRef<145  HTMLParagraphElement,146  React.HTMLAttributes<HTMLParagraphElement>147>(({ className, ...props }, ref) => {148  const { formDescriptionId } = useFormField()149150  return (151    <p152      ref={ref}153      id={formDescriptionId}154      className={cn("text-sm text-muted-foreground", className)}155      {...props}156    />157  )158})159FormDescription.displayName = "FormDescription"160161const FormMessage = React.forwardRef<162  HTMLParagraphElement,163  React.HTMLAttributes<HTMLParagraphElement>164>(({ className, children, ...props }, ref) => {165  const { error, formMessageId } = useFormField()166  const body = error ? String(error?.message ?? "") : children167168  if (!body) {169    return null170  }171172  return (173    <p174      ref={ref}175      id={formMessageId}176      className={cn("text-sm font-medium text-destructive", className)}177      {...props}178    >179      {body}180    </p>181  )182})183FormMessage.displayName = "FormMessage"184185export {186  useFormField,187  Form,188  FormItem,189  FormLabel,190  FormControl,191  FormDescription,192  FormMessage,193  FormField,194}195