@wallarm-org/design-system 3.2.0 → 3.3.0

package/dist/components/Chat/Chat.d.ts

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export type ChatBackground = 'strong' | 'subtle' | 'none';
+export interface ChatProps extends HTMLAttributes<HTMLElement>, TestableProps {
+    ref?: Ref<HTMLElement>;
+    /**
+     * Decorative mesh behind the panel (Figma chat-bg 67:1254). `'strong'` is Main (12%, for an
+     * empty chat), `'subtle'` is Chat (5%, for a running conversation), `'none'` renders nothing.
+     */
+    background?: ChatBackground;
+}
+export declare const Chat: FC<ChatProps>;

package/dist/components/Chat/Chat.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { BlurBackground } from "../AnimatedBackground/blur/index.js";
+import { chatBackgroundVariants, chatVariants } from "./classes.js";
+const Chat = (t0)=>{
+    const $ = c(21);
+    let children;
+    let className;
+    let props;
+    let ref;
+    let t1;
+    let testId;
+    if ($[0] !== t0) {
+        ({ ref, background: t1, className, children, "data-testid": testId, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = props;
+        $[4] = ref;
+        $[5] = t1;
+        $[6] = testId;
+    } else {
+        children = $[1];
+        className = $[2];
+        props = $[3];
+        ref = $[4];
+        t1 = $[5];
+        testId = $[6];
+    }
+    const background = void 0 === t1 ? "subtle" : t1;
+    let t2;
+    if ($[7] !== className) {
+        t2 = cn(chatVariants(), className);
+        $[7] = className;
+        $[8] = t2;
+    } else t2 = $[8];
+    let t3;
+    if ($[9] !== background) {
+        t3 = "none" !== background && /*#__PURE__*/ jsx("div", {
+            "aria-hidden": true,
+            "data-slot": "chat-background",
+            className: chatBackgroundVariants({
+                background
+            }),
+            children: /*#__PURE__*/ jsx(BlurBackground, {
+                palette: "chat",
+                className: "size-full [--lg-frame-bg:transparent]"
+            })
+        });
+        $[9] = background;
+        $[10] = t3;
+    } else t3 = $[10];
+    let t4;
+    if ($[11] !== children || $[12] !== testId) {
+        t4 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: children
+        });
+        $[11] = children;
+        $[12] = testId;
+        $[13] = t4;
+    } else t4 = $[13];
+    let t5;
+    if ($[14] !== props || $[15] !== ref || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== testId) {
+        t5 = /*#__PURE__*/ jsxs("section", {
+            "aria-label": "Wally chat",
+            ...props,
+            ref: ref,
+            "data-slot": "chat",
+            "data-testid": testId,
+            className: t2,
+            children: [
+                t3,
+                t4
+            ]
+        });
+        $[14] = props;
+        $[15] = ref;
+        $[16] = t2;
+        $[17] = t3;
+        $[18] = t4;
+        $[19] = testId;
+        $[20] = t5;
+    } else t5 = $[20];
+    return t5;
+};
+Chat.displayName = "Chat";
+export { Chat };

package/dist/components/Chat/ChatBody.d.ts

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+/**
+ * The scrolling message log. Pass `aria-busy={isRunning}` while the assistant streams, and
+ * attach stick-to-bottom behaviour through `ref` (it lands on the scroll element).
+ *
+ * For stick-to-bottom and a scroll button use `Conversation`; `ConversationContent` renders ChatBody.
+ */
+export interface ChatBodyProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const ChatBody: FC<ChatBodyProps>;

package/dist/components/Chat/ChatBody.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { chatBodyVariants } from "./classes.js";
+const ChatBody = (t0)=>{
+    const $ = c(12);
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = testIdProp;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        testIdProp = $[4];
+    }
+    const testId = useTestId("body", testIdProp);
+    let t1;
+    if ($[5] !== className) {
+        t1 = cn(chatBodyVariants(), className);
+        $[5] = className;
+        $[6] = t1;
+    } else t1 = $[6];
+    let t2;
+    if ($[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== testId) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            role: "log",
+            "aria-label": "Chat messages",
+            ...props,
+            ref: ref,
+            "data-slot": "chat-body",
+            "data-testid": testId,
+            className: t1
+        });
+        $[7] = props;
+        $[8] = ref;
+        $[9] = t1;
+        $[10] = testId;
+        $[11] = t2;
+    } else t2 = $[11];
+    return t2;
+};
+ChatBody.displayName = "ChatBody";
+export { ChatBody };

