@wallarm-org/design-system 3.2.0 → 3.3.0

package/dist/components/ChatPermissions/ChatPermissionsItem.js

@@ -0,0 +1,115 @@
+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 { Switch, SwitchControl, SwitchLabel } from "../Switch/index.js";
+import { chatPermissionsItemDescriptionVariants, chatPermissionsItemVariants } from "./classes.js";
+const ChatPermissionsItem = (t0)=>{
+    const $ = c(28);
+    let className;
+    let description;
+    let name;
+    let onCheckedChange;
+    let rest;
+    let testIdProp;
+    let title;
+    if ($[0] !== t0) {
+        ({ name, title, description, onCheckedChange, className, "data-testid": testIdProp, ...rest } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = description;
+        $[3] = name;
+        $[4] = onCheckedChange;
+        $[5] = rest;
+        $[6] = testIdProp;
+        $[7] = title;
+    } else {
+        className = $[1];
+        description = $[2];
+        name = $[3];
+        onCheckedChange = $[4];
+        rest = $[5];
+        testIdProp = $[6];
+        title = $[7];
+    }
+    const testId = useTestId("item", testIdProp);
+    let t1;
+    if ($[8] !== name || $[9] !== onCheckedChange) {
+        t1 = onCheckedChange && ((t2)=>{
+            const { checked } = t2;
+            return onCheckedChange({
+                checked,
+                name
+            });
+        });
+        $[8] = name;
+        $[9] = onCheckedChange;
+        $[10] = t1;
+    } else t1 = $[10];
+    let t2;
+    if ($[11] !== className) {
+        t2 = cn(chatPermissionsItemVariants(), className);
+        $[11] = className;
+        $[12] = t2;
+    } else t2 = $[12];
+    let t3;
+    if ($[13] !== title) {
+        t3 = /*#__PURE__*/ jsx(SwitchLabel, {
+            children: title
+        });
+        $[13] = title;
+        $[14] = t3;
+    } else t3 = $[14];
+    let t4;
+    if ($[15] !== description) {
+        t4 = null != description && /*#__PURE__*/ jsx("span", {
+            className: chatPermissionsItemDescriptionVariants(),
+            children: description
+        });
+        $[15] = description;
+        $[16] = t4;
+    } else t4 = $[16];
+    let t5;
+    if ($[17] !== t3 || $[18] !== t4) {
+        t5 = /*#__PURE__*/ jsxs("span", {
+            className: "flex min-w-0 flex-1 flex-col",
+            children: [
+                t3,
+                t4
+            ]
+        });
+        $[17] = t3;
+        $[18] = t4;
+        $[19] = t5;
+    } else t5 = $[19];
+    let t6;
+    if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+        t6 = /*#__PURE__*/ jsx(SwitchControl, {});
+        $[20] = t6;
+    } else t6 = $[20];
+    let t7;
+    if ($[21] !== name || $[22] !== rest || $[23] !== t1 || $[24] !== t2 || $[25] !== t5 || $[26] !== testId) {
+        t7 = /*#__PURE__*/ jsxs(Switch, {
+            ...rest,
+            name: name,
+            onCheckedChange: t1,
+            "data-slot": "chat-permissions-item",
+            "data-testid": testId,
+            className: t2,
+            children: [
+                t5,
+                t6
+            ]
+        });
+        $[21] = name;
+        $[22] = rest;
+        $[23] = t1;
+        $[24] = t2;
+        $[25] = t5;
+        $[26] = testId;
+        $[27] = t7;
+    } else t7 = $[27];
+    return t7;
+};
+ChatPermissionsItem.displayName = "ChatPermissionsItem";
+export { ChatPermissionsItem };

