@openwarelabs/ui 0.13.0 → 0.14.1

package/dist/components/Splitter/Splitter.types.d.ts

@@ -0,0 +1,69 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type SplitterDirection = "horizontal" | "vertical";
+export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** SplitterPanels with a SplitterHandle between each pair, straight inside (fragments are fine). */
+    children: ReactNode;
+    /** `horizontal` puts the panels side by side, `vertical` stacks them.
+     * @default "horizontal" */
+    direction?: SplitterDirection;
+    /** Each panel's size in percent, in order, adding up to 100, when you control it. */
+    sizes?: number[];
+    /** The sizes at first, when it controls itself. Without it, each panel's `defaultSize` is used, and panels without
+     * one share what's left. */
+    defaultSizes?: number[];
+    /** Called with every panel's size, in percent, as they change: while dragging, on each key press, on collapsing. */
+    onSizesChange?(sizes: number[]): void;
+    /** Remembers the sizes in localStorage under this name and puts them back next time. Give each splitter its own. */
+    autoSaveId?: string;
+}
+export interface SplitterPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "onResize"> {
+    children?: ReactNode;
+    /** Its size at first, in percent of the splitter. Panels without one share what the others leave. */
+    defaultSize?: number;
+    /** The smallest it can be dragged, in percent. @default 0 */
+    minSize?: number;
+    /** The largest it can be dragged, in percent. @default 100 */
+    maxSize?: number;
+    /** Lets it fold away: dragging well past `minSize`, double-clicking its handle, or Enter on the handle collapses it
+     * to `collapsedSize`, and the same expands it again. @default false */
+    collapsible?: boolean;
+    /** Its size when collapsed, in percent: 0 hides it, more leaves a strip such as a rail of icons. @default 0 */
+    collapsedSize?: number;
+    /** Called with its new size, in percent, when it changes. */
+    onResize?(size: number): void;
+    /** Called when it collapses or expands. */
+    onCollapsedChange?(collapsed: boolean): void;
+}
+export interface SplitterHandleProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
+    /** Names the handle for screen readers: say which panel it resizes, such as "Resize sidebar".
+     * @default "Resize panels" */
+    "aria-label"?: string;
+    /** Shows a small grip on the line, so it's easier to see and to catch on a touch screen. @default false */
+    grip?: boolean;
+    /** Keeps the panels at their sizes: the handle can't be dragged or focused. @default false */
+    disabled?: boolean;
+}
+/** A panel's limits, in percent, as the layout maths reads them. Internal. */
+export interface SplitterPanelLimits {
+    minSize: number;
+    maxSize: number;
+    collapsible: boolean;
+    collapsedSize: number;
+}
+/** What a Splitter shares with its panels and handles. Internal. */
+export interface SplitterState {
+    direction: SplitterDirection;
+    sizes: number[];
+    limits: SplitterPanelLimits[];
+    /** Each panel's element id, for the handles' aria-controls. */
+    panelIds: string[];
+    /** Moves handle `handle` by `delta` percent; `snap` lets a collapsible panel fold or unfold on the way. */
+    move(handle: number, delta: number, snap: boolean, from?: number[]): void;
+    /** Collapses or expands the collapsible panel beside the handle. */
+    toggle(handle: number): void;
+    /** The panels' length along the direction, in pixels, and whether a horizontal splitter runs right to left. */
+    measure(): {
+        length: number;
+        reversed: boolean;
+    };
+}

package/dist/components/TagInput/TagInput.d.cts

@@ -0,0 +1,7 @@
+import type { TagInputProps } from "./TagInput.types.cjs";
+export type { TagInputOption, TagInputProps, TagInputRejectReason } from "./TagInput.types.cjs";
+/**
+ * Several values in one field: each shows as a removable tag before the text box. People type a value and press
+ * Enter or a comma, or paste a list. With `options`, it suggests values as they type, like Combobox.
+ */
+export declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/TagInput/TagInput.d.ts

