@asphalt-react/appbar/dist/index.d.ts

Appbar

type Override<T, U> = Omit<U, keyof T> & T

interface AppbarBodyProps {
  /**
   * Container for the AppbarBody content.
   */
  children: React.ReactNode
}

declare function AppbarBody(
  props: Override<AppbarBodyProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface NavItemProps {
  /**
   * Content for a nav item.
   */
  children: React.ReactNode
}

declare function NavItem(
  props: Override<NavItemProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface AppbarHeadProps {
  /**
   * Container for the AppbarHead content.
   */
  children?: React.ReactNode
  /**
   * Adds padding.
   */
  bezel?: boolean
}

declare function AppbarHead(
  props: Override<AppbarHeadProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface NavProps {
  /**
   * React nodes to render in the Nav content.
   */
  children: React.ReactNode
}

declare function Nav(
  props: Override<NavProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface NavItemIconProps {
  /**
   * Icon to enhance the nav item's caption. Accepts SVG.
   */
  children?: React.ReactNode
}

declare function NavItemIcon(
  props: Override<NavItemIconProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface BaseAppbarProps {
  /**
   * Container for the BaseAppbar content.
   */
  children: React.ReactNode
  /**
   * Adds padding.
   */
  bezel?: boolean
}

declare function BaseAppbar(
  props: Override<BaseAppbarProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface AppbarProps {
  /**
   * React node to render in the Appbar content.
   */
  children?: React.ReactNode
  /**
   * Content to display in the Appbar head.
   */
  head?: React.ReactNode
  /**
   * Content to display in the Appbar tail.
   */
  tail?: React.ReactNode
  /**
   * "aria-label" for the button to close Appbar in smaller screens.
   */
  dismissLabel?: string
  /**
   * "aria-label" for the button to open Appbar in smaller screens.
   */
  menuLabel?: string
  /**
   * Appbar shows the body section in the initial state.
   */
  defaultVisible?: boolean
}

declare function Appbar(
  props: Override<AppbarProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface NavItemCaptionProps {
  /**
   * React node to render the caption of the nav item.
   */
  children?: React.ReactNode
}

declare function NavItemCaption(
  props: Override<NavItemCaptionProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface NavLinkProps {
  /**
   * React node to render link content.
   */
  children?: React.ReactNode
  /**
   * Html element/React component to replace the default element. Using this prop, you can use your router's link element, such as "react-router-dom"'s Link element.
   */
  as?: React.ElementType
  /**
   * Pass the props such as "href", "id" for the custom link element passed in `as` prop.
   */
  asProps?: object
  /**
   * Marks the nav link as active.
   */
  active?: boolean
  /**
   * An active style. Adds an indicator to accent the active nav link.
   */
  prominent?: boolean
  /**
   * A subtle active style. Highlights the surface of the nav item.
   */
  highlight?: boolean
  /**
   * An icon only nav link.
   */
  icon?: boolean
  /**
   * Adds padding.
   */
  bezel?: boolean
}

declare function NavLink(
  props: Override<NavLinkProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface NavItemActionProps {
  /**
   * React node to render action elements for a nav item.
   */
  children?: React.ReactNode
  /**
   * Allow events to propagate to the parent element.
   */
  propagateEvent?: boolean
}

declare function NavItemAction(
  props: Override<NavItemActionProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface AppbarTailProps {
  /**
   * Container for the AppbarTail content.
   */
  children: React.ReactNode
  /**
   * Adds padding.
   */
  bezel?: boolean
}

declare function AppbarTail(
  props: Override<AppbarTailProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface UseAppbarProp {
  /* Initial visibility state of the Appbar. */
  defaultVisible?: boolean
}

interface UseAppbarReturn {
  /* The current visibility state of the Appbar. */
  visible: boolean
  /* Function to set the Appbar as visible. */
  open: () => void
  /* Function to set the Appbar as hidden. */
  close: () => void
}

declare function useAppbar(props: UseAppbarProp): UseAppbarReturn

export { Appbar, AppbarBody, type AppbarBodyProps, AppbarHead, type AppbarHeadProps, type AppbarProps, AppbarTail, type AppbarTailProps, BaseAppbar, type BaseAppbarProps, Nav, NavItem, NavItemAction, type NavItemActionProps, NavItemCaption, type NavItemCaptionProps, NavItemIcon, type NavItemIconProps, type NavItemProps, NavLink, type NavLinkProps, type NavProps, useAppbar };