@hirobius/design-system 0.8.1

package/dist/types/src/app/components/activity-feed.d.ts

@@ -0,0 +1,43 @@
+/**
+ * ActivityFeed — chronological system event log.
+ * @category Display
+ * @tier pattern
+ * @doc-exempt: internal portfolio and systems timeline pattern; no standalone component doc page
+ *
+ * Renders a list of activity events using white space as the sole separator.
+ * No dividers, no borders between items. 48px gap (space.12) creates the
+ * visual grouping between events; 16px gap inside each item structures the
+ * content hierarchy.
+ *
+ * Typography mapping:
+ *   title       → heading3  (24px/1.25)
+ *   description → body      (16px/1.5)
+ *   timestamp   → technical (12px/1.0 mono)
+ *   category    → ui        (14px/1.5)
+ */
+import type { ReactNode } from 'react';
+/** @public */
+export type ActivityStatus = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+export interface ActivityEvent {
+    id: string;
+    title: string;
+    description: string;
+    timestamp: string;
+    category: string;
+    icon: ReactNode;
+    status: ActivityStatus;
+    action?: {
+        label: string;
+        onClick?: () => void;
+    };
+    /** Optional structured metadata rendered between description and action.
+     *  Reserved for compact metadata clusters like AgentTag (assignee,
+     *  tier, cost). Keeps description as prose; meta is for chips/tags. */
+    meta?: ReactNode;
+}
+export interface ActivityFeedProps {
+    events: ActivityEvent[];
+}
+/** @internal — demo placeholder data; supply your own ActivityEvent[] via the events prop. */
+export declare const defaultActivityEvents: ActivityEvent[];
+export declare function ActivityFeed({ events }: ActivityFeedProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+/**
+ * Alert - compact feedback surface with contextual severity.
+ * @category Feedback
+ * @tier primitive
+ */
+import React from 'react';
+type AlertTone = 'success' | 'danger' | 'warning' | 'info';
+interface AlertProps {
+    /** Feedback tone that controls icon, border, and surface treatment. */
+    tone?: AlertTone;
+    /** Optional heading shown above the body copy. */
+    title?: string;
+    /** Main alert message content. */
+    children: React.ReactNode;
+}
+/** @public */
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/src/app/components/asset-img.d.ts

@@ -0,0 +1,54 @@
+/**
+ * AssetImg - responsive asset frame with fallback placeholder handling.
+ * Contexts: default, lightbox, and detail.
+ * @category Display
+ * @tier primitive
+ */
+import { CSSProperties } from 'react';
+import type React from 'react';
+type AssetImgContext = 'default' | 'lightbox' | 'detail';
+interface AssetImgProps {
+    /** Image source path. */
+    src: string;
+    /** Accessible alt text. */
+    alt?: string;
+    /** Optional title attribute. */
+    title?: string;
+    /** Optional inline styles for layout adjustments. */
+    style?: CSSProperties;
+    /** Optional class hook for parent-level styling. */
+    className?: string;
+    /** Whether the image can be dragged. */
+    draggable?: boolean;
+    /** Dark-mode hint used by certain asset treatments. */
+    isDark?: boolean;
+    /** Natural asset width used to preserve aspect ratio in placeholders. */
+    naturalWidth?: number;
+    /** Natural asset height used to preserve aspect ratio in placeholders. */
+    naturalHeight?: number;
+    /** Click handler for interactive assets. */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Pointer-down handler for interactive assets. */
+    onMouseDown?: (e: React.MouseEvent) => void;
+    /** Pointer-move handler for interactive assets. */
+    onMouseMove?: (e: React.MouseEvent) => void;
+    /** Pointer-up handler for interactive assets. */
+    onMouseUp?: (e: React.MouseEvent) => void;
+    /** Pointer-leave handler for interactive assets. */
+    onMouseLeave?: (e: React.MouseEvent) => void;
+    /** Whether the expandable tooltip is shown when the image is clickable. */
+    expandable?: boolean;
+    /** Override label for the expandable tooltip. */
+    expandLabel?: string;
+    /** Rendering mode for the placeholder and image frame. */
+    context?: AssetImgContext;
+    /** Image loading attribute: 'lazy' (default) for off-screen, 'eager' for above-the-fold. */
+    loading?: 'lazy' | 'eager';
+}
+/**
+ * Display asset frame with fallback placeholder handling.
+ * @category Display
+ */
+/** @public */
+export declare function AssetImg({ src, alt, title, style, className, draggable, isDark: _isDark, naturalWidth, naturalHeight, onClick, onMouseDown, onMouseMove, onMouseUp, onMouseLeave, expandable, expandLabel, context, loading, }: AssetImgProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+/**
+ * Avatar - user or entity image with an initials fallback.
+ * @category Display
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const avatarVariants: (props?: {
+    size?: "sm" | "md" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+/** @public */
+export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>, AvatarVariantProps {
+    /** Image source. When absent or it fails to load, the initials fallback shows. */
+    src?: string;
+    /** Required descriptive alt / accessible name (e.g. the person's name). */
+    alt: string;
+    /** Explicit initials. Falls back to the first letters derived from `alt`. */
+    initials?: string;
+}
+/** Circular avatar. Renders the image when available, else initials from `alt`. */
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

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

@@ -0,0 +1,20 @@
+/**
+ * Badge - compact feedback badge for neutral and semantic states.
+ * @category Feedback
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: {
+    tone?: "success" | "danger" | "warning" | "info" | "neutral";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+/** @public */
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'style'>, BadgeVariantProps {
+    /** Element rendered as the badge wrapper. Defaults to 'span'. */
+    as?: React.ElementType;
+}
+/** Compact metadata/status chip. Tone is the only styling input. */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+/** @internal — CVA variant helper; compose via Badge props instead. */
+export { badgeVariants };

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

@@ -0,0 +1,26 @@
+/**
+ * Breadcrumb - hierarchical navigation trail.
+ * @category Navigation
+ * @tier pattern
+ */
+import * as React from 'react';
+/** @public */
+export interface BreadcrumbItem {
+    /** Visible label for the crumb. */
+    label: string;
+    /** Destination. Omit on the current (last) crumb to render it as plain text. */
+    href?: string;
+}
+/** @public */
+export interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    /** Ordered trail from root → current. The last item renders as the current page. */
+    items: BreadcrumbItem[];
+    /** Accessible label for the nav landmark. */
+    label?: string;
+}
+/**
+ * Breadcrumb trail. Links route through the HDS router seam (plain anchors with
+ * no router, client-side nav when a router adapter is provided). The final item
+ * is marked aria-current="page".
+ */
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,37 @@
+/**
+ * @category Actions
+ * @tier primitive
+ * @figma Variant=Button/Variant
+ * @figma Size=Button/Size
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: {
+    variant?: "primary" | "secondary" | "tertiary";
+    size?: "sm" | "md" | "lg";
+    iconOnly?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+/** @public */
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, Omit<ButtonVariantProps, 'iconOnly'> {
+    /** Render the button chrome onto a single child element for link semantics. */
+    asChild?: boolean;
+    /** Optional accessible label used when children are not suitable as the name. */
+    label?: string;
+    /** Show a busy indicator and disable interaction. */
+    loading?: boolean;
+    /** Leading icon rendered before the label. */
+    iconLeft?: React.ReactNode;
+    /** Trailing icon rendered after the label. */
+    iconRight?: React.ReactNode;
+    /** Render the button as a square icon-only control. Requires aria-label. */
+    iconOnly?: boolean;
+    /** Disable interaction. Mirrors the native HTML attribute. */
+    disabled?: boolean;
+}
+/**
+ * Triggers an action when activated.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/** @internal — CVA variant helper; compose via Button props instead. */
+export { buttonVariants };

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

@@ -0,0 +1,23 @@
+/**
+ * @category Feedback
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+type CalloutTone = 'accent' | 'info' | 'success' | 'warning' | 'danger';
+declare const calloutVariants: (props?: {
+    tone?: "success" | "danger" | "warning" | "info" | "accent";
+    italic?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type CalloutVariantProps = VariantProps<typeof calloutVariants>;
+export interface CalloutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, Omit<CalloutVariantProps, 'italic'> {
+    /** Tone — drives the left rule color and bg tint. */
+    tone?: CalloutTone;
+    /** Italicize the body content (quote / pull-quote pattern). */
+    italic?: boolean;
+}
+/**
+ * Tone-driven side-rule callout for status, quotes, hypotheses.
+ */
+export declare const Callout: React.ForwardRefExoticComponent<CalloutProps & React.RefAttributes<HTMLDivElement>>;
+export default Callout;

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

