Aurora Field

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5import { Label } from "./label"
6 
7export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
8  label?: React.ReactNode
9  description?: React.ReactNode
10  error?: React.ReactNode
11  required?: boolean
12  disabled?: boolean
13  htmlFor?: string
14  orientation?: "vertical" | "horizontal"
15}
16 
17function FieldGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
18  return <div className={cn("flex flex-col gap-4", className)} {...props} />
19}
20 
21function FieldSet({ className, ...props }: React.FieldsetHTMLAttributes<HTMLFieldSetElement>) {
22  return <fieldset className={cn("grid gap-3", className)} {...props} />
23}
24 
25function FieldLegend({ className, ...props }: React.HTMLAttributes<HTMLLegendElement>) {
26  return (
27    <legend
28      data-slot="field-legend"
29      className={cn("aurora-text-label mb-1 text-[var(--aurora-text-primary)]", className)}
30      {...props}
31    />
32  )
33}
34 
35function FieldContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
36  return <div data-slot="field-content" className={cn("grid gap-1.5", className)} {...props} />
37}
38 
39function FieldTitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
40  return (
41    <span
42      data-slot="field-title"
43      className={cn("aurora-text-control text-[var(--aurora-text-primary)]", className)}
44      {...props}
45    />
46  )
47}
48 
49function FieldDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
50  return (
51    <p
52      data-slot="field-description"
53      className={cn("aurora-text-body-sm text-[var(--aurora-text-muted)]", className)}
54      {...props}
55    />
56  )
57}
58 
59function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
60  return (
61    <Label
62      data-slot="field-label"
63      className={cn("w-full justify-between text-[var(--aurora-text-primary)]", className)}
64      {...props}
65    />
66  )
67}
68 
69function FieldError({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
70  return (
71    <p
72      role="alert"
73      data-slot="field-error"
74      className={cn("aurora-text-body-sm font-[var(--aurora-weight-ui)] text-[var(--aurora-error)]", className)}
75      {...props}
76    />
77  )
78}
79 
80function Field({
81  ref,
82  className,
83  children,
84  label,
85  description,
86  error,
87  required,
88  disabled,
89  htmlFor,
90  orientation = "vertical",
91  ...props
92}: FieldProps & { ref?: React.Ref<HTMLDivElement> }) {
93// … truncated