@allxsmith/bestax-bulma 5.59.0 → 5.61.0

package/dist/types-cjs/components/Affix.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import type { BadgePosition } from './Badge.js';
+/** A corner of the viewport: the same four values as `BadgePosition`. */
+export type AffixPosition = BadgePosition;
+/**
+ * Props for the Affix component. The helper props, the other attributes and
+ * the `ref` land on its `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `<div>`, wherever it renders.
+ */
+export interface AffixProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** What stays in the corner. */
+    children?: React.ReactNode;
+    /**
+     * The corner of the viewport it's fixed to. Physical, as Badge's and
+     * Toast's are: `'bottom-right'` stays on the right in right-to-left text.
+     * Its distance from the edges is `--bulma-affix-offset-vertical` and
+     * `--bulma-affix-offset-horizontal` plus the device's safe-area inset; a
+     * margin from the spacing helpers (`mb`, `mr`, …) adds to it. A margin on
+     * one side also takes that much of the width its content can have, which
+     * the offset variables don't, so move it far with those.
+     * @defaultValue 'bottom-right'
+     */
+    position?: AffixPosition;
+    /**
+     * Renders it into another container, for a page where an ancestor's
+     * `transform`, `filter` or `contain` would capture `position: fixed`.
+     * `true` portals to the `portalContainer` a `ConfigProvider` sets,
+     * `document.body` by default; a string is used as a
+     * `document.querySelector` selector; an element is used directly. Renders
+     * in place on the server and while hydrating, moving into the portal once
+     * the client takes over, so hydration matches. Portaled, it's appended to
+     * that container when it mounts, so it comes after what's already there in
+     * the reading and Tab order.
+     * @defaultValue false
+     */
+    portal?: boolean | string | HTMLElement;
+}
+/**
+ * The `Affix` component keeps its content fixed to a corner of the viewport while the page scrolls under it.
+ *
+ * It's a `<div>` with no role, so what's inside keeps its own. It sits
+ * `--bulma-affix-offset-vertical` and `--bulma-affix-offset-horizontal`
+ * from its corner's edges, plus the device's safe-area inset, and stacks at
+ * `--bulma-affix-z-index`, over the page's content and under its navbar,
+ * static or fixed, its menus, popovers, the Sidebar, the modals, Tooltip and
+ * Toast. It's as wide as its
+ * content and never wider than the viewport less its offsets. It doesn't
+ * scroll, so nothing inside it is clipped, and content that can be taller
+ * than the screen scrolls itself. Its place in the reading and Tab order is
+ * its place in the DOM, whatever corner it shows in.
+ *
+ * @function
+ * @param {AffixProps} props - Props for the Affix component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns The `<div>`, in place or in its portal.
+ *
+ * @example
+ * <Affix position="bottom-left">
+ *   <Button color="primary">Feedback</Button>
+ * </Affix>
+ */
+export declare const Affix: React.ForwardRefExoticComponent<AffixProps & React.RefAttributes<HTMLDivElement>>;
+export default Affix;

package/dist/types-cjs/components/Navbar.d.ts

@@ -126,7 +126,7 @@ export declare const NavbarItem: PolymorphicComponent<NavbarItemOwnProps, "a">;
  * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the burger button element.
  * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a burger inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.
  */
-export interface NavbarBurgerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+export interface NavbarBurgerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-expanded'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     /** Additional CSS classes. */
     className?: string;
     /** Text color for the burger. */
@@ -155,11 +155,12 @@ export interface NavbarBurgerProps extends React.ButtonHTMLAttributes<HTMLButton
     'aria-label'?: string;
     /**
      * Expanded state for assistive technology. It follows `active` unless you
-     * pass `true` or `false`; a spread carrying `'aria-expanded': undefined`
+     * pass `true` or `false`, and `null` leaves it off, for a burger whose
+     * state isn't known yet; a spread carrying `'aria-expanded': undefined`
      * still follows `active`.
      * @defaultValue active
      */
-    'aria-expanded'?: boolean;
+    'aria-expanded'?: boolean | null;
     /** Click handler. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/dist/types-cjs/helpers/overlayStack.d.ts

@@ -28,3 +28,20 @@ export declare const isModalOverlayOpen: () => boolean;
  * above this overlay.
  */
 export declare function useOverlayStack(inStack: boolean, modal?: boolean): (among?: 'modal') => boolean;
