panelui-web 0.4.0 → 0.6.0

package/dist/components/menu/index.d.ts

@@ -0,0 +1,202 @@
+/**
+ * Menu — a list of actions that opens from a button.
+ *
+ * ```tsx
+ * <Menu>
+ *   <Menu.Trigger render={<Button variant="outline" />}>Options</Menu.Trigger>
+ *   <Menu.Content>
+ *     <Menu.Item onClick={rename}>
+ *       <PencilIcon /> Rename <Menu.Shortcut>⌘R</Menu.Shortcut>
+ *     </Menu.Item>
+ *     <Menu.Sub>
+ *       <Menu.SubTrigger><ShareIcon /> Share</Menu.SubTrigger>
+ *       <Menu.SubContent>
+ *         <Menu.Item>Copy link</Menu.Item>
+ *       </Menu.SubContent>
+ *     </Menu.Sub>
+ *     <Menu.Separator />
+ *     <Menu.CheckboxItem checked={pinned} onCheckedChange={setPinned}>Pinned</Menu.CheckboxItem>
+ *     <Menu.Item variant="destructive">Delete</Menu.Item>
+ *   </Menu.Content>
+ * </Menu>
+ * ```
+ *
+ * ## One row shape
+ *
+ * Every row is the same: an icon, the label, and whatever belongs at the end
+ * of it, a shortcut, a badge, a check or the chevron of a submenu. Icons are
+ * written as the row's first child and sized by the row, so rows with and
+ * without them still line up when every row in a group has one.
+ *
+ * ## Submenus
+ *
+ * A submenu opens to the side when its row is hovered or pressed, or with
+ * the right arrow key, and closes with the left one. The pointer can cross
+ * diagonally to it without closing it on the way.
+ *
+ * ## Items that stay open
+ *
+ * Pressing an item closes the menu. A check item or a radio item keeps it
+ * open, so several can be switched in a row; pass `closeOnClick` to change
+ * either.
+ */
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import type { ComponentProps, ReactNode } from 'react';
+export interface MenuProps extends BaseMenu.Root.Props {
+}
+/** Holds whether the menu is open. Takes `open`/`onOpenChange`, `defaultOpen` and `modal`. */
+declare function MenuRoot(props: MenuProps): import("react").JSX.Element;
+declare namespace MenuRoot {
+    var displayName: string;
+}
+export interface MenuTriggerProps extends BaseMenu.Trigger.Props {
+}
+/** The button that opens the menu. `render` draws it as another element, such as a `Button`. */
+declare function MenuTrigger(props: MenuTriggerProps): import("react").JSX.Element;
+declare namespace MenuTrigger {
+    var displayName: string;
+}
+interface PlacementProps {
+    /** Which side of the trigger it opens on. Default `bottom`; a submenu opens to the side. */
+    side?: BaseMenu.Positioner.Props['side'];
+    /** How it lines up with the trigger along that side. Default `start`. */
+    align?: BaseMenu.Positioner.Props['align'];
+    /** The gap between the trigger and the menu, in pixels. Default `6`. */
+    sideOffset?: number;
+    /** Moves it along the side, in pixels. */
+    alignOffset?: number;
+}
+export interface MenuContentProps extends BaseMenu.Popup.Props, PlacementProps {
+    /** Where in the document the menu is put. Default `document.body`. */
+    container?: BaseMenu.Portal.Props['container'];
+    /** What it is placed against instead of the trigger: an element or a ref to one. */
+    anchor?: BaseMenu.Positioner.Props['anchor'];
+    className?: string;
+}
+/** The list, opened in a layer over the page. It moves to the other side when there is no room. */
+declare function MenuContent({ side, align, sideOffset, alignOffset, container, anchor, className, ...props }: MenuContentProps): import("react").JSX.Element;
+declare namespace MenuContent {
+    var displayName: string;
+}
+export interface MenuItemProps extends BaseMenu.Item.Props {
+    /** `destructive` draws it in the destructive colour, for an action that cannot be undone. Default `default`. */
+    variant?: 'default' | 'destructive';
+    className?: string;
+}
+/** One action. Put an icon first, then the label, then a `Menu.Shortcut` or `Menu.Badge` if it has one. */
+declare function MenuItem({ variant, className, ...props }: MenuItemProps): import("react").JSX.Element;
+declare namespace MenuItem {
+    var displayName: string;
+}
+export interface MenuCheckboxItemProps extends BaseMenu.CheckboxItem.Props {
+    className?: string;
+}
+/** An item that is switched on and off, with a check at its end while on. The menu stays open. */
+declare function MenuCheckboxItem({ className, children, ...props }: MenuCheckboxItemProps): import("react").JSX.Element;
+declare namespace MenuCheckboxItem {
+    var displayName: string;
+}
+export interface MenuRadioGroupProps extends BaseMenu.RadioGroup.Props {
+    className?: string;
+}
+/** Radio items of which one is chosen. Takes `value` and `onValueChange`. */
+declare function MenuRadioGroup({ className, ...props }: MenuRadioGroupProps): import("react").JSX.Element;
+declare namespace MenuRadioGroup {
+    var displayName: string;
+}
+export interface MenuRadioItemProps extends BaseMenu.RadioItem.Props {
+    className?: string;
+}
+/** One choice in a radio group, with a check at its end while chosen. */
+declare function MenuRadioItem({ className, children, ...props }: MenuRadioItemProps): import("react").JSX.Element;
+declare namespace MenuRadioItem {
+    var displayName: string;
+}
+export interface MenuSubProps extends BaseMenu.SubmenuRoot.Props {
+}
+/** A submenu: a `Menu.SubTrigger` row and the `Menu.SubContent` it opens. */
+declare function MenuSub(props: MenuSubProps): import("react").JSX.Element;
+declare namespace MenuSub {
+    var displayName: string;
+}
+export interface MenuSubTriggerProps extends BaseMenu.SubmenuTrigger.Props {
+    className?: string;
+    /** Something before the chevron, such as a `Menu.Badge`. */
+    end?: ReactNode;
+}
+/** The row that opens a submenu, with a chevron at its end. It opens on hover as well as on press. */
+declare function MenuSubTrigger({ className, children, end, openOnHover, delay, ...props }: MenuSubTriggerProps): import("react").JSX.Element;
+declare namespace MenuSubTrigger {
+    var displayName: string;
+}
+export interface MenuSubContentProps extends Omit<MenuContentProps, 'side'> {
+    /** Default `inline-end`: to the right in a left-to-right page. */
+    side?: BaseMenu.Positioner.Props['side'];
+}
+/** The submenu's list, opened beside its row with the first item level with it. */
+declare function MenuSubContent({ side, align, sideOffset, alignOffset, ...props }: MenuSubContentProps): import("react").JSX.Element;
+declare namespace MenuSubContent {
+    var displayName: string;
+}
+export interface MenuGroupProps extends BaseMenu.Group.Props {
+    className?: string;
+}
+/** Items that belong together, under a `Menu.GroupLabel`. */
+declare function MenuGroup({ className, ...props }: MenuGroupProps): import("react").JSX.Element;
+declare namespace MenuGroup {
+    var displayName: string;
+}
+export interface MenuGroupLabelProps extends BaseMenu.GroupLabel.Props {
+    className?: string;
+}
+/** The heading of a group. Screen readers announce the group by it. */
+declare function MenuGroupLabel({ className, ...props }: MenuGroupLabelProps): import("react").JSX.Element;
+declare namespace MenuGroupLabel {
+    var displayName: string;
+}
+export interface MenuSeparatorProps extends ComponentProps<'div'> {
+}
+/** A rule between groups of items. */
+declare function MenuSeparator({ className, ...props }: MenuSeparatorProps): import("react").JSX.Element;
+declare namespace MenuSeparator {
+    var displayName: string;
+}
+export interface MenuDescriptionProps extends ComponentProps<'span'> {
+}
+/** What an item does, in quieter words after its label. */
+declare function MenuDescription({ className, ...props }: MenuDescriptionProps): import("react").JSX.Element;
+declare namespace MenuDescription {
+    var displayName: string;
+}
+export interface MenuShortcutProps extends ComponentProps<'kbd'> {
+}
+/** The keys for an item, at its end. It only shows them: wire the keys up where the action lives. */
+declare function MenuShortcut({ className, ...props }: MenuShortcutProps): import("react").JSX.Element;
+declare namespace MenuShortcut {
+    var displayName: string;
+}
+export interface MenuBadgeProps extends ComponentProps<'span'> {
+}
+/** A small count or flag at an item's end: how many need attention, or that something is new. */
+declare function MenuBadge({ className, ...props }: MenuBadgeProps): import("react").JSX.Element;
+declare namespace MenuBadge {
+    var displayName: string;
+}
+export declare const Menu: typeof MenuRoot & {
+    Trigger: typeof MenuTrigger;
+    Content: typeof MenuContent;
+    Item: typeof MenuItem;
+    CheckboxItem: typeof MenuCheckboxItem;
+    RadioGroup: typeof MenuRadioGroup;
+    RadioItem: typeof MenuRadioItem;
+    Sub: typeof MenuSub;
+    SubTrigger: typeof MenuSubTrigger;
+    SubContent: typeof MenuSubContent;
+    Group: typeof MenuGroup;
+    GroupLabel: typeof MenuGroupLabel;
+    Separator: typeof MenuSeparator;
+    Description: typeof MenuDescription;
+    Shortcut: typeof MenuShortcut;
+    Badge: typeof MenuBadge;
+};
+export { MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator, MenuDescription, MenuShortcut, MenuBadge, };

