@wallarm-org/design-system 3.2.0 → 3.3.0

package/dist/components/AssistantMessage/classes.js

@@ -0,0 +1,46 @@
+import { cva } from "class-variance-authority";
+const assistantMessageVariants = cva('group/message flex flex-col items-start gap-4 px-8 [&>[data-slot=chain-of-thought]]:mb-8 [&>[data-slot=approval-card]]:mb-8 [&>[data-slot=approval-card]]:self-stretch [&>[data-slot=message-actions]]:-ms-4');
+const assistantMessageContentVariants = cva('self-stretch break-words text-sm leading-base text-text-primary [&_:is(h1,h2,h3,h4,h5,h6)]:font-sans-display [&_:is(h1,h2,h3,h4,h5,h6)]:text-base [&_:is(h1,h2,h3,h4,h5,h6)]:font-medium [&>*+*]:mt-8 [&>:is(h1,h2,h3,h4,h5,h6)+*]:mt-4 [&_ul]:list-disc [&_ol]:list-decimal [&_:is(ul,ol)]:ps-21 [&_li]:leading-sm [&_li+li]:mt-4');
+const assistantMessageLoaderVariants = cva('flex items-start gap-6 self-stretch text-xs leading-xs text-text-secondary');
+const assistantMessageErrorVariants = cva('flex items-start gap-8 self-stretch text-sm text-text-danger [&>:nth-child(n+3)]:-my-2');
+const assistantMessageMarkdownBlockquoteVariants = cva('border-s-2 border-border-primary ps-12 text-text-secondary [&>*+*]:mt-8');
+const assistantMessageMarkdownListVariants = cva('ps-18', {
+    variants: {
+        ordered: {
+            true: 'list-decimal',
+            false: 'list-disc'
+        }
+    },
+    defaultVariants: {
+        ordered: false
+    }
+});
+const assistantMessageMarkdownTaskItemVariants = cva('flex list-none items-start gap-8');
+const assistantMessageMarkdownCellVariants = cva('', {
+    variants: {
+        align: {
+            left: 'text-left',
+            center: 'text-center',
+            right: 'text-right'
+        }
+    },
+    defaultVariants: {
+        align: 'right'
+    }
+});
+const assistantMessageMarkdownInlineCodeVariants = cva('max-w-full wrap-anywhere', {
+    variants: {
+        muted: {
+            true: 'text-text-secondary',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        muted: false
+    }
+});
+const assistantMessageMarkdownLinkVariants = cva('inline rounded-2 focus-visible:ring-3 focus-visible:ring-focus-primary');
+const assistantMessageMarkdownCodeBlockVariants = cva('[li>&]:mt-4');
+const assistantMessageMarkdownTableVariants = cva('overflow-x-auto');
+const assistantMessageMarkdownTableGridVariants = cva('w-full border-separate border-spacing-0 [&>tbody>tr:last-child>td]:border-b-0');
+export { assistantMessageContentVariants, assistantMessageErrorVariants, assistantMessageLoaderVariants, assistantMessageMarkdownBlockquoteVariants, assistantMessageMarkdownCellVariants, assistantMessageMarkdownCodeBlockVariants, assistantMessageMarkdownInlineCodeVariants, assistantMessageMarkdownLinkVariants, assistantMessageMarkdownListVariants, assistantMessageMarkdownTableGridVariants, assistantMessageMarkdownTableVariants, assistantMessageMarkdownTaskItemVariants, assistantMessageVariants };

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

@@ -0,0 +1,9 @@
+export { AssistantMessage, type AssistantMessageProps } from './AssistantMessage.js';
+export { AssistantMessageContent, type AssistantMessageContentProps, } from './AssistantMessageContent.js';
+export { AssistantMessageError, type AssistantMessageErrorProps } from './AssistantMessageError.js';
+export { AssistantMessageLoader, type AssistantMessageLoaderProps } from './AssistantMessageLoader.js';
+export { AssistantMessageMarkdown, type AssistantMessageMarkdownComponents, type AssistantMessageMarkdownProps, type AssistantMessageMarkdownVariant, } from './AssistantMessageMarkdown.js';
+export { AssistantMessageMarkdownCodeBlock, type AssistantMessageMarkdownCodeBlockProps, } from './AssistantMessageMarkdownCodeBlock.js';
+export { AssistantMessageMarkdownInlineCode, type AssistantMessageMarkdownInlineCodeProps, } from './AssistantMessageMarkdownInlineCode.js';
+export { AssistantMessageMarkdownLink, type AssistantMessageMarkdownLinkProps, } from './AssistantMessageMarkdownLink.js';
+export { AssistantMessageMarkdownTable, type AssistantMessageMarkdownTableProps, } from './AssistantMessageMarkdownTable.js';

package/dist/components/AssistantMessage/index.js

@@ -0,0 +1,9 @@
+export { AssistantMessage } from "./AssistantMessage.js";
+export { AssistantMessageContent } from "./AssistantMessageContent.js";
+export { AssistantMessageError } from "./AssistantMessageError.js";
+export { AssistantMessageLoader } from "./AssistantMessageLoader.js";
+export { AssistantMessageMarkdown } from "./AssistantMessageMarkdown.js";
+export { AssistantMessageMarkdownCodeBlock } from "./AssistantMessageMarkdownCodeBlock.js";
+export { AssistantMessageMarkdownInlineCode } from "./AssistantMessageMarkdownInlineCode.js";
+export { AssistantMessageMarkdownLink } from "./AssistantMessageMarkdownLink.js";
+export { AssistantMessageMarkdownTable } from "./AssistantMessageMarkdownTable.js";

package/dist/components/AssistantMessage/lib/markdown.d.ts

@@ -0,0 +1,20 @@
+import { type MarkedToken, type Token } from 'marked';
+export declare const asTokens: (tokens: Token[] | undefined) => MarkedToken[];
+/**
+ * The top-level blocks of untrusted GFM. While `streaming`, only the last block can be unfinished, so only it is
+ * repaired (remend counts markers across its whole input: run on the full text, one stray `*` in a finished
+ * block leaks a closer into every later frame), and a tail that would flash — a half-typed table header, a fence
+ * with no code yet — is held back.
+ */
+export declare const lexMarkdown: (text: string, streaming: boolean) => MarkedToken[];
+/** The closing fence has arrived (indented code has none and is always closed). */
+export declare const isClosedFence: (raw: string) => boolean;
+/**
+ * http(s), mailto and relative URLs pass; javascript:, data:, vbscript:, file:, blob: and anything unparsable
+ * don't. The WHATWG parser is the browser's own, so case, whitespace and control-character tricks resolve the
+ * same way here. Never entity-decode an href: React writes attributes verbatim, so `javascript:x` stays
+ * a harmless relative path.
+ */
+export declare const safeHref: (href: string | null | undefined) => string | undefined;
+/** marked decodes numeric entities but keeps these named ones in text tokens. Text nodes only. */
+export declare const decodeEntities: (s: string) => string;

package/dist/components/AssistantMessage/lib/markdown.js

@@ -0,0 +1,51 @@
+import { Lexer } from "marked";
+import remend from "remend";
+const asTokens = (tokens)=>tokens ?? [];
+const lexBlocks = (src)=>asTokens(Lexer.lex(src, {
+        gfm: true
+    })).filter((t)=>'space' !== t.type && 'def' !== t.type);
+const DANGLING = /(^|\s)(?:(?:[*+-]|\d+[.)])\s+\[[ xX]?\]?|[*_~`#>+-]+|\d+[.)])\s*$/;
+const FENCE_LINE = /(^|\n) {0,3}(?:`{3,}|~{3,})\s*$/;
+const REMEND = {
+    linkMode: 'text-only',
+    katex: false,
+    htmlTags: false,
+    italic: false
+};
+const isHalfTable = (t)=>'paragraph' === t.type && /^ {0,3}\|/.test(t.raw) && t.raw.split('\n').slice(1).every((line)=>/^[\s|:-]*$/.test(line));
+const lexMarkdown = (text, streaming)=>{
+    if (!streaming) return lexBlocks(text);
+    const blocks = lexBlocks(FENCE_LINE.test(text) ? text : text.replace(DANGLING, '$1'));
+    const tail = blocks.pop();
+    if (tail) blocks.push(...'code' === tail.type || 'html' === tail.type ? [
+        tail
+    ] : lexBlocks(remend(tail.raw, REMEND)));
+    const last = blocks[blocks.length - 1];
+    if (last && (isHalfTable(last) || 'code' === last.type && !last.text)) blocks.pop();
+    return blocks;
+};
+const isClosedFence = (raw)=>{
+    const open = /^ {0,3}(`{3,}|~{3,})/.exec(raw)?.[1];
+    if (!open) return true;
+    const lines = raw.trimEnd().split('\n');
+    const close = lines.length > 1 ? /^ {0,3}(`{3,}|~{3,})[ \t]*$/.exec(lines[lines.length - 1] ?? '')?.[1] : void 0;
+    return !!close && close[0] === open[0] && close.length >= open.length;
+};
+const BASE = 'https://base.invalid';
+const safeHref = (href)=>{
+    if (!href) return;
+    try {
+        return /^(?:https?|mailto):$/.test(new URL(href, BASE).protocol) ? href : void 0;
+    } catch  {
+        return;
+    }
+};
+const ENTITIES = {
+    amp: '&',
+    lt: '<',
+    gt: '>',
+    quot: '"',
+    nbsp: ' '
+};
+const decodeEntities = (s)=>s.replace(/&(amp|lt|gt|quot|nbsp);/g, (m, name)=>ENTITIES[name] ?? m);
+export { asTokens, decodeEntities, isClosedFence, lexMarkdown, safeHref };

package/dist/components/ChainOfThought/ChainOfThought.d.ts

@@ -0,0 +1,10 @@
+import type { FC, OlHTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ChainOfThoughtProps extends OlHTMLAttributes<HTMLOListElement>, TestableProps {
+    ref?: Ref<HTMLOListElement>;
+}
+/**
+ * Read-only log of an agent's steps. Children must be `ChainOfThoughtStep`s —
+ * each `<li>` a direct child, so the last step drops its connector.
+ */
+export declare const ChainOfThought: FC<ChainOfThoughtProps>;

package/dist/components/ChainOfThought/ChainOfThought.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { chainOfThoughtVariants } from "./classes.js";
+const ChainOfThought = (t0)=>{
+    const $ = c(17);
+    let children;
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, children, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = props;
+        $[4] = ref;
+        $[5] = testIdProp;
+    } else {
+        children = $[1];
+        className = $[2];
+        props = $[3];
+        ref = $[4];
+        testIdProp = $[5];
+    }
+    const testId = useTestId("chain-of-thought", testIdProp);
+    let t1;
+    if ($[6] !== className) {
+        t1 = cn(chainOfThoughtVariants(), className);
+        $[6] = className;
+        $[7] = t1;
+    } else t1 = $[7];
+    let t2;
+    if ($[8] !== children || $[9] !== testId) {
+        t2 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: children
+        });
+        $[8] = children;
+        $[9] = testId;
+        $[10] = t2;
+    } else t2 = $[10];
+    let t3;
+    if ($[11] !== props || $[12] !== ref || $[13] !== t1 || $[14] !== t2 || $[15] !== testId) {
+        t3 = /*#__PURE__*/ jsx("ol", {
+            ...props,
+            ref: ref,
+            "data-slot": "chain-of-thought",
+            "data-testid": testId,
+            role: "list",
+            className: t1,
+            children: t2
+        });
+        $[11] = props;
+        $[12] = ref;
+        $[13] = t1;
+        $[14] = t2;
+        $[15] = testId;
+        $[16] = t3;
+    } else t3 = $[16];
+    return t3;
+};
+ChainOfThought.displayName = "ChainOfThought";
+export { ChainOfThought };

