@wallarm-org/design-system 3.2.0 → 3.3.0

package/dist/components/MessageActions/classes.js

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority";
+const messageActionsVariants = cva('flex h-30 items-center gap-4', {
+    variants: {
+        visible: {
+            false: 'opacity-0 transition-opacity motion-reduce:transition-none focus-within:opacity-100 group-hover/message:opacity-100 group-focus-within/message:opacity-100 [@media(hover:none)]:opacity-100',
+            true: 'opacity-100'
+        }
+    },
+    defaultVariants: {
+        visible: false
+    }
+});
+const messageActionVariants = cva('text-icon-secondary aria-pressed:bg-states-primary-active');
+const messageTimestampVariants = cva("whitespace-nowrap font-mono text-xs leading-sm text-text-secondary [font-feature-settings:'liga'_0]");
+export { messageActionVariants, messageActionsVariants, messageTimestampVariants };

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

@@ -0,0 +1,3 @@
+export { MessageAction, type MessageActionProps } from './MessageAction.js';
+export { MessageActions, type MessageActionsProps } from './MessageActions.js';
+export { MessageTimestamp, type MessageTimestampProps } from './MessageTimestamp.js';

package/dist/components/MessageActions/index.js

@@ -0,0 +1,3 @@
+export { MessageAction } from "./MessageAction.js";
+export { MessageActions } from "./MessageActions.js";
+export { MessageTimestamp } from "./MessageTimestamp.js";

package/dist/components/Popover/PopoverContent.d.ts

@@ -1,7 +1,8 @@
-import { type FC, type HTMLAttributes, type ReactNode } from 'react';
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { type TestableProps } from '../../utils/testId.js';
 import type { PopoverSizeDimension } from './types.js';
 export interface PopoverContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style'>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
     children: ReactNode;
     minHeight?: PopoverSizeDimension;
     maxHeight?: PopoverSizeDimension;

package/dist/components/Popover/PopoverContent.js

