@pathscale/ui 0.1.0 → 1.2.0

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

@@ -0,0 +1,359 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__ from "../flex/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__ from "../input/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5"fill=none viewBox="0 0 24 24"stroke=currentColor><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$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<h3 class="font-semibold text-lg">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="flex-shrink-0 bg-primary text-primary-content px-4 py-4 flex items-center justify-between"><button class="hover:bg-primary/90 rounded-lg p-1 transition-colors"><svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div class="flex-1 overflow-y-auto px-4 py-4 space-y-4"></div><div class="flex-shrink-0 border-t border-base-300 bg-base-100 p-3">'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><p class="text-sm leading-relaxed whitespace-pre-wrap break-words">'), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-xs text-base-content/50 mt-1 px-1">'), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="w-4 h-4 border-2 border-primary-content/30 border-t-primary-content rounded-full animate-spin inline-block">');
+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_LiveChatPanel = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "onClose",
+        "title",
+        "placeholder",
+        "closeLabel",
+        "sendLabel",
+        "emptyMessage",
+        "mockMode",
+        "messages",
+        "onSendMessage",
+        "isSending",
+        "autoScrollOnNewMessage",
+        "autoScrollBehavior",
+        "stickToBottomThreshold",
+        "class",
+        "className",
+        "style"
+    ]);
+    const [internalMessages, setInternalMessages] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)([]);
+    const [inputValue, setInputValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)("");
+    const [sending, setSending] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let scrollContainer;
+    let previousMessageCount = 0;
+    let previousLastMessageId;
+    let hasObservedMessages = false;
+    let scrollRafId;
+    let scrollRafNestedId;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (local.mockMode) setInternalMessages(getMockMessages());
+        else if (local.messages) setInternalMessages(local.messages);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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 ("undefined" == typeof window) return;
+        if (null != scrollRafId) {
+            window.cancelAnimationFrame(scrollRafId);
+            scrollRafId = void 0;
+        }
+        if (null != scrollRafNestedId) {
+            window.cancelAnimationFrame(scrollRafNestedId);
+            scrollRafNestedId = void 0;
+        }
+    };
+    const scheduleScrollToBottom = ()=>{
+        if ("undefined" == typeof window) return void scrollToBottom();
+        clearScheduledScroll();
+        scrollRafId = window.requestAnimationFrame(()=>{
+            scrollRafNestedId = window.requestAnimationFrame(()=>{
+                scrollToBottom();
+            });
+        });
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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 = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(`fixed inset-0
+      sm:inset-auto
+      sm:bottom-20 sm:right-4
+      md:bottom-24 md:right-6
+      z-51
+      w-full h-full
+      sm:w-96 md:w-[400px]
+      sm:h-[70vh]
+      md:h-[75vh]
+      lg:h-[80vh]
+      sm:max-h-[800px]
+      sm:min-h-[420px]
+      bg-base-100
+      sm:rounded-2xl
+      shadow-2xl
+      flex flex-col
+      overflow-hidden`, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$5 = _el$2.firstChild, _el$6 = _el$2.nextSibling, _el$7 = _el$6.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+            align: "center",
+            gap: "sm",
+            get children () {
+                return [
+                    _tmpl$(),
+                    (()=>{
+                        var _el$4 = _tmpl$2();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.title ?? "Chat with us");
+                        return _el$4;
+                    })()
+                ];
+            }
+        }), _el$5);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.addEventListener)(_el$5, "click", local.onClose, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((element)=>{
+            scrollContainer = element;
+        }, _el$6);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+            get each () {
+                return internalMessages();
+            },
+            children: (message)=>{
+                const isUser = "user" === message.sender;
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+                    direction: isUser ? "row-reverse" : "row",
+                    gap: "sm",
+                    class: "w-full",
+                    get children () {
+                        return [
+                            (()=>{
+                                var _el$8 = _tmpl$4();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$8, `flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold ${isUser ? "bg-primary text-primary-content" : "bg-base-300 text-base-content"}`);
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, isUser ? "U" : "A");
+                                return _el$8;
+                            })(),
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+                                direction: "col",
+                                align: isUser ? "end" : "start",
+                                class: "max-w-[75%]",
+                                get children () {
+                                    return [
+                                        (()=>{
+                                            var _el$9 = _tmpl$5(), _el$0 = _el$9.firstChild;
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$9, `px-3 py-2 rounded-2xl ${isUser ? "bg-primary text-primary-content rounded-tr-sm" : "bg-base-200 text-base-content rounded-tl-sm"}`);
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>message.content);
+                                            return _el$9;
+                                        })(),
+                                        (()=>{
+                                            var _el$1 = _tmpl$6();
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>formatTime(message.timestamp));
+                                            return _el$1;
+                                        })()
+                                    ];
+                                }
+                            })
+                        ];
+                    }
+                });
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return 0 === internalMessages().length;
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+                    justify: "center",
+                    align: "center",
+                    class: "h-full text-base-content/50 text-sm",
+                    get children () {
+                        return local.emptyMessage ?? "No messages yet. Start a conversation!";
+                    }
+                });
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+            gap: "sm",
+            get children () {
+                return [
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__["default"], {
+                        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: "flex-1"
+                    }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
+                        onClick: handleSend,
+                        get isDisabled () {
+                            return !inputValue().trim() || isSending();
+                        },
+                        class: "px-4 py-2",
+                        variant: "primary",
+                        get children () {
+                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                get when () {
+                                    return !isSending();
+                                },
+                                get fallback () {
+                                    return _tmpl$7();
+                                },
+                                get children () {
+                                    return local.sendLabel ?? "Send";
+                                }
+                            });
+                        }
+                    })
+                ];
+            }
+        }));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "aria-label", local.closeLabel ?? "Close chat"));
+        return _el$;
+    })();
+};
+const LiveChatPanel = LiveChatPanel_LiveChatPanel;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { LiveChatPanel as default };

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

