Field

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