@@ -0,0 +1,7 @@
+import type { TagInputProps } from "./TagInput.types.js";
+export type { TagInputOption, TagInputProps, TagInputRejectReason } from "./TagInput.types.js";
+/**
+ * Several values in one field: each shows as a removable tag before the text box. People type a value and press
+ * Enter or a comma, or paste a list. With `options`, it suggests values as they type, like Combobox.
+ */
+export declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/TagInput/TagInput.types.d.cts

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+export interface TagInputOption {
+    /** What goes in the value when it's picked. */
+    value: string;
+    /** The text shown in the list and on the tag, and matched as people type. */
+    label: string;
+    /** A muted line under the label in the list; also matched. */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+/** Why a value wasn't added: `validate` refused it, it's already there, it isn't one of the options, or the field is full. */
+/** An item in the suggestions: an option, or the one that adds what's typed. Internal. */
+export type TagInputItem = {
+    option: TagInputOption;
+} | {
+    create: string;
+};
+export type TagInputRejectReason = "invalid" | "duplicate" | "unknown" | "max";
+export interface TagInputProps {
+    /** The values, when you control them. */
+    value?: string[];
+    /** The values at first, when it controls them itself.
+     * @default [] */
+    defaultValue?: string[];
+    /** Called with the new list when a value is added or removed. */
+    onChange?(value: string[]): void;
+    /** Suggestions shown in a list under the field, filtered by what's typed. Without them, it takes whatever is typed. */
+    options?: TagInputOption[];
+    /** With `options`, also takes values that aren't among them. Without options, it always does.
+     * @default false */
+    allowCustom?: boolean;
+    /** Checks a typed value before it's added; return false to refuse it. The text stays in the field to fix. */
+    validate?(text: string): boolean;
+    /** Called when a value isn't added, with the text and why, to show a message. */
+    onReject?(text: string, reason: TagInputRejectReason): void;
+    /** Keeps a value that's already there (compared ignoring case) instead of refusing it.
+     * @default false */
+    allowDuplicates?: boolean;
+    /** The most values it takes. */
+    max?: number;
+    /** Keys that add what's typed, besides Enter. A pasted list is split on these and on new lines.
+     * @default [","] */
+    separators?: string[];
+    /** Called as the person types, to load options from a server. */
+    onInputChange?(text: string): void;
+    /** Shown while there are no values. */
+    placeholder?: string;
+    /** Shown in the list when nothing matches.
+     * @default "No matches" */
+    emptyMessage?: ReactNode;
+    /** sm 32px for toolbars and settings rows, md 40px in forms; the field grows as tags wrap.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the field as wrong, like Input. Field sets it when there's an error.
+     * @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** Submits each value under this name, in a hidden input, so a Form or a plain form sends them as a list. */
+    name?: string;
+    /** The text box's id, which a Field's label points at. */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** The words it uses, for other languages. */
+    labels?: {
+        /** The remove button on a tag, given its text. @default (tag) => `Remove ${tag}` */
+        remove?(tag: string): string;
+        /** Read out when a value is added. @default (tag) => `Added ${tag}` */
+        added?(tag: string): string;
+        /** Read out when a value is removed. @default (tag) => `Removed ${tag}` */
+        removed?(tag: string): string;
+        /** The option that adds what's typed, with `allowCustom` and options. @default (text) => `Add "${text}"` */
+        create?(text: string): string;
+    };
+    className?: string;
+}

package/dist/components/TagInput/TagInput.types.d.ts

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+export interface TagInputOption {
+    /** What goes in the value when it's picked. */
+    value: string;
+    /** The text shown in the list and on the tag, and matched as people type. */
+    label: string;
+    /** A muted line under the label in the list; also matched. */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+/** Why a value wasn't added: `validate` refused it, it's already there, it isn't one of the options, or the field is full. */
+/** An item in the suggestions: an option, or the one that adds what's typed. Internal. */
+export type TagInputItem = {
+    option: TagInputOption;
+} | {
+    create: string;
+};
+export type TagInputRejectReason = "invalid" | "duplicate" | "unknown" | "max";
+export interface TagInputProps {
+    /** The values, when you control them. */
+    value?: string[];
+    /** The values at first, when it controls them itself.
+     * @default [] */
+    defaultValue?: string[];
+    /** Called with the new list when a value is added or removed. */
+    onChange?(value: string[]): void;
+    /** Suggestions shown in a list under the field, filtered by what's typed. Without them, it takes whatever is typed. */
+    options?: TagInputOption[];
+    /** With `options`, also takes values that aren't among them. Without options, it always does.
+     * @default false */
+    allowCustom?: boolean;
+    /** Checks a typed value before it's added; return false to refuse it. The text stays in the field to fix. */
+    validate?(text: string): boolean;
+    /** Called when a value isn't added, with the text and why, to show a message. */
+    onReject?(text: string, reason: TagInputRejectReason): void;
+    /** Keeps a value that's already there (compared ignoring case) instead of refusing it.
+     * @default false */
+    allowDuplicates?: boolean;
+    /** The most values it takes. */
+    max?: number;
+    /** Keys that add what's typed, besides Enter. A pasted list is split on these and on new lines.
+     * @default [","] */
+    separators?: string[];
+    /** Called as the person types, to load options from a server. */
+    onInputChange?(text: string): void;
+    /** Shown while there are no values. */
+    placeholder?: string;
+    /** Shown in the list when nothing matches.
+     * @default "No matches" */
+    emptyMessage?: ReactNode;
+    /** sm 32px for toolbars and settings rows, md 40px in forms; the field grows as tags wrap.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the field as wrong, like Input. Field sets it when there's an error.
+     * @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** Submits each value under this name, in a hidden input, so a Form or a plain form sends them as a list. */
+    name?: string;
+    /** The text box's id, which a Field's label points at. */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** The words it uses, for other languages. */
+    labels?: {
+        /** The remove button on a tag, given its text. @default (tag) => `Remove ${tag}` */
+        remove?(tag: string): string;
+        /** Read out when a value is added. @default (tag) => `Added ${tag}` */
+        added?(tag: string): string;
+        /** Read out when a value is removed. @default (tag) => `Removed ${tag}` */
+        removed?(tag: string): string;
+        /** The option that adds what's typed, with `allowCustom` and options. @default (text) => `Add "${text}"` */
+        create?(text: string): string;
+    };
+    className?: string;
+}

package/dist/components/Timeline/Timeline.d.cts

@@ -0,0 +1,6 @@
+import type { TimelineItemProps, TimelineProps } from "./Timeline.types.cjs";
+export type { TimelineItemProps, TimelineProps, TimelineTone } from "./Timeline.types.cjs";
+/** Events down a line, as an ordered list: an activity feed, a changelog or the history of a record. */
+export declare function Timeline({ density, className, children, ...props }: TimelineProps): import("react").JSX.Element;
+/** One event on a Timeline: a marker on the line (a dot, an icon or an avatar), a title, a time and anything under it. */
+export declare function TimelineItem({ title, time, dateTime, tone, icon, avatar, pending, className, children, ...props }: TimelineItemProps): import("react").JSX.Element;

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,6 @@
+import type { TimelineItemProps, TimelineProps } from "./Timeline.types.js";
+export type { TimelineItemProps, TimelineProps, TimelineTone } from "./Timeline.types.js";
+/** Events down a line, as an ordered list: an activity feed, a changelog or the history of a record. */
+export declare function Timeline({ density, className, children, ...props }: TimelineProps): import("react").JSX.Element;
+/** One event on a Timeline: a marker on the line (a dot, an icon or an avatar), a title, a time and anything under it. */
+export declare function TimelineItem({ title, time, dateTime, tone, icon, avatar, pending, className, children, ...props }: TimelineItemProps): import("react").JSX.Element;

package/dist/components/Timeline/Timeline.types.d.cts

@@ -0,0 +1,42 @@
+import type { LiHTMLAttributes, OlHTMLAttributes, ReactNode } from "react";
+/** The colour of an item's dot or icon circle, the same set as Badge and Alert. */
+export type TimelineTone = "neutral" | "brand" | "success" | "warning" | "danger";
+export interface TimelineProps extends OlHTMLAttributes<HTMLOListElement> {
+    /**
+     * `comfortable` is a changelog or a history: a bold title with the time at the end of its line, and room for a
+     * description or a card under it. `compact` is an activity feed: one sentence with the time after it, close
+     * together, for 24px avatars.
+     * @default "comfortable"
+     */
+    density?: "compact" | "comfortable";
+    /** The events, as `TimelineItem`s, in the order they read: newest first for a feed, oldest first for a plan. */
+    children?: ReactNode;
+}
+export interface TimelineItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title"> {
+    /** What happened: a heading in a changelog, or the whole sentence in a feed ("Ana merged #42"). */
+    title?: ReactNode;
+    /** When it happened, as people read it: "2h ago", "14 Oct", "v0.13.0 · 14 Oct". */
+    time?: ReactNode;
+    /**
+     * The machine-readable moment for `time`, such as "2026-10-13T14:32" or "2026-10-13". With it, the time is a
+     * `<time>` element that screen readers, search engines and scripts can read.
+     */
+    dateTime?: string;
+    /**
+     * The colour of the dot, or of the icon's circle. Brand for something in progress or by an agent, success for
+     * something that shipped, warning for something that needs you, danger for something that failed.
+     * @default "neutral"
+     */
+    tone?: TimelineTone;
+    /** A 14px icon in a circle in place of the dot, such as a rocket for a deploy. */
+    icon?: ReactNode;
+    /**
+     * An `Avatar` in place of the dot, for who did it. Size it to the timeline: `sm` (24px) when compact, `md` (28px)
+     * when comfortable.
+     */
+    avatar?: ReactNode;
+    /** Something that hasn't happened yet: a hollow marker, a muted title and a dashed line into and out of it. */
+    pending?: boolean;
+    /** More about it under the title: a line of description, a quoted comment, badges, a link. */
+    children?: ReactNode;
+}

package/dist/components/Timeline/Timeline.types.d.ts

@@ -0,0 +1,42 @@
+import type { LiHTMLAttributes, OlHTMLAttributes, ReactNode } from "react";
+/** The colour of an item's dot or icon circle, the same set as Badge and Alert. */
+export type TimelineTone = "neutral" | "brand" | "success" | "warning" | "danger";
+export interface TimelineProps extends OlHTMLAttributes<HTMLOListElement> {
+    /**
+     * `comfortable` is a changelog or a history: a bold title with the time at the end of its line, and room for a
+     * description or a card under it. `compact` is an activity feed: one sentence with the time after it, close
+     * together, for 24px avatars.
+     * @default "comfortable"
+     */
+    density?: "compact" | "comfortable";
+    /** The events, as `TimelineItem`s, in the order they read: newest first for a feed, oldest first for a plan. */
+    children?: ReactNode;
+}
+export interface TimelineItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title"> {
+    /** What happened: a heading in a changelog, or the whole sentence in a feed ("Ana merged #42"). */
+    title?: ReactNode;
+    /** When it happened, as people read it: "2h ago", "14 Oct", "v0.13.0 · 14 Oct". */
+    time?: ReactNode;
+    /**
+     * The machine-readable moment for `time`, such as "2026-10-13T14:32" or "2026-10-13". With it, the time is a
+     * `<time>` element that screen readers, search engines and scripts can read.
+     */
+    dateTime?: string;
+    /**
+     * The colour of the dot, or of the icon's circle. Brand for something in progress or by an agent, success for
+     * something that shipped, warning for something that needs you, danger for something that failed.
+     * @default "neutral"
+     */
+    tone?: TimelineTone;
+    /** A 14px icon in a circle in place of the dot, such as a rocket for a deploy. */
+    icon?: ReactNode;
+    /**
+     * An `Avatar` in place of the dot, for who did it. Size it to the timeline: `sm` (24px) when compact, `md` (28px)
+     * when comfortable.
+     */
+    avatar?: ReactNode;
+    /** Something that hasn't happened yet: a hollow marker, a muted title and a dashed line into and out of it. */
+    pending?: boolean;
+    /** More about it under the title: a line of description, a quoted comment, badges, a link. */
+    children?: ReactNode;
+}

