prime-ui-kit 0.15.0 → 0.17.0

package/dist/internal/tokenDefaults.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Token values as numbers at the default root size (16px): px for lengths, ms for durations. For
+ * JS that needs a token before the CSS can be read (server render, a test without the styles) or
+ * where a number must agree with the CSS (an off-screen estimate, a gesture clock). Live values
+ * come from the CSS (`readCssLengthPx`, `readCssDurationMs`), with these as their defaults.
+ */
+export declare const TOKEN_DEFAULTS: {
+    readonly "--prime-gallery-max-size": 360;
+    readonly "--prime-message-video-note-box": 268;
+    readonly "--prime-motion-duration-base": 380;
+    readonly "--prime-motion-duration-fast": 230;
+    readonly "--prime-motion-duration-slow": 570;
+    readonly "--prime-motion-duration-xfast": 150;
+    readonly "--prime-motion-hold-confirm": 1200;
+    readonly "--prime-motion-stagger": 80;
+    readonly "--prime-panel-offset": 4;
+    readonly "--prime-space-2": 8;
+    readonly "--prime-space-6": 24;
+    readonly "--prime-space-8": 32;
+    readonly "--prime-space-20": 80;
+};

package/dist/internal/touchTarget.d.ts

@@ -2,3 +2,8 @@
 export declare const touchTargetClass: string;
 /** The same hit area grown in height only: a segment beside other content of its host. */
 export declare const touchTargetBlockClass: string;
+/**
+ * A row of a stacked list (a list item, a menu row, a timeline entry): on coarse pointers the row
+ * itself grows to the touch target height, since a hit area outside it would cover its neighbours.
+ */
+export declare const touchTargetRowClass: string;

package/dist/internal/transcript.d.ts

@@ -1,23 +1,32 @@
 import * as React from "react";
 import type { SurfaceDepth } from "./surfaceDepth";