package/dist/components/menu/index.js

@@ -0,0 +1,188 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Menu — a list of actions that opens from a button.
+ *
+ * ```tsx
+ * <Menu>
+ *   <Menu.Trigger render={<Button variant="outline" />}>Options</Menu.Trigger>
+ *   <Menu.Content>
+ *     <Menu.Item onClick={rename}>
+ *       <PencilIcon /> Rename <Menu.Shortcut>⌘R</Menu.Shortcut>
+ *     </Menu.Item>
+ *     <Menu.Sub>
+ *       <Menu.SubTrigger><ShareIcon /> Share</Menu.SubTrigger>
+ *       <Menu.SubContent>
+ *         <Menu.Item>Copy link</Menu.Item>
+ *       </Menu.SubContent>
+ *     </Menu.Sub>
+ *     <Menu.Separator />
+ *     <Menu.CheckboxItem checked={pinned} onCheckedChange={setPinned}>Pinned</Menu.CheckboxItem>
+ *     <Menu.Item variant="destructive">Delete</Menu.Item>
+ *   </Menu.Content>
+ * </Menu>
+ * ```
+ *
+ * ## One row shape
+ *
+ * Every row is the same: an icon, the label, and whatever belongs at the end
+ * of it, a shortcut, a badge, a check or the chevron of a submenu. Icons are
+ * written as the row's first child and sized by the row, so rows with and
+ * without them still line up when every row in a group has one.
+ *
+ * ## Submenus
+ *
+ * A submenu opens to the side when its row is hovered or pressed, or with
+ * the right arrow key, and closes with the left one. The pointer can cross
+ * diagonally to it without closing it on the way.
+ *
+ * ## Items that stay open
+ *
+ * Pressing an item closes the menu. A check item or a radio item keeps it
+ * open, so several can be switched in a row; pass `closeOnClick` to change
+ * either.
+ */
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { tv } from 'tailwind-variants';
+const menuVariants = tv({
+    slots: {
+        positioner: 'z-50 outline-none',
+        popup: [
+            'min-w-48 origin-(--transform-origin) rounded-xl border bg-popover p-1 text-popover-foreground shadow-lg outline-none',
+            'max-h-(--available-height) overflow-y-auto [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin]',
+            'transition-[opacity,scale] duration-150 ease-out',
+            'data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0',
+            'motion-reduce:transition-none',
+        ],
+        item: [
+            // The label never wraps; a description beside it is cut short instead.
+            'flex min-h-8 cursor-default items-center gap-2.5 whitespace-nowrap rounded-lg px-2 py-1.5 text-sm outline-none select-none',
+            'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+            'data-disabled:pointer-events-none data-disabled:opacity-50',
+            // A submenu's row stays lit while its submenu is open, so it is clear what it belongs to.
+            'data-popup-open:bg-accent',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+            '[&>svg:first-child]:text-muted-foreground data-highlighted:[&>svg:first-child]:text-current',
+        ],
+        end: 'ms-auto flex items-center ps-3',
+        check: 'ms-auto flex size-4 items-center justify-center ps-0 text-foreground',
+        description: 'min-w-0 truncate text-muted-foreground',
+        shortcut: 'ms-auto ps-3 text-xs tracking-wide text-muted-foreground',
+        badge: 'ms-auto inline-flex h-5 items-center gap-1 rounded-md bg-muted px-1.5 text-xs font-medium tabular-nums text-muted-foreground [&_svg:not([class*=size-])]:size-3',
+        chevron: 'ms-auto text-muted-foreground',
+        group: 'flex flex-col',
+        groupLabel: 'px-2 pb-1 pt-2 text-xs font-medium text-muted-foreground',
+        separator: 'mx-2 my-1 h-px bg-border',
+    },
+    variants: {
+        variant: {
+            default: {},
+            destructive: {
+                item: 'text-destructive data-highlighted:bg-destructive/10 data-highlighted:text-destructive [&>svg:first-child]:text-destructive',
+            },
+        },
+    },
+});
+/** Holds whether the menu is open. Takes `open`/`onOpenChange`, `defaultOpen` and `modal`. */
+function MenuRoot(props) {
+    return _jsx(BaseMenu.Root, { ...props });
+}
+MenuRoot.displayName = 'Menu';
+/** The button that opens the menu. `render` draws it as another element, such as a `Button`. */
+function MenuTrigger(props) {
+    return _jsx(BaseMenu.Trigger, { "data-slot": "menu-trigger", ...props });
+}
+MenuTrigger.displayName = 'Menu.Trigger';
+/** The list, opened in a layer over the page. It moves to the other side when there is no room. */
+function MenuContent({ side = 'bottom', align = 'start', sideOffset = 6, alignOffset, container, anchor, className, ...props }) {
+    const slots = menuVariants();
+    return (_jsx(BaseMenu.Portal, { container: container, children: _jsx(BaseMenu.Positioner, { side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, anchor: anchor, className: slots.positioner(), children: _jsx(BaseMenu.Popup, { "data-slot": "menu-content", className: slots.popup({ className }), ...props }) }) }));
+}
+MenuContent.displayName = 'Menu.Content';
+/** One action. Put an icon first, then the label, then a `Menu.Shortcut` or `Menu.Badge` if it has one. */
+function MenuItem({ variant, className, ...props }) {
+    return _jsx(BaseMenu.Item, { "data-slot": "menu-item", className: menuVariants({ variant }).item({ className }), ...props });
+}
+MenuItem.displayName = 'Menu.Item';
+const Check = () => (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+/** An item that is switched on and off, with a check at its end while on. The menu stays open. */
+function MenuCheckboxItem({ className, children, ...props }) {
+    const slots = menuVariants();
+    return (_jsxs(BaseMenu.CheckboxItem, { "data-slot": "menu-checkbox-item", className: slots.item({ className }), ...props, children: [children, _jsx("span", { className: slots.check(), children: _jsx(BaseMenu.CheckboxItemIndicator, { className: "flex", children: _jsx(Check, {}) }) })] }));
+}
+MenuCheckboxItem.displayName = 'Menu.CheckboxItem';
+/** Radio items of which one is chosen. Takes `value` and `onValueChange`. */
+function MenuRadioGroup({ className, ...props }) {
+    return _jsx(BaseMenu.RadioGroup, { "data-slot": "menu-radio-group", className: menuVariants().group({ className }), ...props });
+}
+MenuRadioGroup.displayName = 'Menu.RadioGroup';
+/** One choice in a radio group, with a check at its end while chosen. */
+function MenuRadioItem({ className, children, ...props }) {
+    const slots = menuVariants();
+    return (_jsxs(BaseMenu.RadioItem, { "data-slot": "menu-radio-item", className: slots.item({ className }), ...props, children: [children, _jsx("span", { className: slots.check(), children: _jsx(BaseMenu.RadioItemIndicator, { className: "flex", children: _jsx(Check, {}) }) })] }));
+}
+MenuRadioItem.displayName = 'Menu.RadioItem';
+/** A submenu: a `Menu.SubTrigger` row and the `Menu.SubContent` it opens. */
+function MenuSub(props) {
+    return _jsx(BaseMenu.SubmenuRoot, { ...props });
+}
+MenuSub.displayName = 'Menu.Sub';
+/** The row that opens a submenu, with a chevron at its end. It opens on hover as well as on press. */
+function MenuSubTrigger({ className, children, end, openOnHover = true, delay = 80, ...props }) {
+    const slots = menuVariants();
+    return (_jsxs(BaseMenu.SubmenuTrigger, { "data-slot": "menu-sub-trigger", openOnHover: openOnHover, delay: delay, className: slots.item({ className }), ...props, children: [children, _jsxs("span", { className: slots.end(), children: [end, _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.chevron({ className: end ? 'ms-2' : undefined }), children: _jsx("path", { d: "m9 18 6-6-6-6" }) })] })] }));
+}
+MenuSubTrigger.displayName = 'Menu.SubTrigger';
+/** The submenu's list, opened beside its row with the first item level with it. */
+function MenuSubContent({ side = 'inline-end', align = 'start', sideOffset = 6, alignOffset = -5, ...props }) {
+    return _jsx(MenuContent, { side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, ...props });
+}
+MenuSubContent.displayName = 'Menu.SubContent';
+/** Items that belong together, under a `Menu.GroupLabel`. */
+function MenuGroup({ className, ...props }) {
+    return _jsx(BaseMenu.Group, { "data-slot": "menu-group", className: menuVariants().group({ className }), ...props });
+}
+MenuGroup.displayName = 'Menu.Group';
+/** The heading of a group. Screen readers announce the group by it. */
+function MenuGroupLabel({ className, ...props }) {
+    return _jsx(BaseMenu.GroupLabel, { "data-slot": "menu-group-label", className: menuVariants().groupLabel({ className }), ...props });
+}
+MenuGroupLabel.displayName = 'Menu.GroupLabel';
+/** A rule between groups of items. */
+function MenuSeparator({ className, ...props }) {
+    return _jsx("div", { role: "separator", "data-slot": "menu-separator", className: menuVariants().separator({ className }), ...props });
+}
+MenuSeparator.displayName = 'Menu.Separator';
+/** What an item does, in quieter words after its label. */
+function MenuDescription({ className, ...props }) {
+    return _jsx("span", { "data-slot": "menu-description", className: menuVariants().description({ className }), ...props });
+}
+MenuDescription.displayName = 'Menu.Description';
+/** The keys for an item, at its end. It only shows them: wire the keys up where the action lives. */
+function MenuShortcut({ className, ...props }) {
+    return _jsx("kbd", { "data-slot": "menu-shortcut", className: menuVariants().shortcut({ className }), ...props });
+}
+MenuShortcut.displayName = 'Menu.Shortcut';
+/** A small count or flag at an item's end: how many need attention, or that something is new. */
+function MenuBadge({ className, ...props }) {
+    return _jsx("span", { "data-slot": "menu-badge", className: menuVariants().badge({ className }), ...props });
+}
+MenuBadge.displayName = 'Menu.Badge';
+export const Menu = Object.assign(MenuRoot, {
+    Trigger: MenuTrigger,
+    Content: MenuContent,
+    Item: MenuItem,
+    CheckboxItem: MenuCheckboxItem,
+    RadioGroup: MenuRadioGroup,
+    RadioItem: MenuRadioItem,
+    Sub: MenuSub,
+    SubTrigger: MenuSubTrigger,
+    SubContent: MenuSubContent,
+    Group: MenuGroup,
+    GroupLabel: MenuGroupLabel,
+    Separator: MenuSeparator,
+    Description: MenuDescription,
+    Shortcut: MenuShortcut,
+    Badge: MenuBadge,
+});
+export { MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator, MenuDescription, MenuShortcut, MenuBadge, };