package/dist/components/Tour/Tour.d.cts

@@ -0,0 +1,9 @@
+import type { CoachmarkProps, TourProps } from "./Tour.types.cjs";
+export type { CoachmarkProps, TourLabels, TourProps, TourStep, TourTarget } from "./Tour.types.cjs";
+/**
+ * A guided tour: a card beside each part of the page in turn, with what it's for, Back and Next. Steps without a
+ * target show in the middle, for a welcome. It's non-modal, so the page stays usable; `spotlight` dims the rest of it.
+ */
+export declare function Tour({ steps, open, defaultOpen, onOpenChange, step, defaultStep, onStepChange, onComplete, onSkip, spotlight, spotlightPadding, width, labels, className, }: TourProps): import("react").JSX.Element | null;
+/** A single hint beside one control, with a button that dismisses it: for pointing out something new. */
+export declare function Coachmark({ target, title, content, open, defaultOpen, onOpenChange, placement, dismissLabel, autoFocus, width, className, }: CoachmarkProps): import("react").JSX.Element | null;

package/dist/components/Tour/Tour.d.ts

@@ -0,0 +1,9 @@
+import type { CoachmarkProps, TourProps } from "./Tour.types.js";
+export type { CoachmarkProps, TourLabels, TourProps, TourStep, TourTarget } from "./Tour.types.js";
+/**
+ * A guided tour: a card beside each part of the page in turn, with what it's for, Back and Next. Steps without a
+ * target show in the middle, for a welcome. It's non-modal, so the page stays usable; `spotlight` dims the rest of it.
+ */
+export declare function Tour({ steps, open, defaultOpen, onOpenChange, step, defaultStep, onStepChange, onComplete, onSkip, spotlight, spotlightPadding, width, labels, className, }: TourProps): import("react").JSX.Element | null;
+/** A single hint beside one control, with a button that dismisses it: for pointing out something new. */
+export declare function Coachmark({ target, title, content, open, defaultOpen, onOpenChange, placement, dismissLabel, autoFocus, width, className, }: CoachmarkProps): import("react").JSX.Element | null;

