@openwarelabs/ui 0.12.2 → 0.14.0

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/Table/Table.d.cts

@@ -1,60 +1,4 @@
-import { type Key, type ReactNode } from "react";
-export interface TableColumn<Row> {
-    /** Unique; also the row field shown when there's no `render`. */
-    key: string;
-    header: ReactNode;
-    /** Numbers and amounts go at the end, so their digits line up.
-     * @default "start" */
-    align?: "start" | "center" | "end";
-    /** A CSS width, e.g. 120 or "30%". */
-    width?: number | string;
-    /** Lets the person sort by this column. */
-    sortable?: boolean;
-    /** What the cell shows. Defaults to the row's field named by `key`. */
-    render?(row: Row): ReactNode;
-    /** The value sorted by, when it isn't the field itself. */
-    sortValue?(row: Row): string | number;
-}
-export interface TableSort {
-    key: string;
-    direction: "ascending" | "descending";
-}
-export interface TableProps<Row> {
-    columns: Array<TableColumn<Row>>;
-    rows: Row[];
-    /** A field name or function giving each row a unique key.
-     * @default "id" */
-    rowKey?: keyof Row | ((row: Row) => Key);
-    /** Describes the table for screen readers; shown above it unless `hideCaption`. */
-    caption?: ReactNode;
-    /** @default false */
-    hideCaption?: boolean;
-    sort?: TableSort;
-    defaultSort?: TableSort;
-    onSortChange?(sort: TableSort): void;
-    /** Sort the rows yourself (e.g. on a server) and only show the arrows.
-     * @default false */
-    manualSort?: boolean;
-    /** Adds a checkbox column.
-     * @default "none" */
-    selectionMode?: "none" | "multiple";
-    selectedKeys?: Key[];
-    defaultSelectedKeys?: Key[];
-    onSelectionChange?(keys: Key[]): void;
-    /**
-     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
-     * first column's value when it's text or a number, else "row 3".
-     */
-    rowLabel?(row: Row): string;
-    /** Shown in place of the rows when there are none, such as an EmptyState. */
-    emptyContent?: ReactNode;
-    /** `compact` rows are 36px; `comfortable` 44px.
-     * @default "comfortable" */
-    density?: "compact" | "comfortable";
-    /** Keeps the header in view while the table scrolls; use with maxHeight. */
-    stickyHeader?: boolean;
-    maxHeight?: number | string;
-    className?: string;
-}
-/** Rows of records with sortable columns and optional selection, in a bordered card. */
-export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;
+import type { TableProps } from "./Table.types.cjs";
+export type { TableColumn, TableProps, TableSort } from "./Table.types.cjs";
+/** Rows of records with sortable columns and optional selection: on a raised panel in a tray, or in a bordered card. */
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, variant, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -1,60 +1,4 @@
-import { type Key, type ReactNode } from "react";
-export interface TableColumn<Row> {
-    /** Unique; also the row field shown when there's no `render`. */
-    key: string;
-    header: ReactNode;
-    /** Numbers and amounts go at the end, so their digits line up.
-     * @default "start" */
-    align?: "start" | "center" | "end";
-    /** A CSS width, e.g. 120 or "30%". */
-    width?: number | string;
-    /** Lets the person sort by this column. */
-    sortable?: boolean;
-    /** What the cell shows. Defaults to the row's field named by `key`. */
-    render?(row: Row): ReactNode;
-    /** The value sorted by, when it isn't the field itself. */
-    sortValue?(row: Row): string | number;
-}
-export interface TableSort {
-    key: string;
-    direction: "ascending" | "descending";
-}
-export interface TableProps<Row> {
-    columns: Array<TableColumn<Row>>;
-    rows: Row[];
-    /** A field name or function giving each row a unique key.
-     * @default "id" */
-    rowKey?: keyof Row | ((row: Row) => Key);
-    /** Describes the table for screen readers; shown above it unless `hideCaption`. */
-    caption?: ReactNode;
-    /** @default false */
-    hideCaption?: boolean;
-    sort?: TableSort;
-    defaultSort?: TableSort;
-    onSortChange?(sort: TableSort): void;
-    /** Sort the rows yourself (e.g. on a server) and only show the arrows.
-     * @default false */
-    manualSort?: boolean;
-    /** Adds a checkbox column.
-     * @default "none" */
-    selectionMode?: "none" | "multiple";
-    selectedKeys?: Key[];
-    defaultSelectedKeys?: Key[];
-    onSelectionChange?(keys: Key[]): void;
-    /**
-     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
-     * first column's value when it's text or a number, else "row 3".
-     */
-    rowLabel?(row: Row): string;
-    /** Shown in place of the rows when there are none, such as an EmptyState. */
-    emptyContent?: ReactNode;
-    /** `compact` rows are 36px; `comfortable` 44px.
-     * @default "comfortable" */
-    density?: "compact" | "comfortable";
-    /** Keeps the header in view while the table scrolls; use with maxHeight. */
-    stickyHeader?: boolean;
-    maxHeight?: number | string;
-    className?: string;
-}
-/** Rows of records with sortable columns and optional selection, in a bordered card. */
-export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;
+import type { TableProps } from "./Table.types.js";
+export type { TableColumn, TableProps, TableSort } from "./Table.types.js";
+/** Rows of records with sortable columns and optional selection: on a raised panel in a tray, or in a bordered card. */
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, variant, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

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

