@ryanhe919/lumen-ui 0.3.0 → 0.3.2

package/dist/index.js

@@ -1,33 +1,34 @@
 import { L } from "./LMBadge-BBDOGTps.js";
-import { L as L2 } from "./LMInput-D9csGyhj.js";
-import { L as L3 } from "./LMTextarea-5dVVPeL2.js";
-import { L as L4 } from "./LMNumberInput-BI5_OEx4.js";
-import { L as L5 } from "./LMSearchInput-CIvVkEf2.js";
-import { L as L6 } from "./LMSelect-B-MWX2JI.js";
-import { L as L7 } from "./LMCheckbox-DaaJRjKt.js";
-import { L as L8 } from "./LMRadio-UQLNgTMF.js";
-import { L as L9 } from "./LMSwitch-CP1_nrfU.js";
-import { L as L10 } from "./LMField-BS-DSEya.js";
-import { L as L11 } from "./LMDatePicker-DSv28BFH.js";
+import { L as L2 } from "./LMInput-Be2KkPOW.js";
+import { L as L3 } from "./LMTextarea-BNacTCNn.js";
+import { L as L4 } from "./LMNumberInput-gnRvWRly.js";
+import { L as L5 } from "./LMSearchInput-DQovqMTN.js";
+import { L as L6 } from "./LMSelect-BPfW-AHI.js";
+import { L as L7 } from "./LMCheckbox-DPg4CldM.js";
+import { L as L8 } from "./LMRadio-C0ZL0hVK.js";
+import { L as L9 } from "./LMSwitch-BqhucDO0.js";
+import { L as L10 } from "./LMField-DkRk9Q8-.js";
+import { L as L11 } from "./LMDatePicker-C7R0ByJ-.js";
 import { L as L12 } from "./LMUpload-BwXoxIfE.js";
-import { L as L13 } from "./LMStatCard-D5HV9r6d.js";
+import { L as L13 } from "./LMStatCard-CdyIDhrA.js";
 import { L as L14 } from "./LMTooltip-h47oYhl8.js";
-import { L as L15 } from "./LMCard-D7ABNC95.js";
-import { L as L16 } from "./LMTabs-D5n9lB8X.js";
-import { L as L17 } from "./LMEmpty-DzHM1fOb.js";
+import { L as L15 } from "./LMCard-uuWNjVQL.js";
+import { L as L16 } from "./LMTabs-Cjp3oiNv.js";
+import { L as L17 } from "./LMEmpty-C499qRrR.js";
 import { L as L18 } from "./LMMenu-yXadjQLQ.js";
 import { L as L19 } from "./LMDropdown-wiTMuyhU.js";
 import { L as L20 } from "./LMPagination-BypfLRlF.js";
 import { L as L21, a, u } from "./useMessage-CRsCgzDR.js";
 import { L as L22, u as u2 } from "./useConfirm-BIxTX3mT.js";
 import { L as L23 } from "./LMDrawer-DJ5ugeZR.js";
