@nxgt/material 3.79.1 → 3.80.0

package/dist/lib/components/ui/layout/landing/site-footer.types.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps, ReactNode } from 'react';
+import { AppShellLinkComponent } from '../app-shell/types.js';
+export type SiteFooterLink = {
+    /** The visible text, already translated. */
+    label: ReactNode;
+    href: string;
+    /** Opens in a new tab with `rel="noopener noreferrer"`. A link to another site (`http(s):`) or an address (`mailto:`, `tel:`) is external without it. */
+    external?: boolean;
+};
+export type SiteFooterGroup = {
+    /** The group's heading, already translated. */
+    title: string;
+    links: SiteFooterLink[];
+};
+export type SiteFooterProps = {
+    /** The brand block, usually an `AppBrand` or a logo with the name. */
+    brand?: ReactNode;
+    /** A line under the brand. */
+    description?: ReactNode;
+    /** Columns of links, each under a heading. */
+    groups?: SiteFooterGroup[];
+    /** The legal line: copyright, company, terms. */
+    legal?: ReactNode;
+    /** Beside the legal line: social links, a language switcher, a theme toggle. */
+    extra?: ReactNode;
+    linkComponent?: AppShellLinkComponent;
+    /** The links' landmark name, already translated. @default "Footer" */
+    label?: string;
+} & Omit<ComponentProps<'footer'>, 'children'>;

package/dist/lib/components/ui/layout/list-details-layout/internal.d.ts

@@ -0,0 +1,2 @@
+export { HISTORY_MARK } from './partials/history-mark.js';
+export { useListDetails } from './partials/list-details-context.js';

package/dist/lib/components/ui/layout/list-details-layout/list-details-layout.d.ts

@@ -1,32 +1,24 @@
-import { ComponentProps } from 'react';
 import { ListDetailsBack } from './partials/list-details-back.js';
-import { ListPosition, ViewState } from './partials/list-details-context.js';
 import { ListDetailsDetails } from './partials/list-details-details.js';
+import { ListDetailsInspector } from './partials/list-details-inspector.js';
+import { ListDetailsAnyLayoutProps } from './partials/list-details-layout.types.js';
 import { ListDetailsList } from './partials/list-details-list.js';
 import { ListDetailsTrigger } from './partials/list-details-trigger.js';
 export { ListDetailsBack, type ListDetailsBackProps, } from './partials/list-details-back.js';
+export type { ListDetailsView, ViewState, } from './partials/list-details-context.js';
 export { useListDetails } from './partials/list-details-context.js';
 export { ListDetailsDetails, type ListDetailsDetailsProps, } from './partials/list-details-details.js';
+export { ListDetailsInspector, type ListDetailsInspectorProps, } from './partials/list-details-inspector.js';
+export type { ListDetailsAnyLayoutProps, ListDetailsInspectorLayoutProps, ListDetailsLayoutProps, } from './partials/list-details-layout.types.js';
 export { ListDetailsList, type ListDetailsListProps, } from './partials/list-details-list.js';
-export { ListDetailsTrigger, type ListDetailsTriggerProps, } from './partials/list-details-trigger.js';
-export interface ListDetailsLayoutProps extends ComponentProps<'div'> {
-    activeView?: ViewState;
-    onActiveViewChange?: (view: ViewState) => void;
-    defaultActiveView?: ViewState;
-    listPosition?: ListPosition;
-    /**
-     * What the phone layout (one pane at a time) follows: `'viewport'`
-     * (default) the window, at 648px or less; `'container'` the layout's own
-     * width, at 648px or less, for a layout in a column, a dialog or a split
-     * pane of a wide window.
-     */
-    breakpoint?: 'viewport' | 'container';
-}
-export declare function ListDetailsLayout({ children, className, activeView: controlledActiveView, onActiveViewChange, defaultActiveView, listPosition, breakpoint, ...props }: ListDetailsLayoutProps): import("react").JSX.Element;
+export { type ListDetailsInspectorTriggerProps, ListDetailsTrigger, type ListDetailsTriggerProps, } from './partials/list-details-trigger.js';
+export { type UseListDetailsParamOptions, useListDetailsParam, } from './partials/use-list-details-param.js';
+export declare function ListDetailsLayout(props: ListDetailsAnyLayoutProps): import("react").JSX.Element;
 export declare namespace ListDetailsLayout {
     var displayName: string;
     var List: typeof ListDetailsList;
     var Details: typeof ListDetailsDetails;
+    var Inspector: typeof ListDetailsInspector;
     var Trigger: typeof ListDetailsTrigger;
     var Back: typeof ListDetailsBack;
 }

package/dist/lib/components/ui/layout/list-details-layout/partials/history-mark.d.ts

@@ -0,0 +1,2 @@
+/** Marks a history entry the layout pushed, so its own Back can take the browser's Back. */
+export declare const HISTORY_MARK = "nxgtListDetails";

package/dist/lib/components/ui/layout/list-details-layout/partials/list-details-context.d.ts

@@ -1,11 +1,27 @@
 import { ReactNode } from 'react';
 export type ViewState = 'list' | 'details';
+/**
+ * The views of a layout that has an `inspector`: the third pane is one more
+ * step after the details on a phone, and open or closed on a wide screen.
+ */
+export type ListDetailsView = ViewState | 'inspector';
 export type ListPosition = 'left' | 'right';
 export interface ListDetailsContextProps {
+    /** The pane shown; `'details'` while the inspector is open (see `inspectorOpen`). */
     activeView: ViewState;
-    setActiveView: (view: ViewState) => void;
+    /** The inspector is open (a layout with the `inspector` prop). */
+    inspectorOpen: boolean;
+    /** `'inspector'` only means something in a layout with the `inspector` prop. */
+    setActiveView: (view: ListDetailsView) => void;
     listPosition: ListPosition;
+    /** One pane at a time: a phone. */
     matches: boolean;
+    /** The layout follows its own width, not the window (`breakpoint="container"`). */
+    container?: boolean;
+    /** The list pane's width in px while it is resizable or `listWidth` is set. */
+    listWidth?: number;
+    /** Set the list pane's width (the separator's keys and drag). */
+    setListWidth?: (width: number) => void;
 }
 /** Children, or a function of the layout's state. */
 export type ListDetailsChildren = ReactNode | ((state: ListDetailsContextProps) => ReactNode);

package/dist/lib/components/ui/layout/list-details-layout/partials/list-details-history.d.ts

@@ -0,0 +1,8 @@
+import { ListDetailsAnyLayoutProps } from './list-details-layout.types.js';
+/**
+ * `ListDetailsLayout` with `history`: the view is a search param, so a step
+ * forward is a history entry and the browser's Back goes a step back. The
+ * layout's own Back (and the inspector's close) take that Back when the
+ * entry before is the layout's, instead of piling entries up.
+ */
+export declare function ListDetailsHistory(props: ListDetailsAnyLayoutProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/list-details-layout/partials/list-details-inspector.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ListDetailsChildren } from './list-details-context.js';
+export type ListDetailsInspectorProps = Omit<ComponentProps<'aside'>, 'children' | 'title'> & {
+    children: ListDetailsChildren;
+    /**
+     * The pane's heading, which also names its landmark. The focus moves to it
+     * when the inspector opens.
+     */
+    title: ReactNode;
+};
+/**
+ * The third pane of a `ListDetailsLayout` with the `inspector` prop, open
+ * while `activeView` is `'inspector'`. From 1280px it sits beside the details;
+ * from the phone width up to that it overlays them (Escape closes it and the
+ * focus goes back to what opened it); on a phone it is one more step after the
+ * details, with a way back to them. It renders nothing while closed.
+ */
+export declare function ListDetailsInspector({ children, className, title, onKeyDown, ...props }: ListDetailsInspectorProps): import("react").JSX.Element | null;
+export declare namespace ListDetailsInspector {
+    var displayName: string;
+}

package/dist/lib/components/ui/layout/list-details-layout/partials/list-details-layout.types.d.ts

