@wallarm-org/design-system 3.2.0 → 3.3.0

package/dist/components/Conversation/ConversationScrollButton.js

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { ArrowDown } from "../../icons/index.js";
+import { useTestId } from "../../utils/testId.js";
+import { Button } from "../Button/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { useConversationInternal } from "./ConversationContext.js";
+import { conversationScrollButtonVariants } from "./classes.js";
+const ConversationScrollButton = (t0)=>{
+    const $ = c(31);
+    let className;
+    let id;
+    let onClick;
+    let props;
+    let ref;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, id, label: t1, className, onClick, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = id;
+        $[3] = onClick;
+        $[4] = props;
+        $[5] = ref;
+        $[6] = t1;
+        $[7] = testIdProp;
+    } else {
+        className = $[1];
+        id = $[2];
+        onClick = $[3];
+        props = $[4];
+        ref = $[5];
+        t1 = $[6];
+        testIdProp = $[7];
+    }
+    const label = void 0 === t1 ? "Scroll to latest message" : t1;
+    const { isAtBottom, scrollToBottom, scrollEl } = useConversationInternal("ConversationScrollButton");
+    const testId = useTestId("scroll-button", testIdProp);
+    const fallbackId = useId();
+    const triggerId = id ?? fallbackId;
+    if (isAtBottom) return null;
+    let t2;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = conversationScrollButtonVariants();
+        $[8] = t2;
+    } else t2 = $[8];
+    let t3;
+    if ($[9] !== triggerId) {
+        t3 = {
+            trigger: triggerId
+        };
+        $[9] = triggerId;
+        $[10] = t3;
+    } else t3 = $[10];
+    let t4;
+    if ($[11] !== onClick || $[12] !== scrollEl || $[13] !== scrollToBottom) {
+        t4 = (event)=>{
+            onClick?.(event);
+            if (event.defaultPrevented) return;
+            scrollToBottom("smooth");
+            const end = scrollEl?.lastElementChild;
+            (end instanceof HTMLElement ? end : scrollEl)?.focus({
+                preventScroll: true
+            });
+        };
+        $[11] = onClick;
+        $[12] = scrollEl;
+        $[13] = scrollToBottom;
+        $[14] = t4;
+    } else t4 = $[14];
+    let t5;
+    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = /*#__PURE__*/ jsx(ArrowDown, {});
+        $[15] = t5;
+    } else t5 = $[15];
+    let t6;
+    if ($[16] !== className || $[17] !== label || $[18] !== props || $[19] !== ref || $[20] !== t4 || $[21] !== testId || $[22] !== triggerId) {
+        t6 = /*#__PURE__*/ jsx(TooltipTrigger, {
+            asChild: true,
+            children: /*#__PURE__*/ jsx(Button, {
+                type: "button",
+                "aria-label": label,
+                ...props,
+                ref: ref,
+                id: triggerId,
+                variant: "outline",
+                color: "neutral",
+                size: "small",
+                "data-slot": "conversation-scroll-button",
+                "data-testid": testId,
+                className: className,
+                onClick: t4,
+                children: t5
+            })
+        });
+        $[16] = className;
+        $[17] = label;
+        $[18] = props;
+        $[19] = ref;
+        $[20] = t4;
+        $[21] = testId;
+        $[22] = triggerId;
+        $[23] = t6;
+    } else t6 = $[23];
+    let t7;
+    if ($[24] !== label) {
+        t7 = /*#__PURE__*/ jsx(TooltipContent, {
+            children: label
+        });
+        $[24] = label;
+        $[25] = t7;
+    } else t7 = $[25];
+    let t8;
+    if ($[26] !== t3 || $[27] !== t6 || $[28] !== t7 || $[29] !== testId) {
+        t8 = /*#__PURE__*/ jsx("div", {
+            "data-slot": "conversation-scroll-button-anchor",
+            className: t2,
+            children: /*#__PURE__*/ jsxs(Tooltip, {
+                ids: t3,
+                "data-testid": testId,
+                children: [
+                    t6,
+                    t7
+                ]
+            })
+        });
+        $[26] = t3;
+        $[27] = t6;
+        $[28] = t7;
+        $[29] = testId;
+        $[30] = t8;
+    } else t8 = $[30];
+    return t8;
+};
+ConversationScrollButton.displayName = "ConversationScrollButton";
+export { ConversationScrollButton };

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

