Glass Form

1'use client'
2 
3import * as React from 'react'
4import {
5  Controller,
6  FormProvider,
7  useFormContext,
8  type ControllerProps,
9  type FieldPath,
10  type FieldValues,
11} from 'react-hook-form'
12import { Slot } from 'radix-ui'
13 
14import { cn } from '@/lib/utils'
15import { GlassLabel } from './glass-label'
16 
17const GlassForm = FormProvider
18 
19type GlassFormFieldContextValue<
20  TFieldValues extends FieldValues = FieldValues,
21  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
22> = {
23  name: TName
24}
25 
26const GlassFormFieldContext = React.createContext<GlassFormFieldContextValue>({} as GlassFormFieldContextValue)
27 
28function GlassFormField<
29  TFieldValues extends FieldValues = FieldValues,
30  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
31>({ ...props }: ControllerProps<TFieldValues, TName>) {
32  return (
33    <GlassFormFieldContext.Provider value={{ name: props.name }}>
34      <Controller {...props} />
35    </GlassFormFieldContext.Provider>
36  )
37}
38 
39function useGlassFormField() {
40  const fieldContext = React.useContext(GlassFormFieldContext)
41  const itemContext = React.useContext(GlassFormItemContext)
42  const { getFieldState, formState } = useFormContext()
43 
44  if (!fieldContext.name) {
45    throw new Error('useGlassFormField should be used within <GlassFormField>')
46  }
47 
48  const fieldState = getFieldState(fieldContext.name, formState)
49 
50  const { id } = itemContext
51 
52  return {
53    id,
54    name: fieldContext.name,
55    formItemId: `${id}-form-item`,
56    formDescriptionId: `${id}-form-item-description`,
57    formMessageId: `${id}-form-item-message`,
58    ...fieldState,
59  }
60}
61 
62type GlassFormItemContextValue = {
63  id: string
64}
65 
66const GlassFormItemContext = React.createContext<GlassFormItemContextValue>({} as GlassFormItemContextValue)
67 
68const GlassFormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
69  ({ className, ...props }, ref) => {
70    const id = React.useId()
71 
72    return (
73      <GlassFormItemContext.Provider value={{ id }}>
74        <div ref={ref} className={cn('grid gap-1.5', className)} {...props} />
75      </GlassFormItemContext.Provider>
76    )
77  },
78)
79GlassFormItem.displayName = 'GlassFormItem'
80 
81const GlassFormLabel = React.forwardRef<
82  React.ComponentRef<typeof GlassLabel>,
83  React.ComponentPropsWithoutRef<typeof GlassLabel>
84>(({ className, ...props }, ref) => {
85  const { error, formItemId } = useGlassFormField()
86 
87// … truncated