@openwarelabs/ui 0.3.1 → 0.5.0

package/dist/components/PromptInput/PromptInput.d.ts

@@ -0,0 +1,95 @@
+import { type KeyboardEvent, type ReactNode } from "react";
+/** A file attached to the message, shown as a chip above the text. */
+export interface PromptAttachment {
+    /** Identifies it to onRemoveAttachment, and keys its chip. */
+    id: string;
+    /** The file name, shown on the chip (a long one is cut short before its extension) and read out by its remove button. */
+    name: string;
+    /** Bytes, shown under the name: "48 kB". */
+    size?: number;
+    /** The MIME type, such as "image/png". With the name, it picks the chip's icon when there's no preview. */
+    type?: string;
+    /** An image to show as the chip's thumbnail: an object URL from URL.createObjectURL, or any image URL. */
+    previewUrl?: string;
+}
+export interface PromptInputProps {
+    /** The text, when controlled. Clear it yourself in onSubmit. */
+    value?: string;
+    /** The starting text when uncontrolled. The box clears itself after each send.
+     * @default "" */
+    defaultValue?: string;
+    /** Called with the text on every change. */
+    onChange?(value: string): void;
+    /**
+     * Called on Enter or the send button with the text (trimmed) and the attachments. It isn't called while there's
+     * nothing to send (no text and no attachments), while streaming, or while disabled.
+     */
+    onSubmit?(value: string, attachments: PromptAttachment[]): void;
+    /** The agent is replying: the send button becomes a Stop button and Escape in the box stops it. The next message can
+     * be typed meanwhile, but not sent.
+     * @default false */
+    isStreaming?: boolean;
+    /** Called by the Stop button, and by Escape in the box, while streaming. */
+    onStop?(): void;
+    /** The files attached so far, as chips above the text. You keep the list: add to it in onAttach and take from it in
+     * onRemoveAttachment. */
+    attachments?: PromptAttachment[];
+    /** Called with the files picked with the paperclip, pasted, or dropped on the box. Giving it shows the paperclip. */
+    onAttach?(files: File[]): void;
+    /** Called with an attachment's id when its remove button is pressed. Giving it shows the remove buttons. */
+    onRemoveAttachment?(id: string): void;
+    /** File types to accept, as for <input accept>: "image/*,.log,.txt". Other files are turned away with a message. */
+    accept?: string;
+    /** Lets several files be attached at once.
+     * @default true */
+    multiple?: boolean;
+    /** Controls at the start of the toolbar under the text, after the paperclip: a model Select, a toggle. Buttons here
+     * should be size sm. */
+    startActions?: ReactNode;
+    /** Controls at the end of the toolbar, before the send button. */
+    endActions?: ReactNode;
+    /** A muted line under the box, such as how to send: "Enter to send, Shift + Enter for a new line". The text box
+     * points to it with aria-describedby. */
+    hint?: ReactNode;
+    /** @default "Message the agent…" */
+    placeholder?: string;
+    /** Names the text box for screen readers. It's "Message" unless something else labels it: aria-labelledby, or an id
+     * that a <label> points to, as in a Field. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** The text box's id. Field sets it. */
+    id?: string;
+    /** Marks the box invalid: a danger border, and aria-invalid on the text box. Field sets it from its error.
+     * @default false */
+    isInvalid?: boolean;
+    /** Turns off the text box, its buttons and the controls in the toolbar, and fades the box.
+     * @default false */
+    disabled?: boolean;
+    /** Focuses the text box when it appears. Use it where typing is plainly the next step, such as a new chat.
+     * @default false */
+    autoFocus?: boolean;
+    /** The most characters the text can have. A quiet count shows once it's 80% full. */
+    maxLength?: number;
+    /** The rows of text the box shows when it's empty.
+     * @default 1 */
+    minRows?: number;
+    /** The most rows it grows to; past that, the text scrolls.
+     * @default 8 */
+    maxRows?: number;
+    /** md for a chat page, sm for a side panel or a reply box.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** The locale for attachment sizes and the character count, such as "de-CH". Defaults to the browser's. */
+    locale?: string;
+    /** Called for each key in the text box before the box's own keys. Call event.preventDefault() to take a key over, for
+     * example the Up arrow to edit the last message. */
+    onKeyDown?(event: KeyboardEvent<HTMLTextAreaElement>): void;
+    /** Classes for the outer element, which holds the box and the hint. */
+    className?: string;
+}
+/**
+ * The box you write to the agent in. Enter sends and Shift+Enter starts a new line; it grows with the text, takes files
+ * from a picker, the clipboard or a drop, and turns its send button into Stop while the agent replies.
+ */
+export declare const PromptInput: import("react").ForwardRefExoticComponent<PromptInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/PromptInput/PromptSuggestion.d.cts