@@ -7,35 +7,38 @@ import { useLayerZIndexRef } from "../../utils/syncLayerZIndex.js";
 import { useTestId } from "../../utils/testId.js";
 import { POPOVER_MAX_HEIGHT, POPOVER_MAX_WIDTH, POPOVER_MIN_WIDTH } from "./constants.js";
 const PopoverContent = (t0)=>{
-    const $ = c(26);
+    const $ = c(27);
     let children;
     let className;
     let minHeight;
+    let ref;
     let rest;
     let t1;
     let t2;
     let t3;
     let testIdProp;
     if ($[0] !== t0) {
-        ({ children, minHeight, maxHeight: t1, minWidth: t2, maxWidth: t3, className, "data-testid": testIdProp, ...rest } = t0);
+        ({ ref, children, minHeight, maxHeight: t1, minWidth: t2, maxWidth: t3, className, "data-testid": testIdProp, ...rest } = t0);
         $[0] = t0;
         $[1] = children;
         $[2] = className;
         $[3] = minHeight;
-        $[4] = rest;
-        $[5] = t1;
-        $[6] = t2;
-        $[7] = t3;
-        $[8] = testIdProp;
+        $[4] = ref;
+        $[5] = rest;
+        $[6] = t1;
+        $[7] = t2;
+        $[8] = t3;
+        $[9] = testIdProp;
     } else {
         children = $[1];
         className = $[2];
         minHeight = $[3];
-        rest = $[4];
-        t1 = $[5];
-        t2 = $[6];
-        t3 = $[7];
-        testIdProp = $[8];
+        ref = $[4];
+        rest = $[5];
+        t1 = $[6];
+        t2 = $[7];
+        t3 = $[8];
+        testIdProp = $[9];
     }
     const maxHeight = void 0 === t1 ? POPOVER_MAX_HEIGHT : t1;
     const minWidth = void 0 === t2 ? POPOVER_MIN_WIDTH : t2;
@@ -43,43 +46,43 @@ const PopoverContent = (t0)=>{
     const testId = useTestId("content", testIdProp);
     const { getContentProps } = usePopoverContext();
     let t4;
-    if ($[9] !== getContentProps) {
+    if ($[10] !== getContentProps) {
         t4 = getContentProps();
-        $[9] = getContentProps;
-        $[10] = t4;
-    } else t4 = $[10];
+        $[10] = getContentProps;
+        $[11] = t4;
+    } else t4 = $[11];
     const { id } = t4;
-    const contentRef = useLayerZIndexRef();
+    const contentRef = useLayerZIndexRef(ref);
     let t5;
-    if ($[11] !== maxHeight || $[12] !== maxWidth || $[13] !== minHeight || $[14] !== minWidth) {
+    if ($[12] !== maxHeight || $[13] !== maxWidth || $[14] !== minHeight || $[15] !== minWidth) {
         t5 = {
             "--popover-min-height": minHeight,
             "--popover-max-height": maxHeight,
             "--popover-min-width": minWidth,
             "--popover-max-width": maxWidth
         };
-        $[11] = maxHeight;
-        $[12] = maxWidth;
-        $[13] = minHeight;
-        $[14] = minWidth;
-        $[15] = t5;
-    } else t5 = $[15];
+        $[12] = maxHeight;
+        $[13] = maxWidth;
+        $[14] = minHeight;
+        $[15] = minWidth;
+        $[16] = t5;
+    } else t5 = $[16];
     const style = t5;
     let t6;
-    if ($[16] !== className) {
+    if ($[17] !== className) {
         t6 = cn("flex flex-col overflow-auto", "min-w-(--popover-min-width)", "max-w-[clamp(var(--popover-min-width),var(--available-width),var(--popover-max-width))]", "min-h-(--popover-min-height)", "max-h-[clamp(var(--popover-min-height,0px),var(--available-height),var(--popover-max-height))]", "p-12 bg-bg-surface-2 rounded-12 border border-border-primary-light shadow-md text-text-primary", "z-[calc(var(--drawer-positioner-z-index)+(var(--layer-index,0)*var(--drawer-level-ratio)))]", "overscroll-contain", "animate-in fade-in-0 zoom-in-95 origin-[--radix-tooltip-content-transform-origin]", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", className);
-        $[16] = className;
-        $[17] = t6;
-    } else t6 = $[17];
+        $[17] = className;
+        $[18] = t6;
+    } else t6 = $[18];
     let t7;
-    if ($[18] !== children || $[19] !== contentRef || $[20] !== id || $[21] !== rest || $[22] !== style || $[23] !== t6 || $[24] !== testId) {
+    if ($[19] !== children || $[20] !== contentRef || $[21] !== id || $[22] !== rest || $[23] !== style || $[24] !== t6 || $[25] !== testId) {
         t7 = /*#__PURE__*/ jsx(Portal, {
             children: /*#__PURE__*/ jsx(Popover.Positioner, {
                 children: /*#__PURE__*/ jsx(Popover.Content, {
+                    "data-slot": "popover-content",
                     ...rest,
                     ref: contentRef,
                     id: id,
-                    "data-slot": "popover-content",
                     "data-testid": testId,
                     style: style,
                     className: t6,
@@ -87,15 +90,15 @@ const PopoverContent = (t0)=>{
                 })
             })
         });
-        $[18] = children;
-        $[19] = contentRef;
-        $[20] = id;
-        $[21] = rest;
-        $[22] = style;
-        $[23] = t6;
-        $[24] = testId;
-        $[25] = t7;
-    } else t7 = $[25];
+        $[19] = children;
+        $[20] = contentRef;
+        $[21] = id;
+        $[22] = rest;
+        $[23] = style;
+        $[24] = t6;
+        $[25] = testId;
+        $[26] = t7;
+    } else t7 = $[26];
     return t7;
 };
 PopoverContent.displayName = "PopoverContent";

package/dist/components/UserMessage/UserMessage.d.ts

@@ -0,0 +1,10 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface UserMessageProps extends HTMLAttributes<HTMLElement>, TestableProps {
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * A message the user sent: an `<article>` named "You" that right-aligns its bubble and an
+ * optional `MessageActions` row. Inside a cascade its test id is `<base>--user-message`.
+ */
+export declare const UserMessage: FC<UserMessageProps>;

package/dist/components/UserMessage/UserMessage.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 { userMessageVariants } from "./classes.js";
+const UserMessage = (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("user-message", testIdProp);
+    let t1;
+    if ($[6] !== className) {
+        t1 = cn(userMessageVariants(), 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("article", {
+            "aria-label": "You",
+            ...props,
+            ref: ref,
+            "data-slot": "user-message",
+            "data-testid": testId,
+            className: t1,
+            children: t2
+        });
+        $[11] = props;
+        $[12] = ref;
+        $[13] = t1;
+        $[14] = t2;
+        $[15] = testId;
+        $[16] = t3;
+    } else t3 = $[16];
+    return t3;
+};
+UserMessage.displayName = "UserMessage";
+export { UserMessage };

package/dist/components/UserMessage/UserMessageBubble.d.ts

@@ -0,0 +1,16 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface UserMessageBubbleProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * The Show more / Show less toggle, rendered when the text overflows 11 lines.
+     * Defaults to `<UserMessageShowMore />`; pass your own instance to add `data-*`
+     * (the analytics seam) or custom labels; `null` or `false` renders no toggle.
+     */
+    showMore?: ReactNode;
+}
+/**
+ * The message bubble. Text keeps its whitespace and is clamped to 11 lines; when it
+ * overflows, a fade strip with the toggle appears at the bottom.
+ */
+export declare const UserMessageBubble: FC<UserMessageBubbleProps>;

package/dist/components/UserMessage/UserMessageBubble.js

@@ -0,0 +1,175 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { userMessageBubbleVariants, userMessageFadeVariants, userMessageTextVariants } from "./classes.js";
+import { UserMessageBubbleContext } from "./UserMessageContext.js";
+import { UserMessageShowMore } from "./UserMessageShowMore.js";
+const UserMessageBubble = (t0)=>{
+    const $ = c(43);
+    let children;
+    let className;
+    let props;
+    let ref;
+    let showMoreProp;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, children, showMore: showMoreProp, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = props;
+        $[4] = ref;
+        $[5] = showMoreProp;
+        $[6] = testIdProp;
+    } else {
+        children = $[1];
+        className = $[2];
+        props = $[3];
+        ref = $[4];
+        showMoreProp = $[5];
+        testIdProp = $[6];
+    }
+    let t1;
+    if ($[7] !== showMoreProp) {
+        t1 = void 0 === showMoreProp ? /*#__PURE__*/ jsx(UserMessageShowMore, {}) : showMoreProp;
+        $[7] = showMoreProp;
+        $[8] = t1;
+    } else t1 = $[8];
+    const showMore = t1;
+    const testId = useTestId("bubble", testIdProp);
+    const textTestId = useTestId("text");
+    const contentId = useId();
+    const textRef = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    const [overflowing, setOverflowing] = useState(false);
+    let t2;
+    if ($[9] !== expanded) {
+        t2 = ()=>{
+            const el = textRef.current;
+            if (!el || expanded) return;
+            const measure = ()=>setOverflowing(el.scrollHeight > el.clientHeight);
+            measure();
+            const observer = new ResizeObserver(measure);
+            observer.observe(el);
+            return ()=>observer.disconnect();
+        };
+        $[9] = expanded;
+        $[10] = t2;
+    } else t2 = $[10];
+    let t3;
+    if ($[11] !== children || $[12] !== expanded) {
+        t3 = [
+            expanded,
+            children
+        ];
+        $[11] = children;
+        $[12] = expanded;
+        $[13] = t3;
+    } else t3 = $[13];
+    useLayoutEffect(t2, t3);
+    let t4;
+    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = ()=>setExpanded(_temp);
+        $[14] = t4;
+    } else t4 = $[14];
+    const toggle = t4;
+    let t5;
+    if ($[15] !== className || $[16] !== overflowing || $[17] !== showMore) {
+        t5 = cn(userMessageBubbleVariants({
+            withToggle: overflowing && null != showMore && false !== showMore
+        }), className);
+        $[15] = className;
+        $[16] = overflowing;
+        $[17] = showMore;
+        $[18] = t5;
+    } else t5 = $[18];
+    let t6;
+    if ($[19] !== contentId || $[20] !== expanded) {
+        t6 = {
+            contentId,
+            expanded,
+            toggle
+        };
+        $[19] = contentId;
+        $[20] = expanded;
+        $[21] = t6;
+    } else t6 = $[21];
+    const t7 = !expanded;
+    let t8;
+    if ($[22] !== t7) {
+        t8 = userMessageTextVariants({
+            clamped: t7
+        });
+        $[22] = t7;
+        $[23] = t8;
+    } else t8 = $[23];
+    let t9;
+    if ($[24] !== children || $[25] !== contentId || $[26] !== t8 || $[27] !== textTestId) {
+        t9 = /*#__PURE__*/ jsx("div", {
+            ref: textRef,
+            id: contentId,
+            "data-slot": "user-message-text",
+            "data-testid": textTestId,
+            className: t8,
+            children: children
+        });
+        $[24] = children;
+        $[25] = contentId;
+        $[26] = t8;
+        $[27] = textTestId;
+        $[28] = t9;
+    } else t9 = $[28];
+    let t10;
+    if ($[29] !== expanded || $[30] !== overflowing || $[31] !== showMore) {
+        t10 = overflowing && /*#__PURE__*/ jsx("div", {
+            "data-slot": "user-message-fade",
+            className: userMessageFadeVariants({
+                expanded
+            }),
+            children: showMore
+        });
+        $[29] = expanded;
+        $[30] = overflowing;
+        $[31] = showMore;
+        $[32] = t10;
+    } else t10 = $[32];
+    let t11;
+    if ($[33] !== t10 || $[34] !== t6 || $[35] !== t9) {
+        t11 = /*#__PURE__*/ jsxs(UserMessageBubbleContext.Provider, {
+            value: t6,
+            children: [
+                t9,
+                t10
+            ]
+        });
+        $[33] = t10;
+        $[34] = t6;
+        $[35] = t9;
+        $[36] = t11;
+    } else t11 = $[36];
+    let t12;
+    if ($[37] !== props || $[38] !== ref || $[39] !== t11 || $[40] !== t5 || $[41] !== testId) {
+        t12 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "user-message-bubble",
+            "data-testid": testId,
+            className: t5,
+            children: t11
+        });
+        $[37] = props;
+        $[38] = ref;
+        $[39] = t11;
+        $[40] = t5;
+        $[41] = testId;
+        $[42] = t12;
+    } else t12 = $[42];
+    return t12;
+};
+UserMessageBubble.displayName = "UserMessageBubble";
+function _temp(value) {
+    return !value;
+}
+export { UserMessageBubble };

