@salemcobalt/ui 0.2.0-rc.12 → 0.2.0-rc.14

package/README.md

@@ -1,6 +1,6 @@
 # @salemcobalt/ui
 
-React 19 components for the Salem Cobalt design system: `Button`, `IconButton`, `Icon` and a shipped icon set, `BroomIcon`, `Badge`, `Card`, `Stack`, `Inline`, `Heading`, `Text`, `Kbd`, `Dialog`, `Tooltip`, `Menu`, `Popover`, `PriorityNav`, `Toolbar`, `Banner`, `Spinner`, `Progress`, `Tabs`, `Input`, `Textarea`, `Select`, `FileInput` and `FilePreviewDialog`, `Checkbox`, `Switch`, `Table` (with row selection), `SelectionBar`, `Toast`, `Stat`, `Chip`, `Disclosure`, `EmptyState`, `Skeleton`. Requires `@salemcobalt/tokens`.
+React 19 components for the Salem Cobalt design system: `Button`, `IconButton`, `Icon` and a shipped icon set, `BroomIcon`, `Badge`, `Card`, `Stack`, `Inline`, `Heading`, `Text`, `Kbd`, `Dialog`, `FullScreenFlow`, `Tooltip`, `Menu`, `Popover`, `PriorityNav`, `Toolbar`, `Banner`, `Spinner`, `Progress`, `Tabs`, `Input`, `Textarea`, `Select`, `FileInput` and `FilePreviewDialog`, `Checkbox`, `Switch`, `Table` (with row selection), `SelectionBar`, `Toast`, `Stat`, `Chip`, `Disclosure`, `EmptyState`, `Skeleton`. Requires `@salemcobalt/tokens`.
 
 ```ts
 import '@salemcobalt/tokens/css'; // custom properties, light + dark
@@ -32,7 +32,8 @@ Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS alwa
 | `Card`               | `variant` outlined · elevated · filled; `padding` none · sm · md · lg; `interactive`; `selected`; `as` or `render` to make it an `a`/`button`/`li`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `Stack`, `Inline`    | `gap` from the spacing scale (`none` … `4xl`); `align`; `justify`; `as`. `Inline` wraps unless `wrap={false}`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `Kbd`                | One key per `Kbd`; `Kbd.Group label="Command K"` groups a shortcut with a `+` (or `separator="space"`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `Dialog`             | `Root` (`open`, `defaultOpen`, `onOpenChange`, `dismissible`), `Trigger`, `Content` (`size` sm · md · lg, every size clamps to the viewport minus a 16px gutter; `variant="sheet"` becomes a bottom sheet below 640px with a scrolling `Body`), `Title`, `Description`, `Body`, `Actions`, `Close`. Menus, selects and tooltips opened inside render above it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `Dialog`             | `Root` (`open`, `defaultOpen`, `onOpenChange`, `dismissible`, `onRequestClose(reason)`: Esc, backdrop and every `Close` ask instead of closing; close by setting `open`), `Trigger`, `Content` (`size` sm · md · lg, every size clamps to the viewport minus a 16px gutter; `variant="sheet"` becomes a bottom sheet below 640px with a scrolling `Body`; `variant="fullscreen"` covers the viewport, inset 16px from 900px, with a scrolling `Body`), `Title`, `Description`, `Body`, `Actions`, `Close`. Menus, selects and tooltips opened inside render above it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `FullScreenFlow`     | A multi-step takeover on `Dialog variant="fullscreen"` (docs/adr/0006). `Root` (`open` default `true`, required `onRequestClose(reason)` for Esc and the ×, `onNext`/`onBack` for Enter and the arrow keys outside controls, `decoration`), `Header` (`title` names the dialog, `logo`, `compactTitle` below 760px, `status`, `closeLabel`; children: `Progress`), `Progress` (`chapters` `{ label, steps }[]`, `step` counted from 1, `label`; current chapter `aria-current="step"`), `Body`, `Rail` (from 1000px, `footer`) › `RailGroup` (`label`) › `RailItem` (`current`, `done`, `disabled`, `adornment`), `Viewport` (`direction` forward · back; one keyed `Step`), `Step` (`title` an `<h2>` that takes focus, `eyebrow`, `description`, `announcement` for the live region), `Footer` (`back`, `hint`, children; 44px buttons). The app owns the step state; the flow owns motion, focus and announcements.                                                                                                                                                                                                                                                                |
 | `Toolbar`            | `Root` (required `aria-label`, `wrap`, `gap`), `Group` (`aria-label`, `gap`), `Separator`, `Spacer`, `Button` (`render={<IconButton … />}` or `render={<Menu.Trigger render={…} />}` so the control joins the roving focus: Tab enters, arrows move, Tab leaves), `Link` (an anchor in the same navigation; `render={<IconButton label render={<a href />} />}` for an icon link).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `Banner`             | `tone` info (default) · success · warning · danger · neutral; `icon` (or `false`); `action` slot; `dismissible` + `onDismiss` (`open` to control); warning and danger are `role="alert"`, the rest `role="status"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `Tabs`               | `Root` (`value`, `defaultValue`, `onValueChange`), `List` (required `aria-label`, `fill`), `Tab` (`value`, `icon`, `count`, `disabled`), `Panel` (`value`, `keepMounted`). Arrow keys move, Enter/Space activates. `List variant="segmented"`: a quiet segmented control (sunken track, the active tab raised on `surface-default`, no accent, plain muted counts); `line` stays the default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
