form

1'use client';
2 
3import { Field as FieldPrimitive } from '@base-ui/react/field';
4import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';
5import { Form as FormPrimitive } from '@base-ui/react/form';
6 
7import { cn } from '@/registry/lib/utils';
8 
9function Field({ className, ...props }: FieldPrimitive.Root.Props) {
10  return (
11    <FieldPrimitive.Root
12      data-slot="field"
13      className={cn('flex flex-col gap-1.5', className)}
14      {...props}
15    />
16  );
17}
18 
19function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {
20  return (
21    <FieldPrimitive.Label
22      data-slot="field-label"
23      className={cn(
24        'text-sm font-medium text-primary data-invalid:text-(--destructive-secondary)',
25        className
26      )}
27      {...props}
28    />
29  );
30}
31 
32function FieldControl({ className, ...props }: FieldPrimitive.Control.Props) {
33  return <FieldPrimitive.Control data-slot="field-control" className={cn(className)} {...props} />;
34}
35 
36function FieldDescription({ className, ...props }: FieldPrimitive.Description.Props) {
37  return (
38    <FieldPrimitive.Description
39      data-slot="field-description"
40      className={cn('text-xs text-muted', className)}
41      {...props}
42    />
43  );
44}
45 
46function FieldValidity(props: FieldPrimitive.Validity.Props) {
47  return <FieldPrimitive.Validity data-slot="field-validity" {...props} />;
48}
49 
50function FieldError({ className, ...props }: FieldPrimitive.Error.Props) {
51  return (
52    <FieldPrimitive.Error
53      data-slot="field-error"
54      className={cn('text-xs text-(--destructive-secondary)', className)}
55      {...props}
56    />
57  );
58}
59 
60function Form({ className, ...props }: FormPrimitive.Props) {
61  return <FormPrimitive data-slot="form" className={cn(className)} {...props} />;
62}
63 
64function Fieldset({ className, ...props }: FieldsetPrimitive.Root.Props) {
65  return (
66    <FieldsetPrimitive.Root
67      data-slot="fieldset"
68      className={cn('flex flex-col gap-4 border-0 p-0 m-0', className)}
69      {...props}
70    />
71  );
72}
73 
74function FieldsetLegend({ className, ...props }: FieldsetPrimitive.Legend.Props) {
75  return (
76    <FieldsetPrimitive.Legend
77      data-slot="fieldset-legend"
78      className={cn('text-sm font-medium text-primary', className)}
79      {...props}
80    />
81  );
82}
83 
84export {
85  Form,
86  Field,
87  FieldLabel,
88  FieldControl,
89  FieldDescription,
90  FieldValidity,
91  FieldError,
92  Fieldset,
93  FieldsetLegend,
94};