@@ -0,0 +1,64 @@
+import type { Key, ReactNode } from "react";
+export interface TableColumn<Row> {
+    /** Unique; also the row field shown when there's no `render`. */
+    key: string;
+    header: ReactNode;
+    /** Numbers and amounts go at the end, so their digits line up.
+     * @default "start" */
+    align?: "start" | "center" | "end";
+    /** A CSS width, e.g. 120 or "30%". */
+    width?: number | string;
+    /** Lets the person sort by this column. */
+    sortable?: boolean;
+    /** What the cell shows. Defaults to the row's field named by `key`. */
+    render?(row: Row): ReactNode;
+    /** The value sorted by, when it isn't the field itself. */
+    sortValue?(row: Row): string | number;
+}
+export interface TableSort {
+    key: string;
+    direction: "ascending" | "descending";
+}
+export interface TableProps<Row> {
+    columns: Array<TableColumn<Row>>;
+    rows: Row[];
+    /** A field name or function giving each row a unique key.
+     * @default "id" */
+    rowKey?: keyof Row | ((row: Row) => Key);
+    /** Describes the table for screen readers; shown above it unless `hideCaption`. */
+    caption?: ReactNode;
+    /** @default false */
+    hideCaption?: boolean;
+    sort?: TableSort;
+    defaultSort?: TableSort;
+    onSortChange?(sort: TableSort): void;
+    /** Sort the rows yourself (e.g. on a server) and only show the arrows.
+     * @default false */
+    manualSort?: boolean;
+    /** Adds a checkbox column.
+     * @default "none" */
+    selectionMode?: "none" | "multiple";
+    selectedKeys?: Key[];
+    defaultSelectedKeys?: Key[];
+    onSelectionChange?(keys: Key[]): void;
+    /**
+     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
+     * first column's value when it's text or a number, else "row 3".
+     */
+    rowLabel?(row: Row): string;
+    /** Shown in place of the rows when there are none, such as an EmptyState. */
+    emptyContent?: ReactNode;
+    /**
+     * `inset` sets the rows on a raised panel inside a tinted tray, with the header in the tray above them; `plain` is
+     * one bordered card with a shaded header row.
+     * @default "inset"
+     */
+    variant?: "inset" | "plain";
+    /** `compact` rows are 36px; `comfortable` 44px.
+     * @default "comfortable" */
+    density?: "compact" | "comfortable";
+    /** Keeps the header in view while the table scrolls; use with maxHeight. */
+    stickyHeader?: boolean;
+    maxHeight?: number | string;
+    className?: string;
+}

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

@@ -0,0 +1,64 @@
+import type { Key, ReactNode } from "react";
+export interface TableColumn<Row> {
+    /** Unique; also the row field shown when there's no `render`. */
+    key: string;
+    header: ReactNode;
+    /** Numbers and amounts go at the end, so their digits line up.
+     * @default "start" */
+    align?: "start" | "center" | "end";
+    /** A CSS width, e.g. 120 or "30%". */
+    width?: number | string;
+    /** Lets the person sort by this column. */
+    sortable?: boolean;
+    /** What the cell shows. Defaults to the row's field named by `key`. */
+    render?(row: Row): ReactNode;
+    /** The value sorted by, when it isn't the field itself. */
+    sortValue?(row: Row): string | number;
+}
+export interface TableSort {
+    key: string;
+    direction: "ascending" | "descending";
+}
+export interface TableProps<Row> {
+    columns: Array<TableColumn<Row>>;
+    rows: Row[];
+    /** A field name or function giving each row a unique key.
+     * @default "id" */
+    rowKey?: keyof Row | ((row: Row) => Key);
+    /** Describes the table for screen readers; shown above it unless `hideCaption`. */
+    caption?: ReactNode;
+    /** @default false */
+    hideCaption?: boolean;
+    sort?: TableSort;
+    defaultSort?: TableSort;
+    onSortChange?(sort: TableSort): void;
+    /** Sort the rows yourself (e.g. on a server) and only show the arrows.
+     * @default false */
+    manualSort?: boolean;
+    /** Adds a checkbox column.
+     * @default "none" */
+    selectionMode?: "none" | "multiple";
+    selectedKeys?: Key[];
+    defaultSelectedKeys?: Key[];
+    onSelectionChange?(keys: Key[]): void;
+    /**
+     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
+     * first column's value when it's text or a number, else "row 3".
+     */
+    rowLabel?(row: Row): string;
+    /** Shown in place of the rows when there are none, such as an EmptyState. */
+    emptyContent?: ReactNode;
+    /**
+     * `inset` sets the rows on a raised panel inside a tinted tray, with the header in the tray above them; `plain` is
+     * one bordered card with a shaded header row.
+     * @default "inset"
+     */
+    variant?: "inset" | "plain";
+    /** `compact` rows are 36px; `comfortable` 44px.
+     * @default "comfortable" */
+    density?: "compact" | "comfortable";
+    /** Keeps the header in view while the table scrolls; use with maxHeight. */
+    stickyHeader?: boolean;
+    maxHeight?: number | string;
+    className?: string;
+}

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;