Field

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