package/dist/components/ChatPermissions/ChatPermissionsTrigger.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonHTMLAttributes, FC, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ChatPermissionsTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, TestableProps {
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const ChatPermissionsTrigger: FC<ChatPermissionsTriggerProps>;

package/dist/components/ChatPermissions/ChatPermissionsTrigger.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { usePopoverContext } from "@ark-ui/react/popover";
+import { Settings2 } from "../../icons/index.js";
+import { useTestId } from "../../utils/testId.js";
+import { Button } from "../Button/index.js";
+import { PopoverTrigger } from "../Popover/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { useChatPermissionsContext } from "./ChatPermissionsContext.js";
+const DEFAULT_LABEL = "Permission settings";
+const ChatPermissionsTrigger = (t0)=>{
+    const $ = c(25);
+    let children;
+    let ref;
+    let rest;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, children, "aria-label": t1, "data-testid": testIdProp, ...rest } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = ref;
+        $[3] = rest;
+        $[4] = t1;
+        $[5] = testIdProp;
+    } else {
+        children = $[1];
+        ref = $[2];
+        rest = $[3];
+        t1 = $[4];
+        testIdProp = $[5];
+    }
+    const ariaLabel = void 0 === t1 ? DEFAULT_LABEL : t1;
+    const { triggerId } = useChatPermissionsContext();
+    const { open } = usePopoverContext();
+    const testId = useTestId("trigger", testIdProp);
+    const tooltipTestId = useTestId("tooltip");
+    let t2;
+    if ($[6] !== triggerId) {
+        t2 = {
+            trigger: triggerId
+        };
+        $[6] = triggerId;
+        $[7] = t2;
+    } else t2 = $[7];
+    let t3;
+    if ($[8] !== children) {
+        t3 = children ?? /*#__PURE__*/ jsx(Settings2, {});
+        $[8] = children;
+        $[9] = t3;
+    } else t3 = $[9];
+    let t4;
+    if ($[10] !== ariaLabel || $[11] !== ref || $[12] !== rest || $[13] !== t3 || $[14] !== testId || $[15] !== triggerId) {
+        t4 = /*#__PURE__*/ jsx(PopoverTrigger, {
+            asChild: true,
+            children: /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Button, {
+                    type: "button",
+                    ...rest,
+                    ref: ref,
+                    id: triggerId,
+                    "data-slot": "chat-permissions-trigger",
+                    "data-testid": testId,
+                    variant: "ghost",
+                    color: "neutral",
+                    size: "small",
+                    "aria-label": ariaLabel,
+                    children: t3
+                })
+            })
+        });
+        $[10] = ariaLabel;
+        $[11] = ref;
+        $[12] = rest;
+        $[13] = t3;
+        $[14] = testId;
+        $[15] = triggerId;
+        $[16] = t4;
+    } else t4 = $[16];
+    let t5;
+    if ($[17] !== ariaLabel || $[18] !== tooltipTestId) {
+        t5 = /*#__PURE__*/ jsx(TooltipContent, {
+            "data-testid": tooltipTestId,
+            children: ariaLabel
+        });
+        $[17] = ariaLabel;
+        $[18] = tooltipTestId;
+        $[19] = t5;
+    } else t5 = $[19];
+    let t6;
+    if ($[20] !== open || $[21] !== t2 || $[22] !== t4 || $[23] !== t5) {
+        t6 = /*#__PURE__*/ jsxs(Tooltip, {
+            disabled: open,
+            ids: t2,
+            children: [
+                t4,
+                t5
+            ]
+        });
+        $[20] = open;
+        $[21] = t2;
+        $[22] = t4;
+        $[23] = t5;
+        $[24] = t6;
+    } else t6 = $[24];
+    return t6;
+};
+ChatPermissionsTrigger.displayName = "ChatPermissionsTrigger";
+export { ChatPermissionsTrigger };

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

@@ -0,0 +1,3 @@
+export declare const chatPermissionsContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const chatPermissionsItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const chatPermissionsItemDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/ChatPermissions/classes.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+const chatPermissionsContentVariants = cva('w-320 gap-1 p-8');
+const chatPermissionsItemVariants = cva('w-full items-start justify-between gap-4 rounded-6 px-8 py-6 hover:bg-states-primary-hover');
+const chatPermissionsItemDescriptionVariants = cva('truncate text-xs text-text-secondary');
+export { chatPermissionsContentVariants, chatPermissionsItemDescriptionVariants, chatPermissionsItemVariants };

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

@@ -0,0 +1,4 @@
+export { ChatPermissions, type ChatPermissionsProps } from './ChatPermissions.js';
+export { ChatPermissionsContent, type ChatPermissionsContentProps } from './ChatPermissionsContent.js';
+export { ChatPermissionsItem, type ChatPermissionsItemCheckedChangeDetails, type ChatPermissionsItemProps, } from './ChatPermissionsItem.js';
+export { ChatPermissionsTrigger, type ChatPermissionsTriggerProps } from './ChatPermissionsTrigger.js';