@@ -0,0 +1,5 @@
+export { default as LiveChatBubble } from "./LiveChatBubble";
+export type { LiveChatBubbleProps } from "./LiveChatBubble";
+export { default as LiveChatPanel } from "./LiveChatPanel";
+export type { LiveChatPanelProps } from "./LiveChatPanel";
+export type { ChatMessage, SendMessagePayload, SendMessageResponse } from "./types";

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

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__LiveChatBubble_js_61e05a4d__ from "./LiveChatBubble.js";
+import * as __WEBPACK_EXTERNAL_MODULE__LiveChatPanel_js_aa84e738__ from "./LiveChatPanel.js";
+var __webpack_exports__LiveChatBubble = __WEBPACK_EXTERNAL_MODULE__LiveChatBubble_js_61e05a4d__["default"];
+var __webpack_exports__LiveChatPanel = __WEBPACK_EXTERNAL_MODULE__LiveChatPanel_js_aa84e738__["default"];
+export { __webpack_exports__LiveChatBubble as LiveChatBubble, __webpack_exports__LiveChatPanel as LiveChatPanel };

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

@@ -0,0 +1,13 @@
+export interface ChatMessage {
+    messageId: string;
+    content: string;
+    sender: "user" | "agent";
+    timestamp: number;
+}
+export interface SendMessagePayload {
+    message: string;
+}
+export interface SendMessageResponse {
+    messageId: string;
+    timestamp: number;
+}

package/dist/components/loading/Loading.css