+/**
+ * Calls `onEscape` for an Escape while `active` and the overlay is the
+ * topmost one, as `isTopmost` (from `useOverlayStack`) says, and marks the key
+ * used with `preventDefault()`, so nothing under it acts on it too.
+ *
+ * It listens on `window`, so everything inside the overlay has had the key
+ * first, and an Escape something there used, such as a popup closing, is
+ * left to it. The listener stays put while `onEscape` changes identity, as an
+ * inline one does on every render of the parent: it reads the latest one as
+ * the key arrives.
+ *
+ * @function useOverlayEscape
+ * @param active - Whether the overlay is open and closes on Escape.
+ * @param isTopmost - The overlay's check from `useOverlayStack`.
+ * @param onEscape - What closing it does.
+ */
+export declare function useOverlayEscape(active: boolean, isTopmost: () => boolean, onEscape: () => void): void;

package/dist/types-cjs/helpers/portal.d.ts

@@ -30,6 +30,48 @@ export declare function resolvePortalContainer(container?: string | HTMLElement)
  * returns the DOM node to portal into.
  */
 export declare function usePortalContainer(): (container?: string | HTMLElement) => HTMLElement;
+/**
+ * What a component that takes Modal's `portal` prop does with it now. See
+ * `usePortalProp`.
+ */
+export interface PortalPropState {
+    /**
+     * Whether the content renders in its portal: `portal` is set and
+     * hydration is over. Before that it renders in place.
+     */
+    isPortaled: boolean;
+    /**
+     * The target to pass `Portal` as its `container`: the selector or element
+     * `portal` names, or `undefined` for `true`, which leaves the choice to the
+     * `portalContainer` a `ConfigProvider` sets and then `document.body`.
+     */
+    container?: string | HTMLElement;
+    /**
+     * The `portalContainer` a `ConfigProvider` sets, while it's what places the
+     * content (portaled, with `portal` set to `true`), else `undefined`. A
+     * change to it moves the content, so effects that hold its nodes depend
+     * on it.
+     */
+    defaultTarget?: string | HTMLElement;
+}
+/**
+ * Reads Modal's `portal` prop (`boolean | string | HTMLElement`) for a
+ * component that takes it: whether the content is in its portal yet, and
+ * where it goes.
+ *
+ * A portal has no server-rendered counterpart, so such a component renders in
+ * place on the server and while hydrating, and moves into its portal once the
+ * client takes over. Render the content in `Portal` with
+ * `disabled={!isPortaled}` and this `container`. Moving remounts the content,
+ * so an effect that holds one of its nodes depends on `isPortaled`, `portal`
+ * and `defaultTarget`.
+ *
+ * @function usePortalProp
+ * @param portal - The component's `portal` prop.
+ * @returns Whether it's portaled now, its `container`, and the provider's
+ * target while that places it.
+ */
+export declare function usePortalProp(portal?: boolean | string | HTMLElement): PortalPropState;
 /**
  * Props for the Portal component.
  */

package/dist/types-cjs/helpers/useBulmaViewport.d.ts

@@ -0,0 +1,34 @@
+/** `useBulmaViewport`'s answer below the tablet breakpoint. */
+export declare const MOBILE: number;
+/** Where Bulma's `widescreen`, `desktop` and `tablet` sit in `VIEWPORT_QUERIES`. */
+declare const VIEWPORT_INDEX: {
+    readonly widescreen: 1;
+    readonly desktop: 2;
+    readonly tablet: 3;
+};
+/**
+ * Which of Bulma's viewports the window is in: the index of the widest
+ * `VIEWPORT_QUERIES` entry that matches, `MOBILE` below them all, or `-1`
+ * when that isn't known (on the server, before the first layout effect, and
+ * whenever `enabled` is off, so a caller that needs no answer subscribes to
+ * nothing). It's read in a layout effect, so the first paint after hydration
+ * already has it.
+ *
+ * @function useBulmaViewport
+ * @param enabled - Whether the caller needs the viewport at all.
+ * @returns The viewport, as described above.
+ */
+export declare function useBulmaViewport(enabled: boolean): number;
+/**
+ * Whether the window is at or past one of Bulma's breakpoints, at its default
+ * width, through the one media query Bulma's mixin for it opens with, so a
+ * caller re-renders only when the window crosses that breakpoint. `null`
+ * until it's known: on the server, and before the first layout effect. Where
+ * `matchMedia` isn't there, it's `true`, the wide layout a server renders.
+ *
+ * @function useBulmaBreakpoint
+ * @param breakpoint - The breakpoint: `tablet`, `desktop` or `widescreen`.
+ * @returns Whether the window is at or past it, or `null`.
+ */
+export declare function useBulmaBreakpoint(breakpoint: keyof typeof VIEWPORT_INDEX): boolean | null;
+export {};