package/dist/components/ChatPermissions/index.js

@@ -0,0 +1,4 @@
+export { ChatPermissions } from "./ChatPermissions.js";
+export { ChatPermissionsContent } from "./ChatPermissionsContent.js";
+export { ChatPermissionsItem } from "./ChatPermissionsItem.js";
+export { ChatPermissionsTrigger } from "./ChatPermissionsTrigger.js";

package/dist/components/Conversation/Conversation.d.ts

@@ -0,0 +1,19 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ConversationProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Distance in px from the bottom that still counts as "at bottom". Default 70. */
+    threshold?: number;
+    /**
+     * When it changes, re-stick and scroll to the bottom even if the reader scrolled up. Pass the
+     * last user message id, so sending always reveals the answer. For a thread switch, remount
+     * instead: `key={threadId}`.
+     */
+    autoScrollKey?: string | number;
+}
+/**
+ * Stick-to-bottom for the chat log: takes `ChatBody`'s place between `ChatHeader` and `ChatFooter`
+ * and holds a `ConversationContent` (the scroller) and a `ConversationScrollButton`.
+ * Transparent in the test-id cascade: inside `<Chat data-testid='chat'>` the log stays `chat--body`.
+ */
+export declare const Conversation: FC<ConversationProps>;

package/dist/components/Conversation/Conversation.js

@@ -0,0 +1,102 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { ConversationContext } from "./ConversationContext.js";
+import { conversationVariants } from "./classes.js";
+import { useStickToBottom } from "./useStickToBottom.js";
+const Conversation = (t0)=>{
+    const $ = c(26);
+    let autoScrollKey;
+    let children;
+    let className;
+    let props;
+    let ref;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, threshold: t1, autoScrollKey, className, children, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = autoScrollKey;
+        $[2] = children;
+        $[3] = className;
+        $[4] = props;
+        $[5] = ref;
+        $[6] = t1;
+        $[7] = testIdProp;
+    } else {
+        autoScrollKey = $[1];
+        children = $[2];
+        className = $[3];
+        props = $[4];
+        ref = $[5];
+        t1 = $[6];
+        testIdProp = $[7];
+    }
+    const threshold = void 0 === t1 ? 70 : t1;
+    const testId = useTestId(void 0, testIdProp);
+    const [scrollEl, setScrollEl] = useState(null);
+    const [contentEl, setContentEl] = useState(null);
+    const { isAtBottom, scrollToBottom } = useStickToBottom(scrollEl, contentEl, threshold, autoScrollKey);
+    let t2;
+    if ($[8] !== className) {
+        t2 = cn(conversationVariants(), className);
+        $[8] = className;
+        $[9] = t2;
+    } else t2 = $[9];
+    let t3;
+    if ($[10] !== isAtBottom || $[11] !== scrollEl || $[12] !== scrollToBottom) {
+        t3 = {
+            isAtBottom,
+            scrollToBottom,
+            scrollEl,
+            setScrollEl,
+            setContentEl
+        };
+        $[10] = isAtBottom;
+        $[11] = scrollEl;
+        $[12] = scrollToBottom;
+        $[13] = t3;
+    } else t3 = $[13];
+    let t4;
+    if ($[14] !== children || $[15] !== testId) {
+        t4 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: children
+        });
+        $[14] = children;
+        $[15] = testId;
+        $[16] = t4;
+    } else t4 = $[16];
+    let t5;
+    if ($[17] !== t3 || $[18] !== t4) {
+        t5 = /*#__PURE__*/ jsx(ConversationContext.Provider, {
+            value: t3,
+            children: t4
+        });
+        $[17] = t3;
+        $[18] = t4;
+        $[19] = t5;
+    } else t5 = $[19];
+    let t6;
+    if ($[20] !== props || $[21] !== ref || $[22] !== t2 || $[23] !== t5 || $[24] !== testIdProp) {
+        t6 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "conversation",
+            "data-testid": testIdProp,
+            className: t2,
+            children: t5
+        });
+        $[20] = props;
+        $[21] = ref;
+        $[22] = t2;
+        $[23] = t5;
+        $[24] = testIdProp;
+        $[25] = t6;
+    } else t6 = $[25];
+    return t6;
+};
+Conversation.displayName = "Conversation";
+export { Conversation };