package/dist/components/ChainOfThought/ChainOfThoughtStep.d.ts

@@ -0,0 +1,31 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ChainOfThoughtStepProps extends Omit<HTMLAttributes<HTMLElement>, 'children'>, TestableProps {
+    /**
+     * `...rest`, `ref`, `className` and `data-testid` land on the ROW — a `<button>` when the
+     * step has children, a `<div>` otherwise.
+     */
+    ref?: Ref<HTMLElement>;
+    /** Row text: 'Searched for ABC', 'Working...', 'Thought for 5s', 'Worked for 3m 45s'. */
+    label: ReactNode;
+    /** 16px type icon. Default `<CircleDashed />`. `null` = Figma "Simple" row (no icon cell, no connector). */
+    icon?: ReactNode;
+    /** Right-aligned mono slot = Figma "Simple-result". */
+    metric?: ReactNode;
+    /**
+     * `'running'` shimmers the label (Figma "Working"). `'error'` tints the label and icon danger
+     * (not in Figma yet; pending design review) and prefixes a visually hidden "Error:" for screen
+     * readers; still word the label so it reads as a failure ('get_attacks failed'). Default `'done'`.
+     * Reflected in the `li`'s `data-status`. A step that mounts as `'running'` gets `data-entered`
+     * and animates in (and fades its shimmer out on `'done'`); one mounted `'done'` renders static.
+     */
+    status?: 'running' | 'done' | 'error';
+    /** Controlled open state of the nested content. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. Default `false`. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Nested content (a nested `ChainOfThought`, text, inline code). Its presence makes the row a collapsible trigger. */
+    children?: ReactNode;
+}
+export declare const ChainOfThoughtStep: FC<ChainOfThoughtStepProps>;

