@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/components/tabs.d.ts

@@ -0,0 +1,37 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+export declare const tabsListVariantNames: readonly ["default", "line", "steps"];
+export type TabsListVariant = (typeof tabsListVariantNames)[number];
+export type TabsProps = BaseTabs.Root.Props;
+/**
+ * Groups a tab list with its panels. Pass `value` and `onValueChange` to
+ * control the active tab, or `defaultValue` to let it manage itself.
+ * `orientation="vertical"` stacks the list beside the panels.
+ */
+export declare function Tabs({ className, orientation, ...props }: TabsProps): import("react").JSX.Element;
+export interface TabsListVariantOptions {
+    variant?: TabsListVariant | null;
+    className?: string;
+}
+/** Returns the list classes, for a custom element that should look like a tab list. */
+export declare function tabsListVariants({ variant, className, }?: TabsListVariantOptions): string;
+export interface TabsListProps extends BaseTabs.List.Props {
+    /**
+     * `default` is a filled segmented control. `line` underlines the active
+     * tab for page and panel sections. `steps` spreads the tabs across the
+     * width for a numbered setup flow.
+     */
+    variant?: TabsListVariant;
+}
+export declare function TabsList({ className, variant, ...props }: TabsListProps): import("react").JSX.Element;
+export type TabsTriggerProps = BaseTabs.Tab.Props;
+/**
+ * One tab. Its `value` matches a `TabsContent`. Mark leading or trailing
+ * icons with `data-icon="inline-start"` or `"inline-end"` to tighten padding.
+ */
+export declare function TabsTrigger({ className, ...props }: TabsTriggerProps): import("react").JSX.Element;
+export type TabsContentProps = BaseTabs.Panel.Props;
+/**
+ * The panel for one tab. Add `keepMounted` to keep inactive panels in the
+ * page, so form drafts and scroll positions survive tab changes.
+ */
+export declare function TabsContent({ className, ...props }: TabsContentProps): import("react").JSX.Element;

package/dist/components/tabs.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { cn, stateClassName } from "../internal/classes.js";
+export const tabsListVariantNames = ["default", "line", "steps"];
+/**
+ * Groups a tab list with its panels. Pass `value` and `onValueChange` to
+ * control the active tab, or `defaultValue` to let it manage itself.
+ * `orientation="vertical"` stacks the list beside the panels.
+ */
+export function Tabs({ className, orientation = "horizontal", ...props }) {
+    return (_jsx(BaseTabs.Root, { "data-slot": "tabs", orientation: orientation, ...props, className: stateClassName("sprout-tabs", className) }));
+}
+/** Returns the list classes, for a custom element that should look like a tab list. */
+export function tabsListVariants({ variant, className, } = {}) {
+    return cn("sprout-tabs-list", `sprout-tabs-list-${variant ?? "default"}`, className);
+}
+export function TabsList({ className, variant = "default", ...props }) {
+    return (_jsx(BaseTabs.List, { "data-slot": "tabs-list", "data-variant": variant, ...props, className: typeof className === "function"
+            ? (state) => tabsListVariants({ variant, className: className(state) })
+            : tabsListVariants({ variant, className }) }));
+}
+/**
+ * One tab. Its `value` matches a `TabsContent`. Mark leading or trailing
+ * icons with `data-icon="inline-start"` or `"inline-end"` to tighten padding.
+ */
+export function TabsTrigger({ className, ...props }) {
+    return (_jsx(BaseTabs.Tab, { "data-slot": "tabs-trigger", ...props, className: stateClassName("sprout-tabs-trigger", className) }));
+}
+/**
+ * The panel for one tab. Add `keepMounted` to keep inactive panels in the
+ * page, so form drafts and scroll positions survive tab changes.
+ */
+export function TabsContent({ className, ...props }) {
+    return (_jsx(BaseTabs.Panel, { "data-slot": "tabs-content", ...props, className: stateClassName("sprout-tabs-content", className) }));
+}