package/dist/components/Conversation/ConversationContent.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { type ChatBodyProps } from '../Chat/ChatBody.js';
+/**
+ * The scroller: renders the built `ChatBody` (role=log; `ref`, `className`, `aria-*`, `tabIndex`
+ * land on it) around an inner measured column.
+ */
+export interface ConversationContentProps extends ChatBodyProps {
+    /** Classes for the inner column (`flex flex-col`, no gap — v1 §3.1). */
+    contentClassName?: string;
+}
+export declare const ConversationContent: FC<ConversationContentProps>;

package/dist/components/Conversation/ConversationContent.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/mergeRefs.js";
+import { useTestId } from "../../utils/testId.js";
+import { ChatBody } from "../Chat/ChatBody.js";
+import { useConversationInternal } from "./ConversationContext.js";
+import { conversationContentVariants, conversationEndVariants, conversationScrollerVariants } from "./classes.js";
+const ConversationContent = (t0)=>{
+    const $ = c(26);
+    let children;
+    let className;
+    let contentClassName;
+    let props;
+    let ref;
+    if ($[0] !== t0) {
+        ({ ref, className, contentClassName, children, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = contentClassName;
+        $[4] = props;
+        $[5] = ref;
+    } else {
+        children = $[1];
+        className = $[2];
+        contentClassName = $[3];
+        props = $[4];
+        ref = $[5];
+    }
+    const { setScrollEl, setContentEl } = useConversationInternal("ConversationContent");
+    const endTestId = useTestId("end");
+    let t1;
+    if ($[6] !== ref || $[7] !== setScrollEl) {
+        t1 = mergeRefs(ref, setScrollEl);
+        $[6] = ref;
+        $[7] = setScrollEl;
+        $[8] = t1;
+    } else t1 = $[8];
+    let t2;
+    if ($[9] !== className) {
+        t2 = cn(conversationScrollerVariants(), className);
+        $[9] = className;
+        $[10] = t2;
+    } else t2 = $[10];
+    let t3;
+    if ($[11] !== contentClassName) {
+        t3 = cn(conversationContentVariants(), contentClassName);
+        $[11] = contentClassName;
+        $[12] = t3;
+    } else t3 = $[12];
+    let t4;
+    if ($[13] !== children || $[14] !== setContentEl || $[15] !== t3) {
+        t4 = /*#__PURE__*/ jsx("div", {
+            ref: setContentEl,
+            "data-slot": "conversation-content",
+            className: t3,
+            children: children
+        });
+        $[13] = children;
+        $[14] = setContentEl;
+        $[15] = t3;
+        $[16] = t4;
+    } else t4 = $[16];
+    let t5;
+    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = conversationEndVariants();
+        $[17] = t5;
+    } else t5 = $[17];
+    let t6;
+    if ($[18] !== endTestId) {
+        t6 = /*#__PURE__*/ jsx("span", {
+            tabIndex: -1,
+            "data-slot": "conversation-end",
+            "data-testid": endTestId,
+            className: t5
+        });
+        $[18] = endTestId;
+        $[19] = t6;
+    } else t6 = $[19];
+    let t7;
+    if ($[20] !== props || $[21] !== t1 || $[22] !== t2 || $[23] !== t4 || $[24] !== t6) {
+        t7 = /*#__PURE__*/ jsxs(ChatBody, {
+            tabIndex: -1,
+            ...props,
+            ref: t1,
+            className: t2,
+            children: [
+                t4,
+                t6
+            ]
+        });
+        $[20] = props;
+        $[21] = t1;
+        $[22] = t2;
+        $[23] = t4;
+        $[24] = t6;
+        $[25] = t7;
+    } else t7 = $[25];
+    return t7;
+};
+ConversationContent.displayName = "ConversationContent";
+export { ConversationContent };

package/dist/components/Conversation/ConversationContext.d.ts

@@ -0,0 +1,14 @@
+interface ConversationContextValue {
+    isAtBottom: boolean;
+    /** Re-sticks and scrolls: 'smooth' glides (rAF, follows growth), else or under reduced motion jumps. */
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+}
+/** Internal: the parts also need the scroll element and the callback refs. */
+interface ConversationInternalValue extends ConversationContextValue {
+    scrollEl: HTMLElement | null;
+    setScrollEl: (node: HTMLElement | null) => void;
+    setContentEl: (node: HTMLElement | null) => void;
+}
+export declare const ConversationContext: import("react").Context<ConversationInternalValue | null>;
+export declare const useConversationInternal: (part: string) => ConversationInternalValue;
+export {};

package/dist/components/Conversation/ConversationContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+const ConversationContext = createContext(null);
+const useConversationInternal = (part)=>{
+    const context = useContext(ConversationContext);
+    if (!context) throw new Error(`${part} must be rendered inside <Conversation>`);
+    return context;
+};
+export { ConversationContext, useConversationInternal };

package/dist/components/Conversation/ConversationEmptyState.d.ts

@@ -0,0 +1,15 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ConversationEmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Greeting heading. Default 'How can I help you today?'. */
+    title?: ReactNode;
+    /** Under the heading, e.g. `<ChatSuggestions placement='greeting'>`. */
+    children?: ReactNode;
+}
+/**
+ * The greeting for an empty conversation. Render it inside `ConversationContent`: it is not
+ * centered, `ChatGreeting`'s top padding assumes the log's. To replace the greeting entirely,
+ * render your own node instead.
+ */
+export declare const ConversationEmptyState: FC<ConversationEmptyStateProps>;