package/dist/components/Tour/Tour.types.d.cts

@@ -0,0 +1,119 @@
+import type { CSSProperties, KeyboardEvent, ReactNode, RefObject } from "react";
+import type { Placement } from "../../hooks/useFloating.cjs";
+/** What a step points at: a CSS selector, a ref, or a function that returns the element. */
+export type TourTarget = string | RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
+export interface TourStep {
+    /** The part of the page this step is about. Leave it out (or point at something that isn't there) and the step
+     * shows in the middle of the window, like a dialog: for a welcome or a last word. */
+    target?: TourTarget;
+    /** A few words that name the step. It names the card for screen readers too. */
+    title: ReactNode;
+    /** A sentence or two about the target. */
+    content?: ReactNode;
+    /** Where the card opens beside the target; it flips when there's no room.
+     * @default "bottom" */
+    placement?: Placement;
+}
+export interface TourLabels {
+    /** @default "Back" */
+    back?: string;
+    /** @default "Next" */
+    next?: string;
+    /** The last step's button. @default "Done" */
+    done?: string;
+    /** The ✕ in the corner, for screen readers. @default "Skip tour" */
+    skip?: string;
+    /** The count in the corner of the card.
+     * @default (step, total) => `Step ${step} of ${total}` */
+    progress?(step: number, total: number): string;
+}
+export interface TourProps {
+    /** The steps, in order. */
+    steps: TourStep[];
+    /** Shown, when you control it. */
+    open?: boolean;
+    /** Shown at first, when it controls itself.
+     * @default false */
+    defaultOpen?: boolean;
+    /** Called when it opens or closes (Done, the ✕ or Escape). */
+    onOpenChange?(open: boolean): void;
+    /** The step showing, from 0, when you control it. */
+    step?: number;
+    /** The step it starts on, and goes back to after it closes, when it controls itself.
+     * @default 0 */
+    defaultStep?: number;
+    /** Called with the new step's index on Back and Next. */
+    onStepChange?(step: number): void;
+    /** Called when the person presses Done on the last step. */
+    onComplete?(): void;
+    /** Called with the step's index when the person leaves early, with the ✕ or Escape. */
+    onSkip?(step: number): void;
+    /** Dims the page around the target, leaving a hole over it. The page still takes clicks and Tab: it's a cue, not a wall.
+     * @default false */
+    spotlight?: boolean;
+    /** Room around the target inside the spotlight's hole, in pixels.
+     * @default 6 */
+    spotlightPadding?: number;
+    /** The card's width: pixels, or any CSS width.
+     * @default 320 */
+    width?: number | string;
+    /** The words it uses, for other languages. */
+    labels?: TourLabels;
+    className?: string;
+}
+export interface CoachmarkProps {
+    /** What it points at: a CSS selector, a ref, or a function that returns the element. */
+    target: TourTarget;
+    /** A few words. It names the card for screen readers too. */
+    title: ReactNode;
+    /** A sentence about the target. */
+    content?: ReactNode;
+    /** Shown, when you control it. */
+    open?: boolean;
+    /** Shown at first, when it controls itself.
+     * @default true */
+    defaultOpen?: boolean;
+    /** Called when it opens or is dismissed. */
+    onOpenChange?(open: boolean): void;
+    /** Where it opens beside the target; it flips when there's no room.
+     * @default "bottom" */
+    placement?: Placement;
+    /** The button that dismisses it.
+     * @default "Got it" */
+    dismissLabel?: string;
+    /** Moves focus into it when it opens. Leave it off for a hint that shows on load, so it doesn't pull focus away;
+     * turn it on when it opens because of something the person did.
+     * @default false */
+    autoFocus?: boolean;
+    /** The card's width: pixels, or any CSS width.
+     * @default 280 */
+    width?: number | string;
+    className?: string;
+}
+/** Internal: what Tour and Coachmark pass to the card they share. */
+export interface TourCardOptions {
+    open: boolean;
+    target: TourTarget | undefined;
+    placement: Placement;
+    /** Changes on every step, so focus moves into the card again. */
+    stepKey: number;
+    spotlight: boolean;
+    spotlightPadding: number;
+    autoFocus: boolean;
+    width: number | string;
+}
+/** Internal: the card's parts. */
+export interface TourCardProps {
+    cardRef: RefObject<HTMLDivElement>;
+    id: string;
+    state: "open" | "closed";
+    centred: boolean;
+    style: CSSProperties;
+    className?: string;
+    title: ReactNode;
+    content?: ReactNode;
+    close?: ReactNode;
+    progress?: string;
+    actions: ReactNode;
+    onKeyDown(event: KeyboardEvent<HTMLDivElement>): void;
+}