@@ -0,0 +1,119 @@
+/**
+ * Card — surface container with slot anatomy (12d-card-anatomy).
+ * @category Display
+ * @tier primitive
+ *
+ * Slot anatomy (DESIGN.md §"Card Anatomy"). Status, progress, and metadata are
+ * layout-bearing — they live in slots, never inline next to prose.
+ *
+ *   <Card tone="accent">
+ *     <Card.Header metadata={<Badge tone="warning">in-progress</Badge>}>
+ *       <Card.Title>Discovery phase</Card.Title>
+ *       <Card.Description>Stakeholder interviews and audit prep.</Card.Description>
+ *     </Card.Header>
+ *     <Card.Progress value={42} max={100} label="5 / 12 tasks" />
+ *     <Card.Metric label="Retainer" value="$3,500" sub="Active" />
+ *     <Card.Body>…</Card.Body>
+ *     <Card.Footer>…</Card.Footer>
+ *   </Card>
+ *
+ * Slot reservations:
+ * - Header: title (h3) + optional description (caption) + optional metadata
+ *   zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans).
+ * - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its
+ *   spacing — never crowds adjacent prose.
+ * - Metric: single label-uppercase + big value (h2) + optional sub-line.
+ *   Reserved vertical block. Use multiple side-by-side via flex/grid container.
+ * - Body: prose, lists, structured content. NO inline status, progress, or
+ *   thin colored bars. Group sections via separate <Card.Body> blocks.
+ * - Footer: actions, secondary metadata, timestamps.
+ *
+ * Tone prop: 'default' (neutral border) | 'accent' (border-accent + raised bg)
+ * for highlighted variants like "recommended package", or feedback tones for
+ * status-driven cards. Tone replaces hand-rolled `pkgHighlight`-style overrides.
+ *
+ * Legacy props (padding / gap / noPadding / as / style) are retained.
+ * Existing callers that pass raw children continue to work; new callers
+ * should prefer compound parts + `padding="none"`.
+ *
+ * Depth comes from semantic.color.border.default (role.border) at rest;
+ * elevation tokens are not bound by default — pass `className="shadow-..."`
+ * for a hover/floating treatment on interactive cards.
+ */
+import * as React from 'react';
+import hds from '../design-system/tokens';
+import { type PaddingOption } from './surface-padding';
+type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;
+type CardTone = 'default' | 'accent' | 'success' | 'warning' | 'danger';
+/** @public */
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Render-as element for the root wrapper. */
+    as?: React.ElementType;
+    /** Legacy padding prop for raw-children cards. Use `none` when composing parts. */
+    padding?: PaddingOption;
+    /** Legacy gap prop for the root flex container. */
+    gap?: GapOption;
+    /** Legacy convenience flag that removes inner padding. */
+    noPadding?: boolean;
+    /** Visual tone — controls border color/weight. Default is BORDERLESS;
+     *  `accent` for highlighted entries (e.g. recommended package);
+     *  semantic tones for status-driven cards (border IS the signal).
+     *  For a neutral-bordered card without semantic meaning, pass
+     *  `bordered` instead of overloading tone. */
+    tone?: CardTone;
+    /** Opt in to a neutral 1px border on the default tone. Use for genuinely
+     *  discrete standalone records in sparse layouts where containment helps
+     *  legibility. Default false — repeated cards in grids should stay
+     *  borderless and rely on whitespace, rails, or section dividers. */
+    bordered?: boolean;
+}
+interface CardComponent extends React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+    Progress: typeof CardProgress;
+    Metric: typeof CardMetric;
+}
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Top-of-card metadata zone — status badges, tags, eyebrow labels.
+     *  Accepts <Badge>, <Tag>, or compound nodes. NEVER pass raw spans
+     *  with status colors here; use the proper primitive so tone, padding,
+     *  and accessibility role are consistent.
+     *
+     *  Rendered ABOVE the title (Material/Polaris/Carbon convention) — no
+     *  two-column flex, no crowding next to long titles, mobile-friendly. */
+    metadata?: React.ReactNode;
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface CardProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow'> {
+    /** Current value (0..max). */
+    value: number;
+    /** Maximum value. Defaults to 100. */
+    max?: number;
+    /** Optional caption rendered beneath the bar. Reserved baseline so it
+     *  never crowds the slot above. Accepts strings or react nodes. */
+    label?: React.ReactNode;
+    /** Visual tone for the fill. Defaults to accent. Use feedback tones to
+     *  signal status without a separate badge (e.g. red bar for over-budget). */
+    tone?: CardTone;
+}
+declare const CardProgress: React.ForwardRefExoticComponent<CardProgressProps & React.RefAttributes<HTMLDivElement>>;
+interface CardMetricProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Uppercase eyebrow label (e.g. "Retainer", "Open tasks"). */
+    label: React.ReactNode;
+    /** Big value (e.g. "$3,500", "12", "67%"). Rendered at h2 weight. */
+    value: React.ReactNode;
+    /** Optional sub-line beneath the value (e.g. "Active", "this week"). */
+    sub?: React.ReactNode;
+    /** Tone for the value — applies semantic color. Defaults to neutral. */
+    tone?: CardTone;
+}
+declare const CardMetric: React.ForwardRefExoticComponent<CardMetricProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Card: CardComponent;
+export { CardHeader, CardTitle, CardDescription, CardBody, CardFooter, CardProgress, CardMetric };

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

