@hirobius/design-system 0.19.0 → 0.20.0

package/dist/types/src/app/components/stepper.d.ts

@@ -1,33 +0,0 @@
-/**
- * Stepper - horizontal or vertical step indicator for multi-step wizard and
- * checkout flows, marking each step as complete, current, or upcoming.
- * @category Navigation
- * @tier pattern
- */
-import * as React from 'react';
-/** @internal */
-declare const stepMarkerVariants: (props?: ({
-    state?: "current" | "complete" | "upcoming" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-/** @public */
-export interface Step {
-    /** Visible label for the step. */
-    label: React.ReactNode;
-    /** Optional supporting copy shown under the label. */
-    description?: React.ReactNode;
-}
-/** @public */
-export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
-    /** Ordered steps from first to last. */
-    steps: Step[];
-    /** 0-based index of the current step. */
-    activeStep: number;
-    /** Layout direction. Defaults to 'horizontal'. */
-    orientation?: 'horizontal' | 'vertical';
-}
-/**
- * Step indicator for multi-step flows. Purely presentational — no navigation.
- */
-export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
-/** @internal — CVA variant helper; compose via Stepper's internal state instead. */
-export { stepMarkerVariants };

package/dist/types/src/app/components/text-lockup.d.ts

@@ -1,38 +0,0 @@
-/**
- * TextLockup - governed title-and-description pairing primitive.
- * @category Display
- * @tier pattern
- * @ai-intent Solves recurring heading, eyebrow, and supporting-copy composition with predefined typographic pairings so agents can express hierarchy without manually tuning text stacks.
- * @ai-rules Use TextLockup when content is a semantic title lockup with optional eyebrow and supporting text. Do NOT use TextLockup for arbitrary prose groups, data tables, or freeform mixed layouts. Do NOT restyle the internal type pairing with custom heading stacks when an existing size already fits. Do NOT use TextLockup to replace standalone body text or labels that do not form a title-description unit.
- */
-import { type ElementType, type ReactNode } from 'react';
-type TextLockupSize = 'hero' | 'heroXl' | 'section' | 'metric' | 'detail' | 'numbered';
-type TextLockupAlign = 'left' | 'center';
-type TextLockupTitleTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
-type TextLockupDescriptionTag = 'div' | 'p' | 'span';
-/** @public */
-export type TextLockupProps = {
-    /** Primary heading copy rendered by the lockup. */
-    title: string;
-    /** Supporting body copy paired with the title. */
-    description?: ReactNode;
-    /** Optional overline or category cue displayed above the title. */
-    eyebrow?: string;
-    /** Preset controlling title and body type pairing. */
-    size: TextLockupSize;
-    /** Horizontal alignment for the text pair. */
-    align?: TextLockupAlign;
-    /**
-     * When provided on the `numbered` size, renders a copy-anchor action
-     * next to the title on hover. Should match the section's DOM id.
-     */
-    id?: string;
-    /** Override the semantic wrapper while preserving the governed layout styles. */
-    as?: ElementType;
-    /** Override the title tag without altering the visual type ramp. */
-    titleAs?: TextLockupTitleTag;
-    /** Override the description tag without altering the visual type ramp. */
-    descriptionAs?: TextLockupDescriptionTag;
-};
-export declare const TextLockup: import("react").ForwardRefExoticComponent<TextLockupProps & import("react").RefAttributes<HTMLElement>>;
-export {};

package/dist/types/src/app/components/tile-grid.d.ts

@@ -1,17 +0,0 @@
-/**
- * @category Layout
- * @tier primitive
- */
-import * as React from 'react';
-/** @public */
-export interface TileGridProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Minimum tile width before the grid wraps. Defaults to 260px. */
-    minTileWidth?: string;
-    /** Gap token between tiles. Defaults to 'sm' (12px). */
-    gap?: 'xs' | 'sm' | 'md';
-}
-/**
- * Auto-fill responsive grid for status/micro tiles. Wraps tile children in a
- * one-line grid declaration so pages don't repeat the auto-fill minmax recipe.
- */
-export declare const TileGrid: React.ForwardRefExoticComponent<TileGridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src/app/components/time-input.d.ts

@@ -1,24 +0,0 @@
-/**
- * TimeInput — token-skinned time field on a native <input type="time">.
- * @category Inputs
- * @tier primitive
- * @public
- *
- * The time-only member of the date/time family (ADR-020). It deliberately does
- * NOT pull in the calendar dependency — a native `<input type="time">` gives the
- * platform time picker, keyboard entry, and locale formatting for free, skinned
- * with the same chrome as `Input`.
- */
-import * as React from 'react';
-import { type VariantProps } from 'class-variance-authority';
-declare const hdsTimeInputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-type TimeInputVariantProps = VariantProps<typeof hdsTimeInputVariants>;
-/** @public */
-export interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>, TimeInputVariantProps {
-}
-/** A native time field skinned with HDS input chrome. Value is a `HH:mm` string. */
-export declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLInputElement>>;
-/** @internal — CVA variant helper; compose via TimeInput props instead. */
-export { hdsTimeInputVariants };

package/dist/types/src/app/components/toggle-button.d.ts

@@ -1,32 +0,0 @@
-/**
- * ToggleButton — a two-state (on/off) pressable button on Radix Toggle.
- * @category Actions
- * @tier primitive
- *
- * Radix Toggle (@radix-ui/react-toggle) themed as a button-shaped control with
- * a native aria-pressed contract, keyboard support, and data-[state=on] active
- * styling. Use for a single independent toggle (bold, mute, pin); for a set of
- * mutually-related toggles reach for the segmented control instead.
- *
- *   <ToggleButton aria-label="Bold" pressed={bold} onPressedChange={setBold}>
- *     <Bold />
- *   </ToggleButton>
- */
-import * as React from 'react';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { type VariantProps } from 'class-variance-authority';
-declare const hdsToggleButtonVariants: (props?: ({
-    variant?: "secondary" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-type ToggleButtonVariantProps = VariantProps<typeof hdsToggleButtonVariants>;
-/** @public */
-export interface ToggleButtonProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, ToggleButtonVariantProps {
-}
-/**
- * A single two-state toggle button exposing a native `aria-pressed` contract —
- * use for one independent on/off control such as bold, mute, or pin.
- */
-export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
-/** @internal — CVA variant helper; compose via ToggleButton props instead. */
-export { hdsToggleButtonVariants };

package/dist/types/src/app/components/token.d.ts

@@ -1,90 +0,0 @@
-/**
- * Token - reflective token specimen for unified node-based token views.
- * @category Display
- * @tier primitive
- *
- * The `variant` axis (node | diagram — diagram is a deprecated alias that
- * resolves to the same node treatment) plus the `selected` / `fullWidth` /
- * `asButton` / `nowrap` / `sourceNode` states used to be a
- * Token.module.css `[data-*]` attribute stylesheet, with a duplicate
- * `isSelected` branch re-painted inline on top of it. Both now live as one
- * `cva` variant set — same `--semantic-*`/`--component-*`/`--primitive-*`
- * custom properties, same pixels, no CSS module.
- */
-import React from 'react';
-declare const tokenShellVariants: (props?: ({
-    variant?: "node" | "diagram" | null | undefined;
-    sourceNode?: boolean | null | undefined;
-    selected?: boolean | null | undefined;
-    fullWidth?: boolean | null | undefined;
-    asButton?: boolean | null | undefined;
-    nowrap?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const tokenNodeInlineVariants: (props?: ({
-    sourceNode?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const tokenLabelVariants: (props?: ({
-    sourceNode?: boolean | null | undefined;
-    truncateFromStart?: boolean | null | undefined;
-    selected?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-type TokenBaseProps = {
-    className?: string;
-    fullWidth?: boolean;
-    nowrap?: boolean;
-    isSourceNode?: boolean;
-    pathDisplayMode?: 'full' | 'compressed';
-    pathDisplayDepth?: number;
-    pathDisplayLeadingDot?: boolean;
-    nodeRef?: (el: HTMLElement | null) => void;
-    'aria-label'?: string;
-    /** When true, overflow ellipsis appears at the start (left) instead of the end. */
-    truncateFromStart?: boolean;
-};
-type TokenNodeSurfaceProps = TokenBaseProps & {
-    variant?: 'node';
-    children: React.ReactNode;
-    /** Optional explicit token path for deep-linking node instances. Falls back to children when omitted. */
-    tokenPath?: string;
-    isSelected?: boolean;
-    onClick?: () => void;
-    swatchVar?: string;
-    /** Optional left-side slot for compact node content, e.g. curve previews. */
-    leadingSlot?: React.ReactNode;
-};
-/**
- * @deprecated `variant="diagram"` is a compatibility alias that resolves to the
- * canonical `variant="node"` treatment; its diagram-only props (value,
- * accentColor, description, rawValue) are no longer rendered. Migrate to
- * `variant="node"`.
- * @removeIn 1.0.0
- */
-type TokenDiagramProps = TokenBaseProps & {
-    variant: 'diagram';
-    label: string;
-    value: string;
-    accentColor: string;
-    swatchVar?: string;
-    description?: React.ReactNode;
-    rawValue?: React.ReactNode;
-    onClick?: () => void;
-};
-export type TokenProps = TokenNodeSurfaceProps | TokenDiagramProps;
-/**
- * Token - unified token component.
- *
- * variant="node" renders the canonical token surface.
- * variant="diagram" is a DEPRECATED compatibility alias (see TokenDiagramProps;
- * @removeIn 1.0.0) that now resolves to the same node treatment.
- * Node content can use a left-side slot for swatches or other compact previews.
- */
-/**
- * Token - reflective token specimen for unified node-based token views. The `variant` axis (node | diagram — diagram is a deprecated alias that resolves to the same node treatment) plus the `selected` / `fullWidth` / `asButton` / `nowrap` / `sourceNode` states used to be a Token.module.css `[data-*]` attribute stylesheet, with a duplicate `isSelected` branch re-painted inline on top of it. Both now live as one `cva` variant set — same `--semantic-*`/`--component-*`/`--primitive-*` custom properties, same pixels, no CSS module.
- *
- * @public
- * @deprecated Token is an HDS docs/lab internal (reflective token specimen for the token/foundation doc pages), not a consumer-facing HDS surface. It will be retiered to `utility` (dropped from the published barrel) at the named major.
- * @removeIn 1.0.0
- */
-export declare function Token(props: TokenProps): import("react/jsx-runtime").JSX.Element;
-/** @internal — CVA variant helpers; compose via Token props instead. */
-export { tokenShellVariants, tokenNodeInlineVariants, tokenLabelVariants };

package/dist/types/src/app/components/tokenUtils.d.ts

@@ -1,38 +0,0 @@
-/**
- * tokenUtils — flatten hirobius.tokens.json into a searchable list
- * and trace alias chains through the three-tier hierarchy.
- */
-export type Tier = 'primitive' | 'semantic' | 'component';
-export interface FlatToken {
-    path: string;
-    cssVar: string;
-    tier: Tier;
-    type: string;
-    category: string;
-    rawValue: unknown;
-    isAlias: boolean;
-    description?: string;
-    lightAlias?: string | number;
-    darkAlias?: string | number;
-    composite?: Record<string, unknown>;
-}
-export declare function formatCategoryLabel(category: string): string;
-export declare const allTokens: FlatToken[];
-export declare function getTokensByTier(tier: Tier): FlatToken[];
-export declare function getTierCategories(tier: Tier): string[];
-export declare function formatTokenValue(rawValue: unknown): string;
-/** Follow a token reference string to its FlatToken. Returns null if not found. */
-export declare function resolveAlias(ref: unknown): FlatToken | null;
-/**
- * Resolves a token reference to a CSS variable string.
- * Returns the original string when no token is found so callers can fail safely.
- */
-export declare function resolveAliasCssVar(ref: unknown): string;
-/**
- * Resolves a token reference to its concrete authored value.
- * Useful for contrast math and other places that need literal colors,
- * while the UI may still consume CSS vars end-to-end.
- */
-export declare function resolveTokenLiteralValue(ref: unknown, mode?: 'light' | 'dark', depth?: number): string | null;
-/** Group a flat token list by category (second segment). */
-export declare function groupByCategory(tokens: FlatToken[]): Record<string, FlatToken[]>;

package/dist/types/src/app/components/tokenizer.d.ts

@@ -1,24 +0,0 @@
-/**
- * Tokenizer — free-text token/chip input where committed entries render as
- * removable Tag chips ahead of the live text field. Enter commits the typed
- * draft as a new token; Backspace on an empty draft removes the trailing one.
- * @category Inputs
- * @tier pattern
- * @public
- */
-import * as React from 'react';
-/** @public */
-export interface TokenizerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
-    /** Committed tokens rendered as chips. */
-    value: string[];
-    /** Called with the next token list whenever tokens are added or removed. */
-    onChange: (next: string[]) => void;
-    /** Placeholder shown in the trailing text field when empty. */
-    placeholder?: string;
-    /** Disable the field and all token interactions. */
-    disabled?: boolean;
-    /** Class hook for the outer wrapper. */
-    className?: string;
-}
-/** A bordered field of Tag chips followed by a text input for adding more. */
-export declare const Tokenizer: React.ForwardRefExoticComponent<TokenizerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/types/src/app/components/toolbar.d.ts

@@ -1,36 +0,0 @@
-/**
- * Toolbar — horizontal container that groups related controls (buttons,
- * toggles, separators) with a single roving tab-stop, built on Radix Toolbar.
- * @category Actions
- * @tier pattern
- * @public
- *
- *   <Toolbar aria-label="Formatting">
- *     <Toolbar.ToggleGroup type="single">
- *       <Toolbar.ToggleItem value="bold">Bold</Toolbar.ToggleItem>
- *     </Toolbar.ToggleGroup>
- *     <Toolbar.Separator />
- *     <Toolbar.Button>Share</Toolbar.Button>
- *   </Toolbar>
- */
-import * as React from 'react';
-import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
-declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarPrimitive.ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const ToolbarSeparator: React.ForwardRefExoticComponent<Omit<ToolbarPrimitive.ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ToolbarToggleGroup: React.ForwardRefExoticComponent<(Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToolbarPrimitive.ToolbarToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
-declare const ToolbarToggleItem: React.ForwardRefExoticComponent<Omit<ToolbarPrimitive.ToolbarToggleItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const ToolbarLink: React.ForwardRefExoticComponent<Omit<ToolbarPrimitive.ToolbarLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-export interface ToolbarComponent extends React.FC<React.ComponentProps<typeof ToolbarPrimitive.Root>> {
-    Button: typeof ToolbarButton;
-    Separator: typeof ToolbarSeparator;
-    ToggleGroup: typeof ToolbarToggleGroup;
-    ToggleItem: typeof ToolbarToggleItem;
-    Link: typeof ToolbarLink;
-}
-/**
- * Toolbar root. Groups related controls with a single roving tab-stop.
- * Supports the native `orientation` prop (`horizontal` | `vertical`).
- * @public
- */
-export declare const Toolbar: ToolbarComponent;
-export {};

package/dist/types/src/app/components/top-nav.d.ts

@@ -1,23 +0,0 @@
-/**
- * TopNav — top-of-page navigation bar with brand, nav links, and trailing
- * actions rendered as a semantic <header> row, optionally sticky to the top.
- * @category Navigation
- * @tier pattern
- * @public
- */
-import * as React from 'react';
-/** @public */
-export interface TopNavProps extends React.HTMLAttributes<HTMLElement> {
-    /** Leading brand slot (e.g. logo/wordmark). */
-    brand?: React.ReactNode;
-    /** Nav links, placed left after the brand and wrapped in a <nav>. */
-    children?: React.ReactNode;
-    /** Trailing actions, pushed to the far right. */
-    trailing?: React.ReactNode;
-    /** Pins the bar to the top of its scroll container. */
-    sticky?: boolean;
-}
-/**
- * Top navigation bar with brand, nav, and trailing action slots.
- */
-export declare const TopNav: React.ForwardRefExoticComponent<TopNavProps & React.RefAttributes<HTMLElement>>;

package/dist/types/src/app/components/tree-list.d.ts

@@ -1,30 +0,0 @@
-/**
- * TreeList - a hierarchical, expandable list with correct tree ARIA semantics
- * for browsing nested navigation, file, or content structures.
- * @category Navigation
- * @tier pattern
- * @public
- */
-import * as React from 'react';
-/** @public */
-export interface TreeNode {
-    /** Stable identifier for the node, passed to `onSelect` when its label is clicked. */
-    id: string;
-    /** Rendered label content for the node's row. */
-    label: React.ReactNode;
-    /** Nested child nodes. A non-empty array renders a toggle and a nested group. */
-    children?: TreeNode[];
-}
-/** @public */
-export interface TreeListProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> {
-    /** Root-level nodes to render. */
-    items: TreeNode[];
-    /** Node ids expanded on mount. */
-    defaultExpandedIds?: string[];
-    /** Called with a node's id when its label row is clicked. */
-    onSelect?: (id: string) => void;
-}
-/**
- * Renders a hierarchical `role="tree"` list; nodes with children get an expand/collapse toggle.
- */
-export declare const TreeList: React.ForwardRefExoticComponent<TreeListProps & React.RefAttributes<HTMLUListElement>>;

package/dist/types/src/app/data/nav-model.d.ts

@@ -1,39 +0,0 @@
-/** Per-page navigation metadata a docs page module exports (Phase 2 target). */
-export interface HdsPageMeta {
-    /** Canonical, root-relative route (no `/hds/` prefix). */
-    path: string;
-    /** Human label shown in the sidebar / search / breadcrumb. */
-    title: string;
-    /** Sidebar section heading this page groups under. */
-    section: string;
-    /** Sort order within the section. */
-    order: number;
-    /** Short description — used by the Cmd-K search corpus. */
-    description?: string;
-    /** Lifecycle status — drives a metadata slot, never a decorative badge. */
-    status?: 'stable' | 'beta' | 'draft' | 'internal';
-}
-/** A single sidebar link in the derived model. */
-export interface NavLink {
-    path: string;
-    label: string;
-    /** Short description — surfaced by the Cmd-K search corpus (not the sidebar). */
-    description?: string;
-    /** Match this route exactly (not by prefix) for active state. */
-    exact?: boolean;
-    /** Render with sub-item indentation. */
-    indent?: boolean;
-}
-/** A labelled group of sidebar links. */
-export interface NavSection {
-    label: string;
-    items: NavLink[];
-}
-/** The full derived navigation model. */
-export interface NavModel {
-    /** Generator provenance marker. */
-    $generated?: string;
-    sections: NavSection[];
-}
-/** The generated docs navigation model (see `scripts/generate-nav-model.mjs`). */
-export declare const navModel: NavModel;

package/dist/types/src/app/hooks/useFocusVisible.d.ts

@@ -1,9 +0,0 @@
-export interface FocusVisibleState {
-    /** True when the current focus should render a visible focus ring. */
-    isFocusVisible: boolean;
-    /** Call from `onFocus`, passing the focused element. */
-    onFocus: (target: Element) => void;
-    /** Call from `onBlur` / `onPointerDown` to drop the focus ring. */
-    clearFocusVisible: () => void;
-}
-export declare function useFocusVisible(): FocusVisibleState;

package/dist/types/src/app/layouts/CaseStudyLayout.d.ts

@@ -1,20 +0,0 @@
-/**
- * CaseStudyLayout — macro-layout skeleton for portfolio case study pages.
- * @category Layout
- *
- * Invisible structure only. No Surface, no decorative chrome.
- * Slot anatomy:
- *   heroSlot    → full-width (maxWidth="max")  — hero image + headline
- *   introSlot   → prose-width (maxWidth="content") — narrative, Brief/Problem/Solution
- *   metricsSlot → full-width (maxWidth="max")  — KPI or summary cards (optional)
- *   contentSlot → full-width (maxWidth="max")  — chapters, galleries, learnings
- */
-import type { ReactNode } from 'react';
-export interface CaseStudyLayoutProps {
-    heroSlot: ReactNode;
-    introSlot: ReactNode;
-    metricsSlot?: ReactNode;
-    contentSlot: ReactNode;
-}
-/** @public */
-export declare function CaseStudyLayout({ heroSlot, introSlot, metricsSlot, contentSlot, }: CaseStudyLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/app/layouts/DocLayout.d.ts

@@ -1,14 +0,0 @@
-import { type ReactNode } from 'react';
-declare const DOC_LAYOUT_CONTENT_WIDTHS: {
-    readonly content: "var(--semantic-layout-width-content)";
-    readonly max: "var(--semantic-layout-width-max)";
-};
-type DocLayoutMaxWidth = keyof typeof DOC_LAYOUT_CONTENT_WIDTHS;
-export type DocLayoutContentMaxWidth = DocLayoutMaxWidth;
-interface DocLayoutProps {
-    contentSlot: ReactNode;
-    bottomSlot?: ReactNode;
-    contentMaxWidth?: DocLayoutContentMaxWidth;
-}
-export declare function DocLayout({ contentSlot, bottomSlot, contentMaxWidth, }: DocLayoutProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/src/app/layouts/EmbeddedDocLayoutContext.d.ts

@@ -1,6 +0,0 @@
-import { type ReactNode } from 'react';
-export declare function EmbeddedDocLayoutProvider({ bottomSlot, children, }: {
-    bottomSlot: ReactNode | null;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function useEmbeddedDocLayoutBottomSlot(): ReactNode;

package/dist/types/src/app/layouts/HdsDocsShell.d.ts

@@ -1,72 +0,0 @@
-/**
- * HdsDocsShell — three-region docs shell (left nav rail, content, right TOC
- * rail), driven by grid columns that default to 0 and are set per breakpoint.
- * @category Layout
- * @tier pattern
- * @public
- *
- * hds#280 slice: this is the SHELL MECHANICS ONLY — the smallest shippable
- * piece of the docs-shell epic. It ships:
- *
- *   - A 3-column grid (`leftRail | content | rightRail`), both rail columns
- *     defaulting to `0px` and set to `semantic.space.sidebar.railWidth`
- *     (hds#280 token, our own 280px — not HeroUI's 268px) per breakpoint via
- *     Tailwind's arbitrary-property + responsive-variant syntax, the same
- *     technique Fumadocs/HeroUI uses. `md768:` brings in the left rail,
- *     `xl1280:` brings in the right rail — matching the three-stage table in
- *     hds#280.
- *   - Each rail is `position: sticky` and scrolls independently of content
- *     and of the other rail, clipped to the viewport minus `topOffset`.
- *   - `topOffset` composes (it is one CSS length a caller supplies, e.g. its
- *     own sticky header's height token) rather than a hardcoded pixel value —
- *     the first stage of the row-cascade pattern hds#280 asks for. A second
- *     region (a tabs row, hds#280's PR-comment addendum) would extend this by
- *     adding its own height into the same `calc()` chain, not by hardcoding a
- *     second offset.
- *
- * Deliberately NOT in this slice (tracked as proposed follow-up issues, not
- * filed — see the PR/commit this ships in):
- *   - Below the TOC breakpoint, `rightRail` is omitted from the grid rather
- *     than becoming a reachable popover. The DoD explicitly wants a popover,
- *     not "merely hidden" — that is real, separate UI work (a sticky
- *     current-section breadcrumb bar), not shell mechanics.
- *   - Left-rail collapsible groups (chevron, active-section pill) and
- *     right-rail active-anchor styling (vertical rule, filled pill) are
- *     content the caller supplies via `leftRail`/`rightRail` — this shell
- *     does not build SideNav/Disclosure/NavItem composition for the caller.
- *   - `check-rendered-geometry` verification at every breakpoint in the DoD's
- *     table (needs a built Storybook + a live run, not exercised here).
- *   - Named CSS `grid-template-areas` (the DoD's literal ask) — this ships a
- *     3-column grid with DOM order instead, which is behaviorally identical
- *     for a single linear row of regions and needs no separate stylesheet.
- *     Areas earn their keep once a 4th region (a tabs row spanning full
- *     width) is added — call out then, not before.
- */
-import * as React from 'react';
-/** @public */
-export interface HdsDocsShellProps {
-    /** Left nav rail. Hidden below the `md768` breakpoint (grid column width 0). */
-    leftRail?: React.ReactNode;
-    /** Main content column. Always rendered, always fluid. */
-    children: React.ReactNode;
-    /**
-     * Right "on this page" rail. Hidden below the `xl1280` breakpoint (grid
-     * column width 0) — see the deferred-popover note above; it is REMOVED
-     * from the grid at that breakpoint, not merely visually hidden, so no
-     * hidden interactive content sits in the DOM unreachable.
-     */
-    rightRail?: React.ReactNode;
-    /**
-     * CSS length a caller supplies for a sticky header ABOVE this shell (e.g.
-     * TopNav's height token), so each rail's sticky offset and scrollable
-     * height compose against it instead of assuming the shell owns the whole
-     * viewport. Defaults to `'0px'`.
-     */
-    topOffset?: string;
-    /** Escape hatch: only for narrow layout adjustments that don't belong in the primitive API. */
-    className?: string;
-    /** Escape hatch: only for narrow layout adjustments that don't belong in the primitive API. */
-    style?: React.CSSProperties;
-}
-/** @public */
-export declare const HdsDocsShell: React.ForwardRefExoticComponent<HdsDocsShellProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src/app/layouts/HdsSystemDocLayout.d.ts

@@ -1,14 +0,0 @@
-import type { ReactNode } from 'react';
-import { type DocLayoutContentMaxWidth } from './DocLayout.js';
-/**
- * HdsSystemDocLayout — single centered content column for documentation pages.
- * Thin wrapper around DocLayout: takes only `contentSlot` and `contentMaxWidth`,
- * with no sidebar or nav region to pass one into. Not the three-column docs
- * shell (left rail + content + right rail) — that is tracked as its own shell
- * component (hds#280).
- * @public
- */
-export declare function HdsSystemDocLayout({ contentSlot, contentMaxWidth, }: {
-    contentSlot: ReactNode;
-    contentMaxWidth?: DocLayoutContentMaxWidth;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/app/lib/hds-search.d.ts

@@ -1,45 +0,0 @@
-/** @internal — search engine behind the CommandPalette; not part of the public API. */
-/**
- * hds-search — the manifest search engine extracted from CommandPalette.
- *
- * A dependency-free subsequence + position scorer (think micro-fzf) over four
- * corpora drawn from `virtual:hds-manifest`: component specs, utilities, role
- * tokens, and curated foundation sections. Pure and side-effect-free — the
- * manifest is passed in, never read from a module global — so it is unit-tested
- * directly (see scripts/../tests/hds-search.test.ts) rather than through a
- * component test hook.
- *
- * Lifted from command-palette.tsx per ADR-011's review (deep module behind a
- * narrow interface): the UI shell now imports { buildIndex, rank } and owns no
- * search logic.
- */
-import type { ManifestSpec, RoleToken, SystemManifest } from '../data/manifest-types.js';
-export type { ManifestSpec, RoleToken, SystemManifest };
-export type ResultKind = 'component' | 'pattern' | 'template' | 'utility' | 'token' | 'section';
-export interface PaletteResult {
-    id: string;
-    label: string;
-    description: string;
-    kind: ResultKind;
-    /** Where Enter/click navigates — relative React Router path. */
-    to: string;
-    /** Source string used for fuzzy matching (lowercased). */
-    haystack: string;
-}
-export declare const KIND_LABEL: Record<ResultKind, string>;
-export declare const MAX_RESULTS = 30;
-export declare function sanitize(text: string): string;
-/** Build the searchable index from a manifest. Pure — pass the manifest in. */
-export declare function buildIndex(manifest: SystemManifest): PaletteResult[];
-/**
- * Subsequence + position scorer:
- *   - Every char in `query` must appear in order inside `haystack`.
- *   - Earlier matches score higher (heavy weight on first hit).
- *   - Adjacent-char streaks score higher (clustered matches).
- *   - Word-start hits get a bonus.
- *
- * Returns -Infinity if `query` is not a subsequence of `haystack`.
- */
-export declare function fuzzyScore(query: string, haystack: string): number;
-/** Rank items against a query. Empty query → a stable starter set. */
-export declare function rank(query: string, items: PaletteResult[]): PaletteResult[];

package/dist/types/src/app/lib/nav-active.d.ts

@@ -1,16 +0,0 @@
-/**
- * nav-active — the single active-state rule for navigation items.
- *
- * Previously this 3-line predicate was copy-pasted in three places (NavGroup,
- * and HDSLayout's NestedNavGroup + SideNavItem). Centralized here so "is this
- * nav item active?" has exactly one definition (ADR-017, Phase 4).
- */
-/**
- * Whether a nav item is active for the current path.
- *
- * - `exact`: the route must match precisely (e.g. `/` or a landing page that
- *   shares a prefix with its children).
- * - otherwise: active when the current path equals the item path OR is a
- *   descendant route (`/components` is active on `/components/actions`).
- */
-export declare function isNavItemActive(currentPath: string, itemPath: string, exact?: boolean): boolean;

package/dist/types/src/app/lib/navLevels.d.ts

@@ -1,4 +0,0 @@
-export type NavLevel = 'root' | 'section' | 'nested' | 'deep';
-export declare function getNavLevelInset(level: NavLevel): string;
-export declare function getNavLevelLeadingPadding(level: NavLevel): string;
-export declare function getNextNavLevel(level: NavLevel): NavLevel;