field

1import * as React from "react"
2import { Slot } from "@radix-ui/react-slot"
3 
4import { cn } from "@/lib/utils"
5import "./field.css"
6 
7/* ------------------------------------------------------------------ */
8/*  Context                                                            */
9/* ------------------------------------------------------------------ */
10 
11interface FieldContextValue {
12  id: string
13  error: boolean
14  disabled: boolean
15  required: boolean
16}
17 
18const FieldContext = React.createContext<FieldContextValue | null>(null)
19 
20function useFieldContext() {
21  const context = React.useContext(FieldContext)
22  if (context === null && process.env.NODE_ENV !== "production") {
23    console.warn(
24      "Field compound components (FieldLabel, FieldControl, FieldDescription, FieldError) must be rendered inside a <Field>. Falling back to safe defaults."
25    )
26  }
27  return (
28    context ?? { id: "", error: false, disabled: false, required: false }
29  )
30}
31 
32/* ------------------------------------------------------------------ */
33/*  Field                                                              */
34/* ------------------------------------------------------------------ */
35 
36function Field({
37  className,
38  id: idProp,
39  error = false,
40  disabled = false,
41  required = false,
42  children,
43  ...props
44}: React.ComponentProps<"div"> & {
45  error?: boolean
46  disabled?: boolean
47  required?: boolean
48}) {
49  const generatedId = React.useId()
50  const id = idProp ?? generatedId
51 
52  const contextValue = React.useMemo(
53    () => ({ id, error, disabled, required }),
54    [id, error, disabled, required]
55  )
56 
57  return (
58    <FieldContext value={contextValue}>
59      <div
60        data-slot="field"
61        className={cn(
62          "flex flex-col gap-[var(--layout-gap-md)] w-full",
63          className
64        )}
65        {...props}
66      >
67        {children}
68      </div>
69    </FieldContext>
70  )
71}
72 
73/* ------------------------------------------------------------------ */
74/*  FieldLabel                                                         */
75/* ------------------------------------------------------------------ */
76 
77function FieldLabel({
78  className,
79  htmlFor: htmlForProp,
80  children,
81  ...props
82}: React.ComponentProps<"label">) {
83  const { id, required, disabled } = useFieldContext()
84 
85  return (
86    <label
87      data-slot="field-label"
88      htmlFor={htmlForProp ?? (id || undefined)}
89      data-disabled={disabled || undefined}
90      className={cn(
91// … truncated