@@ -0,0 +1,13 @@
+export declare const conversationVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * The scroller (ChatBody). `overflow-anchor: none`: browser scroll anchoring would shift
+ * scrollTop on its own as content grows and fight the stick-to-bottom animator. Focus ring inset:
+ * not clipped.
+ */
+export declare const conversationScrollerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** The inner measured column: no gap — the 30px actions row spaces the messages (v1 §3.1). */
+export declare const conversationContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Zero-height focus target; its ring draws a bar at the end of the thread. */
+export declare const conversationEndVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const conversationEmptyStateVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const conversationScrollButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/Conversation/classes.js

@@ -0,0 +1,8 @@
+import { cva } from "class-variance-authority";
+const conversationVariants = cva('relative flex min-h-0 flex-1 flex-col');
+const conversationScrollerVariants = cva('[overflow-anchor:none] outline-none focus-visible:ring-3 focus-visible:ring-focus-primary focus-visible:ring-inset');
+const conversationContentVariants = cva('flex flex-col');
+const conversationEndVariants = cva('block shrink-0 outline-none focus-visible:ring-3 focus-visible:ring-focus-primary');
+const conversationEmptyStateVariants = cva('flex flex-col');
+const conversationScrollButtonVariants = cva('absolute bottom-12 left-1/2 flex -translate-x-1/2');
+export { conversationContentVariants, conversationEmptyStateVariants, conversationEndVariants, conversationScrollButtonVariants, conversationScrollerVariants, conversationVariants };

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

@@ -0,0 +1,4 @@
+export { Conversation, type ConversationProps } from './Conversation.js';
+export { ConversationContent, type ConversationContentProps } from './ConversationContent.js';
+export { ConversationEmptyState, type ConversationEmptyStateProps, } from './ConversationEmptyState.js';
+export { ConversationScrollButton, type ConversationScrollButtonProps, } from './ConversationScrollButton.js';

package/dist/components/Conversation/index.js

@@ -0,0 +1,4 @@
+export { Conversation } from "./Conversation.js";
+export { ConversationContent } from "./ConversationContent.js";
+export { ConversationEmptyState } from "./ConversationEmptyState.js";
+export { ConversationScrollButton } from "./ConversationScrollButton.js";

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

@@ -0,0 +1,9 @@
+/**
+ * Keeps a scroll element pinned to the bottom while its content grows, until the reader scrolls
+ * up; re-sticks on scroll back down, `scrollToBottom()` or an `autoScrollKey` change.
+ * Internal to `Conversation` (spec v2 §7.6).
+ */
+export declare function useStickToBottom(scrollEl: HTMLElement | null, contentEl: HTMLElement | null, threshold: number, autoScrollKey: unknown): {
+    isAtBottom: boolean;
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+};

package/dist/components/Conversation/useStickToBottom.js

