@better-auth-ui/heroui 1.6.2 → 1.6.4

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

@@ -1,218 +0,0 @@
-import {
-  useAuth,
-  useIsUsernameAvailable,
-  useSession,
-  useUpdateUser
-} from "@better-auth-ui/react"
-import { Check, Xmark } from "@gravity-ui/icons"
-import {
-  Button,
-  Card,
-  type CardProps,
-  cn,
-  FieldError,
-  Fieldset,
-  Form,
-  Input,
-  InputGroup,
-  Label,
-  Skeleton,
-  Spinner,
-  TextField,
-  toast
-} from "@heroui/react"
-import { useDebouncer } from "@tanstack/react-pacer"
-import { type SyntheticEvent, useEffect, useState } from "react"
-
-import { ChangeAvatar } from "./change-avatar"
-
-export type UserProfileProps = {
-  className?: string
-  variant?: CardProps["variant"]
-}
-
-/**
- * Render a profile card that lets the authenticated user view and update their display name, username, and avatar.
- *
- * @returns A JSX element containing the user profile card with avatar upload and editable form fields
- */
-export function UserProfile({
-  className,
-  variant,
-  ...props
-}: UserProfileProps & CardProps) {
-  const { localization, username: usernameConfig } = useAuth()
-  const { data: session } = useSession()
-
-  const currentUsername =
-    (usernameConfig?.displayUsername
-      ? session?.user?.displayUsername
-      : session?.user?.username) || ""
-
-  const [username, setUsername] = useState(currentUsername)
-
-  useEffect(() => {
-    setUsername(currentUsername)
-  }, [currentUsername])
-
-  const {
-    mutate: isUsernameAvailable,
-    data: usernameData,
-    error: usernameError,
-    reset: resetUsername
-  } = useIsUsernameAvailable()
-
-  const usernameDebouncer = useDebouncer(
-    (value: string) => {
-      if (!value.trim() || value.trim() === currentUsername) {
-        resetUsername()
-        return
-      }
-
-      isUsernameAvailable({ username: value.trim() })
-    },
-    { wait: 500 }
-  )
-
-  function handleUsernameChange(value: string) {
-    setUsername(value)
-    resetUsername()
-
-    if (usernameConfig?.isUsernameAvailable) {
-      usernameDebouncer.maybeExecute(value)
-    }
-  }
-
-  const { mutate: updateUser, isPending } = useUpdateUser({
-    onError: (error) => toast.danger(error.error?.message || error.message),
-    onSuccess: () => toast.success(localization.settings.profileUpdatedSuccess)
-  })
-
-  function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
-    e.preventDefault()
-    const formData = new FormData(e.currentTarget)
-    const name = formData.get("name") as string
-
-    updateUser({
-      name,
-      ...(usernameConfig?.enabled
-        ? {
-            username: username.trim(),
-            ...(usernameConfig.displayUsername
-              ? { displayUsername: username.trim() }
-              : {})
-          }
-        : {})
-    })
-  }
-
-  return (
-    <div>
-      <h2 className={cn("text-sm font-semibold mb-3")}>
-        {localization.settings.profile}
-      </h2>
-
-      <Card className={cn("p-4 gap-4", className)} variant={variant} {...props}>
-        <Card.Content>
-          <Form onSubmit={handleSubmit}>
-            <Fieldset className="w-full gap-4">
-              <ChangeAvatar />
-
-              <Fieldset.Group>
-                {usernameConfig?.enabled && (
-                  <TextField
-                    type="text"
-                    autoComplete="username"
-                    minLength={usernameConfig.minUsernameLength}
-                    maxLength={usernameConfig.maxUsernameLength}
-                    isDisabled={isPending || !session}
-                    value={username}
-                    onChange={handleUsernameChange}
-                    isInvalid={
-                      !!usernameError ||
-                      (usernameData && !usernameData.available)
-                    }
-                  >
-                    <Label>{localization.auth.username}</Label>
-
-                    {session ? (
-                      <InputGroup
-                        variant={
-                          variant === "transparent" ? "primary" : "secondary"
-                        }
-                      >
-                        <InputGroup.Input
-                          placeholder={localization.auth.usernamePlaceholder}
-                          name="username"
-                        />
-
-                        {usernameConfig.isUsernameAvailable &&
-                          username.trim() &&
-                          username.trim() !== currentUsername && (
-                            <InputGroup.Suffix className="px-2">
-                              {usernameData?.available ? (
-                                <Check className="text-success" />
-                              ) : usernameError ||
-                                usernameData?.available === false ? (
-                                <Xmark className="text-danger" />
-                              ) : (
-                                <Spinner size="sm" color="current" />
-                              )}
-                            </InputGroup.Suffix>
-                          )}
-                      </InputGroup>
-                    ) : (
-                      <Skeleton className="h-10 md:h-9 w-full rounded-xl" />
-                    )}
-
-                    <FieldError>
-                      {usernameError?.error?.message ||
-                        usernameError?.message ||
-                        (usernameData?.available === false &&
-                          localization.auth.usernameTaken)}
-                    </FieldError>
-                  </TextField>
-                )}
-
-                <TextField
-                  key={session?.user?.name}
-                  name="name"
-                  defaultValue={session?.user.name}
-                  isDisabled={isPending || !session}
-                >
-                  <Label>{localization.auth.name}</Label>
-
-                  {session ? (
-                    <Input
-                      autoComplete="name"
-                      placeholder={localization.auth.name}
-                      variant={
-                        variant === "transparent" ? "primary" : "secondary"
-                      }
-                    />
-                  ) : (
-                    <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.saveChanges}
-                </Button>
-              </Fieldset.Actions>
-            </Fieldset>
-          </Form>
-        </Card.Content>
-      </Card>
-    </div>
-  )
-}