package/dist/components/ChainOfThought/ChainOfThoughtStep.js

@@ -0,0 +1,312 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useId, useState } from "react";
+import { ChevronDown, CircleDashed } from "../../icons/index.js";
+import { Collapse } from "../../utils/Collapse.js";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { chainOfThoughtBodyVariants, chainOfThoughtIconVariants, chainOfThoughtLabelVariants, chainOfThoughtLineVariants, chainOfThoughtMetricVariants, chainOfThoughtRowVariants, chainOfThoughtStepVariants } from "./classes.js";
+const DEFAULT_ICON = /*#__PURE__*/ jsx(CircleDashed, {});
+const ChainOfThoughtStep = (t0)=>{
+    const $ = c(81);
+    let children;
+    let className;
+    let label;
+    let metric;
+    let onClick;
+    let onOpenChange;
+    let open;
+    let props;
+    let ref;
+    let t1;
+    let t2;
+    let t3;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, label, icon: t1, metric, status: t2, open, defaultOpen: t3, onOpenChange, children, className, onClick, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = label;
+        $[4] = metric;
+        $[5] = onClick;
+        $[6] = onOpenChange;
+        $[7] = open;
+        $[8] = props;
+        $[9] = ref;
+        $[10] = t1;
+        $[11] = t2;
+        $[12] = t3;
+        $[13] = testIdProp;
+    } else {
+        children = $[1];
+        className = $[2];
+        label = $[3];
+        metric = $[4];
+        onClick = $[5];
+        onOpenChange = $[6];
+        open = $[7];
+        props = $[8];
+        ref = $[9];
+        t1 = $[10];
+        t2 = $[11];
+        t3 = $[12];
+        testIdProp = $[13];
+    }
+    const icon = void 0 === t1 ? DEFAULT_ICON : t1;
+    const status = void 0 === t2 ? "done" : t2;
+    const defaultOpen = void 0 === t3 ? false : t3;
+    const testId = useTestId("step", testIdProp);
+    const contentId = useId();
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const [entered] = useState("running" === status);
+    const [settled, setSettled] = useState(false);
+    const labelEntered = entered && !(settled && "done" === status);
+    let t4;
+    if ($[14] !== status) {
+        t4 = (event)=>{
+            if ("done" === status && event.target === event.currentTarget && event.propertyName.endsWith("text-fill-color")) setSettled(true);
+        };
+        $[14] = status;
+        $[15] = t4;
+    } else t4 = $[15];
+    const handleLabelTransitionEnd = t4;
+    const isOpen = open ?? internalOpen;
+    const collapsible = null != children && false !== children;
+    const hasIcon = null !== icon;
+    let t5;
+    if ($[16] !== isOpen || $[17] !== onClick || $[18] !== onOpenChange || $[19] !== open) {
+        t5 = (event_0)=>{
+            onClick?.(event_0);
+            if (event_0.defaultPrevented) return;
+            if (void 0 === open) setInternalOpen(!isOpen);
+            onOpenChange?.(!isOpen);
+        };
+        $[16] = isOpen;
+        $[17] = onClick;
+        $[18] = onOpenChange;
+        $[19] = open;
+        $[20] = t5;
+    } else t5 = $[20];
+    const handleClick = t5;
+    const showTypeIcon = hasIcon && !(collapsible && isOpen);
+    let t6;
+    if ($[21] !== collapsible || $[22] !== icon || $[23] !== isOpen || $[24] !== showTypeIcon || $[25] !== status || $[26] !== testId) {
+        t6 = (showTypeIcon || collapsible) && /*#__PURE__*/ jsxs("span", {
+            className: cn(chainOfThoughtIconVariants({
+                status
+            })),
+            "data-testid": testId && `${testId}--icon`,
+            children: [
+                showTypeIcon && /*#__PURE__*/ jsx("span", {
+                    className: cn("inline-flex", collapsible && "group-hover/row:hidden group-focus-visible/row:hidden"),
+                    children: icon
+                }),
+                collapsible && /*#__PURE__*/ jsx("span", {
+                    className: cn("inline-flex transition-transform motion-reduce:transition-none", !isOpen && "-rotate-90", showTypeIcon && "hidden group-hover/row:inline-flex group-focus-visible/row:inline-flex"),
+                    children: /*#__PURE__*/ jsx(ChevronDown, {})
+                })
+            ]
+        });
+        $[21] = collapsible;
+        $[22] = icon;
+        $[23] = isOpen;
+        $[24] = showTypeIcon;
+        $[25] = status;
+        $[26] = testId;
+        $[27] = t6;
+    } else t6 = $[27];
+    const iconCell = t6;
+    let t7;
+    if ($[28] !== status) {
+        t7 = "error" === status && /*#__PURE__*/ jsx("span", {
+            className: "sr-only",
+            children: "Error: "
+        });
+        $[28] = status;
+        $[29] = t7;
+    } else t7 = $[29];
+    let t8;
+    if ($[30] !== labelEntered || $[31] !== status) {
+        t8 = chainOfThoughtLabelVariants({
+            status,
+            entered: labelEntered
+        });
+        $[30] = labelEntered;
+        $[31] = status;
+        $[32] = t8;
+    } else t8 = $[32];
+    const t9 = labelEntered ? handleLabelTransitionEnd : void 0;
+    let t10;
+    if ($[33] !== label || $[34] !== t8 || $[35] !== t9) {
+        t10 = /*#__PURE__*/ jsx("span", {
+            className: t8,
+            onTransitionEnd: t9,
+            children: label
+        });
+        $[33] = label;
+        $[34] = t8;
+        $[35] = t9;
+        $[36] = t10;
+    } else t10 = $[36];
+    let t11;
+    if ($[37] !== metric) {
+        t11 = null != metric && /*#__PURE__*/ jsx("span", {
+            className: chainOfThoughtMetricVariants(),
+            children: metric
+        });
+        $[37] = metric;
+        $[38] = t11;
+    } else t11 = $[38];
+    let t12;
+    if ($[39] !== iconCell || $[40] !== t10 || $[41] !== t11 || $[42] !== t7) {
+        t12 = /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                iconCell,
+                t7,
+                t10,
+                t11
+            ]
+        });
+        $[39] = iconCell;
+        $[40] = t10;
+        $[41] = t11;
+        $[42] = t7;
+        $[43] = t12;
+    } else t12 = $[43];
+    const rowContent = t12;
+    const t13 = ref;
+    let t14;
+    if ($[44] !== className || $[45] !== collapsible) {
+        t14 = cn(chainOfThoughtRowVariants({
+            interactive: collapsible
+        }), className);
+        $[44] = className;
+        $[45] = collapsible;
+        $[46] = t14;
+    } else t14 = $[46];
+    let t15;
+    if ($[47] !== props || $[48] !== t13 || $[49] !== t14 || $[50] !== testId) {
+        t15 = {
+            ...props,
+            ref: t13,
+            "data-slot": "chain-of-thought-step-row",
+            "data-testid": testId,
+            className: t14
+        };
+        $[47] = props;
+        $[48] = t13;
+        $[49] = t14;
+        $[50] = testId;
+        $[51] = t15;
+    } else t15 = $[51];
+    const rowProps = t15;
+    const t16 = entered || void 0;
+    const t17 = collapsible && isOpen ? "open" : "closed";
+    const t18 = !hasIcon;
+    let t19;
+    if ($[52] !== entered || $[53] !== t18) {
+        t19 = chainOfThoughtStepVariants({
+            simple: t18,
+            entered
+        });
+        $[52] = entered;
+        $[53] = t18;
+        $[54] = t19;
+    } else t19 = $[54];
+    let t20;
+    if ($[55] !== collapsible || $[56] !== contentId || $[57] !== handleClick || $[58] !== isOpen || $[59] !== onClick || $[60] !== rowContent || $[61] !== rowProps) {
+        t20 = collapsible ? /*#__PURE__*/ jsx("button", {
+            ...rowProps,
+            type: "button",
+            "aria-expanded": isOpen,
+            "aria-controls": contentId,
+            onClick: handleClick,
+            children: rowContent
+        }) : /*#__PURE__*/ jsx("div", {
+            ...rowProps,
+            onClick: onClick,
+            children: rowContent
+        });
+        $[55] = collapsible;
+        $[56] = contentId;
+        $[57] = handleClick;
+        $[58] = isOpen;
+        $[59] = onClick;
+        $[60] = rowContent;
+        $[61] = rowProps;
+        $[62] = t20;
+    } else t20 = $[62];
+    let t21;
+    if ($[63] !== entered || $[64] !== showTypeIcon || $[65] !== testId) {
+        t21 = showTypeIcon && /*#__PURE__*/ jsx("span", {
+            "aria-hidden": true,
+            "data-slot": "chain-of-thought-connector",
+            "data-testid": testId && `${testId}--connector`,
+            className: cn(chainOfThoughtLineVariants({
+                entered
+            }), "h-20")
+        });
+        $[63] = entered;
+        $[64] = showTypeIcon;
+        $[65] = testId;
+        $[66] = t21;
+    } else t21 = $[66];
+    let t22;
+    if ($[67] !== children || $[68] !== collapsible || $[69] !== contentId || $[70] !== isOpen || $[71] !== testId) {
+        t22 = collapsible && /*#__PURE__*/ jsx(Collapse, {
+            id: contentId,
+            open: isOpen,
+            inertWhenClosed: true,
+            "data-slot": "chain-of-thought-step-content",
+            children: /*#__PURE__*/ jsxs("div", {
+                className: "flex",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        "aria-hidden": true,
+                        className: chainOfThoughtLineVariants()
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: chainOfThoughtBodyVariants(),
+                        children: /*#__PURE__*/ jsx(TestIdProvider, {
+                            value: testId,
+                            children: children
+                        })
+                    })
+                ]
+            })
+        });
+        $[67] = children;
+        $[68] = collapsible;
+        $[69] = contentId;
+        $[70] = isOpen;
+        $[71] = testId;
+        $[72] = t22;
+    } else t22 = $[72];
+    let t23;
+    if ($[73] !== status || $[74] !== t16 || $[75] !== t17 || $[76] !== t19 || $[77] !== t20 || $[78] !== t21 || $[79] !== t22) {
+        t23 = /*#__PURE__*/ jsxs("li", {
+            "data-slot": "chain-of-thought-step",
+            "data-status": status,
+            "data-entered": t16,
+            "data-state": t17,
+            className: t19,
+            children: [
+                t20,
+                t21,
+                t22
+            ]
+        });
+        $[73] = status;
+        $[74] = t16;
+        $[75] = t17;
+        $[76] = t19;
+        $[77] = t20;
+        $[78] = t21;
+        $[79] = t22;
+        $[80] = t23;
+    } else t23 = $[80];
+    return t23;
+};
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+export { ChainOfThoughtStep };

