import { ComponentProps, ReactNode } from 'react'; import { DropdownMenuContent } from '../atoms/dropdown-menu'; export type UserNavSize = "sm" | "lg"; export type UserNavProps = { /** Display name. @default "User" */ name?: string; /** Email shown as default secondary content. */ email?: string; /** Avatar image URL. Falls back to initials when omitted. */ avatarUrl?: string; /** Avatar size. `"sm"` = 36px, `"lg"` = 40px. @default "sm" */ avatarSize?: UserNavSize; /** Additional class names for the avatar fallback. */ avatarClassName?: string; /** Badge overlay on the avatar (e.g. a notification dot). Positioned top-right automatically. */ badge?: ReactNode; /** Optional badge content rendered in the dropdown identity instead of reusing the trigger badge. */ menuBadge?: ReactNode; /** * Custom content rendered below the name. * Defaults to the email when omitted. * Pass `null` explicitly to render nothing below the name. */ secondary?: ReactNode; /** Optional secondary content rendered in the dropdown identity instead of reusing the trigger secondary content. */ menuSecondary?: ReactNode; /** Compact mode hides trigger details and chevron while keeping the dropdown identity expanded. */ compact?: boolean; /** * Dropdown menu items (e.g. `DropdownMenuItem`, `DropdownMenuSeparator`). * When provided the trigger becomes interactive and opens a dropdown. * When omitted the component renders as a static display. */ children?: ReactNode; /** Which side of the trigger the dropdown opens on. @default "top" */ dropdownSide?: ComponentProps["side"]; /** How the dropdown aligns with the trigger. @default "end" */ dropdownAlign?: ComponentProps["align"]; className?: string; }; /** * Presentational user widget — avatar, name, and secondary info. * * - Without `children` it renders as a static display. * - With `children` (typically `DropdownMenuItem`) it renders as a dropdown. * - `secondary` defaults to the email; override with any ReactNode. * Pass `null` explicitly to suppress the email entirely. * * @example Chat sidebar * ```tsx * * Sign out * * ``` * * @example Dashboard with plan badge * ```tsx * }> * Billing * * ``` */ declare function UserNav({ name, email, avatarUrl, avatarSize, avatarClassName, badge, menuBadge, secondary, menuSecondary, compact, children, dropdownSide, dropdownAlign, className, }: UserNavProps): import("react").JSX.Element; export { UserNav }; //# sourceMappingURL=user-nav.d.ts.map