@@ -0,0 +1,20 @@
+/**
+ * HdsCheckbox — custom-drawn checkbox with check / indeterminate glyph.
+ * @category Inputs
+ * @tier primitive
+ */
+import type { InputHTMLAttributes } from 'react';
+/** HdsCheckbox — custom-drawn checkbox with check / indeterminate glyph. */
+export type HdsCheckboxDemoState = 'rest' | 'hover' | 'focused' | 'pressed' | 'disabled';
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
+    /** Checkbox label displayed next to the control. */
+    label: string;
+    /** Current checked state. */
+    checked: boolean;
+    /** Called when the checkbox changes. */
+    onChange: (v: boolean) => void;
+    /** Mixed state — visually a dash; supersedes the check glyph. */
+    indeterminate?: boolean;
+}
+export declare const HdsCheckbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/types/src/app/components/cinematic-link.d.ts

@@ -0,0 +1,13 @@
+/**
+ * CinematicLink - cinematic editorial link treatment for portfolio surfaces.
+ * @category Branding
+ * @tier primitive
+ */
+import React from 'react';
+interface CinematicLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
+    href: string;
+    children: string;
+}
+/** @public */
+export declare function CinematicLink({ href, children, style, className, ...rest }: CinematicLinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/app/components/code-block.d.ts

@@ -0,0 +1,29 @@
+/**
+ * CodeBlock - code display with copy button and optional collapsible toggle.
+ * @category Display
+ * @tier primitive
+ */
+interface CodeBlockProps {
+    /** Code string displayed in the block. */
+    code: string;
+    /** Visual presentation mode for block snippets vs inline single-line code. */
+    variant?: 'block' | 'inline';
+    /** When true, inline code truncates from the start rather than the end. */
+    truncateFromStart?: boolean;
+    /** Optional language label shown in the header (also drives syntax coloring). */
+    language?: string;
+    /** Optional filename label shown in the header. */
+    filename?: string;
+    /**
+     * When true (block variant only), code is hidden behind a "Show code" toggle.
+     * Off by default to preserve backward compatibility for existing consumers.
+     */
+    collapsible?: boolean;
+    /** When `collapsible`, controls the initial state. Defaults to collapsed. */
+    defaultExpanded?: boolean;
+    /** Optional class hook for layout-specific styling. */
+    className?: string;
+}
+/** @public */
+export declare function CodeBlock({ code, variant, truncateFromStart, language, filename, collapsible, defaultExpanded, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,46 @@
+/**
+ * Combobox — searchable single-select (Popover + filtered listbox).
+ * @category Inputs
+ * @tier pattern
+ * @doc-exempt: no Inputs-overlay doc page yet — add demo when created
+ *
+ * A select-with-search built on the HDS Popover. The trigger shows the current
+ * selection; opening reveals a search field that filters the option list.
+ * Full keyboard support (↑/↓ to move, Enter to choose, Esc/outside-click to
+ * close) and listbox/option ARIA. Controlled via `value` + `onChange`.
+ *
+ *   <Combobox
+ *     options={[{ value: 'us', label: 'United States' }, …]}
+ *     value={country}
+ *     onChange={setCountry}
+ *     placeholder="Select a country"
+ *   />
+ */
+import * as React from 'react';
+/** @public */
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/** @public */
+export interface ComboboxProps {
+    /** Selectable options. */
+    options: ComboboxOption[];
+    /** Currently selected value, or null when nothing is chosen. */
+    value: string | null;
+    /** Fired with the chosen option's value. */
+    onChange: (value: string) => void;
+    /** Trigger text when nothing is selected. */
+    placeholder?: string;
+    /** Placeholder for the search field. */
+    searchPlaceholder?: string;
+    /** Shown when the filter matches no options. */
+    emptyMessage?: string;
+    /** Accessible label for the trigger (when not labelled by a <Field>). */
+    'aria-label'?: string;
+    className?: string;
+    disabled?: boolean;
+}
+/** @public */
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/src/app/components/component-instance-matrix.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ComponentInstanceMatrix — responsive specimen matrix for variant and state parity.
+ *
+ * @category Utilities
+ * @tier primitive
+ * @doc-exempt: specimen matrix helper used by docs pages, not a consumer-facing HDS surface.
+ */
+import React from 'react';
+/** @public */
+export declare function ComponentInstanceMatrix({ componentName, dimensionX, dimensionY, title, isMobile: _isMobile, rowLabelWidth: _rowLabelWidth, rowLabelTone, freezeRowState, renderInstance, }: {
+    componentName: string;
+    dimensionX: string;
+    dimensionY: string;
+    title?: string;
+    isMobile: boolean;
+    rowLabelWidth?: number;
+    rowLabelTone?: 'primary' | 'secondary';
+    /** Wrap each row's rendered instance in FreezeState so the visual state is frozen. */
+    freezeRowState?: boolean;
+    renderInstance: (rowKey: string, columnKey: string) => React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+/**
+ * Container — semantic width-constrained layout.
+ * @category Layout
+ * @tier primitive
+ *
+ * Centers content horizontally and applies semantic max-width constraints.
+ * - maxWidth options: 'content' (760px prose) | 'max' (1200px full layout)
+ * - No arbitrary pixel values allowed
+ *
+ * Usage:
+ *   <Container maxWidth="max">
+ *     <div>...</div>
+ *   </Container>
+ */
+import type { ReactNode, CSSProperties } from 'react';
+type MaxWidthOption = 'content' | 'max';
+interface ContainerProps {
+    /** Container content. */
+    children: ReactNode;
+    /** Max width: 'content' (760px for prose) | 'max' (1200px for full layouts). Defaults to 'max'. */
+    maxWidth?: MaxWidthOption;
+    /** Deprecated. Container no longer owns internal padding. */
+    padding?: string;
+    /** Optional inline styles for layout-specific adjustments. */
+    style?: CSSProperties;
+    /** Optional class hook. */
+    className?: string;
+}
+/** @public */
+export declare function Container({ children, maxWidth, padding, style, className, }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,73 @@
+/**
+ * Dialog — modal dialog (shadcn baseline, compound parts).
+ * @category Overlays
+ * @tier primitive
+ * @doc-exempt: no Overlays doc page yet — add demo when /ops/hds/components/overlays is created
+ *
+ * shadcn-baseline implementation (8s-7): Radix Dialog primitive
+ * (@radix-ui/react-dialog) themed with role tokens. Provides focus
+ * trap, scroll lock, ESC-to-close, backdrop scrim, and portal
+ * mounting out of the box.
+ *
+ *   <Dialog>
+ *     <Dialog.Trigger asChild>
+ *       <Button>Open</Button>
+ *     </Dialog.Trigger>
+ *     <Dialog.Content>
+ *       <Dialog.Header>
+ *         <Dialog.Title>Confirm</Dialog.Title>
+ *         <Dialog.Description>Are you sure?</Dialog.Description>
+ *       </Dialog.Header>
+ *       <Dialog.Footer>
+ *         <Dialog.Close asChild>
+ *           <Button variant="secondary">Cancel</Button>
+ *         </Dialog.Close>
+ *       </Dialog.Footer>
+ *     </Dialog.Content>
+ *   </Dialog>
+ *
+ * Surface uses role.popover (semantic.color.surface.overlay) +
+ * shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is
+ * a foreground/80 wash so it picks up the theme without a hardcoded
+ * black. The close affordance is rendered as an absolutely-positioned
+ * X inside Content; pass `hideClose` to opt out for fully-custom layouts.
+ */
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** @public */
+export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /** Hide the built-in close affordance. Useful for fully custom layouts. */
+    hideClose?: boolean;
+}
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export interface DialogProps extends React.ComponentProps<typeof DialogPrimitive.Root> {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** When true (default), traps focus and locks scroll while open. */
+    modal?: boolean;
+    /** Children — typically `Dialog.Trigger` and `Dialog.Content`. */
+    children?: React.ReactNode;
+}
+interface DialogComponent extends React.FC<DialogProps> {
+    Trigger: typeof DialogTrigger;
+    Portal: typeof DialogPortal;
+    Overlay: typeof DialogOverlay;
+    Content: typeof DialogContent;
+    Header: typeof DialogHeader;
+    Footer: typeof DialogFooter;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Close: typeof DialogClose;
+}
+export declare const Dialog: DialogComponent;
+export { DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, };

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

@@ -0,0 +1,32 @@
+/**
+ * Disclosure - compact disclosure surface for optional explanatory content.
+ * @category Layout
+ * @tier pattern
+ */
+import React, { type CSSProperties, type ReactNode } from 'react';
+type DisclosureVariant = 'panel' | 'nav' | 'card';
+type DisclosureProps = {
+    /** Summary label rendered in the disclosure trigger. Accepts a string or ReactNode for icon+label combos. */
+    label: ReactNode;
+    /** Whether the disclosure starts in the open state. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called whenever the disclosure toggles. */
+    onOpenChange?: (open: boolean) => void;
+    /** Visual treatment for docs panels, nav groups, or summary cards. */
+    variant?: DisclosureVariant;
+    /** Keeps the disclosure visually highlighted even when closed. */
+    accent?: boolean;
+    /** Optional className passthrough for the trigger. */
+    className?: string;
+    /** Optional trigger style overrides. */
+    triggerStyle?: CSSProperties;
+    /** Optional inner content style overrides. */
+    contentStyle?: CSSProperties;
+    /** Content revealed when the disclosure is expanded. */
+    children: ReactNode;
+};
+/** @public */
+export declare const Disclosure: React.ForwardRefExoticComponent<DisclosureProps & React.RefAttributes<HTMLDivElement>>;
+export {};