@ciridae/ui 0.2.0

package/README.md

@@ -0,0 +1,31 @@
+# @ciridae/ui
+
+Ciridae UI package output from https://ciridae-ui.ciridae.app.
+
+Install from the hosted tarball:
+
+```json
+{
+	"dependencies": {
+		"@ciridae/ui": "https://ciridae-ui.ciridae.app/npm/ciridae-ui-0.2.0.tgz"
+	}
+}
+```
+
+The shadcn registry remains available at https://ciridae-ui.ciridae.app/r/{name}.json.
+
+Theme overrides should target the standard semantic variables after importing the package CSS:
+
+```css
+@import "@ciridae/ui/styles.css";
+
+:root {
+	--primary: oklch(0.42 0.08 245);
+	--primary-foreground: oklch(0.99 0 0);
+}
+
+.dark {
+	--primary: oklch(0.78 0.07 245);
+	--primary-foreground: oklch(0.12 0.002 260);
+}
+```

package/dist/components/agentic/agent-card.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { Accordion, AccordionItem } from "@ciridae/ui/accordion";
+type AgentProps = React.ComponentProps<"div">;
+type AgentHeaderProps = React.ComponentProps<"div"> & {
+    status?: string;
+};
+type AgentContentProps = React.ComponentProps<"div">;
+type AgentInstructionsProps = React.ComponentProps<"div">;
+type AgentToolsProps = Omit<React.ComponentProps<typeof Accordion>, "collapsible" | "defaultValue" | "onValueChange" | "type" | "value"> & {
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
+};
+type AgentToolProps = Omit<React.ComponentProps<typeof AccordionItem>, "value"> & {
+    description?: string;
+    name: string;
+    value?: string;
+};
+type AgentOutputProps = React.ComponentProps<"div">;
+declare function Agent({ className, ...props }: AgentProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentHeader({ children, className, status, ...props }: AgentHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentContent({ className, ...props }: AgentContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentInstructions({ className, ...props }: AgentInstructionsProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentTools(props: AgentToolsProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentTool({ children, description, name, value, ...props }: AgentToolProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentOutput({ className, ...props }: AgentOutputProps): import("react/jsx-runtime").JSX.Element;
+export { Agent, AgentContent, AgentHeader, AgentInstructions, AgentOutput, AgentTool, AgentTools };
+export type { AgentContentProps, AgentHeaderProps, AgentInstructionsProps, AgentOutputProps, AgentProps, AgentToolProps, AgentToolsProps, };

package/dist/components/agentic/agent-card.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BotIcon } from "lucide-react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@ciridae/ui/accordion";
+import { Badge } from "@ciridae/ui/badge";
+import { cn } from "@ciridae/ui/utils";
+function Agent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent", className: cn("grid gap-3 rounded-lg border bg-card p-4", className), ...props }));
+}
+function AgentHeader({ children, className, status, ...props }) {
+    return (_jsxs("div", { "data-slot": "agent-header", className: cn("flex min-w-0 items-start justify-between gap-3", className), ...props, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(BotIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("div", { className: "min-w-0", children: children })] }), status ? _jsx(Badge, { variant: "outline", children: status }) : null] }));
+}
+function AgentContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "agent-content", className: cn("grid gap-3", className), ...props });
+}
+function AgentInstructions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-instructions", className: cn("rounded-md bg-muted/40 p-3 text-sm text-muted-foreground", className), ...props }));
+}
+function AgentTools(props) {
+    return _jsx(Accordion, { "data-slot": "agent-tools", type: "single", collapsible: true, ...props });
+}
+function AgentTool({ children, description, name, value, ...props }) {
+    return (_jsxs(AccordionItem, { "data-slot": "agent-tool", value: value ?? name, ...props, children: [_jsx(AccordionTrigger, { children: name }), _jsxs(AccordionContent, { children: [description ? _jsx("p", { className: "mb-2 text-sm text-muted-foreground", children: description }) : null, children] })] }));
+}
+function AgentOutput({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-output", className: cn("rounded-md border bg-muted/30 p-3 text-sm", className), ...props }));
+}
+export { Agent, AgentContent, AgentHeader, AgentInstructions, AgentOutput, AgentTool, AgentTools };

package/dist/components/agentic/agent-composer.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { type AgenticAttachment, type AttachmentError } from "@ciridae/ui/attachments";
+import { type EffortSelectorValue } from "@ciridae/ui/effort-selector";
+import { type PromptInputDensity, type PromptInputMessage, type PromptInputSurface } from "@ciridae/ui/prompt-input";
+import type { AgenticChatStatus } from "@ciridae/ui/types";
+type AgentComposerModel = {
+    description?: string;
+    group?: string;
+    id: string;
+    label: string;
+    provider: string;
+    shortcut?: string;
+    src?: string;
+};
+type AgentComposerProps = Omit<React.ComponentProps<"div">, "onSubmit"> & {
+    accept?: string;
+    attachments?: AgenticAttachment[];
+    defaultAttachments?: AgenticAttachment[];
+    defaultValue?: string;
+    density?: PromptInputDensity;
+    disabled?: boolean;
+    effort: EffortSelectorValue;
+    focusHint?: React.ReactNode;
+    globalDrop?: boolean;
+    maxAttachmentSizeMb?: number;
+    maxAttachments?: number;
+    model: string;
+    models: AgentComposerModel[];
+    multiple?: boolean;
+    onAttachmentError?: (error: AttachmentError) => void;
+    onAttachmentsChange?: (attachments: AgenticAttachment[]) => void;
+    onEffortChange: (value: EffortSelectorValue) => void;
+    onModelChange: (modelId: string) => void;
+    onStop?: () => void;
+    onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    status?: AgenticChatStatus;
+    surface?: PromptInputSurface;
+    value?: string;
+};
+declare function AgentComposer({ accept, attachments, className, defaultAttachments, defaultValue, density, disabled, effort, focusHint, globalDrop, maxAttachmentSizeMb, maxAttachments, model, models, multiple, onAttachmentError, onAttachmentsChange, onEffortChange, onModelChange, onStop, onSubmit, onValueChange, placeholder, status, surface, value, ...props }: AgentComposerProps): import("react/jsx-runtime").JSX.Element;
+export { AgentComposer };
+export type { AgentComposerModel, AgentComposerProps };

package/dist/components/agentic/agent-composer.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable complexity, max-lines, max-lines-per-function, react/jsx-max-depth */
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import * as React from "react";
+import { AttachmentList, useAttachments, } from "@ciridae/ui/attachments";
+import { EffortSelector } from "@ciridae/ui/effort-selector";
+import { ModelSelector, ModelSelectorContent, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorName, ModelSelectorShortcut, ModelSelectorTrigger, } from "@ciridae/ui/model-selector";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputBody, PromptInputDropOverlay, PromptInputFocusHint, PromptInputProvider, PromptInputSubmit, PromptInputTextarea, PromptInputTools, } from "@ciridae/ui/prompt-input";
+import { Button } from "@ciridae/ui/button";
+import { cn } from "@ciridae/ui/utils";
+function AgentComposer({ accept, attachments, className, defaultAttachments, defaultValue, density = "comfortable", disabled, effort, focusHint, globalDrop, maxAttachmentSizeMb = 25, maxAttachments = 4, model, models, multiple = true, onAttachmentError, onAttachmentsChange, onEffortChange, onModelChange, onStop, onSubmit, onValueChange, placeholder = "Ask anything", status = "idle", surface = "glass", value, ...props }) {
+    const containerRef = React.useRef(null);
+    const [localValue, setLocalValue] = React.useState(defaultValue ?? "");
+    const resolvedValue = value ?? localValue;
+    const [isDragOver, dropHandlers] = useAgentComposerDropOverlay();
+    const selectedModel = getSelectedModel(models, model);
+    const hasText = Boolean(resolvedValue.trim());
+    const isRunning = status === "submitted" || status === "streaming";
+    useComposerFocusShortcut(containerRef);
+    return (_jsx("div", { ref: containerRef, className: cn("w-full", className), ...props, children: _jsx(PromptInputProvider, { accept: accept, attachments: attachments, defaultAttachments: defaultAttachments, maxAttachmentSizeMb: maxAttachmentSizeMb, maxAttachments: maxAttachments, multiple: multiple, onAttachmentError: onAttachmentError, onAttachmentsChange: onAttachmentsChange, onValueChange: (nextValue) => {
+                if (value === undefined)
+                    setLocalValue(nextValue);
+                onValueChange?.(nextValue);
+            }, value: resolvedValue, children: _jsxs(PromptInput, { density: density, disabled: disabled, globalDrop: globalDrop, maxAttachments: maxAttachments, onSubmit: onSubmit, status: status, surface: surface, ...dropHandlers, children: [_jsxs(PromptInputBody, { children: [_jsx(AgentComposerPromptArea, { focusHint: focusHint, hasText: hasText, density: density, placeholder: placeholder }), _jsxs(PromptInputTools, { children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(AgentComposerModelSelector, { disabled: disabled || isRunning, model: selectedModel, models: models, onModelChange: onModelChange }), _jsx(EffortSelector, { disabled: disabled || isRunning, value: effort, onValueChange: onEffortChange })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(PromptInputActionAddAttachments, { disabled: disabled || isRunning, tooltip: "Add files" }), _jsx(PromptInputSubmit, { disabled: disabled, onStop: onStop, status: status })] })] })] }), _jsx(PromptInputDropOverlay, { visible: isDragOver })] }) }) }));
+}
+function AgentComposerPromptArea({ focusHint, hasText, density, placeholder, }) {
+    const attachments = useAttachments();
+    const [attachmentOffset, setAttachmentOffset] = React.useState(0);
+    const attachmentRef = React.useRef(null);
+    const hasAttachments = attachments.files.length > 0;
+    React.useLayoutEffect(() => {
+        const node = attachmentRef.current;
+        if (!node || !hasAttachments) {
+            setAttachmentOffset(0);
+            return;
+        }
+        const update = () => setAttachmentOffset(node.offsetWidth + 8);
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [hasAttachments]);
+    return (_jsxs("div", { className: cn("relative px-3", density === "comfortable" ? "min-h-20 py-3" : "min-h-9 py-2"), children: [hasAttachments ? (_jsx(AttachmentList, { ref: attachmentRef, className: cn("absolute left-3 z-10 max-w-[min(18rem,calc(100%-7rem))] flex-nowrap overflow-hidden", density === "comfortable" ? "top-[0.8125rem]" : "top-[0.5625rem]", "[&_[data-slot=attachment]]:h-[1.375rem] [&_[data-slot=attachment]]:max-w-full [&_[data-slot=attachment]]:gap-1 [&_[data-slot=attachment]]:rounded-[0.25rem] [&_[data-slot=attachment]]:px-1 [&_[data-slot=attachment]]:pr-1.5", "[&_[data-slot=attachment-info]]:gap-0 [&_[data-slot=attachment-info]>span]:text-[0.75rem] [&_[data-slot=attachment-info]>span]:leading-none", "[&_[data-slot=attachment-preview]]:size-4 [&_[data-slot=attachment-status]]:size-3.5") })) : null, _jsx(PromptInputTextarea, { placeholder: hasAttachments ? "" : placeholder, style: attachmentOffset ? { textIndent: attachmentOffset } : undefined, className: cn("!w-full !px-0 !py-0 pr-32 text-base leading-relaxed md:text-sm", density === "comfortable" ? "!min-h-20" : "!min-h-6") }), _jsx(PromptInputFocusHint, { visible: !hasAttachments && !hasText, children: focusHint })] }));
+}
+function AgentComposerModelSelector({ disabled, model, models, onModelChange, }) {
+    return (_jsxs(ModelSelector, { children: [_jsx(ModelSelectorTrigger, { asChild: true, children: _jsxs(Button, { className: "h-7 max-w-44 justify-start gap-1.5 rounded-md px-1.5 text-xs", disabled: disabled, type: "button", variant: "ghost", children: [_jsx(ModelSelectorLogo, { provider: model.provider, src: model.src }), _jsx(ModelSelectorName, { className: "max-w-32 flex-none", children: model.label }), _jsx(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 text-muted-foreground" })] }) }), _jsxs(ModelSelectorContent, { title: "Select model", children: [_jsx(ModelSelectorInput, { placeholder: "Search models..." }), _jsxs(ModelSelectorList, { children: [_jsx(ModelSelectorEmpty, { children: "No models found." }), groupModels(models).map(([group, groupModels]) => (_jsx(ModelSelectorGroup, { heading: group, children: groupModels.map((option) => (_jsxs(ModelSelectorItem, { value: `${option.label} ${option.id} ${option.provider}`, onSelect: () => onModelChange(option.id), children: [_jsx(ModelSelectorLogo, { className: "size-8 rounded-md p-1", provider: option.provider, src: option.src }), _jsxs(ModelSelectorName, { children: [_jsx("span", { className: "block truncate", children: option.label }), option.description ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground", children: option.description })) : null] }), option.shortcut ? (_jsx(ModelSelectorShortcut, { children: option.shortcut })) : null, model.id === option.id ? _jsx(CheckIcon, {}) : null] }, option.id))) }, group)))] })] })] }));
+}
+function useComposerFocusShortcut(containerRef) {
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "l")
+                return;
+            const textarea = containerRef.current?.querySelector('[data-slot="prompt-input-textarea"]');
+            if (!textarea)
+                return;
+            event.preventDefault();
+            textarea.focus();
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [containerRef]);
+}
+function useAgentComposerDropOverlay() {
+    const [dragDepth, setDragDepth] = React.useState(0);
+    const isDragOver = dragDepth > 0;
+    const handleDragEnter = React.useCallback((event) => {
+        if (!event.dataTransfer.types.includes("Files"))
+            return;
+        setDragDepth((depth) => depth + 1);
+    }, []);
+    const handleDragLeave = React.useCallback((event) => {
+        if (!event.dataTransfer.types.includes("Files"))
+            return;
+        setDragDepth((depth) => Math.max(0, depth - 1));
+    }, []);
+    const handleDrop = React.useCallback(() => setDragDepth(0), []);
+    const handleDragEnd = React.useCallback(() => setDragDepth(0), []);
+    return [
+        isDragOver,
+        {
+            onDragEnd: handleDragEnd,
+            onDragEnter: handleDragEnter,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+        },
+    ];
+}
+function getSelectedModel(models, modelId) {
+    return models.find((model) => model.id === modelId) ?? models[0] ?? fallbackModel;
+}
+function groupModels(models) {
+    const groups = new Map();
+    for (const model of models) {
+        const group = model.group ?? "Models";
+        groups.set(group, [...(groups.get(group) ?? []), model]);
+    }
+    return Array.from(groups.entries());
+}
+const fallbackModel = {
+    id: "model",
+    label: "Model",
+    provider: "openai",
+};
+export { AgentComposer };

