@akhil-saxena/design-system 1.2.0

package/dist/index.d.ts

@@ -0,0 +1,2091 @@
+import * as react from 'react';
+import react__default, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ChangeEvent, CSSProperties, ReactElement, RefObject } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { I as Icon, a as IconProps } from './Icon-XUp5t4PQ.js';
+import { UniqueIdentifier } from '@dnd-kit/core';
+import 'lucide-react';
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+/**
+ * Props for the Button primitive.
+ *
+ * Extends all native `<button>` attributes (`onClick`, `type`, `aria-*`, etc) via spread.
+ */
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual variant.
+     *
+     * - `primary` - brand amber CTA. Use for the most-prominent action per surface.
+     * - `secondary` - outlined cream surface. Use for second-priority actions.
+     * - `ghost` - transparent, text-only. Use for tertiary, icon-only, or cancel-in-modal.
+     * - `danger` - red destructive. Use for Delete, Remove, Archive, anything irreversible.
+     *
+     * @default "primary"
+     */
+    variant?: ButtonVariant;
+    /**
+     * Size token. Most contexts use `md`. Use `xs`/`sm` for dense rows or chip-adjacent UI.
+     *
+     * @default "md"
+     */
+    size?: ButtonSize;
+    /** When true, replaces the icon with a spinner and disables interaction. */
+    loading?: boolean;
+    /** Optional icon rendered before the label. Pass a sized `<Icon>` or lucide component. */
+    icon?: ReactNode;
+}
+/**
+ * Primary action element. Use exactly one `primary` per surface as the main CTA;
+ * pair with `secondary` or `ghost` for adjacent actions; reserve `danger` for
+ * destructive operations that cannot be undone.
+ *
+ * Accepts all native `<button>` props via spread (including `onClick`, `aria-*`,
+ * `type`, `form`). Forwards a ref to the underlying element.
+ *
+ * @example
+ * <Button variant="primary" onClick={save}>Save</Button>
+ * <Button variant="secondary" size="sm">Cancel</Button>
+ * <Button variant="danger" icon={<Trash2 size={14} />}>Delete</Button>
+ * <Button variant="primary" loading>Saving…</Button>
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+    /** When true, applies error-state border color to the input or wrapper. */
+    error?: boolean;
+    /** Leading icon rendered inside the wrapper (Lucide recommended size 14–16). */
+    icon?: ReactNode;
+    /** Static text or node rendered before the input (e.g. `"https://"`). */
+    prefix?: ReactNode;
+    /** Static text or node rendered after the input (e.g. `".com"`). */
+    suffix?: ReactNode;
+    /** Trailing keyboard-shortcut hint (e.g. `"⌘K"`) styled as a monospace pill. */
+    kbd?: ReactNode;
+}
+declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** When true, applies error-state border color to the textarea. */
+    error?: boolean;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+type BadgeTone = "upcoming" | "passed" | "pending" | "done" | "count" | "neutral";
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Color tone of the badge, mapping to a semantic status.
+     * @default "neutral"
+     */
+    tone?: BadgeTone;
+    /** When true, renders a small leading colored dot inside the badge; color defaults to the tone's vivid value. */
+    dot?: boolean;
+    /** Override the dot color with any CSS color string; falls back to the tone-mapped vivid color. */
+    dotColor?: string;
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+type ChipTone = "default" | "match" | "miss" | "learning" | "tag";
+interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Color tone applying semantic background and text colors.
+     * @default "default"
+     */
+    tone?: ChipTone;
+    /** When provided, renders a small X button that calls this handler on click. */
+    onRemove?: () => void;
+    /** Optional leading icon rendered before the label text (Lucide, size 10–11 recommended). */
+    icon?: ReactNode;
+}
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
+
+type AvatarSize = 24 | 28 | 32 | 36 | 40;
+type AvatarPresence = "online" | "away" | "offline" | "dnd";
+type AvatarPresencePosition = "top-right" | "bottom-right" | "top-left" | "bottom-left";
+interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Full name used to derive initials and background color. Also becomes `aria-label`. */
+    name?: string;
+    /** Override the auto-derived initials (1–2 uppercase letters). */
+    initials?: string;
+    /**
+     * URL of an image to display. When provided, the image fills the circle and
+     * initials/background are not rendered.
+     */
+    src?: string;
+    /** Alt text for the image. Falls back to `name` when omitted. */
+    alt?: string;
+    /**
+     * Use a two-stop gradient background instead of the default solid color.
+     * Pass `[fromColor, toColor]` to override, or omit to use the auto-derived gradient.
+     * When not set, a solid color derived from the name is used.
+     */
+    gradient?: [string, string] | true;
+    /** Diameter of the avatar circle in pixels.
+     * @default 32
+     */
+    size?: AvatarSize;
+    /** Shows a colored presence dot at the bottom-right edge. */
+    presence?: AvatarPresence;
+    /**
+     * Which corner of the avatar the presence dot appears at.
+     * @default "bottom-right"
+     */
+    presencePosition?: AvatarPresencePosition;
+}
+declare function deriveInitials(name?: string | null): string;
+declare function deriveGradient(seed: string): readonly [string, string];
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
+interface AvatarStackProps extends HTMLAttributes<HTMLDivElement> {
+    /** Array of avatar descriptors rendered as an overlapping stack. */
+    avatars: ReadonlyArray<{
+        name?: string;
+        initials?: string;
+        gradient?: [string, string];
+    }>;
+    /** Maximum number of avatars shown before a "+N more" overflow badge.
+     * @default 4
+     */
+    max?: number;
+    /** Size in pixels applied to every avatar in the stack.
+     * @default 32
+     */
+    size?: AvatarSize;
+}
+declare function AvatarStack({ avatars, max, size, style, ...rest }: AvatarStackProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Visible text label rendered beside the checkbox. */
+    label?: string;
+    /** When true, sets the native DOM `indeterminate` property (the "some selected" tri-state).
+     * Cannot be expressed as a JSX attribute - set imperatively via a DOM property. */
+    indeterminate?: boolean;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioGroupProps {
+    /** The `name` attribute shared by all Radio children in the group. */
+    name: string;
+    /** Controlled selected value; the matching Radio renders as checked. Use with `onChange`. */
+    value?: string;
+    /** Initial selected value when uncontrolled (no `value` prop). */
+    defaultValue?: string;
+    /** Called when any Radio in the group is selected with the new value and native event. */
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /** Radio children to render in a vertical flex column. */
+    children: ReactNode;
+    /** Inline styles applied to the `role="radiogroup"` div. */
+    style?: CSSProperties;
+    /** Additional className applied to the `role="radiogroup"` div. */
+    className?: string;
+}
+declare function RadioGroup({ name, value: controlledValue, defaultValue, onChange, children, style, className, }: Readonly<RadioGroupProps>): react_jsx_runtime.JSX.Element;
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value"> {
+    /** Visible text label rendered beside the radio button. */
+    label?: string;
+    /** The value this radio represents; matched against RadioGroup's `value` to determine checked state. */
+    value: string;
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Visible text label rendered beside the toggle track. */
+    label?: string;
+}
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
+
+interface NumberStepperProps {
+    /** Controlled numeric value. */
+    value: number;
+    /** Called with the clamped next value after each increment, decrement, or manual edit. */
+    onChange: (next: number) => void;
+    /** Minimum allowed value; decrement button disables at this boundary. */
+    min?: number;
+    /** Maximum allowed value; increment button disables at this boundary. */
+    max?: number;
+    /** Amount added or subtracted per button click.
+     * @default 1
+     */
+    step?: number;
+    /** Optional leading adornment (e.g. currency symbol) rendered before the value. */
+    prefix?: ReactNode;
+    /** Optional trailing adornment (e.g. unit label) rendered after the value. */
+    suffix?: ReactNode;
+    /** Custom display formatter called when the input is not focused; raw value shown while editing. */
+    formatFn?: (value: number) => string;
+    /** When true, disables all interaction including both buttons and the input. */
+    disabled?: boolean;
+    /** Accessible label for the stepper container used by assistive technology. */
+    ariaLabel?: string;
+    /** Additional className applied to the root wrapper element. */
+    className?: string;
+    /** Inline styles applied to the root wrapper element. */
+    style?: CSSProperties;
+}
+declare const NumberStepper: react.ForwardRefExoticComponent<NumberStepperProps & react.RefAttributes<HTMLInputElement>>;
+
+type RollingNumberVariant = "default" | "dark" | "light";
+interface RollingNumberProps {
+    /** Numeric value to display; digit columns animate vertically when the value changes. */
+    value: number;
+    /** Custom formatter applied before splitting into individual characters; defaults to `String(value)`. */
+    format?: (value: number) => string;
+    /** Static text prepended before the formatted number (e.g. `"$"`). */
+    prefix?: string;
+    /** Static text appended after the formatted number (e.g. `" pts"`). */
+    suffix?: string;
+    /**
+     * Visual background treatment.
+     * - `"default"` - no background, inherits from parent (current behaviour).
+     * - `"dark"` - black background per digit cell with white text; ideal for counters and clocks.
+     * - `"light"` - cream background per digit cell with dark text; for use on dark surfaces.
+     * @default "default"
+     */
+    variant?: RollingNumberVariant;
+    /** Accessible label for the `aria-live` region; defaults to the full rendered display string. */
+    ariaLabel?: string;
+    /** Additional className applied to the root `<span>` element. */
+    className?: string;
+    /** Inline styles applied to the root `<span>` element. */
+    style?: CSSProperties;
+}
+declare function RollingNumber({ value, format, prefix, suffix, variant, ariaLabel, className, style, }: RollingNumberProps): react_jsx_runtime.JSX.Element;
+
+interface RangeSliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "min" | "max" | "step" | "disabled"> {
+    /** Controlled numeric value of the slider thumb position. */
+    value: number;
+    /** Called on every thumb movement with the new numeric value and the native event. */
+    onChange: (value: number, e: ChangeEvent<HTMLInputElement>) => void;
+    /** Minimum selectable value.
+     * @default 0
+     */
+    min?: number;
+    /** Maximum selectable value.
+     * @default 100
+     */
+    max?: number;
+    /** Increment between selectable values.
+     * @default 1
+     */
+    step?: number;
+    /** Optional text label rendered above the track on the left side. */
+    label?: string;
+    /** Formats the current value displayed on the right side of the label row. */
+    valueFormat?: (value: number) => string;
+    /** When true, disables the slider and grays it out. */
+    disabled?: boolean;
+    /** Accessible label for the underlying `<input type="range">`; falls back to `label`. */
+    ariaLabel?: string;
+}
+declare const RangeSlider: react.ForwardRefExoticComponent<RangeSliderProps & react.RefAttributes<HTMLInputElement>>;
+
+type StarRatingSize = "default" | "compact";
+/**
+ * Deliberate deviation from D-240: D-240 specified `variant?: 'interactive' | 'compact'` which
+ * conflated icon size with interaction mode. We split into orthogonal `size` (icon dimensions)
+ * and `readOnly` (interaction mode) props because (a) consumers may want a compact yet still-
+ * interactive rating in dense list views, and (b) read-only at default size is the common
+ * "display existing rating" case. Documented as the public StarRating API of v2.0.
+ */
+interface StarRatingProps {
+    /** Controlled rating value (1–5). */
+    value: number;
+    /** Called when the user clicks a star with the new rating; omit for read-only display. */
+    onChange?: (value: number) => void;
+    /** Icon size token; `"compact"` uses 14px stars for dense list contexts.
+     * @default "default"
+     */
+    size?: StarRatingSize;
+    /** Accessible label for the `role="radiogroup"` container. */
+    label?: string;
+    /** When true, disables hover preview and click interaction without the disabled visual.
+     * @default false
+     */
+    readOnly?: boolean;
+    /** When true, disables all interaction and dims the stars.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Additional className applied to the root element. */
+    className?: string;
+    /** Inline styles applied to the root element. */
+    style?: CSSProperties;
+}
+declare function StarRating({ value, onChange, size, label, readOnly, disabled, className, style, }: StarRatingProps): react_jsx_runtime.JSX.Element;
+
+type StickyNoteRotation = "left" | "right" | "none";
+interface StickyNoteProps extends HTMLAttributes<HTMLDivElement> {
+    /** Static rotation applied to the note surface for a handwritten feel.
+     * @default "right"
+     */
+    rotation?: StickyNoteRotation;
+    /** Arbitrary JSX content rendered inside the note; compose freely. */
+    children: ReactNode;
+}
+/**
+ * StickyNote - yellow-gradient note surface with slight static rotation.
+ *
+ *   <StickyNote>Reach out to David before screening.</StickyNote>
+ *   <StickyNote rotation="left">Follow up by May 2.</StickyNote>
+ *   <StickyNote rotation="none">Aligned baseline note.</StickyNote>
+ *
+ * Children are arbitrary JSX (mirrors Card freely-composed pattern). The
+ * `.ds-sticky-hint` mini-line in the handoff is NOT part of the primitive
+ * - consumers compose it as a child <div>.
+ *
+ * Always-dark text invariant (per handoff): the text color stays #292524
+ * regardless of :root.dark cascade. The amber-yellow surface is identical
+ * in light and dark modes - sticky notes are visually consistent across
+ * themes, intentionally.
+ */
+declare const StickyNote: react.ForwardRefExoticComponent<StickyNoteProps & react.RefAttributes<HTMLDivElement>>;
+
+type CardVariant = "glass" | "amber" | "dark" | "kanban";
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Surface style variant.
+     * - `glass` - translucent glass surface (default).
+     * - `amber` - amber-tinted CTA card.
+     * - `dark` - always-dark surface independent of theme.
+     * - `kanban` - compact glass with hover-lift; use for drag-and-drop boards.
+     * @default "glass"
+     */
+    variant?: CardVariant;
+    /** Arbitrary JSX content; Card has no compound structure - compose freely. */
+    children: ReactNode;
+}
+/**
+ * Card - surface primitive with 4 variants (D-300, D-301, D-302).
+ *
+ *   <Card variant="glass">         // default - translucent glass surface
+ *   <Card variant="amber">         // amber-tinted CTA card
+ *   <Card variant="dark">          // always-dark surface (handoff invariant)
+ *   <Card variant="kanban">        // compact glass card with hover-lift; visual surface only
+ *
+ * Children are arbitrary JSX - there is no compound API. Compose freely:
+ *
+ *   <Card variant="glass">
+ *     <header>...</header>
+ *     <div>...</div>
+ *     <footer>...</footer>
+ *   </Card>
+ *
+ * The `kanban` variant ships only the VISUAL surface (12px padding, 10px
+ * radius, glass bg, hover shadow lift). Application data binding (logo +
+ * role + age + chips + priority dot) is deferred to Wave 7 / DragDropList
+ * per D-302.
+ */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DSPortalProps {
+    children: ReactNode;
+    target?: HTMLElement;
+}
+/**
+ * SSR-safe React.createPortal wrapper.
+ *
+ * Returns null on the server and during the first client render, then
+ * portals `children` to `target` (default: document.body) after the
+ * initial useEffect fires. Consumed by Tooltip, Popover, Modal, Sheet,
+ * BottomSheet, Lightbox, HoverCard (Wave 3) and Toast (Wave 4).
+ *
+ * Mount target defaults to document.body to avoid coupling to consumer
+ * DOM layout (D-310).
+ */
+declare function DSPortal({ children, target }: DSPortalProps): react.ReactPortal | null;
+
+type TooltipPlacement = "auto" | "top" | "right" | "bottom" | "left";
+interface TooltipProps {
+    /** Content rendered inside the tooltip surface; accepts any ReactNode. */
+    content: ReactNode;
+    /** Preferred placement relative to the trigger; `"auto"` picks the side with the most viewport room.
+     * @default "auto"
+     */
+    placement?: TooltipPlacement;
+    /** Milliseconds to wait after mouseenter/focus before showing the tooltip.
+     * @default 150
+     */
+    delay?: number;
+    /** The single trigger element; Tooltip clones it to attach event handlers and `aria-describedby`. */
+    children: ReactElement;
+}
+/**
+ * Tooltip - overlay micro-primitive (DS-32).
+ *
+ *   <Tooltip content="Star this application">
+ *     <button aria-label="Star">★</button>
+ *   </Tooltip>
+ *
+ * - Wraps EXACTLY ONE child element (React.Children.only - throws on multiple).
+ * - Clones the child to attach onMouseEnter / onMouseLeave / onFocus / onBlur +
+ *   aria-describedby={tooltipId} (D-311).
+ * - Mounts the tooltip surface via DSPortal to document.body.
+ * - Position computed from trigger.getBoundingClientRect() per `placement`
+ *   (D-312, manual calc - no Floating-UI dep).
+ * - Open delay default 150ms (D-311 - handoff 0ms feels twitchy, 700ms feels broken).
+ * - Hover and focus both open with the SAME 150ms delay (Path A from the plan
+ *   behavior block - keeps timing consistent for assistive-tech and pointer
+ *   users; mouseleave + blur close immediately by clearing the timer).
+ * - aria-describedby is wired on the trigger when open (assistive-tech surface).
+ *
+ * v2.0 simplifications (deferred to v2.1):
+ * - Consumer ref on trigger is NOT preserved (Tooltip's internal triggerRef
+ *   wins). Most leaf-button triggers don't pass refs, so this is acceptable.
+ * - No auto-flip on viewport collision - caller is responsible for placing
+ *   tooltips with adequate viewport room.
+ * - No re-position on scroll/resize while open (most tooltips open + close
+ *   within a frame anyway). Re-opens recompute fresh.
+ * - No exit animation - surface hard-unmounts on close.
+ */
+declare function Tooltip({ content, placement, delay, children }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+type PopoverPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+type PopoverVariant = "default" | "contextmenu";
+interface PopoverProps {
+    /** Ref to the anchor element; the popover positions itself relative to this element's bounding box. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Controls visibility; the popover returns null when false. */
+    open: boolean;
+    /** Called when the popover requests to close (Escape key or outside click). */
+    onOpenChange: (open: boolean) => void;
+    /** Which edge of the anchor the panel appears on.
+     * @default "bottom-start"
+     */
+    placement?: PopoverPlacement;
+    /** Gap in pixels between the anchor edge and the panel.
+     * @default 4
+     */
+    offset?: number;
+    /** Visual variant; `"contextmenu"` applies tighter padding and narrower width.
+     * @default "default"
+     */
+    variant?: PopoverVariant;
+    /** Content rendered inside the popover panel. */
+    children: ReactNode;
+    /** Additional className applied to the panel element. */
+    className?: string;
+    /** Inline styles applied to the panel element. */
+    style?: CSSProperties;
+}
+/**
+ * Anchor-positioned overlay primitive (D-330). DSPortal-mounted to body;
+ * positions via `anchorRef.current.getBoundingClientRect()` + placement +
+ * offset. Closes on outside click (via `useClickOutside`) and on Escape
+ * (document keydown listener installed only while open).
+ *
+ * 4 fixed placements; auto-flip-on-collision deferred to v2.1.
+ */
+declare function Popover({ anchorRef, open, onOpenChange, placement, offset, variant, children, className, style, }: PopoverProps): react_jsx_runtime.JSX.Element | null;
+interface ContextMenuItem {
+    label: string;
+    icon?: ReactNode;
+    onSelect: () => void;
+    disabled?: boolean;
+    variant?: "default" | "danger";
+}
+interface ContextMenuProps extends Omit<PopoverProps, "children" | "variant"> {
+    items: ContextMenuItem[];
+}
+/**
+ * Curated context-menu variant of Popover (D-331). Same-file export so
+ * consumers can import either primitive without an extra path. Renders
+ * items as `<button class="ds-atom-popover-item">` rows; danger variant
+ * uses `data-tone="danger"`; disabled items short-circuit `onSelect`.
+ */
+declare function ContextMenu({ items, onOpenChange, ...rest }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+
+type ModalRole = "dialog" | "alertdialog";
+interface ModalProps {
+    /** Controls visibility; returns null when false. */
+    open: boolean;
+    /** Called when the user closes the modal via Escape or backdrop click. */
+    onClose: () => void;
+    /** Heading rendered in the modal header; auto-wired to `aria-labelledby`. */
+    title?: ReactNode;
+    /** Short description rendered above children; auto-wired to `aria-describedby`. */
+    description?: string;
+    /** Content for the footer slot (typically action buttons). */
+    footer?: ReactNode;
+    /** Main body content of the modal. */
+    children?: ReactNode;
+    /** Whether clicking the backdrop calls `onClose`.
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /** ARIA role - use `"alertdialog"` for destructive confirmations.
+     * @default "dialog"
+     */
+    role?: ModalRole;
+    /** Ref to the element that should receive focus when the modal opens; defaults to the panel itself. */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /** Additional className applied to the modal panel. */
+    className?: string;
+    /** Inline styles applied to the modal panel. */
+    style?: CSSProperties;
+}
+/**
+ * Modal - DSPortal-mounted dialog with focus trap, Escape close, backdrop close.
+ *
+ *   <Modal open={open} onClose={close} title="Edit profile">
+ *     <form>...</form>
+ *   </Modal>
+ *
+ * A11y wiring (D-321):
+ * - role defaults to "dialog"; pass "alertdialog" for destructive confirms
+ * - aria-labelledby auto-generated from `title` via useId()
+ * - aria-describedby auto-generated from `description` via useId()
+ * - aria-modal="true" always
+ * - useFocusTrap traps Tab inside panel + restores focus to trigger on close
+ * - Document-level keydown listener for Escape (useFocusTrap handles only Tab)
+ *
+ * Behavior (D-320, D-322):
+ * - closeOnBackdropClick defaults to true; click on backdrop only (not panel) closes
+ * - Animations namespaced (ds-atom-modal-fadein, ds-atom-modal-in) to avoid
+ *   colliding with consumer-defined keyframes
+ *
+ * ConfirmDialog ships from this same file as a named variant export (D-287, D-356).
+ */
+declare function Modal({ open, onClose, title, description, footer, children, closeOnBackdropClick, role, initialFocus, className, style, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+interface ConfirmDialogProps {
+    /** Controls visibility; returns null when false. */
+    open: boolean;
+    /** Called when the user dismisses or cancels the dialog. */
+    onClose: () => void;
+    /** Heading text for the confirmation dialog. */
+    title: ReactNode;
+    /** Supplemental explanation shown below the title; string gets `aria-describedby`, ReactNode renders as children. */
+    description?: ReactNode;
+    /** Label for the confirm action button.
+     * @default "Confirm"
+     */
+    confirmLabel?: string;
+    /** Label for the cancel action button.
+     * @default "Cancel"
+     */
+    cancelLabel?: string;
+    /** When true, uses `role="alertdialog"`, disables backdrop close, and styles confirm as `danger`.
+     * @default false
+     */
+    danger?: boolean;
+    /** Called when the user clicks the confirm button. */
+    onConfirm: () => void;
+}
+/**
+ * ConfirmDialog - Modal-as-confirmation variant (D-287, D-356).
+ *
+ *   <ConfirmDialog
+ *     open={open}
+ *     onClose={close}
+ *     onConfirm={doDelete}
+ *     title="Delete application?"
+ *     description="This cannot be undone."
+ *     confirmLabel="Yes, delete"
+ *     danger
+ *   />
+ *
+ * When `danger=true`:
+ * - role="alertdialog"
+ * - closeOnBackdropClick=false (forces explicit Cancel/Confirm)
+ * - Confirm button uses Button variant="danger"
+ *
+ * `description` accepts string or ReactNode. Strings flow to Modal's
+ * `description` prop (gets aria-describedby wiring); ReactNode renders
+ * inline as Modal children (no auto aria-describedby).
+ */
+declare function ConfirmDialog({ open, onClose, title, description, confirmLabel, cancelLabel, danger, onConfirm, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+
+type SheetSide = "right" | "left";
+interface SheetProps {
+    /** Controls visibility; returns null when false. */
+    open: boolean;
+    /** Called when the user closes the sheet via Escape or backdrop click. */
+    onClose: () => void;
+    /** Which edge the panel slides in from.
+     * @default "right"
+     */
+    side?: SheetSide;
+    /** Heading rendered in the sheet header; auto-wired to `aria-labelledby`. */
+    title?: ReactNode;
+    /** Short description rendered above children; auto-wired to `aria-describedby`. */
+    description?: string;
+    /** Content for the footer slot (typically action buttons). */
+    footer?: ReactNode;
+    /** Main body content of the sheet. */
+    children: ReactNode;
+    /** Whether clicking the backdrop calls `onClose`.
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /** Additional className applied to the sheet panel. */
+    className?: string;
+    /** Inline styles applied to the sheet panel. */
+    style?: CSSProperties;
+}
+/**
+ * Side-anchored drawer primitive (Wave 3, DS-35).
+ *
+ * Mirrors Modal architecture (DSPortal-mounted backdrop + panel; useFocusTrap;
+ * explicit Escape document keydown; auto-generated aria-labelledby/describedby
+ * via useId()) but slides in from the chosen edge instead of scaling in.
+ *
+ * Per D-332:
+ * - 400px wide on desktop (≥640px)
+ * - 100vw on mobile (<640px) via @media - no prop required
+ * - side: 'right' (default) | 'left'; CSS keys off [data-side]
+ *
+ * Returns null when open=false. When open=true, portals a backdrop +
+ * side-anchored panel to document.body. Backdrop click calls onClose iff
+ * closeOnBackdropClick (default true). Click on panel itself does NOT close.
+ *
+ * useFocusTrap traps Tab inside the panel + restores focus on close.
+ * Escape closes via a document keydown listener installed only while open
+ * (Wave 0 useFocusTrap only handles Tab - we add Escape ourselves).
+ */
+declare function Sheet({ open, onClose, side, title, description, footer, children, closeOnBackdropClick, className, style, }: SheetProps): react_jsx_runtime.JSX.Element | null;
+
+type HoverCardPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+interface HoverCardProps {
+    /** Ref attached to the trigger element; HoverCard installs mouse/click listeners on it directly. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Rich card content - arbitrary ReactNode such as avatars, charts, or action buttons. */
+    children: ReactNode;
+    /** Panel placement relative to the anchor.
+     * @default "bottom-start"
+     */
+    placement?: HoverCardPlacement;
+    /** Gap in pixels between the anchor edge and the panel.
+     * @default 8
+     */
+    offset?: number;
+    /** Milliseconds to wait after mouseenter before opening; filters accidental cursor pass-throughs.
+     * @default 300
+     */
+    openDelay?: number;
+    /** Milliseconds to wait after mouseleave before closing; gives the cursor time to move into the card.
+     * @default 150
+     */
+    closeDelay?: number;
+    /** Additional className applied to the panel root element. */
+    className?: string;
+}
+/**
+ * HoverCard - rich-content popover-on-hover with click-to-pin (DS-38, D-355).
+ *
+ * Behavior:
+ * - mouseenter on anchor → openDelay timer → render via DSPortal
+ * - mouseleave on anchor OR panel → closeDelay timer → unmount
+ * - panel mouseenter cancels pending close (cursor-into-card grace window)
+ * - click on anchor pins the card open; mouseleave is ignored while pinned
+ * - click outside both anchor + panel (via useClickOutside) unpins + closes
+ * - non-modal: NO focus trap; Tab from anchor moves into panel children naturally
+ *
+ * Position is computed once at the moment of `setOpen(true)` from
+ * `anchorRef.current.getBoundingClientRect()`. Scrolling-while-open is NOT
+ * tracked in v0.2 (acceptable for a hover preview that closes when cursor
+ * leaves anyway). v0.3 may add a ResizeObserver/scroll listener.
+ */
+declare function HoverCard({ anchorRef, children, placement, offset, openDelay, closeDelay, className, }: HoverCardProps): react_jsx_runtime.JSX.Element | null;
+
+type BottomSheetHeight = "half" | "full";
+interface BottomSheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    height?: BottomSheetHeight;
+    closeOnBackdropClick?: boolean;
+    /**
+     * Force dark-mode rendering of the sheet panel independent of the page theme.
+     * Useful when the trigger lives inside a `.dark` scoped container (e.g. Storybook Docs dark story).
+     * Defaults to detecting `html.dark` (Canvas dark mode toggle).
+     */
+    dark?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Bottom-anchored drawer primitive (Wave 3, DS-36).
+ *
+ * Mobile-style sheet that slides up from the bottom edge. Mirrors Sheet
+ * (DS-35) architecture - DSPortal-mounted backdrop + panel, useFocusTrap
+ * for Tab cycling + focus restore, document Escape keydown - but its
+ * geometry is bottom-anchored with top-rounded corners and a purely-visual
+ * drag-handle indicator at the top.
+ *
+ * Per D-340 (with v0.5.1 swipe-to-close upgrade):
+ * - Two height variants: 'half' (default, max-height 60vh) and 'full'
+ *   (height 100vh, no top corners) - switched via [data-height] +
+ *   sibling-CSS selectors (Phase 12 D-130 pattern).
+ * - Drag handle (.ds-atom-bottomsheet-handle, 32x4 ink-5 pill) supports
+ *   swipe-to-close via Pointer Events (v0.5.1 patch - resolves D-340 v2.1
+ *   deferral). pointerdown captures the pointer; pointermove translates
+ *   the panel by positive Y delta only (drag-down); pointerup closes if
+ *   delta > 120px OR > 40% of panel height, else snaps back via CSS
+ *   transition. data-dragging="true" disables the transition during drag
+ *   so the panel follows the finger directly.
+ * - role="dialog" + aria-modal="true"; aria-labelledby auto-wired via
+ *   useId() when a title is provided.
+ * - closeOnBackdropClick defaults to true; pass false for destructive
+ *   confirm flows that require explicit Cancel.
+ *
+ * DSPortal (D-310) gates its children on a mount-tick for SSR safety, so
+ * panelRef is null on the initial render. Tracking a local mount flag and
+ * feeding it into useFocusTrap's `active` arg ensures the trap re-runs
+ * once the portal commits the panel into the DOM.
+ */
+declare function BottomSheet({ open, onClose, title, footer, children, height, closeOnBackdropClick, dark, className, style, }: BottomSheetProps): react_jsx_runtime.JSX.Element | null;
+
+interface LightboxItem {
+    src: string;
+    alt: string;
+    caption?: ReactNode;
+}
+interface LightboxProps {
+    /** Controls visibility; component returns null when false. */
+    open: boolean;
+    /** Called when the user clicks the close button or presses Escape. */
+    onClose: () => void;
+    /** Ordered array of images to display; must be non-empty when open. */
+    items: LightboxItem[];
+    /** Controlled index of the currently displayed image.
+     * @default 0
+     */
+    activeIndex?: number;
+    /** Called when the user navigates to a different image with the new index. */
+    onIndexChange?: (index: number) => void;
+}
+/**
+ * Lightbox - full-bleed media-display overlay where the image IS the surface.
+ * D-350: heavier backdrop rgba(0,0,0,.92), arrow-key navigation with wrap-
+ * around, always-dark invariant (NO :root.dark overrides). Modal-adjacent
+ * architecture (DSPortal-mounted, Escape-to-close, initial focus on close).
+ *
+ * Controlled pattern: caller manages activeIndex + onIndexChange. Lightbox
+ * holds no state itself - pairs cleanly with gallery thumbnail-strip selection.
+ *
+ *   <Lightbox
+ *     open={open}
+ *     onClose={() => setOpen(false)}
+ *     items={[{ src: "/a.jpg", alt: "Resume" }]}
+ *     activeIndex={0}
+ *   />
+ *
+ * a11y: role="dialog" + aria-modal + aria-label includes active item.alt;
+ * close button gets initial focus (image is non-focusable); ArrowLeft/Right
+ * + Escape via global document keydown listener (no useFocusTrap - only 3
+ * focusable elements).
+ */
+declare function Lightbox({ open, onClose, items, activeIndex, onIndexChange }: LightboxProps): react_jsx_runtime.JSX.Element | null;
+
+interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current progress value; clamped to [0, max] internally.
+     * @default 0
+     */
+    value?: number;
+    /** Maximum value used to compute the fill percentage.
+     * @default 100
+     */
+    max?: number;
+    /** When true, renders an animated 3-dot pulse instead of a determinate fill bar.
+     * @default false
+     */
+    loading?: boolean;
+    /** Accessible label; string values also render visually above the bar. */
+    label?: ReactNode;
+}
+/**
+ * ProgressBar - determinate progress indicator + loading variant (DS-42).
+ *
+ *   <ProgressBar value={50} />                          // determinate, 50%
+ *   <ProgressBar value={3} max={10} label="Upload" />   // 3 of 10 (30%)
+ *   <ProgressBar loading />                              // 3-dot pulse
+ *
+ * Determinate: track + solid amber fill (var(--amber)); fill width transitions
+ * over 500ms ease-out. role="progressbar"
+ * with aria-valuenow / aria-valuemin / aria-valuemax wired.
+ *
+ * Loading: 3-dot pulse animation (handoff visual). role="status"; aria-live="polite";
+ * defaults aria-label to "Loading" if no `label` passed.
+ *
+ * Value clamped to [0, max] internally so callers can pass anything.
+ */
+declare const ProgressBar: react.ForwardRefExoticComponent<ProgressBarProps & react.RefAttributes<HTMLDivElement>>;
+
+type SkeletonShape = "text" | "circle" | "pill";
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Shape of the skeleton placeholder.
+     * - `text` - full-width line at `1.2em` height (default).
+     * - `circle` - disc sized to `width`; use for avatar placeholders.
+     * - `pill` - rounded badge/chip-sized shape at `1.5em` height.
+     * @default "text"
+     */
+    shape?: SkeletonShape;
+    /** Width of the skeleton; accepts any CSS length or a pixel number.
+     * @default "100%"
+     */
+    width?: number | string;
+    /** Height override; defaults are shape-aware (text → 1.2em, circle → width, pill → 1.5em). */
+    height?: number | string;
+}
+/**
+ * Skeleton - placeholder shape for loading states (DS-43, D-420).
+ *
+ *   <Skeleton />                                 // default text line, full width
+ *   <Skeleton width={120} />                     // 120px text line
+ *   <Skeleton shape="circle" width={40} />       // 40x40 circle (avatar placeholder)
+ *   <Skeleton shape="pill" width={80} />         // pill (badge / chip placeholder)
+ *
+ * Single primitive with `shape` prop instead of three separate primitives -
+ * keeps barrel small (D-420). Compose multi-line / avatar+name / card
+ * placeholders by rendering MULTIPLE Skeletons inside a consumer-controlled
+ * flex/grid container - the primitive itself renders ONE node only.
+ *
+ * Visual: cream-2 background with pulse animation (opacity 0.6 ↔ 1 at
+ * 1.2s ease-in-out infinite). Dark mode: rgba(255,255,255,0.06).
+ *
+ * `aria-hidden="true"` is hard-coded - Skeleton is decorative. Consumers
+ * wrap the surrounding region with their own `aria-busy={loading}` or
+ * similar to communicate the loading state to assistive tech.
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+/** Props injected into the trigger element by InlineConfirm. */
+interface InlineConfirmTriggerProps {
+    /** Wires the trigger into InlineConfirm's state machine. Spread onto your button. */
+    onClick: () => void;
+}
+interface InlineConfirmProps {
+    /**
+     * Render-prop returning the trigger element (button, icon-button, etc.).
+     * Spread the provided `triggerProps` onto your element to wire the click handler.
+     *
+     * @example
+     * trigger={(p) => <Button variant="danger" {...p}>Delete</Button>}
+     */
+    trigger: (triggerProps: InlineConfirmTriggerProps) => ReactNode;
+    /** Called when the user clicks the confirm button. */
+    onConfirm: () => void;
+    /** Called when the user cancels - via No button, Escape, click-outside, or auto-cancel timeout. */
+    onCancel?: () => void;
+    /**
+     * Label for the confirm button.
+     * @default "Yes"
+     */
+    confirmLabel?: string;
+    /**
+     * Label for the cancel button.
+     * @default "No"
+     */
+    cancelLabel?: string;
+    /**
+     * Variant for the confirm button. Use `"danger"` for destructive actions and
+     * `"primary"` for non-destructive confirms (e.g. Send, Submit).
+     * @default "danger"
+     */
+    confirmVariant?: "danger" | "primary";
+    /**
+     * Milliseconds before the prompt auto-cancels. Hover or focus inside the
+     * prompt row pauses the timer. Pass `Infinity` to disable auto-cancel.
+     * @default 4000
+     */
+    autoCancelMs?: number;
+    /**
+     * Text shown between the trigger state and the confirm/cancel buttons.
+     * @default "Are you sure?"
+     */
+    promptText?: ReactNode;
+}
+/**
+ * InlineConfirm - render-prop trigger replacement for inline destructives (DS-45, D-430).
+ *
+ *   <InlineConfirm
+ *     trigger={(p) => <Button variant="danger" {...p}>Delete</Button>}
+ *     onConfirm={handleDelete}
+ *     promptText="Delete this application?"
+ *   />
+ *
+ * Idle: renders the trigger function's returned element with `onClick` wired
+ * to enter pending state. Pending: replaces trigger with inline-row
+ * `[promptText] [No] [Yes]` in the same container - zero layout shift.
+ *
+ * 4s auto-cancel timer (configurable via `autoCancelMs`; pass Infinity to
+ * disable). Mouse-enter prompt OR focus-within pauses timer; un-hover AND
+ * blur resumes. Escape, click-outside, and explicit cancel-button click
+ * all dismiss immediately.
+ *
+ * For HIGH-stakes destructives (delete account, mass-delete, irreversible)
+ * use ConfirmDialog (Modal variant) instead - InlineConfirm is for LOW-stakes
+ * inline confirms in dense lists (D-431).
+ *
+ * Uncontrolled - manages internal `pending` state. No ref forwarding (the
+ * component switches between two different DOM trees).
+ */
+declare function InlineConfirm({ trigger, onConfirm, onCancel, confirmLabel, cancelLabel, confirmVariant, autoCancelMs, promptText, }: InlineConfirmProps): react_jsx_runtime.JSX.Element;
+
+type AlertBannerTone = "info" | "success" | "warning" | "error";
+interface AlertBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Controls visibility; component returns null when false. Caller manages open state. */
+    open: boolean;
+    /** Callback when the dismiss X button is clicked; also enables the X button by default. */
+    onDismiss?: () => void;
+    /** Visual tone variant for the banner background and icon.
+     * @default "info"
+     */
+    tone?: AlertBannerTone;
+    /** Required heading text rendered in bold. Accepts ReactNode for rich content. */
+    title: ReactNode;
+    /** Optional secondary body text beneath the title. */
+    description?: ReactNode;
+    /** Overrides `description` when present - use for advanced layouts with embedded buttons. */
+    children?: ReactNode;
+    /** Whether to show the dismiss X button. Defaults to `!!onDismiss`. Pass `false` to suppress it. */
+    dismissible?: boolean;
+}
+/**
+ * AlertBanner - inline-flow controlled tone banner (D-410, D-411).
+ *
+ *   <AlertBanner
+ *     open={showTrialBanner}
+ *     onDismiss={() => setShowTrialBanner(false)}
+ *     tone="warning"
+ *     title="Trial ends in 3 days"
+ *     description="Upgrade now to keep your data."
+ *   />
+ *
+ *   <AlertBanner open tone="success" title="Saved as draft" />   // non-dismissible
+ *
+ * Controlled - caller manages `open`. Returns `null` when `open === false`.
+ * NO auto-dismiss (different from Toast). For ephemeral feedback use Toast (DS-40).
+ *
+ * Layout: `[icon] [title + description-or-children] [dismiss-X-when-dismissible]`.
+ * Tone via `data-variant` (Card pattern); CSS attribute selectors in primitives.css
+ * apply tone-tinted bg + border + icon-color.
+ *
+ * `dismissible` defaults to `!!onDismiss` - passing `onDismiss` shows the X by default.
+ * Force-hide with `dismissible={false}` (consumer wants to control close another way).
+ */
+declare const AlertBanner: react.ForwardRefExoticComponent<AlertBannerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Optional icon rendered above the title. Pass a lucide icon or any SVG at **40×40**.
+     * Omit for minimal inline empty states where an icon would add visual noise.
+     */
+    icon?: ReactNode;
+    /**
+     * Primary heading. Required. Rendered in the display font at 600 weight.
+     * Keep to one short sentence - "No applications yet", "Nothing matched".
+     */
+    title: ReactNode;
+    /**
+     * Secondary line below the title. Use to explain why the state occurred or
+     * suggest the next action. Rendered in `--ink-3` (flips with dark mode).
+     */
+    description?: ReactNode;
+    /**
+     * CTA slot. Pass one or two `<Button>` elements (or any ReactNode).
+     * Rendered as a flex row below the description.
+     * Common patterns: single primary Button, primary + ghost pair.
+     */
+    children?: ReactNode;
+}
+/**
+ * EmptyState - centered display for empty/no-data/first-run states (DS-44, D-421).
+ *
+ *   <EmptyState
+ *     icon={<Inbox size={40} />}
+ *     title="No applications yet"
+ *     description="Add your first job to get started."
+ *   >
+ *     <Button>Add application</Button>
+ *   </EmptyState>
+ *
+ * Centered vertical stack: icon → title → description → children-as-CTA.
+ * Children slot accepts arbitrary JSX - single Button, primary+secondary
+ * Buttons in a row, link, or any combination.
+ *
+ * NO compound API (no `<EmptyState.Icon>`, `<EmptyState.Action>`).
+ * Structured props for icon/title/description; children for CTA actions.
+ *
+ * Padding `var(--space-8)` outer; gap `var(--space-3)` between stack
+ * elements; max-width 360px on text content (consumer can override via
+ * `style` or wrapping container width).
+ *
+ * `description` color uses `var(--ink-3)` token - flips with theme.
+ */
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+
+type ToastTone = "success" | "error" | "info" | "warning";
+interface ToastOptions {
+    /** Auto-dismiss after `duration` ms. Default 3000. Pass `Infinity` to disable auto-dismiss. */
+    duration?: number;
+}
+interface ToastApi {
+    success: (message: ReactNode, opts?: ToastOptions) => number;
+    error: (message: ReactNode, opts?: ToastOptions) => number;
+    info: (message: ReactNode, opts?: ToastOptions) => number;
+    warning: (message: ReactNode, opts?: ToastOptions) => number;
+    dismiss: (id: number) => void;
+}
+/**
+ * useToast - imperative toast API hook (D-400).
+ *
+ * Must be called inside a `<ToastProvider>`. Throws otherwise.
+ *
+ *   const toast = useToast();
+ *   toast.success("Saved");
+ *   toast.error("Failed", { duration: 5000 });
+ *   toast.info("Heads up");
+ *   toast.warning("Almost full");
+ *   const id = toast.success("...");
+ *   toast.dismiss(id);
+ */
+declare function useToast(): ToastApi;
+interface ToastProviderProps {
+    children: ReactNode;
+}
+/**
+ * ToastProvider - context provider + DSPortal-mounted region (D-400, D-401).
+ *
+ *   <ToastProvider>
+ *     <App />
+ *   </ToastProvider>
+ *
+ * Mounts a fixed top-right region (z-1100) that renders only when ≥1 toast
+ * is active. Max 3 concurrent toasts; 4th added → oldest FIFO drops.
+ * Each toast auto-dismisses after `duration` ms (default 3000); pass
+ * `duration: Infinity` to disable auto-dismiss.
+ *
+ * Callback-ref-as-state mounts the stack-container DOM as state (Tooltip
+ * line 79 + Popover line 73 pattern). Animations start cleanly once DSPortal
+ * commits the portaled node and React fires the callback ref.
+ */
+declare function ToastProvider({ children }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+
+interface CopyToClipboardProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onCopy" | "onError"> {
+    /** The string value written to the clipboard on click. */
+    value: string;
+    /** Display text shown inside the button; falls back to `value` when omitted. */
+    label?: string;
+    /**
+     * Text shown in place of `label`/`value` for 2 s after a successful copy.
+     * Omit to keep the original label visible (icon-swap + green border only).
+     * @example copiedLabel="Copied!"
+     */
+    copiedLabel?: string;
+    /** Called after a successful clipboard write; use to trigger a Toast or other feedback. */
+    onCopy?: () => void;
+    /** Called when the clipboard API fails (e.g. insecure context or permission denied). */
+    onError?: (err: Error) => void;
+}
+/**
+ * Inline value + Copy↔Check icon (DS-55, D-531).
+ *
+ * On click: navigator.clipboard.writeText(value) → success: icon swaps to
+ * green Check for 2s, calls onCopy?(); failure: console.warn(err), icon
+ * stays as Copy, calls onError?(err). NO internal Toast dep.
+ */
+declare const CopyToClipboard: react.ForwardRefExoticComponent<CopyToClipboardProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Controlled selected date; pass `null` for no selection. */
+    value: Date | null;
+    /** Called when the user clicks a calendar day cell with the selected Date. */
+    onChange: (d: Date) => void;
+    /** Called when the user navigates to a different month, with the first day of that month. */
+    onMonthChange?: (d: Date) => void;
+    /** Predicate that returns true for dates that should be disabled (unclickable). */
+    disabled?: (d: Date) => boolean;
+    /** Array of dates that receive an event-dot indicator on their cell. */
+    events?: Date[];
+    /** When true, all dates before today are disabled.
+     * @default false
+     */
+    disablePast?: boolean;
+    /** When true, all dates after today are disabled.
+     * @default false
+     */
+    disableFuture?: boolean;
+    /** When true, renders a 12-hour time picker row below the grid.
+     * @default false
+     */
+    showTime?: boolean;
+    /** Predicate for cells that fall within an in-progress date range; adds the amber-light between-state bg. Consumed by DateRangePicker. */
+    inRange?: (d: Date) => boolean;
+    /** Initial month displayed when `value` is null; useful for range-picker right calendar. */
+    defaultMonth?: Date;
+    /** Override cell-selected detection; DateRangePicker uses this to highlight both range endpoints. */
+    isCellSelected?: (d: Date) => boolean;
+    /** Marks a cell as the start of a range for edge-pill visual polish; used by DateRangePicker. */
+    isRangeStart?: (d: Date) => boolean;
+    /** Marks a cell as the end of a range for edge-pill visual polish; used by DateRangePicker. */
+    isRangeEnd?: (d: Date) => boolean;
+}
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SplitButtonAction {
+    /** Display label for this action. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: ReactNode;
+    /** Handler called when this action is selected. */
+    onClick: () => void;
+    /**
+     * Per-action variant override. Drives the primary face appearance when selected
+     * AND adds a left-border color hint in the menu. Defaults to the SplitButton-level `variant`.
+     */
+    variant?: ButtonVariant;
+    /**
+     * Semantic tone applied to this menu item. Overrides the variant color in the dropdown only -
+     * does not affect the primary face. Use for signalling intent (e.g. `"danger"` for Delete).
+     * - `"danger"` → red text
+     * - `"warning"` → amber text
+     * - `"success"` → green text
+     */
+    tone?: "danger" | "warning" | "success";
+}
+interface SplitButtonProps {
+    /** Non-empty array of actions; the first element is shown as the primary face on mount. */
+    actions: [SplitButtonAction, ...SplitButtonAction[]];
+    /** Default visual variant applied to actions that don't set their own `variant`.
+     * @default "primary"
+     */
+    variant?: ButtonVariant;
+    /** Size token applied to both the primary face and the chevron trigger.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Additional className applied to the root wrapper element. */
+    className?: string;
+}
+/**
+ * Split-action button (DS-56, D-530). Primary face + chevron-divider button
+ * exposing a Popover menu of alternative actions. Selecting an alternative
+ * makes it the primary face for this instance - re-mount resets to actions[0]
+ * (in-instance state only; persistence deferred to v2.1).
+ *
+ * v0.5.1 patch - full Button variant set (primary | secondary | ghost |
+ * danger) on the SplitButton level AND per-action. The currently-selected
+ * action's variant drives the primary face's appearance; menu items render
+ * with their own variants as visual hints.
+ *
+ * v0.5.4 - menu item accent only renders for explicit per-action variant
+ * overrides; inherited variants show no left-border accent (cleans the
+ * default-only case where every item was getting an amber edge via the
+ * primary fallback, defeating the differentiation intent).
+ *
+ * Composes Popover (Wave 3) - NOT DSDropdown - because SplitButton's menu is
+ * a 2–5 item action menu, not a listbox semantic.
+ */
+declare const SplitButton: react.ForwardRefExoticComponent<SplitButtonProps & react.RefAttributes<HTMLDivElement>>;
+
+interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+interface MultiSelectProps {
+    /** Controlled array of selected option values. */
+    value: string[];
+    /** Called with the full updated selection array after each toggle or remove. */
+    onChange: (vs: string[]) => void;
+    /** Full list of available options shown in the dropdown. */
+    options: MultiSelectOption[];
+    /** Placeholder text shown in the trigger when nothing is selected.
+     * @default "Select…"
+     */
+    placeholder?: string;
+    /** When true, disables the trigger and prevents interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Additional className applied to the trigger button. */
+    className?: string;
+    /** Inline styles applied to the trigger button. */
+    style?: CSSProperties;
+}
+/**
+ * Multi-select dropdown (DS-51). Chips-in-trigger layout (D-520) with
+ * cap-3 + "+N more" Popover expansion. ARIA: combobox + listbox with
+ * aria-multiselectable=true per D-501. Composes DSDropdown (16-01) +
+ * Popover (Wave 3). Mini-checkbox per option in the dropdown panel.
+ */
+declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    dotColor?: string;
+}
+interface SelectProps {
+    /** Controlled selected option value; pass `null` for no selection. */
+    value: string | null;
+    /** Called with the value string of the option the user selected. */
+    onChange: (v: string) => void;
+    /** Full list of options rendered in the dropdown. */
+    options: SelectOption[];
+    /** Placeholder text shown in the trigger when no option is selected.
+     * @default "Select…"
+     */
+    placeholder?: string;
+    /** When true, renders a search input at the top of the dropdown that filters options.
+     * @default true
+     */
+    searchable?: boolean;
+    /** When true, disables the trigger button and prevents interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Additional className applied to the trigger button. */
+    className?: string;
+    /** Inline styles applied to the trigger button. */
+    style?: CSSProperties;
+}
+/**
+ * Single-select dropdown (DS-50). Composes the internal DSDropdown helper
+ * for portal/positioning/keyboard while wiring the listbox a11y per D-501:
+ * trigger gets role="combobox" + aria-expanded + aria-haspopup="listbox" +
+ * aria-controls + aria-activedescendant; panel renders <ul role="listbox">
+ * with <li role="option" aria-selected> items.
+ *
+ * Searchable by default - when `searchable` and the option list >5 (or any),
+ * a header search input filters by case-insensitive label substring; an
+ * empty filtered result shows a "No results" empty state.
+ *
+ * Each option may carry an optional `dotColor` rendered as an 8×8 round
+ * indicator before the label; the currently-selected option also gets a
+ * trailing Check icon.
+ *
+ * Reuses .ds-atom-dropdown panel chrome from 16-01 - only .ds-atom-select
+ * styling is added in this plan's primitives.css block.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface DateRangePickerProps {
+    /** Controlled range with `start` and `end` dates (either may be null while picking). */
+    value: DateRange;
+    /** Called on every click with the updated `{ start, end }` range object. */
+    onChange: (r: DateRange) => void;
+    /** When true, all dates before today are disabled.
+     * @default false
+     */
+    disablePast?: boolean;
+    /** When true, all dates after today are disabled.
+     * @default false
+     */
+    disableFuture?: boolean;
+    /** Additional className applied to the root wrapper element. */
+    className?: string;
+    /** Inline styles applied to the root wrapper element. */
+    style?: CSSProperties;
+}
+/**
+ * Date-range picker (DS-54). Single calendar with click-twice flow:
+ * 1st click = start (end cleared); 2nd click = end (auto-swap if before
+ * start); 3rd click = reset to new start. Hover preview between selected
+ * start and current hover styled via DatePicker's inRange predicate prop.
+ * NO time picker for v2.0 (deferred to v2.1).
+ *
+ * Single-calendar redesign (v0.5.1) overrides the original D-512 two-cal
+ * layout - matches handoff `ds-pickers.jsx` and user preference.
+ */
+declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface AutocompleteProps<T> {
+    /** Controlled text value of the input field. */
+    value: string;
+    /** Called on every keystroke with the new input string. */
+    onValueChange: (q: string) => void;
+    /** Consumer-filtered list of items to show; Autocomplete never filters internally. */
+    items: T[];
+    /** Optional array of recently-used items shown when the input is empty and focused. */
+    recentItems?: T[];
+    /** Called when the user selects an item from the dropdown. */
+    onSelect: (item: T) => void;
+    /** When provided, shows a "+ Add …" button when `items` is empty; called with the current query. */
+    onCreate?: (query: string) => void;
+    /** Extracts a display string from an item for rendering and type-ahead. */
+    getItemLabel: (item: T) => string;
+    /** Extracts a unique React key string from an item. */
+    getItemKey: (item: T) => string;
+    /** Custom render function for each option row; receives the item and whether it is keyboard-active. */
+    renderItem?: (item: T, isActive: boolean) => ReactNode;
+    /** Placeholder text shown in the empty input.
+     * @default "Search…"
+     */
+    placeholder?: string;
+    /** Additional className applied to the underlying `<input>` element. */
+    className?: string;
+    /** Inline styles applied to the underlying `<input>` element. */
+    style?: CSSProperties;
+}
+/**
+ * Generic combobox primitive (DS-52, D-521). Consumer-filtered items +
+ * optional recents + optional create-as-new. Composes DSDropdown helper.
+ *
+ * Filtering is consumer-controlled: caller filters `items` prop before
+ * passing - Autocomplete never filters internally. Recents are also
+ * consumer-provided (no internal localStorage) per D-521.
+ *
+ * Behavior:
+ * - Empty input + focus + non-empty `recentItems` → dropdown shows
+ *   `RECENT` header + recent items prefixed with a Clock icon.
+ * - Empty input + empty/absent `recentItems` → dropdown stays closed.
+ * - Non-empty input + items=[] + `onCreate` provided → dropdown shows
+ *   a single `+ Add "{query}" as new` button outside the listbox
+ *   (plain `<button>`, NOT `role=option` - listbox semantic preserved).
+ * - Non-empty input + items=[] + no `onCreate` → "No results" empty state.
+ *
+ * ARIA per D-501: native `<input>` trigger with `role="combobox"`,
+ * `aria-autocomplete="list"`, `aria-expanded`, `aria-controls`.
+ * Listbox uses `<ul role="listbox">` + `<li role="option">` items.
+ */
+declare function Autocomplete<T>({ value, onValueChange, items, recentItems, onSelect, onCreate, getItemLabel, getItemKey, renderItem, placeholder, className, style, }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SegmentedOption<T extends string = string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+interface SegmentedControlProps<T extends string = string> {
+    options: SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    ariaLabel: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function SegmentedControlInner<T extends string>({ options, value, onChange, size, disabled, ariaLabel, className, style, }: SegmentedControlProps<T>, ref: React.Ref<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare const SegmentedControl: <T extends string>(props: SegmentedControlProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => ReturnType<typeof SegmentedControlInner>;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: (e: React.MouseEvent) => void;
+}
+interface BreadcrumbsProps {
+    /** Ordered list of breadcrumb items; last item is marked as the current page. */
+    items: BreadcrumbItem[];
+    /** Maximum items shown before collapsing middle items into a "…" overflow menu.
+     * @default 4
+     */
+    maxVisible?: number;
+    /** Accessible label for the `<nav>` landmark.
+     * @default "Breadcrumb"
+     */
+    ariaLabel?: string;
+    /** Additional className applied to the root `<nav>` element. */
+    className?: string;
+    /** Inline styles applied to the root `<nav>` element. */
+    style?: CSSProperties;
+}
+declare const Breadcrumbs: react.ForwardRefExoticComponent<BreadcrumbsProps & react.RefAttributes<HTMLElement>>;
+
+interface TimelineEvent {
+    id: string | number;
+    date: Date | string;
+    label: string;
+    description?: string;
+    color?: string;
+    onClick?: () => void;
+}
+interface TimelineProps {
+    /** Ordered array of events rendered as dots connected by a line. */
+    events: TimelineEvent[];
+    /** Layout direction of the timeline.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /** Additional className applied to the root `<ol>` element. */
+    className?: string;
+    /** Inline styles applied to the root `<ol>` element. */
+    style?: CSSProperties;
+    /** Accessible label for the `<ol>` list.
+     * @default "Timeline"
+     */
+    ariaLabel?: string;
+}
+declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLOListElement>>;
+
+interface InfiniteListProps<T = unknown> {
+    /** Consumer-managed array of items; InfiniteList never slices or paginates internally. */
+    items: T[];
+    /** Render function called for each item; returns the list-item content. */
+    renderItem: (item: T, index: number) => ReactNode;
+    /** Whether more items are available to load; controls sentinel and end-slot visibility. */
+    hasMore: boolean;
+    /** Whether a fetch is currently in flight; pauses the IntersectionObserver while true. */
+    loading: boolean;
+    /** Called when the sentinel element enters the viewport; consumer triggers the next page fetch. */
+    onLoadMore: () => void;
+    /** Custom loading indicator; replaces the default 3-Skeleton row. */
+    loadingSlot?: ReactNode;
+    /** Custom end-of-list message; replaces the default "End of list" text. */
+    endSlot?: ReactNode;
+    /** IntersectionObserver rootMargin for pre-fetching before the sentinel reaches the viewport.
+     * @default "200px"
+     */
+    rootMargin?: string;
+    /** Additional className applied to the root `<ul>` element. */
+    className?: string;
+    /** Inline styles applied to the root `<ul>` element. */
+    style?: CSSProperties;
+    /** Accessible label for the list region.
+     * @default "List"
+     */
+    ariaLabel?: string;
+}
+declare function InfiniteListInner<T>({ items, renderItem, hasMore, loading, onLoadMore, loadingSlot, endSlot, rootMargin, className, style, ariaLabel, }: InfiniteListProps<T>, ref: React.Ref<HTMLUListElement>): react_jsx_runtime.JSX.Element;
+declare const InfiniteList: <T>(props: InfiniteListProps<T> & {
+    ref?: React.Ref<HTMLUListElement>;
+}) => ReturnType<typeof InfiniteListInner>;
+
+interface AccordionProps {
+    mode?: "single" | "multi";
+    defaultOpenIds?: string[];
+    openIds?: string[];
+    onOpenIdsChange?: (ids: string[]) => void;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface AccordionItemProps {
+    id: string;
+    title: React.ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    disabled?: boolean;
+    children: React.ReactNode;
+}
+declare function AccordionItem({ id, title, headingLevel, disabled, children, }: Readonly<AccordionItemProps>): react_jsx_runtime.JSX.Element;
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>> & {
+    Item: typeof AccordionItem;
+};
+
+/**
+ * # Usage Audit - Carousel (DS-65)
+ *
+ * Consumers (post v0.6):
+ * - Marketing hero rotations: image galleries, tutorial steps, testimonial rotators
+ *
+ * API:
+ * - slides: CarouselSlide[]           - array of { id, content, ariaLabel? }
+ * - index / defaultIndex / onIndexChange - controlled or uncontrolled position
+ * - autoPlayInterval: number           - ms between auto-advances; 0 = disabled
+ * - showArrows: boolean                - render Prev/Next arrow buttons (default true)
+ * - showDots: boolean                  - render dot indicator tablist (default true)
+ * - ariaLabel: string                  - accessible label for the carousel region
+ *
+ * Implementation:
+ * - WAI-ARIA Carousel pattern: <section aria-roledescription="carousel">
+ *   with <div role="group" aria-roledescription="slide"> per slide
+ * - Dot tablist: role="tablist" + role="tab" buttons with aria-selected
+ * - Touch swipe via Pointer Events with setPointerCapture (lifted from BottomSheet)
+ *   - touch-only filter via e.pointerType === "touch"
+ * - Autoplay gated by useReducedMotion (W3C guidance: skip timer entirely when set)
+ * - Pause on hover/focus per WAI-ARIA spec
+ * - Keyboard: ArrowLeft/Right when carousel section has focus
+ */
+interface CarouselSlide {
+    /** Unique key for React + DOM identity. */
+    id: string | number;
+    /** Content to render inside the slide. Consumer controls markup and media. */
+    content: React.ReactNode;
+    /**
+     * Override for the slide's aria-label. Defaults to "{i+1} of {N}".
+     * Use when you have a more descriptive label (e.g. "Product photo: Running shoe").
+     */
+    ariaLabel?: string;
+}
+interface CarouselProps {
+    /** Array of slides to display. */
+    slides: CarouselSlide[];
+    /** Controlled current index. When provided, component is fully controlled. */
+    index?: number;
+    /** Initial index when uncontrolled. Defaults to 0. */
+    defaultIndex?: number;
+    /** Called when the active index changes (both controlled and uncontrolled). */
+    onIndexChange?: (i: number) => void;
+    /** Auto-advance interval in ms. 0 or undefined = no autoplay. Autoplay is
+     *  silently disabled when the OS prefers-reduced-motion preference is set. */
+    autoPlayInterval?: number;
+    /** Show Prev/Next arrow buttons. Defaults to true. */
+    showArrows?: boolean;
+    /** Show dot indicator navigation. Defaults to true. */
+    showDots?: boolean;
+    /** Accessible label for the carousel region (required). */
+    ariaLabel: string;
+    /** Additional className for the root section element. */
+    className?: string;
+    /** Inline style for the root section element. */
+    style?: React.CSSProperties;
+}
+declare const Carousel: react.ForwardRefExoticComponent<CarouselProps & react.RefAttributes<HTMLElement>>;
+
+interface TabItem {
+    id: string;
+    label: string;
+    count?: number;
+    disabled?: boolean;
+    content: ReactNode;
+}
+interface TabsProps {
+    /** Array of tab definitions including id, label, optional count badge, disabled flag, and panel content. */
+    tabs: TabItem[];
+    /** Controlled id of the currently active tab. */
+    value: string;
+    /** Called with the tab id when the user activates a different tab. */
+    onChange: (id: string) => void;
+    /** Visual style of the tab triggers.
+     * @default "underline"
+     */
+    variant?: "underline" | "pill";
+    /** Whether selecting a tab happens on arrow-key press (`"automatic"`) or only on Enter/Space (`"manual"`).
+     * @default "automatic"
+     */
+    activationMode?: "automatic" | "manual";
+    /** Accessible label for the `role="tablist"` element (required). */
+    ariaLabel: string;
+    /** Additional className applied to the root wrapper element. */
+    className?: string;
+    /** Inline styles applied to the root wrapper element. */
+    style?: CSSProperties;
+}
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * # Usage Audit - Table (DS-61, D-17-06..D-17-12)
+ *
+ * Compound API:
+ *   <Table.Root density="comfortable" sticky ariaLabel="Users">
+ *     <Table.Header>
+ *       <Table.Row>
+ *         <Table.SelectAllCell isAllSelected={isAll} isIndeterminate={isIndet} onToggleAll={toggleAll} />
+ *         <Table.HeaderCell
+ *           sortable
+ *           sortDir={sortCol === "name" ? sortDir : null}
+ *           onToggleSort={() => toggleSort("name")}
+ *           resizable
+ *           width={widths.name}
+ *           onResizeStart={(e) => startResize("name", e)}
+ *         >
+ *           Name
+ *         </Table.HeaderCell>
+ *       </Table.Row>
+ *     </Table.Header>
+ *     <Table.Body>
+ *       {sorted.map(row => (
+ *         <Table.Row key={row.id} selected={isSelected(row.id)}>
+ *           <Table.SelectCell selected={isSelected(row.id)} onToggle={() => toggle(row.id)} />
+ *           <Table.Cell>{row.name}</Table.Cell>
+ *         </Table.Row>
+ *       ))}
+ *     </Table.Body>
+ *   </Table.Root>
+ *   <Table.Pagination page={p} pageCount={n} onPageChange={setP} />
+ *
+ * Helper hooks:
+ *   useSortableTable - plan 17-10 (DS-61 part 1)
+ *   useTableSelection / useResizableColumns - plan 17-11 (DS-61 part 2)
+ *
+ * Sort indicator: UTF-8 ▲/▼ at ~9px monospace per D-17-07 (not Lucide icons).
+ * Sticky: Table.Root sticky prop → data-sticky="true" → CSS position:sticky on thead.
+ * Density: Table.Root density prop → data-density attr → CSS row-height variants.
+ */
+interface TableRootProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** Row height density mode. Default: "comfortable" (40px). */
+    density?: "cozy" | "comfortable" | "spacious";
+    /** When true, <thead> becomes position:sticky so the header stays visible on scroll. */
+    sticky?: boolean;
+    /** Accessible label for the table (renders as aria-label). */
+    ariaLabel?: string;
+    /** When true, sets aria-multiselectable="true" for multi-row selection (D-17-09). */
+    multiSelectable?: boolean;
+}
+interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    /** Enables click-to-sort behaviour, keyboard activation, and aria-sort. */
+    sortable?: boolean;
+    /**
+     * Current sort direction for this column.
+     * null (or undefined) → unsorted → aria-sort="none", no chevron.
+     */
+    sortDir?: "asc" | "desc" | null;
+    /** Callback fired on click or Enter/Space keydown when sortable. */
+    onToggleSort?: () => void;
+    /** When true, renders a drag handle on the right edge for column resizing (D-17-10). */
+    resizable?: boolean;
+    /** Called on pointerdown of the resize handle. Wire to useResizableColumns.startResize. */
+    onResizeStart?: (e: React.PointerEvent<HTMLSpanElement>) => void;
+    /** When provided, sets the column width inline (used with useResizableColumns). */
+    width?: number;
+}
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /** When true, sets aria-selected + data-selected for CSS highlight (D-17-09). */
+    selected?: boolean;
+}
+interface TableSelectAllCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    onToggleAll: () => void;
+    ariaLabel?: string;
+}
+interface TableSelectCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    selected: boolean;
+    onToggle: () => void;
+    ariaLabel?: string;
+}
+/**
+ * Render `<Table.Pagination />` as a SIBLING of `<Table.Root>`, NOT as a child.
+ * Pagination produces a `<nav>` element, and `<nav>` inside `<table>` (or any of
+ * its descendants except `<caption>`) is invalid HTML - browsers will silently
+ * hoist or strip it, and assistive tech may report inconsistent landmarks.
+ *
+ * GOOD:
+ *   <div>
+ *     <Table.Root>...</Table.Root>
+ *     <Table.Pagination page={p} pageCount={n} onPageChange={setP} />
+ *   </div>
+ *
+ * BAD:
+ *   <Table.Root>
+ *     <Table.Body>
+ *       <Table.Row><Table.Cell colSpan={5}>
+ *         <Table.Pagination ... />   // invalid: <nav> inside <table>
+ *       </Table.Cell></Table.Row>
+ *     </Table.Body>
+ *   </Table.Root>
+ *
+ * Demonstrated in the `PaginationOutsideTable` Storybook story.
+ */
+interface TablePaginationProps {
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    pageSize?: number;
+    total?: number;
+    ariaLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Table - compound primitive (DS-61, parts 1 + 2).
+ *
+ * Members: Table.Root, Table.Header, Table.HeaderCell, Table.Body, Table.Row, Table.Cell
+ *          Table.SelectAllCell, Table.SelectCell, Table.Pagination
+ *
+ * Important: render <Table.Pagination /> as a sibling of <Table.Root>, NOT a child.
+ * <nav> inside <table> is invalid HTML. See TablePaginationProps JSDoc for details.
+ */
+declare const Table: {
+    Root: react.ForwardRefExoticComponent<TableRootProps & react.RefAttributes<HTMLTableElement>>;
+    Header: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+    HeaderCell: react.ForwardRefExoticComponent<TableHeaderCellProps & react.RefAttributes<HTMLTableCellElement>>;
+    Body: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+    Row: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+    Cell: react.ForwardRefExoticComponent<react.TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+    SelectAllCell: react.ForwardRefExoticComponent<TableSelectAllCellProps & react.RefAttributes<HTMLTableCellElement>>;
+    SelectCell: react.ForwardRefExoticComponent<TableSelectCellProps & react.RefAttributes<HTMLTableCellElement>>;
+    Pagination: react.ForwardRefExoticComponent<TablePaginationProps & react.RefAttributes<HTMLElement>>;
+};
+
+interface CalendarEvent {
+    id: string;
+    date: Date | string;
+    endDate?: Date | string;
+    label: string;
+    color?: string;
+    meta?: unknown;
+}
+interface CalendarProps {
+    /** Array of events to display as chips on day cells. */
+    events?: CalendarEvent[];
+    /** Controlled active view; omit for uncontrolled. */
+    view?: "month" | "week" | "day";
+    /** Initial view when uncontrolled.
+     * @default "month"
+     */
+    defaultView?: "month" | "week" | "day";
+    /** Called when the user switches views via the SegmentedControl. */
+    onViewChange?: (v: "month" | "week" | "day") => void;
+    /** Controlled selected date; highlighted in amber on the grid. */
+    selectedDate?: Date | null;
+    /** Called when a day cell is clicked with the clicked Date. */
+    onSelectedDateChange?: (d: Date) => void;
+    /** Day the week starts on: 0 = Sunday, 1 = Monday.
+     * @default 1
+     */
+    weekStart?: 0 | 1;
+    /** Maximum event chips shown per day cell before a "+N more" overflow trigger.
+     * @default 3
+     */
+    maxVisibleEventsPerDay?: number;
+    /**
+     * Fixed height in px for the day-view time grid (the scrollable 24-hour area).
+     * The all-day row above the grid is unaffected.
+     * When omitted the grid expands to show all 24 hours.
+     * @default 480
+     */
+    dayViewHeight?: number;
+    /** Accessible label for the calendar region.
+     * @default "Calendar"
+     */
+    ariaLabel?: string;
+    /** Additional className applied to the root element. */
+    className?: string;
+    /** Inline styles applied to the root element. */
+    style?: CSSProperties;
+}
+declare function AgendaList({ events, ariaLabel, }: {
+    events: CalendarEvent[];
+    ariaLabel?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Calendar primitive (DS-68).
+ * Three views: month (default), week, day.
+ * Compound: <Calendar.Agenda events={...} /> for consumer-rendered agenda list.
+ */
+declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>> & {
+    Agenda: typeof AgendaList;
+};
+
+interface RichTextProps {
+    /** Controlled HTML string (default) or TipTap JSON Doc object when `outputFormat="json"`. */
+    value: string | object;
+    /** Called on every editor change with the updated HTML string or JSON Doc. */
+    onChange: (value: string | object) => void;
+    /** Placeholder text shown in the empty editor surface. */
+    placeholder?: string;
+    /** When true, hides the toolbar and makes the editor non-editable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /** Output format emitted to `onChange`; `"html"` emits a string, `"json"` emits a TipTap Doc object.
+     * @default "html"
+     */
+    outputFormat?: "html" | "json";
+    /** Replace the default toolbar with a custom ReactNode; pass `null` to suppress the toolbar entirely. */
+    toolbar?: ReactNode;
+    /** Additional className applied to the inner editor surface wrapper. */
+    className?: string;
+    /** Accessible label for the editor region.
+     * @default "Rich text editor"
+     */
+    ariaLabel?: string;
+    /** Inline styles applied to the outer root wrapper. */
+    style?: CSSProperties;
+}
+declare const RichText: react.ForwardRefExoticComponent<RichTextProps & react.RefAttributes<HTMLDivElement>>;
+
+interface AppShellProps {
+    /** Sidebar nav component - receives collapsed + onToggleCollapse via cloneElement */
+    sidebar: ReactElement<{
+        collapsed?: boolean;
+        onToggleCollapse?: () => void;
+    }>;
+    /** Topbar component (AppBar DS-72 or any ReactNode) */
+    topbar: ReactNode;
+    /** Main page content */
+    main: ReactNode;
+    /** Optional footer (DS-73 or any ReactNode) */
+    footer?: ReactNode;
+    /**
+     * localStorage key for sidebar collapse persistence.
+     * Pass null to disable persistence.
+     * @default "ds-sidebar-collapsed"
+     */
+    storageKey?: string | null;
+    /**
+     * Expanded sidebar width in pixels.
+     * @default 240
+     */
+    sidebarWidth?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * AppShell (DS-71) - top-level CSS Grid layout primitive.
+ *
+ * Slots: topbar (sticky header), sidebar (collapsible icon rail), main (scrollable content),
+ * footer (optional bottom bar).
+ *
+ * The sidebar slot child receives `collapsed` and `onToggleCollapse` injected via
+ * React.cloneElement - no extra context or ref needed.
+ */
+declare const AppShell: react__default.ForwardRefExoticComponent<AppShellProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type AppBarVariant = "minimal" | "withSearch" | "default" | "centered";
+interface AppBarProps {
+    /** Visual variant. @default "default" */
+    variant?: AppBarVariant;
+    /** When true, applies frosted-glass background + shadow. Consumer drives via scroll listener. @default false */
+    scrolled?: boolean;
+    /** Custom logo content. If omitted, renders a default ink box with "DS" label. */
+    logo?: ReactNode;
+    /** Nav links slot (default + centered variants). */
+    nav?: ReactNode;
+    /** Right-side actions slot (avatar, notifications, etc.). */
+    actions?: ReactNode;
+    /** Callback fired when the search input value changes (withSearch variant). */
+    onSearchChange?: (value: string) => void;
+    /** Placeholder for the search input. @default "Search..." */
+    searchPlaceholder?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * AppBar - DS-72
+ *
+ * Standalone sticky topbar primitive. Pass as the `topbar` slot to AppShell (DS-71).
+ * Provides 4 variants: minimal, withSearch, default, centered.
+ * Consumer-driven `scrolled` prop applies frosted-glass background + shadow transition.
+ */
+declare const AppBar: react.ForwardRefExoticComponent<AppBarProps & react.RefAttributes<HTMLElement>>;
+
+type FooterVariant = "compact" | "expanded";
+interface FooterColumn {
+    title: string;
+    links: Array<{
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    }>;
+}
+interface FooterProps {
+    /** Visual variant. @default "compact" */
+    variant?: FooterVariant;
+    /** Copyright line text. @default "© 2026 - All rights reserved" */
+    copyright?: string;
+    /** Compact variant: right-side link row. */
+    links?: Array<{
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    }>;
+    /** Expanded variant: array of column definitions (4 columns recommended). */
+    columns?: FooterColumn[];
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Footer - DS-73
+ *
+ * Standalone page footer primitive. Pass as the `footer` slot to AppShell (DS-71).
+ * - `compact`: 1-line bar with copyright + utility links.
+ * - `expanded`: 4-column marketing footer with column titles + links + bottom copyright row.
+ */
+declare const Footer: react.ForwardRefExoticComponent<FooterProps & react.RefAttributes<HTMLElement>>;
+
+interface PasswordStrengthProps {
+    /** 0=empty, 1=weak, 2=fair, 3=good, 4=strong */
+    score: 0 | 1 | 2 | 3 | 4;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function PasswordStrength({ score, className, style }: PasswordStrengthProps): react_jsx_runtime.JSX.Element;
+interface FieldErrorProps {
+    message?: string | null;
+    className?: string;
+}
+declare function FieldError({ message, className }: FieldErrorProps): react_jsx_runtime.JSX.Element | null;
+interface FormErrorSummaryProps {
+    errors: string[];
+    /** @default "Please fix the following errors:" */
+    title?: string;
+    className?: string;
+}
+declare function FormErrorSummary({ errors, title, className, }: FormErrorSummaryProps): react_jsx_runtime.JSX.Element | null;
+
+interface CoachmarkProps {
+    /** Ref to the element being highlighted */
+    anchorRef: RefObject<HTMLElement | null>;
+    title: string;
+    desc?: string;
+    /** Current step number (1-based) */
+    step?: number;
+    /** Total steps in the coachmark sequence */
+    total?: number;
+    onNext?: () => void;
+    onDone?: () => void;
+    /**
+     * localStorage key for persist-dismiss state.
+     * Omit or pass null to disable persistence.
+     */
+    storageKey?: string | null;
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+}
+declare function Coachmark({ anchorRef, title, desc, step, total, onNext, onDone, storageKey, placement, }: CoachmarkProps): react_jsx_runtime.JSX.Element;
+
+interface WizardStep {
+    label: string;
+    desc?: string;
+    /** Return error string to block advance; return null/undefined to proceed. */
+    validate?: () => string | null | undefined;
+}
+interface WizardProps {
+    steps: WizardStep[];
+    onComplete: () => void;
+    onCancel?: () => void;
+    /** @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    children: ReactNode | ((step: number) => ReactNode);
+}
+/**
+ * Wizard - multi-step form scaffold (DS-74).
+ *
+ *   <Wizard steps={steps} onComplete={handleFinish}>
+ *     {(step) => <StepContent step={step} />}
+ *   </Wizard>
+ *
+ * Renders a horizontal (or vertical) stepper, a ProgressBar, step content,
+ * optional inline validation error, and Back/Next navigation - all within a
+ * single focus-trapped container.
+ *
+ * Per-step validation: attach `validate()` to a WizardStep; returning a
+ * non-empty string blocks advance and surfaces the error inline.
+ * Thrown exceptions are caught and treated as validation failures
+ * (threat T-18-04-02).
+ *
+ * Does NOT wrap content in a <form> - step fields are the consumer's
+ * responsibility. Wizard manages step state only.
+ */
+declare function Wizard({ steps, onComplete, onCancel, orientation, children }: WizardProps): react_jsx_runtime.JSX.Element;
+
+interface InlineEditProps {
+    /** Current display value. */
+    value: string;
+    /**
+     * Called with the new value when the user commits (Enter key or blur).
+     * Return a Promise to trigger the saving state. If the Promise rejects,
+     * the component enters error state with the rejection message.
+     */
+    onSave: (value: string) => Promise<void> | void;
+    /** When true, renders a textarea instead of a single-line input.
+     * @default false
+     */
+    multiline?: boolean;
+    /** Placeholder shown in idle state when value is empty. */
+    placeholder?: string;
+    /** When true, the idle span is not clickable (no editing allowed).
+     * @default false
+     */
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * InlineEdit (DS-77) - click-to-edit pattern with optimistic save + error recovery.
+ *
+ * State machine:
+ *   idle     → click / Enter / Space → editing
+ *   editing  → Enter                 → saving
+ *   editing  → Escape / blur         → idle (restored original)
+ *   saving   → onSave resolves       → idle
+ *   saving   → onSave rejects        → error (input re-enabled with last draft)
+ *   error    → Escape / blur         → idle (restored original)
+ *   error    → Enter                 → saving (retry)
+ *
+ * Blur always cancels (reverts), matching the handoff spec for click-to-edit
+ * in table cells and inline fields.
+ */
+declare function InlineEdit({ value, onSave, multiline, placeholder, disabled, className, style, }: InlineEditProps): react_jsx_runtime.JSX.Element;
+
+interface SearchFilter {
+    id: string;
+    label: string;
+    tone?: "default" | "match" | "miss" | "learning" | "tag";
+}
+interface SearchSuggestion {
+    id: string;
+    label: string;
+}
+interface SearchAndFiltersProps {
+    /** Controlled value for the search input. */
+    value?: string;
+    /** Placeholder text for the search input.
+     * @default "Search..."
+     */
+    placeholder?: string;
+    /**
+     * Suggestions shown in the DSDropdown autocomplete when the input is
+     * focused and has a value. Consumer is responsible for filtering.
+     */
+    suggestions?: SearchSuggestion[];
+    /** Filter chips shown below the search input. */
+    activeFilters?: SearchFilter[];
+    /** Called on every keystroke with the current search string. */
+    onSearch?: (value: string) => void;
+    /** Called when a suggestion is selected from the dropdown. */
+    onSuggestionSelect?: (suggestion: SearchSuggestion) => void;
+    /** Called when a filter chip × button is clicked. */
+    onFilterRemove?: (filter: SearchFilter) => void;
+    /** Called when the "Clear all" button is clicked. */
+    onClearFilters?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SearchAndFilters (DS-78) - search input with DSDropdown autocomplete + Chip filter tokens.
+ *
+ * Composes:
+ * - DSDropdown (_internals/DSDropdown) for the suggestions overlay
+ * - Chip (Chip.tsx) for each active filter token
+ *
+ * Usage:
+ * ```tsx
+ * <SearchAndFilters
+ *   suggestions={filteredSuggestions}
+ *   activeFilters={activeFilters}
+ *   onSearch={setQuery}
+ *   onSuggestionSelect={(s) => addFilter({ id: s.id, label: s.label })}
+ *   onFilterRemove={(f) => removeFilter(f.id)}
+ *   onClearFilters={clearAllFilters}
+ * />
+ * ```
+ */
+declare function SearchAndFilters({ value, placeholder, suggestions, activeFilters, onSearch, onSuggestionSelect, onFilterRemove, onClearFilters, className, style, }: SearchAndFiltersProps): react_jsx_runtime.JSX.Element;
+
+interface SortableItemData {
+    id: string;
+    [key: string]: unknown;
+}
+interface SortableProps {
+    /** Array of items; each must have a unique `id` string */
+    items: SortableItemData[];
+    /** Called after a successful drag-and-drop reorder with the new items array */
+    onReorder: (items: SortableItemData[]) => void;
+    /** Render each item's content */
+    renderItem: (item: SortableItemData, index: number) => ReactNode;
+    /** Stable list identifier - required when used inside SortableDndContext */
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface SortableItemProps {
+    id: string;
+    children: ReactNode;
+    reducedMotion: boolean;
+}
+interface SortableDndContextProps {
+    children: ReactNode;
+    /**
+     * Called when an item moves between two lists.
+     * @param activeId  - id of the dragged item
+     * @param overId    - id of the item it was dropped over
+     * @param activeListId - `id` prop of the source Sortable
+     * @param overListId   - `id` prop of the destination Sortable
+     */
+    onMove: (activeId: UniqueIdentifier, overId: UniqueIdentifier, activeListId: string | undefined, overListId: string | undefined) => void;
+    /**
+     * Renders the drag overlay card when an item is being dragged across lists.
+     * Receives the active item id. If omitted, a ghost placeholder is shown.
+     */
+    renderOverlay?: (activeId: UniqueIdentifier) => ReactNode;
+}
+declare function SortableItem({ id, children, reducedMotion }: SortableItemProps): react_jsx_runtime.JSX.Element;
+declare function SortableDndContext({ children, onMove, renderOverlay }: SortableDndContextProps): react_jsx_runtime.JSX.Element;
+declare function Sortable({ items, onReorder, renderItem, id, className, style }: SortableProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerTone, AppBar, type AppBarProps, type AppBarVariant, AppShell, type AppShellProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarPresence, type AvatarPresencePosition, type AvatarProps, type AvatarSize, AvatarStack, type AvatarStackProps, Badge, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetHeight, type BottomSheetProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarEvent, type CalendarProps, Card, type CardProps, type CardVariant, Carousel, type CarouselProps, type CarouselSlide, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipTone, Coachmark, type CoachmarkProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, CopyToClipboard, type CopyToClipboardProps, DSPortal, type DSPortalProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, EmptyState, type EmptyStateProps, FieldError, type FieldErrorProps, Footer, type FooterColumn, type FooterProps, type FooterVariant, FormErrorSummary, type FormErrorSummaryProps, HoverCard, type HoverCardPlacement, type HoverCardProps, InfiniteList, type InfiniteListProps, InlineConfirm, type InlineConfirmProps, type InlineConfirmTriggerProps, InlineEdit, type InlineEditProps, Lightbox, type LightboxItem, type LightboxProps, Modal, type ModalProps, type ModalRole, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberStepper, type NumberStepperProps, PasswordStrength, type PasswordStrengthProps, Popover, type PopoverPlacement, type PopoverProps, type PopoverVariant, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeSlider, type RangeSliderProps, RichText, type RichTextProps, RollingNumber, type RollingNumberProps, SearchAndFilters, type SearchAndFiltersProps, type SearchFilter, type SearchSuggestion, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, Sheet, type SheetProps, type SheetSide, Skeleton, type SkeletonProps, type SkeletonShape, Sortable, SortableDndContext, type SortableDndContextProps, SortableItem, type SortableItemData, type SortableItemProps, type SortableProps, SplitButton, type SplitButtonAction, type SplitButtonProps, StarRating, type StarRatingProps, type StarRatingSize, StickyNote, type StickyNoteProps, type StickyNoteRotation, type TabItem, Table, type TableHeaderCellProps, type TableRootProps, Tabs, type TabsProps, TextInput, type TextInputProps, Textarea, type TextareaProps, Timeline, type TimelineEvent, type TimelineProps, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, Wizard, type WizardProps, type WizardStep, deriveGradient, deriveInitials, useToast };