@@ -0,0 +1,203 @@
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+const reducedMotion = ()=>"function" == typeof window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const isEditable = (target)=>target instanceof HTMLElement && (target.isContentEditable || target.matches("input, textarea, select"));
+const SCROLL_UP_KEYS = new Set([
+    "ArrowUp",
+    "PageUp",
+    "Home"
+]);
+const innerScrollsUp = (target, root)=>{
+    for(let el = target instanceof Element ? target : null; el && el !== root; el = el.parentElement)if (el.scrollTop > 0) return true;
+    return false;
+};
+const pin = (el)=>{
+    el.scrollTop = el.scrollHeight;
+};
+const setTop = (el, top)=>{
+    el.scrollTop = top;
+};
+const OMEGA = 0.02;
+const MAX_SPEED = 3;
+const MAX_DT = 1000 / 60;
+function useStickToBottom(scrollEl, contentEl, threshold, autoScrollKey) {
+    const $ = c(13);
+    const [isAtBottom, setIsAtBottom] = useState(true);
+    const stuck = useRef(true);
+    const follow = useRef(null);
+    let t0;
+    let t1;
+    if ($[0] !== contentEl || $[1] !== scrollEl || $[2] !== threshold) {
+        t0 = ()=>{
+            if (!scrollEl || !contentEl) return;
+            let lastTop = scrollEl.scrollTop;
+            let lastHeight = scrollEl.scrollHeight;
+            const near = ()=>scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight <= threshold;
+            let frame = 0;
+            let velocity = 0;
+            let lastTime = 0;
+            const sync = ()=>{
+                lastTop = scrollEl.scrollTop;
+                lastHeight = scrollEl.scrollHeight;
+                setIsAtBottom(stuck.current && 0 !== frame || near());
+            };
+            const selecting = ()=>{
+                const selection = document.getSelection();
+                return !!selection && !selection.isCollapsed && scrollEl.contains(selection.anchorNode);
+            };
+            const stop = ()=>{
+                if (frame) cancelAnimationFrame(frame);
+                frame = 0;
+                velocity = 0;
+            };
+            const step = (now)=>{
+                frame = 0;
+                if (!stuck.current || selecting()) return stop();
+                const top = scrollEl.scrollTop;
+                const gap = scrollEl.scrollHeight - scrollEl.clientHeight - top;
+                if (gap <= 1) {
+                    if (gap > 0) setTop(scrollEl, top + gap);
+                    return stop();
+                }
+                const dt = lastTime && now > lastTime ? Math.min(now - lastTime, MAX_DT) : MAX_DT;
+                lastTime = now;
+                velocity = Math.min(MAX_SPEED, Math.max(0, velocity + (OMEGA * OMEGA * gap - 2 * OMEGA * velocity) * dt));
+                frame = requestAnimationFrame(step);
+                setTop(scrollEl, top + Math.min(gap, Math.max(1, velocity * dt)));
+            };
+            const start = ()=>{
+                if (!stuck.current || selecting()) return;
+                if (reducedMotion()) return void pin(scrollEl);
+                if (frame) return;
+                lastTime = 0;
+                frame = requestAnimationFrame(step);
+            };
+            follow.current = start;
+            const onResize = ()=>{
+                start();
+                sync();
+            };
+            const onScroll = ()=>{
+                const shrank = scrollEl.scrollHeight < lastHeight;
+                const clamped = scrollEl.scrollTop >= scrollEl.scrollHeight - scrollEl.clientHeight - 1;
+                if (shrank || clamped || !(scrollEl.scrollTop < lastTop - 1)) {
+                    if (near()) stuck.current = true;
+                } else {
+                    stuck.current = false;
+                    stop();
+                }
+                sync();
+            };
+            const unstick = (target)=>{
+                if (scrollEl.scrollTop > 0 && !innerScrollsUp(target, scrollEl)) {
+                    stuck.current = false;
+                    stop();
+                }
+            };
+            const onWheel = (event)=>{
+                if (event.deltaY < 0 && -event.deltaY >= Math.abs(event.deltaX)) unstick(event.target);
+            };
+            const onKeyDown = (event_0)=>{
+                if (!event_0.defaultPrevented && SCROLL_UP_KEYS.has(event_0.key) && event_0.target instanceof Node && scrollEl.contains(event_0.target) && !isEditable(event_0.target)) unstick(event_0.target);
+            };
+            let touchY = 0;
+            const onTouchStart = (event_1)=>{
+                touchY = event_1.touches[0]?.clientY ?? 0;
+            };
+            const onTouchMove = (event_2)=>{
+                const y = event_2.touches[0]?.clientY ?? touchY;
+                if (y > touchY) unstick(event_2.target);
+                touchY = y;
+            };
+            const observer = new ResizeObserver(onResize);
+            observer.observe(contentEl);
+            observer.observe(scrollEl);
+            scrollEl.addEventListener("scroll", onScroll, {
+                passive: true
+            });
+            scrollEl.addEventListener("wheel", onWheel, {
+                passive: true
+            });
+            scrollEl.addEventListener("touchstart", onTouchStart, {
+                passive: true
+            });
+            scrollEl.addEventListener("touchmove", onTouchMove, {
+                passive: true
+            });
+            const doc = scrollEl.ownerDocument;
+            doc.addEventListener("keydown", onKeyDown);
+            pin(scrollEl);
+            sync();
+            return ()=>{
+                stop();
+                follow.current = null;
+                observer.disconnect();
+                scrollEl.removeEventListener("scroll", onScroll);
+                scrollEl.removeEventListener("wheel", onWheel);
+                scrollEl.removeEventListener("touchstart", onTouchStart);
+                scrollEl.removeEventListener("touchmove", onTouchMove);
+                doc.removeEventListener("keydown", onKeyDown);
+            };
+        };
+        t1 = [
+            scrollEl,
+            contentEl,
+            threshold
+        ];
+        $[0] = contentEl;
+        $[1] = scrollEl;
+        $[2] = threshold;
+        $[3] = t0;
+        $[4] = t1;
+    } else {
+        t0 = $[3];
+        t1 = $[4];
+    }
+    useEffect(t0, t1);
+    const lastKey = useRef(autoScrollKey);
+    let t2;
+    let t3;
+    if ($[5] !== autoScrollKey) {
+        t2 = ()=>{
+            if (Object.is(lastKey.current, autoScrollKey)) return;
+            lastKey.current = autoScrollKey;
+            stuck.current = true;
+            follow.current?.();
+        };
+        t3 = [
+            autoScrollKey
+        ];
+        $[5] = autoScrollKey;
+        $[6] = t2;
+        $[7] = t3;
+    } else {
+        t2 = $[6];
+        t3 = $[7];
+    }
+    useEffect(t2, t3);
+    let t4;
+    if ($[8] !== scrollEl) {
+        t4 = (t5)=>{
+            const behavior = void 0 === t5 ? "smooth" : t5;
+            if (!scrollEl) return;
+            stuck.current = true;
+            if ("smooth" === behavior) follow.current?.();
+            else pin(scrollEl);
+        };
+        $[8] = scrollEl;
+        $[9] = t4;
+    } else t4 = $[9];
+    const scrollToBottom = t4;
+    let t5;
+    if ($[10] !== isAtBottom || $[11] !== scrollToBottom) {
+        t5 = {
+            isAtBottom,
+            scrollToBottom
+        };
+        $[10] = isAtBottom;
+        $[11] = scrollToBottom;
+        $[12] = t5;
+    } else t5 = $[12];
+    return t5;
+}
+export { useStickToBottom };

