@ssa-ui-kit/core 3.21.3 → 3.22.1

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -3,9 +3,13 @@ import { ButtonGroupProps } from './types';
  * ButtonGroup - A row of mutually exclusive buttons.
  *
  * Two ways to declare the buttons:
- * - **Composed** — `ButtonGroupButton` children. Use when a button needs an
- *   icon or custom markup.
- * - **Data-driven** — the `items` prop. Compact, but limited to plain labels.
+ * - **Composed** — `ButtonGroupButton` children. Use when a button needs
+ *   custom markup.
+ * - **Data-driven** — the `items` prop. Compact, and enough for a label, an
+ *   icon, or both.
+ *
+ * A button shows whatever it is given: `text` alone, `icon` alone (square, and
+ * labelled by `ariaLabel`), or the two together.
  *
  * Selection can be controlled (`value`) or left to the group (`defaultValue`).
  * Either accepts a bare `id` or a whole item.

package/dist/components/ButtonGroup/ButtonGroupButton.d.ts

@@ -3,8 +3,8 @@ import { ButtonGroupButtonProps } from './types';
  * ButtonGroupButton - One button inside a composed `ButtonGroup`.
  *
  * Reads selection state from the enclosing group, so it only needs an `id`.
- * Use this instead of the group's `items` prop when a button needs an icon,
- * custom markup, or anything else `ButtonGroupItem` cannot express.
+ * Use this instead of the group's `items` prop when a button needs custom
+ * markup or anything else `ButtonGroupItem` cannot express.
  *
  * @category Form Controls
  * @subcategory Action
@@ -13,10 +13,20 @@ import { ButtonGroupButtonProps } from './types';
  * ```tsx
  * <ButtonGroup value={period} onClick={({ id }) => setPeriod(id)}>
  *   <ButtonGroupButton id="24h">24h</ButtonGroupButton>
- *   <ButtonGroupButton id="7d">
- *     <Icon name="calendar" size={14} /> 7 days
+ *   <ButtonGroupButton id="7d" icon={<Icon name="calendar" size={24} />}>
+ *     7 days
  *   </ButtonGroupButton>
  * </ButtonGroup>
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon-only. `aria-label` is the button's only accessible name.
+ * <ButtonGroupButton
+ *   id="list"
+ *   icon={<Icon name="bulleted-list" size={24} />}
+ *   aria-label="List view"
+ * />
+ * ```
  */