package/dist/components/Chat/ChatFooter.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+/** Bottom gutter for suggestions, a docked approval card and the input. */
+export interface ChatFooterProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const ChatFooter: FC<ChatFooterProps>;

package/dist/components/Chat/ChatFooter.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { chatFooterVariants } from "./classes.js";
+const ChatFooter = (t0)=>{
+    const $ = c(12);
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = testIdProp;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        testIdProp = $[4];
+    }
+    const testId = useTestId("footer", testIdProp);
+    let t1;
+    if ($[5] !== className) {
+        t1 = cn(chatFooterVariants(), className);
+        $[5] = className;
+        $[6] = t1;
+    } else t1 = $[6];
+    let t2;
+    if ($[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== testId) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "chat-footer",
+            "data-testid": testId,
+            className: t1
+        });
+        $[7] = props;
+        $[8] = ref;
+        $[9] = t1;
+        $[10] = testId;
+        $[11] = t2;
+    } else t2 = $[11];
+    return t2;
+};
+ChatFooter.displayName = "ChatFooter";
+export { ChatFooter };

package/dist/components/Chat/ChatGreeting.d.ts

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ChatGreetingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Heading under the Wally mark, e.g. "How can I help you today?". */
+    title: ReactNode;
+}
+export declare const ChatGreeting: FC<ChatGreetingProps>;

package/dist/components/Chat/ChatGreeting.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+import { WallyIcon } from "../WallyIcon/index.js";
+import { chatGreetingVariants } from "./classes.js";
+const ChatGreeting = (t0)=>{
+    const $ = c(19);
+    let children;
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    let title;
+    if ($[0] !== t0) {
+        ({ ref, title, className, children, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = props;
+        $[4] = ref;
+        $[5] = testIdProp;
+        $[6] = title;
+    } else {
+        children = $[1];
+        className = $[2];
+        props = $[3];
+        ref = $[4];
+        testIdProp = $[5];
+        title = $[6];
+    }
+    const testId = useTestId("greeting", testIdProp);
+    let t1;
+    if ($[7] !== className) {
+        t1 = cn(chatGreetingVariants(), className);
+        $[7] = className;
+        $[8] = t1;
+    } else t1 = $[8];
+    let t2;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = /*#__PURE__*/ jsx(WallyIcon, {
+            variant: "circle",
+            size: "xl",
+            "aria-hidden": true
+        });
+        $[9] = t2;
+    } else t2 = $[9];
+    let t3;
+    if ($[10] !== title) {
+        t3 = /*#__PURE__*/ jsxs("div", {
+            className: "flex flex-col items-center gap-12",
+            children: [
+                t2,
+                /*#__PURE__*/ jsx(Text, {
+                    asChild: true,
+                    size: "xl",
+                    weight: "medium",
+                    color: "primary",
+                    align: "center",
+                    children: /*#__PURE__*/ jsx("h2", {
+                        children: title
+                    })
+                })
+            ]
+        });
+        $[10] = title;
+        $[11] = t3;
+    } else t3 = $[11];
+    let t4;
+    if ($[12] !== children || $[13] !== props || $[14] !== ref || $[15] !== t1 || $[16] !== t3 || $[17] !== testId) {
+        t4 = /*#__PURE__*/ jsxs("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "chat-greeting",
+            "data-testid": testId,
+            className: t1,
+            children: [
+                t3,
+                children
+            ]
+        });
+        $[12] = children;
+        $[13] = props;
+        $[14] = ref;
+        $[15] = t1;
+        $[16] = t3;
+        $[17] = testId;
+        $[18] = t4;
+    } else t4 = $[18];
+    return t4;
+};
+ChatGreeting.displayName = "ChatGreeting";
+export { ChatGreeting };

