v5.0.12 (#2814)

* refactor to @base-ui/react

* fix all

* fixes to accordion

* more updates

* switch to chat/completions api from openai

* update version to v5.0.12

src/routes/auth/forgot-password.tsx

@@ -64,11 +64,16 @@ function RouteComponent() {
 				<div className="text-muted-foreground">
 					<Trans>
 						Remember your password?{" "}
-						<Button asChild variant="link" className="h-auto gap-1.5 px-1! py-0">
-							<Link to="/auth/login">
-								Sign in now <ArrowRightIcon />
-							</Link>
-						</Button>
+						<Button
+							variant="link"
+							className="h-auto gap-1.5 px-1! py-0"
+							nativeButton={false}
+							render={
+								<Link to="/auth/login">
+									Sign in now <ArrowRightIcon />
+								</Link>
+							}
+						/>
 					</Trans>
 				</div>
 			</div>
@@ -83,9 +88,9 @@ function RouteComponent() {
 								<FormLabel>
 									<Trans>Email Address</Trans>
 								</FormLabel>
-								<FormControl>
-									<Input type="email" autoComplete="email" placeholder="john.doe@example.com" {...field} />
-								</FormControl>
+								<FormControl
+									render={<Input type="email" autoComplete="email" placeholder="john.doe@example.com" {...field} />}
+								/>
 								<FormMessage />
 							</FormItem>
 						)}
@@ -112,11 +117,14 @@ function PostForgotPasswordScreen() {
 				</p>
 			</div>
 
-			<Button asChild>
-				<a href="mailto:">
-					<Trans>Open Email Client</Trans>
-				</a>
-			</Button>
+			<Button
+				nativeButton={false}
+				render={
+					<a href="mailto:">
+						<Trans>Open Email Client</Trans>
+					</a>
+				}
+			/>
 		</>
 	);
 }

src/routes/auth/login.tsx

@@ -90,11 +90,16 @@ function RouteComponent() {
 					<div className="text-muted-foreground">
 						<Trans>
 							Don't have an account?{" "}
-							<Button asChild variant="link" className="h-auto gap-1.5 px-1! py-0">
-								<Link to="/auth/register">
-									Create one now <ArrowRightIcon />
-								</Link>
-							</Button>
+							<Button
+								variant="link"
+								nativeButton={false}
+								className="h-auto gap-1.5 px-1! py-0"
+								render={
+									<Link to="/auth/register">
+										Create one now <ArrowRightIcon />
+									</Link>
+								}
+							/>
 						</Trans>
 					</div>
 				)}
