UserMenu

import { UserMenu } from '@hanzo/ui/product'

Types

export type UserMenuItem = {
  id: string
  label: string
  icon?: ReactNode
  onPress: () => void
  /** Draws the row in the destructive tone (sign out, delete account). */
  danger?: boolean
  /**
   * Whether this row is the chosen one — for a group that is a CHOICE rather
   * than a list of actions (which theme, which language). Its presence makes the
   * group a `radiogroup` and the row a `radio`, so assistive tech is told that
   * exactly one of them holds, and the chosen row carries a check.
   */
  active?: boolean
}

export type UserMenuGroup = UserMenuItem[] | { label?: string; items: UserMenuItem[] }

export type UserMenuProps = {
  /** The signed-in person's display name. Falls back to the email's local part. */
  name?: string
  email?: string
  /** Avatar URL. Absent → the monogram of the name, like an org's mark. */
  avatar?: string
  /** Grouped rows — each group is separated by a rule, empty groups are dropped.
   *  A group may be named, and a named group of `active` rows is a choice. */
  groups?: UserMenuGroup[]
  /** Theme row content — default `<ThemeToggle/>`; `null` hides the row (a
   *  single-theme surface has nothing to toggle and should not pretend to). */
  theme?: ReactNode
  /** Sign out. Omit on a surface that cannot sign out. */
  onSignOut?: () => void
  /** Sign-out copy — "Sign out" everywhere unless a surface has a reason. */
  signOutLabel?: string
  /** Replace the whole menu body, keeping the trigger. */
  children?: ReactNode
  /** Show the name beside the avatar in the trigger. Default true. */
  label?: boolean
  /** Trigger height. Default 44 — the peer of `OrgSwitcher`. */
  height?: number
  /**
   * Which way the panel opens, and from which edge. A user menu in a top bar
   * opens down from its right edge; the same control at the FOOT of a sidebar
   * has to open upward from its left, and a downward panel there falls off the
   * bottom of the viewport. This was hard-coded `bottom-end`, which is why the
   * console could not mount this component in its rail and kept a local copy of
   * the whole thing — the peer of `OrgSwitcher.direction`, which already had it.
   */
  direction?: 'down' | 'up'
  /** Which edge the panel aligns to. Default `end` (a top-bar avatar); `start`
   *  for a rail, where the panel should share the trigger's left edge. */
  align?: 'start' | 'end'
  /** The trigger's accessible name. Defaults to "<name> · account". */
  aria?: string
  /** `data-testid` on the trigger. */
  testId?: string
  /** Classes for the sheet — the host's own material (glass, elevation). */
  className?: string
  /** Inline style for the sheet — a host's stacking layer belongs here. */
  style?: CSSProperties
}

Exports