package/src/components/settings/security/passkeys.tsx

@@ -1,104 +0,0 @@
-import {
-  useAddPasskey,
-  useAuth,
-  useListUserPasskeys
-} from "@better-auth-ui/react"
-import {
-  Button,
-  Card,
-  type CardProps,
-  cn,
-  Skeleton,
-  Spinner,
-  toast
-} from "@heroui/react"
-
-import { Passkey } from "./passkey"
-
-export type PasskeysProps = {
-  className?: string
-  variant?: CardProps["variant"]
-}
-
-export function Passkeys({
-  className,
-  variant,
-  ...props
-}: PasskeysProps & CardProps) {
-  const { localization } = useAuth()
-
-  const { data: passkeys, isPending } = useListUserPasskeys({
-    throwOnError: (error) => {
-      if (error.error) toast.danger(error.error.message)
-      return false
-    }
-  })
-
-  const { mutate: addPasskey, isPending: isAdding } = useAddPasskey({
-    onError: (error) => toast.danger(error.error?.message || error.message)
-  })
-
-  return (
-    <div>
-      <h2 className={cn("text-sm font-semibold mb-3")}>
-        {localization.settings.passkeys}
-      </h2>
-
-      <Card className={cn(className)} variant={variant} {...props}>
-        <Card.Content className="gap-0">
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-              <p className="text-sm font-medium leading-tight">
-                {localization.settings.passkeysDescription}
-              </p>
-
-              <p className="text-muted text-xs mt-0.5">
-                {localization.settings.passkeysInstructions}
-              </p>
-            </div>
-
-            <Button
-              className="shrink-0"
-              size="sm"
-              isPending={isAdding}
-              isDisabled={isPending}
-              onPress={() => addPasskey()}
-            >
-              {isAdding && <Spinner color="current" size="sm" />}
-              {localization.settings.addPasskey}
-            </Button>
-          </div>
-
-          {isPending ? (
-            <>
-              <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
-              <PasskeySkeleton />
-            </>
-          ) : (
-            passkeys?.map((passkey) => (
-              <div key={passkey.id}>
-                <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
-                <Passkey passkey={passkey} />
-              </div>
-            ))
-          )}
-        </Card.Content>
-      </Card>
-    </div>
-  )
-}
-
-function PasskeySkeleton() {
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center gap-3">
-        <Skeleton className="size-10 rounded-xl" />
-
-        <div className="flex flex-col gap-1">
-          <Skeleton className="h-4 w-24 rounded-lg" />
-          <Skeleton className="h-3 w-20 rounded-lg" />
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/core.ts

@@ -1 +0,0 @@
-export * from "@better-auth-ui/react/core"

package/src/react-exports.ts

@@ -1 +0,0 @@
-export * from "@better-auth-ui/react"