@@ -111,14 +116,16 @@ function RouteComponent() {
 									<FormLabel>
 										<Trans>Email Address</Trans>
 									</FormLabel>
-									<FormControl>
-										<Input
-											autoComplete="section-login username"
-											placeholder="john.doe@example.com"
-											className="lowercase"
-											{...field}
-										/>
-									</FormControl>
+									<FormControl
+										render={
+											<Input
+												autoComplete="section-login username"
+												placeholder="john.doe@example.com"
+												className="lowercase"
+												{...field}
+											/>
+										}
+									/>
 									<FormMessage />
 									<FormDescription>
 										<Trans>You can also use your username to login.</Trans>
@@ -137,22 +144,30 @@ function RouteComponent() {
 											<Trans>Password</Trans>
 										</FormLabel>
 
-										<Button asChild tabIndex={-1} variant="link" className="h-auto p-0 text-xs leading-none">
-											<Link to="/auth/forgot-password">
-												<Trans>Forgot Password?</Trans>
-											</Link>
-										</Button>
+										<Button
+											tabIndex={-1}
+											variant="link"
+											nativeButton={false}
+											className="h-auto p-0 text-xs leading-none"
+											render={
+												<Link to="/auth/forgot-password">
+													<Trans>Forgot Password?</Trans>
+												</Link>
+											}
+										/>
 									</div>
 									<div className="flex items-center gap-x-1.5">
-										<FormControl>
-											<Input
-												min={6}
-												max={64}
-												type={showPassword ? "text" : "password"}
-												autoComplete="section-login current-password"
-												{...field}
-											/>
-										</FormControl>
+										<FormControl
+											render={
+												<Input
+													min={6}
+													max={64}
+													type={showPassword ? "text" : "password"}
+													autoComplete="section-login current-password"
+													{...field}
+												/>
+											}
+										/>
 
 										<Button size="icon" variant="ghost" onClick={toggleShowPassword}>
 											{showPassword ? <EyeIcon /> : <EyeSlashIcon />}

src/routes/auth/register.tsx

@@ -89,11 +89,16 @@ function RouteComponent() {
 				<div className="text-muted-foreground">
 					<Trans>
 						Already have an account?{" "}
-						<Button asChild variant="link" className="h-auto gap-1.5 px-1! py-0">
-							<Link to="/auth/login">
-								Sign in now <ArrowRightIcon />
-							</Link>
-						</Button>
+						<Button
+							variant="link"
+							nativeButton={false}
+							className="h-auto gap-1.5 px-1! py-0"
+							render={
+								<Link to="/auth/login">
+									Sign in now <ArrowRightIcon />
+								</Link>
+							}
+						/>
 					</Trans>
 				</div>
 			</div>
@@ -109,9 +114,11 @@ function RouteComponent() {
 									<FormLabel>
 										<Trans>Name</Trans>
 									</FormLabel>
-									<FormControl>
-										<Input min={3} max={64} autoComplete="section-register name" placeholder="John Doe" {...field} />
-									</FormControl>
+									<FormControl
+										render={
+											<Input min={3} max={64} autoComplete="section-register name" placeholder="John Doe" {...field} />
+										}
+									/>
 									<FormMessage />
 								</FormItem>
 							)}
@@ -125,16 +132,18 @@ function RouteComponent() {
 									<FormLabel>
 										<Trans>Username</Trans>
 									</FormLabel>
-									<FormControl>
-										<Input
-											min={3}
-											max={64}
-											autoComplete="section-register username"
-											placeholder="john.doe"
-											className="lowercase"
-											{...field}
-										/>
-									</FormControl>
+									<FormControl
+										render={
+											<Input
+												min={3}
+												max={64}
+												autoComplete="section-register username"
+												placeholder="john.doe"
+												className="lowercase"
+												{...field}
+											/>
+										}
+									/>
 									<FormMessage />
 								</FormItem>
 							)}
@@ -148,15 +157,17 @@ function RouteComponent() {
 									<FormLabel>
 										<Trans>Email Address</Trans>
 									</FormLabel>
-									<FormControl>
-										<Input
-											type="email"
-											autoComplete="section-register email"
-											placeholder="john.doe@example.com"
-											className="lowercase"
-											{...field}
-										/>
-									</FormControl>
+									<FormControl
+										render={
+											<Input
+												type="email"
+												autoComplete="section-register email"
+												placeholder="john.doe@example.com"
+												className="lowercase"
+												{...field}
+											/>
+										}
+									/>
 									<FormMessage />
 								</FormItem>
 							)}
@@ -171,15 +182,17 @@ function RouteComponent() {
 										<Trans>Password</Trans>
 									</FormLabel>
 									<div className="flex items-center gap-x-1.5">
-										<FormControl>
-											<Input
-												min={6}
-												max={64}
-												type={showPassword ? "text" : "password"}
-												autoComplete="section-register new-password"
-												{...field}
-											/>
-										</FormControl>
+										<FormControl
+											render={
+												<Input
+													min={6}
+													max={64}
+													type={showPassword ? "text" : "password"}
+													autoComplete="section-register new-password"
+													{...field}
+												/>
+											}
+										/>
 
 										<Button size="icon" variant="ghost" onClick={toggleShowPassword}>
 											{showPassword ? <EyeIcon /> : <EyeSlashIcon />}
@@ -223,11 +236,14 @@ function PostSignupScreen() {
 				</AlertDescription>
 			</Alert>
 
-			<Button asChild>
-				<Link to="/dashboard">
-					<Trans>Continue</Trans> <ArrowRightIcon />
-				</Link>
-			</Button>
+			<Button
+				nativeButton={false}
+				render={
+					<Link to="/dashboard">
+						<Trans>Continue</Trans> <ArrowRightIcon />
+					</Link>
+				}
+			/>
 		</>
 	);
 }