@@ -69,6 +70,48 @@ Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS alwa
 </Dialog.Root>
 ```
 
+```tsx
+// The app owns the step (a machine, the URL); the flow owns motion, focus and announcements.
+<FullScreenFlow.Root onRequestClose={() => setConfirmLeave(true)} onNext={next} onBack={back}>
+  <FullScreenFlow.Header
+    title="Set up your search"
+    compactTitle={`${n} of 10 · ${step.label}`}
+    closeLabel="Save and exit"
+  >
+    <FullScreenFlow.Progress
+      chapters={[
+        { label: 'You', steps: 3 },
+        { label: 'Your search', steps: 4 },
+      ]}
+      step={n}
+      label={`Step ${n} of 10 · ${step.label}`}
+    />
+  </FullScreenFlow.Header>
+  <FullScreenFlow.Body>
+    <FullScreenFlow.Rail aria-label="Setup steps">…RailGroup › RailItem…</FullScreenFlow.Rail>
+    <FullScreenFlow.Viewport direction={direction}>
+      <FullScreenFlow.Step key={step.id} title={step.title} announcement={`Step ${n} of 10, ${step.label}`}>
+        …
+      </FullScreenFlow.Step>
+    </FullScreenFlow.Viewport>
+  </FullScreenFlow.Body>
+  <FullScreenFlow.Footer
+    back={
+      <Button variant="ghost" size="lg" onClick={back}>
+        Back
+      </Button>
+    }
+  >
+    <Button size="lg" onClick={next}>
+      Continue
+    </Button>
+  </FullScreenFlow.Footer>
+  <Dialog.Root open={confirmLeave} onOpenChange={setConfirmLeave}>
+    …Leave for now? …
+  </Dialog.Root>
+</FullScreenFlow.Root>
+```
+
 ```tsx
 <Tooltip.Provider>
   <Inline gap="2xs">

package/dist/index.d.ts

@@ -699,7 +699,9 @@ declare const Kbd: typeof KbdBase & {
 };
 
 type DialogSize = 'sm' | 'md' | 'lg';
