Additional Field

1"use client"
2 
3import {
4  type AdditionalField as AdditionalFieldConfig,
5  resolveInputType
6} from "@better-auth-ui/core"
7import { useAuth } from "@better-auth-ui/react"
8import { format } from "date-fns"
9import { CalendarIcon, Check, ChevronDownIcon, Copy } from "lucide-react"
10import { type ComponentType, useRef, useState } from "react"
11import { toast } from "sonner"
12 
13import { buttonVariants } from "@/components/ui/button"
14import { Calendar } from "@/components/ui/calendar"
15import { Checkbox } from "@/components/ui/checkbox"
16import {
17  Combobox,
18  ComboboxContent,
19  ComboboxEmpty,
20  ComboboxInput,
21  ComboboxItem,
22  ComboboxList
23} from "@/components/ui/combobox"
24import {
25  Field,
26  FieldContent,
27  FieldError,
28  FieldLabel
29} from "@/components/ui/field"
30import { Input } from "@/components/ui/input"
31import {
32  InputGroup,
33  InputGroupAddon,
34  InputGroupButton,
35  InputGroupInput
36} from "@/components/ui/input-group"
37import {
38  Popover,
39  PopoverContent,
40  PopoverTrigger
41} from "@/components/ui/popover"
42import {
43  Select,
44  SelectContent,
45  SelectItem,
46  SelectTrigger,
47  SelectValue
48} from "@/components/ui/select"
49import { Slider } from "@/components/ui/slider"
50import { Switch } from "@/components/ui/switch"
51import { Textarea } from "@/components/ui/textarea"
52import { cn } from "@/lib/utils"
53 
54export type AdditionalFieldProps = {
55  name: string
56  field: AdditionalFieldConfig
57  isPending?: boolean
58  /** Complete suffix appended to labels for fields that are not required. */
59  optionalLabel?: string
60}
61 
62/** Convert a `defaultValue` into a `Date` for the calendar. */
63function toDate(value: unknown): Date | undefined {
64  if (value instanceof Date) return value
65  if (typeof value === "string") {
66    const parsed = new Date(value)
67    return Number.isNaN(parsed.getTime()) ? undefined : parsed
68  }
69  return undefined
70}
71 
72/** Format a Date as `HH:mm:ss` for an `<input type="time">`. */
73function formatTime(date: Date) {
74  const pad = (n: number) => n.toString().padStart(2, "0")
75  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
76}
77 
78/**
79 * Icon-only copy button used as an `InputGroupAddon`. `getValue` is invoked
80 * lazily on click so the button copies the input's *live* value rather than a
81 * stale snapshot — important when paired with editable inputs.
82 */
83function CopyButton({
84  getValue,
85  isDisabled
86}: {
87  getValue: () => string | undefined
88  isDisabled?: boolean
89}) {
90  const { localization } = useAuth()
91// … truncated