@akhil-saxena/design-system 1.2.0 → 1.5.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ChangeEvent, CSSProperties, ReactElement, RefObject } from 'react';
+import react__default, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, CSSProperties, HTMLAttributes, ElementType, AnchorHTMLAttributes, TextareaHTMLAttributes, ChangeEvent, 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';
@@ -51,6 +51,28 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+type OAuthProvider = "google" | "github" | "apple";
+interface OAuthButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** OAuth provider — determines logo + default label. @default "google" */
+    provider?: OAuthProvider;
+    /** Override the button label (defaults to "Continue with {Provider}"). */
+    label?: string;
+    /** When true, renders inverted for dark surfaces. @default false */
+    dark?: boolean;
+}
+/**
+ * OAuth provider button. Renders the provider's official logo + a label
+ * styled to match DS Button conventions (44px height, 9px radius, transitions).
+ *
+ * Hooks into press feedback via `.ds-atom-oauthbtn:active { transform: scale(.97); }`
+ * defined in primitives.css.
+ *
+ * @example
+ * <OAuthButton provider="google" type="submit" />
+ * <OAuthButton provider="github" dark />
+ */
+declare const OAuthButton: react.ForwardRefExoticComponent<OAuthButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
 interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
     /** When true, applies error-state border color to the input or wrapper. */
     error?: boolean;
@@ -65,6 +87,303 @@ interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "pr
 }
 declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
 