@@ -0,0 +1,131 @@
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Base
+   * -----------------------------------------------------------------------------------------------*/
+  .spinner {
+    pointer-events: none;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .spinner [data-slot="spinner-icon"] {
+    width: 100%;
+    height: 100%;
+    animation: spinner-rotate 0.8s linear infinite;
+  }
+
+  @keyframes spinner-rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Size variants
+   * -----------------------------------------------------------------------------------------------*/
+  .spinner--xs {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .spinner--sm {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  /* md is default */
+
+  .spinner--lg {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .spinner--xl {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Color variants
+   * -----------------------------------------------------------------------------------------------*/
+  .spinner--current {
+    color: currentColor;
+  }
+
+  .spinner--accent {
+    color: var(--color-accent);
+  }
+
+  .spinner--success {
+    color: var(--color-success);
+  }
+
+  .spinner--warning {
+    color: var(--color-warning);
+  }
+
+  .spinner--danger {
+    color: var(--color-error);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * CSS mask-image variants (legacy, non-spinner)
+   * These use background-color + mask-image for animated SVG patterns
+   * -----------------------------------------------------------------------------------------------*/
+  .spinner--dots,
+  .spinner--ring,
+  .spinner--ball,
+  .spinner--bars,
+  .spinner--infinity {
+    background-color: currentColor;
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+
+  .spinner--dots [data-slot="spinner-icon"],
+  .spinner--ring [data-slot="spinner-icon"],
+  .spinner--ball [data-slot="spinner-icon"],
+  .spinner--bars [data-slot="spinner-icon"],
+  .spinner--infinity [data-slot="spinner-icon"] {
+    display: none;
+  }
+
+  .spinner--dots {
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E");
+  }
+
+  .spinner--ring {
+    mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  .spinner--ball {
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E");
+  }
+
+  .spinner--bars {
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E");
+  }
+
+  .spinner--infinity {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E");
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Reduced motion
+   * -----------------------------------------------------------------------------------------------*/
+  @media (prefers-reduced-motion: reduce) {
+    .spinner [data-slot="spinner-icon"],
+    .spinner--dots,
+    .spinner--ring,
+    .spinner--ball,
+    .spinner--bars,
+    .spinner--infinity {
+      animation: none;
+    }
+  }
+}

package/dist/components/loading/Loading.d.ts

@@ -0,0 +1,14 @@
+import "./Loading.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type SpinnerColor = "current" | "accent" | "success" | "warning" | "danger";
+export type SpinnerVariant = "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity";
+export type LoadingProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    size?: SpinnerSize;
+    color?: SpinnerColor;
+    variant?: SpinnerVariant;
+    label?: string;
+};
+declare const Loading: Component<LoadingProps>;
+export default Loading;

package/dist/components/loading/Loading.js

@@ -0,0 +1,81 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Loading.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=spinner-icon fill=none viewBox="0 0 24 24"><defs><linearGradient x1=50% x2=50% y1=5.271% y2=91.793%><stop offset=0% stop-color=currentColor></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient><linearGradient x1=50% x2=50% y1=15.24% y2=87.15%><stop offset=0% stop-color=currentColor stop-opacity=0></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient></defs><g fill=none><path d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"transform="translate(1.5 1.625)"></path><path d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"transform="translate(1.5 1.625)">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const SIZE_CLASS_MAP = {
+    xs: "spinner--xs",
+    sm: "spinner--sm",
+    md: "",
+    lg: "spinner--lg",
+    xl: "spinner--xl"
+};
+const COLOR_CLASS_MAP = {
+    current: "spinner--current",
+    accent: "spinner--accent",
+    success: "spinner--success",
+    warning: "spinner--warning",
+    danger: "spinner--danger"
+};
+const VARIANT_CLASS_MAP = {
+    spinner: "spinner--spinner",
+    dots: "spinner--dots",
+    ring: "spinner--ring",
+    ball: "spinner--ball",
+    bars: "spinner--bars",
+    infinity: "spinner--infinity"
+};
+const SpinnerSVG = ()=>{
+    const id = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "id", `spinner-grad1-${id}`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "id", `spinner-grad2-${id}`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "fill", `url(#spinner-grad1-${id})`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "fill", `url(#spinner-grad2-${id})`);
+        return _el$;
+    })();
+};
+const Loading_Loading = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "size",
+        "color",
+        "variant",
+        "label",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const size = ()=>local.size ?? "md";
+    const color = ()=>local.color ?? "current";
+    const variant = ()=>local.variant ?? "spinner";
+    return (()=>{
+        var _el$8 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "status",
+            get ["aria-label"] () {
+                return local.label ?? "Loading";
+            },
+            "aria-busy": "true",
+            "aria-live": "polite",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("spinner", SIZE_CLASS_MAP[size()], COLOR_CLASS_MAP[color()], VARIANT_CLASS_MAP[variant()], local.class, local.className);
+            },
+            "data-slot": "spinner",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"spinner" === variant());
+            return ()=>_c$() ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(SpinnerSVG, {}) : void 0;
+        })());
+        return _el$8;
+    })();
+};
+const Loading = Loading_Loading;
+export { Loading as default };

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

@@ -0,0 +1 @@
+export { default, type LoadingProps, type SpinnerSize, type SpinnerColor, type SpinnerVariant, } from "./Loading";

package/dist/components/loading/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Loading_js_dcaab1a1__ from "./Loading.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Loading_js_dcaab1a1__["default"];
+export { __webpack_exports__default as default };

package/dist/components/mask/Mask.d.ts

@@ -0,0 +1,15 @@
+import "./mask.css";
+import { type JSX, type Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type MaskProps = JSX.ImgHTMLAttributes<HTMLImageElement> & IComponentBaseProps & {
+    variant?: "squircle" | "heart" | "hexagon" | "hexagon-2" | "decagon" | "pentagon" | "diamond" | "square" | "circle" | "star" | "star-2" | "triangle" | "triangle-2" | "triangle-3" | "triangle-4" | "half-1" | "half-2";
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+export declare function maskClassName({ className, variant, }?: Pick<MaskProps, "className" | "variant">): string;
+type MaskComponent = Component<MaskProps> & {
+    className: typeof maskClassName;
+};
+declare const Mask: MaskComponent;
+export default Mask;