@@ -0,0 +1,36 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+export interface PromptSuggestionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** The suggested prompt, or a short title for it. Keep it to a few words on a pill. */
+    children: ReactNode;
+    /** A 16px lucide-react icon before the text. */
+    icon?: ReactNode;
+    /** A muted second line under the text, saying what the agent will do. Shown on cards. */
+    description?: ReactNode;
+    /** `pill` for a row of short prompts; `card` for a few larger starting points, each with a description.
+     * @default "card" with a description, otherwise "pill" */
+    variant?: "pill" | "card";
+}
+/**
+ * A suggested prompt to start from: a quiet pill, or a card with a second line. It's a button: what it does on click,
+ * filling the prompt box or sending at once, is up to you.
+ */
+export declare const PromptSuggestion: import("react").ForwardRefExoticComponent<PromptSuggestionProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface PromptSuggestionsProps extends HTMLAttributes<HTMLDivElement> {
+    /** PromptSuggestion buttons. */
+    children: ReactNode;
+    /** `wrap` runs pills along a line and onto the next; `grid` sets cards in equal columns that fold to one when
+     * there's no room.
+     * @default "wrap" */
+    layout?: "wrap" | "grid";
+    /** The most columns in a grid. Columns are at least 200px wide, so a narrow grid has fewer.
+     * @default 2 */
+    columns?: number;
+    /** Where wrapped pills line up.
+     * @default "start" */
+    align?: "start" | "center";
+    /** Names the set for screen readers.
+     * @default "Suggested prompts" */
+    "aria-label"?: string;
+}
+/** Suggested prompts, as a labelled group: pills that wrap, or cards in a grid. */
+export declare function PromptSuggestions({ children, layout, columns, align, "aria-label": ariaLabel, className, style, ...props }: PromptSuggestionsProps): import("react").JSX.Element;

package/dist/components/PromptInput/PromptSuggestion.d.ts

@@ -0,0 +1,36 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+export interface PromptSuggestionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** The suggested prompt, or a short title for it. Keep it to a few words on a pill. */
+    children: ReactNode;
+    /** A 16px lucide-react icon before the text. */
+    icon?: ReactNode;
+    /** A muted second line under the text, saying what the agent will do. Shown on cards. */
+    description?: ReactNode;
+    /** `pill` for a row of short prompts; `card` for a few larger starting points, each with a description.
+     * @default "card" with a description, otherwise "pill" */
+    variant?: "pill" | "card";
+}
+/**
+ * A suggested prompt to start from: a quiet pill, or a card with a second line. It's a button: what it does on click,
+ * filling the prompt box or sending at once, is up to you.
+ */
+export declare const PromptSuggestion: import("react").ForwardRefExoticComponent<PromptSuggestionProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface PromptSuggestionsProps extends HTMLAttributes<HTMLDivElement> {
+    /** PromptSuggestion buttons. */
+    children: ReactNode;
+    /** `wrap` runs pills along a line and onto the next; `grid` sets cards in equal columns that fold to one when
+     * there's no room.
+     * @default "wrap" */
+    layout?: "wrap" | "grid";
+    /** The most columns in a grid. Columns are at least 200px wide, so a narrow grid has fewer.
+     * @default 2 */
+    columns?: number;
+    /** Where wrapped pills line up.
+     * @default "start" */
+    align?: "start" | "center";
+    /** Names the set for screen readers.
+     * @default "Suggested prompts" */
+    "aria-label"?: string;
+}
+/** Suggested prompts, as a labelled group: pills that wrap, or cards in a grid. */
+export declare function PromptSuggestions({ children, layout, columns, align, "aria-label": ariaLabel, className, style, ...props }: PromptSuggestionsProps): import("react").JSX.Element;