@@ -0,0 +1,47 @@
+import { ComponentProps } from 'react';
+import { ListDetailsView, ListPosition, ViewState } from './list-details-context.js';
+interface ListDetailsCommonProps extends Omit<ComponentProps<'div'>, 'children'> {
+    children?: ComponentProps<'div'>['children'];
+    listPosition?: ListPosition;
+    /**
+     * What the phone layout (one pane at a time) follows: `'viewport'`
+     * (default) the window, at 648px or less; `'container'` the layout's own
+     * width, at 648px or less, for a layout in a column, a dialog or a split
+     * pane of a wide window.
+     */
+    breakpoint?: 'viewport' | 'container';
+    /**
+     * Keep the view in the URL's search params (`?view=details`), through
+     * React Router, so the browser's Back button goes from the details to the
+     * list on a phone: `'push'` adds an entry per step, `'replace'` rewrites
+     * the current one. The layout then owns `activeView`; `onActiveViewChange`
+     * is still told. Needs a router above it.
+     */
+    history?: 'push' | 'replace';
+    /** The search param `history` writes, `'view'` by default. */
+    historyParam?: string;
+    /** The list pane's width in px (default `w-80`, 320). */
+    listWidth?: number;
+    /** A separator between the list and the details moves the list's width, 240 to 480px. */
+    resizable?: boolean;
+    /** Asked for every new list width (the separator's keys and drag). */
+    onListWidthChange?: (width: number) => void;
+}
+export interface ListDetailsLayoutProps extends ListDetailsCommonProps {
+    /** Without `inspector` the layout has two views, `'list'` and `'details'`. */
+    inspector?: false;
+    activeView?: ViewState;
+    onActiveViewChange?: (view: ViewState) => void;
+    defaultActiveView?: ViewState;
+}
+/** The layout with its third pane (`ListDetailsLayout.Inspector`) and the `'inspector'` view. */
+export interface ListDetailsInspectorLayoutProps extends ListDetailsCommonProps {
+    /** Enables the third pane and the `'inspector'` view. */
+    inspector: true;
+    activeView?: ListDetailsView;
+    onActiveViewChange?: (view: ListDetailsView) => void;
+    defaultActiveView?: ListDetailsView;
+}
+/** What the component takes: the two-pane props, or the inspector ones. */
+export type ListDetailsAnyLayoutProps = ListDetailsLayoutProps | ListDetailsInspectorLayoutProps;
+export {};

