Field

1"use client";
2 
3import { useMemo } from "react";
4import { cva } from "class-variance-authority";
5 
6import { cn } from "@/lib/utils";
7import { Label } from "@/registry/optics/label";
8import { Separator } from "@/registry/optics/separator";
9 
10function FieldSet({ className = "", ...props }) {
11	return (
12		<fieldset
13			data-slot="field-set"
14			className={cn(
15				"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
16				className,
17			)}
18			{...props}
19		/>
20	);
21}
22 
23function FieldLegend({ className = "", variant = "legend", ...props }) {
24	return (
25		<legend
26			data-slot="field-legend"
27			data-variant={variant}
28			className={cn(
29				"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm",
30				className,
31			)}
32			{...props}
33		/>
34	);
35}
36 
37function FieldGroup({ className = "", ...props }) {
38	return (
39		<div
40			data-slot="field-group"
41			className={cn(
42				"gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col",
43				className,
44			)}
45			{...props}
46		/>
47	);
48}
49 
50const fieldVariants = cva(
51	"data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
52	{
53		variants: {
54			orientation: {
55				vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
56				horizontal:
57					"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
58				responsive:
59					"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
60			},
61		},
62		defaultVariants: {
63			orientation: "vertical",
64		},
65	},
66);
67 
68function Field({ className = "", orientation = "vertical", ...props }) {
69	return (
70		<div
71			role="group"
72			data-slot="field"
73			data-orientation={orientation}
74			className={cn(fieldVariants({ orientation }), className)}
75			{...props}
76		/>
77	);
78}
79 
80function FieldContent({ className = "", ...props }) {
81	return (
82		<div
83			data-slot="field-content"
84			className={cn(
85				"gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
86				className,
87			)}
88			{...props}
89		/>
90	);
91}
92 
93function FieldLabel({ className = "", ...props }) {
94	return (
95		<Label
96// … truncated