@openwarelabs/ui 0.4.0 → 0.5.0

package/dist/components/ChatTool/ChatTool.d.cts

@@ -0,0 +1,89 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * Where a tool call or a step has got to. `approval` waits for a person to approve it; `cancelled` didn't run or didn't
+ * finish because a person denied it or stopped the run.
+ */
+export type ChatToolStatus = "pending" | "running" | "success" | "error" | "approval" | "cancelled";
+/** The round mark before a tool call or a step: a spinner, a check, a cross, a "!", a slash or a hollow ring, with its status as words for screen readers. */
+export declare function ChatStatusMarker({ status, icon }: {
+    status: ChatToolStatus;
+    icon?: ReactNode;
+}): import("react").JSX.Element;
+/** "380 ms", "4.2 s", "12 s", "1 min 12 s", "1 h 4 min": a duration as people say it, with the locale's digits. */
+export declare function formatDuration(ms: number, locale?: string): string;
+/** A duration in a <time> element, so it carries a machine-readable value too. */
+export declare function ChatDuration({ ms, locale, className }: {
+    ms: number;
+    locale?: string;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Open state that follows a status: it opens when `wantsOpen` turns true (an error, a step under way) and closes again
+ * when it turns false, unless the person has opened or closed it themselves since. A controlled `expanded` is left alone.
+ */
+export declare function useStatusExpansion({ expanded, defaultExpanded, onExpandedChange, wantsOpen, closeWhenSettled, initial, }: {
+    expanded: boolean | undefined;
+    defaultExpanded: boolean | undefined;
+    onExpandedChange: ((expanded: boolean) => void) | undefined;
+    wantsOpen: boolean;
+    closeWhenSettled?: boolean;
+    initial?: boolean;
+}): [boolean, () => void];
+/**
+ * A panel that opens and closes under a disclosure button, animating its height (a 0fr → 1fr grid row). Closed, it's
+ * inert: nothing in it can be tabbed to or read out. `bleed` lets focus rings at its edges show past the clip.
+ */
+export declare function ChatCollapse({ id, open, bleed, className, children, }: {
+    id: string;
+    open: boolean;
+    bleed?: boolean;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface ChatToolProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** What the agent is doing, in words: "Run the test suite". */
+    title: ReactNode;
+    /** The tool it calls, shown in code type beside the title: "run_tests". */
+    name?: string;
+    /** A 15px icon for the tool, before the title. */
+    icon?: ReactNode;
+    /** Where the call has got to. Running shows a spinner and a shimmering title; `approval` asks the person to approve it;
+     * `cancelled` is for a call they denied, or one the run stopped before it finished: say which in `summary`. */
+    status: ChatToolStatus;
+    /** The result in one line: "212 tests passed", "Read 3 files". */
+    summary?: ReactNode;
+    /** How long it took, or has taken so far, in milliseconds. Shown as "4.2 s". */
+    duration?: number;
+    /** What the tool was called with: a one-line string (a command) in a Snippet, a longer one in a code block, or an
+     * object as formatted JSON. Shown under "Input". */
+    input?: string | Record<string, unknown> | unknown[];
+    /** What the tool returned: a string in a code block, or any node (a list of files, a link). Shown under "Output". */
+    output?: ReactNode;
+    /** What went wrong, shown in the danger colour under "Error". */
+    error?: ReactNode;
+    /** Whether the input and output show. Leave out to let it follow the status: closed, opening for an error or an approval. */
+    expanded?: boolean;
+    /** Whether it starts open. Defaults to open for an error or an approval and closed otherwise. */
+    defaultExpanded?: boolean;
+    /** Called with the new state when it opens or closes, by the person or by a change of status. */
+    onExpandedChange?(expanded: boolean): void;
+    /** What it asks to do, while `status` is "approval". Defaults to "Wants to run" and the tool's name. */
+    approvalMessage?: ReactNode;
+    /** The approve button's label: name the action, e.g. "Approve and publish".
+     * @default "Approve" */
+    approveLabel?: string;
+    /** The deny button's label, e.g. "Don't publish".
+     * @default "Deny" */
+    denyLabel?: string;
+    /** Called when the person approves the call. Move `status` on from "approval" in response. */
+    onApprove?(): void;
+    /** Called when the person refuses the call. Move `status` on to "cancelled" in response. */
+    onDeny?(): void;
+    /** The locale for the duration's digits, e.g. "de-CH". Defaults to the browser's. */
+    locale?: string;
+}
+/**
+ * One tool call an agent makes: what it's doing, the tool, its status and result on one row, which opens to show the
+ * input and output. A failed call opens to its error, and a call that needs approval asks for it with Approve and Deny.
+ */
+export declare const ChatTool: import("react").ForwardRefExoticComponent<ChatToolProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChatTool/ChatTool.d.ts

@@ -0,0 +1,89 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * Where a tool call or a step has got to. `approval` waits for a person to approve it; `cancelled` didn't run or didn't
+ * finish because a person denied it or stopped the run.
+ */
+export type ChatToolStatus = "pending" | "running" | "success" | "error" | "approval" | "cancelled";
+/** The round mark before a tool call or a step: a spinner, a check, a cross, a "!", a slash or a hollow ring, with its status as words for screen readers. */
+export declare function ChatStatusMarker({ status, icon }: {
+    status: ChatToolStatus;
+    icon?: ReactNode;
+}): import("react").JSX.Element;
+/** "380 ms", "4.2 s", "12 s", "1 min 12 s", "1 h 4 min": a duration as people say it, with the locale's digits. */
+export declare function formatDuration(ms: number, locale?: string): string;
+/** A duration in a <time> element, so it carries a machine-readable value too. */
+export declare function ChatDuration({ ms, locale, className }: {
+    ms: number;
+    locale?: string;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Open state that follows a status: it opens when `wantsOpen` turns true (an error, a step under way) and closes again
+ * when it turns false, unless the person has opened or closed it themselves since. A controlled `expanded` is left alone.
+ */
+export declare function useStatusExpansion({ expanded, defaultExpanded, onExpandedChange, wantsOpen, closeWhenSettled, initial, }: {
+    expanded: boolean | undefined;
+    defaultExpanded: boolean | undefined;
+    onExpandedChange: ((expanded: boolean) => void) | undefined;
+    wantsOpen: boolean;
+    closeWhenSettled?: boolean;
+    initial?: boolean;
+}): [boolean, () => void];
+/**
+ * A panel that opens and closes under a disclosure button, animating its height (a 0fr → 1fr grid row). Closed, it's
+ * inert: nothing in it can be tabbed to or read out. `bleed` lets focus rings at its edges show past the clip.
+ */
+export declare function ChatCollapse({ id, open, bleed, className, children, }: {
+    id: string;
+    open: boolean;
+    bleed?: boolean;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface ChatToolProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** What the agent is doing, in words: "Run the test suite". */
+    title: ReactNode;
+    /** The tool it calls, shown in code type beside the title: "run_tests". */
+    name?: string;
+    /** A 15px icon for the tool, before the title. */
+    icon?: ReactNode;
+    /** Where the call has got to. Running shows a spinner and a shimmering title; `approval` asks the person to approve it;
+     * `cancelled` is for a call they denied, or one the run stopped before it finished: say which in `summary`. */
+    status: ChatToolStatus;
+    /** The result in one line: "212 tests passed", "Read 3 files". */
+    summary?: ReactNode;
+    /** How long it took, or has taken so far, in milliseconds. Shown as "4.2 s". */
+    duration?: number;
+    /** What the tool was called with: a one-line string (a command) in a Snippet, a longer one in a code block, or an
+     * object as formatted JSON. Shown under "Input". */
+    input?: string | Record<string, unknown> | unknown[];
+    /** What the tool returned: a string in a code block, or any node (a list of files, a link). Shown under "Output". */
+    output?: ReactNode;
+    /** What went wrong, shown in the danger colour under "Error". */
+    error?: ReactNode;
+    /** Whether the input and output show. Leave out to let it follow the status: closed, opening for an error or an approval. */
+    expanded?: boolean;
+    /** Whether it starts open. Defaults to open for an error or an approval and closed otherwise. */
+    defaultExpanded?: boolean;
+    /** Called with the new state when it opens or closes, by the person or by a change of status. */
+    onExpandedChange?(expanded: boolean): void;
+    /** What it asks to do, while `status` is "approval". Defaults to "Wants to run" and the tool's name. */
+    approvalMessage?: ReactNode;
+    /** The approve button's label: name the action, e.g. "Approve and publish".
+     * @default "Approve" */
+    approveLabel?: string;
+    /** The deny button's label, e.g. "Don't publish".
+     * @default "Deny" */
+    denyLabel?: string;
+    /** Called when the person approves the call. Move `status` on from "approval" in response. */
+    onApprove?(): void;
+    /** Called when the person refuses the call. Move `status` on to "cancelled" in response. */
+    onDeny?(): void;
+    /** The locale for the duration's digits, e.g. "de-CH". Defaults to the browser's. */
+    locale?: string;
+}
+/**
+ * One tool call an agent makes: what it's doing, the tool, its status and result on one row, which opens to show the
+ * input and output. A failed call opens to its error, and a call that needs approval asks for it with Approve and Deny.
+ */
+export declare const ChatTool: import("react").ForwardRefExoticComponent<ChatToolProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -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/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/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;