@better-auth-ui/heroui 1.6.0

package/src/components/email/magic-link-email.tsx

@@ -0,0 +1,38 @@
+import {
+  MagicLinkEmail as MagicLinkEmailPrimitive,
+  type MagicLinkEmailProps
+} from "@better-auth-ui/react"
+import { cn } from "@heroui/react"
+
+export type { MagicLinkEmailProps } from "@better-auth-ui/react"
+
+export function MagicLinkEmail({
+  colors,
+  classNames,
+  ...props
+}: MagicLinkEmailProps) {
+  return (
+    <MagicLinkEmailPrimitive
+      colors={{
+        light: {
+          background: "#F5F5F5",
+          primary: "#0285F7",
+          primaryForeground: "#FCFCFC",
+          ...colors?.light
+        },
+        dark: {
+          background: "#060607",
+          primary: "#0584F6",
+          primaryForeground: "#FCFCFC",
+          ...colors?.dark
+        }
+      }}
+      classNames={{
+        ...classNames,
+        card: cn("border-none rounded-3xl", classNames?.card),
+        button: cn("rounded-full", classNames?.button)
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/email/new-device-email.tsx

@@ -0,0 +1,38 @@
+import {
+  NewDeviceEmail as NewDeviceEmailPrimitive,
+  type NewDeviceEmailProps
+} from "@better-auth-ui/react"
+import { cn } from "@heroui/react"
+
+export type { NewDeviceEmailProps } from "@better-auth-ui/react"
+
+export function NewDeviceEmail({
+  colors,
+  classNames,
+  ...props
+}: NewDeviceEmailProps) {
+  return (
+    <NewDeviceEmailPrimitive
+      colors={{
+        light: {
+          background: "#F5F5F5",
+          primary: "#0285F7",
+          primaryForeground: "#FCFCFC",
+          ...colors?.light
+        },
+        dark: {
+          background: "#060607",
+          primary: "#0584F6",
+          primaryForeground: "#FCFCFC",
+          ...colors?.dark
+        }
+      }}
+      classNames={{
+        ...classNames,
+        card: cn("border-none rounded-3xl", classNames?.card),
+        button: cn("rounded-full", classNames?.button)
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/email/otp-email.tsx

@@ -0,0 +1,33 @@
+import {
+  OtpEmail as OtpEmailPrimitive,
+  type OtpEmailProps
+} from "@better-auth-ui/react"
+import { cn } from "@heroui/react"
+
+export type { OtpEmailProps } from "@better-auth-ui/react"
+
+export function OtpEmail({ colors, classNames, ...props }: OtpEmailProps) {
+  return (
+    <OtpEmailPrimitive
+      colors={{
+        light: {
+          background: "#F5F5F5",
+          primary: "#0285F7",
+          primaryForeground: "#FCFCFC",
+          ...colors?.light
+        },
+        dark: {
+          background: "#060607",
+          primary: "#0584F6",
+          primaryForeground: "#FCFCFC",
+          ...colors?.dark
+        }
+      }}
+      classNames={{
+        ...classNames,
+        card: cn("border-none rounded-3xl", classNames?.card)
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/email/password-changed-email.tsx

@@ -0,0 +1,38 @@
+import {
+  PasswordChangedEmail as PasswordChangedEmailPrimitive,
+  type PasswordChangedEmailProps
+} from "@better-auth-ui/react"
+import { cn } from "@heroui/react"
+
+export type { PasswordChangedEmailProps } from "@better-auth-ui/react"
+
+export function PasswordChangedEmail({
+  colors,
+  classNames,
+  ...props
+}: PasswordChangedEmailProps) {
+  return (
+    <PasswordChangedEmailPrimitive
+      colors={{
+        light: {
+          background: "#F5F5F5",
+          primary: "#0285F7",
+          primaryForeground: "#FCFCFC",
+          ...colors?.light
+        },
+        dark: {
+          background: "#060607",
+          primary: "#0584F6",
+          primaryForeground: "#FCFCFC",
+          ...colors?.dark
+        }
+      }}
+      classNames={{
+        ...classNames,
+        card: cn("border-none rounded-3xl", classNames?.card),
+        button: cn("rounded-full", classNames?.button)
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/email/reset-password-email.tsx

@@ -0,0 +1,38 @@
+import {
+  ResetPasswordEmail as ResetPasswordEmailPrimitive,
+  type ResetPasswordEmailProps
+} from "@better-auth-ui/react"
+import { cn } from "@heroui/react"
+
+export type { ResetPasswordEmailProps } from "@better-auth-ui/react"
+
+export function ResetPasswordEmail({
+  colors,
+  classNames,
+  ...props
+}: ResetPasswordEmailProps) {
+  return (
+    <ResetPasswordEmailPrimitive
+      colors={{
+        light: {
+          background: "#F5F5F5",
+          primary: "#0285F7",
+          primaryForeground: "#FCFCFC",
+          ...colors?.light
+        },
+        dark: {
+          background: "#060607",
+          primary: "#0584F6",
+          primaryForeground: "#FCFCFC",
+          ...colors?.dark
+        }
+      }}
+      classNames={{
+        ...classNames,
+        card: cn("border-none rounded-3xl", classNames?.card),
+        button: cn("rounded-full", classNames?.button)
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/settings/account/account-settings.tsx

@@ -0,0 +1,48 @@
+import { useAuth } from "@better-auth-ui/react"
+import { type CardProps, cn } from "@heroui/react"
+import type { ComponentProps } from "react"
+import { Appearance } from "./appearance"
+import { ChangeEmail } from "./change-email"
+import { ManageAccounts } from "./manage-accounts"
+import { UserProfile } from "./user-profile"
+
+export type AccountSettingsProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Renders the account settings layout including user profile, change email, appearance, and accounts management.
+ *
+ * UserProfile, ChangeEmail, and Appearance are always rendered; Accounts is rendered when `multiSession` is enabled.
+ *
+ * @param className - Optional additional CSS class names for the outer container.
+ * @param variant - Card variant forwarded to each account settings card.
+ * @returns The account settings container as a JSX element.
+ */
+export function AccountSettings({
+  className,
+  variant,
+  ...props
+}: AccountSettingsProps & ComponentProps<"div">) {
+  const {
+    multiSession,
+    emailAndPassword,
+    magicLink,
+    appearance: { setTheme }
+  } = useAuth()
+
+  return (
+    <div
+      className={cn("flex w-full flex-col gap-4 md:gap-6", className)}
+      {...props}
+    >
+      <UserProfile variant={variant} />
+      {(emailAndPassword?.enabled || magicLink) && (
+        <ChangeEmail variant={variant} />
+      )}
+      {setTheme && <Appearance variant={variant} />}
+      {multiSession && <ManageAccounts variant={variant} />}
+    </div>
+  )
+}

package/src/components/settings/account/appearance.tsx

@@ -0,0 +1,157 @@
+import {
+  ThemePreviewDark,
+  ThemePreviewLight,
+  ThemePreviewSystem,
+  useAuth,
+  useSession
+} from "@better-auth-ui/react"
+import { Display, Moon, Sun } from "@gravity-ui/icons"
+import {
+  Card,
+  type CardProps,
+  cn,
+  Label,
+  Radio,
+  RadioGroup
+} from "@heroui/react"
+
+export type AppearanceProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Renders a theme selector card with visual theme previews.
+ *
+ * Displays a card containing radio buttons for selecting between system, light,
+ * and dark themes. Each option shows a visual preview of the theme. Only renders
+ * if theme settings are configured (theme, setTheme, and themes are provided).
+ *
+ * @param className - Optional additional CSS class names for the card container.
+ * @returns A JSX element containing the theme selector card, or null if theme settings are not configured.
+ */
+export function Appearance({
+  className,
+  variant,
+  ...props
+}: AppearanceProps & CardProps) {
+  const {
+    localization,
+    appearance: { theme, setTheme, themes }
+  } = useAuth()
+  const { data: session } = useSession()
+
+  if (!setTheme || !themes?.length) {
+    return null
+  }
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.appearance}
+      </h2>
+
+      <Card className={cn("p-4 gap-4", className)} variant={variant} {...props}>
+        <Card.Content>
+          <Label>{localization.settings.theme}</Label>
+
+          <RadioGroup
+            variant={variant === "transparent" ? "secondary" : "primary"}
+            value={session ? theme : ""}
+            onChange={setTheme}
+            isDisabled={!session || !theme}
+          >
+            <div className="grid gap-3 grid-cols-2 sm:grid-cols-3">
+              {themes.includes("system") && (
+                <Radio
+                  value="system"
+                  className={cn(
+                    "mt-0 px-4 pb-4 pt-3 rounded-xl",
+                    "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10",
+                    "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10",
+                    variant === "transparent"
+                      ? "bg-surface"
+                      : "bg-surface-secondary"
+                  )}
+                >
+                  <Radio.Content className="gap-2">
+                    <div className="flex gap-2 justify-between">
+                      <Label className="flex gap-2 items-center">
+                        <Display className="text-muted" />
+                        {localization.settings.system}
+                      </Label>
+
+                      <Radio.Control>
+                        <Radio.Indicator />
+                      </Radio.Control>
+                    </div>
+
+                    <ThemePreviewSystem className="w-full" />
+                  </Radio.Content>
+                </Radio>
+              )}
+
+              {themes.includes("light") && (
+                <Radio
+                  value="light"
+                  className={cn(
+                    "mt-0 px-4 pb-4 pt-3 rounded-xl",
+                    "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10",
+                    "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10",
+                    variant === "transparent"
+                      ? "bg-surface"
+                      : "bg-surface-secondary"
+                  )}
+                >
+                  <Radio.Content className="gap-2">
+                    <div className="flex gap-2 justify-between">
+                      <Label className="flex gap-2 items-center">
+                        <Sun className="text-muted" />
+                        {localization.settings.light}
+                      </Label>
+
+                      <Radio.Control>
+                        <Radio.Indicator />
+                      </Radio.Control>
+                    </div>
+
+                    <ThemePreviewLight className="w-full" />
+                  </Radio.Content>
+                </Radio>
+              )}
+
+              {themes.includes("dark") && (
+                <Radio
+                  value="dark"
+                  className={cn(
+                    "mt-0 px-4 pb-4 pt-3 rounded-xl",
+                    "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10",
+                    "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10",
+                    variant === "transparent"
+                      ? "bg-surface"
+                      : "bg-surface-secondary"
+                  )}
+                >
+                  <Radio.Content className="gap-2">
+                    <div className="flex gap-2 justify-between">
+                      <Label className="flex gap-2 items-center">
+                        <Moon className="text-muted" />
+                        {localization.settings.dark}
+                      </Label>
+
+                      <Radio.Control>
+                        <Radio.Indicator />
+                      </Radio.Control>
+                    </div>
+
+                    <ThemePreviewDark className="w-full" />
+                  </Radio.Content>
+                </Radio>
+              )}
+            </div>
+          </RadioGroup>
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}

package/src/components/settings/account/change-avatar.tsx

@@ -0,0 +1,142 @@
+import { fileToBase64 } from "@better-auth-ui/core"
+import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react"
+import { CloudArrowUpIn, TrashBin } from "@gravity-ui/icons"
+import { Button, cn, Dropdown, Label, Spinner, toast } from "@heroui/react"
+import { type ChangeEvent, useRef, useState } from "react"
+
+import { UserAvatar } from "../../user/user-avatar"
+
+export type ChangeAvatarProps = {
+  className?: string
+}
+
+export function ChangeAvatar({ className }: ChangeAvatarProps) {
+  const { localization, avatar } = useAuth()
+  const { data: session } = useSession()
+
+  const { mutate: updateUser, isPending: updatePending } = useUpdateUser({
+    onError: (error) => toast.danger(error.error?.message || error.message)
+  })
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [isUploading, setIsUploading] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const isPending = updatePending || isUploading || isDeleting
+
+  async function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    e.target.value = ""
+
+    setIsUploading(true)
+
+    try {
+      const resized =
+        (await avatar.resize?.(file, avatar.size, avatar.extension)) || file
+
+      const image =
+        (await avatar.upload?.(resized)) || (await fileToBase64(resized))
+
+      updateUser(
+        { image },
+        {
+          onSuccess: () =>
+            toast.success(localization.settings.avatarChangedSuccess)
+        }
+      )
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.danger(error.message)
+      }
+    }
+
+    setIsUploading(false)
+  }
+
+  async function handleDelete() {
+    const currentImage = session?.user.image
+
+    updateUser(
+      { image: null },
+      {
+        onSuccess: async () => {
+          if (currentImage) {
+            setIsDeleting(true)
+            try {
+              await avatar.delete?.(currentImage)
+            } finally {
+              setIsDeleting(false)
+            }
+          }
+
+          toast.success(localization.settings.avatarDeletedSuccess)
+        }
+      }
+    )
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-1", className)}>
+      <Label isDisabled={!session}>{localization.settings.avatar}</Label>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={handleFileChange}
+      />
+
+      <div className="flex items-center gap-4">
+        <Button
+          type="button"
+          isIconOnly
+          variant="ghost"
+          className="p-0 h-auto w-auto rounded-full"
+          isDisabled={!session || isPending}
+          onPress={() => fileInputRef.current?.click()}
+        >
+          <UserAvatar size="lg" isPending={isPending} />
+        </Button>
+
+        <Dropdown>
+          <Button
+            isDisabled={!session || isPending}
+            size="sm"
+            variant="secondary"
+          >
+            {isPending && <Spinner size="sm" />}
+
+            {localization.settings.changeAvatar}
+          </Button>
+
+          <Dropdown.Popover className="min-w-fit">
+            <Dropdown.Menu>
+              <Dropdown.Item
+                textValue={localization.settings.uploadAvatar}
+                onAction={() => fileInputRef.current?.click()}
+              >
+                <CloudArrowUpIn className="text-muted" />
+
+                <Label>{localization.settings.uploadAvatar}</Label>
+              </Dropdown.Item>
+
+              <Dropdown.Item
+                textValue={localization.settings.deleteAvatar}
+                isDisabled={!session?.user.image}
+                onAction={handleDelete}
+                variant="danger"
+              >
+                <TrashBin className="text-danger" />
+
+                <Label>{localization.settings.deleteAvatar}</Label>
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown.Popover>
+        </Dropdown>
+      </div>
+    </div>
+  )
+}

package/src/components/settings/account/change-email.tsx

@@ -0,0 +1,111 @@
+import { useAuth, useChangeEmail, useSession } from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  FieldError,
+  Fieldset,
+  Form,
+  Input,
+  Label,
+  Skeleton,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import type { SyntheticEvent } from "react"
+
+export type ChangeEmailProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render a card containing a form to view and update the authenticated user's email.
+ *
+ * Shows a loading skeleton until session data is available, displays the current
+ * email as the form's default value, and sends a verification email to the
+ * new address upon successful submission.
+ *
+ * @returns A JSX element rendering the change-email card and form
+ */
+export function ChangeEmail({
+  className,
+  variant,
+  ...props
+}: ChangeEmailProps & CardProps) {
+  const { localization, baseURL, viewPaths } = useAuth()
+  const { data: session } = useSession()
+
+  const { mutate: changeEmail, isPending } = useChangeEmail({
+    onSuccess: () => toast.success(localization.settings.changeEmailSuccess),
+    onError: (error) => toast.danger(error.error?.message || error.message)
+  })
+
+  function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+
+    changeEmail({
+      newEmail: formData.get("email") as string,
+      callbackURL: `${baseURL}/${viewPaths.settings.account}`
+    })
+  }
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.changeEmail}
+      </h2>
+
+      <Card className={cn("p-4 gap-4", className)} variant={variant} {...props}>
+        <Card.Content>
+          <Form onSubmit={handleSubmit}>
+            <Fieldset className="w-full gap-4">
+              <Fieldset.Group>
+                <TextField
+                  key={session?.user.email}
+                  name="email"
+                  type="email"
+                  defaultValue={session?.user.email}
+                  isDisabled={isPending || !session}
+                >
+                  <Label>{localization.auth.email}</Label>
+
+                  {session ? (
+                    <Input
+                      required
+                      variant={
+                        variant === "transparent" ? "primary" : "secondary"
+                      }
+                      autoComplete="email"
+                      placeholder={localization.auth.emailPlaceholder}
+                    />
+                  ) : (
+                    <Skeleton className="h-10 md:h-9 w-full rounded-xl" />
+                  )}
+
+                  <FieldError />
+                </TextField>
+              </Fieldset.Group>
+
+              <Fieldset.Actions>
+                <Button
+                  type="submit"
+                  isPending={isPending}
+                  isDisabled={!session}
+                  size="sm"
+                >
+                  {isPending && <Spinner color="current" size="sm" />}
+
+                  {localization.settings.updateEmail}
+                </Button>
+              </Fieldset.Actions>
+            </Fieldset>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}