package/dist/components/Prose/Prose.d.cts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+    /** sm sets 14px interface text with a tight rhythm and modest headings, for chat answers and comments. md sets the prose
+     * style (16.5px, 1.7 leading) with headings from the type scale, for articles and docs.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Drops the readable width (about 68 characters a line at md) so the text runs the full width of its container. sm has no
+     * maximum width to drop.
+     * @default false */
+    fullWidth?: boolean;
+    /** The element: article for a post, section for part of a page.
+     * @default "div" */
+    as?: "div" | "article" | "section" | "main" | "aside";
+    /** Plain HTML elements to style: what a Markdown renderer, a CMS or a server gives back. */
+    children?: ReactNode;
+}
+/**
+ * Styles content you don't write element by element: Markdown rendered to HTML, a CMS body, an agent's answer. It sets
+ * the plain elements inside it (headings, paragraphs, lists, quotes, code, tables, images, details) in Openware's type
+ * and colours, and leaves Openware components inside it as they are.
+ */
+export declare const Prose: import("react").ForwardRefExoticComponent<ProseProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Prose/Prose.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+    /** sm sets 14px interface text with a tight rhythm and modest headings, for chat answers and comments. md sets the prose
+     * style (16.5px, 1.7 leading) with headings from the type scale, for articles and docs.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Drops the readable width (about 68 characters a line at md) so the text runs the full width of its container. sm has no
+     * maximum width to drop.
+     * @default false */
+    fullWidth?: boolean;
+    /** The element: article for a post, section for part of a page.
+     * @default "div" */
+    as?: "div" | "article" | "section" | "main" | "aside";
+    /** Plain HTML elements to style: what a Markdown renderer, a CMS or a server gives back. */
+    children?: ReactNode;
+}
+/**
+ * Styles content you don't write element by element: Markdown rendered to HTML, a CMS body, an agent's answer. It sets
+ * the plain elements inside it (headings, paragraphs, lists, quotes, code, tables, images, details) in Openware's type
+ * and colours, and leaves Openware components inside it as they are.
+ */
+export declare const Prose: import("react").ForwardRefExoticComponent<ProseProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Slider/Slider.d.cts

@@ -22,6 +22,12 @@ export interface SliderProps<V extends SliderValue = number> {
     formatValue?(value: number): string;
     /** Names the slider when there's no visible label. */
     "aria-label"?: string;
+    /** Names the slider by another element's id, such as a Field's label. */
+    "aria-labelledby"?: string;
+    /** Ids of the hint or error that describe it; Field sets this. */
+    "aria-describedby"?: string;
+    /** The id of the (first) handle's input, so a Field's label points at it; Field sets this. */
+    id?: string;
     disabled?: boolean;
     className?: string;
 }
