@hirobius/design-system 0.10.0 → 0.12.0

package/dist/types/src/app/components/image-lightbox.d.ts

@@ -0,0 +1,13 @@
+interface LightboxProps {
+    open: boolean;
+    onClose: () => void;
+    src: string;
+    alt?: string;
+    naturalWidth?: number;
+    naturalHeight?: number;
+    caption?: string;
+    captionHref?: string;
+    captionLabel?: string;
+}
+export declare function Lightbox({ open, onClose, src, alt, naturalWidth, naturalHeight, caption, captionHref, captionLabel, }: LightboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,12 +1,23 @@
 import type { CSSProperties, ReactNode } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const inlineCodeVariants: (props?: {
+    density?: "compact" | "comfortable";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type InlineCodeVariantProps = VariantProps<typeof inlineCodeVariants>;
 type InlineCodeProps = {
     children: ReactNode;
     style?: CSSProperties;
-    /** Compact mode is tuned for dense body copy and table prose. */
+    /** Layout density. `compact` tightens vertical rhythm for dense body copy and table prose. Defaults to `comfortable`. */
+    density?: InlineCodeVariantProps['density'];
+    /**
+     * @deprecated Use `density="compact"` instead. Kept for backward
+     * compatibility; when set, it takes precedence over `density`.
+     */
     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 {};
+export declare function InlineCode({ children, style, density, compact, copyable, }: InlineCodeProps): import("react/jsx-runtime").JSX.Element;
+/** @internal — CVA variant helper; compose via InlineCode props instead. */
+export { inlineCodeVariants };

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

@@ -0,0 +1,23 @@
+/**
+ * InputGroup — a text input framed with leading and/or trailing adornments.
+ * @category Inputs
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const inputGroupVariants: (props?: {
+    size?: "sm" | "md" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type InputGroupVariantProps = VariantProps<typeof inputGroupVariants>;
+/** @public */
+export interface InputGroupProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, InputGroupVariantProps {
+    /** Content rendered before the input, e.g. an icon or a static prefix. */
+    leading?: React.ReactNode;
+    /** Content rendered after the input, e.g. a unit or a clear button. */
+    trailing?: React.ReactNode;
+    /** Class applied to the wrapper (the input itself stays transparent). */
+    className?: string;
+}
+/** A single-line input with optional `leading`/`trailing` adornments. */
+export declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,18 @@
+/**
+ * Kbd — inline keyboard key / shortcut hint rendered as a native <kbd>.
+ * @category Display
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const kbdVariants: (props?: {
+    size?: "sm" | "md" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type KbdVariantProps = VariantProps<typeof kbdVariants>;
+/** @public */
+export interface KbdProps extends React.HTMLAttributes<HTMLElement>, KbdVariantProps {
+}
+/** Renders a keyboard key or shortcut token, e.g. `<Kbd>⌘K</Kbd>`. */
+export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+/** @internal — CVA variant helper; compose via Kbd props instead. */
+export { kbdVariants };

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

@@ -0,0 +1,43 @@
+/**
+ * MetadataList — semantic term/description list for object metadata (Status,
+ * Owner, Updated…). The idiomatic replacement for badge-stickers-on-prose.
+ * @category Display
+ * @tier pattern
+ * @public
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const metadataListVariants: (props?: {
+    orientation?: "horizontal" | "vertical";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type MetadataListVariantProps = VariantProps<typeof metadataListVariants>;
+/** A single term/description pair rendered by MetadataList. */
+export interface MetadataListItem {
+    /** The metadata key, e.g. "Status". */
+    term: React.ReactNode;
+    /** The metadata value, e.g. "Active". `description` may be rich content
+     *  (chips, prose, multiple lines) — useful with the `divided` variant. */
+    description: React.ReactNode;
+}
+/** @public */
+export interface MetadataListProps extends Omit<React.HTMLAttributes<HTMLDListElement>, 'children'>, MetadataListVariantProps {
+    /** The term/description pairs to render. */
+    items: MetadataListItem[];
+    /**
+     * Visual treatment.
+     * - `'plain'` (default) — bare term/description pairs; honours `orientation`.
+     * - `'divided'` — one bordered, rounded container with a full-width rule
+     *   between each pair (term above its rich description). Ignores `orientation`
+     *   (always term-above-description). Use for spec sheets / namespace tables.
+     */
+    variant?: 'plain' | 'divided';
+    /**
+     * Optional summary band rendered as the final row on a subtle surface —
+     * e.g. a footnote or aggregate note. Only rendered by the `divided` variant.
+     */
+    footer?: React.ReactNode;
+}
+/** Renders object metadata as a semantic `<dl>` of term/description pairs. */
+export declare const MetadataList: React.ForwardRefExoticComponent<MetadataListProps & React.RefAttributes<HTMLDListElement>>;
+/** @internal — CVA variant helper; compose via MetadataList props instead. */
+export { metadataListVariants };

package/dist/types/src/app/components/multi-selector.d.ts

@@ -0,0 +1,40 @@
+/**
+ * MultiSelector — multi-select dropdown composing the existing Popover with
+ * a checkbox option list, so choosing several values from a fixed set reads
+ * as one overlay pattern with Combobox and Menu rather than a bespoke widget.
+ * @category Inputs
+ * @tier pattern
+ * @public
+ *
+ * No new dependency — built entirely on the HDS Popover. The trigger reads
+ * like a secondary Button, showing a placeholder or a `${n} selected` count;
+ * the content is a token-skinned list where each row is a checkbox toggling
+ * membership in `value`.
+ *
+ *   <MultiSelector
+ *     options={[{ value: 'a', label: 'Apple' }, { value: 'b', label: 'Banana' }]}
+ *     value={fruits}
+ *     onChange={setFruits}
+ *   />
+ */
+import * as React from 'react';
+/** @public */
+export interface MultiSelectorOption {
+    value: string;
+    label: string;
+}
+/** @public */
+export interface MultiSelectorProps {
+    /** Selectable options. */
+    options: MultiSelectorOption[];
+    /** Currently selected values. */
+    value: string[];
+    /** Fired with the next selected-values array whenever an option is toggled. */
+    onChange: (next: string[]) => void;
+    /** Trigger text when nothing is selected. */
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/** @public */
+export declare const MultiSelector: React.ForwardRefExoticComponent<MultiSelectorProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -6,9 +6,13 @@ type NavItem = {
     label: string;
     disabled?: boolean;
 };
+type NavGroupVariant = 'side' | 'toc';
+declare const navGroupLabelVariants: (props?: {
+    variant?: "side" | "toc";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
 type NavGroupProps = {
     label?: string;
-    variant?: 'side' | 'toc';
+    variant?: NavGroupVariant;
     level?: NavLevel;
     items?: NavItem[];
     children?: ReactNode;
@@ -21,4 +25,5 @@ type NavGroupProps = {
 };
 /** @public */
 export declare function NavGroup({ label, variant, level, items, children, collapsible, onNavigate, getExact, className, style, contentStyle, }: NavGroupProps): import("react/jsx-runtime").JSX.Element;
-export {};
+/** @internal — CVA variant helper; compose via NavGroup props instead. */
+export { navGroupLabelVariants };

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

@@ -1,6 +1,15 @@
 import type { AnchorHTMLAttributes, MouseEvent } from 'react';
+import { type VariantProps } from 'class-variance-authority';
 import { type NavLevel } from '../lib/navLevels';
-type NavVariant = 'side' | 'toc';
+declare const navItemVariants: (props?: {
+    variant?: "side" | "toc";
+    state?: "default" | "active" | "disabled" | "focus" | "hover";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const navIndicatorVariants: (props?: {
+    state?: "default" | "active" | "disabled" | "focus" | "hover";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type NavItemVariantProps = VariantProps<typeof navItemVariants>;
+type NavVariant = NonNullable<NavItemVariantProps['variant']>;
 type NavNativeProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'onClick'>;
 interface NavProps extends NavNativeProps {
     /** Visual layout variant for side nav or table of contents usage. */
@@ -18,4 +27,5 @@ interface NavProps extends NavNativeProps {
 }
 /** @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 {};
+/** @internal — CVA variant helpers; compose via NavItem props instead. */
+export { navItemVariants, navIndicatorVariants };

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

@@ -0,0 +1,19 @@
+/**
+ * OverflowList — a horizontal list that caps visible children by count and
+ * collapses the remainder into a trailing +N chip. Count-based (via `max`),
+ * not width-measured, so layout is deterministic and safe under SSR and jsdom.
+ * @category Layout
+ * @tier pattern
+ */
+import * as React from 'react';
+/** @public */
+export interface OverflowListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Items to lay out. Extra items beyond `max` collapse into the overflow node. */
+    children: React.ReactNode;
+    /** Maximum items shown before collapsing into overflow. Unset or >= count shows all. */
+    max?: number;
+    /** Custom renderer for the overflow node. Defaults to a muted `+N` chip. */
+    renderOverflow?: (count: number) => React.ReactNode;
+}
+/** Renders up to `max` children followed by a `+N` overflow chip (or custom node). */
+export declare const OverflowList: React.ForwardRefExoticComponent<OverflowListProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,30 @@
+/**
+ * Pin — sticky-pin an element within its scroll region.
+ * @category Layout
+ * @tier primitive
+ * @ai-intent Pins content in view (`position: sticky`) while its surrounding
+ * section scrolls — the dependency-free basis for pinned scroll scenes (the
+ * "tall section + sticky child" pattern that GSAP's `pin: true` solves
+ * imperatively). Reach for this before hand-rolling sticky positioning.
+ * @ai-rules `top` is a CSS length offset (a dimension, not a spacing step).
+ * Give the pinned element a TALLER scrolling parent so it has room to travel.
+ * For the scroll-scrubbed animation inside a pinned scene, use CSS
+ * `animation-timeline` (see Reveal) or `useScrollProgress` from
+ * `@hirobius/design-system/scroll`. See ADR-021.
+ */
+import React from 'react';
+interface PinProps {
+    /** Content pinned within the scroll region. */
+    children: React.ReactNode;
+    /** Sticky offset from the top of the scroll region (CSS length). Defaults to '0'. */
+    top?: string;
+    /** Escape hatch: extra wrapper classes. */
+    className?: string;
+    /** Escape hatch: narrow style adjustments that do not belong in the primitive API. */
+    style?: React.CSSProperties;
+    /** Element rendered as the wrapper. Defaults to 'div'. */
+    as?: React.ElementType;
+}
+/** @public */
+export declare const Pin: React.ForwardRefExoticComponent<PinProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,31 @@
+/**
+ * Reveal — reveal-on-scroll primitive via CSS scroll-driven animation.
+ * @category Motion
+ * @tier primitive
+ * @ai-intent Fades/slides/scales content in as it enters the viewport, driven
+ * purely by scroll position (`animation-timeline: view()`) — no JS, no deps, no
+ * IntersectionObserver. Reach for this before hand-rolling reveal logic.
+ * @ai-rules Content is fully visible by DEFAULT; the effect applies only where
+ * `animation-timeline` is supported AND the user has not requested reduced
+ * motion (both fall back to visible, never stuck hidden). Pick `animation` from
+ * the fixed set — do not hand-roll keyframes. For momentum/inertia scrolling
+ * wrap the app in `SmoothScroll`; for a scroll-progress value in JS use
+ * `useScrollProgress` — both from `@hirobius/design-system/scroll`. See ADR-021.
+ */
+import React from 'react';
+export type RevealAnimation = 'fade' | 'fade-up' | 'fade-down' | 'scale';
+interface RevealProps {
+    /** Content revealed as it scrolls into view. */
+    children: React.ReactNode;
+    /** Entrance animation. Defaults to 'fade-up'. */
+    animation?: RevealAnimation;
+    /** Escape hatch: extra wrapper classes. */
+    className?: string;
+    /** Escape hatch: narrow style adjustments that do not belong in the primitive API. */
+    style?: React.CSSProperties;
+    /** Element rendered as the wrapper. Defaults to 'div'. */
+    as?: React.ElementType;
+}
+/** @public */
+export declare const Reveal: React.ForwardRefExoticComponent<RevealProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -1,3 +1,36 @@
+import { type VariantProps } from 'class-variance-authority';
+declare const segmentedControlWrapperVariants: (props?: {
+    fullWidth?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const segmentedControlRailVariants: (props?: {
+    variant?: "primary" | "secondary";
+    fullWidth?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const segmentedControlItemVariants: (props?: {
+    size?: "sm" | "md";
+    fullWidth?: boolean;
+    variant?: "primary" | "secondary";
+    active?: boolean;
+    interaction?: "rest" | "hover" | "pressed";
+    disabled?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const segmentedControlIndicatorVariants: (props?: {
+    variant?: "primary" | "secondary";
+    active?: boolean;
+    interaction?: "rest" | "hover" | "pressed";
+    disabled?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const segmentedControlDescriptionVariants: (props?: {
+    variant?: "primary" | "secondary";
+    active?: boolean;
+    interaction?: "rest" | "hover" | "pressed";
+    disabled?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const segmentedControlFocusRingVariants: (props?: {
+    variant?: "primary" | "secondary";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const segmentedControlLabelVariants: (props?: import("class-variance-authority/dist/types").ClassProp) => string;
+type SegmentedItemVariantProps = VariantProps<typeof segmentedControlItemVariants>;
 interface HdsSegmentedOption {
     /** Value submitted when this option is selected. */
     value: string;
@@ -18,9 +51,9 @@ interface SegmentedControlProps {
     /** 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';
+    size?: NonNullable<SegmentedItemVariantProps['size']>;
     /** Visual treatment for the rail and active segment. */
-    variant?: 'primary' | 'secondary';
+    variant?: NonNullable<SegmentedItemVariantProps['variant']>;
     /** Whether the control should stretch to the width of its container. */
     fullWidth?: boolean;
     /** Padding inside the rail container. */
@@ -30,4 +63,5 @@ interface SegmentedControlProps {
 }
 /** @public */
 export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};
+/** @internal — CVA variant helpers; compose via SegmentedControl props instead. */
+export { segmentedControlWrapperVariants, segmentedControlRailVariants, segmentedControlItemVariants, segmentedControlIndicatorVariants, segmentedControlDescriptionVariants, segmentedControlFocusRingVariants, segmentedControlLabelVariants, };

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

@@ -0,0 +1,29 @@
+/**
+ * SelectableCard — a full-surface card that behaves as a single checkbox-like
+ * selectable option, with native aria-checked semantics and full keyboard support.
+ * @category Actions
+ * @tier pattern
+ *
+ *   <SelectableCard selected={selected} onSelectedChange={setSelected}>
+ *     Plan A
+ *   </SelectableCard>
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const selectableCardVariants: (props?: {
+    selected?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type SelectableCardVariantProps = VariantProps<typeof selectableCardVariants>;
+/** @public */
+export interface SelectableCardProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onSelect'>, Omit<SelectableCardVariantProps, 'selected'> {
+    /** Whether this card is currently selected. */
+    selected?: boolean;
+    /** Called with the toggled selection state when the card is activated. */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Disable interaction. */
+    disabled?: boolean;
+}
+/** A card-shaped single checkbox — click or activate to toggle selection. */
+export declare const SelectableCard: React.ForwardRefExoticComponent<SelectableCardProps & React.RefAttributes<HTMLButtonElement>>;
+/** @internal — CVA variant helper; compose via SelectableCard props instead. */
+export { selectableCardVariants };

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

@@ -0,0 +1,21 @@
+import type { MouseEvent } from 'react';
+export type SideNavLevel = 'root' | 'nested';
+export interface SideNavProps {
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    titleLabel?: boolean;
+    /** Visual level — root matches group-header altitude, nested is an indented page link. */
+    level?: SideNavLevel;
+    /** Nested depth offset applied via inner padding while keeping the row full width. */
+    indent?: boolean | number;
+    onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+declare const sideNavVariants: (props?: {
+    level?: "root" | "nested";
+    state?: "default" | "active" | "disabled" | "focus" | "hover";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+export declare function SideNav({ label, href, active, disabled, titleLabel, level, indent, onNavigate, }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+/** @internal — CVA variant helper; compose via SideNav props instead. */
+export { sideNavVariants };

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

@@ -0,0 +1,45 @@
+/**
+ * Sidebar — fixed-width rail beside fluid content, no media query.
+ * @category Layout
+ * @tier primitive
+ * @ai-intent Solves the "rail + fluid content that stacks below a threshold"
+ * problem with the flex-basis/flex-grow disparity technique — the rail holds
+ * `sideWidth` and the content flex-basis 0 with an overwhelming flex-grow, so
+ * the pair wraps to stacked automatically once the container can no longer
+ * fit both without squeezing content below `contentMin`. No CSS media
+ * query, no JS resize observer.
+ * @ai-rules Reach for this named layout intent before Box/sx. Sidebar expects
+ * EXACTLY two children — the rail and the content — passed in that order.
+ * `side` controls which one visually renders as the rail; DOM order is
+ * unchanged. gap MUST use a semantic space step, never raw px. sideWidth and
+ * contentMin are CSS length dimensions (not spacing) — a length string like
+ * '16rem' or '50%' is expected, matching the check-hardcoded-spacing gate's
+ * own dimension-prop exemption. Do NOT use Sidebar for more than two regions
+ * — use Grid.
+ *
+ * Every Layout reference: https://every-layout.dev/layouts/sidebar/
+ */
+import React from 'react';
+type SidebarSide = 'start' | 'end';
+type LayoutGap = 'tight' | 'normal' | 'inset' | 'spacious';
+interface SidebarProps {
+    /** Exactly two children: the rail first, the fluid content second (DOM order — `side` only changes visual order). */
+    children: [React.ReactNode, React.ReactNode];
+    /** Which visual edge the rail renders on. Defaults to 'start'. */
+    side?: SidebarSide;
+    /** Fixed width of the rail (CSS length, e.g. '16rem'). Defaults to '16rem'. */
+    sideWidth?: string;
+    /** Minimum inline size the content is allowed to shrink to before the pair wraps to stacked (CSS length). Defaults to '50%'. */
+    contentMin?: string;
+    /** Gap between the rail and the content, and between the two once stacked. Defaults to 'normal'. */
+    gap?: LayoutGap;
+    /** 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. Defaults to 'div'. */
+    as?: React.ElementType;
+}
+/** @public */
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -3,22 +3,20 @@
  * @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;
+import { type VariantProps } from 'class-variance-authority';
+declare const statVariants: (props?: {
+    tone?: "success" | "danger" | "warning" | "info" | "neutral";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type StatVariantProps = VariantProps<typeof statVariants>;
 /** @public */
-export interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface StatProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, StatVariantProps {
     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 {};
+/** @internal — CVA variant helper; compose via Stat props instead. */
+export { statVariants };

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

@@ -0,0 +1,25 @@
+/**
+ * StatusDot — compact solid status indicator dot.
+ * @category Feedback
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const statusDotVariants: (props?: {
+    tone?: "success" | "danger" | "warning" | "info" | "neutral" | "inProgress";
+    size?: "sm" | "md" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type StatusDotVariantProps = VariantProps<typeof statusDotVariants>;
+/** @public */
+export interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>, StatusDotVariantProps {
+    /**
+     * Accessible name for the status. When provided the dot is exposed as a
+     * `role="status"` with this label; when omitted the dot is decorative
+     * (`aria-hidden`) and a sibling should carry the meaning.
+     */
+    label?: string;
+}
+/** A small solid dot conveying a semantic status via `tone`. */
+export declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
+/** @internal — CVA variant helper; compose via StatusDot props instead. */
+export { statusDotVariants };

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

@@ -3,17 +3,15 @@
  * @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;
+import { type VariantProps } from 'class-variance-authority';
+declare const statusListItemDotVariants: (props?: {
+    tone?: "success" | "danger" | "warning" | "info" | "neutral";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type StatusListItemVariantProps = VariantProps<typeof statusListItemDotVariants>;
 /** @public */
-export interface StatusListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-    tone?: StatusListItemTone;
+export type StatusListItemTone = NonNullable<StatusListItemVariantProps['tone']>;
+/** @public */
+export interface StatusListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, StatusListItemVariantProps {
     title: React.ReactNode;
     notes?: React.ReactNode[];
     trailing?: React.ReactNode;
@@ -22,4 +20,5 @@ export interface StatusListItemProps extends Omit<React.HTMLAttributes<HTMLDivEl
  * 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 {};
+/** @internal — CVA variant helper; compose via StatusListItem props instead. */
+export { statusListItemDotVariants };

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

@@ -0,0 +1,31 @@
+/**
+ * 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";
+} & import("class-variance-authority/dist/types").ClassProp) => 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/switcher.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Switcher — flips a row to a column below a width threshold, no media query.
+ * @category Layout
+ * @tier primitive
+ * @ai-intent Solves "horizontal row of peer items that should become a
+ * vertical stack once the container gets narrow" without a breakpoint or a
+ * resize observer, using the flex-basis calc() technique: each item's
+ * flex-basis resolves to a huge negative or huge positive number depending on
+ * whether the container is above or below `threshold`, forcing every item
+ * onto its own line once it flips.
+ * @ai-rules Reach for this named layout intent before Box/sx. gap MUST use a
+ * semantic space step, never raw px. threshold is a CSS length dimension
+ * (not spacing), e.g. '30rem'. `limit` unconditionally forces the stacked
+ * (column) layout once there are more than `limit` children, regardless of
+ * container width — use it to stop a row from thinning out into an
+ * unreadable N-up strip. Do NOT use Switcher for content that should always
+ * wrap in place — use Cluster.
+ *
+ * Every Layout reference: https://every-layout.dev/layouts/the-switcher/
+ */
+import React from 'react';
+type LayoutGap = 'tight' | 'normal' | 'inset' | 'spacious';
+interface SwitcherProps {
+    /** Switcher content — peer items that flip between row and column as a unit. */
+    children: React.ReactNode;
+    /** Container width below which items stack vertically (CSS length, e.g. '30rem'). Defaults to '30rem'. */
+    threshold?: string;
+    /** Gap between items in both the row and the stacked layout. Defaults to 'normal'. */
+    gap?: LayoutGap;
+    /** Maximum number of children before the layout is unconditionally forced to stacked, regardless of width. */
+    limit?: number;
+    /** 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. Defaults to 'div'. */
+    as?: React.ElementType;
+}
+/** @public */
+export declare const Switcher: React.ForwardRefExoticComponent<SwitcherProps & React.RefAttributes<HTMLDivElement>>;
+export {};