import { cva, type VariantProps } from "class-variance-authority"; import type * as React from "react"; import { cn } from "@/lib/registry/cn"; // FieldSet - Container that renders a semantic fieldset function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) { return (

); } // FieldLegend - Legend element for a FieldSet const fieldLegendVariants = cva("", { variants: { variant: { legend: "text-lg font-semibold", label: "text-base font-medium", }, }, defaultVariants: { variant: "legend", }, }); function FieldLegend({ className, variant = "legend", ...props }: React.ComponentProps<"legend"> & VariantProps) { return ( ); } // FieldGroup - Layout wrapper that stacks Field components function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { return (

); } // Field - Core wrapper for a single field const fieldVariants = cva("flex gap-2", { variants: { orientation: { vertical: "flex-col gap-2.5", horizontal: "flex-row items-start gap-4", responsive: "flex-col gap-2.5 @md/field-group:flex-row @md/field-group:items-start @md/field-group:gap-4", }, }, defaultVariants: { orientation: "vertical", }, }); function Field({ className, orientation = "vertical", "data-invalid": dataInvalid, ...props }: React.ComponentProps<"div"> & VariantProps & { "data-invalid"?: boolean; }) { return ( // biome-ignore lint/a11y/useSemanticElements: flexible field-grouping primitive;

imposes form-field semantics and UA styling the variant system does not expect.

); } // FieldContent - Flex column that groups label and description function FieldContent({ className, ...props }: React.ComponentProps<"div">) { return (

); } // FieldLabel - Label styled for form fields. Consumers must pass // `htmlFor` (or wrap a control inside) to associate the label with its // input. The primitive itself can't statically guarantee that — it's a // generic wrapper. function FieldLabel({ className, ...props }: React.ComponentProps<"label">) { return ( // biome-ignore lint/a11y/noLabelWithoutControl: htmlFor / nested control is the consumer's responsibility (see JSDoc above) ); } // FieldTitle - Renders a title with label styling inside FieldContent function FieldTitle({ className, ...props }: React.ComponentProps<"div">) { return (

); } // FieldDescription - Helper text slot function FieldDescription({ className, ...props }: React.ComponentProps<"div">) { return (

); } // FieldSeparator - Visual divider to separate sections function FieldSeparator({ className, children, ...props }: React.ComponentProps<"div">) { if (children) { return (

{children}

); } return (

); } // FieldError - Accessible error container function FieldError({ className, errors, children, ...props }: React.ComponentProps<"div"> & { errors?: Array<{ message?: string } | undefined>; }) { const errorMessages = errors?.filter(Boolean) || []; const errorText = errorMessages.map( (error) => error?.message ?? "Unknown error", ); if (errorMessages.length === 0 && !children) { return null; } return (

{children || (errorMessages.length === 1 ? ( {errorMessages[0]?.message} ) : (

{message}

))}

); } export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, };

Field

Showcase

Field