src/routes/auth/reset-password.tsx

@@ -85,15 +85,17 @@ function RouteComponent() {
 									<Trans>New Password</Trans>
 								</FormLabel>
 								<div className="flex items-center gap-x-1.5">
-									<FormControl>
-										<Input
-											min={6}
-											max={64}
-											type={showPassword ? "text" : "password"}
-											autoComplete="new-password"
-											{...field}
-										/>
-									</FormControl>
+									<FormControl
+										render={
+											<Input
+												min={6}
+												max={64}
+												type={showPassword ? "text" : "password"}
+												autoComplete="new-password"
+												{...field}
+											/>
+										}
+									/>
 
 									<Button size="icon" variant="ghost" onClick={toggleShowPassword}>
 										{showPassword ? <EyeIcon /> : <EyeSlashIcon />}

src/routes/auth/resume-password.tsx

@@ -104,15 +104,17 @@ function RouteComponent() {
 									<Trans>Password</Trans>
 								</FormLabel>
 								<div className="flex items-center gap-x-1.5">
-									<FormControl>
-										<Input
-											min={6}
-											max={64}
-											type={showPassword ? "text" : "password"}
-											autoComplete="new-password"
-											{...field}
-										/>
-									</FormControl>
+									<FormControl
+										render={
+											<Input
+												min={6}
+												max={64}
+												type={showPassword ? "text" : "password"}
+												autoComplete="new-password"
+												{...field}
+											/>
+										}
+									/>
 
 									<Button size="icon" variant="ghost" onClick={toggleShowPassword}>
 										{showPassword ? <EyeIcon /> : <EyeSlashIcon />}

src/routes/auth/verify-2fa-backup.tsx

@@ -70,44 +70,52 @@ function RouteComponent() {
 						name="code"
 						render={({ field }) => (
 							<FormItem className="justify-self-center">
-								<FormControl>
-									<InputOTP
-										maxLength={10}
-										value={field.value}
-										pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
-										onChange={field.onChange}
-										onComplete={form.handleSubmit(onSubmit)}
-										pasteTransformer={(pasted) => pasted.replaceAll("-", "")}
-									>
-										<InputOTPGroup>
-											<InputOTPSlot index={0} className="size-12" />
-											<InputOTPSlot index={1} className="size-12" />
-											<InputOTPSlot index={2} className="size-12" />
-											<InputOTPSlot index={3} className="size-12" />
-											<InputOTPSlot index={4} className="size-12" />
-										</InputOTPGroup>
-										<InputOTPSeparator />
-										<InputOTPGroup>
-											<InputOTPSlot index={5} className="size-12" />
-											<InputOTPSlot index={6} className="size-12" />
-											<InputOTPSlot index={7} className="size-12" />
-											<InputOTPSlot index={8} className="size-12" />
-											<InputOTPSlot index={9} className="size-12" />
-										</InputOTPGroup>
-									</InputOTP>
-								</FormControl>
+								<FormControl
+									render={
+										<InputOTP
+											maxLength={10}
+											value={field.value}
+											pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+											onChange={field.onChange}
+											onComplete={form.handleSubmit(onSubmit)}
+											pasteTransformer={(pasted) => pasted.replaceAll("-", "")}
+										>
+											<InputOTPGroup>
+												<InputOTPSlot index={0} className="size-12" />
+												<InputOTPSlot index={1} className="size-12" />
+												<InputOTPSlot index={2} className="size-12" />
+												<InputOTPSlot index={3} className="size-12" />
+												<InputOTPSlot index={4} className="size-12" />
+											</InputOTPGroup>
+											<InputOTPSeparator />
+											<InputOTPGroup>
+												<InputOTPSlot index={5} className="size-12" />
+												<InputOTPSlot index={6} className="size-12" />
+												<InputOTPSlot index={7} className="size-12" />
+												<InputOTPSlot index={8} className="size-12" />
+												<InputOTPSlot index={9} className="size-12" />
+											</InputOTPGroup>
+										</InputOTP>
+									}
+								/>
 								<FormMessage />
 							</FormItem>
 						)}
 					/>
 
 					<div className="flex gap-x-2">
-						<Button type="button" variant="outline" className="flex-1" asChild>
-							<Link to="/auth/verify-2fa">
-								<ArrowLeftIcon />
-								<Trans>Go Back</Trans>
-							</Link>
-						</Button>
+						<Button
+							variant="outline"
+							className="flex-1"
+							nativeButton={false}
+							render={
+								<Link to="/auth/verify-2fa">
+									<ArrowLeftIcon />
+									<Trans>Go Back</Trans>
+								</Link>
+							}
+						/>
+
 						<Button type="submit" className="flex-1">
 							<CheckIcon />
 							<Trans>Verify</Trans>

src/routes/auth/verify-2fa.tsx

@@ -71,40 +71,47 @@ function RouteComponent() {
 						name="code"
 						render={({ field }) => (
 							<FormItem className="justify-self-center">
-								<FormControl>
-									<InputOTP
-										maxLength={6}
-										value={field.value}
-										pattern={REGEXP_ONLY_DIGITS}
-										onChange={field.onChange}
-										onComplete={form.handleSubmit(onSubmit)}
-										pasteTransformer={(pasted) => pasted.replaceAll("-", "")}
-									>
-										<InputOTPGroup>
-											<InputOTPSlot index={0} className="size-12" />
-											<InputOTPSlot index={1} className="size-12" />
-											<InputOTPSlot index={2} className="size-12" />
-										</InputOTPGroup>
-										<InputOTPSeparator />
-										<InputOTPGroup>
-											<InputOTPSlot index={3} className="size-12" />
-											<InputOTPSlot index={4} className="size-12" />
-											<InputOTPSlot index={5} className="size-12" />
-										</InputOTPGroup>
-									</InputOTP>
-								</FormControl>
+								<FormControl
+									render={
+										<InputOTP
+											maxLength={6}
+											value={field.value}
+											pattern={REGEXP_ONLY_DIGITS}
+											onChange={field.onChange}
+											onComplete={form.handleSubmit(onSubmit)}
+											pasteTransformer={(pasted) => pasted.replaceAll("-", "")}
+										>
+											<InputOTPGroup>
+												<InputOTPSlot index={0} className="size-12" />
+												<InputOTPSlot index={1} className="size-12" />
+												<InputOTPSlot index={2} className="size-12" />
+											</InputOTPGroup>
+											<InputOTPSeparator />
+											<InputOTPGroup>
+												<InputOTPSlot index={3} className="size-12" />
+												<InputOTPSlot index={4} className="size-12" />
+												<InputOTPSlot index={5} className="size-12" />
+											</InputOTPGroup>
+										</InputOTP>
+									}
+								/>
 								<FormMessage />
 							</FormItem>
 						)}
 					/>
 
 					<div className="flex gap-x-2">
-						<Button type="button" variant="outline" className="flex-1" asChild>
-							<Link to="/auth/login">
-								<ArrowLeftIcon />
-								<Trans>Back to Login</Trans>
-							</Link>
-						</Button>
+						<Button
+							variant="outline"
+							className="flex-1"
+							nativeButton={false}
+							render={
+								<Link to="/auth/login">
+									<ArrowLeftIcon />
+									<Trans>Back to Login</Trans>
+								</Link>
+							}
+						/>
 
 						<Button type="submit" className="flex-1">
 							<CheckIcon />
@@ -112,11 +119,17 @@ function RouteComponent() {
 						</Button>
 					</div>
 				</form>
-				<Button type="button" variant="link" className="h-auto justify-self-center p-0 text-sm" asChild>
-					<Link to="/auth/verify-2fa-backup">
-						<Trans>Lost access to your authenticator?</Trans>
-					</Link>
-				</Button>
+
+				<Button
+					variant="link"
+					nativeButton={false}
+					className="h-auto justify-self-center p-0 text-sm"
+					render={
+						<Link to="/auth/verify-2fa-backup">
+							<Trans>Lost access to your authenticator?</Trans>
+						</Link>
+					}
+				/>
 			</Form>
 		</>
 	);