@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/thread-panel/thread-panel.mjs

@@ -0,0 +1,162 @@
+import { Panel, PanelBody, PanelFooter, PanelHeaderRoot } from "../panel/panel.mjs";
+import { threadPanel } from "./thread-panel.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/thread-panel/thread-panel.tsx
+function ThreadPanelRoot({ className, render, ...props }) {
+	const { root } = threadPanel();
+	return /* @__PURE__ */ jsx(Panel, {
+		...props,
+		render,
+		edge: "attached",
+		"data-slot": "thread-panel-root",
+		className: root({ className })
+	});
+}
+function ThreadPanelHeader({ className, render, ...props }) {
+	const { header } = threadPanel();
+	return /* @__PURE__ */ jsx(PanelHeaderRoot, {
+		...props,
+		render,
+		"data-panel-frame-header": "",
+		"data-slot": "thread-panel-header",
+		className: header({ className })
+	});
+}
+function ThreadPanelContent({ className, render, ...props }) {
+	const { content } = threadPanel();
+	const defaultProps = {
+		"data-slot": "thread-panel-content",
+		className: content({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ThreadPanelTitle({ className, render, ...props }) {
+	const { title } = threadPanel();
+	const defaultProps = {
+		"data-slot": "thread-panel-title",
+		className: title({ className })
+	};
+	return useRender({
+		defaultTagName: "h2",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ThreadPanelTitleMeta({ className, render, ...props }) {
+	const { titleMeta } = threadPanel();
+	const defaultProps = {
+		"data-slot": "thread-panel-title-meta",
+		className: titleMeta({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ThreadPanelActions({ className, render, ...props }) {
+	const { actions } = threadPanel();
+	const defaultProps = {
+		"data-slot": "thread-panel-actions",
+		"data-icon-inset": "",
+		className: actions({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ThreadPanelBody({ className, render, ...props }) {
+	return /* @__PURE__ */ jsx(PanelBody, {
+		...props,
+		render,
+		"data-slot": "thread-panel-body",
+		className
+	});
+}
+function ThreadPanelOriginalMessage({ className, ...props }) {
+	const { originalMessage } = threadPanel();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "thread-panel-original-message",
+		className: originalMessage({ className })
+	});
+}
+function ThreadPanelReplySummary({ className, render, ...props }) {
+	const { replySummary } = threadPanel();
+	const defaultProps = {
+		"data-slot": "thread-panel-reply-summary",
+		className: replySummary({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ThreadPanelReplyCount({ className, render, ...props }) {
+	const { replyCount } = threadPanel();
+	const defaultProps = {
+		"data-slot": "thread-panel-reply-count",
+		className: replyCount({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ThreadPanelFooter({ className, render, ...props }) {
+	const { footer } = threadPanel();
+	return /* @__PURE__ */ jsx(PanelFooter, {
+		...props,
+		render,
+		"data-slot": "thread-panel-footer",
+		className: footer({ className })
+	});
+}
+function ThreadPanelSearch({ className, render, ...props }) {
+	const { search } = threadPanel();
+	const defaultProps = {
+		"data-slot": "thread-panel-search",
+		className: search({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ThreadPanelSearchTrailing({ className, render, ...props }) {
+	const { searchTrailing } = threadPanel();
+	const defaultProps = {
+		"data-slot": "thread-panel-search-trailing",
+		className: searchTrailing({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ThreadPanelSearchCount({ className, render, ...props }) {
+	const { searchCount } = threadPanel();
+	const defaultProps = {
+		"data-slot": "thread-panel-search-count",
+		className: searchCount({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { ThreadPanelActions, ThreadPanelBody, ThreadPanelContent, ThreadPanelFooter, ThreadPanelHeader, ThreadPanelOriginalMessage, ThreadPanelReplyCount, ThreadPanelReplySummary, ThreadPanelRoot, ThreadPanelSearch, ThreadPanelSearchCount, ThreadPanelSearchTrailing, ThreadPanelTitle, ThreadPanelTitleMeta };

package/dist/components/thread-panel/thread-panel.recipe.mjs

@@ -0,0 +1,36 @@
+import { tv } from "../../lib/tv.mjs";
+import { panelHeadActions, panelHeadEdges } from "../panel/panel-header.recipe.mjs";
+//#region src/components/thread-panel/thread-panel.recipe.ts
+const threadPanel = tv({ slots: {
+	root: ["isolate flex size-full min-h-0  flex-col", "relative bg-layer-canvas font-sans text-foreground"],
+	header: [
+		"flex h-(--shell-header-height,56px) shrink-0 items-center gap-3 max-md:gap-2",
+		panelHeadEdges,
+		"border-b border-line-seam bg-layer-canvas"
+	],
+	content: ["flex min-h-0 min-w-0 flex-1 flex-col", "relative bg-layer-canvas"],
+	title: [
+		"m-0 min-w-0 flex-1 truncate",
+		"font-bold",
+		"font-sans text-headline text-foreground"
+	],
+	titleMeta: ["font-normal text-foreground-hint"],
+	actions: panelHeadActions,
+	search: [
+		"relative z-20 flex shrink-0 items-center gap-1.5 py-2",
+		"[&>[data-slot=input-group]]:min-w-0 *:data-[slot=input-group]:flex-1",
+		"border-b border-line-hairline bg-layer-canvas px-5"
+	],
+	searchTrailing: ["ml-auto flex shrink-0 items-center gap-1.5"],
+	searchCount: ["shrink-0 whitespace-nowrap font-mono tabular-nums", "text-mono-meta text-foreground-hint"],
+	originalMessage: [
+		"relative shrink-0",
+		"border-b border-line-hairline bg-transparent pb-timeline-end",
+		"**:data-message-item:bg-transparent"
+	],
+	replySummary: ["pt-timeline-start", "px-5"],
+	replyCount: ["my-timeline-row border-b pb-2 text-center font-mono", "border-line-hairline text-mono-meta text-foreground-hint"],
+	footer: ["pt-0", "text-caption text-foreground-hint"]
+} });
+//#endregion
+export { threadPanel };

package/dist/components/timeline/index.d.mts

@@ -0,0 +1,2 @@
+import { Timeline, TimelineContent, TimelineContentProps, TimelineItem, TimelineItemPlacement, TimelineItemProps, TimelineItemVariant, TimelineLineType, TimelineProps, TimelineSize, TimelineTime, TimelineTimeProps, TimelineTitle, TimelineTitleProps } from "./timeline.mjs";
+export { Timeline, TimelineContent, type TimelineContentProps, TimelineItem, type TimelineItemPlacement, type TimelineItemProps, type TimelineItemVariant, type TimelineLineType, type TimelineProps, type TimelineSize, TimelineTime, type TimelineTimeProps, TimelineTitle, type TimelineTitleProps };

package/dist/components/timeline/timeline.d.mts

@@ -0,0 +1,44 @@
+import { TaskStatusId } from "../tasks/task-status.recipe.mjs";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/timeline/timeline.d.ts
+export type TimelineSize = "sm" | "md" | "lg";
+export type TimelineItemPlacement = "left" | "right";
+export type TimelineItemVariant = "default" | "information" | "success" | "warning" | "danger" | "accent";
+export type TimelineLineType = "solid" | "dashed";
+export interface TimelineProps extends ComponentPropsWithRef<"ol"> {
+  /** Title size: `lg` opens the title to 16/24; `sm` and `md` share the 14/20 scale. */
+  size?: TimelineSize;
+  /** Which side the markers sit on in a vertical timeline. Ignored when `horizontal`. */
+  itemPlacement?: TimelineItemPlacement;
+  /** Lays the items out in a row instead of a column. */
+  horizontal?: boolean;
+  /** Marker size in px. Defaults to 10px for the marker and 14px for an `icon`. */
+  iconSize?: number;
+}
+export interface TimelineItemProps extends ComponentPropsWithRef<"li"> {
+  /** Marker color role. */
+  variant?: TimelineItemVariant;
+  /** A custom marker color; overrides `variant`. */
+  color?: string;
+  /**
+   * Render the marker from a task status's colour token instead of a generic
+   * `variant`. Takes precedence over `variant`; `color` still wins when both
+   * are set. Omit it and the item behaves exactly as before.
+   */
+  taskStatus?: TaskStatusId;
+  /** Replaces the dot marker; takes the variant's color. */
+  icon?: ReactNode;
+  /** The line from this item to the next. */
+  lineType?: TimelineLineType;
+}
+export type TimelineTitleProps = ComponentPropsWithRef<"div">;
+export type TimelineContentProps = ComponentPropsWithRef<"div">;
+export type TimelineTimeProps = ComponentPropsWithRef<"div">;
+/** An ordered list of events; each `TimelineItem` has a marker and a line to the next. */
+export declare function Timeline({ size, itemPlacement, horizontal, iconSize, className, style, ...props }: TimelineProps): import("react").JSX.Element;
+/** One event: a marker on the axis, then its title, content and time as children. */
+export declare function TimelineItem({ variant, color, taskStatus, icon, lineType, className, style, children, ...props }: TimelineItemProps): import("react").JSX.Element;
+export declare function TimelineTitle({ className, ...props }: TimelineTitleProps): import("react").JSX.Element;
+export declare function TimelineContent({ className, ...props }: TimelineContentProps): import("react").JSX.Element;
+export declare function TimelineTime({ className, ...props }: TimelineTimeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/timeline/timeline.mjs

@@ -0,0 +1,81 @@
+import { cn } from "../../cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/timeline/timeline.tsx
+/** Maps a task status to the shared `--task-status-*` token the marker should
+*  paint with — the SAME token the icon/chip/badge read, so a task status can
+*  never look different on the Timeline than everywhere else. */
+function taskStatusMarkerColor(status) {
+	return `var(--task-status-${status})`;
+}
+/** An ordered list of events; each `TimelineItem` has a marker and a line to the next. */
+function Timeline({ size = "md", itemPlacement = "left", horizontal = false, iconSize, className, style, ...props }) {
+	const mergedStyle = iconSize === void 0 ? style : {
+		...style,
+		"--r-timeline-custom-icon-size": `${iconSize}px`
+	};
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "timeline",
+		className: cn("r-timeline", `r-timeline--${size}`, horizontal ? "r-timeline--horizontal" : `r-timeline--${itemPlacement}`, className),
+		style: mergedStyle,
+		...props
+	});
+}
+/** One event: a marker on the axis, then its title, content and time as children. */
+function TimelineItem({ variant = "default", color, taskStatus, icon, lineType = "solid", className, style, children, ...props }) {
+	const resolvedColor = color ?? (taskStatus ? taskStatusMarkerColor(taskStatus) : void 0);
+	const mergedStyle = resolvedColor === void 0 ? style : {
+		...style,
+		"--r-timeline-custom-color": resolvedColor
+	};
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "timeline-item",
+		"data-task-status": taskStatus,
+		"data-icon": icon === void 0 ? void 0 : "",
+		className: cn("r-timeline-item", `r-timeline-item--${variant}`, lineType === "dashed" && "r-timeline-item--dashed", resolvedColor !== void 0 && "r-timeline-item--color", className),
+		style: mergedStyle,
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"aria-hidden": "true",
+			"data-slot": "timeline-item-axis",
+			className: "r-timeline-item__axis",
+			children: [icon === void 0 ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "timeline-item-marker",
+				className: "r-timeline-item__marker"
+			}) : /* @__PURE__ */ jsx("span", {
+				"data-slot": "timeline-item-icon",
+				className: "r-timeline-item__icon",
+				children: icon
+			}), /* @__PURE__ */ jsx("span", {
+				"data-slot": "timeline-item-line",
+				className: "r-timeline-item__line"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "timeline-item-body",
+			className: "r-timeline-item__body",
+			children
+		})]
+	});
+}
+function TimelineTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "timeline-title",
+		className: cn("r-timeline-title", className),
+		...props
+	});
+}
+function TimelineContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "timeline-content",
+		className: cn("r-timeline-content", className),
+		...props
+	});
+}
+function TimelineTime({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "timeline-time",
+		className: cn("r-timeline-time", className),
+		...props
+	});
+}
+//#endregion
+export { Timeline, TimelineContent, TimelineItem, TimelineTime, TimelineTitle };

package/dist/components/toast/index.d.mts

@@ -0,0 +1,2 @@
+import { ToastAction, ToastActionProps, ToastActions, ToastActionsProps, ToastArrow, ToastArrowProps, ToastBody, ToastBodyProps, ToastClose, ToastCloseProps, ToastContent, ToastContentProps, ToastData, ToastDescription, ToastDescriptionProps, ToastIcon, ToastIconProps, ToastIntent, ToastObject, ToastPortal, ToastPortalProps, ToastPositioner, ToastPositionerProps, ToastProgress, ToastProgressProps, ToastProvider, ToastProviderProps, ToastRoot, ToastRootProps, ToastTitle, ToastTitleProps, ToastViewport, ToastViewportProps, createToastManager, toast, useToastManager } from "./toast.mjs";
+export { ToastAction, type ToastActionProps, ToastActions, type ToastActionsProps, ToastArrow, type ToastArrowProps, ToastBody, type ToastBodyProps, ToastClose, type ToastCloseProps, ToastContent, type ToastContentProps, type ToastData, ToastDescription, type ToastDescriptionProps, ToastIcon, type ToastIconProps, type ToastIntent, type ToastObject, ToastPortal, type ToastPortalProps, ToastPositioner, type ToastPositionerProps, ToastProgress, type ToastProgressProps, ToastProvider, type ToastProviderProps, ToastRoot, type ToastRootProps, ToastTitle, type ToastTitleProps, ToastViewport, type ToastViewportProps, createToastManager, toast, useToastManager };

package/dist/components/toast/toast.d.mts

@@ -0,0 +1,263 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { VariantProps } from "../../lib/tv.mjs";
+import { ComponentPropsWithRef, ReactNode, Ref } from "react";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/toast/toast.d.ts
+declare const toastStyles: import("tailwind-variants/lite").TVReturnType<{
+  placement: {
+    "bottom-center": {
+      viewport: string[];
+    };
+    "bottom-right": {
+      viewport: string[];
+    };
+    "top-center": {
+      viewport: string[];
+    };
+    "top-right": {
+      viewport: string[];
+    };
+    none: {
+      viewport: string;
+    };
+  };
+  strategy: {
+    fixed: {
+      viewport: string;
+    };
+    absolute: {
+      viewport: string;
+    };
+  };
+  layout: {
+    stacked: {
+      root: string[];
+    };
+    inline: {
+      root: string[];
+    };
+  };
+}, {
+  viewport: string[];
+  positioner: string[];
+  root: string[];
+  content: string[];
+  icon: string[];
+  body: string[];
+  title: string[];
+  description: string[];
+  actions: string[];
+  progress: string[];
+  close: string[];
+  arrow: string[];
+}, undefined, {
+  placement: {
+    "bottom-center": {
+      viewport: string[];
+    };
+    "bottom-right": {
+      viewport: string[];
+    };
+    "top-center": {
+      viewport: string[];
+    };
+    "top-right": {
+      viewport: string[];
+    };
+    none: {
+      viewport: string;
+    };
+  };
+  strategy: {
+    fixed: {
+      viewport: string;
+    };
+    absolute: {
+      viewport: string;
+    };
+  };
+  layout: {
+    stacked: {
+      root: string[];
+    };
+    inline: {
+      root: string[];
+    };
+  };
+}, {
+  viewport: string[];
+  positioner: string[];
+  root: string[];
+  content: string[];
+  icon: string[];
+  body: string[];
+  title: string[];
+  description: string[];
+  actions: string[];
+  progress: string[];
+  close: string[];
+  arrow: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  placement: {
+    "bottom-center": {
+      viewport: string[];
+    };
+    "bottom-right": {
+      viewport: string[];
+    };
+    "top-center": {
+      viewport: string[];
+    };
+    "top-right": {
+      viewport: string[];
+    };
+    none: {
+      viewport: string;
+    };
+  };
+  strategy: {
+    fixed: {
+      viewport: string;
+    };
+    absolute: {
+      viewport: string;
+    };
+  };
+  layout: {
+    stacked: {
+      root: string[];
+    };
+    inline: {
+      root: string[];
+    };
+  };
+}, {
+  viewport: string[];
+  positioner: string[];
+  root: string[];
+  content: string[];
+  icon: string[];
+  body: string[];
+  title: string[];
+  description: string[];
+  actions: string[];
+  progress: string[];
+  close: string[];
+  arrow: string[];
+}>>;
+export declare const createToastManager: typeof Toast.createToastManager;
+export declare const useToastManager: typeof Toast.useToastManager;
+export type ToastIntent = "info" | "success" | "warning" | "error";
+export type ToastData = {
+  intent?: ToastIntent;
+  hasClose?: boolean;
+  hasIcon?: boolean;
+  hasProgress?: boolean;
+  contentClassName?: string;
+  leading?: ReactNode;
+};
+export type ToastObject<Data extends object = object> = Toast.Root.ToastObject<Data>;
+type ToastCommandOptions<Data extends object = ToastData> = Omit<Partial<ToastObject<Data>>, "actionProps" | "data" | "title" | "type"> & {
+  action?: {
+    label: ReactNode;
+    onClick?: ComponentPropsWithRef<"button">["onClick"];
+  };
+  contentClassName?: string;
+  /**
+   * Show `ToastClose` (Dismiss). Defaults to `false`: every toast closes by
+   * itself, swipes away and closes with Esc.
+   */
+  dismissible?: boolean;
+  /** Show the intent's icon in `ToastIcon`. Defaults to `true`. */
+  icon?: boolean;
+  /**
+   * Replaces the intent's icon in `ToastIcon` with this node, such as an xs
+   * `Avatar` for the person or agent the toast is about. Rendered
+   * hidden from assistive technology: the title must already carry the name.
+   * Shown even when `icon` is `false`.
+   */
+  leading?: ReactNode;
+  progress?: boolean;
+};
+export declare const toast: {
+  add(options: ToastCommandOptions<ToastData> & {
+    title: string;
+    type?: ToastIntent;
+  }): string;
+  info(title: string, options?: ToastCommandOptions<ToastData>): string;
+  success(title: string, options?: ToastCommandOptions<ToastData>): string;
+  warning(title: string, options?: ToastCommandOptions<ToastData>): string;
+  error(title: string, options?: ToastCommandOptions<ToastData>): string;
+  dismiss(id?: string): void;
+};
+export type ToastProviderProps = Toast.Provider.Props & {
+  /**
+   * How long a toast from the `toast` command API stays when it has an action
+   * or is an `error`, in ms. Defaults to 8000, or to `timeout` when that is
+   * longer, and to 0 when `timeout` is 0.
+   */
+  actionTimeout?: number;
+  portalContainer?: Toast.Portal.Props["container"];
+  renderViewport?: boolean;
+  viewportClassName?: string;
+  viewportPlacement?: ToastViewportProps["placement"];
+  viewportStrategy?: ToastViewportProps["strategy"];
+};
+export declare function ToastProvider({ actionTimeout, children, limit, portalContainer, renderViewport, toastManager, timeout, viewportClassName, viewportPlacement, viewportStrategy, ...props }: ToastProviderProps): import("react").JSX.Element;
+export type ToastPortalProps = Toast.Portal.Props;
+export declare function ToastPortal(props: ToastPortalProps): import("react").JSX.Element;
+export type ToastViewportProps = StyledProps<Toast.Viewport.Props> & Pick<VariantProps<typeof toastStyles>, "placement" | "strategy">;
+export declare function ToastViewport({ placement, strategy, className, ...props }: ToastViewportProps): import("react").JSX.Element;
+export type ToastPositionerProps = StyledProps<Toast.Positioner.Props>;
+export declare function ToastPositioner({ className, ...props }: ToastPositionerProps): import("react").JSX.Element;
+export type ToastRootProps = StyledProps<Toast.Root.Props> & Pick<VariantProps<typeof toastStyles>, "layout">;
+/**
+ * A toast pushed past the provider's `limit` by a newer one is closed, not
+ * held back: toasts replace each other and never queue, so an older toast
+ * can't come back when the newer one goes. Its swipe direction follows the
+ * viewport's edge unless `swipeDirection` is passed.
+ */
+export declare function ToastRoot({ layout, className, swipeDirection, toast: toastObject, ...props }: ToastRootProps): import("react").JSX.Element;
+export type ToastContentProps = StyledProps<Toast.Content.Props> & {
+  ref?: Ref<HTMLDivElement>;
+};
+/**
+ * The content layout (self-start, title-only sizing, body centering) needs to
+ * know which parts actually rendered. That used to be an ancestor `:has()`
+ * styling descendants — a whole-page recalculation trap in Chromium (#386).
+ * It measures the rendered DOM after layout instead, so wrapped parts and
+ * parts that render nothing behave exactly like the old selectors did.
+ *
+ * The three attributes are not React-managed props: the layout effect toggles
+ * them on this element directly (an attribute write on the component's own
+ * node, not a structural change, so it stays outside the #386 invalidation
+ * pattern). The measurement re-runs whenever this component renders; the
+ * default item rebuilds the content on every toast update, and a hand-written
+ * composition that flips a part without re-rendering ToastContent is not
+ * observed.
+ */
+export declare function ToastContent({ children, className, ref, ...props }: ToastContentProps): import("react").JSX.Element;
+export type ToastIconProps = ComponentPropsWithRef<"div">;
+export declare function ToastIcon({ className, ...props }: ToastIconProps): import("react").JSX.Element;
+export type ToastBodyProps = ComponentPropsWithRef<"div">;
+export declare function ToastBody({ className, ...props }: ToastBodyProps): import("react").JSX.Element;
+export type ToastActionsProps = ComponentPropsWithRef<"div">;
+export declare function ToastActions({ className, ...props }: ToastActionsProps): import("react").JSX.Element;
+export type ToastProgressProps = ComponentPropsWithRef<"div"> & {
+  duration?: number;
+};
+export declare function ToastProgress({ className, duration, style, ...props }: ToastProgressProps): import("react").JSX.Element;
+export type ToastTitleProps = StyledProps<Toast.Title.Props>;
+export declare function ToastTitle({ className, ...props }: ToastTitleProps): import("react").JSX.Element;
+export type ToastDescriptionProps = StyledProps<Toast.Description.Props>;
+export declare function ToastDescription({ className, ...props }: ToastDescriptionProps): import("react").JSX.Element;
+export type ToastActionProps = StyledProps<Toast.Action.Props> & {
+  loading?: boolean;
+  loadingLabel?: string;
+};
+export declare function ToastAction({ className, children, disabled, loading, loadingLabel, render, ...props }: ToastActionProps): import("react").JSX.Element;
+export type ToastCloseProps = StyledProps<Toast.Close.Props>;
+export declare function ToastClose({ className, children, ...props }: ToastCloseProps): import("react").JSX.Element;
+export type ToastArrowProps = StyledProps<Toast.Arrow.Props>;
+export declare function ToastArrow({ className, ...props }: ToastArrowProps): import("react").JSX.Element;
+//#endregion