package/dist/components/Chat/ChatHeader.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ChatHeaderProps extends HTMLAttributes<HTMLElement>, TestableProps {
+    ref?: Ref<HTMLElement>;
+}
+export declare const ChatHeader: FC<ChatHeaderProps>;

package/dist/components/Chat/ChatHeader.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { chatHeaderVariants } from "./classes.js";
+const ChatHeader = (t0)=>{
+    const $ = c(12);
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = testIdProp;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        testIdProp = $[4];
+    }
+    const testId = useTestId("header", testIdProp);
+    let t1;
+    if ($[5] !== className) {
+        t1 = cn(chatHeaderVariants(), className);
+        $[5] = className;
+        $[6] = t1;
+    } else t1 = $[6];
+    let t2;
+    if ($[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== testId) {
+        t2 = /*#__PURE__*/ jsx("header", {
+            ...props,
+            ref: ref,
+            "data-slot": "chat-header",
+            "data-testid": testId,
+            className: t1
+        });
+        $[7] = props;
+        $[8] = ref;
+        $[9] = t1;
+        $[10] = testId;
+        $[11] = t2;
+    } else t2 = $[11];
+    return t2;
+};
+ChatHeader.displayName = "ChatHeader";
+export { ChatHeader };

package/dist/components/Chat/ChatHeaderActions.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+/** Trailing header slot (Figma 8:3078 / 44:1517): ghost icon buttons and vertical separators. */
+export interface ChatHeaderActionsProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const ChatHeaderActions: FC<ChatHeaderActionsProps>;

package/dist/components/Chat/ChatHeaderActions.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { chatHeaderActionsVariants } from "./classes.js";
+const ChatHeaderActions = (t0)=>{
+    const $ = c(12);
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = testIdProp;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        testIdProp = $[4];
+    }
+    const testId = useTestId("actions", testIdProp);
+    let t1;
+    if ($[5] !== className) {
+        t1 = cn(chatHeaderActionsVariants(), className);
+        $[5] = className;
+        $[6] = t1;
+    } else t1 = $[6];
+    let t2;
+    if ($[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== testId) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "chat-header-actions",
+            "data-testid": testId,
+            className: t1
+        });
+        $[7] = props;
+        $[8] = ref;
+        $[9] = t1;
+        $[10] = testId;
+        $[11] = t2;
+    } else t2 = $[11];
+    return t2;
+};
+ChatHeaderActions.displayName = "ChatHeaderActions";
+export { ChatHeaderActions };

package/dist/components/Chat/ChatHeaderTitle.d.ts

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+/**
+ * Without children: the Figma Default title, "Ask Wally". With children (e.g. a thread `Select`):
+ * Figma Variant2, the Wally mark, a "/" joint, then the children.
+ */
+export interface ChatHeaderTitleProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** The title shown when there are no children (e.g. a translation). Default: "Ask Wally". */
+    label?: ReactNode;
+}
+export declare const ChatHeaderTitle: FC<ChatHeaderTitleProps>;

package/dist/components/Chat/ChatHeaderTitle.js

