Field

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