package/dist/components/message/index.d.ts

@@ -0,0 +1,161 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export type MessageFrom = 'user' | 'assistant';
+export interface MessageProps extends ComponentProps<'div'> {
+    /** Who wrote it. A person's turn is a bubble on the trailing side; the assistant's is prose. */
+    from?: MessageFrom;
+    /** Still being written: a caret follows the last word and the turn is marked busy. */
+    streaming?: boolean;
+}
+/** One turn. Put `Message.Avatar` and `Message.Content` in it. */
+declare function MessageRoot({ from: fromProp, streaming, className, ...props }: MessageProps): import("react").JSX.Element;
+declare namespace MessageRoot {
+    var displayName: string;
+}
+export interface MessageGroupProps extends ComponentProps<'div'> {
+    /** Who wrote every turn in it. */
+    from?: MessageFrom;
+}
+/**
+ * Turns in a row from the same side, set closer together. Give the avatar to
+ * the first and an empty `Message.Avatar` to the rest, so they line up.
+ */
+declare function MessageGroup({ from, className, ...props }: MessageGroupProps): import("react").JSX.Element;
+declare namespace MessageGroup {
+    var displayName: string;
+}
+export interface MessageAvatarProps extends ComponentProps<'div'> {
+}
+/** Who it is from, beside the turn's first line. Leave it empty to keep the space. */
+declare function MessageAvatar({ className, ...props }: MessageAvatarProps): import("react").JSX.Element;
+declare namespace MessageAvatar {
+    var displayName: string;
+}
+export interface MessageContentProps extends ComponentProps<'div'> {
+}
+/** The column with the header, the bubble, the attachments and the actions. */
+declare function MessageContent({ className, ...props }: MessageContentProps): import("react").JSX.Element;
+declare namespace MessageContent {
+    var displayName: string;
+}
+export interface MessageHeaderProps extends ComponentProps<'div'> {
+}
+/** A line above the turn: a name in `<strong>`, a time, a model. */
+declare function MessageHeader({ className, ...props }: MessageHeaderProps): import("react").JSX.Element;
+declare namespace MessageHeader {
+    var displayName: string;
+}
+export interface MessageBubbleProps extends ComponentProps<'div'> {
+}
+/** The surface of a person's turn. On the assistant's it draws nothing, and the text is the page's. */
+declare function MessageBubble({ className, ...props }: MessageBubbleProps): import("react").JSX.Element;
+declare namespace MessageBubble {
+    var displayName: string;
+}
+export interface MessageBubbleContentProps extends ComponentProps<'div'> {
+}
+/**
+ * The text. Paragraphs, lists, inline code, code blocks and headings inside
+ * it are set as prose, so rendered Markdown can go straight in.
+ */
+declare function MessageBubbleContent({ className, children, ...props }: MessageBubbleContentProps): import("react").JSX.Element;
+declare namespace MessageBubbleContent {
+    var displayName: string;
+}
+export interface MessageFooterProps extends ComponentProps<'div'> {
+}
+/** A line under the turn: sent, read, a model and how long it took. */
+declare function MessageFooter({ className, ...props }: MessageFooterProps): import("react").JSX.Element;
+declare namespace MessageFooter {
+    var displayName: string;
+}
+export interface MessageActionsProps extends ComponentProps<'div'> {
+    /**
+     * `always`, the default, for the latest answer. `hover` for earlier ones:
+     * hidden until the turn is hovered or focused, and always shown on touch.
+     */
+    reveal?: 'always' | 'hover';
+}
+/** The row of actions under a turn. */
+declare function MessageActions({ reveal, className, ...props }: MessageActionsProps): import("react").JSX.Element;
+declare namespace MessageActions {
+    var displayName: string;
+}
+export interface MessageActionProps extends Omit<ComponentProps<'button'>, 'children'> {
+    /** Said by a screen reader and shown in the tooltip. Required, since the button is an icon. */
+    label: string;
+    /** The icon. Optional when `copy` is set, which draws its own. */
+    children?: ReactNode;
+    /**
+     * Text to put on the clipboard when pressed. The icon turns to a check for
+     * a moment, and the label to "Copied".
+     */
+    copy?: string | (() => string);
+    /** For a toggle such as a thumbs-up: whether it is on. */
+    pressed?: boolean;
+}
+/** An icon button with a tooltip: copy, retry, rate, share. */
+declare function MessageAction({ label, children, copy, pressed, onClick, className, ...props }: MessageActionProps): import("react").JSX.Element;
+declare namespace MessageAction {
+    var displayName: string;
+}
+export interface MessageBranchProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /** How many versions of the answer there are. */
+    count: number;
+    /** Which one is shown, from 0. */
+    index: number;
+    /** Called with the index of the version asked for. */
+    onIndexChange: (index: number) => void;
+}
+/** "‹ 2 / 3 ›": steps between the versions of an answer that was retried or edited. */
+declare function MessageBranch({ count, index, onIndexChange, className, ...props }: MessageBranchProps): import("react").JSX.Element;
+declare namespace MessageBranch {
+    var displayName: string;
+}
+export interface MessageStatusProps extends ComponentProps<'div'> {
+}
+/**
+ * What the assistant is doing before its first word: "Thinking", "Reading 4
+ * files". Announced as it changes. Replace it with the text once that arrives.
+ */
+declare function MessageStatus({ className, ...props }: MessageStatusProps): import("react").JSX.Element;
+declare namespace MessageStatus {
+    var displayName: string;
+}
+export interface MessageAttachmentsProps extends ComponentProps<'div'> {
+}
+/** The files sent with a turn, above its bubble. */
+declare function MessageAttachments({ className, ...props }: MessageAttachmentsProps): import("react").JSX.Element;
+declare namespace MessageAttachments {
+    var displayName: string;
+}
+export interface MessageAttachmentProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** The file's name. */
+    name: string;
+    /** A picture to show in place of the file's card. */
+    src?: string;
+    /** A line under the name: its type and size. */
+    meta?: string;
+    /** The glyph on a file's card. A page outline when left out. */
+    icon?: ReactNode;
+}
+/** One sent file: a picture, or a card with a glyph, the name and its size. */
+declare function MessageAttachment({ name, src, meta, icon, className, ...props }: MessageAttachmentProps): import("react").JSX.Element;
+declare namespace MessageAttachment {
+    var displayName: string;
+}
+export declare const Message: typeof MessageRoot & {
+    Group: typeof MessageGroup;
+    Avatar: typeof MessageAvatar;
+    Content: typeof MessageContent;
+    Header: typeof MessageHeader;
+    Bubble: typeof MessageBubble;
+    BubbleContent: typeof MessageBubbleContent;
+    Footer: typeof MessageFooter;
+    Actions: typeof MessageActions;
+    Action: typeof MessageAction;
+    Branch: typeof MessageBranch;
+    Status: typeof MessageStatus;
+    Attachments: typeof MessageAttachments;
+    Attachment: typeof MessageAttachment;
+};
+export { MessageGroup, MessageAvatar, MessageContent, MessageHeader, MessageBubble, MessageBubbleContent, MessageFooter, MessageActions, MessageAction, MessageBranch, MessageStatus, MessageAttachments, MessageAttachment, };