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