@pathscale/ui 1.3.1 → 1.5.0

package/dist/components/live-chat/LiveChatBubble.js

@@ -1,131 +0,0 @@
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import "./LiveChat.css";
-import { Show, createSignal, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import LiveChatPanel from "./LiveChatPanel.js";
-import { CLASSES } from "./LiveChat.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<button><span>"), _tmpl$3 = /*#__PURE__*/ template('<svg xmlns=http://www.w3.org/2000/svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">'), _tmpl$4 = /*#__PURE__*/ template('<svg xmlns=http://www.w3.org/2000/svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">');
-const LiveChatBubble = (props)=>{
-    const [local, others] = splitProps(props, [
-        "position",
-        "aria-label",
-        "unreadCount",
-        "autoScrollOnNewMessage",
-        "autoScrollBehavior",
-        "stickToBottomThreshold",
-        "panelProps",
-        "onOpen",
-        "onClose",
-        "children",
-        "class",
-        "className",
-        "style"
-    ]);
-    const [isOpen, setIsOpen] = createSignal(false);
-    const [internalUnread, setInternalUnread] = createSignal(local.unreadCount ?? 0);
-    const unreadCount = ()=>local.unreadCount ?? internalUnread();
-    const toggleChat = ()=>{
-        const newState = !isOpen();
-        setIsOpen(newState);
-        if (newState) {
-            setInternalUnread(0);
-            local.onOpen?.();
-        } else local.onClose?.();
-    };
-    const handleClose = ()=>{
-        setIsOpen(false);
-        local.onClose?.();
-    };
-    const positionClasses = ()=>{
-        const pos = local.position ?? "bottom-right";
-        return "bottom-left" === pos ? CLASSES.bubble.position.left : CLASSES.bubble.position.right;
-    };
-    const buttonClasses = ()=>twMerge(CLASSES.bubble.base, positionClasses(), local.class, local.className);
-    return [
-        (()=>{
-            var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
-            spread(_el$, mergeProps(others, {
-                onClick: toggleChat
-            }, ()=>({
-                    class: buttonClasses()
-                }), {
-                get style () {
-                    return local.style;
-                },
-                get ["aria-label"] () {
-                    return local["aria-label"] ?? "Open chat";
-                }
-            }), false, true);
-            insert(_el$, ()=>local.children ?? createComponent(Show, {
-                    get when () {
-                        return !isOpen();
-                    },
-                    get fallback () {
-                        return (()=>{
-                            var _el$5 = _tmpl$4();
-                            spread(_el$5, mergeProps(()=>({
-                                    class: CLASSES.bubble.icon
-                                }), {
-                                fill: "none",
-                                viewBox: "0 0 24 24",
-                                stroke: "currentColor"
-                            }), true, true);
-                            return _el$5;
-                        })();
-                    },
-                    get children () {
-                        var _el$4 = _tmpl$3();
-                        spread(_el$4, mergeProps(()=>({
-                                class: CLASSES.bubble.icon
-                            }), {
-                            fill: "none",
-                            viewBox: "0 0 24 24",
-                            stroke: "currentColor"
-                        }), true, true);
-                        return _el$4;
-                    }
-                }), _el$3);
-            insert(_el$, createComponent(Show, {
-                get when () {
-                    return memo(()=>unreadCount() > 0)() && !isOpen();
-                },
-                get children () {
-                    var _el$2 = _tmpl$();
-                    spread(_el$2, mergeProps(()=>({
-                            class: CLASSES.bubble.badge
-                        })), false, true);
-                    insert(_el$2, (()=>{
-                        var _c$ = memo(()=>unreadCount() > 9);
-                        return ()=>_c$() ? "9+" : unreadCount();
-                    })());
-                    return _el$2;
-                }
-            }), _el$3);
-            spread(_el$3, mergeProps(()=>({
-                    class: CLASSES.bubble.ping
-                })), false, false);
-            return _el$;
-        })(),
-        createComponent(Show, {
-            get when () {
-                return isOpen();
-            },
-            get children () {
-                return createComponent(LiveChatPanel, mergeProps(()=>local.panelProps ?? {}, {
-                    get autoScrollOnNewMessage () {
-                        return local.panelProps?.autoScrollOnNewMessage ?? local.autoScrollOnNewMessage;
-                    },
-                    get autoScrollBehavior () {
-                        return local.panelProps?.autoScrollBehavior ?? local.autoScrollBehavior;
-                    },
-                    get stickToBottomThreshold () {
-                        return local.panelProps?.stickToBottomThreshold ?? local.stickToBottomThreshold;
-                    },
-                    onClose: handleClose
-                }));
-            }
-        })
-    ];
-};
-const live_chat_LiveChatBubble = LiveChatBubble;
-export default live_chat_LiveChatBubble;