package/dist/components/Tour/Tour.types.d.ts

@@ -0,0 +1,119 @@
+import type { CSSProperties, KeyboardEvent, ReactNode, RefObject } from "react";
+import type { Placement } from "../../hooks/useFloating.js";
+/** What a step points at: a CSS selector, a ref, or a function that returns the element. */
+export type TourTarget = string | RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
+export interface TourStep {
+    /** The part of the page this step is about. Leave it out (or point at something that isn't there) and the step
+     * shows in the middle of the window, like a dialog: for a welcome or a last word. */
+    target?: TourTarget;
+    /** A few words that name the step. It names the card for screen readers too. */
+    title: ReactNode;
+    /** A sentence or two about the target. */
+    content?: ReactNode;
+    /** Where the card opens beside the target; it flips when there's no room.
+     * @default "bottom" */
+    placement?: Placement;
+}
+export interface TourLabels {
+    /** @default "Back" */
+    back?: string;
+    /** @default "Next" */
+    next?: string;
+    /** The last step's button. @default "Done" */
+    done?: string;
+    /** The ✕ in the corner, for screen readers. @default "Skip tour" */
+    skip?: string;
+    /** The count in the corner of the card.
+     * @default (step, total) => `Step ${step} of ${total}` */
+    progress?(step: number, total: number): string;
+}
+export interface TourProps {
+    /** The steps, in order. */
+    steps: TourStep[];
+    /** Shown, when you control it. */
+    open?: boolean;
+    /** Shown at first, when it controls itself.
+     * @default false */
+    defaultOpen?: boolean;
+    /** Called when it opens or closes (Done, the ✕ or Escape). */
+    onOpenChange?(open: boolean): void;
+    /** The step showing, from 0, when you control it. */
+    step?: number;
+    /** The step it starts on, and goes back to after it closes, when it controls itself.
+     * @default 0 */
+    defaultStep?: number;
+    /** Called with the new step's index on Back and Next. */
+    onStepChange?(step: number): void;
+    /** Called when the person presses Done on the last step. */
+    onComplete?(): void;
+    /** Called with the step's index when the person leaves early, with the ✕ or Escape. */
+    onSkip?(step: number): void;
+    /** Dims the page around the target, leaving a hole over it. The page still takes clicks and Tab: it's a cue, not a wall.
+     * @default false */
+    spotlight?: boolean;
+    /** Room around the target inside the spotlight's hole, in pixels.
+     * @default 6 */
+    spotlightPadding?: number;
+    /** The card's width: pixels, or any CSS width.
+     * @default 320 */
+    width?: number | string;
+    /** The words it uses, for other languages. */
+    labels?: TourLabels;
+    className?: string;
+}
+export interface CoachmarkProps {
+    /** What it points at: a CSS selector, a ref, or a function that returns the element. */
+    target: TourTarget;
+    /** A few words. It names the card for screen readers too. */
+    title: ReactNode;
+    /** A sentence about the target. */
+    content?: ReactNode;
+    /** Shown, when you control it. */
+    open?: boolean;
+    /** Shown at first, when it controls itself.
+     * @default true */
+    defaultOpen?: boolean;
+    /** Called when it opens or is dismissed. */
+    onOpenChange?(open: boolean): void;
+    /** Where it opens beside the target; it flips when there's no room.
+     * @default "bottom" */
+    placement?: Placement;
+    /** The button that dismisses it.
+     * @default "Got it" */
+    dismissLabel?: string;
+    /** Moves focus into it when it opens. Leave it off for a hint that shows on load, so it doesn't pull focus away;
+     * turn it on when it opens because of something the person did.
+     * @default false */
+    autoFocus?: boolean;
+    /** The card's width: pixels, or any CSS width.
+     * @default 280 */
+    width?: number | string;
+    className?: string;
+}
+/** Internal: what Tour and Coachmark pass to the card they share. */
+export interface TourCardOptions {
+    open: boolean;
+    target: TourTarget | undefined;
+    placement: Placement;
+    /** Changes on every step, so focus moves into the card again. */
+    stepKey: number;
+    spotlight: boolean;
+    spotlightPadding: number;
+    autoFocus: boolean;
+    width: number | string;
+}
+/** Internal: the card's parts. */
+export interface TourCardProps {
+    cardRef: RefObject<HTMLDivElement>;
+    id: string;
+    state: "open" | "closed";
+    centred: boolean;
+    style: CSSProperties;
+    className?: string;
+    title: ReactNode;
+    content?: ReactNode;
+    close?: ReactNode;
+    progress?: string;
+    actions: ReactNode;
+    onKeyDown(event: KeyboardEvent<HTMLDivElement>): void;
+}