package/dist/components/ChainOfThought/classes.d.ts

@@ -0,0 +1,20 @@
+export declare const chainOfThoughtVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const chainOfThoughtStepVariants: (props?: ({
+    simple?: boolean | null | undefined;
+    entered?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const chainOfThoughtRowVariants: (props?: ({
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const chainOfThoughtIconVariants: (props?: ({
+    status?: "done" | "error" | "running" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const chainOfThoughtLabelVariants: (props?: ({
+    status?: "done" | "error" | "running" | null | undefined;
+    entered?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const chainOfThoughtMetricVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const chainOfThoughtLineVariants: (props?: ({
+    entered?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const chainOfThoughtBodyVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/ChainOfThought/classes.js

@@ -0,0 +1,84 @@
+import { cva } from "class-variance-authority";
+const chainOfThoughtVariants = cva('flex w-full list-none flex-col self-stretch text-xs leading-xs text-text-secondary');
+const chainOfThoughtStepVariants = cva('flex flex-col [&:last-child>[data-slot=chain-of-thought-connector]]:hidden', {
+    variants: {
+        simple: {
+            true: 'not-first:mt-16',
+            false: ''
+        },
+        entered: {
+            true: 'motion-safe:transition-[opacity,translate] motion-safe:duration-200 motion-safe:ease-out motion-safe:starting:translate-y-4 motion-safe:starting:opacity-0',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        simple: false,
+        entered: false
+    }
+});
+const chainOfThoughtRowVariants = cva('group/row flex w-full items-start gap-6 text-left', {
+    variants: {
+        interactive: {
+            true: 'cursor-pointer rounded-4 outline-none focus-visible:ring-3 focus-visible:ring-focus-primary',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        interactive: false
+    }
+});
+const chainOfThoughtIconVariants = cva('flex size-16 shrink-0 items-center justify-center text-icon-secondary [&_svg]:icon-md', {
+    variants: {
+        status: {
+            running: '',
+            done: '',
+            error: 'text-icon-danger'
+        }
+    },
+    defaultVariants: {
+        status: 'done'
+    }
+});
+const chainOfThoughtLabelVariants = cva('min-w-0 flex-1', {
+    variants: {
+        status: {
+            running: 'shimmer-text',
+            done: '',
+            error: 'text-text-danger'
+        },
+        entered: {
+            true: 'motion-safe:transition-[-webkit-text-fill-color,color] motion-safe:duration-200 motion-safe:ease-out',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        {
+            entered: true,
+            status: 'running',
+            class: 'motion-safe:not-forced-colors:[-webkit-text-fill-color:transparent]'
+        },
+        {
+            entered: true,
+            status: 'done',
+            class: 'shimmer-text [animation-play-state:paused] motion-safe:not-forced-colors:[-webkit-text-fill-color:var(--color-text-secondary)]'
+        }
+    ],
+    defaultVariants: {
+        status: 'done',
+        entered: false
+    }
+});
+const chainOfThoughtMetricVariants = cva("ms-auto shrink-0 text-right font-mono [font-feature-settings:'liga'_0]");
+const chainOfThoughtLineVariants = cva('flex w-16 shrink-0 justify-center py-2 before:w-px before:bg-border-primary', {
+    variants: {
+        entered: {
+            true: 'motion-safe:origin-top motion-safe:transition-[scale] motion-safe:duration-200 motion-safe:ease-out motion-safe:starting:scale-y-0',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        entered: false
+    }
+});
+const chainOfThoughtBodyVariants = cva('flex min-w-0 flex-1 flex-col gap-16 py-12 pl-6 pe-3 [&_ul]:list-disc [&_ul]:ps-18 [&_:is(h1,h2,h3,h4)]:font-medium');
+export { chainOfThoughtBodyVariants, chainOfThoughtIconVariants, chainOfThoughtLabelVariants, chainOfThoughtLineVariants, chainOfThoughtMetricVariants, chainOfThoughtRowVariants, chainOfThoughtStepVariants, chainOfThoughtVariants };

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

@@ -0,0 +1,2 @@
+export { ChainOfThought, type ChainOfThoughtProps } from './ChainOfThought.js';
+export { ChainOfThoughtStep, type ChainOfThoughtStepProps } from './ChainOfThoughtStep.js';

package/dist/components/ChainOfThought/index.js

@@ -0,0 +1,2 @@
+export { ChainOfThought } from "./ChainOfThought.js";
+export { ChainOfThoughtStep } from "./ChainOfThoughtStep.js";