+interface InlineEditFieldProps {
+    /** Current display value. */
+    value: string;
+    /**
+     * Called with the new value on commit (Enter, ⌘Enter for multiline, or blur).
+     * Return a Promise to trigger the saving state.
+     * If the Promise rejects, component enters error state with rejection message.
+     */
+    onSave: (next: string) => void | Promise<void>;
+    /** When true, renders a Textarea instead of a single-line TextInput.
+     * @default false
+     */
+    multiline?: boolean;
+    /** Placeholder shown in idle state when value is empty.
+     * Rendered as an italic span with `var(--ink-4)` color.
+     */
+    placeholder?: string;
+    /** When true, the idle span is not clickable.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Maximum character length passed to the underlying input/textarea. */
+    maxLength?: number;
+    /**
+     * Accessible label for the trigger element in idle state and the underlying
+     * input in edit state. Required.
+     */
+    ariaLabel: string;
+    /**
+     * Typography preset for edit-mode input. Controls font-family + matching
+     * size defaults. Does NOT affect idle mode — idle inherits from parent.
+     * - "default" — Inter, 13px, weight 500 (matches existing INPUT style object)
+     * - "mono"    — var(--mono), 10.5px, weight 700, letter-spacing .12em, uppercase
+     * - "serif"   — Newsreader, 14px, line-height 1.55
+     * @default "default"
+     */
+    font?: "default" | "mono" | "serif";
+    className?: string;
+    style?: CSSProperties;
+}
+declare function InlineEditField({ value, onSave, multiline, placeholder, disabled, maxLength, ariaLabel, font, className, style, }: InlineEditFieldProps): react_jsx_runtime.JSX.Element;
+
+interface InlineAddRowProps {
+    /** Placeholder shown in both the dashed trigger and the active input. */
+    placeholder?: string;
+    /** Called with the trimmed value when the user commits (Enter). */
+    onSave: (value: string) => void;
+    /** Keyboard hint rendered at the right edge of the active input. */
+    kbdHint?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * InlineAddRow — a dashed "+ add" affordance that expands into an inline text
+ * input on click. Enter commits (`onSave` with the trimmed value); Esc or blur
+ * discards. Use for "add a question / note / person / row" patterns where a full
+ * form is overkill.
+ *
+ * @example
+ * <InlineAddRow placeholder="Add a question…" onSave={(t) => addQuestion(t)} />
+ */
+declare const InlineAddRow: react.ForwardRefExoticComponent<InlineAddRowProps & react.RefAttributes<HTMLDivElement>>;
+
+type EyebrowSize = "xs" | "sm" | "md";
+type EyebrowTone = "ink-3" | "ink-4" | "amber";
+interface EyebrowProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Type-scale token. @default "sm" */
+    size?: EyebrowSize;
+    /** Override color (legacy — defaults to var(--ink-3)). Use `tone` for the
+     * declarative path. */
+    color?: string;
+    /** Tone token — emits a data-attr so CSS rules apply the color. */
+    tone?: EyebrowTone;
+}
+/**
+ * Mono-caps eyebrow / overline. Used as form field labels, hero kickers,
+ * section headers, and stage-chip captions.
+ *
+ * `tone` (declarative, CSS data-attr) is the preferred way to set color in
+ * new code; `color` (legacy inline override) still works for one-offs.
+ *
+ * @example
+ * <Eyebrow>FULL NAME</Eyebrow>
+ * <Eyebrow size="md" tone="amber">WELCOME BACK</Eyebrow>
+ */
+declare const Eyebrow: react.ForwardRefExoticComponent<EyebrowProps & react.RefAttributes<HTMLSpanElement>>;
+
+type TextVariant = "body" | "small" | "caption" | "legal";
+type TextElement = "p" | "span" | "div";
+type TextSizeToken = "2xs" | "xs" | "sm" | "base" | "md" | "lg";
+type TextWeightToken = "regular" | "medium" | "bold" | "black";
+type TextTone = "ink" | "ink-2" | "ink-3" | "ink-4" | "amber" | "red" | "green";
+type TextLeading = "tight" | "snug" | "normal" | "relaxed";
+interface TextProps extends HTMLAttributes<HTMLElement> {
+    /** Legacy preset — drives inline style. @default "body" */
+    variant?: TextVariant;
+    /** Semantic element to render. @default "p" */
+    as?: TextElement;
+    /** Override color (legacy — defaults to tone for variant). Use `tone` for
+     * the declarative path. */
+    color?: string;
+    /** Override max-width — caps line length for readability. */
+    maxWidth?: number | string;
+    /** Type-scale token — emits data-attr; CSS applies font-size. */
+    size?: TextSizeToken;
+    /** Weight token — emits data-attr; CSS applies font-weight. */
+    weight?: TextWeightToken;
+    /** Color tone token — emits data-attr; CSS applies color. */
+    tone?: TextTone;
+    /** When true, swaps to var(--mono) family + letter-spacing. */
+    mono?: boolean;
+    /** Line-height token — overrides the default (relaxed). */
+    leading?: TextLeading;
+}
+/**
+ * Body text primitive. Two APIs coexist:
+ * - **Legacy:** `variant` preset drives inline style (body/small/caption/legal).
+ * - **Token/data-attr:** `size` + `tone` + `weight` + `mono` + `leading` all
+ *   emit data-attrs; `primitives.css` resolves them. Use this for new code.
+ *
+ * The two are NOT exclusive — pass `variant` for the base + a `size`/`tone`
+ * override to tweak one axis.
+ *
+ * @example
+ * <Text>Mark every step of your job search.</Text>
+ * <Text size="sm" tone="ink-3">Applied 3d ago</Text>
+ * <Text variant="caption" maxWidth={360}>Sent to alex@example.com…</Text>
+ */
+declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingSizeToken = "2xs" | "xs" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+type HeadingWeightToken = "regular" | "medium" | "bold" | "black";
+type HeadingTone = "ink" | "ink-2" | "ink-3" | "amber";
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** Semantic heading level. @default 2 */
+    level?: HeadingLevel;
+    /** Visual size — either a px number (legacy, drives inline style) or a
+     * type-scale token ('2xs'..'4xl') which routes through the CSS data-attr
+     * path. @default 28
+     */
+    size?: number | HeadingSizeToken;
+    /** Archivo weight — numeric (legacy) or token. @default 900 */
+    weight?: 500 | 600 | 700 | 800 | 900 | HeadingWeightToken;
+    /** Override color (legacy — defaults to var(--ink)). Use `tone` for the
+     * declarative path. */
+    color?: string;
+    /** Tone token — emits a data-attr so CSS rules apply the color. */
+    tone?: HeadingTone;
+    /** Override the rendered tag — useful when the visual size and the semantic
+     * level diverge (e.g. an `<h2>` styled as a small kicker). */
+    as?: ElementType;
+}
+/**
+ * Display heading primitive — for hero headlines and form headlines.
+ *
+ * Two APIs coexist:
+ * - **Legacy/inline:** `size={28}` (number) + `weight={900}` (number) drives
+ *   inline style. Letter-spacing derives from size.
+ * - **Token/data-attr:** `size="2xl"` + `weight="black"` emit data-attrs;
+ *   `primitives.css` applies font-size + font-weight from token vars. Use this
+ *   for new code where the theme drives sizing.
+ *
+ * @example
+ * <Heading level={1} size={72} weight={900}>Job search, organized.</Heading>
+ * <Heading level={2} size="2xl" weight="black" tone="amber">Settings</Heading>
+ */
+declare const Heading: react.ForwardRefExoticComponent<HeadingProps & react.RefAttributes<HTMLHeadingElement>>;
+
+type DividerSpacing = "none" | "sm" | "md" | "lg" | "xl";
+type DividerAccent = "dashed" | "amber";
+interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional centered label between two hairlines (e.g. "OR"). */
+    label?: ReactNode;
+    /** When true, renders vertically (height: 100%, width: 1px). @default false */
+    vertical?: boolean;
+    /** Override the hairline color (defaults to var(--rule)). */
+    color?: string;
+    /** Margin preset — data-attr-driven via primitives.css. When set, overrides
+     * the legacy default (no margin for horizontal, var(--space-3) horizontal
+     * for vertical). */
+    spacing?: DividerSpacing;
+    /** Accent style — `dashed` uses a dashed top-border, `amber` paints an
+     * amber-tinted 2px hairline. */
+    accent?: DividerAccent;
+}
+/**
+ * Hairline rule with an optional centered label.
+ *
+ * - Horizontal (default): `1px` rule across the row; label centered with
+ *   monospace caps if provided (e.g. the "OR" between OAuth and email forms).
+ * - Vertical: `1px` rule fills the parent's height.
+ *
+ * New axes (data-attr driven):
+ * - `spacing` adds the bundle's margin presets.
+ * - `accent` swaps to dashed or amber-tinted stylings via primitives.css.
+ *
+ * @example
+ * <Divider />
+ * <Divider label="OR" spacing="md" />
+ * <Divider accent="amber" spacing="lg" />
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+
+type LinkVariant = "default" | "inline" | "footer" | "action" | "quiet";
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Style variant.
+     * - `default` — neutral inline link, amber on hover.
+     * - `inline` — body-text inline link, amber underline.
+     * - `footer` — small footer/cross-link.
+     * - `action` — bold action link with trailing arrow (e.g. "Sign in →").
+     * - `quiet` — muted, no underline until hover.
+     * @default "inline"
+     */
+    variant?: LinkVariant;
+    /** Override color (inline). */
+    color?: string;
+    /** Override the rendered element. Use to attach Link styles to a `<button>`
+     * or any custom element. @default "a"
+     */
+    as?: ElementType;
+}
+/**
+ * Text-style hyperlink primitive. Five variants cover the common surfaces:
+ * default (neutral), inline (body-text amber), footer (small cross-link),
+ * action (bold with arrow), quiet (muted, hover-only underline).
+ *
+ * `as` overrides the rendered element — useful when the visual contract is
+ * "link" but the semantic is "button" (e.g. JS-handled actions).
+ *
+ * @example
+ * <Link href="/signin">Sign in</Link>
+ * <Link variant="quiet" href="/legal">Legal</Link>
+ * <Link variant="footer" as="button" onClick={clear}>CLEAR</Link>
+ */
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
+interface DotGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Dot color (any CSS color). @default "var(--cream)" */
+    color?: string;
+    /** Dot opacity. @default 0.055 */
+    opacity?: number;
+    /** Tile size in px — controls dot spacing. @default 18 */
+    tile?: number;
+    /** Dot radius in px. @default 1.4 */
+    dotRadius?: number;
+}
+/**
+ * Radial-gradient dot-pattern overlay. Use as an `position: absolute; inset: 0;`
+ * decoration on dark hero panels, marketing surfaces, or empty-state backgrounds.
+ *
+ * Pointer-events disabled so it never blocks content underneath.
+ *
+ * @example
+ * <div style={{ position: "relative" }}>
+ *   <DotGrid />
+ *   <p>Hero content over dots…</p>
+ * </div>
+ */
+declare const DotGrid: react.ForwardRefExoticComponent<DotGridProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SplitHeroProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Left/aside content — typically a marketing or brand panel on a dark surface. */
+    aside: ReactNode;
+    /** Right/main content — typically the form, body, or interactive payload. */
+    main: ReactNode;
+    /** Aside-to-main column ratio, e.g. "1fr 1fr" (default) or "1.15fr 1fr". @default "1fr 1fr" */
+    ratio?: string;
+    /** Aside background color. @default "var(--ink)" */
+    asideBackground?: string;
+    /** Main background color. @default "var(--cream)" */
+    mainBackground?: string;
+    /** When viewport ≤ this breakpoint (px), stack vertically (aside on top). @default 900 */
+    stackBelow?: number;
+    /** When viewport ≤ this breakpoint (px), hide the aside entirely. @default 600 */
+    hideAsideBelow?: number;
+}
+/**
+ * Two-column page chrome for marketing / auth / onboarding surfaces.
+ *
+ * - Desktop (`> stackBelow`): aside | main, side-by-side.
+ * - Tablet (`≤ stackBelow`, `> hideAsideBelow`): stacked vertically.
+ * - Mobile (`≤ hideAsideBelow`): aside hidden, main fills the viewport.
+ *
+ * The root is `height: 100vh; overflow: hidden;` so the aside cannot push the
+ * page taller than the viewport; the `main` slot internally allows scroll for
+ * long forms. At the stacked breakpoints the clamp releases so the page
+ * scrolls naturally.
+ *
+ * @example
+ * <SplitHero
+ *   aside={<HeroPanel kicker="WELCOME BACK" headline="Sign in to your trail." />}
+ *   main={<SignInForm />}
+ * />
+ */
+declare const SplitHero: react.ForwardRefExoticComponent<SplitHeroProps & react.RefAttributes<HTMLElement>>;
+
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     /** When true, applies error-state border color to the textarea. */
     error?: boolean;
