Field

1"use client";
2 
3import { forwardRef } from "react";
4import { cn } from "@/lib/utils";
5import { Label } from "@/components/ui/label";
6 
7export function FieldGroup({
8  className,
9  ...props
10}: React.ComponentProps<"div">) {
11  return (
12    <div
13      data-slot="field-group"
14      className={cn("flex flex-col gap-6", className)}
15      {...props}
16    />
17  );
18}
19 
20export function Field({ className, ...props }: React.ComponentProps<"div">) {
21  return (
22    <div
23      data-slot="field"
24      className={cn("flex flex-col gap-2", className)}
25      {...props}
26    />
27  );
28}
29 
30export const FieldLabel = forwardRef<
31  React.ElementRef<typeof Label>,
32  React.ComponentPropsWithoutRef<typeof Label>
33>(({ className, ...props }, ref) => (
34  <Label
35    ref={ref}
36    data-slot="field-label"
37    className={cn(className)}
38    {...props}
39  />
40));
41FieldLabel.displayName = "FieldLabel";
42 
43export function FieldDescription({
44  className,
45  ...props
46}: React.ComponentProps<"p">) {
47  return (
48    <p
49      data-slot="field-description"
50      className={cn("text-sm text-current/65 leading-relaxed", className)}
51      {...props}
52    />
53  );
54}
55 
56export function FieldError({ className, ...props }: React.ComponentProps<"p">) {
57  return (
58    <p
59      data-slot="field-error"
60      role="alert"
61      className={cn("text-sm font-medium text-[#FF3B30]", className)}
62      {...props}
63    />
64  );
65}