@ship-it-ui/ui 0.0.3 → 0.0.5

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { ClassValue } from 'clsx';
 export { ClassValue } from 'clsx';
 import * as react from 'react';
-import { useEffect, KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, Ref, LabelHTMLAttributes, FC, SVGAttributes } from 'react';
+import { useEffect, KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, Ref, LabelHTMLAttributes, FC, SVGAttributes, MouseEventHandler } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
@@ -154,6 +154,7 @@ declare function useTheme(): {
 declare const buttonStyles: (props?: ({
     variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "success" | "link" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonStyles> {
@@ -174,6 +175,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
 declare const iconButtonStyles: (props?: ({
     variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof iconButtonStyles> {
     /** The glyph or icon node to render. Pure decoration — set `aria-label` for screen readers. */
@@ -248,6 +250,11 @@ declare const FAB: react.ForwardRefExoticComponent<FABProps & react.RefAttribute
 interface CheckboxProps extends Omit<RadixCheckbox.CheckboxProps, 'asChild' | 'children'> {
     /** Optional inline label rendered to the right of the box. */
     label?: ReactNode;
+    /**
+     * `'comfortable'` (default) renders the desktop checkbox. `'touch'` bumps the
+     * box to 22×22 inside a 44pt-min row so the whole label is tappable.
+     */
+    density?: 'comfortable' | 'touch';
 }
 /**
  * Tri-state checkbox. Set `checked="indeterminate"` for the dash-mark state used
@@ -287,6 +294,7 @@ declare function Field({ label, hint, error, required, className, children, ...p
 declare const inputWrapperStyles: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     tone?: "default" | "err" | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputWrapperStyles> {
     /** Element rendered to the left of the input (an `IconGlyph`, `@`, etc.). */
@@ -305,6 +313,12 @@ interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
     shortcut?: string;
     /** Pixel width or any CSS length. Defaults to `360px`. */
     width?: number | string;
+    /**
+     * `'comfortable'` (default) renders the desktop 36px-tall pill. `'touch'`
+     * bumps to 44pt for thumb tapping and removes the kbd shortcut by default
+     * (consumers can still pass `shortcut` explicitly).
+     */
+    density?: 'comfortable' | 'touch';
 }
 /**
  * The hero search field — taller than a regular Input, with a leading magnifying-glass
@@ -432,6 +446,11 @@ interface SwitchProps extends Omit<RadixSwitch.SwitchProps, 'asChild' | 'childre
     label?: ReactNode;
     /** Visual size. Default `md`. */
     size?: 'sm' | 'md';
+    /**
+     * `'comfortable'` (default) renders the desktop switch. `'touch'` swaps to the
+     * mobile track/thumb dimensions (50×30) for thumb-friendly toggling.
+     */
+    density?: 'comfortable' | 'touch';
 }
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -494,6 +513,7 @@ declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttri
 declare const cardStyles: (props?: ({
     variant?: "ghost" | "default" | "elevated" | null | undefined;
     interactive?: boolean | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof cardStyles> {
     /** Render a header row with this title (and optional `actions`). */
@@ -577,6 +597,11 @@ interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
      * Mirrors the `Tag` API — pass `onRemove` and the X is rendered automatically.
      */
     onRemove?: () => void;
+    /**
+     * `'comfortable'` (default) renders the desktop chip at 26px tall.
+     * `'touch'` swaps to a roomier 32px chip with larger text for mobile filter strips.
+     */
+    density?: 'comfortable' | 'touch';
     children: ReactNode;
 }
 /**
@@ -593,6 +618,37 @@ type KbdProps = HTMLAttributes<HTMLElement>;
  */
 declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
 
+/**
+ * ScrollArea — token-styled scrollbar primitive built on
+ * `@radix-ui/react-scroll-area`. Wraps a viewport with custom scrollbars that
+ * match the design tokens (`--color-text-muted` thumb on `--color-panel-2`
+ * track) and behave consistently across platforms.
+ *
+ * Defaults to `type="hover"` so scrollbars fade in only when the pointer is
+ * over the area, matching the system feel without the OS-default chrome.
+ */
+type ScrollAreaType = 'auto' | 'always' | 'scroll' | 'hover';
+interface ScrollAreaProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onScroll' | 'dir'> {
+    /** Scrollbar visibility behavior. Default `'hover'`. */
+    type?: ScrollAreaType;
+    /** Which scrollbars to render. Default `'vertical'`. */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /** Time in ms before scrollbar hides after the last interaction (auto/scroll/hover). */
+    scrollHideDelay?: number;
+    /** Class applied to the inner viewport rather than the outer root. */
+    viewportClassName?: string;
+    /**
+     * Ref to the inner viewport (the scrollable element). Useful when a consumer
+     * wants to drive scroll position imperatively without losing the outer-root
+     * ref forwarded as `ref`.
+     */
+    viewportRef?: Ref<HTMLDivElement>;
+    /** Document direction for RTL handling. */
+    dir?: 'ltr' | 'rtl';
+    children?: ReactNode;
+}
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>>;
+
 declare const skeletonStyles: (props?: ({
     shape?: "circle" | "line" | "block" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -712,19 +768,39 @@ interface DialogProps extends RadixDialog.DialogProps {
 }
 declare function Dialog({ title, description, footer, width, children, ...rootProps }: DialogProps): react_jsx_runtime.JSX.Element;
 
-type DrawerSide = 'left' | 'right';
+type DrawerSide = 'left' | 'right' | 'bottom';
 interface DrawerProps extends RadixDialog.DialogProps {
     /** Side the drawer slides in from. */
     side?: DrawerSide;
     /** Title rendered in the drawer header (with built-in close button). */
     title?: ReactNode;
-    /** Width override. Defaults to 420. */
+    /**
+     * Width override. Defaults to 420 for left/right sides; ignored for `bottom`
+     * (a bottom sheet always spans the full viewport width).
+     */
     width?: number | string;
+    /**
+     * Height override for the `bottom` side. Pass a number (px) or any CSS length
+     * (e.g. `'85vh'`). Defaults to `'85vh'` — leaves a 15vh peek of the underlying
+     * surface, matching iOS bottom-sheet conventions.
+     */
+    height?: number | string;
+    /**
+     * Show the drag-handle pill at the top of the sheet. Defaults to `true` for
+     * `side="bottom"`, ignored for left/right. The handle is visual only — full
+     * gesture-driven dismissal is left to consumer code (Radix Dialog already
+     * handles ESC, overlay click, and focus trap).
+     */
+    handle?: boolean;
     children?: ReactNode;
 }
 /**
  * Side-panel overlay. Same focus-trap + ESC + backdrop semantics as Dialog,
  * just slid in from the side.
+ *
+ * `side="bottom"` produces a mobile bottom sheet: full-width, rounded top
+ * corners (`--radius-m-sheet`), slide-up animation, and an optional drag
+ * handle (`handle`, defaults to `true`).
  */
 declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -1245,6 +1321,136 @@ interface FileChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>
 }
 declare const FileChip: react.ForwardRefExoticComponent<FileChipProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * FilterPanel — multi-facet checkbox filter panel. Pass a `facets` array
+ * describing each facet (label, options, optional collapsibility); the panel
+ * renders a header with a reset action, then each facet as a labeled
+ * checkbox group. Selections are emitted as
+ * `Record<facetId, readonly string[]>` and supported in both controlled and
+ * uncontrolled modes — mirroring `Slider` and `NavBar`.
+ *
+ * Reset both invokes the optional `onReset` callback and emits an empty
+ * selection through `onValueChange`, so consumers can drive either signal.
+ */
+interface FilterFacetOption {
+    value: string;
+    label: ReactNode;
+}
+interface FilterFacet {
+    id: string;
+    label: ReactNode;
+    options: ReadonlyArray<FilterFacetOption>;
+    /** Whether the group can collapse. Default `true`. */
+    collapsible?: boolean;
+    /** Initial open state for collapsible groups. Default `true`. */
+    defaultOpen?: boolean;
+}
+type FilterPanelValue = Record<string, ReadonlyArray<string>>;
+interface FilterPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onReset' | 'defaultValue' | 'title'> {
+    facets: ReadonlyArray<FilterFacet>;
+    /** Controlled selection map keyed by facet id. */
+    value?: FilterPanelValue;
+    /** Uncontrolled initial selection map. Default `{}`. */
+    defaultValue?: FilterPanelValue;
+    /** Fires whenever the selection changes — including reset. */
+    onValueChange?: (next: FilterPanelValue) => void;
+    /** Fired when the reset action is invoked, alongside `onValueChange({})`. */
+    onReset?: () => void;
+    /**
+     * Optional per-option counts shown in a trailing pill. Shape:
+     * `{ [facetId]: { [optionValue]: number } }`.
+     */
+    counts?: Record<string, Record<string, number>>;
+    /** Override the header title. Default `'Filter'`. */
+    title?: ReactNode;
+    /** Override the reset button label. Default `'Reset'`. */
+    resetLabel?: ReactNode;
+}
+declare const FilterPanel: react.ForwardRefExoticComponent<FilterPanelProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * RadialProgress — circular SVG progress ring. Renders the percent label in the
+ * center by default; pass `children` to override (e.g., a glyph or a count).
+ *
+ * Tones: accent (default) and ok (auto-applied when value === max).
+ */
+type RadialTone = 'accent' | 'ok' | 'warn' | 'err';
+interface RadialProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current value, 0..max. */
+    value: number;
+    /** Maximum value. Default 100. */
+    max?: number;
+    /** Pixel size of the SVG. Default 64. */
+    size?: number;
+    /** Stroke width. Default 4. */
+    thickness?: number;
+    /** Color tone. Auto-flips to `ok` on completion unless explicitly set. */
+    tone?: RadialTone;
+    /** Replaces the centered percent label. */
+    children?: ReactNode;
+    /** Accessible label. Falls back to `${pct}%`. */
+    'aria-label'?: string;
+}
+declare const RadialProgress: react.ForwardRefExoticComponent<RadialProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * HealthScore — `RadialProgress` + delta indicator + optional breakdown
+ * tooltip. The shape generalizes recurring product surfaces like service
+ * health, deployment confidence, and graph health.
+ *
+ * Delta sign drives the arrow direction and tone (positive = ok, negative =
+ * err) unless an explicit `tone` is set. When a `breakdown` is supplied, the
+ * score wraps in a `HoverCard` that reveals the per-bucket contributions.
+ */
+interface HealthScoreBreakdownEntry {
+    label: ReactNode;
+    value: number;
+    /** Tone for the value text. Defaults to inheriting the parent score tone. */
+    tone?: RadialTone;
+}
+interface HealthScoreProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Current value, 0..max. */
+    value: number;
+    /** Maximum value. Default 100. */
+    max?: number;
+    /**
+     * Signed change vs. the previous period. Positive draws an up-arrow + ok
+     * tone, negative draws a down-arrow + err tone. Pass `0` to render a flat
+     * indicator.
+     */
+    delta?: number;
+    /** Label rendered under the score. */
+    label?: ReactNode;
+    /** Optional per-bucket contributions revealed in a HoverCard. */
+    breakdown?: ReadonlyArray<HealthScoreBreakdownEntry>;
+    /** Pixel size for the RadialProgress. Default 72. */
+    size?: number;
+    /** Color tone for the ring. Auto-derived when omitted. */
+    tone?: RadialTone;
+    /** Accessible label for the score. Defaults to `${pct}% health`. */
+    'aria-label'?: string;
+}
+declare const HealthScore: react.ForwardRefExoticComponent<HealthScoreProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * LargeTitle — iOS-style oversized headline block. Renders an optional eyebrow
+ * (small uppercase mono label) above a 30px headline, with an optional trailing
+ * slot (typically an avatar or icon button) on the right.
+ *
+ * Place at the top of a scrolling screen. Pair with `<Topbar density="touch" />`
+ * for the scroll-revealing pattern: hide the Topbar title until the LargeTitle
+ * scrolls under the bar.
+ */
+interface LargeTitleProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Headline text. */
+    title: ReactNode;
+    /** Optional eyebrow label rendered above the title. Small, uppercase, mono. */
+    eyebrow?: ReactNode;
+    /** Optional right-aligned slot (avatar, settings button, etc.). */
+    trailing?: ReactNode;
+}
+declare const LargeTitle: react.ForwardRefExoticComponent<LargeTitleProps & react.RefAttributes<HTMLElement>>;
+
 /**
  * Menubar — desktop-style horizontal menu strip (File, Edit, View, …) built on
  * Radix Menubar. Owns ARIA + keyboard semantics; ShipIt owns styling.
@@ -1321,6 +1527,37 @@ interface NavBarProps extends Omit<HTMLAttributes<HTMLElement>, 'defaultValue' |
 }
 declare const NavBar: react.ForwardRefExoticComponent<NavBarProps & react.RefAttributes<HTMLElement>>;
 
+/**
+ * OnboardingChecklist — list of getting-started tasks driven by remote
+ * progress. Each item has a `status` (`pending` / `in-progress` / `done`)
+ * that decides its dot color and label tone, plus an optional `action` slot
+ * (typically a `Button`) rendered on the right.
+ *
+ * The header shows aggregate progress as a `Progress` bar; pass
+ * `progressLabel` to override the default `"{n} of {m} complete"` text.
+ */
+type OnboardingItemStatus = 'pending' | 'in-progress' | 'done';
+interface OnboardingItem {
+    id: string;
+    label: ReactNode;
+    description?: ReactNode;
+    status: OnboardingItemStatus;
+    /** Trailing call-to-action (typically a `Button`). */
+    action?: ReactNode;
+}
+interface OnboardingChecklistProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    items: ReadonlyArray<OnboardingItem>;
+    /** Fires when an item row is clicked. The whole row becomes clickable when supplied. */
+    onItemClick?: (id: string) => void;
+    /** Header heading. Default `'Get started'`. */
+    title?: ReactNode;
+    /** Override the progress label rendered next to the bar. */
+    progressLabel?: ReactNode;
+    /** Hide the aggregate progress bar. */
+    hideProgress?: boolean;
+}
+declare const OnboardingChecklist: react.ForwardRefExoticComponent<OnboardingChecklistProps & react.RefAttributes<HTMLElement>>;
+
 /**
  * Pagination — page selector for paginated lists/tables. Renders prev/next
  * arrows plus a compact range of numbered pages. Use `siblings` to control how
@@ -1366,29 +1603,23 @@ interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'>, Va
 declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
- * RadialProgress — circular SVG progress ring. Renders the percent label in the
- * center by default; pass `children` to override (e.g., a glyph or a count).
+ * PullToRefresh — controlled visual indicator for the pull-to-refresh
+ * interaction. Renders the rotating arrow + state label that appears at the
+ * top of a scrolling list as the user pulls.
  *
- * Tones: accent (default) and ok (auto-applied when value === max).
+ * This is the *visual* primitive only. The gesture (touch tracking, threshold
+ * detection, async refresh) is left to the consumer because that wiring is
+ * app-specific (router refresh, query invalidation, route reload, etc.). Pass
+ * the current `state` and the indicator updates to match.
  */
-type RadialTone = 'accent' | 'ok' | 'warn' | 'err';
-interface RadialProgressProps extends HTMLAttributes<HTMLDivElement> {
-    /** Current value, 0..max. */
-    value: number;
-    /** Maximum value. Default 100. */
-    max?: number;
-    /** Pixel size of the SVG. Default 64. */
-    size?: number;
-    /** Stroke width. Default 4. */
-    thickness?: number;
-    /** Color tone. Auto-flips to `ok` on completion unless explicitly set. */
-    tone?: RadialTone;
-    /** Replaces the centered percent label. */
-    children?: ReactNode;
-    /** Accessible label. Falls back to `${pct}%`. */
-    'aria-label'?: string;
+type PullToRefreshState = 'idle' | 'pulling' | 'ready' | 'loading';
+interface PullToRefreshProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current state. Drive this from your gesture handler. */
+    state?: PullToRefreshState;
+    /** Override the default state label. */
+    label?: ReactNode;
 }
-declare const RadialProgress: react.ForwardRefExoticComponent<RadialProgressProps & react.RefAttributes<HTMLDivElement>>;
+declare const PullToRefresh: react.ForwardRefExoticComponent<PullToRefreshProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
  * Sidebar — primary app navigation column. A simple flex column with the
@@ -1515,6 +1746,43 @@ interface StepperProps extends HTMLAttributes<HTMLOListElement> {
 }
 declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLOListElement>>;
 
+/**
+ * TabBar — mobile bottom navigation. Renders an evenly-spaced row of items
+ * (typically 4–5) with optional `elevated` styling for one center action.
+ *
+ * Active state can be controlled (`value` + `onValueChange`) or uncontrolled
+ * (`defaultValue`). The bar sits at the bottom of the screen; pair with
+ * `pb-[env(safe-area-inset-bottom)]` on the surrounding scroll container to
+ * respect the iOS home indicator.
+ */
+interface TabBarItem {
+    /** Stable identifier — what `value` / `onValueChange` reference. */
+    id: string;
+    /** Short label rendered under the icon. */
+    label: ReactNode;
+    /** Glyph node — pass an SVG, IconGlyph, or string emoji. */
+    icon: ReactNode;
+    /** Optional unread / count badge rendered top-right of the icon. */
+    badge?: ReactNode;
+    /**
+     * Render this slot as an elevated pill (the center "Ask"-style action). Only
+     * one item should set this true. Disables the active-color treatment for
+     * this slot since it's always the focal action.
+     */
+    elevated?: boolean;
+    disabled?: boolean;
+}
+interface TabBarProps extends Omit<HTMLAttributes<HTMLElement>, 'defaultValue'> {
+    items: TabBarItem[];
+    /** Controlled active item id. */
+    value?: string;
+    /** Uncontrolled initial active item id. */
+    defaultValue?: string;
+    /** Fired when a tab is activated. */
+    onValueChange?: (id: string) => void;
+}
+declare const TabBar: react.ForwardRefExoticComponent<TabBarProps & react.RefAttributes<HTMLElement>>;
+
 /**
  * Tabs — two visual styles built on Radix Tabs.
  *
@@ -1568,17 +1836,90 @@ interface TimelineItemProps extends HTMLAttributes<HTMLLIElement> {
 declare const TimelineItem: react.ForwardRefExoticComponent<TimelineItemProps & react.RefAttributes<HTMLLIElement>>;
 
 /**
- * Topbar — slim header strip across the top of an app surface. The title
- * lives on the left, the rest of the row is yours via `actions` (search,
- * settings, avatar, etc.).
+ * formatRelative — compact "x ago" / "in x" formatter used by ActivityTimeline
+ * and any other surface that wants to print typed event timestamps. Always
+ * returns a short, ASCII string; if you need locale-aware formatting reach for
+ * `Intl.RelativeTimeFormat` instead.
+ *
+ * The `now` argument is injectable so callers can render deterministically in
+ * tests and during SSR. Invalid or unparseable inputs return an empty string
+ * (note: `0` is a valid timestamp — the Unix epoch — and renders as a real
+ * relative time).
+ */
+declare function formatRelative(input: Date | string | number, now?: Date): string;
+
+/**
+ * ActivityTimeline — typed-event variant of `Timeline`. Each event carries
+ * an optional `icon`, an `actor` (name + avatar slot), a `title`, an `at`
+ * timestamp formatted relative to `relativeNow`, and an optional `payload`
+ * preview. Tone drives the marker color.
+ *
+ * The component is presentation-only — supply your own data adapter to map
+ * domain events to `ActivityEvent`s.
+ */
+interface ActivityActor {
+    name: ReactNode;
+    /** Typically an `<Avatar>` or `<IconGlyph>`. */
+    avatar?: ReactNode;
+}
+interface ActivityEvent {
+    id: string;
+    /** Leading icon next to the marker. Often an `<IconGlyph>`. */
+    icon?: ReactNode;
+    actor?: ActivityActor;
+    title: ReactNode;
+    /** Event time. Renders relative to `relativeNow`. */
+    at: Date | string | number;
+    /** Optional inline preview (e.g. a diff snippet or a payload summary). */
+    payload?: ReactNode;
+    /** Marker color tone. Default `accent`. */
+    tone?: TimelineEventTone;
+}
+interface ActivityTimelineProps extends HTMLAttributes<HTMLOListElement> {
+    events: ReadonlyArray<ActivityEvent>;
+    /** Reference time for relative formatting. Injectable for tests/SSR. */
+    relativeNow?: Date;
+}
+declare const ActivityTimeline: react.ForwardRefExoticComponent<ActivityTimelineProps & react.RefAttributes<HTMLOListElement>>;
+
+/**
+ * Topbar — slim header strip across the top of an app surface.
+ *
+ * Default (`density="comfortable"`) renders the 52px desktop header with a
+ * title on the left and `actions` on the right. Pass `density="touch"` for the
+ * 56px mobile page-header variant that adds an optional `back` button and an
+ * `eyebrow` line (small uppercase mono label) above the title — the same shape
+ * the Mobile Library uses as its in-app nav bar.
  */
 interface TopbarProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** Title rendered on the left. */
     title?: ReactNode;
+    /**
+     * Eyebrow label rendered above the title (small uppercase mono). Touch density
+     * only — silently ignored on desktop density to avoid two header tiers stacking.
+     */
+    eyebrow?: ReactNode;
     /** Left-of-title slot — typically a logo or breadcrumbs. */
     leading?: ReactNode;
-    /** Right-side action group. Rendered with `gap-3`. */
+    /**
+     * Renders the back-arrow button at the start (before `leading`). Pass
+     * `back={true}` for the declarative form and wire the handler via `onBack`,
+     * or pass `back={handler}` directly. Touch-density only; ignored on
+     * desktop density.
+     */
+    back?: boolean | MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Handler for the back button when `back={true}`. Ignored when `back` is
+     * itself a function — in that case `back` is the handler.
+     */
+    onBack?: MouseEventHandler<HTMLButtonElement>;
+    /** Right-side action group. Rendered with `gap-3` (desktop) or `gap-1` (touch). */
     actions?: ReactNode;
+    /**
+     * `'comfortable'` (default) → desktop 52px header. `'touch'` → mobile 56px
+     * page-header with optional back button + eyebrow.
+     */
+    density?: 'comfortable' | 'touch';
 }
 declare const Topbar: react.ForwardRefExoticComponent<TopbarProps & react.RefAttributes<HTMLElement>>;
 
@@ -1609,4 +1950,71 @@ interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect'> {
 }
 declare const Tree: react.ForwardRefExoticComponent<TreeProps & react.RefAttributes<HTMLUListElement>>;
 
-export { Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, AlertDialogRoot, AlertDialogTrigger, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, type BannerTone, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, type CrumbProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogOverlay, DialogPortal, type DialogProps, DialogRoot, DialogTrigger, Dots, type DotsProps, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FAB, type FABProps, Field, type FieldProps, FileChip, type FileChipProps, HoverCard, HoverCardContent, HoverCardPortal, type HoverCardProps, HoverCardRoot, HoverCardTrigger, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, MenuCheckboxItem, MenuItem, type MenuItemProps, MenuSeparator, Menubar, MenubarContent, MenubarItem, type MenubarItemProps, MenubarMenu, MenubarSeparator, MenubarTrigger, NavBar, type NavBarItem, type NavBarOrientation, type NavBarProps, NavItem, type NavItemProps, NavSection, type NavSectionProps, type NormalizedOption, OTP, type OTPHandle, type OTPProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, RadialProgress, type RadialProgressProps, type RadialTone, Radio, RadioGroup, type RadioGroupProps, type RadioProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectTrigger, SelectValue, Sheet, type SheetProps, Sidebar, type SidebarProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, StatCard, type StatCardProps, type StatTrend, StatusDot, type StatusDotProps, type StatusState, type StepState, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, Tab, type TabProps, Tabs, TabsContent, TabsList, type TabsProps, type TabsVariantProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, Timeline, type TimelineEvent, type TimelineEventTone, TimelineItem, type TimelineItemProps, type TimelineProps, ToastCard, type ToastInput, ToastProvider, type ToastVariant, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, Topbar, type TopbarProps, Tree, type TreeItem, type TreeProps, type UseControllableStateProps, type UseKeyboardListOptions, type UseKeyboardListResult, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, iconButtonStyles, useControllableState, useDisclosure, useEscape, useIsomorphicLayoutEffect, useKeyboardList, useOutsideClick, useTheme, useToast };
+/**
+ * WizardDialog — modal multi-step flow. Composes `Dialog`, `Stepper`, and
+ * Next/Back navigation around a `steps` array. Each step's content can be a
+ * static node or a render function that receives the wizard context, which
+ * is useful for steps that need to read or drive the navigation imperatively.
+ *
+ * `canAdvance` lets a step gate the Next button (e.g. when a form field is
+ * empty). When the last step's Next is clicked, the wizard calls
+ * `onComplete()` and lets the consumer close the dialog from there.
+ */
+interface WizardContext {
+    current: number;
+    total: number;
+    goNext: () => void;
+    goBack: () => void;
+    goTo: (index: number) => void;
+    isFirst: boolean;
+    isLast: boolean;
+}
+interface WizardStep {
+    /** Stable id. Used as the React key and the Stepper id. */
+    id: string;
+    /** Visible label in the Stepper. */
+    label: string;
+    /**
+     * Step body. Pass a node for static content or a function for content that
+     * needs the wizard context (e.g. to disable a Next button from inside).
+     */
+    content: ReactNode | ((ctx: WizardContext) => ReactNode);
+    /**
+     * Predicate that gates the Next button for this step. Receives the wizard
+     * context. Default: always true (Next is enabled).
+     */
+    canAdvance?: (ctx: WizardContext) => boolean;
+}
+interface WizardDialogProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    /** Fires when the dialog open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Ordered list of wizard steps. */
+    steps: ReadonlyArray<WizardStep>;
+    /** Step index to start at. Default 0. */
+    initialStep?: number;
+    /** Fires when Next is clicked on the last step. The consumer typically closes the dialog here. */
+    onComplete?: () => void;
+    /** Dialog title (visible heading). */
+    title?: ReactNode;
+    /** Dialog description (rendered below the title for assistive tech). */
+    description?: ReactNode;
+    /** Pixel max-width of the dialog panel. Default 560. */
+    width?: number | string;
+    /** Override the Next button label. Default `'Next'`. */
+    nextLabel?: ReactNode;
+    /** Override the Next button label on the last step. Default `'Done'`. */
+    completeLabel?: ReactNode;
+    /** Override the Back button label. Default `'Back'`. */
+    backLabel?: ReactNode;
+    /** Optional cancel slot rendered in the footer alongside the navigation. */
+    cancelLabel?: ReactNode;
+    /** Fires when the cancel button is pressed. The consumer typically closes the dialog. */
+    onCancel?: () => void;
+}
+declare const WizardDialog: react.ForwardRefExoticComponent<WizardDialogProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type ActivityActor, type ActivityEvent, ActivityTimeline, type ActivityTimelineProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, AlertDialogRoot, AlertDialogTrigger, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, type BannerTone, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, type CrumbProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogOverlay, DialogPortal, type DialogProps, DialogRoot, DialogTrigger, Dots, type DotsProps, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FAB, type FABProps, Field, type FieldProps, FileChip, type FileChipProps, type FilterFacet, type FilterFacetOption, FilterPanel, type FilterPanelProps, type FilterPanelValue, HealthScore, type HealthScoreBreakdownEntry, type HealthScoreProps, HoverCard, HoverCardContent, HoverCardPortal, type HoverCardProps, HoverCardRoot, HoverCardTrigger, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, LargeTitle, type LargeTitleProps, MenuCheckboxItem, MenuItem, type MenuItemProps, MenuSeparator, Menubar, MenubarContent, MenubarItem, type MenubarItemProps, MenubarMenu, MenubarSeparator, MenubarTrigger, NavBar, type NavBarItem, type NavBarOrientation, type NavBarProps, NavItem, type NavItemProps, NavSection, type NavSectionProps, type NormalizedOption, OTP, type OTPHandle, type OTPProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingItem, type OnboardingItemStatus, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, type PullToRefreshState, RadialProgress, type RadialProgressProps, type RadialTone, Radio, RadioGroup, type RadioGroupProps, type RadioProps, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectTrigger, SelectValue, Sheet, type SheetProps, Sidebar, type SidebarProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, StatCard, type StatCardProps, type StatTrend, StatusDot, type StatusDotProps, type StatusState, type StepState, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, Tab, TabBar, type TabBarItem, type TabBarProps, type TabProps, Tabs, TabsContent, TabsList, type TabsProps, type TabsVariantProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, Timeline, type TimelineEvent, type TimelineEventTone, TimelineItem, type TimelineItemProps, type TimelineProps, ToastCard, type ToastInput, ToastProvider, type ToastVariant, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, Topbar, type TopbarProps, Tree, type TreeItem, type TreeProps, type UseControllableStateProps, type UseKeyboardListOptions, type UseKeyboardListResult, type WizardContext, WizardDialog, type WizardDialogProps, type WizardStep, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, formatRelative, iconButtonStyles, useControllableState, useDisclosure, useEscape, useIsomorphicLayoutEffect, useKeyboardList, useOutsideClick, useTheme, useToast };