@@ -84,6 +403,13 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
+type KbdSize = "sm" | "md";
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /** Size variant. "sm" for inline hints (9.5px); "md" default (11px). */
+    size?: KbdSize;
+}
+declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
+
 type ChipTone = "default" | "match" | "miss" | "learning" | "tag";
 interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
     /** Color tone applying semantic background and text colors.
@@ -105,6 +431,18 @@ interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     name?: string;
     /** Override the auto-derived initials (1–2 uppercase letters). */
     initials?: string;
+    /**
+     * Derive the background color from this string instead of `name` — e.g. a
+     * stable id — so the color stays fixed even if the display name changes.
+     * Initials are still derived from `name`/`initials`.
+     */
+    seed?: string;
+    /**
+     * Override the built-in solid-color palette used for the name→color hash.
+     * Pass a custom set (e.g. WCAG-tuned colors) to control which colors the
+     * deterministic hash can land on. Ignored when `gradient` is set.
+     */
+    palette?: string[];
     /**
      * URL of an image to display. When provided, the image fills the circle and
      * initials/background are not rendered.
@@ -248,6 +586,55 @@ interface RollingNumberProps {
 }
 declare function RollingNumber({ value, format, prefix, suffix, variant, ariaLabel, className, style, }: RollingNumberProps): react_jsx_runtime.JSX.Element;
 
+type StatCardChangeDir = "up" | "down";
+interface StatCardProps {
+    /** Monospace uppercase label, e.g. "Total Applications" */
+    label: string;
+    /** Primary metric value as string or number, e.g. "24", "42%", "4.2d" */
+    value: string | number;
+    /** Change string displayed in trend badge, e.g. "+12%", "-5%" */
+    change?: string;
+    /** Trend direction — determines badge and sparkline color */
+    changeDir?: StatCardChangeDir;
+    /** Sparkline data points — renders chart when provided (min 2 points) */
+    data?: number[];
+    /** Additional className forwarded to the root div */
+    className?: string;
+    /** Additional inline styles for the root div */
+    style?: CSSProperties;
+}
+declare function StatCard({ label, value, change, changeDir, data, className, style, }: StatCardProps): react_jsx_runtime.JSX.Element;
+
+interface SparklineProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    fill?: boolean;
+    /** Accessible label. Defaults to "Trend chart". */
+    ariaLabel?: string;
+}
+declare function Sparkline({ data, width, height, color, fill, ariaLabel, }: SparklineProps): react_jsx_runtime.JSX.Element | null;
+
+interface MiniDonutProps {
+    value: number;
+    max?: number;
+    size?: number;
+    strokeWidth?: number;
+    color?: string;
+    /** Accessible label. Defaults to "{percentage}%". */
+    ariaLabel?: string;
+}
+declare function MiniDonut({ value, max, size, strokeWidth, color, ariaLabel, }: MiniDonutProps): react_jsx_runtime.JSX.Element;
+
+interface MiniBarProps {
+    data: number[];
+    labels?: string[];
+    height?: number;
+    barColor?: string;
+}
+declare function MiniBar({ data, labels, height, barColor }: MiniBarProps): 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;
@@ -310,6 +697,41 @@ interface StarRatingProps {
 }
 declare function StarRating({ value, onChange, size, label, readOnly, disabled, className, style, }: StarRatingProps): react_jsx_runtime.JSX.Element;
 