@@ -29,5 +35,5 @@ export interface SliderProps<V extends SliderValue = number> {
  * Picks a number, or a range, by dragging. It's built on native range inputs, so the arrow keys,
  * PageUp, PageDown, Home and End work as people expect.
  */
-export declare function Slider<V extends SliderValue = number>({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, "aria-label": ariaLabel, disabled, className, }: SliderProps<V>): import("react").JSX.Element;
+export declare function Slider<V extends SliderValue = number>({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, disabled, className, }: SliderProps<V>): import("react").JSX.Element;
 export {};

package/dist/components/Slider/Slider.d.ts

@@ -22,6 +22,12 @@ export interface SliderProps<V extends SliderValue = number> {
     formatValue?(value: number): string;
     /** Names the slider when there's no visible label. */
     "aria-label"?: string;
+    /** Names the slider by another element's id, such as a Field's label. */
+    "aria-labelledby"?: string;
+    /** Ids of the hint or error that describe it; Field sets this. */
+    "aria-describedby"?: string;
+    /** The id of the (first) handle's input, so a Field's label points at it; Field sets this. */
+    id?: string;
     disabled?: boolean;
     className?: string;
 }
@@ -29,5 +35,5 @@ export interface SliderProps<V extends SliderValue = number> {
  * Picks a number, or a range, by dragging. It's built on native range inputs, so the arrow keys,
  * PageUp, PageDown, Home and End work as people expect.
  */
-export declare function Slider<V extends SliderValue = number>({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, "aria-label": ariaLabel, disabled, className, }: SliderProps<V>): import("react").JSX.Element;
+export declare function Slider<V extends SliderValue = number>({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, disabled, className, }: SliderProps<V>): import("react").JSX.Element;
 export {};

package/dist/components/TextShimmer/TextShimmer.d.cts

@@ -0,0 +1,20 @@
+import type { JSX, ReactNode } from "react";
+export interface TextShimmerProps {
+    /** The words that shimmer, usually a status ending in an ellipsis: "Thinking…", "Running tests…". */
+    children: ReactNode;
+    /** The element, so it can sit in a heading or a paragraph.
+     * @default "span" */
+    as?: keyof JSX.IntrinsicElements;
+    /** Seconds for the highlight to cross the text once.
+     * @default 2 */
+    duration?: number;
+    /** Stops the shimmer and shows the text plainly, e.g. once the step has finished.
+     * @default true */
+    active?: boolean;
+    className?: string;
+}
+/**
+ * Text with a highlight sweeping across it, for work in progress: "Thinking…", "Searching the codebase…". It's plain
+ * text to screen readers, and stands still when the person prefers reduced motion.
+ */
+export declare function TextShimmer({ children, as, duration, active, className }: TextShimmerProps): JSX.Element;

package/dist/components/TextShimmer/TextShimmer.d.ts

@@ -0,0 +1,20 @@
+import type { JSX, ReactNode } from "react";
+export interface TextShimmerProps {
+    /** The words that shimmer, usually a status ending in an ellipsis: "Thinking…", "Running tests…". */
+    children: ReactNode;
+    /** The element, so it can sit in a heading or a paragraph.
+     * @default "span" */
+    as?: keyof JSX.IntrinsicElements;
+    /** Seconds for the highlight to cross the text once.
+     * @default 2 */
+    duration?: number;
+    /** Stops the shimmer and shows the text plainly, e.g. once the step has finished.
+     * @default true */
+    active?: boolean;
+    className?: string;
+}
+/**
+ * Text with a highlight sweeping across it, for work in progress: "Thinking…", "Searching the codebase…". It's plain
+ * text to screen readers, and stands still when the person prefers reduced motion.
+ */
+export declare function TextShimmer({ children, as, duration, active, className }: TextShimmerProps): JSX.Element;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.cts

@@ -0,0 +1,74 @@
+import { type ReactNode } from "react";
+export interface ToggleButtonGroupOption {
+    /** Identifies the option in `value`. */
+    value: string;
+    /** The visible text. Leave it out for an icon-only option, and give that an aria-label. */
+    label?: ReactNode;
+    /** A 16px icon before the label, or on its own. */
+    icon?: ReactNode;
+    /** Names an icon-only option for screen readers; a tooltip shows the same words. */
+    "aria-label"?: string;
+    /** Greys the option out; the arrow keys skip it.
+     * @default false */
+    disabled?: boolean;
+}
+export interface ToggleButtonGroupProps {
+    /** The toggles, in order. */
+    options: ToggleButtonGroupOption[];
+    /** `multiple` lets any number be on, like bold and italic; `single` allows at most one, like an alignment.
+     * Either way all can be off, unless `disallowEmptySelection`.
+     * @default "single" */
+    selectionMode?: "single" | "multiple";
+    /** What's on: in single mode a value, or "" for none; in multiple mode an array of values. Leave it out to let the
+     * group keep its own state. */
+    value?: string | string[];
+    /** The starting value when uncontrolled.
+     * @default "" or [] */
+    defaultValue?: string | string[];
+    /** Called with the new value: a string ("" for none) in single mode, an array in the options' order in multiple mode. */
+    onChange?(value: string | string[]): void;
+    /** Keeps one option on: pressing the only one that's on leaves it on.
+     * @default false */
+    disallowEmptySelection?: boolean;
+    /** sm 32px, md 40px tall, like Button. Inside a Toolbar it takes the toolbar's size.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Inside a Toolbar it takes the toolbar's orientation.
+     * @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Disables every option, keeping what's on visible.
+     * @default false */
+    disabled?: boolean;
+    /** Names the group for screen readers, e.g. "Text style". */
+    "aria-label"?: string;
+    /** The id of a visible label for the group, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** The id of a hint or description for the group. */
+    "aria-describedby"?: string;
+    /** An id for the group's element. */
+    id?: string;
+    /** Extra classes for the group. */
+    className?: string;
+}
+type SharedProps = Omit<ToggleButtonGroupProps, "selectionMode" | "value" | "defaultValue" | "onChange">;
+/** The props in single mode: `value` is one option's value, or "" when none is on. */
+export type ToggleButtonGroupSingleProps = SharedProps & {
+    selectionMode?: "single";
+    value?: string;
+    defaultValue?: string;
+    onChange?(value: string): void;
+};
+/** The props in multiple mode: `value` is the values of the options that are on. */
+export type ToggleButtonGroupMultipleProps = SharedProps & {
+    selectionMode: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onChange?(value: string[]): void;
+};
+/**
+ * Toggle buttons joined into one control: several can be on (bold, italic, underline) or at most one (an alignment),
+ * and, unlike a SegmentedControl, all can be off. On its own it's one tab stop with the arrow keys moving between its
+ * buttons; inside a Toolbar it leaves the arrow keys to the toolbar.
+ */
+export declare function ToggleButtonGroup(props: ToggleButtonGroupSingleProps | ToggleButtonGroupMultipleProps): import("react").JSX.Element;
+export {};

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,74 @@
+import { type ReactNode } from "react";
+export interface ToggleButtonGroupOption {
+    /** Identifies the option in `value`. */
+    value: string;
+    /** The visible text. Leave it out for an icon-only option, and give that an aria-label. */
+    label?: ReactNode;
+    /** A 16px icon before the label, or on its own. */
+    icon?: ReactNode;
+    /** Names an icon-only option for screen readers; a tooltip shows the same words. */
+    "aria-label"?: string;
+    /** Greys the option out; the arrow keys skip it.
+     * @default false */
+    disabled?: boolean;
+}
+export interface ToggleButtonGroupProps {
+    /** The toggles, in order. */
+    options: ToggleButtonGroupOption[];
+    /** `multiple` lets any number be on, like bold and italic; `single` allows at most one, like an alignment.
+     * Either way all can be off, unless `disallowEmptySelection`.
+     * @default "single" */
+    selectionMode?: "single" | "multiple";
+    /** What's on: in single mode a value, or "" for none; in multiple mode an array of values. Leave it out to let the
+     * group keep its own state. */
+    value?: string | string[];
+    /** The starting value when uncontrolled.
+     * @default "" or [] */
+    defaultValue?: string | string[];
+    /** Called with the new value: a string ("" for none) in single mode, an array in the options' order in multiple mode. */
+    onChange?(value: string | string[]): void;
+    /** Keeps one option on: pressing the only one that's on leaves it on.
+     * @default false */
+    disallowEmptySelection?: boolean;
+    /** sm 32px, md 40px tall, like Button. Inside a Toolbar it takes the toolbar's size.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Inside a Toolbar it takes the toolbar's orientation.
+     * @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Disables every option, keeping what's on visible.
+     * @default false */
+    disabled?: boolean;
+    /** Names the group for screen readers, e.g. "Text style". */
+    "aria-label"?: string;
+    /** The id of a visible label for the group, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** The id of a hint or description for the group. */
+    "aria-describedby"?: string;
+    /** An id for the group's element. */
+    id?: string;
+    /** Extra classes for the group. */
+    className?: string;
+}
+type SharedProps = Omit<ToggleButtonGroupProps, "selectionMode" | "value" | "defaultValue" | "onChange">;
+/** The props in single mode: `value` is one option's value, or "" when none is on. */
+export type ToggleButtonGroupSingleProps = SharedProps & {
+    selectionMode?: "single";
+    value?: string;
+    defaultValue?: string;
+    onChange?(value: string): void;
+};
+/** The props in multiple mode: `value` is the values of the options that are on. */
+export type ToggleButtonGroupMultipleProps = SharedProps & {
+    selectionMode: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onChange?(value: string[]): void;
+};
+/**
+ * Toggle buttons joined into one control: several can be on (bold, italic, underline) or at most one (an alignment),
+ * and, unlike a SegmentedControl, all can be off. On its own it's one tab stop with the arrow keys moving between its
+ * buttons; inside a Toolbar it leaves the arrow keys to the toolbar.
+ */
+export declare function ToggleButtonGroup(props: ToggleButtonGroupSingleProps | ToggleButtonGroupMultipleProps): import("react").JSX.Element;
+export {};

package/dist/components/Toolbar/Toolbar.d.cts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes } from "react";
+export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the toolbar for screen readers, e.g. "Formatting". Every toolbar needs a name, from this or aria-labelledby. */
+    "aria-label"?: string;
+    /** The id of a visible heading that names the toolbar, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Which way it runs. The arrow keys follow it: Left and Right across a horizontal toolbar, Up and Down a vertical one.
+     * @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** `raised` is a bar of its own: a surface with a hairline border and a soft shadow. `plain` has no ground, for a
+     * toolbar in a card or panel header.
+     * @default "raised" */
+    variant?: "raised" | "plain";
+    /** The bar's padding and gaps, and the size its ToggleButtonGroups and separators take. Give its Buttons the same size.
+     * @default "md" */
+    size?: "sm" | "md";
+}
+export interface ToolbarSeparatorProps {
+    /** Extra classes for the line. */
+    className?: string;
+}
+interface ToolbarContextValue {
+    orientation: "horizontal" | "vertical";
+    size: "sm" | "md";
+}
+/** Lets what's inside a Toolbar follow its orientation and size, and leave the arrow keys to it. */
+export declare const ToolbarContext: import("react").Context<ToolbarContextValue | null>;
+/**
+ * A row of controls for one context: an editor's formatting bar, a table's actions. It's a single tab stop: the
+ * arrow keys move between every control inside it, ToggleButtonGroups' buttons included, and Tab leaves it, coming
+ * back to the control that was focused last.
+ */
+export declare const Toolbar: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A line between groups of controls in a Toolbar, across the toolbar's direction. */
+export declare function ToolbarSeparator({ className }: ToolbarSeparatorProps): import("react").JSX.Element;
+export {};

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes } from "react";
+export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the toolbar for screen readers, e.g. "Formatting". Every toolbar needs a name, from this or aria-labelledby. */
+    "aria-label"?: string;
+    /** The id of a visible heading that names the toolbar, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Which way it runs. The arrow keys follow it: Left and Right across a horizontal toolbar, Up and Down a vertical one.
+     * @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** `raised` is a bar of its own: a surface with a hairline border and a soft shadow. `plain` has no ground, for a
+     * toolbar in a card or panel header.
+     * @default "raised" */
+    variant?: "raised" | "plain";
+    /** The bar's padding and gaps, and the size its ToggleButtonGroups and separators take. Give its Buttons the same size.
+     * @default "md" */
+    size?: "sm" | "md";
+}
+export interface ToolbarSeparatorProps {
+    /** Extra classes for the line. */
+    className?: string;
+}
+interface ToolbarContextValue {
+    orientation: "horizontal" | "vertical";
+    size: "sm" | "md";
+}
+/** Lets what's inside a Toolbar follow its orientation and size, and leave the arrow keys to it. */
+export declare const ToolbarContext: import("react").Context<ToolbarContextValue | null>;
+/**
+ * A row of controls for one context: an editor's formatting bar, a table's actions. It's a single tab stop: the
+ * arrow keys move between every control inside it, ToggleButtonGroups' buttons included, and Tab leaves it, coming
+ * back to the control that was focused last.
+ */
+export declare const Toolbar: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A line between groups of controls in a Toolbar, across the toolbar's direction. */
+export declare function ToolbarSeparator({ className }: ToolbarSeparatorProps): import("react").JSX.Element;
+export {};