@@ -0,0 +1,99 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { WallyIcon } from "../WallyIcon/index.js";
+import { chatHeaderTitleVariants } from "./classes.js";
+const ChatHeaderTitle = (t0)=>{
+    const $ = c(19);
+    let children;
+    let className;
+    let label;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, children, label, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = label;
+        $[4] = props;
+        $[5] = ref;
+        $[6] = testIdProp;
+    } else {
+        children = $[1];
+        className = $[2];
+        label = $[3];
+        props = $[4];
+        ref = $[5];
+        testIdProp = $[6];
+    }
+    const testId = useTestId("title", testIdProp);
+    let t1;
+    if ($[7] !== className) {
+        t1 = cn(chatHeaderTitleVariants(), className);
+        $[7] = className;
+        $[8] = t1;
+    } else t1 = $[8];
+    let t2;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = /*#__PURE__*/ jsx(WallyIcon, {
+            variant: "simple",
+            size: "md",
+            "aria-hidden": true,
+            className: "shrink-0"
+        });
+        $[9] = t2;
+    } else t2 = $[9];
+    let t3;
+    if ($[10] !== children || $[11] !== label) {
+        t3 = null == children ? /*#__PURE__*/ jsx("span", {
+            className: "ml-8 truncate text-sm text-text-primary",
+            children: label ?? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    "Ask ",
+                    /*#__PURE__*/ jsx("span", {
+                        className: "font-mono font-medium text-text-brand",
+                        children: "Wally"
+                    })
+                ]
+            })
+        }) : /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    "aria-hidden": true,
+                    className: "pl-12 pr-4 text-sm font-medium text-text-secondary",
+                    children: "/"
+                }),
+                children
+            ]
+        });
+        $[10] = children;
+        $[11] = label;
+        $[12] = t3;
+    } else t3 = $[12];
+    let t4;
+    if ($[13] !== props || $[14] !== ref || $[15] !== t1 || $[16] !== t3 || $[17] !== testId) {
+        t4 = /*#__PURE__*/ jsxs("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "chat-header-title",
+            "data-testid": testId,
+            className: t1,
+            children: [
+                t2,
+                t3
+            ]
+        });
+        $[13] = props;
+        $[14] = ref;
+        $[15] = t1;
+        $[16] = t3;
+        $[17] = testId;
+        $[18] = t4;
+    } else t4 = $[18];
+    return t4;
+};
+ChatHeaderTitle.displayName = "ChatHeaderTitle";
+export { ChatHeaderTitle };

package/dist/components/Chat/ChatSuggestion.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonHTMLAttributes, FC, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+/** A suggested prompt pill. Sized by its `ChatSuggestions` placement (Medium when standalone). */
+export interface ChatSuggestionProps extends ButtonHTMLAttributes<HTMLButtonElement>, TestableProps {
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const ChatSuggestion: FC<ChatSuggestionProps>;

package/dist/components/Chat/ChatSuggestion.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { useChatSuggestionsContext } from "./ChatSuggestionsContext.js";
+import { chatSuggestionVariants } from "./classes.js";
+const ChatSuggestion = (t0)=>{
+    const $ = c(13);
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = testIdProp;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        testIdProp = $[4];
+    }
+    const testId = useTestId("suggestion", testIdProp);
+    const { size } = useChatSuggestionsContext();
+    let t1;
+    if ($[5] !== className || $[6] !== size) {
+        t1 = cn(chatSuggestionVariants({
+            size
+        }), className);
+        $[5] = className;
+        $[6] = size;
+        $[7] = t1;
+    } else t1 = $[7];
+    let t2;
+    if ($[8] !== props || $[9] !== ref || $[10] !== t1 || $[11] !== testId) {
+        t2 = /*#__PURE__*/ jsx("button", {
+            type: "button",
+            ...props,
+            ref: ref,
+            "data-slot": "chat-suggestion",
+            "data-testid": testId,
+            className: t1
+        });
+        $[8] = props;
+        $[9] = ref;
+        $[10] = t1;
+        $[11] = testId;
+        $[12] = t2;
+    } else t2 = $[12];
+    return t2;
+};
+ChatSuggestion.displayName = "ChatSuggestion";
+export { ChatSuggestion };

package/dist/components/Chat/ChatSuggestions.d.ts

@@ -0,0 +1,14 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export type ChatSuggestionsPlacement = 'footer' | 'greeting';
+export interface ChatSuggestionsProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * `'footer'` (default, Figma 91:1167): right-aligned Medium pills above the input.
+     * `'greeting'` (Figma 44:1706): centered Large pills under the greeting.
+     */
+    placement?: ChatSuggestionsPlacement;
+    /** Visible label (Figma "Suggestions"); also becomes the group's accessible name. */
+    label?: ReactNode;
+}
+export declare const ChatSuggestions: FC<ChatSuggestionsProps>;