@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/LMStatCard-MXs9Z0qH.cjs

@@ -0,0 +1,347 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+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 = componentSizes.clampComponentSize(size, componentSizes.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 = `
+    ${componentSizes.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 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 ${componentSizes.SIZE_GAP_CLASSES[resolvedSize]} min-w-0 overflow-hidden w-full`,
+            children: [
+              prefix && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `${metaTextClasses[resolvedSize]} 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]} 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 ${componentSizes.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 })
+        ] })
+      ] }) })
+    }
+  );
+};
+exports.LMStatCard = LMStatCard;
+//# sourceMappingURL=LMStatCard-MXs9Z0qH.cjs.map

package/dist/LMStatCard-MXs9Z0qH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMStatCard-MXs9Z0qH.cjs","sources":["../src/components/DataDisplay/LMStatCard/LMStatCard.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  COMPONENT_SIZE_ORDER,\n  SIZE_GAP_CLASSES,\n  SIZE_PADDING_CLASSES,\n  clampComponentSize,\n} from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMStatCardProps {\n  /** Title */\n  title: string\n  /** Value */\n  value: string | number\n  /** Description text */\n  description?: string\n  /** Left icon */\n  icon?: React.ReactNode\n  /** Trend value (percentage, positive/negative indicates direction; 0 means flat) */\n  trend?: number\n  /** Trend description text */\n  trendText?: string\n  /** Visual variant */\n  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'\n  /** Size */\n  size?: ComponentSize\n  /** Clickable */\n  clickable?: boolean\n  /** Click event */\n  onClick?: () => void\n  /** Class name */\n  className?: string\n  /** Value prefix (e.g., $) */\n  prefix?: string\n  /** Value suffix (e.g., %, times) */\n  suffix?: string\n  /** Show border */\n  bordered?: boolean\n  /** Show shadow */\n  shadow?: boolean\n  /** Compact mode: uses smaller spacing and fonts when enabled */\n  compact?: boolean\n}\n\nconst ArrowUpIcon: React.FC = () => (\n  <svg className=\"w-3 h-3\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 10V2M6 2l4 4M6 2L2 6\" />\n  </svg>\n)\n\nconst ArrowDownIcon: React.FC = () => (\n  <svg className=\"w-3 h-3\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 2v8M6 10l4-4M6 10l-4-4\" />\n  </svg>\n)\n\nconst MinusIcon: React.FC = () => (\n  <svg className=\"w-3 h-3\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M2 6h8\" />\n  </svg>\n)\n\nconst LMStatCard: React.FC<LMStatCardProps> = ({\n  title,\n  value,\n  description,\n  icon,\n  trend,\n  trendText,\n  variant = 'default',\n  size = 'md',\n  clickable = false,\n  onClick,\n  className = '',\n  prefix,\n  suffix,\n  bordered = true,\n  shadow = true,\n  compact = false,\n}) => {\n  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n\n  const iconSizeClasses: Record<ComponentSize, string> = compact\n    ? {\n        xs: 'w-4 h-4',\n        sm: 'w-5 h-5',\n        md: 'w-6 h-6',\n        lg: 'w-8 h-8',\n        xl: 'w-10 h-10',\n        '2xl': 'w-12 h-12',\n      }\n    : {\n        xs: 'w-5 h-5',\n        sm: 'w-6 h-6',\n        md: 'w-10 h-10',\n        lg: 'w-12 h-12',\n        xl: 'w-14 h-14',\n        '2xl': 'w-16 h-16',\n      }\n\n  const titleTextClasses: Record<ComponentSize, string> = compact\n    ? {\n        xs: 'text-[10px]',\n        sm: 'text-[10px]',\n        md: 'text-xs',\n        lg: 'text-sm',\n        xl: 'text-base',\n        '2xl': 'text-lg',\n      }\n    : {\n        xs: 'text-xs',\n        sm: 'text-xs',\n        md: 'text-sm',\n        lg: 'text-base',\n        xl: 'text-lg',\n        '2xl': 'text-xl',\n      }\n\n  const metaTextClasses: Record<ComponentSize, string> = compact\n    ? {\n        xs: 'text-[10px]',\n        sm: 'text-[10px]',\n        md: 'text-[10px]',\n        lg: 'text-[10px]',\n        xl: 'text-xs',\n        '2xl': 'text-xs',\n      }\n    : {\n        xs: 'text-xs',\n        sm: 'text-xs',\n        md: 'text-sm',\n        lg: 'text-sm',\n        xl: 'text-base',\n        '2xl': 'text-lg',\n      }\n\n  const descriptionTextClasses: Record<ComponentSize, string> = {\n    xs: 'text-xs',\n    sm: 'text-xs',\n    md: 'text-xs',\n    lg: 'text-xs',\n    xl: 'text-xs',\n    '2xl': 'text-xs',\n  }\n\n  const valueTextClasses: Record<ComponentSize, string> = compact\n    ? {\n        xs: 'text-sm',\n        sm: 'text-base',\n        md: 'text-lg',\n        lg: 'text-xl',\n        xl: 'text-2xl',\n        '2xl': 'text-3xl',\n      }\n    : {\n        xs: 'text-lg',\n        sm: 'text-xl',\n        md: 'text-3xl',\n        lg: 'text-4xl',\n        xl: 'text-5xl',\n        '2xl': 'text-6xl',\n      }\n\n  const roundedClasses = 'rounded-2xl'\n  const borderClasses = bordered ? 'border' : ''\n  const shadowClasses = shadow ? 'shadow-sm' : ''\n  const clickableClasses = clickable ? 'cursor-pointer transition-transform hover:scale-105' : ''\n\n  const baseClassName = `\n    ${SIZE_PADDING_CLASSES[resolvedSize]} ${roundedClasses} ${borderClasses} ${shadowClasses} ${clickableClasses}\n    backdrop-blur-md transition-all duration-300\n    ${className}\n  `\n    .trim()\n    .replace(/\\s+/g, ' ')\n\n  const getCardStyles = () => {\n    const baseStyles = {\n      backgroundColor: 'var(--lm-bg-elevated)',\n      color: 'var(--lm-text-primary)',\n      borderColor: 'var(--lm-border-default)',\n      boxShadow: 'var(--lm-shadow-sm)',\n    } as React.CSSProperties\n\n    switch (variant) {\n      case 'primary':\n        return {\n          ...baseStyles,\n          backgroundColor: 'var(--lm-primary-50)',\n          borderColor: 'var(--lm-primary-200)',\n        }\n      case 'success':\n        return {\n          ...baseStyles,\n          backgroundColor: 'var(--lm-success-50)',\n          borderColor: 'var(--lm-success-200)',\n        }\n      case 'warning':\n        return {\n          ...baseStyles,\n          backgroundColor: 'var(--lm-warning-50)',\n          borderColor: 'var(--lm-warning-200)',\n        }\n      case 'error':\n        return {\n          ...baseStyles,\n          backgroundColor: 'var(--lm-error-50)',\n          borderColor: 'var(--lm-error-200)',\n        }\n      case 'info':\n        return {\n          ...baseStyles,\n          backgroundColor: 'var(--lm-gray-50)',\n          borderColor: 'var(--lm-gray-200)',\n        }\n      default:\n        return baseStyles\n    }\n  }\n\n  const getHoverStyles = () => {\n    if (!clickable) return {}\n    switch (variant) {\n      case 'primary':\n        return {\n          backgroundColor: 'var(--lm-primary-100)',\n          borderColor: 'var(--lm-primary-300)',\n          boxShadow: 'var(--lm-shadow-md)',\n        }\n      case 'success':\n        return {\n          backgroundColor: 'var(--lm-success-100)',\n          borderColor: 'var(--lm-success-300)',\n          boxShadow: 'var(--lm-shadow-md)',\n        }\n      case 'warning':\n        return {\n          backgroundColor: 'var(--lm-warning-100)',\n          borderColor: 'var(--lm-warning-300)',\n          boxShadow: 'var(--lm-shadow-md)',\n        }\n      case 'error':\n        return {\n          backgroundColor: 'var(--lm-error-100)',\n          borderColor: 'var(--lm-error-300)',\n          boxShadow: 'var(--lm-shadow-md)',\n        }\n      case 'info':\n        return {\n          backgroundColor: 'var(--lm-gray-100)',\n          borderColor: 'var(--lm-gray-300)',\n          boxShadow: 'var(--lm-shadow-md)',\n        }\n      default:\n        return {\n          backgroundColor: 'var(--lm-bg-paper)',\n          borderColor: 'var(--lm-border-strong)',\n          boxShadow: 'var(--lm-shadow-md)',\n        }\n    }\n  }\n\n  const getIconStyles = () => {\n    switch (variant) {\n      case 'primary':\n        return {\n          color: 'var(--lm-primary-600)',\n          backgroundColor: 'var(--lm-primary-100)',\n        }\n      case 'success':\n        return {\n          color: 'var(--lm-success-600)',\n          backgroundColor: 'var(--lm-success-100)',\n        }\n      case 'warning':\n        return {\n          color: 'var(--lm-warning-600)',\n          backgroundColor: 'var(--lm-warning-100)',\n        }\n      case 'error':\n        return {\n          color: 'var(--lm-error-600)',\n          backgroundColor: 'var(--lm-error-100)',\n        }\n      case 'info':\n        return {\n          color: 'var(--lm-gray-600)',\n          backgroundColor: 'var(--lm-gray-100)',\n        }\n      default:\n        return {\n          color: 'var(--lm-primary-600)',\n          backgroundColor: 'var(--lm-bg-paper)',\n        }\n    }\n  }\n\n  const getValueStyles = () => {\n    switch (variant) {\n      case 'primary':\n        return { color: 'var(--lm-primary-700)' }\n      case 'success':\n        return { color: 'var(--lm-success-700)' }\n      case 'warning':\n        return { color: 'var(--lm-warning-700)' }\n      case 'error':\n        return { color: 'var(--lm-error-700)' }\n      case 'info':\n        return { color: 'var(--lm-gray-700)' }\n      default:\n        return { color: 'var(--lm-text-primary)' }\n    }\n  }\n\n  const getTrendStyles = () => {\n    if (trend == null) return {}\n    if (trend > 0) return { color: 'var(--lm-success-600)' }\n    if (trend < 0) return { color: 'var(--lm-error-600)' }\n    return { color: 'var(--lm-text-secondary)' }\n  }\n\n  const getTrendIcon = () => {\n    if (trend == null) return null\n    if (trend > 0) return <ArrowUpIcon />\n    if (trend < 0) return <ArrowDownIcon />\n    return <MinusIcon />\n  }\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {\n    if (!clickable) return\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      onClick?.()\n    }\n  }\n\n  return (\n    <div\n      className={baseClassName}\n      style={getCardStyles()}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={handleKeyDown}\n      onMouseEnter={(e) => {\n        if (clickable) Object.assign(e.currentTarget.style, getHoverStyles())\n      }}\n      onMouseLeave={(e) => {\n        if (clickable) Object.assign(e.currentTarget.style, getCardStyles())\n      }}\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\n      aria-label={clickable ? title : undefined}\n    >\n      <div className=\"flex items-start justify-between overflow-hidden\">\n        <div className=\"flex-1 min-w-0\">\n          {/* Title and icon */}\n          <div className=\"flex items-center gap-2 mb-2 min-w-0\">\n            {icon && (\n              <div\n                className={`${iconSizeClasses[resolvedSize]} rounded-lg flex items-center justify-center shrink-0`}\n                style={getIconStyles()}\n              >\n                {icon}\n              </div>\n            )}\n            <h3\n              className={`${titleTextClasses[resolvedSize]} font-medium truncate`}\n              style={{ color: 'var(--lm-text-secondary)' }}\n              title={title}\n            >\n              {title}\n            </h3>\n          </div>\n\n          {/* Value area (prefix/suffix) */}\n          <div\n            className={`flex items-baseline ${SIZE_GAP_CLASSES[resolvedSize]} min-w-0 overflow-hidden w-full`}\n          >\n            {prefix && (\n              <span\n                className={`${metaTextClasses[resolvedSize]} shrink-0`}\n                style={{ color: 'var(--lm-text-secondary)' }}\n              >\n                {prefix}\n              </span>\n            )}\n            <span\n              className={`font-bold ${valueTextClasses[resolvedSize]} overflow-hidden`}\n              style={getValueStyles()}\n            >\n              {value}\n            </span>\n            {suffix && (\n              <span\n                className={`${metaTextClasses[resolvedSize]} shrink-0`}\n                style={{ color: 'var(--lm-text-secondary)' }}\n              >\n                {suffix}\n              </span>\n            )}\n          </div>\n\n          {/* Description */}\n          {description && (\n            <p\n              className={`${descriptionTextClasses[resolvedSize]} mt-1 truncate`}\n              style={{ color: 'var(--lm-text-secondary)' }}\n              title={description}\n            >\n              {description}\n            </p>\n          )}\n\n          {/* Trend area */}\n          {(trend != null || trendText) && (\n            <div className={`flex items-center ${SIZE_GAP_CLASSES[resolvedSize]} mt-2`}>\n              {trend != null && (\n                <div className=\"flex items-center gap-1\" style={getTrendStyles()}>\n                  {getTrendIcon()}\n                  <span className=\"text-sm font-medium\">{Math.abs(trend)}%</span>\n                </div>\n              )}\n              {trendText && (\n                <span className=\"text-sm\" style={{ color: 'var(--lm-text-secondary)' }}>\n                  {trendText}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default LMStatCard\n"],"names":["jsx","clampComponentSize","COMPONENT_SIZE_ORDER","SIZE_PADDING_CLASSES","jsxs","SIZE_GAP_CLASSES"],"mappings":"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"}

package/dist/LMSwitch-CP1_nrfU.js

@@ -0,0 +1,207 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+const sizeConfig = {
+  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 = useId();
+  const controlId = id ?? `lm-switch-${autoId}`;
+  const errId = `lm-switch-err-${autoId}`;
+  const currentSize = sizeConfig[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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "shrink-0 relative", children: [
+            /* @__PURE__ */ 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__ */ jsx(
+              "div",
+              {
+                className: `${currentSize.track} rounded-full transition-all duration-300 relative`,
+                style: {
+                  backgroundColor: getTrackBg(),
+                  ...getDisabledStyles()
+                },
+                children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1", children: [
+            label && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `font-medium leading-tight transition-colors duration-200 ${currentSize.label}`,
+                style: getLabelStyles(),
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: currentSize.description,
+                style: getDescriptionStyles(),
+                children: description
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    errorMessage && /* @__PURE__ */ 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__ */ jsx(
+            "svg",
+            {
+              className: "w-3 h-3",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ 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
+        ]
+      }
+    )
+  ] });
+};
+export {
+  LMSwitch as L
+};
+//# sourceMappingURL=LMSwitch-CP1_nrfU.js.map

package/dist/LMSwitch-CP1_nrfU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMSwitch-CP1_nrfU.js","sources":["../src/components/Form/LMSwitch/LMSwitch.tsx"],"sourcesContent":["import React, { useId } from 'react'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMSwitchProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {\n  /** Label text */\n  label?: string\n  /** Description text */\n  description?: string\n  /** Error state */\n  error?: boolean\n  /** Error message */\n  errorMessage?: string\n  /** Size */\n  size?: ComponentSize\n}\n\nconst sizeConfig = {\n  xs: {\n    container: 'p-2 gap-2',\n    label: 'text-xs',\n    description: 'text-xs mt-0.5',\n    errorMessage: 'text-xs',\n    track: 'w-7 h-4',\n    thumb: 'w-2.5 h-2.5',\n    translate: 'translate-x-3',\n  },\n  sm: {\n    container: 'p-3 gap-2.5',\n    label: 'text-sm',\n    description: 'text-xs mt-1',\n    errorMessage: 'text-xs',\n    track: 'w-9 h-5',\n    thumb: 'w-3 h-3',\n    translate: 'translate-x-4',\n  },\n  md: {\n    container: 'p-4 gap-3',\n    label: 'text-base',\n    description: 'text-sm mt-1',\n    errorMessage: 'text-xs',\n    track: 'w-11 h-6',\n    thumb: 'w-4 h-4',\n    translate: 'translate-x-5',\n  },\n  lg: {\n    container: 'p-5 gap-4',\n    label: 'text-lg',\n    description: 'text-base mt-1.5',\n    errorMessage: 'text-sm',\n    track: 'w-14 h-7',\n    thumb: 'w-5 h-5',\n    translate: 'translate-x-7',\n  },\n  xl: {\n    container: 'p-6 gap-4',\n    label: 'text-xl',\n    description: 'text-lg mt-2',\n    errorMessage: 'text-sm',\n    track: 'w-16 h-8',\n    thumb: 'w-6 h-6',\n    translate: 'translate-x-8',\n  },\n  '2xl': {\n    container: 'p-8 gap-5',\n    label: 'text-2xl',\n    description: 'text-xl mt-2.5',\n    errorMessage: 'text-base',\n    track: 'w-20 h-10',\n    thumb: 'w-8 h-8',\n    translate: 'translate-x-10',\n  },\n}\n\nconst LMSwitch: React.FC<LMSwitchProps> = ({\n  label,\n  description,\n  error = false,\n  errorMessage,\n  size = 'md',\n  id,\n  ...props\n}) => {\n  const autoId = useId()\n  const controlId = id ?? `lm-switch-${autoId}`\n  const errId = `lm-switch-err-${autoId}`\n\n  const currentSize = sizeConfig[size]\n\n  const getTrackBg = () => {\n    if (props.disabled) return 'var(--lm-bg-paper)'\n    if (error && !props.checked) return 'var(--lm-error-300)'\n    if (props.checked) return 'var(--lm-primary-500)'\n    return 'var(--lm-border-default)'\n  }\n\n  const getDisabledStyles = () => {\n    if (props.disabled) {\n      return {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n      } as React.CSSProperties\n    }\n    return {}\n  }\n\n  const getContainerStyles = () => {\n    const base = { backgroundColor: 'var(--lm-bg-paper)' }\n    return error ? { ...base, backgroundColor: 'var(--lm-error-50)' } : base\n  }\n\n  const getHoverContainerStyles = () =>\n    error\n      ? { backgroundColor: 'var(--lm-error-100)' }\n      : { backgroundColor: 'var(--lm-bg-elevated)' }\n\n  const getLabelStyles = () => {\n    if (error) return { color: 'var(--lm-error-700)' }\n    if (props.disabled)\n      return { color: 'var(--lm-text-disabled)', cursor: 'not-allowed' }\n    return { color: 'var(--lm-text-primary)', cursor: 'pointer' }\n  }\n\n  const getDescriptionStyles = () =>\n    error\n      ? { color: 'var(--lm-error-600)' }\n      : { color: 'var(--lm-text-secondary)' }\n\n  return (\n    <div>\n      <label\n        htmlFor={controlId}\n        className={`flex items-start rounded-2xl transition-colors duration-200 ${currentSize.container} ${\n          props.disabled ? '' : 'cursor-pointer'\n        }`}\n        style={getContainerStyles()}\n        onMouseEnter={(e) => {\n          if (!props.disabled) {\n            Object.assign(e.currentTarget.style, getHoverContainerStyles())\n          }\n        }}\n        onMouseLeave={(e) => {\n          if (!props.disabled) {\n            Object.assign(e.currentTarget.style, getContainerStyles())\n          }\n        }}\n      >\n        <div className=\"shrink-0 relative\">\n          <input\n            type=\"checkbox\"\n            id={controlId}\n            {...props}\n            className=\"sr-only peer\"\n            aria-invalid={error || undefined}\n            aria-describedby={errorMessage ? errId : undefined}\n            style={getDisabledStyles()}\n          />\n          <div\n            className={`${currentSize.track} rounded-full transition-all duration-300 relative`}\n            style={{\n              backgroundColor: getTrackBg(),\n              ...getDisabledStyles(),\n            }}\n          >\n            <div\n              className={`${currentSize.thumb} absolute left-1 top-1/2 -translate-y-1/2 rounded-full transition-transform duration-300 ${\n                props.checked ? currentSize.translate : 'translate-x-0'\n              }`}\n              style={{\n                backgroundColor: 'var(--lm-bg-elevated)',\n                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',\n              }}\n            />\n          </div>\n        </div>\n\n        {(label || description) && (\n          <div className=\"flex-1\">\n            {label && (\n              <span\n                className={`font-medium leading-tight transition-colors duration-200 ${currentSize.label}`}\n                style={getLabelStyles()}\n              >\n                {label}\n              </span>\n            )}\n            {description && (\n              <p\n                className={currentSize.description}\n                style={getDescriptionStyles()}\n              >\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n      </label>\n\n      {errorMessage && (\n        <p\n          id={errId}\n          className={`flex items-center gap-1 mt-2 ${currentSize.errorMessage}`}\n          style={{ color: 'var(--lm-error-500)' }}\n          role=\"alert\"\n          aria-live=\"polite\"\n        >\n          <svg\n            className=\"w-3 h-3\"\n            fill=\"currentColor\"\n            viewBox=\"0 0 20 20\"\n            aria-hidden=\"true\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              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\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  )\n}\n\nexport default LMSwitch\n"],"names":[],"mappings":"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"}