+import { type AsyncHandler } from "./usePendingChanges";
 /**
- * The transcript of a voice or video message (VoicePlayer, VideoNote): a button that
- * opens the text under the media, the text itself, and its request when the text is not known yet.
+ * The transcript of a voice or video message (VoicePlayer, VideoNote): a button that opens the
+ * text under the media, the text itself, and its request when the text is not known yet (each
+ * prop is described in `transcript.api.ts`). An `onTranscribe` that returns nothing keeps the
+ * button spinning until the owner passes `transcript`.
  */
 export type TranscriptProps = {
-    /** The text of the recording, when it is known. With it or `onTranscribe` the button shows. */
+    /**
+     * The text of the recording, when it is known. With it or `onTranscribe` a «→A» button opens and closes the text: the button ends the waveform, the text opens under the player.
+     */
     transcript?: string;
     /**
-     * Asks for the text when `transcript` is not known yet, on the first open. Return a Promise of the
-     * text: only the button spins and the area stays closed until it resolves, then it opens with the
-     * text; a rejection announces `transcribeFailed`. Returning nothing keeps the button spinning
-     * until the owner passes `transcript`.
+     * Asks for the text on the first open while `transcript` is not known; return a Promise of the text. The button spins, then the text opens; a rejection announces `labels.transcribeFailed`.
+     */
+    onTranscribe?: AsyncHandler<[], string>;
+    /**
+     * The transcript is open (controlled). Opening it without a text calls `onTranscribe`.
      */
-    onTranscribe?: () => Promise<string> | void;
-    /** The transcript is open (controlled). */
     transcriptExpanded?: boolean;
-    /** Initially open (uncontrolled). Default `false`. */
+    /**
+     * Initially open (uncontrolled). In `Chat.Messages` the open state and a resolved text survive a row scrolled away and back.
+     */
     defaultTranscriptExpanded?: boolean;
+    /**
+     * The transcript button was pressed, or a rejected `onTranscribe` closed the transcript.
+     */
     onTranscriptExpandedChange?: (expanded: boolean) => void;
 };
 export type TranscriptLabels = {
@@ -62,12 +71,4 @@ export type Transcript = {
  * that would change the bubble twice.
  */
 export declare function useTranscript({ transcript, onTranscribe, transcriptExpanded, defaultTranscriptExpanded, onTranscriptExpandedChange, }: TranscriptProps, labels: TranscriptLabels): Transcript | null;
-/**
- * The button's glyph: the transcript mark («→A») while closed, a chevron up while open; they
- * cross-fade. The request's spinner is the Button's own `loading` (`internal/mediaPlayer`
- * `TranscriptButton`).
- */
-export declare function TranscriptGlyph({ expanded }: {
-    expanded: boolean;
-}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/internal/transfer.d.ts

@@ -1,3 +1,4 @@
+import type { AsyncHandler } from "./usePendingChanges";
 /**
  * Where a transfer of a file or a recording is, in either direction: `remote` — not fetched yet
  * (the download arrow fetches it); `queued` — waiting its turn; `loading` — in flight; `failed` —
@@ -11,23 +12,36 @@ export type TransferState = "remote" | "queued" | "loading" | "failed" | "done";
  */
 export type TransferDirection = "upload" | "download";
 /** A cancel, a retry or a download: a returned promise keeps the disk pending until it settles. */
-export type TransferHandler = () => void | Promise<void>;
+export type TransferHandler = AsyncHandler;
 /**
  * The transfer props of every part that sends or receives its content (VoicePlayer, VideoNote,
- * Message.File; Message.Media per item, its handlers per index).
+ * Message.File; Message.Media per item, its handlers per index). Each prop is described in
+ * `transfer.api.ts`.
  */
 export type TransferProps = {
-    /** Where the transfer is; without it the content is simply there. */
+    /**
+     * The transfer of the recording, drawn on the play disk itself, either way (`TransferState`): `queued` / `loading` — the cancel cross and the share ring; `failed` — retry; `remote` — download; `done` — the disk fades out.
+     */
     transfer?: TransferState;
-    /** Share transferred, 0…1; without it a transfer in flight turns an indeterminate arc. */
+    /**
+     * Share transferred, 0…1 (`UploadItem.progress`): the ring along the disk's inner edge, gliding (`base`) while it turns. Without it a transfer in flight turns a quarter arc.
+     */
     transferProgress?: number;
-    /** Which way it goes: the words only. Default `upload`. */
+    /**
+     * Which way it goes: sending (`upload`) or receiving (`download`). Changes only the words — the names of the cross and the retry, the share and the failure — never the look.
+     */
     transferDirection?: TransferDirection;
-    /** Cancel the transfer in flight (the disk's cross). */
+    /**
+     * Cancel the transfer in flight: the disk's cross. A returned promise keeps the disk pending (a spinner, `aria-busy`, no second press); a rejection leaves the transfer as it was and announces `cancelFailed`.
+     */
     onCancel?: TransferHandler;
-    /** Transfer it again after a failure (the danger disk). */
+    /**
+     * Transfer it again after a failure: the danger disk's retry; a promise works the same (`retryFailed` on a rejection).
+     */
     onRetry?: TransferHandler;
-    /** Fetch a `remote` content (the download arrow). */
+    /**
+     * Fetch a `remote` content: the download arrow; set `transfer` to `loading` with `transferDirection="download"` as it starts. A promise works the same (`downloadFailed` on a rejection).
+     */
     onDownload?: TransferHandler;
 };
 /** The strings of a transfer, one shape for every part that transfers its content. */

package/dist/internal/transferDisk.d.ts

@@ -29,7 +29,7 @@ export type TransferDiskProps = {
     className?: string;
 };
 type Action = "cancel" | "retry" | "download";
-export type TransferDiskModel = {
+type TransferDiskModel = {
     /** What a press does now, or `null` when the disk only shows the state. */
     action: Action | null;
     /** The handler of `action` was given. */
@@ -66,11 +66,10 @@ export declare function useTransferDisk({ state, progress, labels, onCancel, onR
  * named `progressbar` while in flight.
  */
 export declare function TransferDisk({ look, size, className, ...props }: TransferDiskProps): import("react/jsx-runtime").JSX.Element;
-export type TransferOverlayProps = TransferDiskProps;
 /**
  * The transfer disk centred over a box (an attachment tile, a picture in a chat message, a video
  * circle). The host positions it (`position: absolute; inset: 0`) and dims its content while the
  * transfer is not done; only the disk takes the pointer.
  */
-export declare function TransferOverlay({ className, ...props }: TransferOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function TransferOverlay({ className, ...props }: TransferDiskProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/internal/useFlipList.d.ts

@@ -0,0 +1,44 @@
+/** A box in viewport coordinates. */
+type LayoutBox = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+/**
+ * Where an element sits in the layout with any animation transform taken back out — its glide and
+ * its growth (a tile growing into the cover cell is drawn smaller until it gets there). A decision
+ * that depends on where things stand (a drop position) is measured against this: reading the drawn
+ * box makes each answer depend on the glide the previous answer started.
+ */
+export declare function layoutRect(element: Element): LayoutBox;
+type FlipListOptions = {
+    /** The element the items move inside; positions are kept relative to it. */
+    container: HTMLElement | null;
+    /** The items that glide, in the container (read on every layout change). */
+    nodes: (container: HTMLElement) => Iterable<HTMLElement>;
+    /** The stable key of an item; an item without one does not glide. */
+    keyOf: (node: HTMLElement) => string | undefined;
+    /**
+     * Changes when the items may have moved. While `enabled`, every change glides; the first one
+     * after `enabled` turns on only takes the baseline (the frame a drag starts is no layout change).
+     */
+    layoutKey?: string;
+    enabled?: boolean;
+    /** A new value glides this layout change while not `enabled` (a keyboard move, a rollback). */
+    settle?: number;
+};
+/**
+ * Animates layout changes of a list's items from the position currently on screen (FLIP): the
+ * items of a sortable list and its drop gap, a list whose order changed, cards a refused move
+ * puts back. `capture()` reads where the items stand now; the next commit glides every item that
+ * moved from there — a host calls it right before it changes the order itself. A glide reversed
+ * midway starts from where the item is drawn, so offsets never compound. Reduced motion: nothing
+ * glides.
+ */
+export declare function useFlipList({ container, nodes, keyOf, layoutKey, enabled, settle, }: FlipListOptions): {
+    capture: () => void;
+};
+export {};

package/dist/internal/useNearView.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 /**
- * `true` once the element has come near the view of its scroller (half a viewport ahead) and from
- * then on: heavy media (a video's first frame) mounts only then. Without IntersectionObserver it is
- * `true` at once.
+ * `true` once the element has come near the view of its scroller (half a view ahead) and from
+ * then on: heavy media (a video's first frame) mounts only then. Inside a `ScrollContainer` the
+ * scroller is the observer's root, so a tile below the fold of a chat waits for the chat's scroll,
+ * not the page's; elsewhere the viewport. Without IntersectionObserver it is `true` at once.
  */
 export declare function useNearView(ref: React.RefObject<Element | null>): boolean;

package/dist/internal/usePendingChanges.d.ts

@@ -1,3 +1,8 @@
+/**
+ * The kit's async event: a handler that returns nothing is a sync event; one that returns a
+ * Promise keeps the change pending until it settles (resolve — done, reject — nothing changes).
+ */
+export type AsyncHandler<A extends unknown[] = [], R = void> = (...args: A) => void | Promise<R>;
 /** Whether an event handler answered with a promise: the change it made is pending until it settles. */
 export declare function isPromiseLike(value: unknown): value is PromiseLike<unknown>;
 /**
@@ -16,3 +21,21 @@ export declare function usePendingChanges<T, Change>(value: T, apply: (value: T,
         onReject?: (reason: unknown) => void;
     }) => void;
 };
+/**
+ * The keys whose async event is still running (a row being moved, an option being deleted).
+ * `track(key, outcome)` holds the key while a returned promise is pending and returns the outcome
+ * unchanged, so the caller can chain on it; a sync outcome holds nothing.
+ */
+export declare function usePendingKeys<K>(): {
+    pending: ReadonlySet<K>;
+    track: <T>(key: K, outcome: T) => T;
+};
+/**
+ * One async action that runs once at a time (a retry, a reload): `run` calls the latest handler and
+ * ignores calls while its promise is pending; `pending` is `true` until it settles. `run` is
+ * `undefined` without a handler, so the host can hide the action.
+ */
+export declare function usePendingAction<A extends unknown[]>(handler: AsyncHandler<A, unknown> | undefined): {
+    pending: boolean;
+    run: ((...args: A) => void) | undefined;
+};

package/dist/internal/useRangeSelection.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type RangeSelectionOptions<K> = {
+type RangeSelectionOptions<K> = {
     /**
      * The items in their visual order: ranges and drags run over them. A function is read at the
      * moment of the press (items whose order lives in the DOM).
@@ -39,3 +39,4 @@ export declare function useRangeSelection<K>(options: RangeSelectionOptions<K>):
     handlers: RangeSelectionHandlers;
     dragging: boolean;
 };
+export {};

package/dist/layout/app-shell/AppShell.d.ts

@@ -1,7 +1,43 @@
 import * as React from "react";
+/**
+ * The navigation of the shell, as its Sidebar publishes it: what a menu button anywhere in the
+ * shell needs (the menu button of `Page.TopBar`, `Sidebar.Toggle` outside the rail, a BottomNav
+ * «Ещё»).
+ */
+export type AppShellNavState = {
+    /** `id` of the navigation landmark, for `aria-controls`. */
+    navId: string;
+    /** The navigation is an off-canvas panel now (a phone, or `offCanvas="always"`). */
+    offCanvas: boolean;
+    /** The off-canvas panel is open. */
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    /** The navigation is in view: the off-canvas panel open, or the rail expanded. */
+    expanded: boolean;
+    /** Opens or closes the off-canvas panel; on screen, expands or folds the rail. */
+    toggle: () => void;
+};
+type PublishNav = (nav: AppShellNavState | null) => void;
+/**
+ * The navigation of the nearest `AppShell.Root`, as its Sidebar publishes it; `null` outside a
+ * shell or before a Sidebar is in it. For a trigger of the navigation outside the rail.
+ */
+export declare function useAppShellNav(): AppShellNavState | null;
+/** How the Sidebar publishes its navigation into the shell (`null` outside a shell). */
+export declare function useAppShellNavPublisher(): PublishNav | null;
+/**
+ * Starts a frame of its own inside a shell: a preview of a screen (`ExampleFrame`) is not the
+ * page, so a Sidebar in it and the menu button of its top bar stay in the preview instead of
+ * joining the shell around it.
+ */
+export declare function AppShellBoundary({ children }: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export type AppShellRootProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
-    /** Viewport-high shell: only `AppShell.Main` scrolls. Otherwise the document scrolls. */
+    /**
+     * As on `AppShell.Root`: only `<main>` scrolls.
+     */
     fillViewport?: boolean;
 };
 export type AppShellNavProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -14,7 +50,9 @@ declare namespace AppShellNav {
 }
 /**
  * Grid: navigation column | content panel. Everything that is not `AppShell.Nav` goes into the
- * content panel, which is the page itself (the layer around the shell): cards on it are the next layer.
+ * content panel — `AppShell.Main` with the page, and the phone footer — which is the page itself
+ * (the layer around the shell): cards on it are the next layer. The root owns the navigation
+ * state the Sidebar publishes.
  */
 declare function AppShellRoot({ fillViewport, className, children, ...rest }: AppShellRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellRoot {
@@ -28,36 +66,43 @@ declare function AppShellFooter({ className, ...rest }: AppShellFooterProps): im
 declare namespace AppShellFooter {
     var displayName: string;
 }
-/** `full` (default): the whole panel with responsive gutters; `contained`: centered, up to `--prime-layout-content-max-width` (long-read pages). */
-export type AppShellContentWidth = "contained" | "full";
 export type AppShellMainProps = React.HTMLAttributes<HTMLElement> & {
     ref?: React.Ref<HTMLElement>;
-    contentWidth?: AppShellContentWidth;
 };
-/** `<main>` with the canonical gutters; scrolls inside the panel when `fillViewport` is set. */
-declare function AppShellMain({ contentWidth, className, children, ...rest }: AppShellMainProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `<main>`, where the page renders: it hands the page the shell's gutters and top air
+ * (`Page.Root` takes them) and keeps the bottom air; scrolls inside the panel when `fillViewport`
+ * is set, so a sticky `Page.TopBar` sticks to its top.
+ */
+declare function AppShellMain({ className, children, ...rest }: AppShellMainProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellMain {
     var displayName: string;
 }
 export type AppShellTemplateProps = Omit<AppShellRootProps, "children" | "ref"> & {
-    /** Forwarded to the `<main>`. */
     ref?: React.Ref<HTMLElement>;
-    /** Navigation column content, usually `Sidebar.Root`. */
+    /**
+     * Navigation column content; without it the panel takes the full width.
+     */
     nav?: React.ReactNode;
-    /** The top bar of the content panel, an `AppHeader.Root`; no header when omitted. */
-    header?: React.ReactNode;
-    /** `AppShell.Footer` content (`BottomNav`); no footer when omitted. */
+    /**
+     * Footer content (`BottomNav`); no footer when omitted.
+     */
     footer?: React.ReactNode;
+    /**
+     * The page inside Main (`Page.Root`).
+     */
     children?: React.ReactNode;
+    /**
+     * Props for Main (`id`, `tabIndex` for a skip link).
+     */
     mainProps?: Omit<AppShellMainProps, "children" | "ref">;
-    /** Main scrolls back to the top whenever this value changes (pass the router pathname). */
+    /**
+     * Main scrolls back to the top whenever this value changes; pass the router pathname.
+     */
     scrollResetKey?: unknown;
 };
-/**
- * Root + Nav + the header + Main + Footer in one; main scrolls to the top when `scrollResetKey`
- * changes.
- */
-declare function AppShellTemplate({ ref, nav, header, footer, children, mainProps, scrollResetKey, ...rootProps }: AppShellTemplateProps): import("react/jsx-runtime").JSX.Element;
+/** Root + Nav + Main + Footer in one; main scrolls to the top when `scrollResetKey` changes. */
+declare function AppShellTemplate({ ref, nav, footer, children, mainProps, scrollResetKey, ...rootProps }: AppShellTemplateProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppShellTemplate {
     var displayName: string;
 }

package/dist/layout/bottom-nav/BottomNav.d.ts

@@ -4,16 +4,19 @@ export type BottomNavLabels = {
     /** `aria-label` of the `<nav>` landmark. */
     nav: string;
 };
+export declare const BOTTOM_NAV_LABELS: BottomNavLabels;
 export type BottomNavRootProps = React.HTMLAttributes<HTMLElement> & {
-    /** Icons without visible labels; the labels still name the items for screen readers. */
+    /**
+     * Icons without visible labels; the labels stay in the DOM as visually hidden text and name the items.
+     */
     iconOnly?: boolean;
     /**
-     * A glass capsule floating over the content (backdrop blur, inset from the edges) instead of
-     * a flat bar at the edge, with a selection capsule that glides to the current item. It places
-     * itself at the bottom of its positioned container (`AppShell.Footer`), so the page scrolls
-     * under it.
+     * A glass capsule floating over the content at the bottom of its positioned container (`AppShell.Footer`), with a selection capsule gliding under the current item; the page scrolls under it.
      */
     floating?: boolean;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<BottomNavLabels>;
     /** The `<nav>`. */
     ref?: React.Ref<HTMLElement>;
@@ -23,28 +26,35 @@ export type BottomNavRootProps = React.HTMLAttributes<HTMLElement> & {
  * action beside it. Inside `AppShell.Footer` it shows only while the Sidebar rail is off screen;
  * once the rail is on screen, Sidebar navigates.
  */
-declare function BottomNavRoot({ iconOnly, floating, labels, className, children, ...rest }: BottomNavRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomNavRoot({ iconOnly, floating, labels: labelsProp, className, children, ...rest }: BottomNavRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BottomNavRoot {
     var displayName: string;
 }
 export type BottomNavActionProps = Omit<React.ComponentPropsWithoutRef<"button">, "children"> & {
-    /** The glyph, e.g. `<Icon name="action.add" />`. */
+    /**
+     * The glyph, e.g. `<Icon name="action.add" />`.
+     */
     children: React.ReactNode;
-    /** The action has no visible text: `aria-label` names it. */
+    /**
+     * The name of the action: the button has no visible text.
+     */
     "aria-label": string;
     ref?: React.Ref<HTMLButtonElement>;
 };
 /**
  * A round button beside the bar for the screen's main action (create, search, assistant): a
- * `Button shape="circle"` (`l`, neutral) — in a flat bar a muted disk at its edge, in `floating` a
- * glass disk as tall as the capsule (the capsule's own glass, set on the Button by class: Button
- * has no glass look).
+ * `Button shape="circle"` (`l`, neutral) — in a flat bar a solid disk at its edge, in `floating` a
+ * Button `glass` disk as tall as the capsule (the bar gives it its height); the bar draws the rim
+ * and the lift around it.
  */
 declare function BottomNavAction({ className, children, ...rest }: BottomNavActionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BottomNavAction {
     var displayName: string;
 }
 export type BottomNavItemIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /**
+     * The icon, e.g. `<Icon name="nav.home" />`.
+     */
     children: React.ReactNode;
     ref?: React.Ref<HTMLSpanElement>;
 };
@@ -54,11 +64,17 @@ declare namespace BottomNavItemIcon {
     var displayName: string;
 }
 export type BottomNavItemCountProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
-    /** The number (or a short status). */
+    /**
+     * The number (or a short status such as «99+»).
+     */
     children: React.ReactNode;
-    /** Badge hue. Default `red`: a count on a section asks for attention. */
+    /**
+     * Badge hue: a count on a section asks for attention.
+     */
     color?: PaletteColor;
-    /** Badge treatment. Default `solid`. */
+    /**
+     * Badge treatment.
+     */
     variant?: Exclude<Variant, "ghost">;
     /** The Badge `<span>`. */
     ref?: React.Ref<HTMLSpanElement>;
@@ -69,24 +85,44 @@ declare namespace BottomNavItemCount {
     var displayName: string;
 }
 type BottomNavItemOwnProps = {
-    /** Current section: `aria-current="page"`. Links rendered by a router may set it themselves. */
+    /**
+     * Current section: `aria-current="page"`; the icon and the label turn primary (the others are muted) and the glyph sits on a soft pill; floating, the item is in the accent on the selection capsule (the others in full ink).
+     */
     current?: boolean;
+    /**
+     * Not interactive: `disabled` / `aria-disabled`, `data-disabled`, out of the Tab order; an `href` link loses its `href`, an `asChild` child keeps its own and only its clicks are blocked.
+     */
     disabled?: boolean;
-    /** Render the single child element (a router link) as the item; its children are the content. */
+    /**
+     * Renders the single child (e.g. a router `NavLink`) as the item; its children are the label and parts.
+     */
     asChild?: boolean;
-    /** `BottomNav.ItemIcon`, an optional `BottomNav.ItemCount` and the label. */
+    /**
+     * `BottomNav.ItemIcon`, an optional `BottomNav.ItemCount` and a short label (one word).
+     */
     children?: React.ReactNode;
 };
-export type BottomNavItemProps = BottomNavItemOwnProps & Omit<React.ComponentPropsWithoutRef<"button">, keyof BottomNavItemOwnProps> & {
-    /** Renders an `<a>` instead of a `<button>`. */
+export type BottomNavItemProps = BottomNavItemOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof BottomNavItemOwnProps> & {
+    /**
+     * Renders an `<a>` (with `target`, `rel`).
+     */
     href?: string;
+    /**
+     * Where the `<a>` opens (`href` only).
+     */
     target?: string;
+    /**
+     * Relationship of the `<a>` (`href` only).
+     */
     rel?: string;
-    /** The `<a>`, `<button>` or the `asChild` element. */
     ref?: React.Ref<HTMLElement>;
 };
-/** A section of the bar: the icon above a short label, both in the primary color while current. */
-declare function BottomNavItem({ current, disabled, asChild, href, className, children, onClick, type, ref, ...rest }: BottomNavItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A section of the bar: the icon above a short label, both in the primary color while current. A
+ * link (`href`), a button, or the consumer's element (`asChild`, a router link) — the kit's
+ * interactive element with its disabled guard.
+ */
+declare function BottomNavItem({ current, disabled, asChild, href, target, rel, className, children, ...rest }: BottomNavItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BottomNavItem {
     var displayName: string;
 }

package/dist/layout/index.d.ts

@@ -1,8 +1,8 @@
-export type { AppHeaderActionsProps, AppHeaderDescriptionProps, AppHeaderIconProps, AppHeaderLabels, AppHeaderMenuButtonProps, AppHeaderRootProps, AppHeaderSeparatorProps, AppHeaderStartProps, AppHeaderTitleProps, AppHeaderToolsProps, } from "./app-header/AppHeader";
-export { AppHeader } from "./app-header/AppHeader";
-export type { AppShellContentWidth, AppShellFooterProps, AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
-export { AppShell } from "./app-shell/AppShell";
+export type { AppShellFooterProps, AppShellMainProps, AppShellNavProps, AppShellNavState, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
+export { AppShell, useAppShellNav } from "./app-shell/AppShell";
 export type { BottomNavActionProps, BottomNavItemCountProps, BottomNavItemIconProps, BottomNavItemProps, BottomNavLabels, BottomNavRootProps, } from "./bottom-nav/BottomNav";
 export { BottomNav } from "./bottom-nav/BottomNav";
+export type { PageActionsProps, PageBackButtonProps, PageBodyProps, PageCellProps, PageCellRows, PageCellSpan, PageChipsProps, PageDescriptionProps, PageDetailProps, PageGridProps, PageHeaderProps, PageHeadingProps, PageLabels, PageListProps, PageMaxWidth, PageRootProps, PageSectionLayout, PageSectionProps, PageSplitProps, PageTitleProps, PageToolsProps, PageTopBarProps, } from "./page/Page";
+export { Page } from "./page/Page";
 export type { SidebarAccountProps, SidebarBrandLogoProps, SidebarBrandProps, SidebarContentProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemActionProps, SidebarItemCountProps, SidebarItemIconProps, SidebarItemProps, SidebarItemShortcutProps, SidebarLabels, SidebarMode, SidebarRootProps, SidebarSubContentProps, SidebarSubProps, SidebarSubTriggerProps, SidebarToggleProps, } from "./sidebar/Sidebar";
 export { Sidebar, useSidebar } from "./sidebar/Sidebar";