Field

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
6  return (
7    <fieldset
8      data-slot="field-set"
9      className={cn("grid min-w-0 gap-6", className)}
10      {...props}
11    />
12  );
13}
14 
15function FieldLegend({
16  className,
17  variant = "legend",
18  ...props
19}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
20  return (
21    <legend
22      data-slot="field-legend"
23      data-variant={variant}
24      className={cn(
25        "mb-1 font-semibold tracking-[-0.025em] data-[variant=legend]:text-lg data-[variant=label]:text-sm",
26        className,
27      )}
28      {...props}
29    />
30  );
31}
32 
33function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
34  return (
35    <div
36      data-slot="field-group"
37      className={cn("grid w-full gap-5", className)}
38      {...props}
39    />
40  );
41}
42 
43function Field({
44  className,
45  orientation = "vertical",
46  ...props
47}: React.ComponentProps<"div"> & {
48  orientation?: "vertical" | "horizontal" | "responsive";
49}) {
50  return (
51    <div
52      data-slot="field"
53      data-orientation={orientation}
54      className={cn(
55        "group/field grid min-w-0 gap-2 data-[orientation=horizontal]:grid-cols-[minmax(0,.72fr)_minmax(0,1fr)] data-[orientation=horizontal]:items-start data-[orientation=responsive]:grid-cols-1 data-[orientation=responsive]:sm:grid-cols-[minmax(0,.72fr)_minmax(0,1fr)] data-[orientation=responsive]:sm:items-start",
56        className,
57      )}
58      {...props}
59    />
60  );
61}
62 
63function FieldLabel({ className, ...props }: React.ComponentProps<"label">) {
64  return (
65    <label
66      data-slot="field-label"
67      className={cn(
68        "flex w-fit items-center gap-2 text-sm font-semibold tracking-[-0.012em] group-has-[:disabled]/field:opacity-45",
69        className,
70      )}
71      {...props}
72    />
73  );
74}
75 
76function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
77  return (
78    <div
79      data-slot="field-content"
80      className={cn("grid min-w-0 gap-2", className)}
81      {...props}
82    />
83  );
84}
85 
86function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
87  return (
88    <div
89      data-slot="field-title"
90      className={cn("text-sm font-semibold tracking-[-0.012em]", className)}
91      {...props}
92    />
93  );
94}
95 
96function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
97  return (
98    <p
99      data-slot="field-description"
100      className={cn(
101// … truncated