package/dist/components/live-chat/LiveChatPanel.d.ts

@@ -1,70 +0,0 @@
-import "./LiveChat.css";
-import { type Component } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-import type { ChatMessage, SendMessagePayload, SendMessageResponse } from "./types";
-export interface LiveChatPanelProps extends IComponentBaseProps {
-    /**
-     * Callback when the panel close button is clicked
-     */
-    onClose: () => void;
-    /**
-     * Title shown in the header
-     * @default "Chat with us"
-     */
-    title?: string;
-    /**
-     * Placeholder text for the input field
-     * @default "Message support..."
-     */
-    placeholder?: string;
-    /**
-     * Label for the close button (for accessibility)
-     * @default "Close chat"
-     */
-    closeLabel?: string;
-    /**
-     * Label for the send button
-     * @default "Send"
-     */
-    sendLabel?: string;
-    /**
-     * Empty state message when there are no messages
-     * @default "No messages yet. Start a conversation!"
-     */
-    emptyMessage?: string;
-    /**
-     * Enable mock mode with demo messages
-     * @default false
-     */
-    mockMode?: boolean;
-    /**
-     * Initial messages to display (only used if mockMode is false)
-     */
-    messages?: ChatMessage[];
-    /**
-     * Callback when a message is sent
-     * Should return the message ID and timestamp from the server
-     */
-    onSendMessage?: (payload: SendMessagePayload) => Promise<SendMessageResponse>;
-    /**
-     * Whether a message is currently being sent
-     */
-    isSending?: boolean;
-    /**
-     * Auto-scroll to the latest message when new messages are appended
-     * @default true
-     */
-    autoScrollOnNewMessage?: boolean;
-    /**
-     * Auto-scroll behavior when moving to the latest message
-     * @default "instant"
-     */
-    autoScrollBehavior?: "instant" | "smooth";
-    /**
-     * Reserved for backward compatibility.
-     * Auto-scroll now always follows new messages when enabled.
-     */
-    stickToBottomThreshold?: number;
-}
-declare const LiveChatPanel: Component<LiveChatPanelProps>;
-export default LiveChatPanel;

package/dist/components/live-chat/LiveChatPanel.js

@@ -1,354 +0,0 @@
-import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import "./LiveChat.css";
-import { For, Show, createEffect, createSignal, onCleanup, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import button_0 from "../button/index.js";
-import input from "../input/index.js";
-import { CLASSES } from "./LiveChat.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template('<div><div><div><svg xmlns=http://www.w3.org/2000/svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg><h3></h3></div><button><svg xmlns=http://www.w3.org/2000/svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div></div><div>'), _tmpl$3 = /*#__PURE__*/ template("<div><div></div><div><div><p></p></div><span>"), _tmpl$4 = /*#__PURE__*/ template("<span>");
-const getMockMessages = ()=>{
-    const salesMessages = [
-        {
-            messageId: "sales-1",
-            content: "Hi! I'm interested in your product. Can you tell me more?",
-            sender: "user",
-            timestamp: Date.now() - 3600000
-        },
-        {
-            messageId: "sales-2",
-            content: "Hello! Thanks for your interest. We offer flexible pricing plans starting at $49/month. Would you like to schedule a demo?",
-            sender: "agent",
-            timestamp: Date.now() - 3500000
-        },
-        {
-            messageId: "sales-3",
-            content: "That sounds great! What features are included in the basic plan?",
-            sender: "user",
-            timestamp: Date.now() - 3400000
-        }
-    ];
-    const supportMessages = [
-        {
-            messageId: "support-1",
-            content: "I'm having trouble connecting. It keeps showing 'Connection Failed'.",
-            sender: "user",
-            timestamp: Date.now() - 7200000
-        },
-        {
-            messageId: "support-2",
-            content: "I'm sorry to hear that. Let me help you troubleshoot. Can you tell me which browser you're using?",
-            sender: "agent",
-            timestamp: Date.now() - 7100000
-        },
-        {
-            messageId: "support-3",
-            content: "I'm using Chrome version 121 on Windows 11",
-            sender: "user",
-            timestamp: Date.now() - 7000000
-        },
-        {
-            messageId: "support-4",
-            content: "Thanks for that info. Let's try clearing your browser cache first. Can you go to Settings > Privacy and security > Clear browsing data?",
-            sender: "agent",
-            timestamp: Date.now() - 6900000
-        }
-    ];
-    return [
-        ...salesMessages,
-        ...supportMessages
-    ].sort((a, b)=>a.timestamp - b.timestamp);
-};
-const formatTime = (timestamp)=>new Intl.DateTimeFormat("en-US", {
-        hour: "numeric",
-        minute: "2-digit",
-        hour12: true
-    }).format(new Date(timestamp));
-const LiveChatPanel = (props)=>{
-    const [local, others] = splitProps(props, [
-        "onClose",
-        "title",
-        "placeholder",
-        "closeLabel",
-        "sendLabel",
-        "emptyMessage",
-        "mockMode",
-        "messages",
-        "onSendMessage",
-        "isSending",
-        "autoScrollOnNewMessage",
-        "autoScrollBehavior",
-        "stickToBottomThreshold",
-        "class",
-        "className",
-        "style"
-    ]);
-    const [internalMessages, setInternalMessages] = createSignal([]);
-    const [inputValue, setInputValue] = createSignal("");
-    const [sending, setSending] = createSignal(false);
-    let scrollContainer;
-    let previousMessageCount = 0;
-    let previousLastMessageId;
-    let hasObservedMessages = false;
-    let scrollRafId;
-    let scrollRafNestedId;
-    createEffect(()=>{
-        if (local.mockMode) setInternalMessages(getMockMessages());
-        else if (local.messages) setInternalMessages(local.messages);
-    });
-    createEffect(()=>{
-        if (!local.mockMode && local.messages) setInternalMessages(local.messages);
-    });
-    const isSending = ()=>local.isSending ?? sending();
-    const autoScrollOnNewMessage = ()=>local.autoScrollOnNewMessage ?? true;
-    const autoScrollBehavior = ()=>local.autoScrollBehavior ?? "instant";
-    const scrollToBottom = ()=>{
-        if (!scrollContainer) return;
-        if ("smooth" === autoScrollBehavior()) return void scrollContainer.scrollTo({
-            top: scrollContainer.scrollHeight,
-            behavior: "smooth"
-        });
-        scrollContainer.scrollTop = scrollContainer.scrollHeight;
-    };
-    const clearScheduledScroll = ()=>{
-        if ("u" < typeof window) return;
-        if (null != scrollRafId) {
-            window.cancelAnimationFrame(scrollRafId);
-            scrollRafId = void 0;
-        }
-        if (null != scrollRafNestedId) {
-            window.cancelAnimationFrame(scrollRafNestedId);
-            scrollRafNestedId = void 0;
-        }
-    };
-    const scheduleScrollToBottom = ()=>{
-        if ("u" < typeof window) return void scrollToBottom();
-        clearScheduledScroll();
-        scrollRafId = window.requestAnimationFrame(()=>{
-            scrollRafNestedId = window.requestAnimationFrame(()=>{
-                scrollToBottom();
-            });
-        });
-    };
-    createEffect(()=>{
-        const messages = internalMessages();
-        const nextMessageCount = messages.length;
-        const nextLastMessageId = messages[messages.length - 1]?.messageId;
-        const isInitialHydration = !hasObservedMessages && nextMessageCount > 0;
-        const hasAppendedMessage = hasObservedMessages ? nextMessageCount > previousMessageCount || nextMessageCount > 0 && nextLastMessageId !== previousLastMessageId : false;
-        previousMessageCount = nextMessageCount;
-        previousLastMessageId = nextLastMessageId;
-        hasObservedMessages = true;
-        if (!autoScrollOnNewMessage()) return;
-        if (!isInitialHydration && !hasAppendedMessage) return;
-        scheduleScrollToBottom();
-    });
-    onCleanup(()=>{
-        clearScheduledScroll();
-    });
-    const handleSend = async ()=>{
-        const content = inputValue().trim();
-        if (!content || isSending()) return;
-        if (local.mockMode) {
-            const userMessage = {
-                messageId: `user-${Date.now()}`,
-                content,
-                sender: "user",
-                timestamp: Date.now()
-            };
-            setInternalMessages((prev)=>[
-                    ...prev,
-                    userMessage
-                ]);
-            setInputValue("");
-            setTimeout(()=>{
-                const agentMessage = {
-                    messageId: `agent-${Date.now()}`,
-                    content: "Thanks for your message! This is a demo response.",
-                    sender: "agent",
-                    timestamp: Date.now()
-                };
-                setInternalMessages((prev)=>[
-                        ...prev,
-                        agentMessage
-                    ]);
-            }, 1000);
-        } else if (local.onSendMessage) {
-            setSending(true);
-            try {
-                const response = await local.onSendMessage({
-                    message: content
-                });
-                const userMessage = {
-                    messageId: response.messageId,
-                    content,
-                    sender: "user",
-                    timestamp: response.timestamp
-                };
-                setInternalMessages((prev)=>[
-                        ...prev,
-                        userMessage
-                    ]);
-                setInputValue("");
-            } catch (error) {
-                console.error("[LiveChatPanel] Failed to send message:", error);
-            } finally{
-                setSending(false);
-            }
-        }
-    };
-    const handleKeyPress = (e)=>{
-        if ("Enter" === e.key && !e.shiftKey) {
-            e.preventDefault();
-            handleSend();
-        }
-    };
-    const classes = ()=>twMerge(CLASSES.panel.base, local.class, local.className);
-    return (()=>{
-        var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$2.nextSibling, _el$0 = _el$8.nextSibling;
-        spread(_el$, mergeProps(others, ()=>({
-                class: classes()
-            }), {
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        spread(_el$2, mergeProps(()=>({
-                class: CLASSES.panel.header
-            })), false, true);
-        spread(_el$3, mergeProps(()=>({
-                class: CLASSES.panel.headerTitleWrap
-            })), false, true);
-        spread(_el$4, mergeProps(()=>({
-                class: CLASSES.panel.headerIcon
-            }), {
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor"
-        }), true, true);
-        spread(_el$5, mergeProps(()=>({
-                class: CLASSES.panel.headerTitle
-            })), false, true);
-        insert(_el$5, ()=>local.title ?? "Chat with us");
-        spread(_el$6, mergeProps({
-            get onClick () {
-                return local.onClose;
-            }
-        }, ()=>({
-                class: CLASSES.panel.closeButton
-            }), {
-            get ["aria-label"] () {
-                return local.closeLabel ?? "Close chat";
-            }
-        }), false, true);
-        spread(_el$7, mergeProps(()=>({
-                class: CLASSES.panel.closeIcon
-            }), {
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor"
-        }), true, true);
-        use((element)=>{
-            scrollContainer = element;
-        }, _el$8);
-        spread(_el$8, mergeProps(()=>({
-                class: CLASSES.panel.messages
-            })), false, true);
-        insert(_el$8, createComponent(For, {
-            get each () {
-                return internalMessages();
-            },
-            children: (message)=>{
-                const isUser = "user" === message.sender;
-                return (()=>{
-                    var _el$1 = _tmpl$3(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling;
-                    spread(_el$1, mergeProps(()=>({
-                            class: twMerge(CLASSES.panel.row, isUser ? CLASSES.panel.rowUser : CLASSES.panel.rowAgent)
-                        })), false, true);
-                    spread(_el$10, mergeProps(()=>({
-                            class: twMerge(CLASSES.panel.avatar, isUser ? CLASSES.panel.avatarUser : CLASSES.panel.avatarAgent)
-                        })), false, true);
-                    insert(_el$10, isUser ? "U" : "A");
-                    spread(_el$11, mergeProps(()=>({
-                            class: twMerge(CLASSES.panel.messageColumn, isUser ? CLASSES.panel.messageColumnUser : CLASSES.panel.messageColumnAgent)
-                        })), false, true);
-                    spread(_el$12, mergeProps(()=>({
-                            class: twMerge(CLASSES.panel.messageBubble, isUser ? CLASSES.panel.messageBubbleUser : CLASSES.panel.messageBubbleAgent)
-                        })), false, true);
-                    spread(_el$13, mergeProps(()=>({
-                            class: CLASSES.panel.messageText
-                        })), false, true);
-                    insert(_el$13, ()=>message.content);
-                    spread(_el$14, mergeProps(()=>({
-                            class: CLASSES.panel.timestamp
-                        })), false, true);
-                    insert(_el$14, ()=>formatTime(message.timestamp));
-                    return _el$1;
-                })();
-            }
-        }), null);
-        insert(_el$8, createComponent(Show, {
-            get when () {
-                return 0 === internalMessages().length;
-            },
-            get children () {
-                var _el$9 = _tmpl$();
-                spread(_el$9, mergeProps(()=>({
-                        class: CLASSES.panel.empty
-                    })), false, true);
-                insert(_el$9, ()=>local.emptyMessage ?? "No messages yet. Start a conversation!");
-                return _el$9;
-            }
-        }), null);
-        spread(_el$0, mergeProps(()=>({
-                class: CLASSES.panel.inputArea
-            })), false, true);
-        insert(_el$0, createComponent(input, mergeProps({
-            type: "text",
-            get value () {
-                return inputValue();
-            },
-            onInput: (e)=>setInputValue(e.currentTarget.value),
-            onKeyPress: handleKeyPress,
-            get placeholder () {
-                return local.placeholder ?? "Message support...";
-            },
-            get disabled () {
-                return isSending();
-            }
-        }, ()=>({
-                class: CLASSES.panel.input
-            }))), null);
-        insert(_el$0, createComponent(button_0, mergeProps({
-            onClick: handleSend,
-            get isDisabled () {
-                return !inputValue().trim() || isSending();
-            }
-        }, ()=>({
-                class: CLASSES.panel.sendButton
-            }), {
-            variant: "primary",
-            get children () {
-                return createComponent(Show, {
-                    get when () {
-                        return !isSending();
-                    },
-                    get fallback () {
-                        return (()=>{
-                            var _el$15 = _tmpl$4();
-                            spread(_el$15, mergeProps(()=>({
-                                    class: CLASSES.panel.spinner
-                                })), false, false);
-                            return _el$15;
-                        })();
-                    },
-                    get children () {
-                        return local.sendLabel ?? "Send";
-                    }
-                });
-            }
-        })), null);
-        return _el$;
-    })();
-};
-const live_chat_LiveChatPanel = LiveChatPanel;
-export default live_chat_LiveChatPanel;

package/dist/components/menu/Menu.classes.d.ts

@@ -1,20 +0,0 @@
-export declare const CLASSES: {
-    readonly Root: {
-        readonly base: "menu";
-    };
-    readonly Item: {
-        readonly base: "menu-item";
-        readonly variant: {
-            readonly default: "menu-item--default";
-            readonly danger: "menu-item--danger";
-        };
-    };
-    readonly ItemIndicator: {
-        readonly base: "menu-item__indicator";
-        readonly submenu: "menu-item__indicator--submenu";
-    };
-    readonly Section: {
-        readonly base: "menu-section";
-        readonly title: "menu-section__title";
-    };
-};

package/dist/components/menu/Menu.classes.js

@@ -1,21 +0,0 @@
-const CLASSES = {
-    Root: {
-        base: "menu"
-    },
-    Item: {
-        base: "menu-item",
-        variant: {
-            default: "menu-item--default",
-            danger: "menu-item--danger"
-        }
-    },
-    ItemIndicator: {
-        base: "menu-item__indicator",
-        submenu: "menu-item__indicator--submenu"
-    },
-    Section: {
-        base: "menu-section",
-        title: "menu-section__title"
-    }
-};
-export { CLASSES };

package/dist/components/menu/Menu.d.ts

@@ -1,34 +0,0 @@
-import "./Menu.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-import { type MenuSelectionMode } from "./context";
-import MenuItem, { MenuItemIndicator, MenuItemRoot } from "./MenuItem";
-import MenuSection, { MenuSectionRoot } from "./MenuSection";
-export type MenuRootProps<T = unknown> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
-    children?: JSX.Element | ((item: T) => JSX.Element);
-    items?: readonly T[];
-    renderEmptyState?: () => JSX.Element;
-    selectionMode?: MenuSelectionMode;
-    selectedKeys?: Iterable<string | number>;
-    defaultSelectedKeys?: Iterable<string | number>;
-    disabledKeys?: Iterable<string | number>;
-    disallowEmptySelection?: boolean;
-    onSelectionChange?: (keys: Set<string>) => void;
-    onAction?: (key: string) => void;
-    isDisabled?: boolean;
-    disabled?: boolean;
-};
-declare const MenuRoot: Component<MenuRootProps>;
-declare const Menu: Component<MenuRootProps<unknown>> & {
-    Root: Component<MenuRootProps<unknown>>;
-    Item: import("solid-js").ParentComponent<import("./MenuItem").MenuItemRootProps> & {
-        Root: import("solid-js").ParentComponent<import("./MenuItem").MenuItemRootProps>;
-        Indicator: Component<import("./MenuItem").MenuItemIndicatorProps>;
-        SubmenuIndicator: Component<import("./MenuItem").MenuItemSubmenuIndicatorProps>;
-    };
-    ItemIndicator: Component<import("./MenuItem").MenuItemIndicatorProps>;
-    Section: Component<import("./MenuSection").MenuSectionRootProps>;
-};
-export default Menu;
-export { Menu, MenuRoot, MenuItem, MenuItemRoot, MenuItemIndicator, MenuSection, MenuSectionRoot };
-export type { MenuRootProps as MenuProps, MenuSelectionMode };