Field

1import { useMemo } from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/registry/lib/surface"
5import { Label } from "@/registry/ui/label"
6import { Separator } from "@/registry/ui/separator"
7 
8function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
9  return (
10    <fieldset
11      data-slot="field-set"
12      className={cn(
13        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
14        className
15      )}
16      {...props}
17    />
18  )
19}
20 
21function FieldLegend({
22  className,
23  variant = "legend",
24  ...props
25}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
26  return (
27    <legend
28      data-slot="field-legend"
29      data-variant={variant}
30      className={cn(
31        "mb-1.5 font-mono font-normal tracking-wide text-foreground data-[variant=label]:text-xs data-[variant=label]:lowercase data-[variant=legend]:text-sm data-[variant=legend]:tracking-tight",
32        className
33      )}
34      {...props}
35    />
36  )
37}
38 
39function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
40  return (
41    <div
42      data-slot="field-group"
43      className={cn(
44        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
45        className
46      )}
47      {...props}
48    />
49  )
50}
51 
52const fieldVariants = cva(
53  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
54  {
55    variants: {
56      orientation: {
57        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
58        horizontal:
59          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
60        responsive:
61          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
62      },
63    },
64    defaultVariants: {
65      orientation: "vertical",
66    },
67  }
68)
69 
70function Field({
71  className,
72  orientation = "vertical",
73  ...props
74}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
75  return (
76    <div
77      role="group"
78      data-slot="field"
79      data-orientation={orientation}
80// … truncated