@better-auth-ui/heroui 1.6.0

package/src/components/user/user-view.tsx

@@ -0,0 +1,74 @@
+import { useSession } from "@better-auth-ui/react"
+import { type AvatarProps, cn, Skeleton } from "@heroui/react"
+import type { User } from "better-auth"
+import type { ComponentProps } from "react"
+import { UserAvatar } from "./user-avatar"
+
+export type UserViewProps = {
+  className?: string
+  isPending?: boolean
+  size?: AvatarProps["size"]
+  /** @remarks `User` */
+  user?: User & { username?: string | null; displayUsername?: string | null }
+}
+
+/**
+ * Render a compact user item with an avatar, a primary label (display username, name, or email), and an optional secondary email line.
+ *
+ * @param isPending - If true and no `user` prop is provided, renders a loading skeleton instead of user details
+ * @param size - Avatar size variant; defaults to `"sm"`
+ * @param user - Optional user to display; when omitted the current session user is used if available
+ * @returns A React element containing the user's avatar and text labels
+ */
+export function UserView({
+  className,
+  isPending,
+  size = "sm",
+  user,
+  ...props
+}: UserViewProps & ComponentProps<"div">) {
+  const { data: session, isPending: sessionPending } = useSession({
+    enabled: !user && !isPending
+  })
+
+  const resolvedUser = user ?? session?.user
+
+  if ((isPending || sessionPending) && !user) {
+    return (
+      <div
+        className={cn("flex items-center gap-2 min-w-0", className)}
+        {...props}
+      >
+        <UserAvatar isPending size={size} />
+
+        <div className="flex flex-col gap-1 min-w-0">
+          <Skeleton className="h-3.5 w-24 rounded-lg" />
+          <Skeleton className="h-3 w-32 rounded-lg" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn("flex items-center gap-2 min-w-0", className)}
+      {...props}
+    >
+      <UserAvatar user={resolvedUser} size={size} />
+
+      <div className="min-w-0">
+        <p className="text-sm font-medium truncate leading-tight">
+          {resolvedUser?.displayUsername ||
+            resolvedUser?.name ||
+            resolvedUser?.email}
+        </p>
+
+        {(resolvedUser?.displayUsername || resolvedUser?.name) && (
+          <p className="text-muted text-xs mb-0.5 truncate overflow-x-hidden">
+            {resolvedUser?.email}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/core.ts

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

package/src/index.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+export * from "./components/auth/auth"
+export * from "./components/auth/auth-provider"
+export * from "./components/auth/forgot-password"
+export * from "./components/auth/magic-link"
+export * from "./components/auth/magic-link-button"
+export * from "./components/auth/provider-buttons"
+export * from "./components/auth/reset-password"
+export * from "./components/auth/sign-in"
+export * from "./components/auth/sign-out"
+export * from "./components/auth/sign-up"
+export * from "./components/email/email-changed-email"
+export * from "./components/email/email-verification-email"
+export * from "./components/email/magic-link-email"
+export * from "./components/email/new-device-email"
+export * from "./components/email/otp-email"
+export * from "./components/email/password-changed-email"
+export * from "./components/email/reset-password-email"
+export * from "./components/settings/account/account-settings"
+export * from "./components/settings/account/appearance"
+export * from "./components/settings/account/change-email"
+export * from "./components/settings/account/manage-account"
+export * from "./components/settings/account/manage-accounts"
+export * from "./components/settings/account/user-profile"
+export * from "./components/settings/security/active-sessions"
+export * from "./components/settings/security/change-password"
+export * from "./components/settings/security/danger-zone"
+export * from "./components/settings/security/delete-user"
+export * from "./components/settings/security/linked-accounts"
+export * from "./components/settings/security/security-settings"
+export * from "./components/settings/settings"
+export * from "./components/user/user-avatar"
+export * from "./components/user/user-button"
+export * from "./components/user/user-view"

package/src/react-exports.ts

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

package/src/styles.css

@@ -0,0 +1 @@
+@source ".";