package/dist/components/MessageActions/MessageAction.d.ts

@@ -0,0 +1,18 @@
+import { type ButtonHTMLAttributes, type FC, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface MessageActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, TestableProps {
+    ref?: Ref<HTMLButtonElement>;
+    /** Required: the accessible name and the tooltip text. */
+    'aria-label': string;
+    /** The icon. */
+    children: ReactNode;
+}
+/**
+ * Icon-only ghost button with a tooltip. The tooltip anchors to the button's `id`, so
+ * an outer `DropdownMenuTrigger asChild` (which injects its own id) just works.
+ *
+ * The tooltip derives its test id from the action (`<action-id>--content`). As a
+ * `DropdownMenuTrigger asChild` child, pass an explicit `data-testid` — the trigger
+ * injects `<base>--trigger`, which otherwise replaces the cascaded `<base>--action`.
+ */
+export declare const MessageAction: FC<MessageActionProps>;

package/dist/components/MessageActions/MessageAction.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Button } from "../Button/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { messageActionVariants } from "./classes.js";
+const MessageAction = (t0)=>{
+    const $ = c(27);
+    let ariaLabel;
+    let children;
+    let className;
+    let id;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, id, className, children, "aria-label": ariaLabel, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = ariaLabel;
+        $[2] = children;
+        $[3] = className;
+        $[4] = id;
+        $[5] = props;
+        $[6] = ref;
+        $[7] = testIdProp;
+    } else {
+        ariaLabel = $[1];
+        children = $[2];
+        className = $[3];
+        id = $[4];
+        props = $[5];
+        ref = $[6];
+        testIdProp = $[7];
+    }
+    const testId = useTestId("action", testIdProp);
+    const autoId = useId();
+    const triggerId = id ?? autoId;
+    let t1;
+    if ($[8] !== triggerId) {
+        t1 = {
+            trigger: triggerId
+        };
+        $[8] = triggerId;
+        $[9] = t1;
+    } else t1 = $[9];
+    let t2;
+    if ($[10] !== className) {
+        t2 = cn(messageActionVariants(), className);
+        $[10] = className;
+        $[11] = t2;
+    } else t2 = $[11];
+    let t3;
+    if ($[12] !== ariaLabel || $[13] !== children || $[14] !== props || $[15] !== ref || $[16] !== t2 || $[17] !== testId || $[18] !== triggerId) {
+        t3 = /*#__PURE__*/ jsx(TooltipTrigger, {
+            asChild: true,
+            children: /*#__PURE__*/ jsx(Button, {
+                type: "button",
+                ...props,
+                ref: ref,
+                id: triggerId,
+                variant: "ghost",
+                color: "neutral",
+                size: "small",
+                "aria-label": ariaLabel,
+                "data-slot": "message-action",
+                "data-testid": testId,
+                className: t2,
+                children: children
+            })
+        });
+        $[12] = ariaLabel;
+        $[13] = children;
+        $[14] = props;
+        $[15] = ref;
+        $[16] = t2;
+        $[17] = testId;
+        $[18] = triggerId;
+        $[19] = t3;
+    } else t3 = $[19];
+    let t4;
+    if ($[20] !== ariaLabel) {
+        t4 = /*#__PURE__*/ jsx(TooltipContent, {
+            children: ariaLabel
+        });
+        $[20] = ariaLabel;
+        $[21] = t4;
+    } else t4 = $[21];
+    let t5;
+    if ($[22] !== t1 || $[23] !== t3 || $[24] !== t4 || $[25] !== testId) {
+        t5 = /*#__PURE__*/ jsxs(Tooltip, {
+            ids: t1,
+            "data-testid": testId,
+            children: [
+                t3,
+                t4
+            ]
+        });
+        $[22] = t1;
+        $[23] = t3;
+        $[24] = t4;
+        $[25] = testId;
+        $[26] = t5;
+    } else t5 = $[26];
+    return t5;
+};
+MessageAction.displayName = "MessageAction";
+export { MessageAction };