package/dist/components/textarea.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "react";
+export declare const textareaVariantNames: readonly ["default", "embedded"];
+export type TextareaVariant = (typeof textareaVariantNames)[number];
+export interface TextareaProps extends ComponentProps<"textarea"> {
+    /**
+     * `default` draws its own border, fill, and focus ring. `embedded` drops
+     * them so a surrounding group, such as a message composer, draws them.
+     */
+    variant?: TextareaVariant | null;
+}
+/**
+ * A multi-line text field on a native `textarea`. It takes every textarea
+ * prop, such as `value`, `rows`, `maxLength`, `readOnly`, and `ref`. It grows
+ * with its content from a 96px floor, or from `rows` lines when that is
+ * taller. Inside a Sprout `Field` it gets its id, description, and invalid,
+ * required, and disabled states from `useFieldControl`.
+ */
+export declare function Textarea({ variant, rows, className, style, ...rest }: TextareaProps): import("react").JSX.Element;

package/dist/components/textarea.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/classes.js";
+import { useFieldControl } from "./field.js";
+export const textareaVariantNames = ["default", "embedded"];
+/**
+ * A multi-line text field on a native `textarea`. It takes every textarea
+ * prop, such as `value`, `rows`, `maxLength`, `readOnly`, and `ref`. It grows
+ * with its content from a 96px floor, or from `rows` lines when that is
+ * taller. Inside a Sprout `Field` it gets its id, description, and invalid,
+ * required, and disabled states from `useFieldControl`.
+ */
+export function Textarea({ variant, rows, className, style, ...rest }) {
+    const props = useFieldControl(rest);
+    const kind = variant ?? "default";
+    return (_jsx("textarea", { "data-slot": "textarea", "data-variant": kind, rows: rows, ...props, style: rows
+            ? { "--sprout-textarea-rows": rows, ...style }
+            : style, className: cn("sprout-textarea", `sprout-textarea-variant-${kind}`, className) }));
+}

package/dist/components/toast.d.ts

@@ -0,0 +1,45 @@
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+/** Toast types that `Toaster` gives an icon. Any other `type` shows no icon. */
+export declare const toastTypeNames: readonly ["success", "error", "warning", "info", "loading"];
+export type ToastType = (typeof toastTypeNames)[number];
+export type ToastManager = ReturnType<typeof ToastPrimitive.createToastManager>;
+/** Makes a toast manager you can call from anywhere, inside or outside React. */
+export declare const createToastManager: typeof ToastPrimitive.createToastManager;
+/** Reads the nearest provider's toasts and its `add`, `update`, `close`, and `promise`. */
+export declare const useToastManager: typeof ToastPrimitive.useToastManager;
+/** The shared manager that `Toaster` uses when you don't pass one. */
+export declare const toast: ToastManager;
+export type ToastProviderProps = ToastPrimitive.Provider.Props;
+export declare function ToastProvider(props: ToastProviderProps): import("react").JSX.Element;
+export type ToastPortalProps = ToastPrimitive.Portal.Props;
+export declare function ToastPortal(props: ToastPortalProps): import("react").JSX.Element;
+export type ToastViewportProps = ToastPrimitive.Viewport.Props;
+/** The fixed region in the bottom corner that stacks toasts. Press F6 to focus it. */
+export declare function ToastViewport({ className, ...props }: ToastViewportProps): import("react").JSX.Element;
+export type ToastProps = ToastPrimitive.Root.Props;
+/** One toast in the stack. Pass the `toast` object from `useToastManager().toasts`. */
+export declare function Toast({ className, ...props }: ToastProps): import("react").JSX.Element;
+export type ToastContentProps = ToastPrimitive.Content.Props;
+export declare function ToastContent({ className, ...props }: ToastContentProps): import("react").JSX.Element;
+export type ToastTitleProps = ToastPrimitive.Title.Props;
+export declare function ToastTitle({ className, ...props }: ToastTitleProps): import("react").JSX.Element;
+export type ToastDescriptionProps = ToastPrimitive.Description.Props;
+export declare function ToastDescription({ className, ...props }: ToastDescriptionProps): import("react").JSX.Element;
+export type ToastActionProps = ToastPrimitive.Action.Props;
+/**
+ * A small outline button. It renders only when it has children, either its
+ * own or the toast's `actionProps.children`.
+ */
+export declare function ToastAction({ className, render, ...props }: ToastActionProps): import("react").JSX.Element;
+export type ToastCloseProps = ToastPrimitive.Close.Props;
+/** A ghost icon button labeled "Close toast". Its hit area extends 8px past the icon. */
+export declare function ToastClose({ className, children, render, ...props }: ToastCloseProps): import("react").JSX.Element;
+export interface ToasterProps extends ToastProviderProps {
+    /** Defaults to the shared `toast` manager. Pass your own to isolate a region. */
+    toastManager?: ToastProviderProps["toastManager"];
+}
+/**
+ * A provider with a ready-made viewport. Each toast shows an icon for its
+ * `type`, its title and description, an optional action, and a close button.
+ */
+export declare function Toaster({ children, toastManager, ...props }: ToasterProps): import("react").JSX.Element;

package/dist/components/toast.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { CheckCircle } from "reicon-react/icons/CheckCircle";
+import { Danger } from "reicon-react/icons/Danger";
+import { XCircle } from "reicon-react/icons/XCircle";
+import { InfoCircle } from "reicon-react/icons/InfoCircle";
+import { X } from "reicon-react/icons/X";
+import { stateClassName } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
+/** Toast types that `Toaster` gives an icon. Any other `type` shows no icon. */
+export const toastTypeNames = [
+    "success",
+    "error",
+    "warning",
+    "info",
+    "loading",
+];
+/** Makes a toast manager you can call from anywhere, inside or outside React. */
+export const createToastManager = ToastPrimitive.createToastManager;
+/** Reads the nearest provider's toasts and its `add`, `update`, `close`, and `promise`. */
+export const useToastManager = ToastPrimitive.useToastManager;
+/** The shared manager that `Toaster` uses when you don't pass one. */
+export const toast = createToastManager();
+export function ToastProvider(props) {
+    return _jsx(ToastPrimitive.Provider, { ...props });
+}
+export function ToastPortal(props) {
+    return _jsx(ToastPrimitive.Portal, { "data-slot": "toast-portal", ...props });
+}
+/** The fixed region in the bottom corner that stacks toasts. Press F6 to focus it. */
+export function ToastViewport({ className, ...props }) {
+    return (_jsx(ToastPrimitive.Viewport, { "data-slot": "toast-viewport", ...props, className: stateClassName("sprout-toast-viewport", className) }));
+}
+/** One toast in the stack. Pass the `toast` object from `useToastManager().toasts`. */
+export function Toast({ className, ...props }) {
+    return (_jsx(ToastPrimitive.Root, { "data-slot": "toast", ...props, className: stateClassName("sprout-toast", className) }));
+}
+export function ToastContent({ className, ...props }) {
+    return (_jsx(ToastPrimitive.Content, { "data-slot": "toast-content", ...props, className: stateClassName("sprout-toast-content", className) }));
+}
+export function ToastTitle({ className, ...props }) {
+    return (_jsx(ToastPrimitive.Title, { "data-slot": "toast-title", ...props, className: stateClassName("sprout-toast-title", className) }));
+}
+export function ToastDescription({ className, ...props }) {
+    return (_jsx(ToastPrimitive.Description, { "data-slot": "toast-description", ...props, className: stateClassName("sprout-toast-description", className) }));
+}
+/**
+ * A small outline button. It renders only when it has children, either its
+ * own or the toast's `actionProps.children`.
+ */
+export function ToastAction({ className, render = _jsx(Button, { variant: "outline", size: "sm" }), ...props }) {
+    return (_jsx(ToastPrimitive.Action, { "data-slot": "toast-action", render: render, ...props, className: stateClassName("sprout-toast-action", className) }));
+}
+/** A ghost icon button labeled "Close toast". Its hit area extends 8px past the icon. */
+export function ToastClose({ className, children, render = _jsx(Button, { variant: "ghost", size: "icon-sm" }), ...props }) {
+    return (_jsx(ToastPrimitive.Close, { "data-slot": "toast-close", "aria-label": "Close toast", render: render, ...props, className: stateClassName("sprout-toast-close", className), children: children ?? _jsx(X, { "aria-hidden": "true" }) }));
+}
+const toastIcons = {
+    success: _jsx(CheckCircle, { "aria-hidden": "true" }),
+    info: _jsx(InfoCircle, { "aria-hidden": "true" }),
+    warning: _jsx(Danger, { "aria-hidden": "true" }),
+    error: _jsx(XCircle, { "aria-hidden": "true" }),
+    loading: _jsx(Spinner, { "aria-hidden": "true" }),
+};
+function ToastIcon({ type }) {
+    const icon = type && type in toastIcons ? toastIcons[type] : null;
+    if (!icon)
+        return null;
+    return (_jsx("span", { "data-slot": "toast-icon", "data-type": type, className: "sprout-toast-icon", children: icon }));
+}
+function ToastList() {
+    const { toasts } = useToastManager();
+    return toasts.map((item) => (_jsx(Toast, { toast: item, children: _jsxs(ToastContent, { children: [_jsx(ToastIcon, { type: item.type }), _jsxs("div", { className: "sprout-toast-text", children: [_jsx(ToastTitle, {}), _jsx(ToastDescription, {})] }), _jsx(ToastAction, {}), _jsx(ToastClose, {})] }) }, item.id)));
+}
+/**
+ * A provider with a ready-made viewport. Each toast shows an icon for its
+ * `type`, its title and description, an optional action, and a close button.
+ */
+export function Toaster({ children, toastManager = toast, ...props }) {
+    return (_jsxs(ToastProvider, { toastManager: toastManager, ...props, children: [children, _jsx(ToastPortal, { children: _jsx(ToastViewport, { children: _jsx(ToastList, {}) }) })] }));
+}

package/dist/components/toggle-group.d.ts

@@ -0,0 +1,30 @@
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+export declare const toggleGroupVariantNames: readonly ["default", "outline"];
+export declare const toggleGroupSizeNames: readonly ["default", "sm", "lg"];
+export type ToggleGroupVariant = (typeof toggleGroupVariantNames)[number];
+export type ToggleGroupSize = (typeof toggleGroupSizeNames)[number];
+export interface ToggleGroupProps<Value extends string = string> extends BaseToggleGroup.Props<Value> {
+    /** `default` is borderless. `outline` draws a control border on each item. */
+    variant?: ToggleGroupVariant;
+    /** `sm` is 28px, `default` 32px, and `lg` 36px tall. */
+    size?: ToggleGroupSize;
+    /**
+     * Gap between items in 4px steps. `0` joins the items into one
+     * segmented control with shared borders and outer corners only.
+     */
+    spacing?: number;
+}
+/**
+ * A row or column of toggle buttons that share one value array. Pass
+ * `multiple` to let several items stay pressed. Arrow keys move focus
+ * between items; Space and Enter press the focused one.
+ */
+export declare function ToggleGroup<Value extends string = string>({ className, style, variant, size, spacing, orientation, children, ...props }: ToggleGroupProps<Value>): import("react").JSX.Element;
+export type ToggleGroupItemProps<Value extends string = string> = BaseToggle.Props<Value>;
+/**
+ * One toggle button in a `ToggleGroup`. Its `value` is added to the group
+ * value while pressed. It takes the group's variant, size, and spacing.
+ * An icon-only item needs an `aria-label`.
+ */
+export declare function ToggleGroupItem<Value extends string = string>({ className, ...props }: ToggleGroupItemProps<Value>): import("react").JSX.Element;

package/dist/components/toggle-group.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import { cn } from "../internal/classes.js";
+export const toggleGroupVariantNames = ["default", "outline"];
+export const toggleGroupSizeNames = ["default", "sm", "lg"];
+const ToggleGroupContext = createContext({
+    variant: "default",
+    size: "default",
+    spacing: 2,
+    orientation: "horizontal",
+});
+/**
+ * A row or column of toggle buttons that share one value array. Pass
+ * `multiple` to let several items stay pressed. Arrow keys move focus
+ * between items; Space and Enter press the focused one.
+ */
+export function ToggleGroup({ className, style, variant = "default", size = "default", spacing = 2, orientation = "horizontal", children, ...props }) {
+    const gap = { "--sprout-toggle-group-spacing": spacing };
+    return (_jsx(BaseToggleGroup, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, orientation: orientation, ...props, style: typeof style === "function"
+            ? (state) => ({ ...gap, ...style(state) })
+            : { ...gap, ...style }, className: typeof className === "function"
+            ? (state) => cn("sprout-toggle-group", className(state))
+            : cn("sprout-toggle-group", className), children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children: children }) }));
+}
+/**
+ * One toggle button in a `ToggleGroup`. Its `value` is added to the group
+ * value while pressed. It takes the group's variant, size, and spacing.
+ * An icon-only item needs an `aria-label`.
+ */
+export function ToggleGroupItem({ className, ...props }) {
+    const { variant, size, spacing, orientation } = useContext(ToggleGroupContext);
+    const base = cn("sprout-toggle-group-item", `sprout-toggle-group-item-${variant}`, `sprout-toggle-group-item-size-${size}`);
+    return (_jsx(BaseToggle, { "data-slot": "toggle-group-item", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, ...props, className: typeof className === "function"
+            ? (state) => cn(base, className(state))
+            : cn(base, className) }));
+}

package/dist/components/toggle.d.ts

@@ -0,0 +1,27 @@
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+export declare const toggleVariantNames: readonly ["default", "outline"];
+export declare const toggleSizeNames: readonly ["default", "sm", "lg"];
+export type ToggleVariant = (typeof toggleVariantNames)[number];
+export type ToggleSize = (typeof toggleSizeNames)[number];
+export interface ToggleVariantOptions {
+    variant?: ToggleVariant | null;
+    size?: ToggleSize | null;
+    className?: string;
+}
+/**
+ * Class names for a toggle look. Use it to give another pressable element,
+ * such as a Base UI `Toggle` inside your own group, the same style.
+ */
+export declare function toggleVariants({ variant, size, className, }?: ToggleVariantOptions): string;
+export interface ToggleProps<Value extends string = string> extends BaseToggle.Props<Value> {
+    /** `default` is borderless. `outline` draws a control border. */
+    variant?: ToggleVariant | null;
+    /** `sm` is 28px, `default` 32px, and `lg` 36px tall. */
+    size?: ToggleSize | null;
+}
+/**
+ * A two-state button. It sets `aria-pressed` and `data-pressed` while on.
+ * Use `pressed` and `onPressedChange` to control it, or `defaultPressed`.
+ * An icon-only toggle needs an `aria-label`.
+ */
+export declare function Toggle<Value extends string = string>({ variant, size, className, ...props }: ToggleProps<Value>): import("react").JSX.Element;

package/dist/components/toggle.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { cn, stateClassName } from "../internal/classes.js";
+export const toggleVariantNames = ["default", "outline"];
+export const toggleSizeNames = ["default", "sm", "lg"];
+/**
+ * Class names for a toggle look. Use it to give another pressable element,
+ * such as a Base UI `Toggle` inside your own group, the same style.
+ */
+export function toggleVariants({ variant, size, className, } = {}) {
+    return cn("sprout-toggle", `sprout-toggle-variant-${variant ?? "default"}`, `sprout-toggle-size-${size ?? "default"}`, className);
+}
+/**
+ * A two-state button. It sets `aria-pressed` and `data-pressed` while on.
+ * Use `pressed` and `onPressedChange` to control it, or `defaultPressed`.
+ * An icon-only toggle needs an `aria-label`.
+ */
+export function Toggle({ variant, size, className, ...props }) {
+    return (_jsx(BaseToggle, { "data-slot": "toggle", "data-variant": variant ?? "default", "data-size": size ?? "default", ...props, className: stateClassName(toggleVariants({ variant, size }), className) }));
+}

package/dist/components/tool-activity.d.ts

@@ -0,0 +1,79 @@
+import { type ReactNode } from "react";
+export declare const toolActivityStatusNames: readonly ["queued", "running", "waiting", "completed", "blocked", "failed", "cancelled", "unknown"];
+export declare const toolActivityVariantNames: readonly ["collapsible", "stepper", "transcript"];
+export type ToolActivityStatus = (typeof toolActivityStatusNames)[number];
+export type ToolActivityVariant = (typeof toolActivityVariantNames)[number];
+export interface ToolActivitySource {
+    url: string;
+    title: string;
+}
+export interface ToolActivityItem {
+    id: string;
+    label: string;
+    status: ToolActivityStatus;
+    /** A 14px icon or `BrandIcon size="inline"` for the tool or app. */
+    visual: ReactNode;
+    /** One line under the label. Red when the item is `failed` or `blocked`. */
+    detail?: string | undefined;
+    /** Extra content under the row, lined up with the label, such as a retry button or a details toggle. */
+    details?: ReactNode;
+    /** Web pages the tool read. Shown as source chips. */
+    urls?: readonly string[] | undefined;
+    /** Pages that could not be read. Their chips show a warning. */
+    failedUrls?: readonly string[] | undefined;
+    /** The search text a web search used. */
+    query?: string | undefined;
+    /** Titles for `urls`. Chips without a title show the address. */
+    sources?: readonly ToolActivitySource[] | undefined;
+}
+/** Returns an image address for a page's icon, or nothing to show a globe. */
+export type ToolActivitySourceIcon = (url: string) => string | null | undefined;
+export interface ActivityPanelProps {
+    /** Shows a spinner and “Working…”. Otherwise the trigger reads “Worked”. */
+    working: boolean;
+    /** What is happening now, shown beside “Working…”. */
+    activityLabel?: string | null | undefined;
+    /** Draws a line under the panel when a result follows it. */
+    hasResult?: boolean | undefined;
+    /** Closes the panel once work stops, and reopens it when work restarts. */
+    collapseWhenDone?: boolean | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+/**
+ * A collapsible frame for live agent work. It holds a scrolling timeline,
+ * usually a stepper `ToolActivity`, and is at most 40% of its parent's height.
+ */
+export declare function ActivityPanel({ working, activityLabel, hasResult, collapseWhenDone, className, children, }: ActivityPanelProps): import("react").JSX.Element;
+export interface ToolActivityProps {
+    items: ToolActivityItem[];
+    /** The reply is still working, even if no item is running. */
+    active?: boolean | undefined;
+    /** The accessible name of the list. */
+    label?: string | undefined;
+    /** What is happening now. `transcript` shows it after “Working…”. */
+    activityLabel?: string | null | undefined;
+    /** Called when someone opens or closes the list. */
+    onToggle?: (() => void) | undefined;
+    /**
+     * `collapsible` opens while work is pending and closes when it settles.
+     * `stepper` is always open, oldest first, and follows the newest row in an
+     * `ActivityPanel`. `transcript` starts closed under a chat reply.
+     */
+    variant?: ToolActivityVariant | undefined;
+    /** Stepper only: loads older rows when the top of the panel scrolls in. */
+    onLoadOlder?: (() => void) | undefined;
+    /** Stepper only: retries a failed older load. */
+    onRetryOlder?: (() => void) | undefined;
+    hasOlder?: boolean | undefined;
+    loadingOlder?: boolean | undefined;
+    olderError?: boolean | undefined;
+    /** Resolves an icon image for a source chip. Without it chips show a globe. */
+    sourceIcon?: ToolActivitySourceIcon | undefined;
+    className?: string | undefined;
+}
+/**
+ * A timeline of the tools an agent used, with a status mark per row,
+ * web sources, and a summary trigger that counts problems.
+ */
+export declare function ToolActivity({ items, active, label, activityLabel, onToggle, variant, onLoadOlder, onRetryOlder, hasOlder, loadingOlder, olderError, sourceIcon, className, }: ToolActivityProps): import("react").JSX.Element | null;