package/dist/components/agentic/agent-context.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import type { AgenticContextUsage } from "@ciridae/ui/types";
+import { Button } from "@ciridae/ui/button";
+import { HoverCard, HoverCardContent } from "@ciridae/ui/hover-card";
+type AgentContextProps = React.ComponentProps<typeof HoverCard> & AgenticContextUsage;
+type AgentContextTriggerProps = React.ComponentProps<typeof Button>;
+type AgentContextContentProps = React.ComponentProps<typeof HoverCardContent>;
+type AgentContextContentHeaderProps = React.ComponentProps<"div">;
+type AgentContextContentBodyProps = React.ComponentProps<"div">;
+type AgentContextContentFooterProps = React.ComponentProps<"div">;
+type AgentContextUsageRowProps = React.ComponentProps<"div"> & {
+    costText?: string;
+    label: string;
+    tokens?: number;
+};
+declare function AgentContext({ cacheCostText, cachedInputTokens, children, inputCostText, inputTokens, maxTokens, outputCostText, outputTokens, reasoningCostText, reasoningTokens, totalCostText, usedTokens, ...props }: AgentContextProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentContextTrigger({ children, ...props }: AgentContextTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentContextContent({ className, ...props }: AgentContextContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentContextContentHeader({ children, className, ...props }: AgentContextContentHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentContextContentBody({ className, ...props }: AgentContextContentBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentContextContentFooter({ children, className, ...props }: AgentContextContentFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentContextUsageRow({ className, costText, label, tokens, ...props }: AgentContextUsageRowProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AgentContextInputUsage(props: Omit<AgentContextUsageRowProps, "label" | "tokens">): import("react/jsx-runtime").JSX.Element;
+declare function AgentContextOutputUsage(props: Omit<AgentContextUsageRowProps, "label" | "tokens">): import("react/jsx-runtime").JSX.Element;
+declare function AgentContextReasoningUsage(props: Omit<AgentContextUsageRowProps, "label" | "tokens">): import("react/jsx-runtime").JSX.Element;
+declare function AgentContextCacheUsage(props: Omit<AgentContextUsageRowProps, "label" | "tokens">): import("react/jsx-runtime").JSX.Element;
+export { AgentContext, AgentContextCacheUsage, AgentContextContent, AgentContextContentBody, AgentContextContentFooter, AgentContextContentHeader, AgentContextInputUsage, AgentContextOutputUsage, AgentContextReasoningUsage, AgentContextTrigger, AgentContextUsageRow, };
+export type { AgentContextContentBodyProps, AgentContextContentFooterProps, AgentContextContentHeaderProps, AgentContextContentProps, AgentContextProps, AgentContextTriggerProps, AgentContextUsageRowProps, };

package/dist/components/agentic/agent-context.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { Button } from "@ciridae/ui/button";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@ciridae/ui/hover-card";
+import { Progress } from "@ciridae/ui/progress";
+import { cn } from "@ciridae/ui/utils";
+const PERCENT_MAX = 100;
+const AgentContextContext = createContext(null);
+function useAgentContext() {
+    const context = useContext(AgentContextContext);
+    if (!context)
+        throw new Error("AgentContext components must be used within AgentContext");
+    return context;
+}
+function AgentContext({ cacheCostText, cachedInputTokens, children, inputCostText, inputTokens, maxTokens, outputCostText, outputTokens, reasoningCostText, reasoningTokens, totalCostText, usedTokens, ...props }) {
+    const { closeDelay = 0, openDelay = 0, ...hoverCardProps } = props;
+    const contextValue = useMemo(() => ({
+        cacheCostText,
+        cachedInputTokens,
+        inputCostText,
+        inputTokens,
+        maxTokens,
+        outputCostText,
+        outputTokens,
+        reasoningCostText,
+        reasoningTokens,
+        totalCostText,
+        usedTokens,
+    }), [
+        cacheCostText,
+        cachedInputTokens,
+        inputCostText,
+        inputTokens,
+        maxTokens,
+        outputCostText,
+        outputTokens,
+        reasoningCostText,
+        reasoningTokens,
+        totalCostText,
+        usedTokens,
+    ]);
+    return (_jsx(AgentContextContext.Provider, { value: contextValue, children: _jsx(HoverCard, { closeDelay: closeDelay, openDelay: openDelay, ...hoverCardProps, children: children }) }));
+}
+function AgentContextTrigger({ children, ...props }) {
+    const { maxTokens, usedTokens } = useAgentContext();
+    const usedPercent = getUsagePercent(usedTokens, maxTokens);
+    return (_jsx(HoverCardTrigger, { asChild: true, children: children ? (_jsx(Button, { "data-slot": "agent-context-trigger", type: "button", variant: "ghost", ...props, asChild: true, children: children })) : (_jsxs(Button, { "data-slot": "agent-context-trigger", type: "button", variant: "ghost", ...props, children: [_jsx("span", { className: "font-medium text-muted-foreground", children: formatPercent(usedPercent) }), _jsx(AgentContextIcon, { usedPercent: usedPercent })] })) }));
+}
+function AgentContextIcon({ usedPercent }) {
+    const radius = 10;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = circumference * (1 - usedPercent);
+    return (_jsxs("svg", { "aria-label": "Context usage", className: "size-5", role: "img", viewBox: "0 0 24 24", children: [_jsx("circle", { cx: "12", cy: "12", fill: "none", opacity: "0.25", r: radius, stroke: "currentColor", strokeWidth: "2" }), _jsx("circle", { cx: "12", cy: "12", fill: "none", opacity: "0.75", r: radius, stroke: "currentColor", strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: dashOffset, strokeLinecap: "round", strokeWidth: "2", style: { transform: "rotate(-90deg)", transformOrigin: "center" } })] }));
+}
+function AgentContextContent({ className, ...props }) {
+    return (_jsx(HoverCardContent, { "data-slot": "agent-context-content", className: cn("w-72 divide-y overflow-hidden p-0", className), ...props }));
+}
+function AgentContextContentHeader({ children, className, ...props }) {
+    const { maxTokens, usedTokens } = useAgentContext();
+    const usedPercent = getUsagePercent(usedTokens, maxTokens);
+    return (_jsx("div", { "data-slot": "agent-context-content-header", className: cn("grid gap-2 p-3", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [_jsx("span", { children: formatPercent(usedPercent) }), _jsxs("span", { className: "font-mono text-muted-foreground", children: [formatCompact(usedTokens), " / ", formatCompact(maxTokens)] })] }), _jsx(Progress, { value: usedPercent * PERCENT_MAX })] })) }));
+}
+function AgentContextContentBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-context-content-body", className: cn("grid gap-2 p-3", className), ...props }));
+}
+function AgentContextContentFooter({ children, className, ...props }) {
+    const { totalCostText } = useAgentContext();
+    return (_jsx("div", { "data-slot": "agent-context-content-footer", className: cn("flex items-center justify-between gap-3 bg-secondary p-3 text-xs", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground", children: "Total cost" }), _jsx("span", { children: totalCostText ?? "Provided by host" })] })) }));
+}
+function AgentContextUsageRow({ className, costText, label, tokens, ...props }) {
+    if (tokens === undefined)
+        return null;
+    return (_jsxs("div", { "data-slot": "agent-context-usage-row", className: cn("flex items-center justify-between gap-3 text-xs", className), ...props, children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsxs("span", { className: "font-mono", children: [formatCompact(tokens), costText ? _jsx("span", { className: "ml-2 font-sans text-muted-foreground", children: costText }) : null] })] }));
+}
+function AgentContextInputUsage(props) {
+    const { inputCostText, inputTokens } = useAgentContext();
+    return (_jsx(AgentContextUsageRow, { costText: inputCostText, label: "Input", tokens: inputTokens, ...props }));
+}
+function AgentContextOutputUsage(props) {
+    const { outputCostText, outputTokens } = useAgentContext();
+    return (_jsx(AgentContextUsageRow, { costText: outputCostText, label: "Output", tokens: outputTokens, ...props }));
+}
+function AgentContextReasoningUsage(props) {
+    const { reasoningCostText, reasoningTokens } = useAgentContext();
+    return (_jsx(AgentContextUsageRow, { costText: reasoningCostText, label: "Reasoning", tokens: reasoningTokens, ...props }));
+}
+function AgentContextCacheUsage(props) {
+    const { cacheCostText, cachedInputTokens } = useAgentContext();
+    return (_jsx(AgentContextUsageRow, { costText: cacheCostText, label: "Cache", tokens: cachedInputTokens, ...props }));
+}
+function getUsagePercent(usedTokens, maxTokens) {
+    if (maxTokens <= 0)
+        return 0;
+    return Math.min(1, Math.max(0, usedTokens / maxTokens));
+}
+function formatPercent(value) {
+    return new Intl.NumberFormat("en-US", { maximumFractionDigits: 1, style: "percent" }).format(value);
+}
+function formatCompact(value) {
+    return new Intl.NumberFormat("en-US", { notation: "compact" }).format(value);
+}
+export { AgentContext, AgentContextCacheUsage, AgentContextContent, AgentContextContentBody, AgentContextContentFooter, AgentContextContentHeader, AgentContextInputUsage, AgentContextOutputUsage, AgentContextReasoningUsage, AgentContextTrigger, AgentContextUsageRow, };

package/dist/components/agentic/agent-plan.d.ts

@@ -0,0 +1,27 @@
+import type * as React from "react";
+import { CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@ciridae/ui/card";
+import { Collapsible, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+type AgentPlanProps = React.ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+};
+type AgentPlanHeaderProps = React.ComponentProps<typeof CardHeader>;
+type AgentPlanTitleProps = Omit<React.ComponentProps<typeof CardTitle>, "children"> & {
+    children: string;
+};
+type AgentPlanDescriptionProps = Omit<React.ComponentProps<typeof CardDescription>, "children"> & {
+    children: string;
+};
+type AgentPlanActionProps = React.ComponentProps<typeof CardAction>;
+type AgentPlanContentProps = React.ComponentProps<typeof CardContent>;
+type AgentPlanFooterProps = React.ComponentProps<typeof CardFooter>;
+type AgentPlanTriggerProps = React.ComponentProps<typeof CollapsibleTrigger>;
+declare function AgentPlan({ children, className, isStreaming, ...props }: AgentPlanProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentPlanHeader({ className, ...props }: AgentPlanHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentPlanTitle({ children, className, ...props }: AgentPlanTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentPlanDescription({ children, className, ...props }: AgentPlanDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentPlanAction(props: AgentPlanActionProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentPlanContent(props: AgentPlanContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentPlanFooter(props: AgentPlanFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentPlanTrigger({ className, type, ...props }: AgentPlanTriggerProps): import("react/jsx-runtime").JSX.Element;
+export { AgentPlan, AgentPlanAction, AgentPlanContent, AgentPlanDescription, AgentPlanFooter, AgentPlanHeader, AgentPlanTitle, AgentPlanTrigger, };
+export type { AgentPlanActionProps, AgentPlanContentProps, AgentPlanDescriptionProps, AgentPlanFooterProps, AgentPlanHeaderProps, AgentPlanProps, AgentPlanTitleProps, AgentPlanTriggerProps, };

package/dist/components/agentic/agent-plan.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronsUpDownIcon } from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { Shimmer } from "@ciridae/ui/shimmer";
+import { Button } from "@ciridae/ui/button";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@ciridae/ui/card";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { cn } from "@ciridae/ui/utils";
+const AgentPlanContext = createContext(null);
+function useAgentPlan() {
+    const context = useContext(AgentPlanContext);
+    if (!context)
+        throw new Error("AgentPlan components must be used within AgentPlan");
+    return context;
+}
+function AgentPlan({ children, className, isStreaming = false, ...props }) {
+    const contextValue = useMemo(() => ({ isStreaming }), [isStreaming]);
+    return (_jsx(AgentPlanContext.Provider, { value: contextValue, children: _jsx(Collapsible, { "data-slot": "agent-plan", className: "w-full min-w-0", ...props, children: _jsx(Card, { className: cn("w-full min-w-0 shadow-none", className), children: children }) }) }));
+}
+function AgentPlanHeader({ className, ...props }) {
+    return (_jsx(CardHeader, { "data-slot": "agent-plan-header", className: cn("relative block min-w-0 space-y-2 pr-[calc(var(--spacing)*11)]", className), ...props }));
+}
+function AgentPlanTitle({ children, className, ...props }) {
+    const { isStreaming } = useAgentPlan();
+    return (_jsx(CardTitle, { "data-slot": "agent-plan-title", className: cn("min-w-0 text-pretty", className), ...props, children: isStreaming ? _jsx(Shimmer, { children: children }) : children }));
+}
+function AgentPlanDescription({ children, className, ...props }) {
+    const { isStreaming } = useAgentPlan();
+    return (_jsx(CardDescription, { "data-slot": "agent-plan-description", className: cn("text-balance", className), ...props, children: isStreaming ? _jsx(Shimmer, { children: children }) : children }));
+}
+function AgentPlanAction(props) {
+    return (_jsx(CardAction, { "data-slot": "agent-plan-action", ...props, className: cn("absolute top-0 right-(--panel-padding)", props.className) }));
+}
+function AgentPlanContent(props) {
+    return (_jsx(CollapsibleContent, { asChild: true, children: _jsx(CardContent, { "data-slot": "agent-plan-content", ...props }) }));
+}
+function AgentPlanFooter(props) {
+    return _jsx(CardFooter, { "data-slot": "agent-plan-footer", ...props });
+}
+function AgentPlanTrigger({ className, type = "button", ...props }) {
+    return (_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { "data-slot": "agent-plan-trigger", className: cn("size-8", className), size: "icon", variant: "ghost", ...props, type: type, children: [_jsx(ChevronsUpDownIcon, { "aria-hidden": "true", className: "size-4" }), _jsx("span", { className: "sr-only", children: "Toggle plan" })] }) }));
+}
+export { AgentPlan, AgentPlanAction, AgentPlanContent, AgentPlanDescription, AgentPlanFooter, AgentPlanHeader, AgentPlanTitle, AgentPlanTrigger, };

package/dist/components/agentic/agent-queue.d.ts

@@ -0,0 +1,46 @@
+import type * as React from "react";
+import { Button } from "@ciridae/ui/button";
+import { Collapsible, CollapsibleContent } from "@ciridae/ui/collapsible";
+import { ScrollArea } from "@ciridae/ui/scroll-area";
+type AgentQueueProps = React.ComponentProps<"div">;
+type AgentQueueSectionProps = React.ComponentProps<typeof Collapsible>;
+type AgentQueueSectionTriggerProps = React.ComponentProps<"button">;
+type AgentQueueSectionLabelProps = React.ComponentProps<"span"> & {
+    count?: number;
+    icon?: React.ReactNode;
+    label: string;
+};
+type AgentQueueSectionContentProps = React.ComponentProps<typeof CollapsibleContent>;
+type AgentQueueListProps = React.ComponentProps<typeof ScrollArea>;
+type AgentQueueItemProps = React.ComponentProps<"li">;
+type AgentQueueItemIndicatorProps = React.ComponentProps<"span"> & {
+    completed?: boolean;
+};
+type AgentQueueItemContentProps = React.ComponentProps<"span"> & {
+    completed?: boolean;
+};
+type AgentQueueItemDescriptionProps = React.ComponentProps<"div"> & {
+    completed?: boolean;
+};
+type AgentQueueItemActionsProps = React.ComponentProps<"div">;
+type AgentQueueItemActionProps = Omit<React.ComponentProps<typeof Button>, "size" | "variant">;
+type AgentQueueItemAttachmentProps = React.ComponentProps<"div">;
+type AgentQueueItemImageProps = React.ComponentProps<"img">;
+type AgentQueueItemFileProps = React.ComponentProps<"span">;
+declare function AgentQueue({ className, ...props }: AgentQueueProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueSection({ className, defaultOpen, ...props }: AgentQueueSectionProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueSectionTrigger({ children, className, ...props }: AgentQueueSectionTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueSectionLabel({ className, count, icon, label, ...props }: AgentQueueSectionLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueSectionContent({ className, ...props }: AgentQueueSectionContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueList({ children, className, ...props }: AgentQueueListProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueItem({ className, ...props }: AgentQueueItemProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueItemIndicator({ className, completed, ...props }: AgentQueueItemIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueItemContent({ className, completed, ...props }: AgentQueueItemContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueItemDescription({ className, completed, ...props }: AgentQueueItemDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueItemActions({ className, ...props }: AgentQueueItemActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueItemAction({ className, type, ...props }: AgentQueueItemActionProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueItemAttachment({ className, ...props }: AgentQueueItemAttachmentProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueItemImage({ alt, className, height, width, ...props }: AgentQueueItemImageProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentQueueItemFile({ children, className, ...props }: AgentQueueItemFileProps): import("react/jsx-runtime").JSX.Element;
+export { AgentQueue, AgentQueueItem, AgentQueueItemAction, AgentQueueItemActions, AgentQueueItemAttachment, AgentQueueItemContent, AgentQueueItemDescription, AgentQueueItemFile, AgentQueueItemImage, AgentQueueItemIndicator, AgentQueueList, AgentQueueSection, AgentQueueSectionContent, AgentQueueSectionLabel, AgentQueueSectionTrigger, };
+export type { AgentQueueItemActionProps, AgentQueueItemActionsProps, AgentQueueItemAttachmentProps, AgentQueueItemContentProps, AgentQueueItemDescriptionProps, AgentQueueItemFileProps, AgentQueueItemImageProps, AgentQueueItemIndicatorProps, AgentQueueItemProps, AgentQueueListProps, AgentQueueProps, AgentQueueSectionContentProps, AgentQueueSectionLabelProps, AgentQueueSectionProps, AgentQueueSectionTriggerProps, };

package/dist/components/agentic/agent-queue.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, CircleIcon, PaperclipIcon } from "lucide-react";
+import { Button } from "@ciridae/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { ScrollArea } from "@ciridae/ui/scroll-area";
+import { cn } from "@ciridae/ui/utils";
+function AgentQueue({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-queue", className: cn("grid gap-2 rounded-lg border bg-card p-2 text-card-foreground", className), ...props }));
+}
+function AgentQueueSection({ className, defaultOpen = true, ...props }) {
+    return _jsx(Collapsible, { className: className, defaultOpen: defaultOpen, ...props });
+}
+function AgentQueueSectionTrigger({ children, className, ...props }) {
+    return (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { "data-slot": "agent-queue-section-trigger", className: cn("group flex w-full items-center justify-between rounded-md bg-muted/45 px-3 py-2 text-left text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring focus-visible:outline-none", className), type: "button", ...props, children: children }) }));
+}
+function AgentQueueSectionLabel({ className, count, icon, label, ...props }) {
+    return (_jsxs("span", { "data-slot": "agent-queue-section-label", className: cn("flex items-center gap-2", className), ...props, children: [_jsx(ChevronDownIcon, { className: "size-4 transition-transform group-data-[state=closed]:-rotate-90" }), icon, _jsxs("span", { children: [count === undefined ? null : `${count} `, label] })] }));
+}
+function AgentQueueSectionContent({ className, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "agent-queue-section-content", className: className, ...props }));
+}
+function AgentQueueList({ children, className, ...props }) {
+    return (_jsx(ScrollArea, { "data-slot": "agent-queue-list", className: cn("mt-2 max-h-48", className), ...props, children: _jsx("ul", { className: "grid gap-1 pr-3", children: children }) }));
+}
+function AgentQueueItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "agent-queue-item", className: cn("group grid gap-1 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-muted/60", className), ...props }));
+}
+function AgentQueueItemIndicator({ className, completed = false, ...props }) {
+    const Icon = completed ? CheckIcon : CircleIcon;
+    return (_jsx("span", { "data-slot": "agent-queue-item-indicator", className: cn("mt-0.5 text-muted-foreground", className), ...props, children: _jsx(Icon, { "aria-hidden": "true", className: "size-3.5" }) }));
+}
+function AgentQueueItemContent({ className, completed = false, ...props }) {
+    return (_jsx("span", { "data-slot": "agent-queue-item-content", className: cn("min-w-0 flex-1 truncate", completed ? "text-muted-foreground line-through" : "text-foreground", className), ...props }));
+}
+function AgentQueueItemDescription({ className, completed = false, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-queue-item-description", className: cn("ml-6 text-xs", completed ? "text-muted-foreground/60 line-through" : "text-muted-foreground", className), ...props }));
+}
+function AgentQueueItemActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-queue-item-actions", className: cn("flex gap-1", className), ...props }));
+}
+function AgentQueueItemAction({ className, type = "button", ...props }) {
+    return (_jsx(Button, { className: cn("size-7 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100", className), size: "icon-sm", type: type, variant: "ghost", ...props }));
+}
+function AgentQueueItemAttachment({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-queue-item-attachment", className: cn("ml-6 flex flex-wrap gap-2", className), ...props }));
+}
+function AgentQueueItemImage({ alt = "", className, height = 32, width = 32, ...props }) {
+    return (_jsx("img", { alt: alt, className: cn("size-8 rounded border object-cover", className), height: height, width: width, ...props }));
+}
+function AgentQueueItemFile({ children, className, ...props }) {
+    return (_jsxs("span", { className: cn("inline-flex max-w-32 items-center gap-1 rounded border bg-muted px-2 py-1 text-xs", className), ...props, children: [_jsx(PaperclipIcon, { "aria-hidden": "true", className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: children })] }));
+}
+export { AgentQueue, AgentQueueItem, AgentQueueItemAction, AgentQueueItemActions, AgentQueueItemAttachment, AgentQueueItemContent, AgentQueueItemDescription, AgentQueueItemFile, AgentQueueItemImage, AgentQueueItemIndicator, AgentQueueList, AgentQueueSection, AgentQueueSectionContent, AgentQueueSectionLabel, AgentQueueSectionTrigger, };

package/dist/components/agentic/agent-task.d.ts

@@ -0,0 +1,16 @@
+import type * as React from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+type AgentTaskProps = React.ComponentProps<typeof Collapsible>;
+type AgentTaskTriggerProps = React.ComponentProps<typeof CollapsibleTrigger> & {
+    title: string;
+};
+type AgentTaskContentProps = React.ComponentProps<typeof CollapsibleContent>;
+type AgentTaskItemProps = React.ComponentProps<"div">;
+type AgentTaskItemFileProps = React.ComponentProps<"div">;
+declare function AgentTask({ className, defaultOpen, ...props }: AgentTaskProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentTaskTrigger({ children, className, title, ...props }: AgentTaskTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentTaskContent({ children, className, ...props }: AgentTaskContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentTaskItem({ className, ...props }: AgentTaskItemProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentTaskItemFile({ children, className, ...props }: AgentTaskItemFileProps): import("react/jsx-runtime").JSX.Element;
+export { AgentTask, AgentTaskContent, AgentTaskItem, AgentTaskItemFile, AgentTaskTrigger };
+export type { AgentTaskContentProps, AgentTaskItemFileProps, AgentTaskItemProps, AgentTaskProps, AgentTaskTriggerProps, };

package/dist/components/agentic/agent-task.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, FileTextIcon, SearchIcon } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { cn } from "@ciridae/ui/utils";
+function AgentTask({ className, defaultOpen = true, ...props }) {
+    return (_jsx(Collapsible, { "data-slot": "agent-task", className: cn("rounded-md", className), defaultOpen: defaultOpen, ...props }));
+}
+function AgentTaskTrigger({ children, className, title, ...props }) {
+    return (_jsx(CollapsibleTrigger, { "data-slot": "agent-task-trigger", className: cn("group flex w-full items-center gap-2 rounded-md py-1 text-left text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring focus-visible:outline-none", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(SearchIcon, { "aria-hidden": "true", className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: title }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180" })] })) }));
+}
+function AgentTaskContent({ children, className, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "agent-task-content", className: cn("mt-2 border-l-2 border-border pl-4", className), ...props, children: _jsx("div", { className: "grid gap-2", children: children }) }));
+}
+function AgentTaskItem({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-task-item", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function AgentTaskItemFile({ children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "agent-task-item-file", className: cn("inline-flex max-w-full items-center gap-1 rounded-md border bg-secondary px-2 py-0.5 text-xs text-secondary-foreground", className), ...props, children: [_jsx(FileTextIcon, { "aria-hidden": "true", className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: children })] }));
+}
+export { AgentTask, AgentTaskContent, AgentTaskItem, AgentTaskItemFile, AgentTaskTrigger };

package/dist/components/agentic/approval-request.d.ts

@@ -0,0 +1,24 @@
+import type * as React from "react";
+import type { AgenticApproval, AgenticToolState } from "@ciridae/ui/types";
+import { Button } from "@ciridae/ui/button";
+type ApprovalRequestProps = React.ComponentProps<"div"> & {
+    approval?: AgenticApproval;
+    state: AgenticToolState;
+};
+type ApprovalRequestTitleProps = React.ComponentProps<"div">;
+type ApprovalRequestDescriptionProps = React.ComponentProps<"div">;
+type ApprovalRequestActionsProps = React.ComponentProps<"div">;
+type ApprovalRequestActionProps = React.ComponentProps<typeof Button>;
+type ApprovalRequestStateProps = {
+    children?: React.ReactNode;
+};
+declare function ApprovalRequest({ approval, className, state, ...props }: ApprovalRequestProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ApprovalRequestTitle({ className, ...props }: ApprovalRequestTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function ApprovalRequestDescription({ className, ...props }: ApprovalRequestDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function ApprovalRequestPending({ children }: ApprovalRequestStateProps): React.ReactNode;
+declare function ApprovalRequestAccepted({ children }: ApprovalRequestStateProps): React.ReactNode;
+declare function ApprovalRequestRejected({ children }: ApprovalRequestStateProps): React.ReactNode;
+declare function ApprovalRequestActions({ className, ...props }: ApprovalRequestActionsProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ApprovalRequestAction({ className, size, type, ...props }: ApprovalRequestActionProps): import("react/jsx-runtime").JSX.Element;
+export { ApprovalRequest, ApprovalRequestAccepted, ApprovalRequestAction, ApprovalRequestActions, ApprovalRequestDescription, ApprovalRequestPending, ApprovalRequestRejected, ApprovalRequestTitle, };
+export type { ApprovalRequestActionProps, ApprovalRequestActionsProps, ApprovalRequestDescriptionProps, ApprovalRequestProps, ApprovalRequestTitleProps, };