@hirobius/design-system 0.8.1

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

@@ -0,0 +1,24 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type NavLevel } from '../lib/navLevels';
+import { NavItem } from './nav-item';
+type NavItem = {
+    path: string;
+    label: string;
+    disabled?: boolean;
+};
+type NavGroupProps = {
+    label?: string;
+    variant?: 'side' | 'toc';
+    level?: NavLevel;
+    items?: NavItem[];
+    children?: ReactNode;
+    collapsible?: boolean;
+    onNavigate?: () => void;
+    getExact?: (item: NavItem) => boolean;
+    className?: string;
+    style?: CSSProperties;
+    contentStyle?: CSSProperties;
+};
+/** @public */
+export declare function NavGroup({ label, variant, level, items, children, collapsible, onNavigate, getExact, className, style, contentStyle, }: NavGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+import type { AnchorHTMLAttributes, MouseEvent } from 'react';
+import { type NavLevel } from '../lib/navLevels';
+type NavVariant = 'side' | 'toc';
+type NavNativeProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'onClick'>;
+interface NavProps extends NavNativeProps {
+    /** Visual layout variant for side nav or table of contents usage. */
+    variant?: NavVariant;
+    /** Text label displayed inside the navigation row. */
+    label: string;
+    /** Marks the item as the current route. */
+    active?: boolean;
+    /** Disables interaction and muted the nav row. */
+    disabled?: boolean;
+    /** Visual hierarchy level for the navigation row. */
+    level?: NavLevel;
+    /** Navigation callback fired before the browser follows the link. */
+    onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+/** @public */
+export declare function NavItem({ variant, label, href, active, disabled, level, onNavigate, className, style, onFocus, onMouseEnter, onMouseLeave, onPointerDown, onPointerUp, onPointerCancel, onBlur, ...rest }: NavProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/app/components/not-found-pattern.d.ts

@@ -0,0 +1 @@
+export declare function NotFoundPattern(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+/**
+ * Page — standard page shell.
+ * @category Layout
+ * @tier primitive
+ *
+ * Wraps page content in Container (width constraint) and applies the
+ * canonical vertical padding so content breathes against the viewport edges
+ * on scroll. Use as the outermost element of any new page so vertical rhythm
+ * is consistent across the system without per-page reinvention.
+ *
+ * Footer: every page mounted under HDSLayout (the standard route shell) gets
+ * a shared footer rendered after this component's content, with bottom space
+ * below the footer owned by the layout shell. Page intentionally does not
+ * render its own footer — the shell is the single source of truth.
+ *
+ * Use Container directly only for full-bleed surfaces (sketches, hero
+ * sections, embedded canvases) where the page owns its own vertical padding.
+ *
+ * Usage:
+ *   <Page>
+ *     <Stack direction="column" gap="spacious">...</Stack>
+ *   </Page>
+ *
+ *   <Page maxWidth="content" paddingY="compact">
+ *     <article>...</article>
+ *   </Page>
+ */
+import type { ReactNode, CSSProperties } from 'react';
+type MaxWidth = 'content' | 'max';
+type PaddingY = 'default' | 'compact' | 'none';
+interface PageProps {
+    children: ReactNode;
+    /** Max width: 'content' (760px for prose) | 'max' (1200px). Defaults to 'max'. */
+    maxWidth?: MaxWidth;
+    /** Vertical padding token: 'default' (48/64) | 'compact' (24/32) | 'none'. Defaults to 'default'. */
+    paddingY?: PaddingY;
+    /** Escape hatch for narrow page-specific adjustments. */
+    style?: CSSProperties;
+    className?: string;
+}
+/** @public */
+export declare function Page({ children, maxWidth, paddingY, style, className, }: PageProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+/**
+ * Pagination - paged navigation control with truncation.
+ * @category Navigation
+ * @tier pattern
+ */
+import * as React from 'react';
+type PageToken = number | 'ellipsis';
+export declare function paginationRange(page: number, count: number, siblingCount?: number): PageToken[];
+/** @public */
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Current page (1-based). */
+    page: number;
+    /** Total number of pages. */
+    count: number;
+    /** Fired with the next page when a control is activated. */
+    onPageChange: (page: number) => void;
+    /** Pages shown either side of the current page before truncating. */
+    siblingCount?: number;
+    /** Accessible label for the nav landmark. */
+    label?: string;
+}
+/** Paged navigation with first/last anchors, sibling pages, and ellipses. */
+export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+export {};

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

@@ -0,0 +1,44 @@
+/**
+ * Popover — floating surface anchored to a trigger (shadcn baseline, compound parts).
+ * @category Overlays
+ * @tier primitive
+ * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
+ *
+ * Radix Popover (@radix-ui/react-popover) themed with role tokens. Provides
+ * focus management, outside-click + ESC dismissal, collision-aware positioning,
+ * and portal mounting out of the box.
+ *
+ *   <Popover>
+ *     <Popover.Trigger asChild>
+ *       <Button>Open</Button>
+ *     </Popover.Trigger>
+ *     <Popover.Content>
+ *       …content…
+ *     </Popover.Content>
+ *   </Popover>
+ *
+ * Surface uses role.popover (semantic.color.surface.overlay via the `popover`
+ * token) + shadow-overlay. Mirrors Dialog's surface treatment so overlays read
+ * as one family.
+ */
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/** @public */
+export type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface PopoverComponent extends React.FC<React.ComponentProps<typeof PopoverPrimitive.Root>> {
+    Trigger: typeof PopoverTrigger;
+    Anchor: typeof PopoverAnchor;
+    Content: typeof PopoverContent;
+    Close: typeof PopoverClose;
+}
+/**
+ * Popover root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled
+ * with `defaultOpen`.
+ * @public
+ */
+declare const Popover: PopoverComponent;
+export { Popover };

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

@@ -0,0 +1,25 @@
+/**
+ * Progress - linear progress bar (determinate or indeterminate).
+ * @category Feedback
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const progressTrackVariants: (props?: {
+    size?: "sm" | "md" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type ProgressVariantProps = VariantProps<typeof progressTrackVariants>;
+/** @public */
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'>, ProgressVariantProps {
+    /**
+     * Completion 0–100. Omit (or pass null) for an indeterminate bar that
+     * animates until the work completes.
+     */
+    value?: number | null;
+    /** Accessible label for the progress bar. */
+    label?: string;
+}
+/** Linear progress. Determinate when `value` is a number, else indeterminate. */
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+/** @internal — CVA variant helper; compose via Progress props instead. */
+export { progressTrackVariants };

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

@@ -0,0 +1,18 @@
+/**
+ * HdsRadio — radio button with animated selection indicator.
+ * @category Inputs
+ * @tier primitive
+ */
+import type { InputHTMLAttributes } from 'react';
+/** HdsRadio — radio button with animated selection indicator. */
+export type HdsRadioDemoState = 'rest' | 'hover' | 'focused' | 'pressed' | 'disabled';
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
+    /** Radio label displayed next to the control. */
+    label: string;
+    /** Current checked state. */
+    checked: boolean;
+    /** Called when the radio changes. */
+    onChange: (v: boolean) => void;
+}
+export declare const HdsRadio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/types/src/app/components/segmented-control.d.ts

@@ -0,0 +1,33 @@
+interface HdsSegmentedOption {
+    /** Value submitted when this option is selected. */
+    value: string;
+    /** Visible label for the option. */
+    label: string;
+    /** Optional supporting description shown below the label. */
+    description?: string;
+}
+interface SegmentedControlProps {
+    /** Accessible label for the control. */
+    label?: string;
+    /** Accessible label when no visible label should be rendered. */
+    'aria-label'?: string;
+    /** Option set rendered inside the segmented rail. */
+    options: HdsSegmentedOption[];
+    /** Currently selected value. */
+    value: string;
+    /** Called when the user selects a different option. */
+    onChange: (value: string) => void;
+    /** Size on the sm/md ramp shared with Button/Input. */
+    size?: 'sm' | 'md';
+    /** Visual treatment for the rail and active segment. */
+    variant?: 'primary' | 'secondary';
+    /** Whether the control should stretch to the width of its container. */
+    fullWidth?: boolean;
+    /** Padding inside the rail container. */
+    railPadding?: React.CSSProperties['padding'];
+    /** Horizontal padding inside each segment. */
+    segmentPaddingX?: React.CSSProperties['paddingLeft'];
+}
+/** @public */
+export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,25 @@
+/**
+ * Skeleton - placeholder shimmer for content that is still loading.
+ * @category Feedback
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const skeletonVariants: (props?: {
+    variant?: "text" | "rectangular" | "circular";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;
+/** @public */
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, SkeletonVariantProps {
+    /** Explicit width (number → px, or any CSS length). */
+    width?: number | string;
+    /** Explicit height (number → px, or any CSS length). For `text`, defaults to 1em. */
+    height?: number | string;
+}
+/**
+ * Decorative loading placeholder. Marked aria-hidden — announce the loading
+ * state on the surrounding region (e.g. aria-busy) rather than per skeleton.
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+/** @internal — CVA variant helper; compose via Skeleton props instead. */
+export { skeletonVariants };

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

@@ -0,0 +1,13 @@
+/**
+ * Sketch — shared shell for generative canvases and WebGL sketches.
+ * @category Layout
+ * @tier pattern
+ */
+import type { ReactNode } from 'react';
+/** @public */
+export interface SketchProps {
+    title: string;
+    children: ReactNode;
+    controls?: ReactNode;
+}
+export declare function Sketch({ title, children, controls }: SketchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+/**
+ * HdsSlider — range slider with label and value display.
+ * @category Inputs
+ * @tier primitive
+ */
+/** HdsSlider — range slider with label and value display. */
+interface SliderProps {
+    /** Slider label. */
+    label: string;
+    /** Minimum value in the range. */
+    min: number;
+    /** Maximum value in the range. */
+    max: number;
+    /** Step increment for the range input. */
+    step?: number;
+    /** Current slider value. */
+    value: number;
+    /** Called when the slider value changes. */
+    onChange: (v: number) => void;
+}
+export declare const HdsSlider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,20 @@
+/**
+ * Spinner - indeterminate loading indicator.
+ * @category Feedback
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const spinnerVariants: (props?: {
+    size?: "sm" | "md" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type SpinnerVariantProps = VariantProps<typeof spinnerVariants>;
+/** @public */
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, SpinnerVariantProps {
+    /** Accessible label announced to assistive tech. Defaults to "Loading". */
+    label?: string;
+}
+/** Indeterminate spinner. Inherits the surrounding text color via currentColor. */
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+/** @internal — CVA variant helper; compose via Spinner props instead. */
+export { spinnerVariants };

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

@@ -0,0 +1,39 @@
+/**
+ * Stack — one-dimensional layout primitive.
+ * @category Layout
+ * @tier primitive
+ * @ai-intent Solves vertical and horizontal rhythm with tokenized flex gaps so agents can compose sequences of content without inventing ad hoc spacer divs or margin-based stacking.
+ * @ai-rules Use Stack for flow spacing and simple flex alignment only. Do NOT use Stack to create card chrome, internal surface padding, or page-width constraints. Do NOT apply arbitrary margins to Stack to fake spacing between children when the gap prop should own that rhythm. Do NOT use Stack for true two-dimensional layouts that require Grid.
+ */
+import React from 'react';
+import hds from '../design-system/tokens';
+type SemanticGap = 'tight' | 'normal' | 'inset' | 'spacious';
+type ComponentGap = 'gap' | 'medium';
+type SubgridGap = 'hairline' | 'xs' | 'gap';
+type SectionGap = 'stack';
+type GapOption = SemanticGap | ComponentGap | SubgridGap | SectionGap | keyof typeof hds.space;
+type FlexAlign = 'start' | 'center' | 'end' | 'stretch';
+type FlexJustify = 'start' | 'center' | 'end' | 'space-between';
+interface StackProps {
+    /** Stack content rendered inside the flex wrapper. */
+    children: React.ReactNode;
+    /** Flex direction for the stack. */
+    direction?: 'row' | 'column';
+    /** Gap token: semantic (tight, normal, inset, spacious) or primitive (px4, px8, etc). Defaults to 'tight' (16px). */
+    gap?: GapOption;
+    /** Cross-axis alignment: start | center | end | stretch. */
+    align?: FlexAlign;
+    /** Main-axis distribution: start | center | end | space-between. */
+    justify?: FlexJustify;
+    /** Whether children may wrap. */
+    wrap?: React.CSSProperties['flexWrap'];
+    /** Escape hatch: only use when tokenized props cannot express the required wrapper class. */
+    className?: string;
+    /** Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API. */
+    style?: React.CSSProperties;
+    /** Element rendered as the outer wrapper. */
+    as?: React.ElementType;
+}
+/** @public */
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,24 @@
+/**
+ * @category Display
+ * @tier primitive
+ */
+import * as React from 'react';
+declare const TONE_CLASSES: {
+    readonly default: "text-foreground";
+    readonly success: "text-[var(--semantic-color-feedback-success)]";
+    readonly warning: "text-[var(--semantic-color-feedback-warning)]";
+    readonly danger: "text-[var(--semantic-color-feedback-error)]";
+};
+export type StatTone = keyof typeof TONE_CLASSES;
+/** @public */
+export interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    value: React.ReactNode;
+    sub?: React.ReactNode;
+    tone?: StatTone;
+}
+/**
+ * Headline metric — large value, uppercase caption label, optional sub-line.
+ */
+export declare const Stat: React.ForwardRefExoticComponent<StatProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,25 @@
+/**
+ * @category Display
+ * @tier pattern
+ */
+import * as React from 'react';
+declare const DOT_TONE: {
+    readonly success: "bg-[var(--semantic-color-feedback-success)]";
+    readonly warning: "bg-[var(--semantic-color-feedback-warning)]";
+    readonly danger: "bg-[var(--semantic-color-feedback-error)]";
+    readonly info: "bg-[var(--semantic-color-content-accent)]";
+    readonly neutral: "bg-[var(--semantic-color-border-default)]";
+};
+export type StatusListItemTone = keyof typeof DOT_TONE;
+/** @public */
+export interface StatusListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    tone?: StatusListItemTone;
+    title: React.ReactNode;
+    notes?: React.ReactNode[];
+    trailing?: React.ReactNode;
+}
+/**
+ * Status dot + title row with optional muted notes and trailing slot (e.g. badge).
+ */
+export declare const StatusListItem: React.ForwardRefExoticComponent<StatusListItemProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,22 @@
+/**
+ * @category Display
+ * @tier pattern
+ */
+import * as React from 'react';
+export type StatusTileTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+/** @public */
+export interface StatusTileProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Tone metadata kept for downstream consumers (e.g., the trailing badge). The tile itself does not paint a tone-bearing rule. */
+    tone?: StatusTileTone;
+    title: React.ReactNode;
+    notes?: React.ReactNode[];
+    trailing?: React.ReactNode;
+}
+/**
+ * Block-layout sibling of StatusListItem. Renders a raised surface tile with
+ * title, optional muted notes, and a trailing slot for a badge or affordance.
+ * Status colour belongs in the trailing slot, never as a left rule on the tile
+ * — every tile should look the same so feedback signals stay reserved for
+ * genuinely interrupting states.
+ */
+export declare const StatusTile: React.ForwardRefExoticComponent<StatusTileProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,13 @@
+interface StepperFieldProps {
+    label: string;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    onChange: (value: number) => void;
+    inputStep?: number;
+    precision?: number;
+}
+/** @public */
+export declare function StepperField({ label, value, min, max, step, onChange, inputStep, precision, }: StepperFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/app/components/surface-padding.d.ts

@@ -0,0 +1,18 @@
+/**
+ * surface-padding — the single source of truth for the inset-padding contract
+ * shared by Surface and Card (D3).
+ *
+ * Both primitives expose the same 5-option padding scale. Previously each owned
+ * a parallel resolver (Card mapped to inline px values, Surface to CVA Tailwind
+ * classes) — same numbers, two declarations, free to drift. This module owns the
+ * option vocabulary + the resolved values; Card consumes the values inline.
+ *
+ * Surface keeps its CVA `p-[…]` class literals (Tailwind's JIT only generates CSS
+ * for class strings it can see in source), but types its variant against
+ * `PaddingOption` here so the two stay in lockstep.
+ */
+export type PaddingOption = 'component' | 'item' | 'px16' | 'px24' | 'none';
+/** Resolved CSS padding value for each option (inline-style form, used by Card). */
+export declare const PADDING_VALUES: Record<PaddingOption, string>;
+/** Resolve a padding option to its CSS value (falls back to 0 for safety). */
+export declare function resolvePaddingValue(option: PaddingOption): string;

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

@@ -0,0 +1,30 @@
+import React, { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import type { PaddingOption } from './surface-padding';
+declare const surfaceVariants: (props?: {
+    padding?: "none" | "item" | "px16" | "px24" | "component";
+    shadow?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type SurfaceVariantProps = VariantProps<typeof surfaceVariants>;
+interface SurfaceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'>, Omit<SurfaceVariantProps, 'shadow'> {
+    /** Surface content. */
+    children?: ReactNode;
+    /** Padding: 'component' (24px, default) | 'item' (16px) | primitive px values | 'none' (0px). */
+    padding?: PaddingOption;
+    /** Apply the two-layer card elevation shadow for lift. */
+    shadow?: boolean;
+    /** Override CSS overflow. */
+    overflow?: CSSProperties['overflow'];
+    /** Force a theme regardless of context: 'dark' | 'light'. Defaults to context value. */
+    theme?: 'dark' | 'light';
+    /** Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API. */
+    style?: CSSProperties;
+    /** Escape hatch: only use when tokenized props cannot express the required wrapper class. */
+    className?: string;
+    /** Element rendered as the outer wrapper. Defaults to 'div'. */
+    as?: React.ElementType;
+}
+/** @public */
+export declare const Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLDivElement>>;
+/** @internal — CVA variant helper; compose via Surface props instead. */
+export { surfaceVariants };

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

@@ -0,0 +1,40 @@
+/**
+ * Table - structured data table primitive for documentation and compact UI matrices.
+ * @category Display
+ * @tier primitive
+ */
+import { type ReactNode } from 'react';
+/** @public */
+export type TableColumnAlign = 'left' | 'center' | 'right';
+export type TableColumn = {
+    key: string;
+    label: ReactNode;
+    width?: string;
+    align?: TableColumnAlign;
+};
+export type TableCellSlot = 'label' | 'value' | 'description' | 'token' | 'code' | 'custom' | 'icon' | 'badge' | 'action';
+export type TableCell = {
+    slot: TableCellSlot;
+    content: ReactNode;
+    align?: TableColumnAlign;
+    colSpan?: number;
+    rowSpan?: number;
+};
+export type TableRow = {
+    key?: string;
+    cells: TableCell[];
+};
+type TableDensity = 'compact' | 'comfortable';
+export declare function Table({ columns, rows, caption, captionAction, description, minWidth, density, flush, stickyHeader, }: {
+    columns: TableColumn[];
+    rows: TableRow[];
+    caption?: ReactNode;
+    /** Optional action rendered to the right of the caption. */
+    captionAction?: ReactNode;
+    description?: ReactNode;
+    minWidth?: number | string;
+    density?: TableDensity;
+    flush?: boolean;
+    stickyHeader?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+/**
+ * Tabs — Radix-backed underline tabs (Root, List, Trigger, Content).
+ *
+ * Underline pattern math:
+ *   - TabsList carries `border-b border-border/40` (the divider, half-strength
+ *     so it anchors the strip without competing with content).
+ *   - TabsTrigger has `border-b-2 border-transparent -mb-px` at rest.
+ *     The `-mb-px` offsets the trigger DOWN by 1px so the trigger sits
+ *     on top of the list divider; the active 2px bottom border visually
+ *     REPLACES that 1px segment instead of stacking on it.
+ *   - Active state pairs the underline with a soft `bg-accent/5` tint that
+ *     extends down into TabsContent — the active tab visually "claims" its
+ *     content panel (folder-tab affordance, modern-soft).
+ *
+ * Overflow:
+ *   TabsList is horizontally scrollable (`overflow-x-auto whitespace-nowrap`)
+ *   for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar
+ *   chrome is hidden cross-browser (-webkit / firefox / IE).
+ *
+ * @category Navigation
+ * @tier primitive
+ */
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare const Tabs: import("react").ForwardRefExoticComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+export declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+export declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+/**
+ * Tag — interactive filter and category chip.
+ * @category Inputs
+ * @tier primitive
+ *
+ * The outer <button> carries the accessible 44px hit target directly via the
+ * size token while the inner pill keeps the visible surface compact. Colors
+ * (background, border-color, color) are owned by .hds-tag-btn / .hds-tag-pill
+ * in theme.css so :hover transitions work — inline styles beat :hover
+ * selectors and would silently break the effect.
+ *
+ * Active state: brand fill via [data-active="true"] in theme.css.
+ * Hover states: inactive → subtle tint + brand border; active → brand-hover fill.
+ */
+import React, { type ReactNode } from 'react';
+interface TagProps {
+    /** Tag content displayed inside the pill. */
+    children: ReactNode;
+    /** Whether the tag is active. */
+    active?: boolean;
+    /** Click handler for toggling the tag. */
+    onClick?: () => void;
+    /** Optional class hook for parent-level styling. */
+    className?: string;
+    /** Native tooltip for explicit file/path affordance. */
+    title?: string;
+    /** Accessible label when the visible text is abbreviated. */
+    'aria-label'?: string;
+}
+/** @public */
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,38 @@
+/**
+ * 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 {};