-type DialogVariant = 'dialog' | 'sheet';
+type DialogVariant = 'dialog' | 'sheet' | 'fullscreen';
+/** How a person asked to close: Esc, a press on the backdrop, or a `Dialog.Close`. */
+type DialogCloseRequestReason = 'escape-key' | 'outside-press' | 'close-press';
 interface DialogRootProps {
     /** Controlled open state. */
     open?: boolean | undefined;
@@ -709,10 +711,17 @@ interface DialogRootProps {
     onOpenChange?: ((open: boolean) => void) | undefined;
     /** When `false`, Esc and backdrop clicks no longer close the dialog. Default `true`. */
     dismissible?: boolean | undefined;
+    /**
+     * When set, the dialog no longer closes itself: Esc, a backdrop press and every `Dialog.Close` call
+     * this with the reason instead, and the app closes it by setting `open` to `false` (for example after
+     * a "Leave for now?" confirmation). Use with a controlled `open`. `dismissible={false}` still swallows
+     * Esc and backdrop presses first.
+     */
+    onRequestClose?: ((reason: DialogCloseRequestReason) => void) | undefined;
     children?: ReactNode | undefined;
 }
 /** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */
-declare function Root$5({ dismissible, onOpenChange, open, defaultOpen, children }: DialogRootProps): react.JSX.Element;
+declare function Root$6({ dismissible, onOpenChange, onRequestClose, open, defaultOpen, children, }: DialogRootProps): react.JSX.Element;
 interface DialogContentProps extends Omit<Dialog$1.Popup.Props, 'className'> {
     /**
      * Maximum width: `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely.
@@ -723,6 +732,10 @@ interface DialogContentProps extends Omit<Dialog$1.Popup.Props, 'className'> {
      * `dialog` (default) centres the popup. `sheet` is the same on wide viewports but below 640px it
      * becomes a bottom sheet: full width, rounded top, title and actions pinned while `Dialog.Body`
      * scrolls, padding that clears the home indicator. Use it for forms and pickers opened from a list.
+     * `fullscreen` covers the viewport (inset by 16px with a rounded edge from 900px), slides in from the
+     * inline end, keeps clear of the safe areas, and lets `Dialog.Body` scroll between a pinned title and
+     * actions; `size` is ignored. It is the surface of `FullScreenFlow`. Pair it with `onRequestClose` on
+     * the Root when leaving needs a confirmation.
      */
     variant?: DialogVariant | undefined;
     className?: string | undefined;
@@ -744,7 +757,7 @@ interface DialogDescriptionProps extends Omit<Dialog$1.Description.Props, 'class
 declare function Description$1({ className, ...rest }: DialogDescriptionProps): react.JSX.Element;
 type DialogBodyProps = ComponentPropsWithRef<'div'>;
 /** Free content between the description and the actions. In a `sheet` it is the part that scrolls. */
-declare function Body$1({ className, ...rest }: DialogBodyProps): react.JSX.Element;
+declare function Body$2({ className, ...rest }: DialogBodyProps): react.JSX.Element;
 type DialogActionsProps = Omit<InlineProps, 'justify'>;
 /** Right-aligned row of Buttons. Put the confirming action last. */
 declare function Actions({ className, ...rest }: DialogActionsProps): react.JSX.Element;
@@ -755,12 +768,12 @@ interface DialogCloseProps extends Omit<Dialog$1.Close.Props, 'className'> {
 declare function Close$1({ className, children, render, ...rest }: DialogCloseProps): react.JSX.Element;
 /** A modal that interrupts for a decision or a short form. Built on Base UI's Dialog. */
 declare const Dialog: {
-    Root: typeof Root$5;
+    Root: typeof Root$6;
     Trigger: Dialog$1.Trigger;
     Content: typeof Content$2;
     Title: typeof Title$1;
     Description: typeof Description$1;
-    Body: typeof Body$1;
+    Body: typeof Body$2;
     Actions: typeof Actions;
     Close: typeof Close$1;
 };
@@ -964,7 +977,7 @@ interface MenuRootProps {
     children?: ReactNode | undefined;
 }
 /** Owns the open state. Wrap a `Menu.Trigger` and a `Menu.Content`. */
-declare function Root$4({ open, defaultOpen, onOpenChange, disabled, modal, children }: MenuRootProps): react.JSX.Element;
+declare function Root$5({ open, defaultOpen, onOpenChange, disabled, modal, children }: MenuRootProps): react.JSX.Element;
 interface MenuTriggerProps extends Omit<Menu$1.Trigger.Props, 'className'> {
     className?: string | undefined;
 }
@@ -1046,7 +1059,7 @@ interface MenuSeparatorProps extends Omit<Menu$1.Separator.Props, 'className'> {
 declare function Separator$1({ className, ...rest }: MenuSeparatorProps): react.JSX.Element;
 /** A dropdown of actions on a trigger, with full keyboard support. Built on Base UI's Menu. */
 declare const Menu: {
-    Root: typeof Root$4;
+    Root: typeof Root$5;
     Trigger: typeof Trigger$1;
     Content: typeof Content$1;
     Item: typeof Item;
@@ -1191,7 +1204,7 @@ interface TabsRootProps extends Omit<Tabs$1.Root.Props, 'className' | 'value' |
     className?: string | undefined;
 }
 /** Owns the active tab. Wrap a `Tabs.List` and one `Tabs.Panel` per tab. */
-declare function Root$3({ className, onValueChange, ...rest }: TabsRootProps): react.JSX.Element;
+declare function Root$4({ className, onValueChange, ...rest }: TabsRootProps): react.JSX.Element;
 type TabsListVariant = 'line' | 'segmented';
 interface TabsListProps extends Omit<Tabs$1.List.Props, 'className'> {
     /** Names the set of tabs for assistive tech: "Inbox sections". */
@@ -1222,7 +1235,7 @@ interface TabsPanelProps extends Omit<Tabs$1.Panel.Props, 'className' | 'value'>
 declare function Panel({ className, ...rest }: TabsPanelProps): react.JSX.Element;
 /** Switches between sections of one view. Built on Base UI's Tabs. */
 declare const Tabs: {
-    Root: typeof Root$3;
+    Root: typeof Root$4;
     List: typeof List;
     Tab: typeof Tab;
     Panel: typeof Panel;
@@ -1241,7 +1254,7 @@ interface ToolbarRootProps extends Omit<Toolbar$1.Root.Props, 'className'> {
  * A row of controls with one tab stop: Tab enters, arrow keys move between items, Tab leaves. Put every
  * control through `Toolbar.Button` (`render={<IconButton … />}`) so it joins the roving focus.
  */
-declare function Root$2({ wrap, gap, className, ...rest }: ToolbarRootProps): react.JSX.Element;
+declare function Root$3({ wrap, gap, className, ...rest }: ToolbarRootProps): react.JSX.Element;
 interface ToolbarGroupProps extends Omit<Toolbar$1.Group.Props, 'className'> {
     /** Names the group: "Playback". */
     'aria-label'?: string | undefined;
@@ -1269,7 +1282,7 @@ interface ToolbarSpacerProps {
 declare function Spacer({ className }: ToolbarSpacerProps): react.JSX.Element;
 /** A horizontal container of controls. Built on Base UI's Toolbar. */
 declare const Toolbar: {
-    Root: typeof Root$2;
+    Root: typeof Root$3;
     Group: typeof Group;
     Separator: typeof Separator;
     Button: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
@@ -1337,7 +1350,7 @@ interface ProgressProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
  * Says that something is processing and, when known, how far along it is. Built on Base UI's Progress:
  * `role="progressbar"` with the aria value attributes, or none while indeterminate.
  */
-declare function Progress({ value, max, min, label, valueText, showValue, tone, size, variant, className, ...rest }: ProgressProps): react.JSX.Element;
+declare function Progress$1({ value, max, min, label, valueText, showValue, tone, size, variant, className, ...rest }: ProgressProps): react.JSX.Element;
 
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
@@ -1721,14 +1734,14 @@ interface TableRootProps extends Omit<ComponentPropsWithRef<'table'>, 'style'> {
     selection?: RowSelection | undefined;
 }
 /** A semantic `<table>` in a horizontally scrolling wrapper. Compose `Table.Head`, `Table.Body`, `Table.Row`, `Table.Header`, `Table.Cell`. */
-declare function Root$1({ stickyHeader, maxHeight, density, divided, layout, wrapperClassName, wrapperStyle, className, style, children, selection, onKeyDown, ...rest }: TableRootProps): react.JSX.Element;
+declare function Root$2({ stickyHeader, maxHeight, density, divided, layout, wrapperClassName, wrapperStyle, className, style, children, selection, onKeyDown, ...rest }: TableRootProps): react.JSX.Element;
 type TableCaptionProps = ComponentPropsWithRef<'caption'>;
 /** Names the table for assistive tech; visually a muted line above it. */
 declare function Caption({ className, ...rest }: TableCaptionProps): react.JSX.Element;
 type TableHeadProps = ComponentPropsWithRef<'thead'>;
 declare function Head({ className, ...rest }: TableHeadProps): react.JSX.Element;
 type TableBodyProps = ComponentPropsWithRef<'tbody'>;
-declare function Body({ className, ...rest }: TableBodyProps): react.JSX.Element;
+declare function Body$1({ className, ...rest }: TableBodyProps): react.JSX.Element;
 type TableFootProps = ComponentPropsWithRef<'tfoot'>;
 declare function Foot({ className, ...rest }: TableFootProps): react.JSX.Element;
 interface TableRowProps extends ComponentPropsWithRef<'tr'> {
@@ -1784,19 +1797,19 @@ interface TableHeaderProps extends Omit<ComponentPropsWithRef<'th'>, 'align' | '
     onSort?: ((direction: Exclude<TableSortDirection, 'none'>) => void) | undefined;
 }
 /** A `<th>`; `scope` defaults to `col`, pass `row` for the first cell of a row. */
-declare function Header({ align, numeric, nowrap, truncate, width, sortable, sortDirection, onSort, scope, className, style, children, ...rest }: TableHeaderProps): react.JSX.Element;
+declare function Header$1({ align, numeric, nowrap, truncate, width, sortable, sortDirection, onSort, scope, className, style, children, ...rest }: TableHeaderProps): react.JSX.Element;
 interface TableCellProps extends Omit<ComponentPropsWithRef<'td'>, 'align' | 'width'>, CellSlots {
 }
 declare function Cell({ align, numeric, nowrap, truncate, width, className, style, ...rest }: TableCellProps): react.JSX.Element;
 /** Rows of records with column headers. Native table elements, so screen readers get rows and columns. */
 declare const Table: {
-    Root: typeof Root$1;
+    Root: typeof Root$2;
     Caption: typeof Caption;
     Head: typeof Head;
-    Body: typeof Body;
+    Body: typeof Body$1;
     Foot: typeof Foot;
     Row: typeof Row;
-    Header: typeof Header;
+    Header: typeof Header$1;
     Cell: typeof Cell;
     SelectionHeader: typeof SelectionHeader;
     SelectionCell: typeof SelectionCell;
@@ -2684,7 +2697,7 @@ interface PopoverRootProps {
     children?: ReactNode | undefined;
 }
 /** Owns the open state. Wrap a `Popover.Trigger` and a `Popover.Content`. */
-declare function Root({ open, defaultOpen, onOpenChange, modal, children }: PopoverRootProps): react.JSX.Element;
+declare function Root$1({ open, defaultOpen, onOpenChange, modal, children }: PopoverRootProps): react.JSX.Element;
 interface PopoverTriggerProps extends Omit<Popover$1.Trigger.Props, 'className'> {
     className?: string | undefined;
 }
@@ -2723,7 +2736,7 @@ interface PopoverCloseProps extends Omit<Popover$1.Close.Props, 'className'> {
 declare function Close({ className, children, render, ...rest }: PopoverCloseProps): react.JSX.Element;
 /** A non-modal panel anchored to a trigger, for a small form, a status summary or a legend. Built on Base UI's Popover. */
 declare const Popover: {
-    Root: typeof Root;
+    Root: typeof Root$1;
     Trigger: typeof Trigger;
     Content: typeof Content;
     Title: typeof Title;
@@ -2746,7 +2759,149 @@ interface BroomIconProps extends Omit<ComponentPropsWithRef<'svg'>, 'children'>
  */
 declare function BroomIcon({ sweeping, size, title, className, ...rest }: BroomIconProps): react.JSX.Element;
 
+/** Which way the flow moved: `forward` slides the new step in from the inline end, `back` from the start. */
+type FlowDirection = 'forward' | 'back';
+/** Why the flow asked to close: Esc, or the × in the header. */
+type FlowCloseRequestReason = 'escape-key' | 'close-press';
+interface FullScreenFlowRootProps {
+    /** Whether the flow is showing. Default `true`, for a flow that lives on its own route. */
+    open?: boolean | undefined;
+    /**
+     * Esc and the header's × call this instead of closing. Show a leave confirmation (a nested `Dialog`),
+     * then close by setting `open` to `false` or by navigating away. A press on the backdrop does nothing.
+     */
+    onRequestClose: (reason: FlowCloseRequestReason) => void;
+    /** Enter (outside buttons, links, textareas and `[data-flow-keys="local"]`) and the forward arrow key call this. */
+    onNext?: (() => void) | undefined;
+    /** The back arrow key (outside form controls) calls this. */
+    onBack?: (() => void) | undefined;
+    /** A decorative layer behind everything, such as an illustration. Hidden from assistive tech. */
+    decoration?: ReactNode | undefined;
+    className?: string | undefined;
+    /** `Header`, `Body` and `Footer`, in that order. */
+    children?: ReactNode | undefined;
+}
+/**
+ * A full-screen modal for a multi-step task, on `Dialog variant="fullscreen"`: focus is trapped, the page
+ * behind is inert, and Esc goes to `onRequestClose`. Holds the polite live region that `Step` announces into.
+ */
+declare function Root({ open, onRequestClose, onNext, onBack, decoration, className, children, }: FullScreenFlowRootProps): react.JSX.Element;
+interface FullScreenFlowHeaderProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+    /** The flow's name ("Set up your search"). Labels the dialog. */
+    title: ReactNode;
+    /** A small mark before the title. Decorative. */
+    logo?: ReactNode | undefined;
+    /** Shown instead of `title` below 760px, where the progress drops to its own row: "4 of 10 · Roles". */
+    compactTitle?: ReactNode | undefined;
+    /** A status after the progress, such as a "Saved" tick. */
+    status?: ReactNode | undefined;
+    /** Name of the × button, which calls `onRequestClose('close-press')`. Default "Close". */
+    closeLabel?: string | undefined;
+    /** Usually a `FullScreenFlow.Progress`. */
+    children?: ReactNode | undefined;
+}
+/** The top bar: logo and title, progress in the middle, a status, and the ×. Pinned; it never scrolls. */
+declare function Header({ title, logo, compactTitle, status, closeLabel, className, children, ...rest }: FullScreenFlowHeaderProps): react.JSX.Element;
+/** A chapter of the flow and how many numbered steps it holds. */
+interface FlowChapter {
+    label: string;
+    steps: number;
+}
+interface FullScreenFlowProgressProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    /** The chapters in order. Each draws one segment, as wide as its share of the steps. */
+    chapters: readonly FlowChapter[];
+    /**
+     * The current step, counted from 1 across every chapter. `0` is before the first (a welcome screen);
+     * anything past the total fills every segment. The current step counts as half done.
+     */
+    step: number;
+    /** One line above the segments: "Step 4 of 10 · Roles · about 5 min left". Hidden below 760px. */
+    label?: ReactNode | undefined;
+    /** Name of the list of segments. Default "Progress". */
+    listLabel?: string | undefined;
+}
+/** Segmented progress, one segment per chapter; the chapter holding the current step has `aria-current="step"`. */
+declare function Progress({ chapters, step, label, listLabel, className, ...rest }: FullScreenFlowProgressProps): react.JSX.Element;
+type FullScreenFlowBodyProps = ComponentPropsWithRef<'div'>;
+/** Between header and footer: a `Rail` (from 1000px) beside the `Viewport`. */
+declare function Body({ className, ...rest }: FullScreenFlowBodyProps): react.JSX.Element;
+interface FullScreenFlowRailProps extends ComponentPropsWithRef<'nav'> {
+    /** A note under the steps, such as where answers can be changed later. Hidden on short screens. */
+    footer?: ReactNode | undefined;
+}
+/** Every step by chapter, shown from 1000px. Holds `RailGroup`s of `RailItem`s. Named "Steps" unless `aria-label` says otherwise. */
+declare function Rail({ 'aria-label': ariaLabel, footer, className, children, ...rest }: FullScreenFlowRailProps): react.JSX.Element;
+interface FullScreenFlowRailGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+    /** The chapter name. */
+    label: ReactNode;
+}
+/** One chapter in the rail: its name over a list of `RailItem`s. */
+declare function RailGroup({ label, className, children, ...rest }: FullScreenFlowRailGroupProps): react.JSX.Element;
+interface FullScreenFlowRailItemProps extends ComponentPropsWithRef<'button'> {
+    /** The step on screen: `aria-current="step"` and the accent wash. */
+    current?: boolean | undefined;
+    /** Shows a check and adds `doneLabel` for assistive tech. */
+    done?: boolean | undefined;
+    /** Read after the label when `done`. Default "done". */
+    doneLabel?: string | undefined;
+    /** A small icon at the end of the row, e.g. "drafted for you". Give it a `title` if it carries meaning. */
+    adornment?: ReactNode | undefined;
+}
+/** A step in the rail. A button: disable the steps not reached yet. */
+declare function RailItem({ current, done, doneLabel, adornment, type, className, children, ...rest }: FullScreenFlowRailItemProps): react.JSX.Element;
+interface FullScreenFlowViewportProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'ref'> {
+    /** Which way this change goes. Set it with the step: `back` when the person went back. Default `forward`. */
+    direction?: FlowDirection | undefined;
+    /** Exactly one `FullScreenFlow.Step`, keyed by step: `<FullScreenFlow.Step key={step.id} …>`. */
+    children: ReactElement;
+}
+/**
+ * The scrolling area that shows one step. When the child's `key` changes, the old step slides out and the
+ * new one slides in (by `direction`; a short crossfade under reduced motion), the area scrolls to the top,
+ * and the new step's title takes focus and is announced.
+ */
+declare function Viewport({ direction, className, children, ...rest }: FullScreenFlowViewportProps): react.JSX.Element;
+interface FullScreenFlowStepProps extends Omit<ComponentPropsWithRef<'section'>, 'title'> {
+    /** The step's heading, an `<h2>` that takes focus (`tabindex="-1"`) when the step arrives. */
+    title: ReactNode;
+    /** A short line above the title: "Your search · Step 4 of 10". */
+    eyebrow?: ReactNode | undefined;
+    /** Why this step is asked, under the title. */
+    description?: ReactNode | undefined;
+    /** What the live region says when the step arrives: "Step 4 of 10, Roles". Defaults to `title` when it is a string. */
+    announcement?: string | undefined;
+}
+/** One step: eyebrow, title, description, then its content. Render it inside `Viewport` with a `key`. */
+declare function Step({ title, eyebrow, description, announcement, className, children, ...rest }: FullScreenFlowStepProps): react.JSX.Element;
+interface FullScreenFlowFooterProps extends ComponentPropsWithRef<'div'> {
+    /** At the inline start: a Back button. */
+    back?: ReactNode | undefined;
+    /** Before the actions, from 760px: "Press Enter to continue". */
+    hint?: ReactNode | undefined;
+    /** The primary action, at the inline end; stretches below 520px. */
+    children?: ReactNode | undefined;
+}
+/** The pinned bottom bar. Buttons in it are at least 44px tall and wide, and it clears the home indicator. */
+declare function Footer({ back, hint, className, children, ...rest }: FullScreenFlowFooterProps): react.JSX.Element;
+/**
+ * A full-screen, multi-step flow (onboarding, setup) on `Dialog variant="fullscreen"`:
+ * `Root` › `Header` (with `Progress`) · `Body` (`Rail` › `RailGroup` › `RailItem`, and `Viewport` › `Step`) · `Footer`.
+ * The app owns the state (which step, which direction); this owns the surface, motion, focus and announcements.
+ */
+declare const FullScreenFlow: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Progress: typeof Progress;
+    Body: typeof Body;
+    Rail: typeof Rail;
+    RailGroup: typeof RailGroup;
+    RailItem: typeof RailItem;
+    Viewport: typeof Viewport;
+    Step: typeof Step;
+    Footer: typeof Footer;
+};
+
 declare const version = "0.1.1";
 
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Badge, Banner, BellIcon, BriefcaseIcon, BroomIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, FileInput, FilePreviewDialog, FilterIcon, FlagIcon, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Popover, PriorityNav, Progress, RefreshIcon, SearchIcon, Select, SelectionBar, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toast, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, useRowSelection, useToast, version };
-export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, BroomIconProps, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ChipProps, ChipSize, ChipTone, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, DialogVariant, DisclosureProps, EmptyStateElement, EmptyStateProps, EmptyStateSize, FieldProps, FileInputProps, FilePreviewDialogProps, HeadingElement, HeadingLevel, HeadingProps, HeadingSize, IconButtonDotTone, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, InputProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, PopoverAlign, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverRootProps, PopoverSide, PopoverTitleProps, PopoverTriggerProps, PriorityNavItem, PriorityNavLinkProps, PriorityNavProps, ProgressProps, ProgressSize, ProgressTone, ProgressVariant, RowSelection, RowSelectionHeaderState, SelectGroup, SelectOption, SelectProps, SelectionBarProps, SkeletonProps, SkeletonVariant, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSelectionCellProps, TableSelectionHeaderProps, TableSortDirection, TabsListProps, TabsListVariant, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, TextareaVariant, ToastApi, ToastOptions, ToastProviderProps, ToastTone, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Badge, Banner, BellIcon, BriefcaseIcon, BroomIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, FileInput, FilePreviewDialog, FilterIcon, FlagIcon, FullScreenFlow, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Popover, PriorityNav, Progress$1 as Progress, RefreshIcon, SearchIcon, Select, SelectionBar, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toast, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, useRowSelection, useToast, version };
+export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, BroomIconProps, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ChipProps, ChipSize, ChipTone, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogCloseRequestReason, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, DialogVariant, DisclosureProps, EmptyStateElement, EmptyStateProps, EmptyStateSize, FieldProps, FileInputProps, FilePreviewDialogProps, FlowChapter, FlowCloseRequestReason, FlowDirection, FullScreenFlowBodyProps, FullScreenFlowFooterProps, FullScreenFlowHeaderProps, FullScreenFlowProgressProps, FullScreenFlowRailGroupProps, FullScreenFlowRailItemProps, FullScreenFlowRailProps, FullScreenFlowRootProps, FullScreenFlowStepProps, FullScreenFlowViewportProps, HeadingElement, HeadingLevel, HeadingProps, HeadingSize, IconButtonDotTone, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, InputProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, PopoverAlign, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverRootProps, PopoverSide, PopoverTitleProps, PopoverTriggerProps, PriorityNavItem, PriorityNavLinkProps, PriorityNavProps, ProgressProps, ProgressSize, ProgressTone, ProgressVariant, RowSelection, RowSelectionHeaderState, SelectGroup, SelectOption, SelectProps, SelectionBarProps, SkeletonProps, SkeletonVariant, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSelectionCellProps, TableSelectionHeaderProps, TableSortDirection, TabsListProps, TabsListVariant, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, TextareaVariant, ToastApi, ToastOptions, ToastProviderProps, ToastTone, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };