@ryanhe919/lumen-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,3847 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactDom = require("react-dom");
+const COMPONENT_SIZE_ORDER = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl"
+];
+const SIZE_TEXT_CLASSES = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl"
+};
+const SIZE_HEADING_CLASSES = {
+  xs: "text-lg",
+  sm: "text-xl",
+  md: "text-2xl",
+  lg: "text-3xl",
+  xl: "text-4xl",
+  "2xl": "text-5xl"
+};
+const SIZE_DISPLAY_CLASSES = {
+  xs: "text-xl",
+  sm: "text-2xl",
+  md: "text-3xl",
+  lg: "text-4xl",
+  xl: "text-5xl",
+  "2xl": "text-6xl"
+};
+const SIZE_GAP_CLASSES = {
+  xs: "gap-1",
+  sm: "gap-1.5",
+  md: "gap-2",
+  lg: "gap-2.5",
+  xl: "gap-3",
+  "2xl": "gap-4"
+};
+const SIZE_PADDING_CLASSES = {
+  xs: "p-3",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8",
+  xl: "p-10",
+  "2xl": "p-12"
+};
+const SIZE_BUTTON_CONFIG = {
+  xs: { padding: "px-2.5 py-1.5", height: "h-7" },
+  sm: { padding: "px-3 py-2", height: "h-8" },
+  md: { padding: "px-4 py-2.5", height: "h-10" },
+  lg: { padding: "px-5 py-3", height: "h-12" },
+  xl: { padding: "px-6 py-3.5", height: "h-14" },
+  "2xl": { padding: "px-8 py-4", height: "h-16" }
+};
+const SIZE_INPUT_CONFIG = {
+  xs: { padding: "px-3 py-1", height: "h-7", fontSize: "text-xs" },
+  sm: { padding: "px-3 py-1.5", height: "h-9", fontSize: "text-sm" },
+  md: { padding: "px-4 py-2", height: "h-10", fontSize: "text-sm" },
+  lg: { padding: "px-4 py-2.5", height: "h-12", fontSize: "text-base" },
+  xl: { padding: "px-5 py-3", height: "h-14", fontSize: "text-base" },
+  "2xl": { padding: "px-6 py-4", height: "h-16", fontSize: "text-lg" }
+};
+const SIZE_SELECTOR_CONFIG = {
+  xs: { padding: "px-3 py-1", height: "h-7", fontSize: "text-xs" },
+  sm: { padding: "px-3 py-1.5", height: "h-9", fontSize: "text-sm" },
+  md: { padding: "px-4 py-2", height: "h-10", fontSize: "text-sm" },
+  lg: { padding: "px-4 py-2.5", height: "h-12", fontSize: "text-base" },
+  xl: { padding: "px-5 py-3", height: "h-14", fontSize: "text-base" },
+  "2xl": { padding: "px-6 py-4", height: "h-16", fontSize: "text-lg" }
+};
+const SIZE_MODAL_CONFIG = {
+  xs: { width: "360px", maxWidth: "90vw" },
+  sm: { width: "480px", maxWidth: "90vw" },
+  md: { width: "640px", maxWidth: "90vw" },
+  lg: { width: "800px", maxWidth: "95vw" },
+  xl: { width: "960px", maxWidth: "95vw" },
+  "2xl": { width: "1200px", maxWidth: "95vw" }
+};
+const SIZE_TOOLTIP_CONFIG = {
+  xs: { paddingClass: "px-2.5 py-1.5", textClass: "text-xs", maxWidth: 200 },
+  sm: { paddingClass: "px-3 py-2", textClass: "text-sm", maxWidth: 240 },
+  md: { paddingClass: "px-4 py-2.5", textClass: "text-sm", maxWidth: 300 },
+  lg: { paddingClass: "px-4 py-3", textClass: "text-base", maxWidth: 360 },
+  xl: { paddingClass: "px-5 py-3", textClass: "text-lg", maxWidth: 420 },
+  "2xl": { paddingClass: "px-6 py-4", textClass: "text-xl", maxWidth: 500 }
+};
+const SIZE_ICON_CONFIG = {
+  xs: "w-4 h-4",
+  sm: "w-5 h-5",
+  md: "w-6 h-6",
+  lg: "w-8 h-8",
+  xl: "w-10 h-10",
+  "2xl": "w-12 h-12"
+};
+const SIZE_TABLE_CONFIG = {
+  xs: { cellPadding: "px-2 py-1", rowHeight: "h-8" },
+  sm: { cellPadding: "px-3 py-1.5", rowHeight: "h-10" },
+  md: { cellPadding: "px-4 py-2", rowHeight: "h-12" },
+  lg: { cellPadding: "px-6 py-3", rowHeight: "h-14" },
+  xl: { cellPadding: "px-8 py-4", rowHeight: "h-16" },
+  "2xl": { cellPadding: "px-10 py-5", rowHeight: "h-20" }
+};
+const clampComponentSize = (size, allowedSizes, fallback = "md") => {
+  const nextSize = size ?? fallback;
+  return allowedSizes.includes(nextSize) ? nextSize : fallback;
+};
+const LMButton$1 = ({
+  children,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  loadingText,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  rounded = false,
+  disabled = false,
+  className = "",
+  ...props
+}) => {
+  const isDisabled = disabled || loading;
+  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER);
+  const roundedClasses = rounded ? "rounded-full" : "rounded-2xl";
+  const widthClasses = fullWidth ? "w-full" : "";
+  const baseClassName = `
+    ${SIZE_BUTTON_CONFIG[resolvedSize].padding} ${SIZE_TEXT_CLASSES[resolvedSize]} ${SIZE_GAP_CLASSES[resolvedSize]}
+    ${roundedClasses} ${widthClasses}
+    backdrop-blur-md border transition-all duration-300
+    shadow-sm font-medium focus:ring-2 focus:ring-offset-0
+    focus:outline-none disabled:cursor-not-allowed
+    flex items-center justify-center
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getButtonStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)"
+    };
+    switch (variant) {
+      case "primary":
+        return {
+          ...baseStyles,
+          backgroundColor: "var(--lm-primary-500)",
+          color: "white",
+          borderColor: "var(--lm-primary-500)",
+          "--tw-ring-color": "var(--lm-primary-400)",
+          "--tw-ring-opacity": "0.3"
+        };
+      case "secondary":
+        return {
+          ...baseStyles,
+          backgroundColor: "var(--lm-bg-paper)",
+          color: "var(--lm-text-primary)",
+          borderColor: "var(--lm-border-default)",
+          "--tw-ring-color": "var(--lm-primary-400)",
+          "--tw-ring-opacity": "0.3"
+        };
+      case "outline":
+        return {
+          ...baseStyles,
+          backgroundColor: "transparent",
+          color: "var(--lm-primary-600)",
+          borderColor: "var(--lm-primary-300)",
+          "--tw-ring-color": "var(--lm-primary-400)",
+          "--tw-ring-opacity": "0.3"
+        };
+      case "ghost":
+        return {
+          ...baseStyles,
+          backgroundColor: "transparent",
+          color: "var(--lm-text-primary)",
+          borderColor: "transparent",
+          "--tw-ring-color": "var(--lm-primary-400)",
+          "--tw-ring-opacity": "0.3"
+        };
+      case "danger":
+        return {
+          ...baseStyles,
+          backgroundColor: "var(--lm-error-500)",
+          color: "white",
+          borderColor: "var(--lm-error-500)",
+          "--tw-ring-color": "var(--lm-error-400)",
+          "--tw-ring-opacity": "0.3"
+        };
+      case "success":
+        return {
+          ...baseStyles,
+          backgroundColor: "var(--lm-success-500)",
+          color: "white",
+          borderColor: "var(--lm-success-500)",
+          "--tw-ring-color": "var(--lm-success-400)",
+          "--tw-ring-opacity": "0.3"
+        };
+      case "warning":
+        return {
+          ...baseStyles,
+          backgroundColor: "var(--lm-warning-500)",
+          color: "white",
+          borderColor: "var(--lm-warning-500)",
+          "--tw-ring-color": "var(--lm-warning-400)",
+          "--tw-ring-opacity": "0.3"
+        };
+      default:
+        return baseStyles;
+    }
+  };
+  const getDisabledStyles = () => {
+    if (isDisabled) {
+      return {
+        backgroundColor: "var(--lm-bg-paper)",
+        color: "var(--lm-text-disabled)",
+        borderColor: "var(--lm-border-light)",
+        cursor: "not-allowed",
+        opacity: 0.6
+      };
+    }
+    return {};
+  };
+  const getHoverStyles = () => {
+    if (isDisabled) return {};
+    switch (variant) {
+      case "primary":
+        return {
+          backgroundColor: "var(--lm-primary-600)",
+          borderColor: "var(--lm-primary-600)"
+        };
+      case "secondary":
+        return {
+          backgroundColor: "var(--lm-bg-elevated)",
+          borderColor: "var(--lm-border-strong)"
+        };
+      case "outline":
+        return {
+          backgroundColor: "var(--lm-primary-50)",
+          borderColor: "var(--lm-primary-400)"
+        };
+      case "ghost":
+        return {
+          backgroundColor: "var(--lm-bg-paper)"
+        };
+      case "danger":
+        return {
+          backgroundColor: "var(--lm-error-600)",
+          borderColor: "var(--lm-error-600)"
+        };
+      case "success":
+        return {
+          backgroundColor: "var(--lm-success-600)",
+          borderColor: "var(--lm-success-600)"
+        };
+      case "warning":
+        return {
+          backgroundColor: "var(--lm-warning-600)",
+          borderColor: "var(--lm-warning-600)"
+        };
+      default:
+        return {};
+    }
+  };
+  const getActiveStyles = () => {
+    if (isDisabled) return {};
+    switch (variant) {
+      case "primary":
+        return {
+          backgroundColor: "var(--lm-primary-700)",
+          borderColor: "var(--lm-primary-700)"
+        };
+      case "secondary":
+        return {
+          backgroundColor: "var(--lm-bg-paper)",
+          borderColor: "var(--lm-border-default)"
+        };
+      case "outline":
+        return {
+          backgroundColor: "var(--lm-primary-100)",
+          borderColor: "var(--lm-primary-500)"
+        };
+      case "ghost":
+        return {
+          backgroundColor: "var(--lm-bg-elevated)"
+        };
+      case "danger":
+        return {
+          backgroundColor: "var(--lm-error-700)",
+          borderColor: "var(--lm-error-700)"
+        };
+      case "success":
+        return {
+          backgroundColor: "var(--lm-success-700)",
+          borderColor: "var(--lm-success-700)"
+        };
+      case "warning":
+        return {
+          backgroundColor: "var(--lm-warning-700)",
+          borderColor: "var(--lm-warning-700)"
+        };
+      default:
+        return {};
+    }
+  };
+  const getIconStyles = () => {
+    if (isDisabled) {
+      return { color: "var(--lm-text-disabled)" };
+    }
+    switch (variant) {
+      case "primary":
+      case "danger":
+      case "success":
+      case "warning":
+        return { color: "white" };
+      case "outline":
+        return { color: "var(--lm-primary-600)" };
+      default:
+        return { color: "var(--lm-text-primary)" };
+    }
+  };
+  const LoadingSpinner = () => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "animate-spin h-4 w-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      style: getIconStyles(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...props,
+      disabled: isDisabled,
+      className: baseClassName,
+      style: {
+        ...getButtonStyles(),
+        ...getDisabledStyles()
+      },
+      onMouseEnter: (e) => {
+        var _a;
+        if (!isDisabled) Object.assign(e.currentTarget.style, getHoverStyles());
+        (_a = props.onMouseEnter) == null ? void 0 : _a.call(props, e);
+      },
+      onMouseLeave: (e) => {
+        var _a;
+        if (!isDisabled)
+          Object.assign(e.currentTarget.style, {
+            ...getButtonStyles(),
+            ...getDisabledStyles()
+          });
+        (_a = props.onMouseLeave) == null ? void 0 : _a.call(props, e);
+      },
+      onMouseDown: (e) => {
+        var _a;
+        if (!isDisabled) Object.assign(e.currentTarget.style, getActiveStyles());
+        (_a = props.onMouseDown) == null ? void 0 : _a.call(props, e);
+      },
+      onMouseUp: (e) => {
+        var _a;
+        if (!isDisabled) Object.assign(e.currentTarget.style, getHoverStyles());
+        (_a = props.onMouseUp) == null ? void 0 : _a.call(props, e);
+      },
+      onFocus: (e) => {
+        var _a;
+        if (!isDisabled) {
+          e.currentTarget.style.borderColor = "var(--lm-primary-400)";
+        }
+        (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+      },
+      onBlur: (e) => {
+        var _a;
+        if (!isDisabled)
+          Object.assign(e.currentTarget.style, {
+            ...getButtonStyles(),
+            ...getDisabledStyles()
+          });
+        (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+      },
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
+        loadingText || children
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: getIconStyles(), children: leftIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center", children }),
+        rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: getIconStyles(), children: rightIcon })
+      ] })
+    }
+  );
+};
+const LMButton = React.memo(LMButton$1);
+const LMInput = ({
+  leftIcon,
+  rightElement,
+  error = false,
+  errorMessage,
+  className = "",
+  size = "md",
+  includeSeconds = false,
+  ...props
+}) => {
+  const hasLeftIcon = !!leftIcon;
+  const hasRightElement = !!rightElement;
+  const errorId = React.useRef(
+    `lm-input-err-${Math.random().toString(36).slice(2)}`
+  ).current;
+  const timeInputProps = () => {
+    if ((props.type === "datetime-local" || props.type === "time") && includeSeconds) {
+      return { step: "1" };
+    }
+    return {};
+  };
+  const baseClassName = `
+    w-full ${SIZE_INPUT_CONFIG[size].padding} ${SIZE_INPUT_CONFIG[size].height} ${SIZE_INPUT_CONFIG[size].fontSize}
+    backdrop-blur-md border rounded-2xl
+    focus:ring-2 focus:outline-none transition-all duration-300
+    shadow-sm
+    ${hasLeftIcon ? "pl-10" : ""}
+    ${hasRightElement ? "pr-10" : ""}
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getInputStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: error ? "var(--lm-error-300)" : "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.3"
+    };
+  };
+  const getDisabledStyles = () => props.disabled ? {
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-disabled)",
+    cursor: "not-allowed",
+    opacity: 0.6
+  } : {};
+  const getIconStyles = () => error ? { color: "var(--lm-error-400)" } : { color: "var(--lm-text-secondary)" };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+      hasLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "transition-colors duration-200",
+          style: getIconStyles(),
+          children: leftIcon
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...props,
+          ...timeInputProps(),
+          className: baseClassName,
+          "aria-invalid": error || void 0,
+          "aria-describedby": errorMessage ? errorId : void 0,
+          style: {
+            ...getInputStyles(),
+            ...getDisabledStyles()
+          },
+          onMouseEnter: (e) => {
+            var _a;
+            if (!props.disabled && !error) {
+              e.currentTarget.style.borderColor = "var(--lm-border-strong)";
+            }
+            (_a = props.onMouseEnter) == null ? void 0 : _a.call(props, e);
+          },
+          onMouseLeave: (e) => {
+            var _a;
+            if (!props.disabled && !error) {
+              e.currentTarget.style.borderColor = "var(--lm-border-default)";
+            }
+            (_a = props.onMouseLeave) == null ? void 0 : _a.call(props, e);
+          },
+          onFocus: (e) => {
+            var _a;
+            if (!props.disabled) {
+              e.currentTarget.style.borderColor = error ? "var(--lm-error-400)" : "var(--lm-primary-400)";
+            }
+            (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+          },
+          onBlur: (e) => {
+            var _a;
+            if (!props.disabled) {
+              e.currentTarget.style.borderColor = error ? "var(--lm-error-300)" : "var(--lm-border-default)";
+            }
+            (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+          }
+        }
+      ),
+      hasRightElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-4 flex items-center z-10", children: rightElement })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: errorId,
+        className: "text-xs flex items-center gap-1",
+        style: { color: "var(--lm-error-500)" },
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "w-3 h-3",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+const sizeConfig$3 = {
+  xs: {
+    padding: "px-2 py-0.5",
+    fontSize: "text-xs",
+    dotSize: "w-1.5 h-1.5",
+    iconSize: "text-xs"
+  },
+  sm: {
+    padding: "px-3 py-1",
+    fontSize: "text-xs",
+    dotSize: "w-2 h-2",
+    iconSize: "text-xs"
+  },
+  md: {
+    padding: "px-3.5 py-1.5",
+    fontSize: "text-sm",
+    dotSize: "w-2 h-2",
+    iconSize: "text-sm"
+  },
+  lg: {
+    padding: "px-4 py-2",
+    fontSize: "text-sm",
+    dotSize: "w-2.5 h-2.5",
+    iconSize: "text-sm"
+  }
+};
+const LMBadge = ({
+  children,
+  variant = "primary",
+  size = "sm",
+  className = "",
+  dot = false,
+  icon
+}) => {
+  const getVariantStyles = () => {
+    const variantMap = {
+      primary: {
+        backgroundColor: "var(--lm-primary-100)",
+        color: "var(--lm-primary-700)",
+        borderColor: "var(--lm-primary-200)"
+      },
+      secondary: {
+        backgroundColor: "var(--lm-gray-100)",
+        color: "var(--lm-gray-700)",
+        borderColor: "var(--lm-gray-200)"
+      },
+      success: {
+        backgroundColor: "var(--lm-success-100)",
+        color: "var(--lm-success-700)",
+        borderColor: "var(--lm-success-200)"
+      },
+      warning: {
+        backgroundColor: "var(--lm-warning-100)",
+        color: "var(--lm-warning-700)",
+        borderColor: "var(--lm-warning-200)"
+      },
+      error: {
+        backgroundColor: "var(--lm-error-100)",
+        color: "var(--lm-error-700)",
+        borderColor: "var(--lm-error-200)"
+      },
+      info: {
+        backgroundColor: "var(--lm-info-100)",
+        color: "var(--lm-info-700)",
+        borderColor: "var(--lm-info-200)"
+      },
+      neutral: {
+        backgroundColor: "var(--lm-bg-elevated)",
+        color: "var(--lm-text-secondary)",
+        borderColor: "var(--lm-border-default)"
+      }
+    };
+    return variantMap[variant];
+  };
+  const getDotColor = () => {
+    const dotColorMap = {
+      primary: "var(--lm-primary-500)",
+      secondary: "var(--lm-gray-500)",
+      success: "var(--lm-success-500)",
+      warning: "var(--lm-warning-500)",
+      error: "var(--lm-error-500)",
+      info: "var(--lm-info-500)",
+      neutral: "var(--lm-text-disabled)"
+    };
+    return dotColorMap[variant];
+  };
+  const currentSize = sizeConfig$3[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `inline-flex items-center justify-center ${currentSize.padding} ${currentSize.fontSize} rounded-full border font-medium transition-all duration-200 ${className}`,
+      style: getVariantStyles(),
+      children: [
+        dot && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `${currentSize.dotSize} rounded-full mr-1.5 flex-shrink-0`,
+            style: { backgroundColor: getDotColor() }
+          }
+        ),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${currentSize.iconSize} mr-1.5 flex-shrink-0`, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children })
+      ]
+    }
+  );
+};
+const LMTooltip = ({
+  content,
+  children,
+  placement = "top",
+  maxWidth,
+  size = "sm"
+}) => {
+  const [visible, setVisible] = React.useState(false);
+  const [position, setPosition] = React.useState({ top: 0, left: 0 });
+  const triggerRef = React.useRef(null);
+  const tooltipRef = React.useRef(null);
+  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER);
+  const effectiveMaxWidth = maxWidth ?? SIZE_TOOLTIP_CONFIG[resolvedSize].maxWidth;
+  React.useEffect(() => {
+    if (visible && triggerRef.current && tooltipRef.current) {
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      let top = 0;
+      let left = 0;
+      switch (placement) {
+        case "top":
+          top = triggerRect.top - tooltipRect.height - 8;
+          left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+          break;
+        case "bottom":
+          top = triggerRect.bottom + 8;
+          left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+          break;
+        case "left":
+          top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+          left = triggerRect.left - tooltipRect.width - 8;
+          break;
+        case "right":
+          top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+          left = triggerRect.right + 8;
+          break;
+      }
+      const padding = 8;
+      if (left < padding) left = padding;
+      if (left + tooltipRect.width > window.innerWidth - padding) {
+        left = window.innerWidth - tooltipRect.width - padding;
+      }
+      if (top < padding) top = padding;
+      if (top + tooltipRect.height > window.innerHeight - padding) {
+        top = window.innerHeight - tooltipRect.height - padding;
+      }
+      setPosition({ top, left });
+    }
+  }, [visible, placement]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        className: "inline-block",
+        children
+      }
+    ),
+    visible && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: tooltipRef,
+        className: `fixed z-50 ${SIZE_TOOLTIP_CONFIG[resolvedSize].paddingClass} ${SIZE_TOOLTIP_CONFIG[resolvedSize].textClass} rounded-lg shadow-lg pointer-events-none`,
+        style: {
+          top: `${position.top}px`,
+          left: `${position.left}px`,
+          maxWidth: `${effectiveMaxWidth}px`,
+          backgroundColor: "var(--lm-bg-elevated)",
+          borderColor: "var(--lm-border-default)",
+          color: "var(--lm-text-primary)",
+          border: "1px solid"
+        },
+        children: content
+      }
+    )
+  ] });
+};
+const MODAL_FOOTER_SIZE_MAP = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md",
+  xl: "md",
+  "2xl": "lg"
+};
+const LMModal = ({
+  visible,
+  title,
+  children,
+  footer,
+  onClose,
+  onOk,
+  onCancel,
+  okText = "Confirm",
+  cancelText = "Cancel",
+  showOk = true,
+  showCancel = true,
+  okLoading = false,
+  cancelLoading = false,
+  mask = true,
+  maskClosable = false,
+  closable = true,
+  closeIcon,
+  headerIcon,
+  width,
+  height,
+  size = "md",
+  className = "",
+  style,
+  centered = true,
+  fullscreen = false,
+  animationDuration = 300,
+  animation = true
+}) => {
+  const modalRef = React.useRef(null);
+  const backdropRef = React.useRef(null);
+  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER);
+  const footerButtonSize = MODAL_FOOTER_SIZE_MAP[resolvedSize];
+  const getModalStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-xl)",
+      borderRadius: "1rem",
+      border: "1px solid var(--lm-border-default)",
+      backdropFilter: "blur(10px)",
+      ...style
+    };
+    if (fullscreen) {
+      baseStyles.width = "100vw";
+      baseStyles.height = "100vh";
+      baseStyles.maxWidth = "100vw";
+      baseStyles.maxHeight = "100vh";
+      baseStyles.borderRadius = "0";
+    } else {
+      baseStyles.width = width ? typeof width === "number" ? `${width}px` : width : SIZE_MODAL_CONFIG[resolvedSize].width;
+      baseStyles.maxWidth = SIZE_MODAL_CONFIG[resolvedSize].maxWidth;
+      if (height) {
+        baseStyles.height = typeof height === "number" ? `${height}px` : height;
+      }
+    }
+    return baseStyles;
+  };
+  const getBackdropStyles = () => mask ? { backgroundColor: "rgba(0, 0, 0, 0.5)", backdropFilter: "blur(4px)" } : { backgroundColor: "transparent", backdropFilter: "none" };
+  const handleOk = () => onOk ? onOk() : onClose == null ? void 0 : onClose();
+  const handleCancel = React.useCallback(() => {
+    if (onCancel) onCancel();
+    else onClose == null ? void 0 : onClose();
+  }, [onCancel, onClose]);
+  const handleBackdropClick = (e) => {
+    if (maskClosable && e.target === backdropRef.current) handleCancel();
+  };
+  React.useEffect(() => {
+    const keyHandler = (e) => {
+      if (visible && e.key === "Escape") handleCancel();
+    };
+    if (visible) {
+      document.addEventListener("keydown", keyHandler);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", keyHandler);
+      if (visible) document.body.style.overflow = "";
+    };
+  }, [visible, handleCancel]);
+  const CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
+  const WindowIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) });
+  const defaultFooter = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex items-center justify-end gap-3 px-6 py-4 border-t",
+      style: { borderColor: "var(--lm-border-default)" },
+      children: [
+        showCancel && /* @__PURE__ */ jsxRuntime.jsx(
+          LMButton,
+          {
+            variant: "secondary",
+            size: footerButtonSize,
+            onClick: handleCancel,
+            disabled: cancelLoading,
+            loading: cancelLoading,
+            children: cancelText
+          }
+        ),
+        showOk && /* @__PURE__ */ jsxRuntime.jsx(
+          LMButton,
+          {
+            variant: "primary",
+            size: footerButtonSize,
+            onClick: handleOk,
+            disabled: okLoading,
+            loading: okLoading,
+            children: okText
+          }
+        )
+      ]
+    }
+  );
+  const getAnimationClasses = () => {
+    if (!animation) return "";
+    const ms = animationDuration;
+    const durationClass = ms <= 150 ? "duration-150" : ms <= 200 ? "duration-200" : ms <= 300 ? "duration-300" : ms <= 500 ? "duration-500" : ms <= 700 ? "duration-700" : "duration-1000";
+    return `transition-all ${durationClass} ease-in-out`;
+  };
+  if (!visible) return null;
+  const modalContent = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: backdropRef,
+      className: `fixed inset-0 z-50 flex ${centered ? "items-center" : "items-start pt-20"} justify-center ${getAnimationClasses()}`,
+      style: getBackdropStyles(),
+      onClick: handleBackdropClick,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: modalRef,
+          className: `relative ${getAnimationClasses()} ${className}`,
+          style: getModalStyles(),
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            (title || closable) && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between p-6 pb-4 border-b",
+                style: { borderColor: "var(--lm-border-default)" },
+                children: [
+                  title && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "h3",
+                    {
+                      className: `font-bold flex items-center gap-2 ${SIZE_HEADING_CLASSES[resolvedSize]}`,
+                      style: { color: "var(--lm-text-primary)" },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--lm-text-secondary)" }, children: headerIcon || /* @__PURE__ */ jsxRuntime.jsx(WindowIcon, {}) }),
+                        title
+                      ]
+                    }
+                  ),
+                  closable && /* @__PURE__ */ jsxRuntime.jsx(
+                    LMButton,
+                    {
+                      variant: "ghost",
+                      size: "xs",
+                      onClick: handleCancel,
+                      leftIcon: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}),
+                      className: "w-8 h-8 p-0",
+                      "aria-label": "Close dialog",
+                      title: "Close",
+                      style: {
+                        borderRadius: "0.5rem",
+                        backgroundColor: "var(--lm-bg-paper)",
+                        borderColor: "var(--lm-border-default)",
+                        color: "var(--lm-text-secondary)"
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children }),
+            footer !== void 0 ? footer : showOk || showCancel ? defaultFooter : null
+          ]
+        }
+      )
+    }
+  );
+  return reactDom.createPortal(modalContent, document.body);
+};
+const LMModal_default = React.memo(LMModal);
+const sizeConfig$2 = {
+  xs: {
+    container: "p-2 gap-2",
+    label: "text-xs",
+    description: "text-xs mt-0.5",
+    errorMessage: "text-xs"
+  },
+  sm: {
+    container: "p-3 gap-2.5",
+    label: "text-sm",
+    description: "text-xs mt-1",
+    errorMessage: "text-xs"
+  },
+  md: {
+    container: "p-4 gap-3",
+    label: "text-base",
+    description: "text-sm mt-1",
+    errorMessage: "text-xs"
+  },
+  lg: {
+    container: "p-5 gap-4",
+    label: "text-lg",
+    description: "text-base mt-1.5",
+    errorMessage: "text-sm"
+  },
+  xl: {
+    container: "p-6 gap-4",
+    label: "text-xl",
+    description: "text-lg mt-2",
+    errorMessage: "text-sm"
+  },
+  "2xl": {
+    container: "p-8 gap-5",
+    label: "text-2xl",
+    description: "text-xl mt-2.5",
+    errorMessage: "text-base"
+  }
+};
+const LMCheckbox = ({
+  label,
+  description,
+  error = false,
+  errorMessage,
+  size = "md",
+  className = "",
+  ...props
+}) => {
+  const currentSize = sizeConfig$2[size];
+  const checkboxSizeClass = SIZE_ICON_CONFIG[size];
+  const getCheckboxStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      borderColor: error ? "var(--lm-error-300)" : "var(--lm-border-default)",
+      color: "var(--lm-primary-500)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.3"
+    };
+  };
+  const getDisabledStyles = () => {
+    if (props.disabled) {
+      return {
+        backgroundColor: "var(--lm-bg-paper)",
+        borderColor: "var(--lm-border-light)",
+        color: "var(--lm-text-disabled)",
+        cursor: "not-allowed",
+        opacity: 0.6
+      };
+    }
+    return {};
+  };
+  const getContainerStyles = () => ({
+    backgroundColor: error ? "var(--lm-error-50)" : "var(--lm-bg-paper)"
+  });
+  const getHoverContainerStyles = () => ({
+    backgroundColor: error ? "var(--lm-error-100)" : "var(--lm-bg-elevated)"
+  });
+  const getLabelStyles = () => {
+    if (error)
+      return { color: "var(--lm-error-700)" };
+    if (props.disabled)
+      return {
+        color: "var(--lm-text-disabled)",
+        cursor: "not-allowed"
+      };
+    return {
+      color: "var(--lm-text-primary)",
+      cursor: "pointer"
+    };
+  };
+  const getDescriptionStyles = () => error ? { color: "var(--lm-error-600)" } : { color: "var(--lm-text-secondary)" };
+  const checkboxClassName = `
+    ${checkboxSizeClass} border-2 rounded-md
+    focus:ring-2 focus:ring-offset-0
+    transition-all duration-200
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: `flex items-center rounded-2xl transition-colors duration-200 ${currentSize.container} ${props.disabled ? "" : "cursor-pointer"}`,
+        style: getContainerStyles(),
+        onMouseEnter: (e) => {
+          if (!props.disabled) {
+            Object.assign(e.currentTarget.style, getHoverContainerStyles());
+          }
+        },
+        onMouseLeave: (e) => {
+          if (!props.disabled) {
+            Object.assign(e.currentTarget.style, getContainerStyles());
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              ...props,
+              className: checkboxClassName,
+              style: {
+                ...getCheckboxStyles(),
+                ...getDisabledStyles()
+              },
+              onFocus: (e) => {
+                var _a;
+                if (!props.disabled) {
+                  e.currentTarget.style.borderColor = error ? "var(--lm-error-400)" : "var(--lm-primary-400)";
+                }
+                (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+              },
+              onBlur: (e) => {
+                var _a;
+                if (!props.disabled) {
+                  e.currentTarget.style.borderColor = error ? "var(--lm-error-300)" : "var(--lm-border-default)";
+                }
+                (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `font-medium leading-tight transition-colors duration-200 ${currentSize.label}`,
+                style: getLabelStyles(),
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: currentSize.description,
+                style: getDescriptionStyles(),
+                children: description
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: `flex items-center gap-1 ${currentSize.errorMessage}`,
+        style: { color: "var(--lm-error-500)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "w-3 h-3",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+const LMRadio = ({
+  label,
+  description,
+  error = false,
+  errorMessage,
+  size = "md",
+  className = "",
+  id,
+  ...props
+}) => {
+  const autoId = React.useId();
+  const controlId = id ?? `lm-radio-${autoId}`;
+  const errId = `lm-radio-err-${autoId}`;
+  const radioSizeClass = SIZE_ICON_CONFIG[size];
+  const getRadioStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      borderColor: error ? "var(--lm-error-300)" : "var(--lm-border-default)",
+      color: "var(--lm-primary-500)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.3"
+    };
+  };
+  const getDisabledStyles = () => {
+    if (props.disabled) {
+      return {
+        backgroundColor: "var(--lm-bg-paper)",
+        borderColor: "var(--lm-border-light)",
+        color: "var(--lm-text-disabled)",
+        cursor: "not-allowed",
+        opacity: 0.6
+      };
+    }
+    return {};
+  };
+  const getContainerStyles = () => {
+    const base = { backgroundColor: "var(--lm-bg-paper)" };
+    return error ? { ...base, backgroundColor: "var(--lm-error-50)" } : base;
+  };
+  const getHoverContainerStyles = () => error ? { backgroundColor: "var(--lm-error-100)" } : { backgroundColor: "var(--lm-bg-elevated)" };
+  const getLabelStyles = () => {
+    if (error) return { color: "var(--lm-error-700)" };
+    if (props.disabled)
+      return { color: "var(--lm-text-disabled)", cursor: "not-allowed" };
+    return { color: "var(--lm-text-primary)", cursor: "pointer" };
+  };
+  const getDescriptionStyles = () => error ? { color: "var(--lm-error-600)" } : { color: "var(--lm-text-secondary)" };
+  const radioClassName = `
+    ${radioSizeClass} border-2 rounded-full
+    focus:ring-2 focus:ring-offset-0
+    transition-all duration-200
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-start gap-3 p-4 rounded-2xl transition-colors duration-200",
+        style: getContainerStyles(),
+        onMouseEnter: (e) => {
+          if (!props.disabled)
+            Object.assign(e.currentTarget.style, getHoverContainerStyles());
+        },
+        onMouseLeave: (e) => {
+          if (!props.disabled)
+            Object.assign(e.currentTarget.style, getContainerStyles());
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              id: controlId,
+              ...props,
+              className: radioClassName,
+              "aria-invalid": error || void 0,
+              "aria-describedby": errorMessage ? errId : void 0,
+              style: { ...getRadioStyles(), ...getDisabledStyles() },
+              onFocus: (e) => {
+                var _a;
+                if (!props.disabled) {
+                  e.currentTarget.style.borderColor = error ? "var(--lm-error-400)" : "var(--lm-primary-400)";
+                }
+                (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+              },
+              onBlur: (e) => {
+                var _a;
+                if (!props.disabled) {
+                  e.currentTarget.style.borderColor = error ? "var(--lm-error-300)" : "var(--lm-border-default)";
+                }
+                (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                htmlFor: controlId,
+                className: "text-base font-medium transition-colors duration-200",
+                style: getLabelStyles(),
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1", style: getDescriptionStyles(), children: description })
+          ] })
+        ]
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: errId,
+        className: "text-xs flex items-center gap-1",
+        style: { color: "var(--lm-error-500)" },
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "w-3 h-3",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+const sizeConfig$1 = {
+  xs: {
+    container: "p-2 gap-2",
+    label: "text-xs",
+    description: "text-xs mt-0.5",
+    errorMessage: "text-xs",
+    track: "w-7 h-4",
+    thumb: "w-2.5 h-2.5",
+    translate: "translate-x-3"
+  },
+  sm: {
+    container: "p-3 gap-2.5",
+    label: "text-sm",
+    description: "text-xs mt-1",
+    errorMessage: "text-xs",
+    track: "w-9 h-5",
+    thumb: "w-3 h-3",
+    translate: "translate-x-4"
+  },
+  md: {
+    container: "p-4 gap-3",
+    label: "text-base",
+    description: "text-sm mt-1",
+    errorMessage: "text-xs",
+    track: "w-11 h-6",
+    thumb: "w-4 h-4",
+    translate: "translate-x-5"
+  },
+  lg: {
+    container: "p-5 gap-4",
+    label: "text-lg",
+    description: "text-base mt-1.5",
+    errorMessage: "text-sm",
+    track: "w-14 h-7",
+    thumb: "w-5 h-5",
+    translate: "translate-x-7"
+  },
+  xl: {
+    container: "p-6 gap-4",
+    label: "text-xl",
+    description: "text-lg mt-2",
+    errorMessage: "text-sm",
+    track: "w-16 h-8",
+    thumb: "w-6 h-6",
+    translate: "translate-x-8"
+  },
+  "2xl": {
+    container: "p-8 gap-5",
+    label: "text-2xl",
+    description: "text-xl mt-2.5",
+    errorMessage: "text-base",
+    track: "w-20 h-10",
+    thumb: "w-8 h-8",
+    translate: "translate-x-10"
+  }
+};
+const LMSwitch = ({
+  label,
+  description,
+  error = false,
+  errorMessage,
+  size = "md",
+  id,
+  ...props
+}) => {
+  const autoId = React.useId();
+  const controlId = id ?? `lm-switch-${autoId}`;
+  const errId = `lm-switch-err-${autoId}`;
+  const currentSize = sizeConfig$1[size];
+  const getTrackBg = () => {
+    if (props.disabled) return "var(--lm-bg-paper)";
+    if (error && !props.checked) return "var(--lm-error-300)";
+    if (props.checked) return "var(--lm-primary-500)";
+    return "var(--lm-border-default)";
+  };
+  const getDisabledStyles = () => {
+    if (props.disabled) {
+      return {
+        opacity: 0.6,
+        cursor: "not-allowed"
+      };
+    }
+    return {};
+  };
+  const getContainerStyles = () => {
+    const base = { backgroundColor: "var(--lm-bg-paper)" };
+    return error ? { ...base, backgroundColor: "var(--lm-error-50)" } : base;
+  };
+  const getHoverContainerStyles = () => error ? { backgroundColor: "var(--lm-error-100)" } : { backgroundColor: "var(--lm-bg-elevated)" };
+  const getLabelStyles = () => {
+    if (error) return { color: "var(--lm-error-700)" };
+    if (props.disabled)
+      return { color: "var(--lm-text-disabled)", cursor: "not-allowed" };
+    return { color: "var(--lm-text-primary)", cursor: "pointer" };
+  };
+  const getDescriptionStyles = () => error ? { color: "var(--lm-error-600)" } : { color: "var(--lm-text-secondary)" };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        htmlFor: controlId,
+        className: `flex items-start rounded-2xl transition-colors duration-200 ${currentSize.container} ${props.disabled ? "" : "cursor-pointer"}`,
+        style: getContainerStyles(),
+        onMouseEnter: (e) => {
+          if (!props.disabled) {
+            Object.assign(e.currentTarget.style, getHoverContainerStyles());
+          }
+        },
+        onMouseLeave: (e) => {
+          if (!props.disabled) {
+            Object.assign(e.currentTarget.style, getContainerStyles());
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                id: controlId,
+                ...props,
+                className: "sr-only peer",
+                "aria-invalid": error || void 0,
+                "aria-describedby": errorMessage ? errId : void 0,
+                style: getDisabledStyles()
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${currentSize.track} rounded-full transition-all duration-300 relative`,
+                style: {
+                  backgroundColor: getTrackBg(),
+                  ...getDisabledStyles()
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: `${currentSize.thumb} absolute left-1 top-1/2 -translate-y-1/2 rounded-full transition-transform duration-300 ${props.checked ? currentSize.translate : "translate-x-0"}`,
+                    style: {
+                      backgroundColor: "var(--lm-bg-elevated)",
+                      boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)"
+                    }
+                  }
+                )
+              }
+            )
+          ] }),
+          (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `font-medium leading-tight transition-colors duration-200 ${currentSize.label}`,
+                style: getLabelStyles(),
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: currentSize.description,
+                style: getDescriptionStyles(),
+                children: description
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: errId,
+        className: `flex items-center gap-1 mt-2 ${currentSize.errorMessage}`,
+        style: { color: "var(--lm-error-500)" },
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "w-3 h-3",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+const sizeConfig = {
+  xs: {
+    minHeight: "min-h-[60px]",
+    fontSize: "text-xs",
+    padding: "px-3 py-2"
+  },
+  sm: {
+    minHeight: "min-h-[80px]",
+    fontSize: "text-sm",
+    padding: "px-3 py-2"
+  },
+  md: {
+    minHeight: "min-h-[100px]",
+    fontSize: "text-sm",
+    padding: "px-4 py-2.5"
+  },
+  lg: {
+    minHeight: "min-h-[120px]",
+    fontSize: "text-base",
+    padding: "px-4 py-3"
+  },
+  xl: {
+    minHeight: "min-h-[140px]",
+    fontSize: "text-base",
+    padding: "px-5 py-3.5"
+  },
+  "2xl": {
+    minHeight: "min-h-[160px]",
+    fontSize: "text-lg",
+    padding: "px-6 py-4"
+  }
+};
+const LMTextarea = ({
+  error = false,
+  errorMessage,
+  className = "",
+  size = "md",
+  ...props
+}) => {
+  const baseClassName = `
+    w-full ${sizeConfig[size].padding} ${sizeConfig[size].fontSize} backdrop-blur-md border rounded-2xl
+    focus:ring-2 focus:outline-none transition-all duration-300
+    shadow-sm resize-none ${className.includes("h-full") ? "" : sizeConfig[size].minHeight}
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getTextareaStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: error ? "var(--lm-error-300)" : "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.3"
+    };
+  };
+  const getDisabledStyles = () => {
+    if (props.disabled) {
+      return {
+        backgroundColor: "var(--lm-bg-paper)",
+        color: "var(--lm-text-disabled)",
+        cursor: "not-allowed",
+        opacity: 0.6
+      };
+    }
+    return {};
+  };
+  const isFullHeight = className.includes("h-full");
+  const containerClassName = isFullHeight ? "h-full flex flex-col" : "space-y-2";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ...props,
+        className: baseClassName,
+        style: {
+          ...getTextareaStyles(),
+          ...getDisabledStyles()
+        },
+        onMouseEnter: (e) => {
+          var _a;
+          if (!props.disabled && !error) {
+            e.currentTarget.style.borderColor = "var(--lm-border-strong)";
+          }
+          (_a = props.onMouseEnter) == null ? void 0 : _a.call(props, e);
+        },
+        onMouseLeave: (e) => {
+          var _a;
+          if (!props.disabled && !error) {
+            e.currentTarget.style.borderColor = "var(--lm-border-default)";
+          }
+          (_a = props.onMouseLeave) == null ? void 0 : _a.call(props, e);
+        },
+        onFocus: (e) => {
+          var _a;
+          if (!props.disabled) {
+            e.currentTarget.style.borderColor = error ? "var(--lm-error-400)" : "var(--lm-primary-400)";
+          }
+          (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+        },
+        onBlur: (e) => {
+          var _a;
+          if (!props.disabled) {
+            e.currentTarget.style.borderColor = error ? "var(--lm-error-300)" : "var(--lm-border-default)";
+          }
+          (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+        }
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: "text-xs flex items-center gap-1",
+        style: { color: "var(--lm-error-500)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+              clipRule: "evenodd"
+            }
+          ) }),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+const LMNumberInput = ({
+  value,
+  onChange,
+  error = false,
+  errorMessage,
+  placeholder = "Enter number...",
+  disabled = false,
+  className = "",
+  name,
+  size = "md",
+  min,
+  max,
+  step = 1,
+  precision = 0,
+  showControls = true,
+  prefix,
+  suffix
+}) => {
+  const [inputValue, setInputValue] = React.useState(
+    value !== null && value !== void 0 ? String(value) : ""
+  );
+  const [isFocused, setIsFocused] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const errId = React.useRef(`lm-ni-err-${Math.random().toString(36).slice(2)}`).current;
+  const formatNumber = React.useCallback(
+    (num) => {
+      if (!Number.isFinite(num)) return "";
+      if (precision <= 0) return String(Math.round(num));
+      return num.toFixed(precision);
+    },
+    [precision]
+  );
+  React.useEffect(() => {
+    if (value === void 0 || value === null) {
+      setInputValue("");
+    } else if (!isFocused) {
+      setInputValue(formatNumber(value));
+    }
+  }, [value, isFocused, formatNumber]);
+  const baseClassName = `
+    w-full ${SIZE_INPUT_CONFIG[size].padding} ${SIZE_INPUT_CONFIG[size].height} ${SIZE_INPUT_CONFIG[size].fontSize}
+    backdrop-blur-md border rounded-2xl
+    focus:ring-2 focus:outline-none transition-all duration-300
+    shadow-sm
+    ${showControls ? "pr-10" : ""}
+    ${prefix ? "pl-10" : ""}
+    ${suffix ? "pr-10" : ""}
+    ${className}
+    [&::-webkit-outer-spin-button]:appearance-none
+    [&::-webkit-inner-spin-button]:appearance-none
+    [-moz-appearance:textfield]
+  `.trim().replace(/\s+/g, " ");
+  const getNumberInputStyles = () => {
+    const base = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: error ? "var(--lm-error-300)" : isFocused ? "var(--lm-primary-400)" : "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)"
+    };
+    return {
+      ...base,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.3"
+    };
+  };
+  const getDisabledStyles = () => disabled ? {
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-disabled)",
+    cursor: "not-allowed",
+    opacity: 0.6
+  } : {};
+  const getIconStyles = () => {
+    if (error) return { color: "var(--lm-error-400)" };
+    if (isFocused) return { color: "var(--lm-primary-500)" };
+    return { color: "var(--lm-text-secondary)" };
+  };
+  const getControlButtonStyles = () => ({
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-secondary)",
+    borderColor: "var(--lm-border-light)"
+  });
+  const getHoverControlButtonStyles = () => ({
+    backgroundColor: "var(--lm-bg-elevated)",
+    color: "var(--lm-text-primary)"
+  });
+  const parseNumber = (str) => {
+    const n = parseFloat(str);
+    return Number.isNaN(n) ? null : n;
+  };
+  const clamp = (num) => {
+    let v = num;
+    if (min !== void 0) v = Math.max(v, min);
+    if (max !== void 0) v = Math.min(v, max);
+    return v;
+  };
+  const stepFrom = React.useMemo(() => min ?? 0, [min]);
+  const alignToStep = (num) => {
+    const offset = num - stepFrom;
+    const k = Math.round(offset / step);
+    const next = stepFrom + k * step;
+    return Number(next.toFixed(Math.max(precision, 12)));
+  };
+  const handleInputChange = (event) => {
+    const val = event.target.value;
+    setInputValue(val);
+    if (val.trim() === "") {
+      onChange == null ? void 0 : onChange(null);
+      return;
+    }
+    const num = parseNumber(val);
+    if (num === null) return;
+    const clamped = clamp(num);
+    if (clamped !== num) return;
+    onChange == null ? void 0 : onChange(num);
+  };
+  const changeByStep = (delta) => {
+    if (disabled) return;
+    const current = parseNumber(inputValue);
+    const base = current ?? min ?? 0;
+    const raw = base + delta * step;
+    const clamped = clamp(raw);
+    const aligned = alignToStep(clamped);
+    setInputValue(formatNumber(aligned));
+    onChange == null ? void 0 : onChange(aligned);
+  };
+  const handleIncrement = () => changeByStep(1);
+  const handleDecrement = () => changeByStep(-1);
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      handleIncrement();
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      handleDecrement();
+    }
+  };
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (inputValue.trim() === "") {
+      setInputValue("");
+      if (value !== null) onChange == null ? void 0 : onChange(null);
+      return;
+    }
+    const num = parseNumber(inputValue);
+    if (num === null) {
+      if (typeof value === "number") {
+        setInputValue(formatNumber(clamp(value)));
+      } else {
+        setInputValue("");
+        if (value !== null) onChange == null ? void 0 : onChange(null);
+      }
+      return;
+    }
+    let v = clamp(num);
+    v = alignToStep(v);
+    const formatted = formatNumber(v);
+    setInputValue(formatted);
+    if (v !== value) onChange == null ? void 0 : onChange(v);
+  };
+  const handleWheel = (e) => {
+    if (document.activeElement === inputRef.current) {
+      e.preventDefault();
+    }
+  };
+  const currentNum = parseNumber(inputValue);
+  const incDisabled = React.useMemo(() => {
+    if (disabled) return true;
+    const base = currentNum ?? min ?? 0;
+    return max !== void 0 && base >= max;
+  }, [disabled, currentNum, min, max]);
+  const decDisabled = React.useMemo(() => {
+    if (disabled) return true;
+    const base = currentNum ?? min ?? 0;
+    return min !== void 0 && base <= min;
+  }, [disabled, currentNum, min]);
+  const ChevronUp = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) });
+  const ChevronDown = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+      prefix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", style: getIconStyles(), children: prefix }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "number",
+          name,
+          value: inputValue,
+          placeholder,
+          disabled,
+          min,
+          max,
+          step,
+          inputMode: "decimal",
+          className: baseClassName,
+          style: { ...getNumberInputStyles(), ...getDisabledStyles() },
+          "aria-invalid": error || void 0,
+          "aria-describedby": errorMessage ? errId : void 0,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onWheel: handleWheel,
+          onMouseEnter: (e) => {
+            if (!disabled && !error && !isFocused) {
+              e.currentTarget.style.borderColor = "var(--lm-border-strong)";
+            }
+          },
+          onMouseLeave: (e) => {
+            if (!disabled && !error && !isFocused) {
+              e.currentTarget.style.borderColor = "var(--lm-border-default)";
+            }
+          }
+        }
+      ),
+      suffix && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `absolute inset-y-0 flex items-center pointer-events-none z-10 ${showControls ? "right-10" : "right-4"}`,
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", style: getIconStyles(), children: suffix })
+        }
+      ),
+      showControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex flex-col w-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Increment",
+            onClick: handleIncrement,
+            disabled: incDisabled,
+            className: "flex-1 px-1 border-l border-b rounded-tr-2xl transition-colors duration-200 flex items-center justify-center",
+            style: getControlButtonStyles(),
+            onMouseEnter: (e) => {
+              if (!incDisabled)
+                Object.assign(e.currentTarget.style, getHoverControlButtonStyles());
+            },
+            onMouseLeave: (e) => {
+              if (!incDisabled)
+                Object.assign(e.currentTarget.style, getControlButtonStyles());
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronUp, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Decrement",
+            onClick: handleDecrement,
+            disabled: decDisabled,
+            className: "flex-1 px-1 border-l rounded-br-2xl transition-colors duration-200 flex items-center justify-center",
+            style: getControlButtonStyles(),
+            onMouseEnter: (e) => {
+              if (!decDisabled)
+                Object.assign(e.currentTarget.style, getHoverControlButtonStyles());
+            },
+            onMouseLeave: (e) => {
+              if (!decDisabled)
+                Object.assign(e.currentTarget.style, getControlButtonStyles());
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+          }
+        )
+      ] })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: errId,
+        className: "text-xs flex items-center gap-1",
+        style: { color: "var(--lm-error-500)" },
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+              clipRule: "evenodd"
+            }
+          ) }),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+const LMSearchInput = ({
+  value,
+  onChange,
+  onSearch,
+  error = false,
+  errorMessage,
+  placeholder = "Search...",
+  disabled = false,
+  className = "",
+  name,
+  size = "md",
+  showClear = true,
+  showSearchButton = true,
+  searchButtonText = "Search",
+  debounceDelay = 300
+}) => {
+  const [inputValue, setInputValue] = React.useState(value || "");
+  const [isFocused, setIsFocused] = React.useState(false);
+  const debounceRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const searchBtnRef = React.useRef(null);
+  const [searchBtnWidth, setSearchBtnWidth] = React.useState(0);
+  React.useEffect(() => {
+    if (value !== void 0 && value !== null) setInputValue(value);
+  }, [value]);
+  React.useEffect(() => {
+    if (showSearchButton && searchBtnRef.current) {
+      setSearchBtnWidth(searchBtnRef.current.offsetWidth || 0);
+    } else {
+      setSearchBtnWidth(0);
+    }
+  }, [showSearchButton, searchButtonText]);
+  const baseClassName = `
+    w-full ${SIZE_INPUT_CONFIG[size].padding} ${SIZE_INPUT_CONFIG[size].height} backdrop-blur-md border rounded-2xl
+    focus:ring-2 focus:outline-none transition-all duration-300
+    shadow-sm
+    ${showSearchButton ? "pr-20" : showClear ? "pr-10" : "pr-4"}
+    pl-12
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getSearchInputStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: error ? "var(--lm-error-300)" : isFocused ? "var(--lm-primary-400)" : "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.3"
+    };
+  };
+  const getDisabledStyles = () => disabled ? {
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-disabled)",
+    cursor: "not-allowed",
+    opacity: 0.6
+  } : {};
+  const getIconStyles = () => {
+    if (error) return { color: "var(--lm-error-400)" };
+    if (isFocused) return { color: "var(--lm-primary-500)" };
+    return { color: "var(--lm-text-secondary)" };
+  };
+  const getButtonStyles = () => ({
+    backgroundColor: "var(--lm-primary-500)",
+    color: "white"
+  });
+  const getClearButtonStyles = () => ({
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-secondary)"
+  });
+  const handleInputChange = (event) => {
+    const newValue = event.target.value;
+    setInputValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      onSearch == null ? void 0 : onSearch(newValue);
+    }, debounceDelay);
+  };
+  const handleSearch = () => onSearch == null ? void 0 : onSearch(inputValue);
+  const handleClear = () => {
+    var _a;
+    setInputValue("");
+    onChange == null ? void 0 : onChange("");
+    onSearch == null ? void 0 : onSearch("");
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleSearch();
+    }
+  };
+  const clearBtnSizeClass = size === "sm" ? "w-7 h-7 text-xs" : size === "lg" ? "w-9 h-9 text-sm" : "w-8 h-8 text-sm";
+  const clearRightPx = showSearchButton ? searchBtnWidth + 8 : 8;
+  const SearchIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) });
+  const ClearIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: getIconStyles(), children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "search",
+          name,
+          value: inputValue,
+          placeholder,
+          disabled,
+          className: baseClassName,
+          style: {
+            ...getSearchInputStyles(),
+            ...getDisabledStyles()
+          },
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          onMouseEnter: (e) => {
+            if (!disabled && !error && !isFocused) {
+              e.currentTarget.style.borderColor = "var(--lm-border-strong)";
+            }
+          },
+          onMouseLeave: (e) => {
+            if (!disabled && !error && !isFocused) {
+              e.currentTarget.style.borderColor = "var(--lm-border-default)";
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          input[type='search']::-webkit-search-cancel-button {
+            -webkit-appearance: none;
+            appearance: none;
+          }
+        ` }),
+      showClear && inputValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleClear,
+          className: `absolute top-1/2 -translate-y-1/2 z-10 rounded-full flex items-center justify-center ${clearBtnSizeClass}`,
+          style: {
+            ...getClearButtonStyles(),
+            right: `${clearRightPx}px`
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-bg-elevated)";
+            e.currentTarget.style.color = "var(--lm-text-primary)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-bg-paper)";
+            e.currentTarget.style.color = "var(--lm-text-secondary)";
+          },
+          "aria-label": "Clear",
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
+        }
+      ),
+      showSearchButton && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          ref: searchBtnRef,
+          onClick: handleSearch,
+          className: "absolute inset-y-0 right-0 px-4 rounded-r-2xl transition-colors duration-200 z-20",
+          style: getButtonStyles(),
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-primary-600)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-primary-500)";
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: searchButtonText })
+        }
+      )
+    ] }),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: "text-xs flex items-center gap-1",
+        style: { color: "var(--lm-error-500)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+              clipRule: "evenodd"
+            }
+          ) }),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+const SIZE_DROPDOWN_CONFIG = {
+  xs: { maxHeight: "max-h-32", optionPadding: "px-3 py-1.5", optionTextSize: "text-xs" },
+  sm: { maxHeight: "max-h-40", optionPadding: "px-3 py-2", optionTextSize: "text-xs" },
+  md: { maxHeight: "max-h-48", optionPadding: "px-4 py-2.5", optionTextSize: "text-sm" },
+  lg: { maxHeight: "max-h-56", optionPadding: "px-4 py-3", optionTextSize: "text-sm" },
+  xl: { maxHeight: "max-h-64", optionPadding: "px-5 py-3", optionTextSize: "text-base" },
+  "2xl": { maxHeight: "max-h-72", optionPadding: "px-6 py-4", optionTextSize: "text-lg" }
+};
+const LMSelect = ({
+  options,
+  value,
+  onChange,
+  onDropdownVisibleChange,
+  error = false,
+  errorMessage,
+  placeholder = "Select...",
+  disabled = false,
+  className = "",
+  name,
+  size = "md",
+  multiple = false
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selectedOption, setSelectedOption] = React.useState(null);
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+  const dropdownRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!multiple) {
+      if (value !== void 0 && value !== null && !Array.isArray(value)) {
+        const option = options.find((opt) => opt.value === value);
+        setSelectedOption(option || null);
+      } else {
+        setSelectedOption(null);
+      }
+    }
+  }, [value, options, multiple]);
+  React.useEffect(() => {
+    if (multiple && Array.isArray(value)) {
+      const selectedOpts = options.filter((opt) => value.includes(opt.value));
+      setSelectedOptions(selectedOpts);
+    } else if (multiple) {
+      setSelectedOptions([]);
+    }
+  }, [value, options, multiple]);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen, onDropdownVisibleChange]);
+  const handleSelect = (option) => {
+    if (option.disabled) return;
+    if (multiple) {
+      const currentValues = Array.isArray(value) ? value : [];
+      const isSelected = currentValues.includes(option.value);
+      const newValues = isSelected ? currentValues.filter((v) => v !== option.value) : [...currentValues, option.value];
+      onChange == null ? void 0 : onChange(newValues);
+    } else {
+      setSelectedOption(option);
+      onChange == null ? void 0 : onChange(option.value);
+      setIsOpen(false);
+      onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+    }
+  };
+  const toggleDropdown = () => {
+    if (!disabled) {
+      const newIsOpen = !isOpen;
+      setIsOpen(newIsOpen);
+      onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(newIsOpen);
+    }
+  };
+  const baseClassName = `
+    w-full ${SIZE_SELECTOR_CONFIG[size].padding} ${SIZE_SELECTOR_CONFIG[size].height} ${SIZE_SELECTOR_CONFIG[size].fontSize}
+    backdrop-blur-md border rounded-2xl
+    transition-all duration-300 shadow-sm cursor-pointer
+    flex items-center justify-between
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getSelectorStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: error ? "var(--lm-error-300)" : "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.3"
+    };
+  };
+  const getDisabledStyles = () => disabled ? {
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-disabled)",
+    cursor: "not-allowed",
+    opacity: 0.6
+  } : {};
+  const getIconStyles = () => error ? { color: "var(--lm-error-400)" } : { color: "var(--lm-text-secondary)" };
+  const getDropdownStyles = () => ({
+    backgroundColor: "var(--lm-bg-elevated)",
+    borderColor: "var(--lm-border-default)",
+    boxShadow: "var(--lm-shadow-lg)"
+  });
+  const isOptionSelected = (optionValue) => {
+    if (multiple) {
+      return Array.isArray(value) && value.includes(optionValue);
+    }
+    return (selectedOption == null ? void 0 : selectedOption.value) === optionValue;
+  };
+  const getOptionStyles = (option) => {
+    const baseStyles = {
+      color: option.disabled ? "var(--lm-text-disabled)" : "var(--lm-text-primary)",
+      backgroundColor: option.disabled ? "var(--lm-bg-paper)" : "transparent"
+    };
+    if (isOptionSelected(option.value)) {
+      return {
+        ...baseStyles,
+        backgroundColor: "var(--lm-primary-50)",
+        color: "var(--lm-primary-700)"
+      };
+    }
+    return baseStyles;
+  };
+  const getHoverOptionStyles = (option) => {
+    if (option.disabled) return {};
+    if (isOptionSelected(option.value)) {
+      return { backgroundColor: "var(--lm-primary-100)" };
+    }
+    return { backgroundColor: "var(--lm-bg-paper)" };
+  };
+  const getDisplayText = () => {
+    if (multiple) {
+      if (selectedOptions.length === 0) return placeholder;
+      if (selectedOptions.length === 1) return selectedOptions[0].label;
+      return `${selectedOptions.length} selected`;
+    }
+    return selectedOption ? selectedOption.label : placeholder;
+  };
+  const ChevronDown = () => /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: `w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`,
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24",
+      style: getIconStyles(),
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+    }
+  );
+  const CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        name,
+        value: multiple ? Array.isArray(value) ? value.map(String) : [] : value !== void 0 && value !== null && !Array.isArray(value) ? String(value) : "",
+        onChange: () => {
+        },
+        className: "sr-only",
+        disabled,
+        tabIndex: -1,
+        multiple,
+        children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: baseClassName,
+        onClick: toggleDropdown,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        style: {
+          ...getSelectorStyles(),
+          ...getDisabledStyles()
+        },
+        onMouseEnter: (e) => {
+          if (!disabled && !error) {
+            e.currentTarget.style.borderColor = "var(--lm-border-strong)";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (!disabled && !error) {
+            e.currentTarget.style.borderColor = "var(--lm-border-default)";
+          }
+        },
+        onFocus: (e) => {
+          if (!disabled) {
+            e.currentTarget.style.borderColor = error ? "var(--lm-error-400)" : "var(--lm-primary-400)";
+          }
+        },
+        onBlur: (e) => {
+          if (!disabled) {
+            e.currentTarget.style.borderColor = error ? "var(--lm-error-300)" : "var(--lm-border-default)";
+          }
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                color: multiple && selectedOptions.length > 0 || selectedOption ? "var(--lm-text-primary)" : "var(--lm-text-secondary)"
+              },
+              children: getDisplayText()
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `absolute left-0 right-0 z-50 backdrop-blur-md border rounded-xl overflow-y-auto ${SIZE_DROPDOWN_CONFIG[size].maxHeight}`,
+        style: {
+          ...getDropdownStyles(),
+          top: "calc(100% + 4px)"
+        },
+        children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `
+                ${SIZE_DROPDOWN_CONFIG[size].optionPadding} ${SIZE_DROPDOWN_CONFIG[size].optionTextSize} font-medium
+                cursor-pointer transition-all duration-150
+                ${option.disabled ? "cursor-not-allowed" : ""}
+                ${index === 0 ? "rounded-t-xl" : ""}
+                ${index === options.length - 1 ? "rounded-b-xl" : ""}
+                ${index > 0 ? "border-t" : ""}
+              `,
+            style: {
+              ...getOptionStyles(option),
+              borderTopColor: index > 0 ? "var(--lm-border-light)" : "transparent"
+            },
+            onMouseEnter: (e) => {
+              if (!option.disabled) {
+                Object.assign(e.currentTarget.style, getHoverOptionStyles(option));
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!option.disabled) {
+                Object.assign(e.currentTarget.style, getOptionStyles(option));
+              }
+            },
+            onClick: () => handleSelect(option),
+            role: "option",
+            "aria-selected": isOptionSelected(option.value),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              multiple && /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: isOptionSelected(option.value),
+                  onChange: () => {
+                  },
+                  className: "mr-2 cursor-pointer",
+                  style: { accentColor: "var(--lm-primary-500)" },
+                  onClick: (e) => e.stopPropagation()
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: option.label }),
+              !multiple && isOptionSelected(option.value) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 flex-shrink-0", style: { color: "var(--lm-primary-600)" }, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
+            ] })
+          },
+          option.value
+        ))
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: "text-xs flex items-center gap-1 mt-2",
+        style: { color: "var(--lm-error-500)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+              clipRule: "evenodd"
+            }
+          ) }),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+const LMField = ({
+  label,
+  required = false,
+  errorMessage,
+  help,
+  children,
+  className = ""
+}) => {
+  let controlId;
+  const firstChild = Array.isArray(children) ? children.find(Boolean) : children;
+  if (React.isValidElement(firstChild) && typeof firstChild.props.id === "string") {
+    controlId = firstChild.props.id;
+  }
+  const containerClass = `space-y-2 ${className}`.trim().replace(/\s+/g, " ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        htmlFor: controlId,
+        className: "block text-xs font-semibold tracking-wide",
+        style: { color: "var(--lm-text-primary)" },
+        "aria-required": required || void 0,
+        children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", style: { color: "var(--lm-error-500)" }, children: "*" })
+        ]
+      }
+    ),
+    help && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", style: { color: "var(--lm-text-secondary)" }, children: help }),
+    children,
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: "text-xs flex items-center gap-1",
+        style: { color: "var(--lm-error-500)" },
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "w-3 h-3",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+const CaretUpIcon = ({ active }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "w-2.5 h-2.5",
+    viewBox: "0 0 10 6",
+    fill: "none",
+    style: { color: active ? "var(--lm-primary-500)" : "var(--lm-gray-400)" },
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 0L10 6H0L5 0Z", fill: "currentColor" })
+  }
+);
+const CaretDownIcon = ({ active }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "w-2.5 h-2.5",
+    viewBox: "0 0 10 6",
+    fill: "none",
+    style: { color: active ? "var(--lm-primary-500)" : "var(--lm-gray-400)" },
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 6L0 0H10L5 6Z", fill: "currentColor" })
+  }
+);
+const ChevronLeftIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) });
+const ChevronRightIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+const SpinnerIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "circle",
+    {
+      className: "opacity-25",
+      cx: "12",
+      cy: "12",
+      r: "10",
+      stroke: "currentColor",
+      strokeWidth: "4"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      className: "opacity-75",
+      fill: "currentColor",
+      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    }
+  )
+] });
+const LMTable = ({
+  dataSource,
+  columns,
+  rowKey = "id",
+  pagination,
+  loadMore,
+  loading = false,
+  emptyText = "No data",
+  size = "md",
+  bordered = false,
+  striped = false,
+  selectable = false,
+  selectedRowKeys = [],
+  onSelectionChange,
+  onRowClick,
+  onSortChange,
+  className = "",
+  fullHeight = false,
+  variant = "default"
+}) => {
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(10);
+  const [sortField, setSortField] = React.useState("");
+  const [sortOrder, setSortOrder] = React.useState("ascend");
+  const containerRef = React.useRef(null);
+  const getRowKey = React.useCallback(
+    (record, index) => {
+      if (typeof rowKey === "function") {
+        return rowKey(record, index);
+      }
+      const key = record[rowKey];
+      return (typeof key === "string" ? key : String(key)) || index.toString();
+    },
+    [rowKey]
+  );
+  const getValueByDataIndex = React.useCallback((record, dataIndex) => {
+    const parts = String(dataIndex).split(".");
+    let current = record;
+    for (const p of parts) {
+      if (current == null || typeof current !== "object" || !(p in current)) {
+        return "";
+      }
+      current = current[p];
+    }
+    return current;
+  }, []);
+  const handleSort = React.useCallback(
+    (column) => {
+      if (!column.sorter) return;
+      let newSortOrder = "ascend";
+      if (sortField === column.dataIndex) {
+        newSortOrder = sortOrder === "ascend" ? "descend" : "ascend";
+      }
+      setSortField(column.dataIndex);
+      setSortOrder(newSortOrder);
+      onSortChange == null ? void 0 : onSortChange(column.dataIndex, newSortOrder);
+    },
+    [sortField, sortOrder, onSortChange]
+  );
+  const handlePageChange = React.useCallback(
+    (page) => {
+      var _a;
+      setCurrentPage(page);
+      (_a = pagination == null ? void 0 : pagination.onChange) == null ? void 0 : _a.call(pagination, page, pageSize);
+    },
+    [pagination, pageSize]
+  );
+  const handlePageSizeChange = React.useCallback(
+    (newPageSize) => {
+      var _a;
+      setPageSize(newPageSize);
+      setCurrentPage(1);
+      (_a = pagination == null ? void 0 : pagination.onChange) == null ? void 0 : _a.call(pagination, 1, newPageSize);
+    },
+    [pagination]
+  );
+  const handleRowSelect = React.useCallback(
+    (record, checked) => {
+      const key = getRowKey(record, dataSource.indexOf(record));
+      let newSelectedRowKeys;
+      if (checked) {
+        newSelectedRowKeys = [...selectedRowKeys, key];
+      } else {
+        newSelectedRowKeys = selectedRowKeys.filter((k) => k !== key);
+      }
+      const newSelectedRows = dataSource.filter(
+        (item) => newSelectedRowKeys.includes(getRowKey(item, dataSource.indexOf(item)))
+      );
+      onSelectionChange == null ? void 0 : onSelectionChange(newSelectedRowKeys, newSelectedRows);
+    },
+    [selectedRowKeys, dataSource, getRowKey, onSelectionChange]
+  );
+  const handleSelectAll = React.useCallback(
+    (checked) => {
+      if (checked) {
+        const allKeys = dataSource.map((record, index) => getRowKey(record, index));
+        onSelectionChange == null ? void 0 : onSelectionChange(allKeys, dataSource);
+      } else {
+        onSelectionChange == null ? void 0 : onSelectionChange([], []);
+      }
+    },
+    [dataSource, getRowKey, onSelectionChange]
+  );
+  const handleScroll = React.useCallback(() => {
+    if (!(loadMore == null ? void 0 : loadMore.enabled) || loadMore.loading || !loadMore.hasMore) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const threshold = loadMore.threshold || 100;
+    if (scrollTop + clientHeight >= scrollHeight - threshold) {
+      loadMore.onLoadMore();
+    }
+  }, [loadMore]);
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !(loadMore == null ? void 0 : loadMore.enabled)) return;
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [handleScroll, loadMore == null ? void 0 : loadMore.enabled, loadMore == null ? void 0 : loadMore.loading, loadMore == null ? void 0 : loadMore.hasMore]);
+  React.useEffect(() => {
+    if ((pagination == null ? void 0 : pagination.current) !== void 0) {
+      setCurrentPage(pagination.current);
+    }
+    if ((pagination == null ? void 0 : pagination.pageSize) !== void 0) {
+      setPageSize(pagination.pageSize);
+    }
+  }, [pagination]);
+  const paginationUiClasses = {
+    xs: {
+      container: "px-3 py-2",
+      text: "text-xs",
+      control: "px-2 py-1 text-xs",
+      gap: "gap-1",
+      select: "px-2 py-1 text-xs",
+      input: "px-2 py-1 text-xs w-14"
+    },
+    sm: {
+      container: "px-3 py-2",
+      text: "text-sm",
+      control: "px-2 py-1 text-sm",
+      gap: "gap-2",
+      select: "px-2 py-1 text-sm",
+      input: "px-2 py-1 text-sm w-16"
+    },
+    md: {
+      container: "px-4 py-3",
+      text: "text-sm",
+      control: "px-3 py-1 text-sm",
+      gap: "gap-2",
+      select: "px-2 py-1 text-sm",
+      input: "px-2 py-1 text-sm w-16"
+    },
+    lg: {
+      container: "px-5 py-3.5",
+      text: "text-base",
+      control: "px-3.5 py-1.5 text-base",
+      gap: "gap-3",
+      select: "px-3 py-1.5 text-base",
+      input: "px-3 py-1.5 text-base w-20"
+    },
+    xl: {
+      container: "px-6 py-4",
+      text: "text-lg",
+      control: "px-4 py-2 text-lg",
+      gap: "gap-3",
+      select: "px-4 py-2 text-lg",
+      input: "px-4 py-2 text-lg w-24"
+    },
+    "2xl": {
+      container: "px-8 py-5",
+      text: "text-xl",
+      control: "px-5 py-2.5 text-xl",
+      gap: "gap-4",
+      select: "px-5 py-2.5 text-xl",
+      input: "px-5 py-2.5 text-xl w-28"
+    }
+  };
+  const totalPages = pagination && pagination.total && pageSize ? Math.max(1, Math.ceil(pagination.total / pageSize)) : 1;
+  const getTableStyles = () => ({
+    backgroundColor: variant === "minimal" ? "transparent" : variant === "soft" ? "var(--lm-bg-paper)" : "var(--lm-bg-elevated)",
+    borderColor: variant === "outline" ? "var(--lm-border-strong)" : bordered ? "var(--lm-border-default)" : "transparent"
+  });
+  const getHeaderStyles = () => ({
+    backgroundColor: variant === "minimal" ? "transparent" : "var(--lm-bg-elevated)",
+    color: "var(--lm-text-primary)",
+    borderColor: variant === "outline" ? "var(--lm-border-strong)" : "var(--lm-border-light)"
+  });
+  const getCellStyles = (isHeader = false) => ({
+    backgroundColor: isHeader ? variant === "minimal" ? "transparent" : "var(--lm-bg-paper)" : variant === "minimal" ? "transparent" : variant === "soft" ? "var(--lm-bg-paper)" : "var(--lm-bg-elevated)",
+    color: "var(--lm-text-primary)",
+    borderColor: variant === "outline" ? "var(--lm-border-strong)" : variant === "minimal" ? "transparent" : "var(--lm-border-light)"
+  });
+  const getRowStyles = (index, isSelected = false) => {
+    const baseStyles = {
+      backgroundColor: isSelected ? "var(--lm-primary-50)" : (striped || variant === "zebra") && index % 2 === 1 ? "var(--lm-bg-paper)" : variant === "minimal" ? "transparent" : variant === "soft" ? "var(--lm-bg-paper)" : "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)"
+    };
+    if (isSelected) {
+      return {
+        ...baseStyles,
+        borderColor: "var(--lm-primary-200)"
+      };
+    }
+    return baseStyles;
+  };
+  const getPaginationStyles = () => ({
+    backgroundColor: variant === "minimal" ? "transparent" : variant === "soft" ? "var(--lm-bg-paper)" : "var(--lm-bg-elevated)",
+    color: "var(--lm-text-primary)",
+    borderColor: variant === "outline" ? "var(--lm-border-strong)" : "var(--lm-border-default)",
+    boxShadow: variant === "elevated" ? "var(--lm-shadow-md)" : void 0
+  });
+  const getButtonStyles = (disabled = false, active = false) => {
+    if (disabled) {
+      return {
+        backgroundColor: "var(--lm-bg-paper)",
+        color: "var(--lm-text-disabled)",
+        borderColor: "var(--lm-border-light)",
+        cursor: "not-allowed",
+        opacity: 0.6
+      };
+    }
+    if (active) {
+      return {
+        backgroundColor: "var(--lm-primary-500)",
+        color: "white",
+        borderColor: "var(--lm-primary-500)"
+      };
+    }
+    return {
+      backgroundColor: "var(--lm-bg-paper)",
+      color: "var(--lm-text-primary)",
+      borderColor: "var(--lm-border-default)"
+    };
+  };
+  const getLoadingStyles = () => ({
+    color: "var(--lm-text-secondary)"
+  });
+  const getEmptyStyles = () => ({
+    color: "var(--lm-text-secondary)"
+  });
+  const tableClassName = `w-full ${SIZE_TEXT_CLASSES[size]} border-collapse ${className}`.trim().replace(/\s+/g, " ");
+  const isAllSelected = dataSource.length > 0 && selectedRowKeys.length === dataSource.length;
+  const isIndeterminate = selectedRowKeys.length > 0 && selectedRowKeys.length < dataSource.length;
+  const rootClassName = `space-y-4 ${fullHeight ? "h-full flex flex-col min-h-0" : ""}`.trim().replace(/\s+/g, " ");
+  const tableContainerClassName = `${fullHeight ? "flex-1 min-h-0 overflow-auto" : `overflow-auto ${(loadMore == null ? void 0 : loadMore.enabled) ? "max-h-96" : ""}`}`.trim().replace(/\s+/g, " ");
+  const wrapperVariantClasses = (() => {
+    switch (variant) {
+      case "elevated":
+        return "rounded-2xl border shadow-lg";
+      case "outline":
+        return "rounded-xl border";
+      case "soft":
+        return "rounded-xl border";
+      case "minimal":
+        return "rounded-xl";
+      case "zebra":
+        return "rounded-xl border";
+      default:
+        return "";
+    }
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: `${tableContainerClassName} ${wrapperVariantClasses}`,
+        style: { borderColor: "var(--lm-border-default)" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: tableClassName, style: getTableStyles(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-20", style: getHeaderStyles(), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            selectable && /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                className: `${SIZE_TABLE_CONFIG[size].cellPadding} py-3 ${SIZE_TEXT_CLASSES[size]} text-left ${bordered ? "border-r" : ""} font-semibold`,
+                style: getCellStyles(true),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: isAllSelected,
+                    ref: (input) => {
+                      if (input) input.indeterminate = isIndeterminate;
+                    },
+                    onChange: (e) => handleSelectAll(e.target.checked),
+                    className: "w-4 h-4",
+                    style: { accentColor: "var(--lm-primary-500)" }
+                  }
+                )
+              }
+            ),
+            columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                className: `${SIZE_TABLE_CONFIG[size].cellPadding} py-3 text-left ${bordered ? "border-r" : ""} ${column.sorter ? "cursor-pointer hover:bg-opacity-60" : ""} font-semibold`,
+                style: {
+                  ...getCellStyles(true),
+                  width: column.width,
+                  textAlign: column.align || "left",
+                  fontSize: size === "xs" ? "0.8125rem" : size === "sm" ? "0.875rem" : "0.9375rem"
+                },
+                onClick: () => handleSort(column),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: column.title }),
+                  column.sorter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col -space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CaretUpIcon,
+                      {
+                        active: sortField === column.dataIndex && sortOrder === "ascend"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CaretDownIcon,
+                      {
+                        active: sortField === column.dataIndex && sortOrder === "descend"
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              column.dataIndex
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              colSpan: columns.length + (selectable ? 1 : 0),
+              className: `px-4 py-8 text-center ${SIZE_TEXT_CLASSES[size]}`,
+              style: getLoadingStyles(),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, {}),
+                "Loading..."
+              ] })
+            }
+          ) }) : dataSource.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              colSpan: columns.length + (selectable ? 1 : 0),
+              className: `px-4 py-8 text-center ${SIZE_TEXT_CLASSES[size]}`,
+              style: getEmptyStyles(),
+              children: emptyText
+            }
+          ) }) : dataSource.map((record, index) => {
+            const key = getRowKey(record, index);
+            const isSelected = selectedRowKeys.includes(key);
+            const isLastRow = index === dataSource.length - 1;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "tr",
+              {
+                className: `${onRowClick ? "cursor-pointer hover:bg-opacity-60" : ""} transition-colors border-t ${isLastRow ? "border-b" : ""}`,
+                style: {
+                  ...getRowStyles(index, isSelected),
+                  borderColor: "var(--lm-border-light)"
+                },
+                onClick: () => onRowClick == null ? void 0 : onRowClick(record, index),
+                children: [
+                  selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                    "td",
+                    {
+                      className: `${SIZE_TABLE_CONFIG[size].cellPadding} ${SIZE_TEXT_CLASSES[size]} ${bordered ? "border-r" : ""}`,
+                      style: getCellStyles(),
+                      onClick: (e) => e.stopPropagation(),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: isSelected,
+                          onChange: (e) => handleRowSelect(record, e.target.checked),
+                          className: "w-4 h-4",
+                          style: { accentColor: "var(--lm-primary-500)" }
+                        }
+                      )
+                    }
+                  ),
+                  columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "td",
+                    {
+                      className: `${SIZE_TABLE_CONFIG[size].cellPadding} ${SIZE_TEXT_CLASSES[size]} ${bordered ? "border-r" : ""}`,
+                      style: {
+                        ...getCellStyles(),
+                        textAlign: column.align || "left"
+                      },
+                      children: column.render ? column.render(
+                        getValueByDataIndex(record, column.dataIndex),
+                        record,
+                        index
+                      ) : String(getValueByDataIndex(record, column.dataIndex) ?? "")
+                    },
+                    column.dataIndex
+                  ))
+                ]
+              },
+              key
+            );
+          }) })
+        ] })
+      }
+    ),
+    (pagination == null ? void 0 : pagination.showPagination) && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `flex items-center justify-between ${paginationUiClasses[size].container} rounded-2xl border`,
+        style: getPaginationStyles(),
+        children: (() => {
+          var _a;
+          const maxButtons = 5;
+          const half = Math.floor(maxButtons / 2);
+          let start = Math.max(1, currentPage - half);
+          const end = Math.min(totalPages, start + maxButtons - 1);
+          if (end - start + 1 < maxButtons) {
+            start = Math.max(1, end - maxButtons + 1);
+          }
+          const pageNumbers = Array.from({ length: end - start + 1 }, (_, i) => start + i);
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+              pagination.showTotal && /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: paginationUiClasses[size].text,
+                  style: { color: "var(--lm-text-secondary)" },
+                  children: [
+                    "Total ",
+                    pagination.total,
+                    " items / ",
+                    totalPages,
+                    " pages"
+                  ]
+                }
+              ),
+              pagination.showSizeChanger && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: paginationUiClasses[size].text,
+                    style: { color: "var(--lm-text-secondary)" },
+                    children: "Show:"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "select",
+                  {
+                    value: pageSize,
+                    onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+                    className: `${paginationUiClasses[size].select} border rounded-lg focus:ring-2 focus:ring-primary-400 focus:outline-none`,
+                    style: {
+                      backgroundColor: "var(--lm-bg-paper)",
+                      color: "var(--lm-text-primary)",
+                      borderColor: "var(--lm-border-default)"
+                    },
+                    children: (_a = pagination.pageSizeOptions) == null ? void 0 : _a.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: s, children: [
+                      s,
+                      " / page"
+                    ] }, s))
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${paginationUiClasses[size].gap}`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => handlePageChange(currentPage - 1),
+                  disabled: currentPage <= 1,
+                  className: `${paginationUiClasses[size].control} border rounded-lg transition-colors`,
+                  style: getButtonStyles(currentPage <= 1),
+                  "aria-label": "Previous page",
+                  title: "Previous page",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
+                }
+              ),
+              pageNumbers.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => handlePageChange(page),
+                  className: `${paginationUiClasses[size].control} border rounded-lg transition-colors ${currentPage === page ? "font-medium" : ""}`,
+                  style: getButtonStyles(false, currentPage === page),
+                  children: page
+                },
+                page
+              )),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => handlePageChange(currentPage + 1),
+                  disabled: currentPage >= totalPages,
+                  className: `${paginationUiClasses[size].control} border rounded-lg transition-colors`,
+                  style: getButtonStyles(currentPage >= totalPages),
+                  "aria-label": "Next page",
+                  title: "Next page",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
+                }
+              ),
+              pagination.showQuickJumper && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${paginationUiClasses[size].gap} ml-4`, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: paginationUiClasses[size].text,
+                    style: { color: "var(--lm-text-secondary)" },
+                    children: "Go to:"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "number",
+                    min: 1,
+                    max: totalPages,
+                    className: `${paginationUiClasses[size].input} border rounded-lg focus:ring-2 focus:ring-primary-400 focus:outline-none`,
+                    style: {
+                      backgroundColor: "var(--lm-bg-paper)",
+                      color: "var(--lm-text-primary)",
+                      borderColor: "var(--lm-border-default)"
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") {
+                        const page = Number(e.currentTarget.value);
+                        if (page >= 1 && page <= totalPages) {
+                          handlePageChange(page);
+                        }
+                      }
+                    }
+                  }
+                )
+              ] })
+            ] })
+          ] });
+        })()
+      }
+    ),
+    (loadMore == null ? void 0 : loadMore.enabled) && loadMore.hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: loadMore.onLoadMore,
+        disabled: loadMore.loading,
+        className: "px-6 py-2 text-sm border rounded-2xl transition-colors",
+        style: getButtonStyles(loadMore.loading),
+        children: loadMore.loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, {}),
+          "Loading..."
+        ] }) : "Load more"
+      }
+    ) })
+  ] });
+};
+const LMTable_default = React.memo(LMTable);
+const ICONS = {
+  success: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M16.7 9.3a1 1 0 0 0-1.4-1.4L11 12.2 8.7 9.9a1 1 0 1 0-1.4 1.4l3 3a1 1 0 0 0 1.4 0l5-5Z",
+        fill: "currentColor"
+      }
+    )
+  ] }),
+  error: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M15.5 8.5l-7 7M8.5 8.5l7 7",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] }),
+  warning: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12.9 4.5c-.4-.7-1.4-.7-1.8 0L3.5 18a1 1 0 0 0 .9 1.5h15.2a1 1 0 0 0 .9-1.5l-7.6-13.5Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "16.5", r: "1", fill: "currentColor" })
+  ] }),
+  info: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 10.5v5M12 7.5h.01",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] })
+};
+const useTone = (type) => {
+  switch (type) {
+    case "success":
+      return {
+        accent: "var(--lm-success-500)",
+        background: "color-mix(in srgb, var(--lm-success-100) 60%, transparent)",
+        text: "var(--lm-success-700)",
+        title: "var(--lm-success-800)"
+      };
+    case "error":
+      return {
+        accent: "var(--lm-error-500)",
+        background: "color-mix(in srgb, var(--lm-error-100) 60%, transparent)",
+        text: "var(--lm-error-700)",
+        title: "var(--lm-error-800)"
+      };
+    case "warning":
+      return {
+        accent: "var(--lm-warning-500)",
+        background: "color-mix(in srgb, var(--lm-warning-100) 60%, transparent)",
+        text: "var(--lm-warning-700)",
+        title: "var(--lm-warning-800)"
+      };
+    case "info":
+    default:
+      return {
+        accent: "var(--lm-primary-500)",
+        background: "color-mix(in srgb, var(--lm-primary-100) 60%, transparent)",
+        text: "var(--lm-primary-700)",
+        title: "var(--lm-primary-800)"
+      };
+  }
+};
+const LMMessage = ({ id, type, title, content, duration = 2e3, onClose }) => {
+  const tone = useTone(type);
+  React.useEffect(() => {
+    if (duration <= 0) return;
+    const timer = setTimeout(() => onClose(id), duration);
+    return () => clearTimeout(timer);
+  }, [id, duration, onClose]);
+  const icon = React.useMemo(() => ICONS[type], [type]);
+  const ariaRole = "status";
+  const ariaLabel = React.useMemo(() => {
+    switch (type) {
+      case "success":
+        return "Success message";
+      case "error":
+        return "Error message";
+      case "warning":
+        return "Warning message";
+      default:
+        return "Information message";
+    }
+  }, [type]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-sm mx-auto will-change-transform", role: ariaRole, "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "rounded-3xl shadow-lg p-5 mb-3 backdrop-blur-md border transition-all duration-300 ease-out",
+      style: {
+        backgroundColor: tone.background,
+        borderColor: "var(--lm-border-light)",
+        boxShadow: "var(--lm-shadow-lg)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "mt-0.5 flex h-10 w-10 items-center justify-center rounded-2xl",
+            style: {
+              color: tone.accent,
+              backgroundColor: "color-mix(in srgb, currentColor 12%, transparent)"
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold mb-2 truncate", style: { color: tone.title }, children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed break-words", style: { color: tone.text }, children: content })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onClose(id),
+            "aria-label": "Close message",
+            className: "flex-shrink-0 p-2 rounded-xl transition-all duration-200 hover:bg-black/5 active:bg-black/10",
+            style: { color: tone.accent },
+            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M6 6l12 12M18 6L6 18",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ] })
+    }
+  ) });
+};
+const LMMessageContainer = ({
+  messages,
+  onClose,
+  position = "top-right"
+}) => {
+  if (messages.length === 0) return null;
+  const positionClasses = {
+    "top-right": "top-20 right-6",
+    "top-left": "top-20 left-6",
+    "top-center": "top-20 left-1/2 -translate-x-1/2",
+    "bottom-right": "bottom-6 right-6",
+    "bottom-left": "bottom-6 left-6",
+    "bottom-center": "bottom-6 left-1/2 -translate-x-1/2"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `fixed z-50 space-y-3 ${positionClasses[position]}`, children: messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(LMMessage, { ...message, onClose }, message.id)) });
+};
+let messageIdCounter = 0;
+const useMessage = () => {
+  const [messages, setMessages] = React.useState([]);
+  const addMessage = React.useCallback((message) => {
+    const id = `lm-message-${++messageIdCounter}`;
+    setMessages((prev) => [...prev, { ...message, id }]);
+    return id;
+  }, []);
+  const removeMessage = React.useCallback((id) => {
+    setMessages((prev) => prev.filter((m) => m.id !== id));
+  }, []);
+  const success = React.useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "success", content, title, duration });
+    },
+    [addMessage]
+  );
+  const error = React.useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "error", content, title, duration });
+    },
+    [addMessage]
+  );
+  const warning = React.useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "warning", content, title, duration });
+    },
+    [addMessage]
+  );
+  const info = React.useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "info", content, title, duration });
+    },
+    [addMessage]
+  );
+  const clearAll = React.useCallback(() => {
+    setMessages([]);
+  }, []);
+  return {
+    messages,
+    addMessage,
+    removeMessage,
+    success,
+    error,
+    warning,
+    info,
+    clearAll
+  };
+};
+const QuestionIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "w-6 h-6", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 17h.01", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+const LMConfirm = ({
+  visible,
+  title = "Confirm",
+  content,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  confirmButtonStyle = "primary",
+  onConfirm,
+  onCancel,
+  closeOnOverlayClick = true
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [isAnimating, setIsAnimating] = React.useState(false);
+  React.useEffect(() => {
+    if (visible) {
+      setIsVisible(true);
+      requestAnimationFrame(() => {
+        setIsAnimating(true);
+      });
+    } else {
+      setIsAnimating(false);
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [visible]);
+  const getConfirmButtonStyles = () => {
+    switch (confirmButtonStyle) {
+      case "primary":
+        return {
+          backgroundColor: "var(--lm-primary-500)",
+          color: "var(--lm-text-inverse)"
+        };
+      case "danger":
+        return {
+          backgroundColor: "var(--lm-error-500)",
+          color: "var(--lm-text-inverse)"
+        };
+    }
+  };
+  const getConfirmButtonHoverStyles = () => {
+    switch (confirmButtonStyle) {
+      case "primary":
+        return {
+          backgroundColor: "var(--lm-primary-600)"
+        };
+      case "danger":
+        return {
+          backgroundColor: "var(--lm-error-600)"
+        };
+    }
+  };
+  const handleOverlayClick = () => {
+    if (closeOnOverlayClick) {
+      onCancel();
+    }
+  };
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center px-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `absolute inset-0 backdrop-blur-sm transition-opacity duration-200 ${isAnimating ? "opacity-100" : "opacity-0"}`,
+        style: {
+          backgroundColor: "rgba(0, 0, 0, 0.2)"
+        },
+        onClick: handleOverlayClick
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `relative backdrop-blur-xl rounded-3xl shadow-2xl border p-8 max-w-md w-full mx-auto transition-all duration-200 ${isAnimating ? "opacity-100 scale-100" : "opacity-0 scale-95"}`,
+        style: {
+          backgroundColor: "var(--lm-bg-elevated)",
+          borderColor: "var(--lm-border-default)",
+          boxShadow: "var(--lm-shadow-xl)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-4",
+                style: {
+                  backgroundColor: "var(--lm-gray-100)"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--lm-gray-600)" }, children: /* @__PURE__ */ jsxRuntime.jsx(QuestionIcon, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: "text-xl font-semibold mb-2",
+                style: {
+                  color: "var(--lm-text-primary)"
+                },
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "text-sm leading-relaxed",
+                style: {
+                  color: "var(--lm-text-secondary)"
+                },
+                children: content
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onCancel,
+                className: "flex-1 py-3 px-4 font-medium rounded-xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]",
+                style: {
+                  backgroundColor: "var(--lm-gray-100)",
+                  color: "var(--lm-text-primary)"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.backgroundColor = "var(--lm-gray-200)";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.backgroundColor = "var(--lm-gray-100)";
+                },
+                children: cancelText
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onConfirm,
+                className: "flex-1 py-3 px-4 font-medium rounded-xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]",
+                style: getConfirmButtonStyles(),
+                onMouseEnter: (e) => {
+                  const hoverStyles = getConfirmButtonHoverStyles();
+                  e.currentTarget.style.backgroundColor = (hoverStyles == null ? void 0 : hoverStyles.backgroundColor) || "";
+                },
+                onMouseLeave: (e) => {
+                  const normalStyles = getConfirmButtonStyles();
+                  e.currentTarget.style.backgroundColor = (normalStyles == null ? void 0 : normalStyles.backgroundColor) || "";
+                },
+                children: confirmText
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+const useConfirm = () => {
+  const [visible, setVisible] = React.useState(false);
+  const [config, setConfig] = React.useState(null);
+  const [resolveRef, setResolveRef] = React.useState(null);
+  const confirm = React.useCallback((options) => {
+    return new Promise((resolve) => {
+      setConfig(options);
+      setVisible(true);
+      setResolveRef(() => resolve);
+    });
+  }, []);
+  const handleConfirm = React.useCallback(() => {
+    setVisible(false);
+    resolveRef == null ? void 0 : resolveRef(true);
+    setResolveRef(null);
+  }, [resolveRef]);
+  const handleCancel = React.useCallback(() => {
+    setVisible(false);
+    resolveRef == null ? void 0 : resolveRef(false);
+    setResolveRef(null);
+  }, [resolveRef]);
+  const ConfirmDialog = React.useCallback(() => {
+    if (!config) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      LMConfirm,
+      {
+        visible,
+        ...config,
+        onConfirm: handleConfirm,
+        onCancel: handleCancel
+      }
+    );
+  }, [visible, config, handleConfirm, handleCancel]);
+  return {
+    visible,
+    config,
+    confirm,
+    ConfirmDialog
+  };
+};
+const ArrowUpIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 10V2M6 2l4 4M6 2L2 6" }) });
+const ArrowDownIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 2v8M6 10l4-4M6 10l-4-4" }) });
+const MinusIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2 6h8" }) });
+const LMStatCard = ({
+  title,
+  value,
+  description,
+  icon,
+  trend,
+  trendText,
+  variant = "default",
+  size = "md",
+  clickable = false,
+  onClick,
+  className = "",
+  prefix,
+  suffix,
+  bordered = true,
+  shadow = true,
+  compact = false
+}) => {
+  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER);
+  const iconSizeClasses = compact ? {
+    xs: "w-4 h-4",
+    sm: "w-5 h-5",
+    md: "w-6 h-6",
+    lg: "w-8 h-8",
+    xl: "w-10 h-10",
+    "2xl": "w-12 h-12"
+  } : {
+    xs: "w-5 h-5",
+    sm: "w-6 h-6",
+    md: "w-10 h-10",
+    lg: "w-12 h-12",
+    xl: "w-14 h-14",
+    "2xl": "w-16 h-16"
+  };
+  const titleTextClasses = compact ? {
+    xs: "text-[10px]",
+    sm: "text-[10px]",
+    md: "text-xs",
+    lg: "text-sm",
+    xl: "text-base",
+    "2xl": "text-lg"
+  } : {
+    xs: "text-xs",
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+    xl: "text-lg",
+    "2xl": "text-xl"
+  };
+  const metaTextClasses = compact ? {
+    xs: "text-[10px]",
+    sm: "text-[10px]",
+    md: "text-[10px]",
+    lg: "text-[10px]",
+    xl: "text-xs",
+    "2xl": "text-xs"
+  } : {
+    xs: "text-xs",
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-sm",
+    xl: "text-base",
+    "2xl": "text-lg"
+  };
+  const descriptionTextClasses = {
+    xs: "text-xs",
+    sm: "text-xs",
+    md: "text-xs",
+    lg: "text-xs",
+    xl: "text-xs",
+    "2xl": "text-xs"
+  };
+  const valueTextClasses = compact ? {
+    xs: "text-sm",
+    sm: "text-base",
+    md: "text-lg",
+    lg: "text-xl",
+    xl: "text-2xl",
+    "2xl": "text-3xl"
+  } : {
+    xs: "text-lg",
+    sm: "text-xl",
+    md: "text-3xl",
+    lg: "text-4xl",
+    xl: "text-5xl",
+    "2xl": "text-6xl"
+  };
+  const roundedClasses = "rounded-2xl";
+  const borderClasses = bordered ? "border" : "";
+  const shadowClasses = shadow ? "shadow-sm" : "";
+  const clickableClasses = clickable ? "cursor-pointer transition-transform hover:scale-105" : "";
+  const baseClassName = `
+    ${SIZE_PADDING_CLASSES[resolvedSize]} ${roundedClasses} ${borderClasses} ${shadowClasses} ${clickableClasses}
+    backdrop-blur-md transition-all duration-300
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getCardStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)"
+    };
+    switch (variant) {
+      case "primary":
+        return {
+          ...baseStyles,
+          backgroundColor: "var(--lm-primary-50)",
+          borderColor: "var(--lm-primary-200)"
+        };
+      case "success":
+        return {
+          ...baseStyles,
+          backgroundColor: "var(--lm-success-50)",
+          borderColor: "var(--lm-success-200)"
+        };
+      case "warning":
+        return {
+          ...baseStyles,
+          backgroundColor: "var(--lm-warning-50)",
+          borderColor: "var(--lm-warning-200)"
+        };
+      case "error":
+        return {
+          ...baseStyles,
+          backgroundColor: "var(--lm-error-50)",
+          borderColor: "var(--lm-error-200)"
+        };
+      case "info":
+        return {
+          ...baseStyles,
+          backgroundColor: "var(--lm-gray-50)",
+          borderColor: "var(--lm-gray-200)"
+        };
+      default:
+        return baseStyles;
+    }
+  };
+  const getHoverStyles = () => {
+    if (!clickable) return {};
+    switch (variant) {
+      case "primary":
+        return {
+          backgroundColor: "var(--lm-primary-100)",
+          borderColor: "var(--lm-primary-300)",
+          boxShadow: "var(--lm-shadow-md)"
+        };
+      case "success":
+        return {
+          backgroundColor: "var(--lm-success-100)",
+          borderColor: "var(--lm-success-300)",
+          boxShadow: "var(--lm-shadow-md)"
+        };
+      case "warning":
+        return {
+          backgroundColor: "var(--lm-warning-100)",
+          borderColor: "var(--lm-warning-300)",
+          boxShadow: "var(--lm-shadow-md)"
+        };
+      case "error":
+        return {
+          backgroundColor: "var(--lm-error-100)",
+          borderColor: "var(--lm-error-300)",
+          boxShadow: "var(--lm-shadow-md)"
+        };
+      case "info":
+        return {
+          backgroundColor: "var(--lm-gray-100)",
+          borderColor: "var(--lm-gray-300)",
+          boxShadow: "var(--lm-shadow-md)"
+        };
+      default:
+        return {
+          backgroundColor: "var(--lm-bg-paper)",
+          borderColor: "var(--lm-border-strong)",
+          boxShadow: "var(--lm-shadow-md)"
+        };
+    }
+  };
+  const getIconStyles = () => {
+    switch (variant) {
+      case "primary":
+        return {
+          color: "var(--lm-primary-600)",
+          backgroundColor: "var(--lm-primary-100)"
+        };
+      case "success":
+        return {
+          color: "var(--lm-success-600)",
+          backgroundColor: "var(--lm-success-100)"
+        };
+      case "warning":
+        return {
+          color: "var(--lm-warning-600)",
+          backgroundColor: "var(--lm-warning-100)"
+        };
+      case "error":
+        return {
+          color: "var(--lm-error-600)",
+          backgroundColor: "var(--lm-error-100)"
+        };
+      case "info":
+        return {
+          color: "var(--lm-gray-600)",
+          backgroundColor: "var(--lm-gray-100)"
+        };
+      default:
+        return {
+          color: "var(--lm-primary-600)",
+          backgroundColor: "var(--lm-bg-paper)"
+        };
+    }
+  };
+  const getValueStyles = () => {
+    switch (variant) {
+      case "primary":
+        return { color: "var(--lm-primary-700)" };
+      case "success":
+        return { color: "var(--lm-success-700)" };
+      case "warning":
+        return { color: "var(--lm-warning-700)" };
+      case "error":
+        return { color: "var(--lm-error-700)" };
+      case "info":
+        return { color: "var(--lm-gray-700)" };
+      default:
+        return { color: "var(--lm-text-primary)" };
+    }
+  };
+  const getTrendStyles = () => {
+    if (trend == null) return {};
+    if (trend > 0) return { color: "var(--lm-success-600)" };
+    if (trend < 0) return { color: "var(--lm-error-600)" };
+    return { color: "var(--lm-text-secondary)" };
+  };
+  const getTrendIcon = () => {
+    if (trend == null) return null;
+    if (trend > 0) return /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, {});
+    if (trend < 0) return /* @__PURE__ */ jsxRuntime.jsx(ArrowDownIcon, {});
+    return /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {});
+  };
+  const handleKeyDown = (e) => {
+    if (!clickable) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick == null ? void 0 : onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: baseClassName,
+      style: getCardStyles(),
+      onClick: clickable ? onClick : void 0,
+      onKeyDown: handleKeyDown,
+      onMouseEnter: (e) => {
+        if (clickable) Object.assign(e.currentTarget.style, getHoverStyles());
+      },
+      onMouseLeave: (e) => {
+        if (clickable) Object.assign(e.currentTarget.style, getCardStyles());
+      },
+      role: clickable ? "button" : void 0,
+      tabIndex: clickable ? 0 : void 0,
+      "aria-label": clickable ? title : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2 min-w-0", children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `${iconSizeClasses[resolvedSize]} rounded-lg flex items-center justify-center flex-shrink-0`,
+              style: getIconStyles(),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: `${titleTextClasses[resolvedSize]} font-medium truncate`,
+              style: { color: "var(--lm-text-secondary)" },
+              title,
+              children: title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `flex items-baseline ${SIZE_GAP_CLASSES[resolvedSize]} min-w-0 overflow-hidden w-full`,
+            children: [
+              prefix && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `${metaTextClasses[resolvedSize]} flex-shrink-0`,
+                  style: { color: "var(--lm-text-secondary)" },
+                  children: prefix
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `font-bold ${valueTextClasses[resolvedSize]} overflow-hidden`,
+                  style: getValueStyles(),
+                  children: value
+                }
+              ),
+              suffix && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `${metaTextClasses[resolvedSize]} flex-shrink-0`,
+                  style: { color: "var(--lm-text-secondary)" },
+                  children: suffix
+                }
+              )
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: `${descriptionTextClasses[resolvedSize]} mt-1 truncate`,
+            style: { color: "var(--lm-text-secondary)" },
+            title: description,
+            children: description
+          }
+        ),
+        (trend != null || trendText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${SIZE_GAP_CLASSES[resolvedSize]} mt-2`, children: [
+          trend != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", style: getTrendStyles(), children: [
+            getTrendIcon(),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium", children: [
+              Math.abs(trend),
+              "%"
+            ] })
+          ] }),
+          trendText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--lm-text-secondary)" }, children: trendText })
+        ] })
+      ] }) })
+    }
+  );
+};
+function cn(...inputs) {
+  return inputs.flat().filter((x) => typeof x === "string" && x.length > 0).join(" ");
+}
+exports.COMPONENT_SIZE_ORDER = COMPONENT_SIZE_ORDER;
+exports.LMBadge = LMBadge;
+exports.LMButton = LMButton;
+exports.LMCheckbox = LMCheckbox;
+exports.LMConfirm = LMConfirm;
+exports.LMField = LMField;
+exports.LMInput = LMInput;
+exports.LMMessage = LMMessage;
+exports.LMMessageContainer = LMMessageContainer;
+exports.LMModal = LMModal_default;
+exports.LMNumberInput = LMNumberInput;
+exports.LMRadio = LMRadio;
+exports.LMSearchInput = LMSearchInput;
+exports.LMSelect = LMSelect;
+exports.LMStatCard = LMStatCard;
+exports.LMSwitch = LMSwitch;
+exports.LMTable = LMTable_default;
+exports.LMTextarea = LMTextarea;
+exports.LMTooltip = LMTooltip;
+exports.SIZE_BUTTON_CONFIG = SIZE_BUTTON_CONFIG;
+exports.SIZE_DISPLAY_CLASSES = SIZE_DISPLAY_CLASSES;
+exports.SIZE_GAP_CLASSES = SIZE_GAP_CLASSES;
+exports.SIZE_HEADING_CLASSES = SIZE_HEADING_CLASSES;
+exports.SIZE_ICON_CONFIG = SIZE_ICON_CONFIG;
+exports.SIZE_INPUT_CONFIG = SIZE_INPUT_CONFIG;
+exports.SIZE_MODAL_CONFIG = SIZE_MODAL_CONFIG;
+exports.SIZE_PADDING_CLASSES = SIZE_PADDING_CLASSES;
+exports.SIZE_SELECTOR_CONFIG = SIZE_SELECTOR_CONFIG;
+exports.SIZE_TABLE_CONFIG = SIZE_TABLE_CONFIG;
+exports.SIZE_TEXT_CLASSES = SIZE_TEXT_CLASSES;
+exports.SIZE_TOOLTIP_CONFIG = SIZE_TOOLTIP_CONFIG;
+exports.clampComponentSize = clampComponentSize;
+exports.cn = cn;
+exports.useConfirm = useConfirm;
+exports.useMessage = useMessage;
+//# sourceMappingURL=index.cjs.map