field

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { Label } from "@/components/ui/label";
7 
8const Field = React.forwardRef<
9  HTMLDivElement,
10  React.HTMLAttributes<HTMLDivElement>
11>(({ className, ...props }, ref) => (
12  <div
13    ref={ref}
14    className={cn("space-y-2", className)}
15    {...props}
16  />
17));
18Field.displayName = "Field";
19 
20const FieldLabel = React.forwardRef<
21  HTMLLabelElement,
22  React.ComponentProps<typeof Label>
23>(({ className, ...props }, ref) => (
24  <Label
25    ref={ref}
26    className={cn("", className)}
27    {...props}
28  />
29));
30FieldLabel.displayName = "FieldLabel";
31 
32const FieldError = React.forwardRef<
33  HTMLParagraphElement,
34  React.HTMLAttributes<HTMLParagraphElement>
35>(({ className, ...props }, ref) => (
36  <p
37    ref={ref}
38    className={cn("text-sm text-destructive", className)}
39    {...props}
40  />
41));
42FieldError.displayName = "FieldError";
43 
44const FieldDescription = React.forwardRef<
45  HTMLParagraphElement,
46  React.HTMLAttributes<HTMLParagraphElement>
47>(({ className, ...props }, ref) => (
48  <p
49    ref={ref}
50    className={cn("text-sm text-muted-foreground", className)}
51    {...props}
52  />
53));
54FieldDescription.displayName = "FieldDescription";
55 
56export { Field, FieldLabel, FieldError, FieldDescription };