| 1 | "use client" |
| 2 | |
| 3 | import { useMemo } from "react" |
| 4 | import { cva, type |
| 5 | |
| 6 | import { cn } |
| 7 | import { Label } |
| 8 | import { Separator } |
| 9 | |
| 10 | function FieldSet({ className |
| 11 | return ( |
| 12 | <fieldset |
| 13 | data-slot="field-set" |
| 14 | className={cn( |
| 15 | "flex flex-col gap-6", |
| 16 | "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", |
| 17 | className |
| 18 | )} |
| 19 | {...props} |
| 20 | /> |
| 21 | ) |
| 22 | } |
| 23 | |
| 24 | function FieldLegend({ |
| 25 | className, |
| 26 | variant = "legend" |
| 27 | ...props |
| 28 | }: React. |
| 29 | return ( |
| 30 | <legend |
| 31 | data-slot="field-legend" |
| 32 | data-variant={variant} |
| 33 | className={cn( |
| 34 | "mb-3 font-medium", |
| 35 | "data-[variant=legend]:text-base", |
| 36 | "data-[variant=label]:text-sm", |
| 37 | className |
| 38 | )} |
| 39 | {...props} |
| 40 | /> |
| 41 | ) |
| 42 | } |
| 43 | |
| 44 | function FieldGroup({ className |
| 45 | return ( |
| 46 | <div |
| 47 | data-slot="field-group" |
| 48 | className={cn( |
| 49 | "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", |
| 50 | className |
| 51 | )} |
| 52 | {...props} |
| 53 | /> |
| 54 | ) |
| 55 | } |
| 56 | |
| 57 | const fieldVariants = cva |
| 58 | "group/field flex w-full gap-3 data-[invalid=true]:text-destructive", |
| 59 | { |
| 60 | variants: { |
| 61 | orientation: { |
| 62 | vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"], |
| 63 | horizontal: [ |
| 64 | "flex-row items-center", |
| 65 | "[&>[data-slot=field-label]]:flex-auto", |
| 66 | "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", |
| 67 | ], |
| 68 | responsive: [ |
| 69 | "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto", |
| 70 | "@md/field-group:[&>[data-slot=field-label]]:flex-auto", |
| 71 | "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", |
| 72 | ], |
| 73 | }, |
| 74 | }, |
| 75 | defaultVariants: { |
| 76 | orientation: "vertical", |
| 77 | }, |
| 78 | } |
| 79 | ) |
| 80 | |
| 81 | function Field({ |
| 82 | className, |
| 83 | orientation = "vertical" |
| 84 | ...props |
| 85 | }: React. |
| 86 | return ( |
| 87 | <div |
| 88 | role="group" |
| 89 | data-slot="field" |
| 90 | data-orientation={orientation} |
| 91 | className={cn(fieldVariants |
| 92 | {...props} |
| 93 | /> |
| 94 | ) |
| 95 | } |
| 96 | |
| 97 | function FieldContent({ className |
| 98 | return ( |
| 99 | <div |
| 100 | data-slot="field-content" |
| 101 | className={cn( |
| 102 | "group/field-content flex flex-1 flex-col gap-1.5 leading-snug", |
| 103 | className |
| 104 | )} |
| 105 | {...props} |
| 106 | /> |
| 107 | ) |
| 108 | } |
| 109 | |
| 110 | function FieldLabel({ |
| 111 | className, |
| 112 | ...props |
| 113 | }: React. |
| 114 | return ( |
| 115 | <Label |
| 116 | data-slot="field-label" |
| 117 | className={cn( |
| 118 | "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", |
| 119 | "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", |
| 120 | "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10", |
| 121 | className |
| 122 | )} |
| 123 | {...props} |
| 124 | /> |
| 125 | ) |
| 126 | } |
| 127 | |
| 128 | function FieldTitle({ className |
| 129 | return ( |
| 130 | <div |
| 131 | data-slot="field-label" |
| 132 | className={cn( |
| 133 | "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", |
| 134 | className |
| 135 | )} |
| 136 | {...props} |
| 137 | /> |
| 138 | ) |
| 139 | } |
| 140 | |
| 141 | function FieldDescription({ className |
| 142 | return ( |
| 143 | <p |
| 144 | data-slot="field-description" |
| 145 | className={cn( |
| 146 | "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance", |
| 147 | "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", |
| 148 | "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", |
| 149 | className |
| 150 | )} |
| 151 | {...props} |
| 152 | /> |
| 153 | ) |
| 154 | } |
| 155 | |
| 156 | function FieldSeparator({ |
| 157 | children, |
| 158 | className, |
| 159 | ...props |
| 160 | }: React. |
| 161 | children?: React |
| 162 | }) { |
| 163 | return ( |
| 164 | <div |
| 165 | data-slot="field-separator" |
| 166 | data-content={!!children} |
| 167 | className={cn( |
| 168 | "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", |
| 169 | className |
| 170 | )} |
| 171 | {...props} |
| 172 | > |
| 173 | <Separator className=" |
| 174 | {children && ( |
| 175 | <span |
| 176 | className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground" |
| 177 | data-slot="field-separator-content" |
| 178 | > |
| 179 | {children} |
| 180 | </span> |
| 181 | )} |
| 182 | </div> |
| 183 | ) |
| 184 | } |
| 185 | |
| 186 | function FieldError({ |
| 187 | className, |
| 188 | children, |
| 189 | errors, |
| 190 | ...props |
| 191 | }: React. |
| 192 | errors?: Array |
| 193 | }) { |
| 194 | const content = |
| 195 | if (children) { |
| 196 | return children |
| 197 | } |
| 198 | |
| 199 | if (!errors?.length |
| 200 | return null |
| 201 | } |
| 202 | |
| 203 | const uniqueErrors = |
| 204 | ...new Map |
| 205 | ] |
| 206 | |
| 207 | if (uniqueErrors?.length |
| 208 | return uniqueErrors[0] |
| 209 | } |
| 210 | |
| 211 | return ( |
| 212 | <ul className="ml-4 flex list-disc flex-col gap-1 |
| 213 | {uniqueErrors.map( |
| 214 | (error, index) |
| 215 | error?.message && |
| 216 | )} |
| 217 | </ul> |
| 218 | ) |
| 219 | }, [children, |
| 220 | |
| 221 | if (!content) |
| 222 | return null |
| 223 | } |
| 224 | |
| 225 | return ( |
| 226 | <div |
| 227 | role="alert" |
| 228 | data-slot="field-error" |
| 229 | className={cn(" |
| 230 | {...props} |
| 231 | > |
| 232 | {content} |
| 233 | </div> |
| 234 | ) |
| 235 | } |
| 236 | |
| 237 | export { |
| 238 | Field, |
| 239 | FieldLabel, |
| 240 | FieldDescription, |
| 241 | FieldError, |
| 242 | FieldGroup, |
| 243 | FieldLegend, |
| 244 | FieldSeparator, |
| 245 | FieldSet, |
| 246 | FieldContent, |
| 247 | FieldTitle, |
| 248 | } |