package/dist/types-cjs/helpers/useInertSiblings.d.ts

@@ -26,5 +26,8 @@ import type { RefObject } from 'react';
  * @param active - Whether what's beside it is inert.
  * @param wholePage - Whether that goes for the whole page rather than only
  * the element's siblings.
+ * @param except - Ref to an element beside it to leave reachable too, such
+ * as the overlay's own backdrop, which has to take the presses that close
+ * it rather than let them through to what's under it.
  */
-export declare function useInertSiblings(ref: RefObject<Element | null>, active: boolean, wholePage: boolean): void;
+export declare function useInertSiblings(ref: RefObject<Element | null>, active: boolean, wholePage: boolean, except?: RefObject<Element | null>): void;

package/dist/types-cjs/helpers/useOutsidePress.d.ts

@@ -0,0 +1,24 @@
+import type React from 'react';
+import type { RefObject } from 'react';
+/**
+ * Calls `onOutsidePress` for a `pointerdown` outside `ref`'s element while
+ * `active`, as a Popover closes on one.
+ *
+ * A press counts as inside in two ways: on the element's own path in the DOM,
+ * and anywhere in a React tree the returned handler is put on, as
+ * `onPointerDownCapture`. React's tree includes content portaled out of it,
+ * which the DOM path doesn't, and React has seen a press there by the time
+ * the document hears it.
+ *
+ * The listener is on the element's own document, an iframe's when the tree
+ * renders into one, and reads the latest `onOutsidePress` as a press
+ * arrives, so it stays put while the callback changes identity.
+ *
+ * @function useOutsidePress
+ * @param ref - Ref to the element a press inside of doesn't count.
+ * @param active - Whether to listen.
+ * @param onOutsidePress - Called with each press outside.
+ * @returns The `onPointerDownCapture` handler that marks a press in its tree
+ * as inside.
+ */
+export declare function useOutsidePress(ref: RefObject<Element | null>, active: boolean, onOutsidePress: (event: PointerEvent) => void): (event: React.PointerEvent) => void;

package/dist/types-cjs/helpers/useOverlayFocus.d.ts

@@ -0,0 +1,44 @@
+import type { RefObject } from 'react';
+/** Options for `useOverlayFocus`. */
+export interface OverlayFocusOptions {
+    /**
+     * Whether the overlay is modal. One that isn't, opened while a modal
+     * overlay is open under it, leaves focus where it is: that overlay keeps
+     * Tab, so a Tab from this one's controls would only go back to it. It's
+     * read as the overlay opens, so a change while it's open moves nothing.
+     */
+    modal: boolean;
+    /**
+     * A value that remounts the overlay's nodes while it's open when it
+     * changes, such as a new portal target. Focus is handed back from the old
+     * nodes and moved into the new ones.
+     */
+    remountKey?: unknown;
+    /**
+     * Asked as the overlay closes, while it still holds focus: `false` leaves
+     * focus where it is, for a close that shouldn't send it back, such as one
+     * whose overlay stays on the page as something else.
+     */
+    restore?: () => boolean;
+}
+/**
+ * Moves focus into an overlay as it opens, to the first stop Tab wraps to
+ * inside `ref`'s element or the element itself, and hands it back to
+ * whatever had it as it closes, as `Modal` does. Focus goes back only while
+ * the overlay still holds it, or it's been dropped to `<body>`: closing one
+ * under another overlay mustn't pull focus out of the one on top, and focus
+ * moved out to the page stays there. The opener is found wherever it sits,
+ * inside a shadow root too, in the overlay's own document, an iframe's when
+ * it renders into one. It's read in a layout effect as the overlay opens, so
+ * before the commit's passive effects, such as one that makes the page
+ * inert. Content inside the overlay with a layout effect of its own, or an
+ * `autoFocus`, can still move focus first, and then there's no opener to go
+ * back to: focus is never handed back into the overlay that's closing.
+ *
+ * @function useOverlayFocus
+ * @param ref - Ref to the overlay's element.
+ * @param open - Whether the overlay is open.
+ * @param options - Whether it's modal, what remounts it, and whether a
+ * close hands focus back.
+ */
+export declare function useOverlayFocus(ref: RefObject<HTMLElement | null>, open: boolean, { modal, remountKey, restore }: OverlayFocusOptions): void;