package/dist/components/Conversation/ConversationEmptyState.js

@@ -0,0 +1,70 @@
+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 { ChatGreeting } from "../Chat/ChatGreeting.js";
+import { conversationEmptyStateVariants } from "./classes.js";
+const ConversationEmptyState = (t0)=>{
+    const $ = c(18);
+    let children;
+    let className;
+    let props;
+    let ref;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, title: t1, className, children, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = props;
+        $[4] = ref;
+        $[5] = t1;
+        $[6] = testIdProp;
+    } else {
+        children = $[1];
+        className = $[2];
+        props = $[3];
+        ref = $[4];
+        t1 = $[5];
+        testIdProp = $[6];
+    }
+    const title = void 0 === t1 ? "How can I help you today?" : t1;
+    const testId = useTestId("empty-state", testIdProp);
+    let t2;
+    if ($[7] !== className) {
+        t2 = cn(conversationEmptyStateVariants(), className);
+        $[7] = className;
+        $[8] = t2;
+    } else t2 = $[8];
+    let t3;
+    if ($[9] !== children || $[10] !== title) {
+        t3 = /*#__PURE__*/ jsx(ChatGreeting, {
+            title: title,
+            children: children
+        });
+        $[9] = children;
+        $[10] = title;
+        $[11] = t3;
+    } else t3 = $[11];
+    let t4;
+    if ($[12] !== props || $[13] !== ref || $[14] !== t2 || $[15] !== t3 || $[16] !== testId) {
+        t4 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "conversation-empty-state",
+            "data-testid": testId,
+            className: t2,
+            children: t3
+        });
+        $[12] = props;
+        $[13] = ref;
+        $[14] = t2;
+        $[15] = t3;
+        $[16] = testId;
+        $[17] = t4;
+    } else t4 = $[17];
+    return t4;
+};
+ConversationEmptyState.displayName = "ConversationEmptyState";
+export { ConversationEmptyState };

package/dist/components/Conversation/ConversationScrollButton.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonHTMLAttributes, type FC, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ConversationScrollButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'>, TestableProps {
+    ref?: Ref<HTMLButtonElement>;
+    /** Accessible name and tooltip. Default 'Scroll to latest message'. */
+    label?: string;
+}
+/**
+ * The scroll-to-latest button: shown only while the reader is scrolled up. A click scrolls to the
+ * bottom and hands focus to the end of the log. The stock small icon-only Button (outline, neutral),
+ * floated at the bottom centre — not customised.
+ */
+export declare const ConversationScrollButton: FC<ConversationScrollButtonProps>;