Field

1'use client'
2 
3import { Field as FieldPrimitive } from '@base-ui/react/field'
4import { cva, type VariantProps } from 'class-variance-authority'
5import * as React from 'react'
6 
7import { Label } from '@/components/label'
8import { Separator } from '@/components/separator'
9import { cn } from '@/lib/utils'
10 
11// ─────────────────────────────────────────────────────────────────────────────
12// Base UI Field
13// ─────────────────────────────────────────────────────────────────────────────
14//
15// `Field`, `FieldLabel`, `FieldDescription`, and `FieldError` wrap Base UI's
16// Field primitive (@base-ui/react/field). Base UI owns the accessible wiring:
17// the label is associated with the control, and any description/error ids are
18// added to the control's `aria-describedby` automatically — no manual
19// `htmlFor` / `aria-describedby` / `aria-invalid` plumbing required. Set
20// `invalid` on `Field` (e.g. from react-hook-form) and the control receives
21// `aria-invalid` and the wrapper gets `data-invalid` for free.
22//
23// Base UI's Field parts must live inside a `Field.Root`. To keep the previous
24// behaviour where a label/description/error could also be used standalone
25// (e.g. a group-level FieldDescription directly inside a FieldSet), FieldLabel/
26// FieldDescription/FieldError opt into the Base UI part only when they detect a
27// surrounding `Field` (via `InsideFieldContext`) and otherwise render the plain
28// element they did before. Inside a Field they gain the automatic association;
29// outside one they are unchanged.
30//
31// `FieldSet` / `FieldLegend` stay native `<fieldset>` / `<legend>` (already
32// accessible for grouping); `FieldGroup` / `FieldContent` / `FieldSeparator` /
33// `FieldTitle` remain layout-only primitives.
34//
35// ─────────────────────────────────────────────────────────────────────────────
36// Typography hierarchy (deliberate, do not collapse to a single size)
37// … truncated