+type StatusPillStage = "wishlist" | "applied" | "screening" | "interviewing" | "offer" | "closed";
+interface StatusPillBaseProps {
+    /** Pipeline stage — drives bg/color tinting. */
+    stage: StatusPillStage;
+    /** Show trailing chevron (▾) — signals the pill is a dropdown trigger. */
+    withChevron?: boolean;
+    /** When true, renders as <button>. When false, renders as <span> and ignores
+     * onClick. Use false for table cells / read-only kanban cards where the pill
+     * is decorative.
+     * @default true
+     */
+    interactive?: boolean;
+    children: ReactNode;
+}
+type StatusPillProps = StatusPillBaseProps & ((Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof StatusPillBaseProps> & {
+    interactive?: true;
+}) | (Omit<HTMLAttributes<HTMLSpanElement>, keyof StatusPillBaseProps> & {
+    interactive: false;
+}));
+/**
+ * StatusPill - per-stage tinted chip for Cairn-style kanban + DataGrid status columns.
+ *
+ * Six locked stage variants (`wishlist`, `applied`, `screening`, `interviewing`,
+ * `offer`, `closed`) map to subtle tints — `wishlist`/`applied` are outlined,
+ * `screening`/`interviewing` use amber tints, `offer` uses green, `closed` is muted.
+ * Use the same atom in both kanban cards and DataGrid status columns so the
+ * visual contract stays single-sourced.
+ *
+ *   <StatusPill stage="screening" withChevron onClick={openMenu}>Screening</StatusPill>
+ *   <StatusPill stage="offer" interactive={false}>Offer</StatusPill>
+ *
+ * Visual styling lives in primitives.css under `.ds-atom-statuspill[.stage]`.
+ */
+declare const StatusPill: react.ForwardRefExoticComponent<StatusPillProps & react.RefAttributes<HTMLButtonElement | HTMLSpanElement>>;
+
 type StickyNoteRotation = "left" | "right" | "none";
 interface StickyNoteProps extends HTMLAttributes<HTMLDivElement> {
     /** Static rotation applied to the note surface for a handwritten feel.
@@ -338,38 +760,39 @@ interface StickyNoteProps extends HTMLAttributes<HTMLDivElement> {
 declare const StickyNote: react.ForwardRefExoticComponent<StickyNoteProps & react.RefAttributes<HTMLDivElement>>;
 
 type CardVariant = "glass" | "amber" | "dark" | "kanban";
+type CardPadding = "none" | "sm" | "md" | "lg" | "xl";
+type CardRadius = "sm" | "md" | "lg" | "xl";
+type CardTone = "amber" | "cream-2" | "flat";
+type CardHover = "elevate";
 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"
-     */
+    /** Top-level preset (legacy). One of glass / amber / dark / kanban. Adds
+     * its own bg + border treatment via `data-variant`. @default "glass" */
     variant?: CardVariant;
-    /** Arbitrary JSX content; Card has no compound structure - compose freely. */
+    /** Padding scale. Independent of variant. */
+    padding?: CardPadding;
+    /** Border-radius token. Independent of variant. */
+    radius?: CardRadius;
+    /** Surface tone (separate axis from variant). `amber` tints the bg, `flat`
+     * uses a dashed neutral border, `cream-2` switches to the cream-2 surface. */
+    tone?: CardTone;
+    /** Interactive elevation on hover. Adds shadow + cursor + border-color shift. */
+    hover?: CardHover;
+    /** Override the rendered element. @default "div" */
+    as?: ElementType;
     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
+ * Card — surface primitive. Visual is driven by a top-level `variant` plus
+ * independent data-attr axes (`padding`, `radius`, `tone`, `hover`).
  *
- * Children are arbitrary JSX - there is no compound API. Compose freely:
+ *   <Card>...</Card>                                   // glass, default radius/padding
+ *   <Card variant="amber">...</Card>                   // amber CTA card
+ *   <Card variant="kanban" hover="elevate">...</Card>  // hover-lift kanban surface
+ *   <Card padding="lg" radius="xl" tone="cream-2">     // declarative overrides
  *
- *   <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.
+ * The four axes layer on top of each other — variant sets the baseline, the
+ * data-attr axes refine padding/radius/tone/hover. See primitives.css for
+ * the resolved rules.
  */
 declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -538,57 +961,92 @@ interface ModalProps {
  * - 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;
+
+type ConfirmDialogTone = "danger" | "warn" | "success" | "neutral";
 interface ConfirmDialogProps {
     /** Controls visibility; returns null when false. */
     open: boolean;
-    /** Called when the user dismisses or cancels the dialog. */
+    /** Called when the user cancels (Escape key or Cancel button). */
     onClose: () => void;
-    /** Heading text for the confirmation dialog. */
+    /** Called when the user confirms (Enter key or Confirm button). */
+    onConfirm: () => void;
+    /** Visual tone — controls icon, icon bg, and confirm button style. */
+    tone?: ConfirmDialogTone;
+    /** Dialog heading. */
     title: ReactNode;
-    /** Supplemental explanation shown below the title; string gets `aria-describedby`, ReactNode renders as children. */
-    description?: ReactNode;
-    /** Label for the confirm action button.
+    /** Optional body text below the heading. */
+    body?: ReactNode;
+    /** Label for the confirm button.
      * @default "Confirm"
      */
     confirmLabel?: string;
-    /** Label for the cancel action button.
+    /** Label for the cancel 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. */
+}
+declare function ConfirmDialog({ open, onClose, onConfirm, tone, title, body, confirmLabel, cancelLabel, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element | null;
+interface TypeToConfirmProps {
+    /** Controls visibility; returns null when false. */
+    open: boolean;
+    /** Called when the user cancels (Escape key or Cancel button). */
+    onClose: () => void;
+    /** Called when the user confirms (Enter key when ok, or Confirm button). */
     onConfirm: () => void;
+    /** Dialog heading. */
+    title: ReactNode;
+    /** Optional body text below the heading. */
+    body?: ReactNode;
+    /** Word the user must type exactly (case-sensitive, no trim) to enable confirm.
+     * @default "DELETE"
+     */
+    guardWord?: string;
+    /** Label for the confirm button.
+     * @default "Delete forever"
+     */
+    confirmLabel?: string;
+    /** Label for the cancel button.
+     * @default "Cancel"
+     */
+    cancelLabel?: string;
 }
-/**
- * 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;
+declare function TypeToConfirm({ open, onClose, onConfirm, title, body, guardWord, confirmLabel, cancelLabel, }: TypeToConfirmProps): react_jsx_runtime.JSX.Element | null;
+
+interface CommandPaletteItem {
+    /** Stable identity used as the React key. */
+    id: string;
+    /** Display label; used for case-insensitive substring filtering. */
+    label: string;
+    /** Group bucket name; items with the same group cluster under a header. */
+    group: string;
+    /** Optional ReactNode icon (16–18px recommended). */
+    icon?: ReactNode;
+    /** Optional keyboard shortcut hint, rendered as a Kbd chip. */
+    shortcut?: string;
+    /** Fires when the item is selected (Enter on active row, or click). */
+    onSelect: () => void;
+}
+interface CommandPaletteProps {
+    /** Controls visibility; component returns null when false. */
+    open: boolean;
+    /** Called when the user dismisses the palette (Escape, backdrop click, item select). */
+    onClose: () => void;
+    /** Flat list of items; the component derives groups internally. */
+    items: CommandPaletteItem[];
+    /** Search input placeholder.
+     * @default "Type a command or search…"
+     */
+    placeholder?: string;
+    /** Optional override text shown when filter has zero matches. Defaults to `No results for "<query>"`. */
+    emptyText?: string;
+    /** Optional className appended to the panel. */
+    className?: string;
+    /** Optional inline style applied to the panel. */
+    style?: CSSProperties;
+}
+declare function CommandPalette({ open, onClose, items, placeholder, emptyText, className, style, }: CommandPaletteProps): react_jsx_runtime.JSX.Element | null;
 
 type SheetSide = "right" | "left";
 interface SheetProps {
@@ -697,6 +1155,13 @@ interface BottomSheetProps {
      * Defaults to detecting `html.dark` (Canvas dark mode toggle).
      */
     dark?: boolean;
+    /**
+     * Track the mobile soft keyboard via `window.visualViewport` and lift the
+     * footer above it (padding-bottom = visible-viewport delta). Defaults to
+     * true. Set false to opt out; it is a no-op anyway on platforms without a
+     * `visualViewport` (e.g. desktop) or when there is no footer.
+     */
+    trackKeyboard?: boolean;
     className?: string;
     style?: CSSProperties;
 }
@@ -730,7 +1195,38 @@ interface BottomSheetProps {
  * 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;
+declare function BottomSheet({ open, onClose, title, footer, children, height, closeOnBackdropClick, dark, trackKeyboard, className, style, }: BottomSheetProps): react_jsx_runtime.JSX.Element | null;
+
+interface ActionSheetItem {
+    label: string;
+    /** `"destructive"` renders the label in `--red`. */
+    variant?: "default" | "destructive";
+    onSelect: () => void;
+}
+interface ActionSheetProps {
+    open: boolean;
+    onClose: () => void;
+    items: ActionSheetItem[];
+    /** Dismiss-without-picking label. Default "Close". Backdrop tap + Esc also dismiss. */
+    cancelLabel?: string;
+}
+/**
+ * ActionSheet — an iOS-style bottom-anchored action list: a rounded block of
+ * tappable items plus a separate Cancel block. Backdrop tap, the Cancel button,
+ * and Esc all dismiss; body scroll locks while open. Pair with `useLongPress`
+ * for the touch "long-press → actions" pattern.
+ *
+ * @example
+ * <ActionSheet
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   items={[
+ *     { label: "Edit", onSelect: edit },
+ *     { label: "Delete", variant: "destructive", onSelect: remove },
+ *   ]}
+ * />
+ */
+declare function ActionSheet({ open, onClose, items, cancelLabel }: ActionSheetProps): react.ReactPortal | null;
 
 interface LightboxItem {
     src: string;
@@ -937,6 +1433,12 @@ interface AlertBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     children?: ReactNode;
     /** Whether to show the dismiss X button. Defaults to `!!onDismiss`. Pass `false` to suppress it. */
     dismissible?: boolean;
+    /** Whether the title renders in semibold (600) or regular (400) weight.
+     * Default `true` keeps the original bold weight; `false` is for surfaces
+     * where the icon + tone already signal severity and bold feels heavy.
+     * @default true
+     */
+    boldTitle?: boolean;
 }
 /**
  * AlertBanner - inline-flow controlled tone banner (D-410, D-411).
@@ -1059,6 +1561,87 @@ interface ToastProviderProps {
  */
 declare function ToastProvider({ children }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Snackbar — bottom-center, solid-fill action surface. Companion to Toast
+ * but with a different intent: snackbars confirm a destructive or
+ * reversible action and offer an inline UNDO / RETRY. Toast is for
+ * passive notifications; Snackbar pairs with a callback. Single-at-a-time
+ * (replaces any active snackbar with FIFO ordering) — never stacks. Solid
+ * ink background so the message stays readable over any page chrome
+ * (Toast's translucent fill becomes hard to read on top-heavy apps).
+ */
+type SnackbarTone = "neutral" | "success" | "error";
+interface SnackbarAction {
+    /** Visible label, e.g. "UNDO", "RETRY". Rendered mono caps amber. */
+    label: string;
+    /** Fires when the action is activated. The snackbar auto-dismisses after. */
+    onClick: () => void;
+}
+interface SnackbarOptions {
+    /** Auto-dismiss after `duration` ms. Default 5000 (longer than Toast — the
+     * user needs time to read + click the action). Pass `Infinity` to disable. */
+    duration?: number;
+    /** Optional inline action (UNDO / RETRY / etc.). Rendered to the right of
+     * the message. Clicking it fires `onClick` then dismisses the snackbar. */
+    action?: SnackbarAction;
+    /** Visual tone. `"neutral"` (default) for confirmations; `"success"` /
+     * `"error"` add a left-border accent without changing the ink fill. */
+    tone?: SnackbarTone;
+    /** Show the explicit dismiss "✕" affordance.
+     *
+     * Default behavior:
+     *   - with `action` → false (the action button doubles as the dismiss path,
+     *     plus the timeout will close it; an extra "✕" is redundant chrome)
+     *   - without `action` → true (otherwise the snackbar would only have the
+     *     timeout as an escape hatch, which is too implicit)
+     *
+     * Pass an explicit boolean to override.
+     */
+    dismissible?: boolean;
+    /** Render a thin countdown progress bar along the bottom edge that depletes
+     * (width 100% → 0%) linearly over `duration` ms — a visual undo timer
+     * (matches the SoftConfirmToast pattern). Only renders when `true` AND
+     * `duration` is finite. Respects `prefers-reduced-motion: reduce` (the bar
+     * is shown static, no animation). Default `false`. */
+    progress?: boolean;
+}
+interface SnackbarApi {
+    /** Show a snackbar. Replaces any active snackbar (single-at-a-time). */
+    show: (message: ReactNode, opts?: SnackbarOptions) => number;
+    dismiss: (id: number) => void;
+}
+/**
+ * useSnackbar — imperative bottom-center action surface hook.
+ *
+ * Must be called inside a `<SnackbarProvider>`. Throws otherwise.
+ *
+ *   const snack = useSnackbar();
+ *   snack.show("Application deleted.", {
+ *     action: { label: "UNDO", onClick: () => restore(row) },
+ *   });
+ *   snack.show("Saved.", { tone: "success" });
+ *   const id = snack.show("...", { duration: Infinity });
+ *   snack.dismiss(id);
+ */
+declare function useSnackbar(): SnackbarApi;
+interface SnackbarProviderProps {
+    children: ReactNode;
+}
+/**
+ * SnackbarProvider — context + DSPortal-mounted region (bottom-center).
+ *
+ *   <SnackbarProvider>
+ *     <App />
+ *   </SnackbarProvider>
+ *
+ * Single-snackbar-at-a-time: calling show() while another is visible
+ * dismisses the old one before fading in the new (FIFO swap, not a queue).
+ * Mounts a fixed bottom-center region (z-1100) that renders only when a
+ * snackbar is active. The region pointer-events:none lets clicks pass to
+ * the page; the snackbar itself sets pointer-events:auto.
+ */
+declare function SnackbarProvider({ children }: SnackbarProviderProps): react_jsx_runtime.JSX.Element;
+
 interface CopyToClipboardProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onCopy" | "onError"> {
     /** The string value written to the clipboard on click. */
     value: string;
@@ -1084,6 +1667,16 @@ interface CopyToClipboardProps extends Omit<HTMLAttributes<HTMLButtonElement>, "
  */
 declare const CopyToClipboard: react.ForwardRefExoticComponent<CopyToClipboardProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface RelativeTimeProps extends HTMLAttributes<HTMLTimeElement> {
+    /** Date to format. Accepts Date object, ISO string, or Unix ms timestamp. */
+    date: Date | string | number;
+    /** Optional prefix rendered in --ink-4 color before the relative string (e.g. "Applied"). */
+    prefix?: string;
+    /** Recompute interval in ms. Pass 0 to disable live updates. @default 60000 */
+    updateInterval?: number;
+}
+declare const RelativeTime: react.ForwardRefExoticComponent<RelativeTimeProps & react.RefAttributes<HTMLTimeElement>>;
+
 interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     /** Controlled selected date; pass `null` for no selection. */
     value: Date | null;
@@ -1117,6 +1710,15 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange
     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;
+    /** Render mode. `"inline"` (default) shows the calendar grid in flow. `"popover"`
+     * renders a trigger pill that opens the grid in an anchored DS Popover.
+     * @default "inline"
+     */
+    variant?: "inline" | "popover";
+    /** Placeholder text shown on the trigger pill when `value` is null. Only used when `variant="popover"`. */
+    placeholder?: string;
+    /** Override the date formatter for the trigger pill label. Only used when `variant="popover"`. */
+    formatLabel?: (d: Date, showTime: boolean) => string;
 }
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -1191,6 +1793,42 @@ interface MultiSelectProps {
      * @default "Select…"
      */
     placeholder?: string;
+    /** When true, the trigger renders as a single-line count summary instead of
+     * the default chips-in-trigger layout. Useful in filter bars where the
+     * trigger height needs to stay stable regardless of selection count.
+     *
+     * Trigger copy:
+     *   - 0 selected → `placeholder` (e.g. "Status")
+     *   - all selected (value.length === options.length) → `allSelectedLabel`
+     *   - 1+ selected (partial) → `${placeholder} (${count})`
+     *
+     * @default false
+     */
+    compact?: boolean;
+    /** Label rendered in the compact trigger when every option is selected.
+     * Has no effect unless `compact` is true.
+     * @default "All"
+     */
+    allSelectedLabel?: string;
+    /** Visual tone of the trigger surface.
+     * - `"default"` — cream surface with ink text + a thin rule border.
+     *   The standard look for filter-bar triggers.
+     * - `"solid"`  — ink fill with cream text, no border. A confident
+     *   "filter applied" affordance; pairs well with `compact` for a
+     *   count-summary chip.
+     *
+     * @default "default"
+     */
+    tone?: "default" | "solid";
+    /** Trigger height + padding scale.
+     * - `"md"` (default) — 36px height, standard form-input rhythm.
+     * - `"sm"`           — 28px height, smaller padding + 12px text.
+     *   Use when the trigger sits in a dense filter row where the chips
+     *   should read as chips, not full-size form controls.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md";
     /** When true, disables the trigger and prevents interaction.
      * @default false
      */
@@ -1228,6 +1866,22 @@ interface SelectProps {
      * @default true
      */
     searchable?: boolean;
+    /** Visual tone of the trigger surface.
+     * - `"default"` — cream surface with ink text + a thin rule border.
+     * - `"solid"`  — ink fill with cream text, no visible border. Pairs with
+     *   MultiSelect's matching tone for filter-bar consistency.
+     *
+     * @default "default"
+     */
+    tone?: "default" | "solid";
+    /** Trigger height + padding scale.
+     * - `"md"` (default) — 36px height, standard form-input rhythm.
+     * - `"sm"`           — 28px height, smaller padding + 12px text. Use in
+     *   dense filter rows alongside MultiSelect at the same size.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md";
     /** When true, disables the trigger button and prevents interaction.
      * @default false
      */
@@ -1342,10 +1996,111 @@ interface AutocompleteProps<T> {
  */
 declare function Autocomplete<T>({ value, onValueChange, items, recentItems, onSelect, onCreate, getItemLabel, getItemKey, renderItem, placeholder, className, style, }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
 
+interface FileInputProps {
+    /** Called when the user selects or drops file(s). */
+    onSelect: (files: File[]) => void;
+    /** MIME type or file extension allowlist (passed to hidden input `accept`).
+     * @example "application/pdf" | ".pdf,.docx,.md"
+     */
+    accept?: string;
+    /** Whether to allow multiple files.
+     * @default false
+     */
+    multiple?: boolean;
+    /** Maximum file size in bytes. `onError` is called if exceeded.
+     * @default undefined (no limit)
+     */
+    maxSizeBytes?: number;
+    /**
+     * Called when a file is rejected due to type or size constraint.
+     * Receives a human-readable reason string.
+     */
+    onError?: (reason: string) => void;
+    /** When true, disables interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Visual variant.
+     * - "dropzone" — dashed bordered drop area; accepts drag-and-drop.
+     * - "button"   — renders a Button-like trigger with no drop area.
+     * @default "dropzone"
+     */
+    variant?: "dropzone" | "button";
+    /** Accessible label for the trigger.
+     * @default "Upload file"
+     */
+    ariaLabel?: string;
+    /**
+     * Content rendered inside the dropzone area (dropzone variant only).
+     * When not provided, a default amber icon + "Drop a file here, or click
+     * to upload" + meta line is rendered (matching cairn UploadDropZone visual).
+     */
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function FileInput({ onSelect, accept, multiple, maxSizeBytes, onError, disabled, variant, ariaLabel, children, className, style, }: FileInputProps): react_jsx_runtime.JSX.Element;
+
+interface ColorPickerProps {
+    /** Controlled hex value, e.g. '#f59e0b'. Optional — uncontrolled if absent. */
+    value?: string;
+    /** Called with new hex string when color changes via any sub-control. */
+    onChange?: (hex: string) => void;
+    /** Initial hex when uncontrolled. @default '#f59e0b' */
+    defaultValue?: string;
+    /** Custom preset swatches. @default the 10-color amber-led palette */
+    presets?: string[];
+    /** Additional className applied to the root wrapper. */
+    className?: string;
+    /** Inline styles applied to the root wrapper. */
+    style?: CSSProperties;
+}
+declare function ColorPicker({ value, onChange, defaultValue, presets, className, style, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface ColorInputProps {
+    /** Controlled hex value, e.g. '#f59e0b'. Optional — uncontrolled if absent. */
+    value?: string;
+    /** Called with new hex string when a valid 6-digit hex is typed. */
+    onChange?: (hex: string) => void;
+    /** Initial hex when uncontrolled. @default '#f59e0b' */
+    defaultValue?: string;
+    /** Optional label rendered above the input row. */
+    label?: string;
+    /** Additional className applied to the root wrapper. */
+    className?: string;
+    /** Inline styles applied to the root wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * Compact inline color field — swatch + hex text input.
+ * No popover, no full picker — designed to drop into form rows alongside
+ * other inline form fields.
+ */
+declare function ColorInput({ value, onChange, defaultValue, label, className, style, }: ColorInputProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Optional per-option active colors. When set, the option uses these
+ * foreground/background colors *while active* instead of the default amber
+ * pill. Prefer DS CSS-var tokens (e.g. `var(--green)`). Inactive options are
+ * unaffected and render with default styling.
+ */
+interface SegmentedTone {
+    /** Text color of the option while active. */
+    fg: string;
+    /** Background of the option while active. */
+    activeBg: string;
+}
 interface SegmentedOption<T extends string = string> {
     value: T;
     label: string;
     disabled?: boolean;
+    /**
+     * Optional per-option active tone. When provided, the *active* segment
+     * renders with `tone.fg` / `tone.activeBg` instead of the default amber.
+     * Omit for the standard styling (fully backward compatible).
+     */
+    tone?: SegmentedTone;
 }
 interface SegmentedControlProps<T extends string = string> {
     options: SegmentedOption<T>[];
@@ -1751,6 +2506,83 @@ declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.Re
     Agenda: typeof AgendaList;
 };
 
+interface PaginationProps {
+    /** Total number of pages. */
+    totalPages: number;
+    /** Currently active page (1-based). */
+    currentPage: number;
+    /** Called when user navigates to a different page. */
+    onPageChange: (page: number) => void;
+    /** Display variant. "full" shows numbered page buttons; "compact" shows "N / M" only.
+     * @default "full"
+     */
+    variant?: "full" | "compact";
+    /** Accessible label for the nav landmark.
+     * @default "Pagination"
+     */
+    ariaLabel?: string;
+    /** Additional className applied to the root `<nav>` element. */
+    className?: string;
+    /** Inline styles applied to the root `<nav>` element. */
+    style?: CSSProperties;
+}
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * # Usage Audit - DataGrid (DS-62)
+ *
+ * Composed component built on Table.* + three table hooks. Provides a
+ * higher-level columns/rows API with status badge rendering, priority dots,
+ * bulk-action bar, and footer pagination.
+ *
+ * <DataGrid
+ *   columns={cols}
+ *   rows={rows}
+ *   page={page}
+ *   totalPages={n}
+ *   onPageChange={setPage}
+ *   onSelectionChange={(ids) => setSelected(ids)}
+ * />
+ *
+ * Important: <Pagination> is rendered as a SIBLING of the inner Table.Root,
+ * NOT inside it. <nav> inside <table> is invalid HTML.
+ *
+ * Status mapping:
+ *   applied      → Badge tone="upcoming" label="Applied"
+ *   interviewing → Badge tone="done"     label="Interview"
+ *   offer        → Badge tone="passed"   label="Offer"
+ *   rejected     → Badge tone="pending"  label="Rejected"
+ *
+ * Priority mapping:
+ *   high   → red dot   (var(--red-vivid))
+ *   medium → amber dot (var(--amber-vivid))
+ *   low    → green dot (var(--green-vivid))
+ */
+
+interface DataGridColumn {
+    key: string;
+    label: string;
+    width: number;
+    sortable?: boolean;
+    align?: "left" | "right";
+}
+type DataGridRow = Record<string, unknown> & {
+    id: string | number;
+};
+interface DataGridProps extends react__default.HTMLAttributes<HTMLDivElement> {
+    columns: DataGridColumn[];
+    rows: DataGridRow[];
+    /** Current page (1-based). Optional — defaults to 1 when pagination not used. */
+    page?: number;
+    /** Total page count. Optional — defaults to 1. */
+    totalPages?: number;
+    /** Page-change callback wired to <Pagination>. */
+    onPageChange?: (page: number) => void;
+    /** Fires whenever the selected row IDs change. */
+    onSelectionChange?: (ids: Array<string | number>) => void;
+}
+declare const DataGrid: react__default.ForwardRefExoticComponent<DataGridProps & react__default.RefAttributes<HTMLDivElement>>;
+
 interface RichTextProps {
     /** Controlled HTML string (default) or TipTap JSON Doc object when `outputFormat="json"`. */
     value: string | object;
@@ -1776,6 +2608,17 @@ interface RichTextProps {
     ariaLabel?: string;
     /** Inline styles applied to the outer root wrapper. */
     style?: CSSProperties;
+    /** Borderless/inline mode: strips the editor chrome (border, background, padding,
+     * min-height) so the editor sits inline inside a card or click-to-edit surface.
+     * Purely additive - default keeps the bordered "card" appearance.
+     * @default false
+     */
+    inline?: boolean;
+    /** Show a keyboard-shortcut hint strip (⌘B ⌘I ⌘U ⌘⇧H ⌘K ⌘↵ Esc) that is revealed
+     * while the editor has focus. Suppressed in `readOnly` mode.
+     * @default false
+     */
+    hints?: boolean;
 }
 declare const RichText: react.ForwardRefExoticComponent<RichTextProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -2088,4 +2931,4 @@ declare function SortableItem({ id, children, reducedMotion }: SortableItemProps
 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 };
+export { Accordion, type AccordionItemProps, type AccordionProps, ActionSheet, type ActionSheetItem, type ActionSheetProps, 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, ColorInput, type ColorInputProps, ColorPicker, type ColorPickerProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, ContextMenu, type ContextMenuItem, type ContextMenuProps, CopyToClipboard, type CopyToClipboardProps, DSPortal, type DSPortalProps, DataGrid, type DataGridColumn, type DataGridProps, type DataGridRow, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Divider, type DividerProps, DotGrid, type DotGridProps, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, type EyebrowSize, FieldError, type FieldErrorProps, FileInput, type FileInputProps, Footer, type FooterColumn, type FooterProps, type FooterVariant, FormErrorSummary, type FormErrorSummaryProps, Heading, type HeadingLevel, type HeadingProps, HoverCard, type HoverCardPlacement, type HoverCardProps, InfiniteList, type InfiniteListProps, InlineAddRow, type InlineAddRowProps, InlineConfirm, type InlineConfirmProps, type InlineConfirmTriggerProps, InlineEdit, InlineEditField, type InlineEditFieldProps, type InlineEditProps, Kbd, type KbdProps, type KbdSize, Lightbox, type LightboxItem, type LightboxProps, Link, type LinkProps, type LinkVariant, MiniBar, type MiniBarProps, MiniDonut, type MiniDonutProps, Modal, type ModalProps, type ModalRole, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberStepper, type NumberStepperProps, OAuthButton, type OAuthButtonProps, type OAuthProvider, Pagination, type PaginationProps, PasswordStrength, type PasswordStrengthProps, Popover, type PopoverPlacement, type PopoverProps, type PopoverVariant, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeSlider, type RangeSliderProps, RelativeTime, type RelativeTimeProps, 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, type SnackbarAction, type SnackbarOptions, SnackbarProvider, type SnackbarProviderProps, type SnackbarTone, Sortable, SortableDndContext, type SortableDndContextProps, SortableItem, type SortableItemData, type SortableItemProps, type SortableProps, Sparkline, type SparklineProps, SplitButton, type SplitButtonAction, type SplitButtonProps, SplitHero, type SplitHeroProps, StarRating, type StarRatingProps, type StarRatingSize, StatCard, type StatCardChangeDir, type StatCardProps, StatusPill, type StatusPillProps, type StatusPillStage, StickyNote, type StickyNoteProps, type StickyNoteRotation, type TabItem, Table, type TableHeaderCellProps, type TableRootProps, Tabs, type TabsProps, Text, type TextElement, TextInput, type TextInputProps, type TextProps, type TextVariant, Textarea, type TextareaProps, Timeline, type TimelineEvent, type TimelineProps, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TypeToConfirm, type TypeToConfirmProps, Wizard, type WizardProps, type WizardStep, deriveGradient, deriveInitials, useSnackbar, useToast };