DetailPane

import { useDetailPane, DetailPane } from '@hanzo/ui/product'

Types

export type DetailDescriptor = {
  /** Pane title (the item's name). */
  title: ReactNode
  /** Optional secondary line under the title (type, id, status…). */
  subtitle?: ReactNode
  /** Optional title icon, tinted with `iconColor`. */
  icon?: IconLike
  iconColor?: string
  /** Desktop pane width (px). Mobile is always full-screen. Default 460. */
  size?: number
  /** The body — the detail view or edit form for the item. */
  content: ReactNode
  /** Optional sticky footer (primary actions), pinned below the scroll body. */
  footer?: ReactNode
}

export type DetailPaneApi = {
  open: (descriptor: DetailDescriptor) => void
  close: () => void
  isOpen: boolean
}

export type DetailPaneProps = {
  children: ReactNode
  /** z-index for stacking — a pane opened over another overlay passes a
   *  higher value. Left to `SlideOver`'s own default otherwise. */
  zIndex?: number
}

Exports