Field

1import { cn } from "@/lib/utils";
2import { type VariantProps, cva } from "class-variance-authority";
3import type * as React from "react";
4 
5// FieldSet - Container that renders a semantic fieldset
6function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
7  return (
8    <fieldset
9      data-slot="fieldset"
10      className={cn("flex flex-col gap-2", className)}
11      {...props}
12    />
13  );
14}
15 
16// FieldLegend - Legend element for a FieldSet
17const fieldLegendVariants = cva("", {
18  variants: {
19    variant: {
20      legend: "text-lg font-semibold",
21      label: "text-md font-medium",
22    },
23  },
24  defaultVariants: {
25    variant: "legend",
26  },
27});
28 
29function FieldLegend({
30  className,
31  variant = "legend",
32  ...props
33}: React.ComponentProps<"legend"> & VariantProps<typeof fieldLegendVariants>) {
34  return (
35    <legend
36      data-slot="field-legend"
37      className={cn(fieldLegendVariants({ variant }), className)}
38      {...props}
39    />
40  );
41}
42 
43// FieldGroup - Layout wrapper that stacks Field components
44function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
45  return (
46    <div
47      data-slot="field-group"
48      className={cn("flex flex-col gap-3 mt-5", className)}
49      {...props}
50    />
51  );
52}
53 
54// Field - Core wrapper for a single field
55const fieldVariants = cva("flex gap-2", {
56  variants: {
57    orientation: {
58      vertical: "flex-col gap-2.5",
59      horizontal: "flex-row items-center gap-4",
60      responsive:
61        "flex-col gap-2.5 @container/field-group:flex-row @container/field-group:items-center @container/field-group:gap-4",
62    },
63  },
64  defaultVariants: {
65    orientation: "vertical",
66  },
67});
68 
69function Field({
70  className,
71  orientation = "vertical",
72  "data-invalid": dataInvalid,
73  ...props
74}: React.ComponentProps<"div"> &
75  VariantProps<typeof fieldVariants> & {
76    "data-invalid"?: boolean;
77  }) {
78  return (
79    <div
80      data-slot="field"
81      role="group"
82      data-invalid={dataInvalid}
83      className={cn(
84        fieldVariants({ orientation }),
85        dataInvalid &&
86          "data-[invalid=true]:[&_input]:border-destructive data-[invalid=true]:[&_select]:border-destructive data-[invalid=true]:[&_textarea]:border-destructive",
87        className,
88      )}
89      {...props}
90    />
91  );
92}
93 
94// FieldContent - Flex column that groups label and description
95function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
96  return (
97    <div
98      data-slot="field-content"
99// … truncated