field

1"use client"
2 
3import { useMemo } from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5 
6import { cn } from "@/registry/radix-sera/lib/utils"
7import { Label } from "@/registry/radix-sera/ui/label"
8import { Separator } from "@/registry/radix-sera/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 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}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
28  return (
29    <legend
30      data-slot="field-legend"
31      data-variant={variant}
32      className={cn(
33        "mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs",
34        className
35      )}
36      {...props}
37    />
38  )
39}
40 
41function FieldGroup({ className, ...props }: React.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-10 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-3 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-px",
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-px",
64      },
65    },
66    defaultVariants: {
67      orientation: "vertical",
68    },
69  }
70)
71 
72function Field({
73  className,
74  orientation = "vertical",
75  ...props
76}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
77  return (
78    <div
79      role="group"
80      data-slot="field"
81      data-orientation={orientation}
82// … truncated