-import { L as L24 } from "./LMButton-S4xQSohi.js";
-import { L as L25 } from "./LMTable-Cp8HZqiV.js";
-import { L as L26 } from "./LMModal-DCJPlfA4.js";
+import { L as L24 } from "./LMButton-DH7s4i80.js";
+import { L as L25 } from "./LMTable-IGmHFhnV.js";
+import { L as L26 } from "./LMModal-CZF26Ask.js";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React, { memo, useRef, useState, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from "react";
 import { c as clampComponentSize, b as SIZE_TEXT_CLASSES, C as COMPONENT_SIZE_ORDER, e as SIZE_PADDING_CLASSES } from "./componentSizes-CdWNL526.js";
 import { k, l, f, i, S, a as a2, j, d, g, h } from "./componentSizes-CdWNL526.js";
+import { c as cn } from "./cn-wDEkOmcn.js";
 const chatInputThemeStyles = `
   :root, [data-theme="light"] {
     --lm-chat-input-bg: rgba(255, 255, 255, 0.85);
@@ -58,12 +59,12 @@ const ToolbarButton = ({
     type: "button",
     onClick,
     disabled,
-    className: `
-      flex items-center gap-1 px-2 py-1 rounded-md cursor-pointer
-      transition-all duration-150
-      disabled:opacity-40 disabled:cursor-not-allowed
-      hover:bg-(--lm-bg-hover) active:scale-95
-    `.trim().replace(/\s+/g, " "),
+    className: cn(
+      "flex items-center gap-1 px-2 py-1 rounded-md cursor-pointer",
+      "transition-all duration-150",
+      "disabled:opacity-40 disabled:cursor-not-allowed",
+      "hover:bg-(--lm-bg-hover) active:scale-95"
+    ),
     style: {
       backgroundColor: active ? "var(--lm-primary-50)" : "transparent",
       color: active ? "var(--lm-primary-600)" : "var(--lm-text-tertiary)"
@@ -258,11 +259,11 @@ const LMChatInput = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `
-          relative flex flex-col border rounded-2xl
-          ${config.padding}
-          ${className}
-        `.trim().replace(/\s+/g, " "),
+        className: cn(
+          "relative flex flex-col border rounded-2xl",
+          config.padding,
+          className
+        ),
         style: getContainerStyles(),
         children: [
           /* @__PURE__ */ jsxs("div", { className: `flex items-start ${config.gap}`, children: [
@@ -279,13 +280,13 @@ const LMChatInput = ({
                 disabled: isDisabled,
                 autoFocus,
                 rows: 1,
-                className: `
-              w-full resize-none bg-transparent leading-relaxed
-              outline-none focus:outline-none focus:ring-0 border-none
-              ${SIZE_TEXT_CLASSES[resolvedSize]}
-              placeholder:text-(--lm-text-tertiary)
-              disabled:text-(--lm-text-disabled) disabled:cursor-not-allowed
-            `.trim().replace(/\s+/g, " "),
+                className: cn(
+                  "w-full resize-none bg-transparent leading-relaxed",
+                  "outline-none focus:outline-none focus:ring-0 border-none",
+                  SIZE_TEXT_CLASSES[resolvedSize],
+                  "placeholder:text-(--lm-text-tertiary)",
+                  "disabled:text-(--lm-text-disabled) disabled:cursor-not-allowed"
+                ),
                 style: {
                   color: "var(--lm-text-primary)",
                   minHeight: config.minHeight,
@@ -319,14 +320,14 @@ const LMChatInput = ({
                   type: "button",
                   onClick: showStopButton ? handleStop : handleSend,
                   disabled: !showStopButton && !canSend,
-                  className: `
-                ${config.sendButtonSize}
-                flex items-center justify-center shrink-0
-                cursor-pointer select-none
-                focus:outline-none
-                disabled:cursor-not-allowed disabled:opacity-50
-                hover:scale-105 active:scale-95
-              `.trim().replace(/\s+/g, " "),
+                  className: cn(
+                    config.sendButtonSize,
+                    "flex items-center justify-center shrink-0",
+                    "cursor-pointer select-none",
+                    "focus:outline-none",
+                    "disabled:cursor-not-allowed disabled:opacity-50",
+                    "hover:scale-105 active:scale-95"
+                  ),
                   style: getSendButtonStyles(),
                   "aria-label": showStopButton ? "停止生成" : "发送消息",
                   children: sending ? /* @__PURE__ */ jsx(LoadingIcon, { className: config.sendIconSize }) : showStopButton ? /* @__PURE__ */ jsx(StopIcon, { className: config.sendIconSize }) : sendButtonText ? /* @__PURE__ */ jsx("span", { className: `${SIZE_TEXT_CLASSES[resolvedSize]} font-medium`, children: sendButtonText }) : /* @__PURE__ */ jsx(SendIcon, { className: config.sendIconSize })
@@ -371,11 +372,11 @@ const chatBubbleThemeStyles = `
 const BUBBLE_CONFIG = {
   user: {
     align: "right",
-    borderRadius: "20px 20px 4px 20px"
+    borderRadius: "20px 4px 20px 20px"
   },
   assistant: {
     align: "left",
-    borderRadius: "20px 20px 20px 4px"
+    borderRadius: "4px 20px 20px 20px"
   },
   system: {
     align: "left",
@@ -502,12 +503,12 @@ const LMChatBubble = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `
-          w-full
-          ${SIZE_PADDING_CLASSES[resolvedSize]}
-          ${SIZE_TEXT_CLASSES[resolvedSize]}
-          ${className}
-        `.trim().replace(/\s+/g, " "),
+        className: cn(
+          "w-full",
+          SIZE_PADDING_CLASSES[resolvedSize],
+          SIZE_TEXT_CLASSES[resolvedSize],
+          className
+        ),
         style: {
           ...getBubbleStyles(),
           ...style
@@ -654,11 +655,11 @@ const LMChatMessage = ({
   const finalActions = actions || defaultActions;
   const renderAvatar = () => {
     if (hideAvatar) return null;
-    const avatarClasses = `
-      ${AVATAR_SIZE$1[resolvedSize]}
-      rounded-full overflow-hidden shrink-0
-      flex items-center justify-center
-    `.trim().replace(/\s+/g, " ");
+    const avatarClasses = cn(
+      AVATAR_SIZE$1[resolvedSize],
+      "rounded-full overflow-hidden shrink-0",
+      "flex items-center justify-center"
+    );
     if (typeof avatar === "string") {
       return /* @__PURE__ */ jsx(
         "img",
@@ -684,25 +685,25 @@ const LMChatMessage = ({
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: `
-          flex items-center gap-1 mt-1
-          transition-opacity duration-150
-          ${isHovered ? "opacity-100" : "opacity-0"}
-        `.trim().replace(/\s+/g, " "),
+        className: cn(
+          "flex items-center gap-1 mt-1",
+          "transition-opacity duration-150",
+          isHovered ? "opacity-100" : "opacity-0"
+        ),
         children: finalActions.map((action) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: action.onClick,
             disabled: action.disabled,
-            className: `
-              ${ACTION_BUTTON_SIZE[resolvedSize]}
-              flex items-center justify-center
-              rounded-lg cursor-pointer
-              hover:bg-(--lm-bg-hover)
-              active:scale-95
-              disabled:opacity-50 disabled:cursor-not-allowed
-              transition-all duration-150
-            `.trim().replace(/\s+/g, " "),
+            className: cn(
+              ACTION_BUTTON_SIZE[resolvedSize],
+              "flex items-center justify-center",
+              "rounded-lg cursor-pointer",
+              "hover:bg-(--lm-bg-hover)",
+              "active:scale-95",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              "transition-all duration-150"
+            ),
             style: { color: "var(--lm-text-tertiary)" },
             title: action.tooltip,
             "aria-label": action.tooltip,
@@ -765,11 +766,11 @@ const LMChatMessage = ({
     "div",
     {
       id,
-      className: `
-        flex gap-3
-        ${isUser ? "flex-row-reverse" : "flex-row"}
-        ${className}
-      `.trim().replace(/\s+/g, " "),
+      className: cn(
+        "flex gap-3",
+        isUser ? "flex-row-reverse" : "flex-row",
+        className
+      ),
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       children: [
@@ -777,10 +778,10 @@ const LMChatMessage = ({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: `
-          flex flex-col min-w-0
-          ${isUser ? "items-end" : "items-start"}
-        `.trim().replace(/\s+/g, " "),
+            className: cn(
+              "flex flex-col min-w-0",
+              isUser ? "items-end" : "items-start"
+            ),
             style: {
               maxWidth: typeof bubbleMaxWidth === "number" ? `${bubbleMaxWidth}px` : bubbleMaxWidth,
               width: typeof bubbleMaxWidth === "number" ? `${bubbleMaxWidth}px` : bubbleMaxWidth
@@ -789,10 +790,10 @@ const LMChatMessage = ({
               (name || timestamp) && /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: `
-              flex items-center gap-2 mb-1
-              ${isUser ? "flex-row-reverse" : "flex-row"}
-            `.trim().replace(/\s+/g, " "),
+                  className: cn(
+                    "flex items-center gap-2 mb-1",
+                    isUser ? "flex-row-reverse" : "flex-row"
+                  ),
                   children: [
                     name && /* @__PURE__ */ jsx(
                       "span",
@@ -1345,11 +1346,11 @@ const LMMarkdownRenderer = ({
         return /* @__PURE__ */ jsx(
           HeadingTag,
           {
-            className: `
-              ${headingSizeClass}
-              font-semibold leading-tight tracking-tight
-              mt-6 mb-3 first:mt-0
-            `.trim().replace(/\s+/g, " "),
+            className: cn(
+              headingSizeClass,
+              "font-semibold leading-tight tracking-tight",
+              "mt-6 mb-3 first:mt-0"
+            ),
             style: { color: "var(--lm-text-primary)" },
             children: parseInlineStyles(token.content, onLinkClick, openLinksInNewTab)
           },
@@ -1360,10 +1361,10 @@ const LMMarkdownRenderer = ({
         return /* @__PURE__ */ jsx(
           "p",
           {
-            className: `
-              ${sizeConfig.base}
-              leading-relaxed my-3 first:mt-0 last:mb-0
-            `.trim().replace(/\s+/g, " "),
+            className: cn(
+              sizeConfig.base,
+              "leading-relaxed my-3 first:mt-0 last:mb-0"
+            ),
             style: { color: "var(--lm-text-primary)" },
             children: parseInlineStyles(token.content, onLinkClick, openLinksInNewTab)
           },
@@ -1400,11 +1401,11 @@ const LMMarkdownRenderer = ({
         return /* @__PURE__ */ jsx(
           ListTag,
           {
-            className: `
-              ${sizeConfig.base}
-              my-3 pl-6
-              ${token.ordered ? "list-decimal" : "list-disc"}
-            `.trim().replace(/\s+/g, " "),
+            className: cn(
+              sizeConfig.base,
+              "my-3 pl-6",
+              token.ordered ? "list-decimal" : "list-disc"
+            ),
             style: { color: "var(--lm-text-primary)" },
             children: (_a = token.items) == null ? void 0 : _a.map((item, i2) => /* @__PURE__ */ jsx("li", { className: "my-1", children: parseInlineStyles(item, onLinkClick, openLinksInNewTab) }, i2))
           },
@@ -1459,7 +1460,7 @@ const LMMarkdownRenderer = ({
         return null;
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: `${sizeConfig.base} ${className}`.trim(), children: tokens.map((token, index) => renderToken(token, index)) });
+  return /* @__PURE__ */ jsx("div", { className: cn(sizeConfig.base, className), children: tokens.map((token, index) => renderToken(token, index)) });
 };
 const LMMarkdownRenderer_default = memo(LMMarkdownRenderer);
 const typingIndicatorThemeStyles = `
@@ -1575,20 +1576,21 @@ const LMTypingIndicator = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `
-          flex items-center ${config.avatarGap}
-          ${className}
-        `.trim().replace(/\s+/g, " "),
+        className: cn(
+          "flex items-center",
+          config.avatarGap,
+          className
+        ),
         "data-typing-indicator": true,
         children: [
           avatar && /* @__PURE__ */ jsx(
             "div",
             {
-              className: `
-              ${AVATAR_SIZE[resolvedSize]}
-              rounded-full overflow-hidden shrink-0
-              flex items-center justify-center
-            `.trim().replace(/\s+/g, " "),
+              className: cn(
+                AVATAR_SIZE[resolvedSize],
+                "rounded-full overflow-hidden shrink-0",
+                "flex items-center justify-center"
+              ),
               style: {
                 background: "var(--lm-typing-avatar-bg)",
                 boxShadow: "0 2px 8px rgba(0, 0, 0, 0.06)"
@@ -1599,10 +1601,10 @@ const LMTypingIndicator = ({
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: `
-            inline-flex items-center
-            ${config.padding}
-          `.trim().replace(/\s+/g, " "),
+              className: cn(
+                "inline-flex items-center",
+                config.padding
+              ),
               style: {
                 backgroundColor: "var(--lm-typing-bg)",
                 backdropFilter: "blur(20px) saturate(180%)",
@@ -1615,10 +1617,10 @@ const LMTypingIndicator = ({
                 /* @__PURE__ */ jsx("div", { className: `flex items-center ${config.gap}`, children: [0, 1, 2].map((i2) => /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: `
-                  ${config.dotSize}
-                  rounded-full
-                `.trim(),
+                    className: cn(
+                      config.dotSize,
+                      "rounded-full"
+                    ),
                     style: {
                       backgroundColor: color || "var(--lm-primary-500)",
                       ...getDotAnimation(i2)
@@ -1945,10 +1947,10 @@ const LMChatContainer = forwardRef(({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `
-        flex flex-col border rounded-2xl overflow-hidden
-        ${className}
-      `.trim().replace(/\s+/g, " "),
+      className: cn(
+        "flex flex-col border rounded-2xl overflow-hidden",
+        className
+      ),
       style: getContainerStyles(),
       children: [
         header && /* @__PURE__ */ jsx(
@@ -2026,9 +2028,6 @@ const LMChatContainer = forwardRef(({
 });
 LMChatContainer.displayName = "LMChatContainer";
 const LMChatContainer_default = memo(LMChatContainer);
-function cn(...inputs) {
-  return inputs.flat().filter((x) => typeof x === "string" && x.length > 0).join(" ");
-}
 export {
   COMPONENT_SIZE_ORDER,
   L as LMBadge,