@hirobius/design-system 0.8.1

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

@@ -0,0 +1,21 @@
+/**
+ * Divider — semantic separator between content regions.
+ * @category Layout
+ * @tier primitive
+ */
+import type { CSSProperties } from 'react';
+interface DividerProps {
+    /** Divider orientation. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Perpendicular spacing around the divider. */
+    spacing?: string | number;
+    /** Increase the stroke weight for stronger separation. */
+    strong?: boolean;
+    /** Optional inline styles for one-off layout adjustments. */
+    style?: CSSProperties;
+    /** Optional class hook for parent-level styling. */
+    className?: string;
+}
+/** @public */
+export declare function Divider({ orientation, spacing, strong, style, className, }: DividerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+import { type LucideIcon } from 'lucide-react';
+interface DocLinkCardProps {
+    /** Primary title displayed in the card. */
+    title: string;
+    /** Supporting body copy shown below the title. */
+    description?: string;
+    /** Destination route or URL. */
+    href: string;
+    /** Icon rendered in the card header. */
+    icon: LucideIcon;
+    /** Optional metadata label rendered above the title. */
+    meta?: string;
+    /** Typography style used for the meta label. */
+    metaStyle?: 'caption' | 'ui';
+    /** Tint the card surface for emphasis. */
+    accent?: boolean;
+    /** Card layout variant. */
+    variant?: 'feature' | 'pager';
+    /** Disable navigation and reduce contrast. */
+    disabled?: boolean;
+    /** Directional affordance for the header icon. */
+    affordance?: 'up-right' | 'right' | 'left';
+}
+/** @public */
+export declare function DocLinkCard({ title, description, href, icon: CardIcon, meta, metaStyle, accent, variant, disabled, affordance, }: DocLinkCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/app/components/empty-state.d.ts

@@ -0,0 +1,24 @@
+/**
+ * EmptyState — consistent no-data placeholder for lists, grids, and sections.
+ * @category Display
+ * @tier primitive
+ * @ai-intent Inline empty-state placeholder so any list, grid, or section can
+ *   communicate "no data yet" with consistent muted typography instead of agents
+ *   inventing one-off `<p>No items.</p>` lines.
+ * @ai-rules Use only for inline empty states inside an existing section. Do NOT
+ *   use for full-page errors (use ErrorPage) or for loading states (use a
+ *   skeleton). Do NOT wrap in Surface or Card — the empty state is a
+ *   typographic message, not a chrome-bearing container.
+ */
+import * as React from 'react';
+/** @public */
+export interface EmptyStateProps {
+    /** Primary message. Sentence-case, no trailing period required. */
+    title: React.ReactNode;
+    /** Optional supporting line. */
+    description?: React.ReactNode;
+    /** Escape hatch for layout adjustments — token-only, no business logic. */
+    className?: string;
+}
+/** @public */
+export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src/app/components/error-boundary.d.ts

@@ -0,0 +1,25 @@
+/** @internal — utility-tier component; not part of @hirobius/design-system public API. */
+/**
+ * ErrorBoundary — slot-scoped recovery surface for runtime render failures.
+ * @category Feedback
+ * @tier utility
+ * @doc-exempt: runtime safety infra, not an LLM-facing layout primitive
+ */
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    slotLabel?: string;
+    minHeight?: string;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+    retryNonce: number;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): Pick<ErrorBoundaryState, 'error'>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    private handleRetry;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

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

@@ -0,0 +1,9 @@
+type ErrorPatternProps = {
+    /** Large recovery headline rendered through the animated cascade treatment. */
+    displayText?: string;
+    /** Supporting message explaining the recovery state to the user. */
+    message?: string;
+};
+/** @public */
+export declare function ErrorPattern({ displayText, message, }: ErrorPatternProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+/**
+ * @category Display
+ * @tier primitive
+ */
+import * as React from 'react';
+declare const VALUE_TONE: {
+    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 FieldTone = keyof typeof VALUE_TONE;
+/** @public */
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    value?: React.ReactNode;
+    tone?: FieldTone;
+    mono?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Caption label paired with a value — used in metadata grids and read-only forms.
+ */
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,106 @@
+/**
+ * Form + FormField — validation-agnostic form layout + field-wiring seam.
+ * @category Inputs
+ * @tier pattern
+ * @doc-exempt: no Inputs/forms doc page yet — add demo when created
+ *
+ * HDS does not depend on a form/validation library. `FormField` owns the a11y
+ * wiring (label↔control association, aria-invalid, aria-describedby for
+ * description + error) and accepts a plain `error` string — so the validation
+ * SOURCE is whatever the consumer brings: native constraint validation,
+ * react-hook-form, zod, Formik, etc. (Mirrors the router-adapter philosophy:
+ * works with zero deps; richer when you inject your own.)
+ *
+ *   <Form onSubmit={…}>
+ *     <FormField label="Full name" error={errors.name} required>
+ *       <input className="…" />            // bare / native or any control
+ *     </FormField>
+ *     <Button type="submit">Save</Button>
+ *   </Form>
+ *
+ * NOTE: the HDS `Input` already self-wires its own label/error/aria via its
+ * `label` + `error` + `errorMessage` props — use those directly rather than
+ * wrapping `Input` in `FormField` (which would double-wire). `FormField` is for
+ * controls that don't self-wire: native inputs, `Select`, `Combobox`, checkboxes.
+ *
+ * `FormField` cloneElement-wires its single child. That clone is incompatible
+ * with controls that carry a callback ref managed elsewhere (e.g.
+ * react-hook-form's `useController` field.ref — re-cloning detaches it). For
+ * that case use `useFieldWiring` + `FormFieldShell` to wire a control you render
+ * directly (no clone); the `@hirobius/design-system/form` adapter does exactly this.
+ */
+import * as React from 'react';
+/** @public */
+export type FormProps = React.FormHTMLAttributes<HTMLFormElement>;
+/** Styled `<form>` with consistent vertical field rhythm. */
+export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+/** @public */
+export interface FieldWiringInput {
+    /** Explicit control id. Defaults to a generated id. */
+    htmlFor?: string;
+    /** The control's own id, if it brings one. */
+    childId?: string;
+    /** Present when the field has helper text. */
+    description?: string;
+    /** Present when the field has an error. */
+    error?: string;
+}
+/** @public */
+export interface FieldWiring {
+    /** Id shared by the label's htmlFor and the control. */
+    controlId: string;
+    descriptionId: string;
+    errorId: string;
+    /** Combined aria-describedby (description + error ids), or undefined. */
+    describedBy?: string;
+}
+/**
+ * Computes the stable ids + `aria-describedby` linking a label, helper text, and
+ * error to a single control. Shared by `FormField` (clone path) and consumers
+ * that render their control directly (e.g. the form adapter's `HdsFormField`).
+ * @public
+ */
+export declare function useFieldWiring({ htmlFor, childId, description, error, }: FieldWiringInput): FieldWiring;
+/** @public */
+export interface FormFieldShellProps {
+    /** Id of the control rendered as `children` (drives the label's htmlFor). */
+    controlId: string;
+    label: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    className?: string;
+    /** The already-rendered control (already carrying its own id/aria props). */
+    children: React.ReactNode;
+}
+/**
+ * Presentational label + control slot + helper/error markup. Renders `children`
+ * verbatim — it does NOT clone — so it is safe to use with controls that own a
+ * callback ref. Pair it with `useFieldWiring` to apply ids/aria yourself.
+ * @public
+ */
+export declare const FormFieldShell: React.ForwardRefExoticComponent<FormFieldShellProps & React.RefAttributes<HTMLDivElement>>;
+/** @public */
+export interface FormFieldProps {
+    /** Field label, associated to the control via htmlFor/id. */
+    label: string;
+    /** The single form control (native input, Select, Combobox, …). */
+    children: React.ReactElement;
+    /** Explicit control id. Defaults to a generated id. */
+    htmlFor?: string;
+    /** Helper text below the control; linked via aria-describedby. */
+    description?: string;
+    /** Error message; when set, marks the control aria-invalid and links it. */
+    error?: string;
+    /** Adds a required marker and sets `required` on the control. */
+    required?: boolean;
+    className?: string;
+}
+/**
+ * Label + description + error wrapper that wires the a11y relationships onto its
+ * single child control via cloneElement. Validation-library agnostic — pass
+ * `error` from whatever you use. For controls with an externally-managed callback
+ * ref (e.g. react-hook-form), use `FormFieldShell` + `useFieldWiring` instead.
+ * @public
+ */
+export declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src/app/components/foundation-swatch.d.ts

@@ -0,0 +1,39 @@
+/**
+ * FoundationSwatch - governed foundation specimen for color and semantic role previews.
+ * @category Utilities
+ * @tier pattern
+ */
+import type { ReactNode } from 'react';
+type FoundationSwatchPreviewPosition = 'bottom-left' | 'top-left' | 'center';
+type FoundationSwatchTokenDisplayPreset = 'depth1' | 'depth2' | 'full';
+/** @public */
+export type FoundationSwatchProps = {
+    /** Primary label rendered inside or below the swatch. */
+    label: string;
+    /** Whether to hide the preview label inside the swatch specimen. */
+    hidePreviewLabel?: boolean;
+    /** Optional token path rendered as a condensed node inside the swatch surface. */
+    tokenPath?: string;
+    /** Shorthand preset for how the token path renders inside the specimen. */
+    tokenDisplayPreset?: FoundationSwatchTokenDisplayPreset;
+    /** Placement of the specimen content inside the swatch surface. */
+    previewPosition?: FoundationSwatchPreviewPosition;
+    /** Background fill or tone shown by the specimen. */
+    background: string;
+    /** Optional text/value line shown inside the specimen. */
+    value?: string;
+    /** Optional supporting lines shown inside the specimen. */
+    details?: string[];
+    /** Foreground color used for text inside the specimen. */
+    foreground?: string;
+    /** Custom specimen content rendered inside card-style swatches. */
+    specimen?: ReactNode;
+    /** Optional note rendered below card-style swatches. */
+    note?: ReactNode;
+    /** Whether to show a bordered specimen surface. */
+    bordered?: boolean;
+    /** Explicit color value (hex or CSS var name) to pin the token chip's swatch square, overriding auto-resolution from tokenPath. */
+    swatchVar?: string;
+};
+export declare function FoundationSwatch({ label, hidePreviewLabel, tokenPath, tokenDisplayPreset, previewPosition, background, value, details, foreground, specimen, note, bordered, swatchVar, }: FoundationSwatchProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,65 @@
+/**
+ * Grid — responsive grid composition primitive.
+ * @category Layout
+ * @tier primitive
+ * @ai-intent Solves multi-column layout and repeatable alignment with token-governed gaps, responsive column collapse, and a first-class subgrid escape hatch for nested structure.
+ * @ai-rules Use Grid for spatial layout, not for surface styling or content padding. Do NOT apply background, border, or internal padding directly to Grid to mimic a card. Do NOT use arbitrary CSS grid templates when fixed, auto-fit, or subgrid modes already express the layout. Do NOT use Grid for simple one-dimensional stacks where Stack is sufficient.
+ *
+ * Enforces semantic gap and column values. No arbitrary CSS grid.
+ * - layout='fixed':   responsive base (collapses via CSS at tablet/mobile).
+ *                     `columns` sets desktop count (default 12). Tablet/mobile
+ *                     clamp to min(8, cols) and min(4, cols) respectively.
+ * - layout='auto-fit': responsive card wrapping via auto-fit.
+ * - subgrid=true:     sets gridTemplateColumns:'subgrid' for nested alignment.
+ *
+ * Usage (default responsive 12-col):
+ *   <Grid>
+ *     <Grid.Item colSpan={6}>…</Grid.Item>
+ *     <Grid.Item colSpan={6}>…</Grid.Item>
+ *   </Grid>
+ *
+ * Usage (responsive auto-fit):
+ *   <Grid layout="auto-fit">
+ *     <Card />
+ *     <Card />
+ *   </Grid>
+ */
+import React, { type ReactNode, type CSSProperties } from 'react';
+type SemanticGap = 'tight' | 'normal' | 'inset' | 'spacious';
+type GridLayout = 'fixed' | 'auto-fit';
+interface GridProps {
+    /** Grid content. */
+    children: ReactNode;
+    /** Grid layout mode: 'fixed' (responsive) or 'auto-fit' (card wrapping). Defaults to 'fixed'. */
+    layout?: GridLayout;
+    /** Desktop column count for layout='fixed'. Tablet clamps to min(8,n), mobile to min(4,n). Defaults to 12. */
+    columns?: number;
+    /** Gap between grid items: semantic only. Defaults to 'inset' (32px). */
+    gap?: SemanticGap;
+    /** If true, sets gridTemplateColumns:'subgrid' for nested grid alignment. */
+    subgrid?: boolean;
+    /** 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;
+}
+interface GridItemProps {
+    children: ReactNode;
+    /** Number of columns this item spans (out of the grid's column count). */
+    colSpan?: number;
+    /** Starting column position (1-based). */
+    colOffset?: number;
+    /** Escape hatch: only use for item-level 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 grid item wrapper. */
+    as?: React.ElementType;
+}
+/** @public */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

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

@@ -0,0 +1,42 @@
+/**
+ * HeadingStack — enforced vertical rhythm for heading + subheading pairs.
+ *
+ * Automatically handles gap and secondary color, preventing manual stacking.
+ * - Heading level: 'heading1' | 'heading2' | 'heading3'
+ * - Gap: px4 (tight) | px8 (default)
+ * - Subheading color: always var(--semantic-color-content-secondary)
+ *
+ * GUARDRAIL: Never manually stack headings using Stack. Always use HeadingStack.
+ *
+ * Usage:
+ *   <HeadingStack level="heading1" heading="Main Title" subheading="Subtitle text" />
+ *   <HeadingStack level="heading2" heading="Section" subheading="Description" gap="px4" />
+ *
+ * @category Typography
+ * @tier primitive
+ * @doc-exempt: internal typography lockup utility, documented through page composition rather than a standalone component page
+ */
+import React, { type ElementType } from 'react';
+type HdsHeadingLevel = 'heading1' | 'heading2' | 'heading3';
+type HdsHeadingGap = 'px4' | 'px8';
+type HdsHeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HdsSupportingTag = 'p' | 'div' | 'span';
+interface HeadingStackProps {
+    /** The heading content (string). */
+    heading: string;
+    /** The supporting copy rendered beneath the heading. */
+    subheading: string;
+    /** Semantic heading level: heading1 | heading2 | heading3. */
+    level: HdsHeadingLevel;
+    /** Gap between heading and subheading: px4 (tight) | px8 (default). */
+    gap?: HdsHeadingGap;
+    /** Override the root semantic wrapper while preserving the governed layout styles. */
+    as?: ElementType;
+    /** Override the heading tag without altering the applied typography style. */
+    headingAs?: HdsHeadingTag;
+    /** Override the supporting-copy tag. */
+    subheadingAs?: HdsSupportingTag;
+}
+/** @public */
+export declare const HeadingStack: React.ForwardRefExoticComponent<HeadingStackProps & React.RefAttributes<HTMLElement>>;
+export {};

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

@@ -0,0 +1,12 @@
+/** @public */
+export type HistoryCardCommit = {
+    hash: string | null;
+    date: string;
+    message: string;
+    displayMessage?: string;
+};
+export interface HistoryCardProps {
+    commit: HistoryCardCommit;
+    href: string;
+}
+export declare function HistoryCard({ commit, href }: HistoryCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import type { LucideIcon } from 'lucide-react';
+import { ButtonProps } from './button';
+import { IconSize } from './icon';
+interface IconButtonProps extends Omit<ButtonProps, 'iconOnly' | 'children' | 'size'> {
+    /** Lucide icon rendered inside the button. */
+    icon: LucideIcon;
+    /** Size token for the button itself. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Override the inner icon size; defaults to the matching button ramp size. */
+    iconSize?: IconSize;
+    /** Override the inner icon color. */
+    iconColor?: string;
+    /** Accessible label for the icon button. */
+    label?: string;
+    /** Accessible label fallback for backward compatibility. */
+    'aria-label'?: string;
+}
+/**
+ * IconButton — compact icon-only action surface.
+ */
+/** @public */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,30 @@
+/**
+ * Icon — semantic icon wrapper for Lucide icons.
+ * @category Display
+ * @tier primitive
+ */
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import hds from '../design-system/tokens';
+/** @public */
+export type IconSize = keyof typeof hds.iconSize | number | string;
+export interface IconProps {
+    /** Lucide icon component to render. */
+    icon: LucideIcon;
+    /** Size token from `hds.iconSize`. */
+    size?: IconSize;
+    /** CSS color value or token, such as `var(--semantic-color-content-secondary)`. */
+    color?: string;
+    /** Optional class hook for layout or utility styling (rotation, transition, etc.). */
+    className?: string;
+    /** Optional inline styles for rare rotation, transition, or layout tweaks. */
+    style?: React.CSSProperties;
+    /**
+     * Stroke weight shim for backward compatibility with former Phosphor weight prop.
+     * Maps to Lucide's `strokeWidth` (thin=1, light=1.5, regular=2, bold=2.5).
+     */
+    weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+    /** `aria-hidden` defaults to true because HDS icons are decorative by default. */
+    'aria-hidden'?: boolean | 'true' | 'false';
+}
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,10 @@
+/** @public */
+export interface InfoPageProps {
+    /** Theme flag retained for route-wrapper parity; tokenized CSS drives the actual theme swap. */
+    isDark: boolean;
+}
+/**
+ * InfoPage - branded profile surface used for the portfolio landing page.
+ * @category Branding
+ */
+export declare function InfoPage({ isDark: _isDark }: InfoPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from 'react';
+type InlineCodeProps = {
+    children: ReactNode;
+    style?: CSSProperties;
+    /** Compact mode is tuned for dense body copy and table prose. */
+    compact?: boolean;
+    /** Show a copy-to-clipboard button. children must be a string when true. */
+    copyable?: boolean;
+};
+/** @public */
+export declare function InlineCode({ children, style, compact, copyable }: InlineCodeProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+/**
+ * InlineLink ” inline navigation and external-link primitive for body copy.
+ * @category Navigation
+ * @tier primitive
+ */
+import React from 'react';
+interface InlineLinkProps {
+    /** Destination route or URL. */
+    href: string;
+    /** Inline label or content to render inside the link. */
+    children: React.ReactNode;
+    /** Append the external-link icon for non-internal URLs. */
+    externalIcon?: boolean;
+}
+/** @public */
+export declare function InlineLink({ href, children, externalIcon }: InlineLinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,46 @@
+/**
+ * Input — text field primitive with label, helper, and error slots.
+ * @category Inputs
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const inputVariants: (props?: {
+    size?: "sm" | "md" | "lg";
+    textStyle?: "body" | "mono";
+    invalid?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type InputFieldType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+/** @public */
+export type InputSize = NonNullable<VariantProps<typeof inputVariants>['size']>;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'disabled' | 'size'> {
+    /** Native input type. */
+    type?: InputFieldType;
+    /** Field height tier. */
+    size?: InputSize;
+    /** Body (sans) or mono text style for the value. */
+    textStyle?: 'body' | 'mono';
+    /** Field label rendered above the input. */
+    label?: string;
+    /** Supporting helper text rendered below the input when not in error. */
+    helperText?: string;
+    /** Optional leading visual rendered inside the input shell. */
+    leadingVisual?: React.ReactNode;
+    /** Optional trailing visual rendered inside the input shell. */
+    trailingVisual?: React.ReactNode;
+    /** Disable interaction. */
+    disabled?: boolean;
+    /** Mark the field as invalid (sets aria-invalid + destructive border). */
+    error?: boolean;
+    /** Error message rendered below the input when `error` is true. */
+    errorMessage?: string;
+    /** Show busy indicator and disable interaction. */
+    loading?: boolean;
+    /** Class hook for the outer wrapper. */
+    className?: string;
+    /** Class hook for the input element itself. */
+    inputClassName?: string;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+/** @internal — CVA variant helper; compose via Input props instead. */
+export { inputVariants };

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

@@ -0,0 +1,38 @@
+/**
+ * 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/menu.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Menu — dropdown menu (shadcn baseline, compound parts).
+ * @category Overlays
+ * @tier primitive
+ * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
+ *
+ * Radix DropdownMenu (@radix-ui/react-dropdown-menu) themed with the overlay
+ * role tokens to match Dialog/Popover. Provides roving focus, type-ahead,
+ * keyboard nav, checkbox/radio items, submenus, outside-click + ESC dismissal,
+ * and portal mounting out of the box.
+ *
+ *   <Menu>
+ *     <Menu.Trigger asChild><Button>Actions</Button></Menu.Trigger>
+ *     <Menu.Content>
+ *       <Menu.Label>Account</Menu.Label>
+ *       <Menu.Item onSelect={…}>Profile</Menu.Item>
+ *       <Menu.Separator />
+ *       <Menu.Item disabled>Sign out</Menu.Item>
+ *     </Menu.Content>
+ *   </Menu>
+ */
+import * as React from 'react';
+import * as MenuPrimitive from '@radix-ui/react-dropdown-menu';
+declare const MenuTrigger: React.ForwardRefExoticComponent<MenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const MenuGroup: React.ForwardRefExoticComponent<MenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuRadioGroup: React.ForwardRefExoticComponent<MenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuSub: React.FC<MenuPrimitive.DropdownMenuSubProps>;
+declare const MenuContent: React.ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuCheckboxItem: React.ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuRadioItem: React.ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuLabel: React.ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuSeparator: React.ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuSubTrigger: React.ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuSubContent: React.ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface MenuComponent extends React.FC<React.ComponentProps<typeof MenuPrimitive.Root>> {
+    Trigger: typeof MenuTrigger;
+    Content: typeof MenuContent;
+    Item: typeof MenuItem;
+    CheckboxItem: typeof MenuCheckboxItem;
+    RadioGroup: typeof MenuRadioGroup;
+    RadioItem: typeof MenuRadioItem;
+    Label: typeof MenuLabel;
+    Separator: typeof MenuSeparator;
+    Group: typeof MenuGroup;
+    Sub: typeof MenuSub;
+    SubTrigger: typeof MenuSubTrigger;
+    SubContent: typeof MenuSubContent;
+}
+/**
+ * Menu root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with
+ * `defaultOpen`.
+ * @public
+ */
+declare const Menu: MenuComponent;
+export { Menu };