-export declare const ButtonGroupButton: ({ id, children, text, disabled, onClick, className, }: ButtonGroupButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ButtonGroupButton: ({ id, children, icon, text, "aria-label": ariaLabel, disabled, onClick, className, }: ButtonGroupButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ButtonGroup/ButtonGroupButtonBase.d.ts

@@ -7,7 +7,18 @@ interface ButtonGroupButtonBaseProps {
     buttonStyles?: SerializedStyles;
     className?: string;
     children?: ReactNode;
+    icon?: ReactNode;
+    ariaLabel?: string;
 }
+/**
+ * Whether this button shows a label at all. `false` and `null` are what a
+ * `cond && <span/>` child collapses to, and an empty string is what the `items`
+ * path passes for an item with no `text` — none of them are a label.
+ *
+ * Exported so the `items` path decides what counts as a label the same way this
+ * one does: a button that renders as icon-only must also report itself as one.
+ */
+export declare const hasLabel: (children: ReactNode) => boolean;
 /**
  * The button markup shared by both of `ButtonGroup`'s APIs.
  *
@@ -17,7 +28,12 @@ interface ButtonGroupButtonBaseProps {
  * variant, the `active` class the styles key off, `aria-pressed` — lives here
  * once.
  *
+ * The three content modes are derived here, from which props are set rather
+ * than by inspecting what `children` renders to: an opaque `ReactNode` cannot
+ * be told apart from a label, so a component that happens to render an icon
+ * would otherwise silently change the button's shape.
+ *
  * Internal: not exported from the package.
  */
-export declare const ButtonGroupButtonBase: ({ isActive, disabled, onClick, buttonStyles, className, children, }: ButtonGroupButtonBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ButtonGroupButtonBase: ({ isActive, disabled, onClick, buttonStyles, className, children, icon, ariaLabel, }: ButtonGroupButtonBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ButtonGroup/styles.d.ts

@@ -1,2 +1,24 @@
 import { Theme } from '@emotion/react';
+/**
+ * Figma: PeopleOps → Competency Wizard (node 11999:36608 / 11999:36625).
+ *
+ * The group is one flat 40px-tall strip: 8px radius on the outer corners only,
+ * 1px seams between buttons, and two greys — `secondary.light` at rest,
+ * `secondary.main` for the selected button. Hover/focus go one step darker
+ * (`secondary.dark`) in both states; the design has no hover spec, so this
+ * keeps the variant's own behaviour rather than inventing a colour.
+ *
+ * Selection is marked by colour alone. The Figma layers also carry a larger,
+ * heavier face on the selected label (14px/600 against 13.33px/500), but
+ * applying it resizes the button as the selection moves, so the strip visibly
+ * jumps — and at this size the states read as a colour difference anyway.
+ */
 export declare const ButtonItem: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/**
+ * Icon-only: the label padding collapses to the symmetric 8px of the design,
+ * leaving `min-width` above to square the box off.
+ */
+export declare const IconOnlyItem: import("@emotion/react").SerializedStyles;
+export declare const IconSlot: import("@emotion/react").SerializedStyles;
+/** 6px, matching `Button`'s own icon slots. */
+export declare const IconSlotWithLabel: import("@emotion/react").SerializedStyles;

package/dist/components/ButtonGroup/types.d.ts

@@ -2,7 +2,18 @@ import { ReactNode } from 'react';
 import { SerializedStyles } from '@emotion/react';
 export type ButtonGroupItem = {
     id: string | number;
+    /** Visible label. */
     text: string;
+    /**
+     * Leading icon, rendered before the label. An item with an `icon` and no
+     * `text` is an icon-only button: square, and labelled by `ariaLabel`.
+     */
+    icon?: ReactNode;
+    /**
+     * Accessible name. Only needed for an icon-only item, which has no text for
+     * a screen reader to announce.
+     */
+    ariaLabel?: string;
     /** Renders this item's button as disabled. */
     disabled?: boolean;
     /**
@@ -10,17 +21,29 @@ export type ButtonGroupItem = {
      */
     isDisabled?: boolean;
 };
+/**
+ * What the `items` prop accepts: a `ButtonGroupItem` whose `text` may be
+ * omitted — but only meaningfully so when `icon` is set, which is what makes
+ * the button icon-only.
+ *
+ * `onClick` still reports a full `ButtonGroupItem`, so handlers never have to
+ * narrow: an item without `text` comes back with its `ariaLabel` in that slot
+ * (or `''`), and every other field is passed through untouched.
+ */
+export type ButtonGroupItemInput = Omit<ButtonGroupItem, 'text'> & {
+    text?: string;
+};
 /**
  * A selection, expressed either as the item itself or — usually more
  * convenient — as just its `id`. The group only ever compares ids, so the two
  * forms are equivalent.
  */
-export type ButtonGroupValue = ButtonGroupItem | ButtonGroupItem['id'];
+export type ButtonGroupValue = ButtonGroupItemInput | ButtonGroupItem['id'];
 export interface ButtonGroupProps {
     /**
      * Buttons to render, as `ButtonGroupButton` children. When provided, `items`
-     * is ignored — use this when a button needs an icon, custom markup, or
-     * anything else `ButtonGroupItem` cannot express.
+     * is ignored — use this when a button needs custom markup or anything else
+     * `ButtonGroupItem` cannot express.
      *
      * Note that an uncontrolled group in children mode starts with **nothing**
      * selected; pass `defaultValue` to preselect. (The `items` API preselects the
@@ -30,7 +53,7 @@ export interface ButtonGroupProps {
     /**
      * Buttons to render, as data. Ignored when `children` are provided.
      */
-    items?: Array<ButtonGroupItem>;
+    items?: Array<ButtonGroupItemInput>;
     /**
      * Active selection, for the controlled pattern. When provided, the parent
      * owns the selection and the group only reports intent through `onClick`.
@@ -68,8 +91,8 @@ export interface ButtonGroupProps {
      * In children mode the group cannot see an item list, so it reports
      * `{ id, text, disabled }` assembled from the clicked `ButtonGroupButton`'s
      * props — `id` is always accurate, `text` is only populated when the button's
-     * content is a plain string or its `text` prop is set. Prefer reading `id`,
-     * or give each button its own `onClick`.
+     * content is a plain string, or its `text` / `aria-label` prop is set. Prefer
+     * reading `id`, or give each button its own `onClick`.
      */
     onClick?: (item: ButtonGroupItem) => void;
     buttonStyles?: SerializedStyles;
@@ -77,13 +100,28 @@ export interface ButtonGroupProps {
 export interface ButtonGroupButtonProps {
     /** Identifies this button within the group; matched against `value`. */
     id: ButtonGroupItem['id'];
-    /** Button content — text, an icon, or any markup. */
+    /** Button content — text or any markup. Omit it for an icon-only button. */
     children?: ReactNode;
+    /**
+     * Leading icon, rendered before `children`. On its own — no children — it
+     * makes the button icon-only: square, and labelled by `aria-label`.
+     *
+     * Prefer this over passing an icon inside `children`, which the group cannot
+     * tell apart from a label and so lays out as text.
+     */
+    icon?: ReactNode;
     /**
      * Plain-text label for this button, used when the group reports the clicked
      * item through its `onClick`. Only needed when `children` is not a string.
+     * Not rendered — pass visible text as `children`.
      */
     text?: string;
+    /**
+     * Accessible name. Required for an icon-only button, which has no text for a
+     * screen reader to announce; also used as the `onClick` label when `text`
+     * and a string child are both absent.
+     */
+    'aria-label'?: string;
     /** Renders this button as disabled. */
     disabled?: boolean;
     /**

package/dist/components/Card/Card.d.ts

@@ -1,3 +1,63 @@
 import { CardProps } from './types';
+/**
+ * Card - Elevated surface that groups related content.
+ *
+ * ### Composition
+ * `Card` provides the surface, 20px padding and a white rounded background, and
+ * stacks its children in a centred column. It renders no title of its own —
+ * build the inside from the sibling components:
+ *
+ * ```
+ * Card
+ * ├── CardHeader   — title row, optional overhanging icon
+ * └── CardContent  — padded body, row or column
+ * ```
+ *
+ * All three are separate top-level exports rather than `Card.Header`-style
+ * statics, so import each one you use. Both are optional — a `Card` wrapping
+ * plain children is valid.
+ *
+ * ### `onClick` changes the rendered element
+ * Without `onClick` a `Card` is a `div`. **With `onClick` it renders a
+ * `button`**, so it becomes focusable and Enter/Space activate it. That is the
+ * accessible behaviour for a clickable card, but it also means button UA styles
+ * apply and the card can no longer legally contain another button or link.
+ * If you need interactive controls inside the card, leave `onClick` off and put
+ * the handler on a control within it.
+ *
+ * ### Elevation
+ * Cards carry a shadow by default; `noShadow` flattens it. There is no numeric
+ * elevation scale and no outlined variant — for a bordered look, apply a border
+ * through `css`.
+ *
+ * @category Components
+ * @subcategory Layout
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>Team capacity</CardHeader>
+ *   <CardContent>
+ *     <Typography variant="body1">14 of 20 seats filled</Typography>
+ *   </CardContent>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Activatable card — renders as a <button>, so no controls inside
+ * <Card onClick={() => navigate(`/people/${id}`)}>
+ *   <CardContent>{fullName}</CardContent>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Flat card sitting inside an already-elevated panel
+ * <Card noShadow css={{ width: '100%' }}>
+ *   <CardContent direction="column">{fields}</CardContent>
+ * </Card>
+ * ```
+ */
 declare const Card: ({ children, onClick, ...props }: CardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Card;

package/dist/components/Card/types.d.ts

@@ -1,7 +1,20 @@
 import { CommonProps } from '../../types/emotion';
 export interface CardProps extends CommonProps {
+    /**
+     * Drops the drop shadow, leaving a flat surface. Cards are elevated by
+     * default — there is no numeric elevation scale.
+     */
     noShadow?: boolean;
+    /**
+     * Card body. Usually `CardHeader` followed by `CardContent`, but any content
+     * is accepted.
+     */
     children: React.ReactNode;
     className?: string;
+    /**
+     * Makes the whole card activatable. Passing this **changes the rendered
+     * element from `div` to `button`**, which brings focus and keyboard
+     * activation with it — see the note on the component.
+     */
     onClick?: () => void;
 }

package/dist/components/CardContent/CardContent.d.ts

@@ -1,7 +1,12 @@
 import { CommonProps } from '../../types/emotion';
 export interface CardProps extends CommonProps {
+    /** Body content of the card. */
     children: React.ReactNode;
     style?: React.CSSProperties;
+    /**
+     * `flex-direction` for the body. Defaults to a row, so vertically stacked
+     * content needs `"column"`.
+     */
     direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
     className?: string;
     /** Id of the element labelling this content region. */
@@ -15,5 +20,46 @@ export interface CardProps extends CommonProps {
     ariaLabelledby?: string;
     role?: string;
 }
+/**
+ * CardContent - Padded body region of a `Card`.
+ *
+ * Place it inside a `Card`, after `CardHeader` when there is one. The padding
+ * comes from the `Card` itself; what `CardContent` adds is the layout.
+ *
+ * ### It spreads its children apart
+ * The body is a flex container with `justify-content: space-between`, so two
+ * children sit at opposite ends rather than next to each other — handy for a
+ * label/value row, surprising if you expected them adjacent. `direction` maps
+ * to `flex-direction` and defaults to `row`, so stacked content needs
+ * `direction="column"` (which also switches `align-items` from `center` to
+ * `normal`, letting children stretch to full width).
+ *
+ * ### Labelling
+ * When you give the region a `role`, name it with `aria-labelledby` pointing at
+ * the id of the heading in `CardHeader`. (`ariaLabelledby` is the deprecated
+ * spelling and is removed next major.)
+ *
+ * @category Components
+ * @subcategory Layout
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>Recent activity</CardHeader>
+ *   <CardContent direction="column">{rows}</CardContent>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Named region, labelled by the header's heading
+ * <Card>
+ *   <CardHeader><h3 id="capacity-title">Capacity</h3></CardHeader>
+ *   <CardContent role="region" aria-labelledby="capacity-title">
+ *     {chart}
+ *   </CardContent>
+ * </Card>
+ * ```
+ */
 declare const CardContent: ({ children, "aria-labelledby": ariaLabelledbyNative, ariaLabelledby, ...props }: CardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default CardContent;

package/dist/components/CardHeader/CardHeader.d.ts

@@ -1,8 +1,50 @@
 import { CommonProps } from '../../types/emotion';
 export interface CardProps extends CommonProps {
+    /** Header content — normally the card title. */
     children: React.ReactNode;
+    /**
+     * Badge rendered overhanging the header's top-left corner, outside the card
+     * bounds. For an icon inline with the title, put it in `children` instead.
+     */
     icon?: React.ReactNode;
+    /** Removes the header's background fill. */
     transparent?: boolean;
 }
+/**
+ * CardHeader - Title row for a `Card`.
+ *
+ * Place it as the first child of a `Card`, above `CardContent`.
+ *
+ * ### The `icon` slot overhangs the card
+ * `icon` is positioned outside the header's top-left corner, so it deliberately
+ * bleeds past the card edge as a badge. It is not an inline leading icon — for
+ * that, put an `Icon` in `children` alongside the title text. Because it
+ * overhangs, a `Card` with `overflow: hidden` will clip it.
+ *
+ * @category Components
+ * @subcategory Layout
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>Upcoming events</CardHeader>
+ *   <CardContent>{list}</CardContent>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Overhanging badge; the parent Card must not clip its overflow
+ * <CardHeader icon={<Icon name="calendar" size={24} />}>This week</CardHeader>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Inline icon next to the title — plain children, not the icon slot
+ * <CardHeader>
+ *   <Icon name="information" size={16} /> Payroll notes
+ * </CardHeader>
+ * ```
+ */
 declare const CardHeader: ({ children, icon, transparent, ...props }: CardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default CardHeader;

package/dist/components/CollapsibleNavBar/CollapsibleNavBar.d.ts

@@ -1,5 +1,38 @@
 import { CollapsibleNavBarExtendedProps } from './types';
 /**
- * UI Component that shows the collapsible navigation bar
+ * CollapsibleNavBar — the app sidebar: a logo, a menu, and three layouts.
+ *
+ * Below `md` it is a full-screen overlay behind a hamburger; from `md` it is
+ * an 85px rail of icons whose sub-routes open as popover flyouts; from `lg` it
+ * expands to full rows. Which layout is showing is CSS, driven by a hidden
+ * checkbox, so the DOM is the same in all three.
+ *
+ * The menu itself is a {@link TreeView} in `list` semantics — this component
+ * supplies the routing: resolving each item's `to`, deriving the active row
+ * from the current location, and closing the mobile overlay on navigation.
+ * Items are one or two levels; a group is an item with `items`.
+ *
+ * Must be rendered inside a react-router router.
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleNavBar
+ *   renderLogo={<Logo />}
+ *   items={[
+ *     { path: '', iconName: 'home', iconSize: 20, title: 'Dashboard' },
+ *     {
+ *       prefix: 'statistics/',
+ *       iconName: 'chart',
+ *       iconSize: 22,
+ *       title: 'Statistics',
+ *       items: [
+ *         { path: 'balance', title: 'Balance' },
+ *         { path: 'orders', title: 'Orders' },
+ *       ],
+ *     },
+ *   ]}
+ *   onChange={(isExpanded) => console.log(isExpanded)}
+ * />
+ * ```
  */
-export declare const CollapsibleNavBar: ({ items, renderLogo, theme, subMenuMaxWidth, showIconTooltip, className, useMatchPattern, onChange, exactMatch, defaultExpanded, }: CollapsibleNavBarExtendedProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CollapsibleNavBar: ({ items, renderLogo, header, theme, activeColor, subMenuMaxWidth, showIconTooltip, className, useMatchPattern, onChange, exactMatch, defaultExpanded, }: CollapsibleNavBarExtendedProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/CollapsibleNavBar/components/NavHeader.d.ts

@@ -0,0 +1,18 @@
+import { CollapsibleNavBarHeader } from '../types';
+/**
+ * The panel's header: a headline, and optionally a picture and a person.
+ *
+ * Covers the three variants in the design — headline only, headline with a
+ * large picture above the name, and headline with a small avatar inline
+ * beside it — from one shape, by leaving out whichever parts aren't given.
+ * The whole block is hidden in the collapsed rail, where there is no room
+ * for it.
+ */
+/**
+ * Whether a header has anything to show. Shared with `CollapsibleNavBar`,
+ * which drops the logo's top margin off the menu only when the header is
+ * actually rendered — `header={{}}`, or one whose fields are all conditionally
+ * undefined, must leave the spacing alone.
+ */
+export declare const hasHeaderContent: (header?: CollapsibleNavBarHeader) => boolean;
+export declare const NavHeader: ({ title, name, avatar, image, }: CollapsibleNavBarHeader) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/CollapsibleNavBar/components/NavPopoverContent.d.ts

@@ -0,0 +1,12 @@
+import type { TreeItemLevel2 } from '../../TreeView';
+import { NavItemMeta } from '../navItems';
+/**
+ * A group's children, as shown in the collapsed rail's flyout.
+ *
+ * The rail hides the in-place subtree, so this is the only way to reach a
+ * sub-route while the nav is collapsed.
+ */
+export declare const NavPopoverContent: ({ items, onClick, }: {
+    items: TreeItemLevel2<NavItemMeta>[];
+    onClick?: () => void;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/CollapsibleNavBar/components/NavTree.d.ts

@@ -0,0 +1,22 @@
+import { NavTreeItem } from '../navItems';
+import { CollapsibleNavBarExtendedProps } from '../types';
+/**
+ * The nav's menu, rendered by `TreeView`.
+ *
+ * `TreeView` owns structure, indentation, expansion and the `li`s; this module
+ * owns everything routing-shaped — resolving `to`, deriving the active rows
+ * from the location, and the collapsed-rail popover.
+ */
+export declare const NavTree: ({ items, activeColor, useMatchPattern, onNavigate, expandedIds, onExpandedIdsChange, }: {
+    items: NavTreeItem[];
+    activeColor?: string;
+    useMatchPattern?: CollapsibleNavBarExtendedProps["useMatchPattern"];
+    onNavigate: () => void;
+    /**
+     * Expansion is controlled from the nav bar, which owns it across layout
+     * changes; the auto-expand that `TreeView` does for an uncontrolled tree is
+     * reproduced below.
+     */
+    expandedIds: string[];
+    onExpandedIdsChange: (ids: string[]) => void;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/CollapsibleNavBar/components/index.d.ts

@@ -1,5 +1,3 @@
-export * as ItemWithSubMenu from './ItemWithSubmenu';
-export * as ItemWithoutSubmenu from './ItemWithoutSubmenu';
 export * from './CollapsibleNavBarBase';
 export * from './CollapsibleNavBarLink';
 export * from './CollapsibleNavBarList';
@@ -7,6 +5,8 @@ export * from './CollapsibleNavBarWrapper';
 export * from './CollapsibleNavContentToggle';
 export * from './CollapsibleNavToggle';
 export * from './CollapsibleNavToggleWrapper';
-export * from './NavBarItem';
+export * from './NavHeader';
+export * from './NavTree';
+export * from './NavPopoverContent';
 export * from './NavBarPopover';
 export * from './TriggerIcon';

package/dist/components/CollapsibleNavBar/navItems.d.ts

@@ -0,0 +1,57 @@
+import { CSSObject } from '@emotion/react';
+import { PathPattern } from 'react-router-dom';
+import { CustomIconProps } from '../NavBar/types';
+import { TreeItem } from '../TreeView';
+import { CollapsibleNavBarExtendedProps, CollapsibleNavBarItem } from './types';
+/**
+ * What a nav row needs beyond a label — carried on each `TreeView` node so the
+ * tree itself stays free of routing concepts.
+ */
+export interface NavItemMeta {
+    /** Resolved `to` for the row's link. Absent on groups, which don't navigate. */
+    to?: string;
+    /**
+     * Taken from the nav item's own type rather than restated as
+     * `keyof MapIconsType`. `CollapsibleNavBarItem` reaches that union through
+     * the package index, where it has already widened to `string`; restating it
+     * here would put the two sides of the mapping in disagreement.
+     */
+    iconName?: CollapsibleNavBarItem['iconName'];
+    iconSize?: number;
+    css?: CSSObject;
+    CustomIcon?: CustomIconProps;
+    /** Group prefix, used to build sub-item paths and to match the active route. */
+    prefix?: string;
+    /** A group's children, kept flat for the collapsed-rail popover. */
+    subItems?: Array<{
+        path: string;
+        title: string;
+    }>;
+}
+export type NavTreeItem = TreeItem<NavItemMeta>;
+/** External links pass through untouched; everything else is app-absolute. */
+export declare const resolveTo: (path: string) => string;
+/**
+ * Turns the nav bar's flat `items` prop into `TreeView` nodes.
+ *
+ * Ids are the resolved paths (prefix for a group), which makes them stable
+ * across renders and directly comparable with the current location.
+ */
+export declare const toTreeItems: (items: CollapsibleNavBarExtendedProps["items"]) => NavTreeItem[];
+/**
+ * Ids of the nodes the current location activates — the row itself plus, for a
+ * sub-route, its group.
+ *
+ * This replaces the old approach of reading the `active` class back off the
+ * rendered `NavLink`, which needed an effect per row and a render to settle.
+ *
+ * `groupPatterns` is supplied by the caller because `useMatchPattern` may be a
+ * hook: it has to be called from the component, once per group, in a stable
+ * order.
+ */
+export declare const getActiveIds: ({ items, pathname, exactMatch, groupPatterns, }: {
+    items: NavTreeItem[];
+    pathname: string;
+    exactMatch: boolean;
+    groupPatterns: Record<string, string | PathPattern<string>>;
+}) => string[];

package/dist/components/CollapsibleNavBar/styles.d.ts

@@ -2,3 +2,37 @@ import { Theme } from '@emotion/react';
 import { CollapsibleNavBarExtendedProps } from './types';
 export declare const LogoWrapper: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const ContentToggle: (navBarTheme: CollapsibleNavBarExtendedProps["theme"], isChecked: boolean) => (theme: Theme) => import("@emotion/react").SerializedStyles;
+/**
+ * The nav's own layer on top of `TreeView`.
+ *
+ * Everything here hangs off `TreeView`'s stable class names rather than the
+ * DOM's shape. The old rules were positional (`& > div > div > div >
+ * div:nth-of-type(2)`) and carried two `TODO: refactor this` markers; they
+ * broke whenever a wrapper moved.
+ *
+ * Three layouts share these rows:
+ *
+ * - **mobile** (below `md`) — the nav is a full-screen overlay: icon, label,
+ *   chevron and the in-place subtree are all visible, the rail popover is not.
+ * - **rail** (`md` and up, closed) — 85px of icons. Only the popover trigger
+ *   shows; it carries the icon and reveals the subtree as a flyout.
+ * - **expanded** (`lg` and up, `.opened`) — back to the full rows.
+ */
+export declare const NavTreeStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const NavToggle: (isExpanded: boolean) => import("@emotion/react").SerializedStyles;
+/** The rail flyout's list of sub-routes. */
+export declare const PopoverList: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/** Holds the icon column open on rows that have no icon of their own. */
+export declare const IconSpacer: import("@emotion/react").SerializedStyles;
+/**
+ * Header block — headline, optional picture, optional person.
+ *
+ * Measurements come from the design's Type5 variant: an 8px stack inside the
+ * 216px content column — headline at Title 2 Bold (20/28), the name a size up
+ * at 24/24 on a 30px row, the picture square with a 12px radius.
+ */
+export declare const Header: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const HeaderTitle: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const HeaderPerson: import("@emotion/react").SerializedStyles;
+export declare const HeaderImage: import("@emotion/react").SerializedStyles;
+export declare const HeaderName: (theme: Theme) => import("@emotion/react").SerializedStyles;