package/dist/types-cjs/index.d.ts

@@ -33,6 +33,7 @@ export * from './components/TreeView.js';
 export * from './components/ScrollArea.js';
 export * from './components/Command.js';
 export * from './components/DataTable.js';
+export * from './components/Affix.js';
 export * from './elements/Block.js';
 export * from './elements/Box.js';
 export * from './elements/Button.js';
@@ -150,6 +151,7 @@ export { useNumberFormat } from './helpers/localeFormat.js';
 export type { NumberFormatFunction } from './helpers/localeFormat.js';
 export { useFocusTrap } from './helpers/useFocusTrap.js';
 export type { UseFocusTrapOptions } from './helpers/useFocusTrap.js';
+export * from './layout/AppFrame.js';
 export * from './layout/Center.js';
 export * from './layout/Container.js';
 export * from './layout/Flex.js';

package/dist/types-cjs/layout/AppFrame.d.ts

@@ -0,0 +1,306 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import type { NavbarBurgerProps } from '../components/Navbar.js';
+import type { ContainerBreakpoint } from './Container.js';
+/**
+ * The strings AppFrame renders, each with an English default. A key left
+ * out, or set to an empty string, keeps its default.
+ */
+export interface AppFrameLabels {
+    /**
+     * The skip link's text.
+     * @defaultValue 'Skip to main content'
+     */
+    skipLink?: string;
+    /**
+     * The nav's accessible name, when `AppFrame.Nav` has no `aria-label` or
+     * `aria-labelledby`. Leave the word "navigation" out: the role says it.
+     * @defaultValue 'Sections'
+     */
+    nav?: string;
+    /**
+     * The name of the close button at the top of the drawer.
+     * @defaultValue 'Close navigation'
+     */
+    closeNav?: string;
+    /**
+     * The burger's name, when `AppFrame.Burger` has no `aria-label`.
+     * @defaultValue 'menu', Navbar.Burger's
+     */
+    burger?: string;
+}
+/**
+ * Props for the AppFrame component. The helper props, the other attributes
+ * and the `ref` land on the root `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `<div>`.
+ */
+export interface AppFrameProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /**
+     * The parts, each a direct child: `Header`, `Nav`, `Main`, `Aside` and
+     * `Footer`, in that order, since it's the Tab order. The frame reads the
+     * `id` of `Main` and `Nav` off its children for the skip link and the
+     * burger, so a part wrapped in a component of your own takes no `id` of
+     * its own. Put the frame at the top of the page, outside any `main` or
+     * sectioning element.
+     */
+    children?: React.ReactNode;
+    /**
+     * The width from which the nav is a column beside the page. Below it, the
+     * nav is a drawer the burger opens. The stylesheet switches the layout at
+     * Bulma's breakpoint, and the script reads the width at Bulma's default
+     * breakpoints, so a theme that moves Bulma's breakpoints moves the layout
+     * but not which state the burger toggles.
+     * @defaultValue 'desktop'
+     */
+    breakpoint?: ContainerBreakpoint;
+    /**
+     * Whether the drawer is open, below the breakpoint. With it, the state is
+     * yours: update it from `onNavOpenChange`. It has no effect from the
+     * breakpoint up, where the frame asks to close it.
+     */
+    navOpen?: boolean;
+    /** Whether the drawer starts open. */
+    defaultNavOpen?: boolean;
+    /**
+     * Called with the state asked for: by the burger, `useAppFrame()`, Escape,
+     * a press outside, the close button, a followed link (see
+     * `AppFrame.Nav`'s `closeOnNavigate`), or the window being at or past the
+     * breakpoint while it's open, which closes it.
+     */
+    onNavOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the column is collapsed out of view, from the breakpoint up.
+     * With it, the state is yours: update it from `onNavCollapsedChange`. It
+     * has no effect below the breakpoint, where the drawer always shows the
+     * whole nav.
+     */
+    navCollapsed?: boolean;
+    /** Whether the column starts collapsed. */
+    defaultNavCollapsed?: boolean;
+    /** Called with the state asked for, by the burger or `useAppFrame()`. */
+    onNavCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Renders a skip link first, visible when it has focus, that moves focus
+     * to `AppFrame.Main`. Turn it off only for a page that has its own.
+     */
+    skipLink?: boolean;
+    /** The strings the frame renders. Each one left out keeps its English default. */
+    labels?: AppFrameLabels;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for AppFrame.Header, on its `<header>`, which sticks to the top.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<header>`.
+ */
+export interface AppFrameHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /**
+     * Usually a `Navbar`, not `fixed`, with `AppFrame.Burger` in its
+     * `Navbar.Brand`. A header taller than Bulma's navbar sets
+     * `--bulma-app-frame-header-height` on `:root`, so the nav column, an
+     * in-page link and focus clear it.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Props for AppFrame.Nav, on its `<nav>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<nav>`.
+ * @extraProp {string} [id] - The nav's id, which the burger's `aria-controls` points at. The frame makes one when there's none.
+ * @extraProp {string} [aria-label] - The nav's name. Without it or `aria-labelledby`, it's the frame's `labels.nav`, "Sections".
+ */
+export interface AppFrameNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /**
+     * Usually a `Menu`. A nav taller than the window scrolls on its own. With
+     * `overlay`, the rest of the frame is inert while the drawer is open, so an
+     * overlay opened from the drawer, such as a `Modal`, goes inside the nav or
+     * renders outside the frame (Modal's `portal`).
+     */
+    children?: React.ReactNode;
+    /**
+     * The column's width, and the drawer's up to the window's width less a
+     * strip of backdrop. A number is pixels, and a string any CSS length. It
+     * writes `--bulma-app-frame-nav-width`, 16rem by default.
+     */
+    width?: number | string;
+    /**
+     * Shows a backdrop behind the drawer and makes it modal: Tab stays inside,
+     * the page scroll locks, and the rest of the frame is inert, while what
+     * renders outside it, such as a Modal opened from the drawer or a toast,
+     * stays live. Without it the drawer covers the page without holding Tab,
+     * and focus can move to the page beside it. Either way focus moves in as
+     * it opens. Sidebar's `overlay`.
+     */
+    overlay?: boolean;
+    /**
+     * Closes the drawer on Escape, while it's the topmost overlay, so Escape
+     * closes one layer at a time.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Closes the drawer on a press outside it while it's the topmost overlay:
+     * a click on the backdrop, or without `overlay` a press anywhere outside
+     * it. Focus goes back to the burger as it closes. Without `overlay`, the
+     * press's own mousedown then moves it, as on any page: to what was pressed
+     * if that takes focus, and otherwise off the burger to the page. A touch
+     * that scrolls leaves it on the burger. A press on a control whose
+     * `aria-controls` names the nav, such as the burger, is left to that
+     * control. Popover's `closeOnClickOutside`.
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Closes the drawer when a link inside it is followed with a plain click:
+     * not with a modifier key held, and not on a link with a `target` other
+     * than `_self` or a `download`. Only a link the nav holds in the page
+     * counts, not one in a Modal or a popup it portals elsewhere. Focus goes
+     * back to the burger, and the navigation takes it from there: a router
+     * that moves focus on navigation moves it, and an in-page `#` link leaves
+     * it at its target, as it does anywhere on the page. Turn it off for a
+     * drawer of filters rather than links.
+     */
+    closeOnNavigate?: boolean;
+}
+/**
+ * Props for AppFrame.Main, on the page's one `<main>`. Don't put another
+ * `<main>` inside it. It takes your `id`, or a generated one, for the skip
+ * link, and `tabIndex={-1}` so the link can move focus to it.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<main>`.
+ * @extraProp {string} [id] - Its id, which the skip link points at. The frame makes one when there's none.
+ */
+export interface AppFrameMainProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** The page. A `Container` or a `Section` inside it gives Bulma's widths and padding. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for AppFrame.Aside, on its `<aside>`, a complementary landmark.
+ * Give it an `aria-label` when the page has more than one.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<aside>`.
+ */
+export interface AppFrameAsideProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** What sits beside the page: an outline, details, filters. */
+    children?: React.ReactNode;
+    /**
+     * Its width from the breakpoint up; below it, the aside moves under the
+     * page. A number is pixels, and a string any CSS length. It writes
+     * `--bulma-app-frame-aside-width`, 20rem by default.
+     */
+    width?: number | string;
+}
+/**
+ * Props for AppFrame.Footer, on its `<footer>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<footer>`.
+ */
+export interface AppFrameFooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Plain content, or bestax's `Footer` with `as="div"` for Bulma's footer look. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for AppFrame.Burger: Navbar.Burger's, less the state the frame
+ * fills in. Its `<button>` opens and closes the drawer below the breakpoint
+ * and collapses and expands the column from it up, with `aria-expanded` and
+ * `aria-controls` following the nav. It shows at every width. Hide it from
+ * the breakpoint up with the visibility helpers when the column never
+ * collapses. Outside an AppFrame it controls nothing.
+ */
+export type AppFrameBurgerProps = Omit<NavbarBurgerProps, 'active' | 'aria-expanded' | 'aria-controls'>;
+/** What `useAppFrame()` returns. */
+export interface AppFrameState {
+    /** Whether the drawer is open. */
+    navOpen: boolean;
+    /** Asks to open or close the drawer, through `onNavOpenChange`. */
+    setNavOpen: (open: boolean) => void;
+    /** Whether the column is collapsed. */
+    navCollapsed: boolean;
+    /** Asks to collapse or expand the column, through `onNavCollapsedChange`. */
+    setNavCollapsed: (collapsed: boolean) => void;
+    /**
+     * Whether the nav is a drawer at the current width. `false` on the server
+     * and until the first layout effect has read the width.
+     */
+    isDrawer: boolean;
+    /** Toggles whichever state applies at the current width, as the burger does. */
+    toggleNav: () => void;
+    /** The nav's `id`, for a custom toggle's `aria-controls`. */
+    navId: string;
+}
+/**
+ * The top bar of an AppFrame, which sticks while the page scrolls.
+ *
+ * @function
+ * @param {AppFrameHeaderProps} props - Props for AppFrame.Header.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<header>`.
+ * @returns {JSX.Element} The rendered header.
+ */
+export declare const AppFrameHeader: React.ForwardRefExoticComponent<AppFrameHeaderProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The navigation of an AppFrame: a column beside the page from the breakpoint up, and a drawer below it.
+ *
+ * @function
+ * @param {AppFrameNavProps} props - Props for AppFrame.Nav.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<nav>`.
+ * @returns {JSX.Element} The rendered nav, and the drawer's backdrop.
+ */
+export declare const AppFrameNav: React.ForwardRefExoticComponent<AppFrameNavProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The page's main content in an AppFrame, which the skip link moves focus to.
+ *
+ * @function
+ * @param {AppFrameMainProps} props - Props for AppFrame.Main.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<main>`.
+ * @returns {JSX.Element} The rendered main.
+ */
+export declare const AppFrameMain: React.ForwardRefExoticComponent<AppFrameMainProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Content beside the page in an AppFrame, which moves under it below the breakpoint.
+ *
+ * @function
+ * @param {AppFrameAsideProps} props - Props for AppFrame.Aside.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<aside>`.
+ * @returns {JSX.Element} The rendered aside.
+ */
+export declare const AppFrameAside: React.ForwardRefExoticComponent<AppFrameAsideProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The bottom of an AppFrame, under the page.
+ *
+ * @function
+ * @param {AppFrameFooterProps} props - Props for AppFrame.Footer.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<footer>`.
+ * @returns {JSX.Element} The rendered footer.
+ */
+export declare const AppFrameFooter: React.ForwardRefExoticComponent<AppFrameFooterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * The button that opens the drawer, or collapses the column from the breakpoint up: Navbar.Burger, wired to the frame.
+ *
+ * @function
+ * @param {AppFrameBurgerProps} props - Props for AppFrame.Burger.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered burger.
+ */
+export declare const AppFrameBurger: React.ForwardRefExoticComponent<AppFrameBurgerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * The frame's state, for a control of your own inside it: whether the
+ * drawer is open and the column collapsed, setters that go through the
+ * frame's callbacks, and `toggleNav()`, which does what the burger does.
+ * Outside an AppFrame it's `null`, as the library's other context hooks
+ * are, so a control that can sit outside one renders a fallback or nothing.
+ *
+ * @function useAppFrame
+ * @returns The frame's state, or `null` outside an AppFrame.
+ */
+export declare function useAppFrame(): AppFrameState | null;
+export declare const AppFrame: React.ForwardRefExoticComponent<AppFrameProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<AppFrameHeaderProps & React.RefAttributes<HTMLElement>>;
+    Nav: React.ForwardRefExoticComponent<AppFrameNavProps & React.RefAttributes<HTMLElement>>;
+    Main: React.ForwardRefExoticComponent<AppFrameMainProps & React.RefAttributes<HTMLElement>>;
+    Aside: React.ForwardRefExoticComponent<AppFrameAsideProps & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<AppFrameFooterProps & React.RefAttributes<HTMLElement>>;
+    Burger: React.ForwardRefExoticComponent<AppFrameBurgerProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export default AppFrame;