Form

1"use client"
2import * as React from "react"
3import * as LabelPrimitive from "@radix-ui/react-label"
4import { Slot } from "@radix-ui/react-slot"
5import { Loader2, CheckCircle2, XCircle, X } from "lucide-react"
6import {
7    useFormContext,
8    Controller,
9    FormProvider,
10    type ControllerProps,
11    type FieldPath,
12    type FieldValues
13} from "react-hook-form"
14import { cn } from "@/lib/utils"
15import { useFyskConfig } from "@/components/fysk-provider"
16
17
18// Types
19
20type FormState = "idle" | "loading" | "success" | "error"
21
22interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
23    state?: FormState
24    error?: React.ReactNode // For manual/server-side error messages
25    afterSubmission?: React.ReactNode
26    onCloseAfterSubmission?: () => void
27    LoadingIcon?: React.ReactNode
28    SuccessIcon?: React.ReactNode
29    ErrorIcon?: React.ReactNode
30    CloseIcon?: React.ReactNode
31}
32
33// Context Types
34
35type FormFieldContextValue<
36    TFieldValues extends FieldValues = FieldValues,
37    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
38> = {
39    name: TName
40}
41
42type FormItemContextValue = {
43    id: string
44}
45
46// Contexts
47
48const FormFieldContext = React.createContext<FormFieldContextValue>(
49    {} as FormFieldContextValue
50)
51
52const FormItemContext = React.createContext<FormItemContextValue>({ id: "" })
53
54// useFormField Hook
55
56/**
57 * Hook to access the current form field's state and metadata.
58 * Must be used within a `FormField` and `FormItem` component.
59 *
60 * @returns An object containing:
61 * - `id` - The unique ID for the form item
62 * - `name` - The field name registered with react-hook-form
63 * - `formItemId` - ID for the form item element
64 * - `formDescriptionId` - ID for the description element (for aria-describedby)
65 * - `formMessageId` - ID for the error message element
66 * - `error` - The current field error (if any)
67 * - `invalid` - Whether the field has a validation error
68 * - `isDirty` - Whether the field value has been modified
69 * - `isTouched` - Whether the field has been touched/focused
70 *
71 * @example
72 * ```tsx
73 * const CustomInput = () => {
74 *   const { error, formItemId } = useFormField()
75 *   return (
76 *     <input
77 *       id={formItemId}
78 *       className={error ? "border-red-500" : ""}
79 *     />
80 *   )
81 * }
82 * ```
83 */
84const useFormField = () => {
85    const fieldContext = React.useContext(FormFieldContext)
86// … truncated