package/dist/lib/components/ui/layout/list-details-layout/partials/list-details-resizer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The list pane's separator: a vertical `separator` that takes the focus, with
+ * its width as `aria-valuenow`. Arrow keys move it by 16px (Shift: 64px) the
+ * way the arrow points, Home and End go to the narrowest and the widest, and a
+ * pointer drag resizes it. It shows on a wide screen only.
+ */
+export declare function ListDetailsResizer({ listId }: {
+    listId: string;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/layout/list-details-layout/partials/list-details-root.d.ts

@@ -0,0 +1,3 @@
+import { ListDetailsAnyLayoutProps } from './list-details-layout.types.js';
+/** The layout without the URL: `ListDetailsLayout` picks it or its history twin. */
+export declare function ListDetailsRoot({ children, className, activeView, onActiveViewChange, defaultActiveView, listPosition, breakpoint, inspector, history: _history, historyParam: _historyParam, listWidth, resizable, onListWidthChange, ...props }: ListDetailsAnyLayoutProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/list-details-layout/partials/list-details-trigger.d.ts

@@ -1,11 +1,20 @@
 import { ButtonProps } from '../../../actions/button/button.js';
-import { ListDetailsChildren, ListDetailsContextProps, ViewState } from './list-details-context.js';
-export interface ListDetailsTriggerProps extends Omit<ButtonProps, 'children' | 'className'> {
-    view: ViewState;
+import { ListDetailsChildren, ListDetailsContextProps, ListDetailsView, ViewState } from './list-details-context.js';
+type TriggerBase = Omit<ButtonProps, 'children' | 'className'> & {
     children: ListDetailsChildren;
     className?: string | ((state: ListDetailsContextProps) => string) | null;
+};
+export interface ListDetailsTriggerProps extends TriggerBase {
+    view: ViewState;
+    inspector?: false;
+}
+/** `view="inspector"` is for a layout with the `inspector` prop, and says so with `inspector`. */
+export interface ListDetailsInspectorTriggerProps extends TriggerBase {
+    view: ListDetailsView;
+    inspector: true;
 }
-export declare function ListDetailsTrigger({ view, children, onClick, className, ...props }: ListDetailsTriggerProps): import("react").JSX.Element;
+export declare function ListDetailsTrigger({ view, inspector: _inspector, children, onClick, className, ...props }: ListDetailsTriggerProps | ListDetailsInspectorTriggerProps): import("react").JSX.Element;
 export declare namespace ListDetailsTrigger {
     var displayName: string;
 }
+export {};

package/dist/lib/components/ui/layout/list-details-layout/partials/use-inspector-focus.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { ListDetailsView } from './list-details-context.js';
+/**
+ * The focus follows the inspector: opening it focuses its heading, and closing
+ * it gives the focus back to what had it when it opened (the button or the
+ * row), when that is still on the page. Nothing moves on the first render.
+ */
+export declare function useInspectorFocus(root: RefObject<HTMLElement | null>, activeView: ListDetailsView): void;

package/dist/lib/components/ui/layout/list-details-layout/partials/use-list-details-param.d.ts

@@ -0,0 +1,26 @@
+import { ListDetailsView } from './list-details-context.js';
+export interface UseListDetailsParamOptions {
+    /** The search param holding the selection, `'item'` by default. */
+    name?: string;
+    /** The view's search param, the layout's `historyParam`: `'view'` by default. */
+    viewName?: string;
+    /** `'push'` (default) adds a history entry per selection; `'replace'` rewrites the current one. */
+    history?: 'push' | 'replace';
+}
+/**
+ * The selected record's id kept in the URL's search params (`?item=ada`), with
+ * the other params left alone, through React Router: `select(id)` sets it,
+ * `select(null)` clears it, and a reload or a shared link opens the same
+ * record. `select(id, { open: 'details' })` also sets the layout's view
+ * (`?view=details`) in the same write, so a row click is one history entry and
+ * Back on a phone returns to the list. Pair it with
+ * `ListDetailsLayout history="push"`, which keeps the view the same way.
+ *
+ * ```tsx
+ * const [id, select] = useListDetailsParam();
+ * <button onClick={() => select(person.id, { open: 'details' })} />
+ * ```
+ */
+export declare function useListDetailsParam({ name, viewName, history, }?: UseListDetailsParamOptions): readonly [string | null, (next: string | null, { open }?: {
+    open?: ListDetailsView;
+}) => void];

package/dist/lib/components/ui/layout/list-details-layout/partials/use-list-details-state.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+import { ListDetailsContextProps, ListDetailsView, ListPosition } from './list-details-context.js';
+type Options = {
+    activeView?: ListDetailsView;
+    onActiveViewChange?: (view: never) => void;
+    defaultActiveView: ListDetailsView;
+    listPosition: ListPosition;
+    breakpoint: 'viewport' | 'container';
+    listWidth?: number;
+    resizable: boolean;
+    onListWidthChange?: (width: number) => void;
+};
+/** The context value of a layout: the view, the breakpoints, the focus moves, the list width. */
+export declare function useListDetailsState(root: RefObject<HTMLElement | null>, o: Options): ListDetailsContextProps;
+export {};

package/dist/lib/components/ui/layout/list-details-layout/partials/use-list-width.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+export declare const LIST_MIN_WIDTH = 240;
+export declare const LIST_MAX_WIDTH = 480;
+export declare const LIST_WIDTH_VAR = "--nxgt-list-width";
+export declare const clampListWidth: (width: number) => number;
+/**
+ * The list pane's width in px. `undefined` while neither `listWidth` nor
+ * `resizable` is set, so the pane keeps its `w-80`. The width reaches the CSS
+ * as a custom property set from script (no `style` attribute, the CSP), so the
+ * server renders the default width and a set width applies right after
+ * hydrating. A `listWidth` that changes replaces what a drag set.
+ */
+export declare function useListWidth(root: RefObject<HTMLElement | null>, listWidth: number | undefined, resizable: boolean, onChange?: (width: number) => void): {
+    listWidth: number | undefined;
+    setListWidth: ((next: number) => void) | undefined;
+};

package/dist/lib/components/ui/layout/list-details-layout/partials/use-pane-focus.d.ts

@@ -1,13 +1,15 @@
 import { RefObject } from 'react';
-import { ViewState } from './list-details-context.js';
+import { ListDetailsView } from './list-details-context.js';
 /**
  * On a phone one pane shows at a time, so the focus must follow the view:
  * opening the details focuses the details pane; coming back focuses the list
- * item that opened them (or the list pane when it is gone). Nothing moves on
- * the first render, on a wide screen, or when the view did not change.
+ * item that opened them (or the list pane when it is gone). An element marked
+ * `data-pane-focus` inside the details takes the focus in place of the pane.
+ * Nothing moves on the first render, on a wide screen, or when the view did
+ * not change.
  * The opener is the last element focused inside the list pane, tracked with
  * `focusin` or, for a tap that focuses nothing (Safari, iOS), `pointerdown`;
  * the last one wins, so it holds whatever changes the view: the context, a
  * controlled `activeView` driven by a URL, or a link row.
  */
-export declare function usePaneFocus(root: RefObject<HTMLElement | null>, activeView: ViewState, matches: boolean): void;
+export declare function usePaneFocus(root: RefObject<HTMLElement | null>, activeView: ListDetailsView, matches: boolean): void;

package/dist/lib/components/ui/layout/navigation-bar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './navigation-bar.js';
+export { BAR_MAX, type BarSplit, splitBarItems } from './navigation-bar.utils.js';
+export type { NavigationBarItemProps } from './partials/navigation-bar-item.js';

package/dist/lib/components/ui/layout/navigation-bar/internal.d.ts

@@ -0,0 +1,4 @@
+export { BarBadge } from './partials/bar-badge.js';
+export { BarBadgeLabel, BarGlyph } from './partials/bar-entry.js';
+export { isCurrent } from './partials/navigation-bar-item.js';
+export { BarMoreTrigger, type MoreTriggerProps, NavigationBarMore, } from './partials/navigation-bar-more.js';

package/dist/lib/components/ui/layout/navigation-bar/navigation-bar.classes.d.ts

@@ -0,0 +1,14 @@
+/** The bar's content height, above the safe-area inset. */
+export declare const NAV_BAR_HEIGHT = "4rem";
+/** What the bar takes at the bottom, the safe-area inset included: `--nxgt-nav-bar` while it shows. */
+export declare const NAV_BAR_ROOM = "calc(4rem + env(safe-area-inset-bottom, 0px))";
+/** The label and the icon pill of an entry, shared by links and « More ». */
+export declare const BAR_ENTRY = "nxgt-plain-link group relative flex h-full min-w-12 flex-1 basis-0 flex-col items-center justify-center gap-1 rounded-none px-1 py-1.5 font-medium text-muted-foreground text-xs outline-none transition-colors data-active:text-foreground data-active:font-semibold focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ring forced-colors:focus-visible:outline-[Highlight]";
+/** The pill behind the icon: grows from the middle when the entry turns active (Expressive). */
+export declare const BAR_INDICATOR = "absolute inset-0 scale-x-50 rounded-full bg-sidebar-active opacity-0 transition-[opacity,transform] duration-(--nxgt-motion-effects-default-duration) ease-(--nxgt-motion-effects-default) group-data-active:scale-x-100 group-data-active:opacity-100 group-active:scale-x-110 motion-reduce:transition-none forced-colors:border forced-colors:border-[Highlight]";
+/**
+ * `--nxgt-nav-bar` for a first paint, before the bar measures itself, at the
+ * sizes the bar shows (whole literals, so Tailwind sees them). The keys are
+ * `phone tablet desktop` as 1/0, as in navigation.utils.
+ */
+export declare const NAV_BAR_VAR: Record<string, string>;

package/dist/lib/components/ui/layout/navigation-bar/navigation-bar.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { AppShellLinkComponent, MenuItem } from '../app-shell/types.js';
+import { NavigationBarItem } from './partials/navigation-bar-item.js';
+export type NavigationBarProps = {
+    /**
+     * The menu: the bar shows 3 to 5 destinations (`bar` and `priority` on a
+     * {@link MenuItem} choose them) and « More » lists the rest. Or pass
+     * {@link NavigationBar.Item}s as `children` to compose it by hand.
+     */
+    items?: MenuItem[];
+    /** Destinations on the bar, « More » included: 3 to 5. @default 5 */
+    max?: number;
+    linkComponent?: AppShellLinkComponent;
+    /** The landmark's accessible name, already translated. @default "Navigation" */
+    label?: string;
+    /** Hand-made entries, after those of `items`. */
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * The bottom navigation bar of a phone: a `nav` fixed to the bottom edge with
+ * 3 to 5 destinations, each an icon in its indicator pill with its label
+ * always visible, an optional badge, `aria-current="page"` on the current one
+ * and 48px or taller targets. The entries it leaves out open from « More ».
+ *
+ * It shows at every width: hide it with a breakpoint class (`md:hidden`), as
+ * `ActivityLayout`'s `navigation="bar"` does, and `display: none` also takes
+ * it out of the tab order and the accessibility tree. While it shows it sets
+ * `--nxgt-nav-bar` on the document root, so FabDock, toasts, the mini player
+ * and `StickyActionBar` keep clear of it.
+ */
+export declare function NavigationBar({ items, max, linkComponent, label, children, className, }: NavigationBarProps): import("react").JSX.Element;
+export declare namespace NavigationBar {
+    var Item: typeof NavigationBarItem;
+}

package/dist/lib/components/ui/layout/navigation-bar/navigation-bar.utils.d.ts

@@ -0,0 +1,19 @@
+import { MenuItem } from '../app-shell/types.js';
+/** Destinations a bar shows at most, « More » included (Material 3: 3 to 5). */
+export declare const BAR_MAX = 5;
+export type BarSplit = {
+    /** The entries the bar shows, in menu order. */
+    bar: MenuItem[];
+    /** The others, in menu order: the « More » sheet lists them. */
+    more: MenuItem[];
+};
+/**
+ * Which entries the bar keeps and which go under « More ».
+ *
+ * An entry with `bar: false` never shows on the bar. When some entries say
+ * `bar: true`, only those are candidates; otherwise every other entry is. When
+ * the candidates all fit and nothing is left over, they are the bar; else the
+ * bar keeps `max - 1` of them and « More » takes the room of the last slot.
+ * The `priority` (higher stays, unset is 0, ties keep menu order) picks which.
+ */
+export declare function splitBarItems(items: MenuItem[], max?: number): BarSplit;

package/dist/lib/components/ui/layout/navigation-bar/partials/bar-badge.d.ts

@@ -0,0 +1,5 @@
+import { ResolvedMenuBadge } from '../../sidebar/sidebar-menu-item-badge.js';
+/** The badge on the icon's top-right corner: a dot or a count, hidden from assistive technology (the link's name carries it). */
+export declare function BarBadge({ badge }: {
+    badge: ResolvedMenuBadge;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-bar/partials/bar-entry.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../primitives/icon/icon.js';
+/** The pill, the icon and the badge of an entry. */
+export declare function BarGlyph({ icon, badge, }: {
+    icon: IconProps['name'];
+    badge?: ReactNode;
+}): import("react").JSX.Element;
+/** What the badge adds to the entry's accessible name: ", 2 new". */
+export declare function BarBadgeLabel({ badge, badgeLabel, }: {
+    badge?: ReactNode;
+    badgeLabel?: string;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/layout/navigation-bar/partials/navigation-bar-item.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../primitives/icon/icon.js';
+import { AppShellLinkComponent } from '../../app-shell/types.js';
+export type NavigationBarItemProps = {
+    /** Where the destination goes. */
+    href: string;
+    icon: IconProps['name'];
+    /** The visible label, already translated: always shown under the icon. */
+    children: ReactNode;
+    /** Whether this is the current destination. Unset: the location starts with `href`. */
+    active?: boolean;
+    /** `true` a dot, a number a count ("99+" past 99), a node as it is; read in the link's name. */
+    badge?: number | boolean | ReactNode;
+    /** Replaces the badge's text in the link's name, already translated. */
+    badgeLabel?: string;
+    linkComponent?: AppShellLinkComponent;
+    className?: string;
+};
+/** Whether `pathname` is `href` or below it (`/` only matches itself). */
+export declare function isCurrent(pathname: string, href: string): boolean;
+/** One destination of the bar: an icon in its indicator pill, the label under it, `aria-current="page"` when active. */
+export declare function NavigationBarItem({ href, icon, children, active, badge, badgeLabel, linkComponent, className, }: NavigationBarItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-bar/partials/navigation-bar-more.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps, ComponentType } from 'react';
+import { AppShellLinkComponent, MenuItem } from '../../app-shell/types.js';
+/** What a « More » trigger receives: the props the sheet's trigger needs spread on its button, the label and whether the current page is under it. */
+export type MoreTriggerProps = Omit<ComponentProps<'button'>, 'children'> & {
+    active: boolean;
+    label: string;
+};
+/** The bar's « More » entry: the ellipsis in its indicator pill, the label under it. */
+export declare function BarMoreTrigger({ active, label, ...props }: MoreTriggerProps): import("react").JSX.Element;
+/**
+ * The last slot of the bar: « More » opens a sheet from the bottom with the
+ * entries the bar leaves out. It is the navigation sheet's state (closes on a
+ * followed link or a new location, focus returns to this button) with the
+ * entries listed from the bottom edge.
+ */
+export declare function NavigationBarMore({ items, active, linkComponent, isActive, trigger: Trigger, }: {
+    items: MenuItem[];
+    /** Whether one of the entries under « More » is the current page. */
+    active: boolean;
+    linkComponent?: AppShellLinkComponent;
+    isActive: (url: string) => boolean;
+    /** Draws the trigger: the floating navigation toolbar passes its round icon. @default BarMoreTrigger */
+    trigger?: ComponentType<MoreTriggerProps>;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-bar/use-nav-bar-inset.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+/** Marks `el` shown (taking `room`) or hidden, and publishes the variable. Exported for specs. */
+export declare function setBarVisible(el: HTMLElement, shown: boolean, room?: string): void;
+/**
+ * Publishes the bar's room as `--nxgt-nav-bar` on the document root while a
+ * bar shows, and removes it once none does (a breakpoint class hides one, an
+ * unmount removes it): FabDock, the toaster, the mini player and
+ * `StickyActionBar` read it, portals included. `room` is what the bar takes
+ * (the floating navigation toolbar's is its own, taller by its gap). CSS variables only, set from
+ * script (no `style` attribute).
+ */
+export declare function useNavBarInset(ref: RefObject<HTMLElement | null>, room?: string): void;

package/dist/lib/components/ui/layout/navigation-drawer/index.d.ts

@@ -0,0 +1,5 @@
+export * from './navigation-drawer.js';
+export type { NavigationDrawerItemProps } from './partials/navigation-drawer-item.js';
+export { NavigationDrawerItem } from './partials/navigation-drawer-item.js';
+export type { NavigationDrawerSectionProps } from './partials/navigation-drawer-section.js';
+export { NavigationDrawerSection } from './partials/navigation-drawer-section.js';

package/dist/lib/components/ui/layout/navigation-drawer/navigation-drawer.classes.d.ts

@@ -0,0 +1,9 @@
+/** The standard drawer: 20rem wide, its destinations stacked down the start edge. */
+export declare const DRAWER_ROOT = "flex h-full min-h-0 w-80 max-w-full shrink-0 flex-col gap-1 overflow-y-auto overflow-x-hidden px-3 py-2";
+/** The modal drawer's panel: the same column, in the sheet. */
+export declare const DRAWER_MODAL_BODY = "h-full w-full px-0";
+/** One destination: a row of 56px, the whole row tinted when current (Expressive). */
+export declare const DRAWER_ITEM = "nxgt-plain-link group relative flex h-14 shrink-0 items-center gap-3 rounded-full px-4 font-medium text-muted-foreground text-sm outline-none transition-colors hover:bg-accent/60 data-active:font-semibold data-active:text-foreground focus-visible:outline-2 focus-visible:outline-ring forced-colors:focus-visible:outline-[Highlight]";
+/** The tint behind the row: the bar's indicator, which grows from the middle. */
+export declare const DRAWER_ROW = "absolute inset-0 scale-x-50 rounded-full bg-sidebar-active opacity-0 transition-[opacity,transform] duration-(--nxgt-motion-effects-default-duration) ease-(--nxgt-motion-effects-default) group-data-active:scale-x-100 group-data-active:opacity-100 group-active:scale-x-110 motion-reduce:transition-none forced-colors:border forced-colors:border-[Highlight]";
+export declare const DRAWER_HEADLINE = "px-4 pt-4 pb-2 font-medium text-muted-foreground text-xs tracking-wide";

package/dist/lib/components/ui/layout/navigation-drawer/navigation-drawer.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { AppShellLinkComponent, MenuItem } from '../app-shell/types.js';
+import { NavigationDrawerItem } from './partials/navigation-drawer-item.js';
+import { NavigationDrawerModalProps } from './partials/navigation-drawer-modal.js';
+import { NavigationDrawerSection } from './partials/navigation-drawer-section.js';
+export type NavigationDrawerBaseProps = {
+    /**
+     * The menu. Entries are listed in sections by their `group` (the ones
+     * without a group first, no headline); entries with `footer: true` sit at
+     * the bottom.
+     */
+    items?: MenuItem[];
+    /** A block above the destinations: the app's brand, a context line. */
+    header?: ReactNode;
+    linkComponent?: AppShellLinkComponent;
+    /** The landmark's accessible name, already translated. @default "Navigation" */
+    label?: string;
+    /** Hand-made sections (`NavigationDrawer.Section`), after those of `items`. */
+    children?: ReactNode;
+    className?: string;
+};
+export type NavigationDrawerProps = NavigationDrawerBaseProps & (({
+    variant?: 'standard';
+} & {
+    [K in keyof NavigationDrawerModalProps]?: never;
+}) | ({
+    variant: 'modal';
+} & NavigationDrawerModalProps));
+/**
+ * The navigation drawer (Material 3 Expressive): a `nav` of destinations in
+ * sections, each a 56px row with an icon, a label and an optional badge read
+ * in the link's name; `aria-current="page"` marks the current one and the row
+ * is tinted.
+ *
+ * `variant="standard"` (the default) is a permanent column, 20rem wide and as
+ * tall as its parent. `variant="modal"` shows the same column in a sheet over
+ * the page, opened by `trigger` or controlled with `open`, and closing when a
+ * link is followed. Both need a React Router context to read the location.
+ * `ActivityLayout`'s `navigation="drawer"` draws the standard one.
+ */
+export declare function NavigationDrawer(props: NavigationDrawerProps): import("react").JSX.Element;
+export declare namespace NavigationDrawer {
+    var Section: typeof NavigationDrawerSection;
+    var Item: typeof NavigationDrawerItem;
+}

package/dist/lib/components/ui/layout/navigation-drawer/navigation-drawer.utils.d.ts

@@ -0,0 +1,14 @@
+import { MenuItem } from '../app-shell/types.js';
+export type DrawerGroup = {
+    headline?: string;
+    items: MenuItem[];
+};
+/**
+ * The menu as sections: the entries without a `group` first, then one section
+ * per `group` in order of first appearance. Entries with `footer: true` are
+ * returned apart, for the drawer's bottom.
+ */
+export declare function groupItems(items: MenuItem[]): {
+    groups: DrawerGroup[];
+    footer: MenuItem[];
+};

package/dist/lib/components/ui/layout/navigation-drawer/partials/navigation-drawer-body.d.ts

@@ -0,0 +1,3 @@
+import { NavigationDrawerBaseProps } from '../navigation-drawer.js';
+/** The drawer's column: the header, the sections of `items`, the sections given as children, the footer entries. */
+export declare function NavigationDrawerBody({ items, header, label, linkComponent, children, className, }: NavigationDrawerBaseProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-drawer/partials/navigation-drawer-item.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../primitives/icon/icon.js';
+import { AppShellLinkComponent } from '../../app-shell/types.js';
+export type NavigationDrawerItemProps = {
+    /** Where the destination goes. */
+    href: string;
+    icon: IconProps['name'];
+    /** The visible label, already translated. */
+    children: ReactNode;
+    /** Whether this is the current destination. Unset: the location starts with `href`. */
+    active?: boolean;
+    /** `true` a dot, a number a count ("99+" past 99), a node as it is; ends the row and is read in the link's name. */
+    badge?: number | boolean | ReactNode;
+    /** Replaces the badge's text in the link's name, already translated. */
+    badgeLabel?: string;
+    linkComponent?: AppShellLinkComponent;
+    className?: string;
+};
+/** One destination of the drawer: an icon and a label in a 56px row, `aria-current="page"` when active. */
+export declare function NavigationDrawerItem({ href, icon, children, active, badge, badgeLabel, linkComponent, className, }: NavigationDrawerItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-drawer/partials/navigation-drawer-modal.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { NavigationDrawerBaseProps } from '../navigation-drawer.js';
+export type NavigationDrawerModalProps = {
+    /** Open while true (controlled). Unset: the drawer manages itself, opened by `trigger`. */
+    open?: boolean;
+    /** Asked for every change: the trigger, Escape, the scrim, a followed link, a new location. */
+    onOpenChange?: (open: boolean) => void;
+    /** The element that opens the drawer, usually a menu `IconButton`. */
+    trigger?: ReactNode;
+};
+/**
+ * The modal drawer: the standard drawer in a `Sheet` from the start edge. It
+ * shares the app shell's menu sheet logic (`useNavigationSheet`): a followed
+ * link and a new location close it, and focus goes to the page or back to the
+ * trigger.
+ */
+export declare function NavigationDrawerModal({ open, onOpenChange, trigger, ...drawer }: NavigationDrawerBaseProps & NavigationDrawerModalProps): import("react").JSX.Element;