package/dist/components/UserMessage/UserMessageContext.d.ts

@@ -0,0 +1,9 @@
+interface UserMessageBubbleContextValue {
+    /** `id` of the text element, for the toggle's `aria-controls`. */
+    contentId: string;
+    expanded: boolean;
+    toggle: () => void;
+}
+export declare const UserMessageBubbleContext: import("react").Context<UserMessageBubbleContextValue | null>;
+export declare const useUserMessageBubbleContext: () => UserMessageBubbleContextValue | null;
+export {};

package/dist/components/UserMessage/UserMessageContext.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const UserMessageBubbleContext = createContext(null);
+const useUserMessageBubbleContext = ()=>useContext(UserMessageBubbleContext);
+export { UserMessageBubbleContext, useUserMessageBubbleContext };

package/dist/components/UserMessage/UserMessageShowMore.d.ts

@@ -0,0 +1,15 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface UserMessageShowMoreProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'>, TestableProps {
+    ref?: Ref<HTMLButtonElement>;
+    /** Label while the text is clamped. */
+    showMoreLabel?: ReactNode;
+    /** Label while the text is expanded. */
+    showLessLabel?: ReactNode;
+}
+/**
+ * Toggles the bubble's clamp. Rendered by `UserMessageBubble` by default; pass your own
+ * instance through its `showMore` prop. Renders nothing outside a bubble. The consumer
+ * `onClick` runs first; `event.preventDefault()` cancels the toggle.
+ */
+export declare const UserMessageShowMore: FC<UserMessageShowMoreProps>;