package/dist/components/MessageActions/MessageActions.d.ts

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface MessageActionsProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Force-show the row (e.g. the latest answer). By default the row is revealed on
+     * hover / focus-within of the nearest `group/message` parent, and always shown on
+     * `hover: none` devices. Hidden rows keep their 30px height and stay tabbable.
+     */
+    visible?: boolean;
+}
+export declare const MessageActions: FC<MessageActionsProps>;

package/dist/components/MessageActions/MessageActions.js

@@ -0,0 +1,74 @@
+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 { messageActionsVariants } from "./classes.js";
+const MessageActions = (t0)=>{
+    const $ = c(19);
+    let children;
+    let className;
+    let props;
+    let ref;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, visible: 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 visible = void 0 === t1 ? false : t1;
+    const testId = useTestId("actions", testIdProp);
+    let t2;
+    if ($[7] !== className || $[8] !== visible) {
+        t2 = cn(messageActionsVariants({
+            visible
+        }), className);
+        $[7] = className;
+        $[8] = visible;
+        $[9] = t2;
+    } else t2 = $[9];
+    let t3;
+    if ($[10] !== children || $[11] !== testId) {
+        t3 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: children
+        });
+        $[10] = children;
+        $[11] = testId;
+        $[12] = t3;
+    } else t3 = $[12];
+    let t4;
+    if ($[13] !== props || $[14] !== ref || $[15] !== t2 || $[16] !== t3 || $[17] !== testId) {
+        t4 = /*#__PURE__*/ jsx("div", {
+            role: "group",
+            "aria-label": "Message actions",
+            ...props,
+            ref: ref,
+            "data-slot": "message-actions",
+            "data-testid": testId,
+            className: t2,
+            children: t3
+        });
+        $[13] = props;
+        $[14] = ref;
+        $[15] = t2;
+        $[16] = t3;
+        $[17] = testId;
+        $[18] = t4;
+    } else t4 = $[18];
+    return t4;
+};
+MessageActions.displayName = "MessageActions";
+export { MessageActions };

package/dist/components/MessageActions/MessageTimestamp.d.ts

@@ -0,0 +1,7 @@
+import type { FC, Ref, TimeHTMLAttributes } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface MessageTimestampProps extends TimeHTMLAttributes<HTMLTimeElement>, TestableProps {
+    /** Children are the pre-formatted text; set `dateTime` to the ISO value. */
+    ref?: Ref<HTMLTimeElement>;
+}
+export declare const MessageTimestamp: FC<MessageTimestampProps>;

package/dist/components/MessageActions/MessageTimestamp.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 { messageTimestampVariants } from "./classes.js";
+const MessageTimestamp = (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("timestamp", testIdProp);
+    let t1;
+    if ($[5] !== className) {
+        t1 = cn(messageTimestampVariants(), className);
+        $[5] = className;
+        $[6] = t1;
+    } else t1 = $[6];
+    let t2;
+    if ($[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== testId) {
+        t2 = /*#__PURE__*/ jsx("time", {
+            ...props,
+            ref: ref,
+            "data-slot": "message-timestamp",
+            "data-testid": testId,
+            className: t1
+        });
+        $[7] = props;
+        $[8] = ref;
+        $[9] = t1;
+        $[10] = testId;
+        $[11] = t2;
+    } else t2 = $[11];
+    return t2;
+};
+MessageTimestamp.displayName = "MessageTimestamp";
+export { MessageTimestamp };

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

@@ -0,0 +1,5 @@
+export declare const messageActionsVariants: (props?: ({
+    visible?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const messageActionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const messageTimestampVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;