Field

1// Base UI base field — TRANSCRIBED from upstream's `bases/base-ui/ui/field.tsx` (maintainer-supplied),
2// class strings verbatim. Byte-for-byte the same component as the radix base apart from which
3// `Label` and `Separator` it imports.
4//
5// UPSTREAM DOES NOT USE THE `Field` PRIMITIVE HERE, even though @octanejs/base-ui ships one whose
6// parts line up exactly (Root/Control/Label/Description/Error/Validity/Item). That is worth stating
7// because the opposite is the natural guess, and it decides the class strings: `data-invalid` and
8// `data-disabled` on these elements are written by the CONSUMER, so `data-[invalid=true]:` and
9// `group-data-[disabled=true]/field:` are correct as written. Had this routed through `Field.Root`,
10// the primitive would emit BARE `data-invalid=""` (see fieldValidityMapping) and every one of those
11// variants would silently match nothing.
12//
13// It also means `FieldLabel` is safe standalone: it renders this base's plain `<label>`, not
14// `Field.Label`, which hard-requires a `<Field.Root>` ancestor and throws without one.
15//
16// Octane adaptations: "use client" dropped; Label/Separator come from this base's own ports;
17// FieldSeparator and FieldError compose their conditional children with createElement (a
18// `children && …` branch beside a sibling descriptor), everything else is template JSX.
19import { createElement, useMemo, type OctaneNode } from 'octane';
20import { cva, type VariantProps } from 'class-variance-authority';
21 
22import { cn } from '@/lib/utils';
23import { Label } from '@/components/ui/label';
24import { Separator } from '@/components/ui/separator';
25 
26type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
27 
28export function FieldSet({ className, ...props }: Props) @{
29	<fieldset
30		data-slot="field-set"
31		className={cn(
32			'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
33			className,
34		)}
35		{...props}
36	/>
37}
38 
39export function FieldLegend({ className, variant = 'legend', ...props }: Props & {
40	variant?: 'legend' | 'label';
41}) @{
42	<legend
43		data-slot="field-legend"
44		data-variant={variant}
45		className={cn(
46			'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
47			className,
48		)}
49		{...props}
50	/>
51}
52 
53export function FieldGroup({ className, ...props }: Props) @{
54	<div
55		data-slot="field-group"
56		className={cn(
57// … truncated