package/dist/components/UserMessage/UserMessageShowMore.js

@@ -0,0 +1,87 @@
+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 { userMessageShowMoreVariants } from "./classes.js";
+import { useUserMessageBubbleContext } from "./UserMessageContext.js";
+const UserMessageShowMore = (t0)=>{
+    const $ = c(22);
+    let className;
+    let onClick;
+    let props;
+    let ref;
+    let t1;
+    let t2;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, onClick, showMoreLabel: t1, showLessLabel: t2, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = onClick;
+        $[3] = props;
+        $[4] = ref;
+        $[5] = t1;
+        $[6] = t2;
+        $[7] = testIdProp;
+    } else {
+        className = $[1];
+        onClick = $[2];
+        props = $[3];
+        ref = $[4];
+        t1 = $[5];
+        t2 = $[6];
+        testIdProp = $[7];
+    }
+    const showMoreLabel = void 0 === t1 ? "Show more" : t1;
+    const showLessLabel = void 0 === t2 ? "Show less" : t2;
+    const testId = useTestId("show-more", testIdProp);
+    const context = useUserMessageBubbleContext();
+    if (!context) return null;
+    let t3;
+    if ($[8] !== context || $[9] !== onClick) {
+        t3 = (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) context.toggle();
+        };
+        $[8] = context;
+        $[9] = onClick;
+        $[10] = t3;
+    } else t3 = $[10];
+    const handleClick = t3;
+    const t4 = context.expanded;
+    const t5 = context.contentId;
+    let t6;
+    if ($[11] !== className) {
+        t6 = cn(userMessageShowMoreVariants(), className);
+        $[11] = className;
+        $[12] = t6;
+    } else t6 = $[12];
+    const t7 = context.expanded ? showLessLabel : showMoreLabel;
+    let t8;
+    if ($[13] !== context.contentId || $[14] !== context.expanded || $[15] !== handleClick || $[16] !== props || $[17] !== ref || $[18] !== t6 || $[19] !== t7 || $[20] !== testId) {
+        t8 = /*#__PURE__*/ jsx("button", {
+            ...props,
+            ref: ref,
+            "aria-expanded": t4,
+            "aria-controls": t5,
+            type: "button",
+            "data-slot": "user-message-show-more",
+            "data-testid": testId,
+            className: t6,
+            onClick: handleClick,
+            children: t7
+        });
+        $[13] = context.contentId;
+        $[14] = context.expanded;
+        $[15] = handleClick;
+        $[16] = props;
+        $[17] = ref;
+        $[18] = t6;
+        $[19] = t7;
+        $[20] = testId;
+        $[21] = t8;
+    } else t8 = $[21];
+    return t8;
+};
+UserMessageShowMore.displayName = "UserMessageShowMore";
+export { UserMessageShowMore };

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

@@ -0,0 +1,11 @@
+export declare const userMessageVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const userMessageBubbleVariants: (props?: ({
+    withToggle?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const userMessageTextVariants: (props?: ({
+    clamped?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const userMessageFadeVariants: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const userMessageShowMoreVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/UserMessage/classes.js

@@ -0,0 +1,32 @@
+import { cva } from "class-variance-authority";
+const userMessageVariants = cva('group/message flex flex-col items-end pr-16');
+const userMessageBubbleVariants = cva('relative max-w-375 rounded-16 bg-bg-light-brand px-16 text-sm text-text-primary', {
+    variants: {
+        withToggle: {
+            true: 'pt-12 pb-28',
+            false: 'py-12'
+        }
+    },
+    defaultVariants: {
+        withToggle: false
+    }
+});
+const userMessageTextVariants = cva('whitespace-pre-wrap break-words outline-none', {
+    variants: {
+        clamped: {
+            true: 'max-h-220 overflow-hidden'
+        }
+    }
+});
+const userMessageFadeVariants = cva('pointer-events-none absolute inset-x-0 bottom-0 h-36 rounded-b-16', {
+    variants: {
+        expanded: {
+            false: 'bg-linear-to-t from-bg-light-brand from-60% to-transparent'
+        }
+    },
+    defaultVariants: {
+        expanded: false
+    }
+});
+const userMessageShowMoreVariants = cva('pointer-events-auto absolute top-8 left-16 cursor-pointer rounded-4 text-xs text-text-secondary outline-none transition-colors hover:text-text-primary focus-visible:ring-3 focus-visible:ring-focus-primary');
+export { userMessageBubbleVariants, userMessageFadeVariants, userMessageShowMoreVariants, userMessageTextVariants, userMessageVariants };

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

@@ -0,0 +1,3 @@
+export { UserMessage, type UserMessageProps } from './UserMessage.js';
+export { UserMessageBubble, type UserMessageBubbleProps } from './UserMessageBubble.js';
+export { UserMessageShowMore, type UserMessageShowMoreProps } from './UserMessageShowMore.js';

package/dist/components/UserMessage/index.js

@@ -0,0 +1,3 @@
+export { UserMessage } from "./UserMessage.js";
+export { UserMessageBubble } from "./UserMessageBubble.js";
+export { UserMessageShowMore } from "./UserMessageShowMore.js";