@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/LMModal-DCJPlfA4.js

@@ -0,0 +1,204 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useRef, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { L as LMButton } from "./LMButton-S4xQSohi.js";
+import { c as clampComponentSize, i as SIZE_HEADING_CLASSES, j as SIZE_MODAL_CONFIG, C as COMPONENT_SIZE_ORDER } from "./componentSizes-CdWNL526.js";
+const MODAL_FOOTER_SIZE_MAP = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md",
+  xl: "md",
+  "2xl": "lg"
+};
+const CloseIcon = () => /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
+const WindowIcon = () => /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) });
+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: _animationDuration = 300,
+  animation = true
+}) => {
+  const modalRef = useRef(null);
+  const backdropRef = 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: "var(--lm-radius-xl)",
+      border: "1px solid var(--lm-border-default)",
+      backdropFilter: "blur(20px) saturate(180%)",
+      WebkitBackdropFilter: "blur(20px) saturate(180%)",
+      ...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.4)",
+    backdropFilter: "blur(8px) saturate(150%)",
+    WebkitBackdropFilter: "blur(8px) saturate(150%)"
+  } : { backgroundColor: "transparent", backdropFilter: "none" };
+  const handleOk = () => onOk ? onOk() : onClose == null ? void 0 : onClose();
+  const handleCancel = useCallback(() => {
+    if (onCancel) onCancel();
+    else onClose == null ? void 0 : onClose();
+  }, [onCancel, onClose]);
+  const handleBackdropClick = (e) => {
+    if (maskClosable && e.target === backdropRef.current) handleCancel();
+  };
+  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 defaultFooter = /* @__PURE__ */ 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__ */ jsx(
+          LMButton,
+          {
+            variant: "secondary",
+            size: footerButtonSize,
+            onClick: handleCancel,
+            disabled: cancelLoading,
+            loading: cancelLoading,
+            children: cancelText
+          }
+        ),
+        showOk && /* @__PURE__ */ jsx(
+          LMButton,
+          {
+            variant: "primary",
+            size: footerButtonSize,
+            onClick: handleOk,
+            disabled: okLoading,
+            loading: okLoading,
+            children: okText
+          }
+        )
+      ]
+    }
+  );
+  const getAnimationClasses = () => {
+    if (!animation) return "";
+    return "transition-all duration-200 ease-out";
+  };
+  if (!visible) return null;
+  const modalContent = /* @__PURE__ */ 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__ */ jsxs(
+        "div",
+        {
+          ref: modalRef,
+          className: `relative ${getAnimationClasses()} ${className}`,
+          style: getModalStyles(),
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            (title || closable) && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between p-6 pb-4 border-b",
+                style: { borderColor: "var(--lm-border-default)" },
+                children: [
+                  title && /* @__PURE__ */ jsxs(
+                    "h3",
+                    {
+                      className: `font-semibold flex items-center gap-2 ${SIZE_HEADING_CLASSES[resolvedSize]}`,
+                      style: { color: "var(--lm-text-primary)" },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { style: { color: "var(--lm-text-secondary)" }, children: headerIcon || /* @__PURE__ */ jsx(WindowIcon, {}) }),
+                        title
+                      ]
+                    }
+                  ),
+                  closable && /* @__PURE__ */ jsx(
+                    LMButton,
+                    {
+                      variant: "ghost",
+                      size: "xs",
+                      onClick: handleCancel,
+                      leftIcon: closeIcon || /* @__PURE__ */ 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__ */ jsx("div", { className: "p-6", children }),
+            footer !== void 0 ? footer : showOk || showCancel ? defaultFooter : null
+          ]
+        }
+      )
+    }
+  );
+  return createPortal(modalContent, document.body);
+};
+const LMModal_default = memo(LMModal);
+export {
+  LMModal_default as L
+};
+//# sourceMappingURL=LMModal-DCJPlfA4.js.map

package/dist/LMModal-DCJPlfA4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMModal-DCJPlfA4.js","sources":["../src/components/Feedback/LMModal/LMModal.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, memo } from 'react'\nimport { createPortal } from 'react-dom'\nimport { LMButton } from '../../General/LMButton'\nimport {\n  COMPONENT_SIZE_ORDER,\n  SIZE_HEADING_CLASSES,\n  SIZE_MODAL_CONFIG,\n  clampComponentSize,\n} from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nconst MODAL_FOOTER_SIZE_MAP: Record<ComponentSize, ComponentSize> = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n  '2xl': 'lg',\n}\n\nconst CloseIcon: React.FC = () => (\n  <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\nconst WindowIcon: React.FC = () => (\n  <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\n  </svg>\n)\n\nexport interface LMModalProps {\n  /** Visibility */\n  visible: boolean\n  /** Title */\n  title?: string\n  /** Content */\n  children: React.ReactNode\n  /** Custom footer */\n  footer?: React.ReactNode\n  /** Close callback */\n  onClose?: () => void\n  /** OK callback */\n  onOk?: () => void\n  /** Cancel callback */\n  onCancel?: () => void\n  /** OK button text */\n  okText?: string\n  /** Cancel button text */\n  cancelText?: string\n  /** Show OK button */\n  showOk?: boolean\n  /** Show Cancel button */\n  showCancel?: boolean\n  /** OK loading state */\n  okLoading?: boolean\n  /** Cancel loading state */\n  cancelLoading?: boolean\n  /** Show mask */\n  mask?: boolean\n  /** Click mask to close */\n  maskClosable?: boolean\n  /** Show close button */\n  closable?: boolean\n  /** Custom close icon */\n  closeIcon?: React.ReactNode\n  /** Header icon */\n  headerIcon?: React.ReactNode\n  /** Width */\n  width?: string | number\n  /** Height */\n  height?: string | number\n  /** Size preset */\n  size?: ComponentSize\n  /** Custom class name */\n  className?: string\n  /** Custom style */\n  style?: React.CSSProperties\n  /** Center vertically */\n  centered?: boolean\n  /** Fullscreen mode */\n  fullscreen?: boolean\n  /** Animation duration (ms) */\n  animationDuration?: number\n  /** Enable animation */\n  animation?: boolean\n}\n\nconst LMModal: React.FC<LMModalProps> = ({\n  visible,\n  title,\n  children,\n  footer,\n  onClose,\n  onOk,\n  onCancel,\n  okText = 'Confirm',\n  cancelText = 'Cancel',\n  showOk = true,\n  showCancel = true,\n  okLoading = false,\n  cancelLoading = false,\n  mask = true,\n  maskClosable = false,\n  closable = true,\n  closeIcon,\n  headerIcon,\n  width,\n  height,\n  size = 'md',\n  className = '',\n  style,\n  centered = true,\n  fullscreen = false,\n  animationDuration: _animationDuration = 300,\n  animation = true,\n}) => {\n  // Note: animationDuration is kept for API compatibility but uses CSS variables now\n  void _animationDuration\n  const modalRef = useRef<HTMLDivElement>(null)\n  const backdropRef = useRef<HTMLDivElement>(null)\n  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n  const footerButtonSize = MODAL_FOOTER_SIZE_MAP[resolvedSize]\n\n  const getModalStyles = () => {\n    // Apple-like refined modal styling\n    const baseStyles: React.CSSProperties = {\n      backgroundColor: 'var(--lm-bg-elevated)',\n      color: 'var(--lm-text-primary)',\n      borderColor: 'var(--lm-border-default)',\n      boxShadow: 'var(--lm-shadow-xl)',\n      borderRadius: 'var(--lm-radius-xl)',\n      border: '1px solid var(--lm-border-default)',\n      backdropFilter: 'blur(20px) saturate(180%)',\n      WebkitBackdropFilter: 'blur(20px) saturate(180%)',\n      ...style,\n    }\n\n    if (fullscreen) {\n      baseStyles.width = '100vw'\n      baseStyles.height = '100vh'\n      baseStyles.maxWidth = '100vw'\n      baseStyles.maxHeight = '100vh'\n      baseStyles.borderRadius = '0'\n    } else {\n      baseStyles.width = width\n        ? typeof width === 'number'\n          ? `${width}px`\n          : width\n        : SIZE_MODAL_CONFIG[resolvedSize].width\n      baseStyles.maxWidth = SIZE_MODAL_CONFIG[resolvedSize].maxWidth\n      if (height) {\n        baseStyles.height = typeof height === 'number' ? `${height}px` : height\n      }\n    }\n\n    return baseStyles\n  }\n\n  // Apple-like refined backdrop\n  const getBackdropStyles = () =>\n    mask\n      ? {\n          backgroundColor: 'rgba(0, 0, 0, 0.4)',\n          backdropFilter: 'blur(8px) saturate(150%)',\n          WebkitBackdropFilter: 'blur(8px) saturate(150%)',\n        }\n      : { backgroundColor: 'transparent', backdropFilter: 'none' }\n\n  const handleOk = () => (onOk ? onOk() : onClose?.())\n\n  const handleCancel = useCallback(() => {\n    if (onCancel) onCancel()\n    else onClose?.()\n  }, [onCancel, onClose])\n\n  const handleBackdropClick = (e: React.MouseEvent) => {\n    if (maskClosable && e.target === backdropRef.current) handleCancel()\n  }\n\n  useEffect(() => {\n    const keyHandler = (e: KeyboardEvent) => {\n      if (visible && e.key === 'Escape') handleCancel()\n    }\n    if (visible) {\n      document.addEventListener('keydown', keyHandler)\n      document.body.style.overflow = 'hidden'\n    }\n    return () => {\n      document.removeEventListener('keydown', keyHandler)\n      if (visible) document.body.style.overflow = ''\n    }\n  }, [visible, handleCancel])\n\n  const defaultFooter = (\n    <div\n      className=\"flex items-center justify-end gap-3 px-6 py-4 border-t\"\n      style={{ borderColor: 'var(--lm-border-default)' }}\n    >\n      {showCancel && (\n        <LMButton\n          variant=\"secondary\"\n          size={footerButtonSize}\n          onClick={handleCancel}\n          disabled={cancelLoading}\n          loading={cancelLoading}\n        >\n          {cancelText}\n        </LMButton>\n      )}\n      {showOk && (\n        <LMButton\n          variant=\"primary\"\n          size={footerButtonSize}\n          onClick={handleOk}\n          disabled={okLoading}\n          loading={okLoading}\n        >\n          {okText}\n        </LMButton>\n      )}\n    </div>\n  )\n\n  // Apple-like refined animation with spring easing\n  const getAnimationClasses = () => {\n    if (!animation) return ''\n    // Use faster, snappier duration for Apple-like feel\n    return 'transition-all duration-200 ease-out'\n  }\n\n  if (!visible) return null\n\n  const modalContent = (\n    <div\n      ref={backdropRef}\n      className={`fixed inset-0 z-50 flex ${centered ? 'items-center' : 'items-start pt-20'} justify-center ${getAnimationClasses()}`}\n      style={getBackdropStyles()}\n      onClick={handleBackdropClick}\n    >\n      <div\n        ref={modalRef}\n        className={`relative ${getAnimationClasses()} ${className}`}\n        style={getModalStyles()}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || closable) && (\n          <div\n            className=\"flex items-center justify-between p-6 pb-4 border-b\"\n            style={{ borderColor: 'var(--lm-border-default)' }}\n          >\n            {title && (\n              <h3\n                className={`font-semibold flex items-center gap-2 ${SIZE_HEADING_CLASSES[resolvedSize]}`}\n                style={{ color: 'var(--lm-text-primary)' }}\n              >\n                <span style={{ color: 'var(--lm-text-secondary)' }}>\n                  {headerIcon || <WindowIcon />}\n                </span>\n                {title}\n              </h3>\n            )}\n            {closable && (\n              <LMButton\n                variant=\"ghost\"\n                size=\"xs\"\n                onClick={handleCancel}\n                leftIcon={closeIcon || <CloseIcon />}\n                className=\"w-8 h-8 p-0\"\n                aria-label=\"Close dialog\"\n                title=\"Close\"\n                style={{\n                  borderRadius: '0.5rem',\n                  backgroundColor: 'var(--lm-bg-paper)',\n                  borderColor: 'var(--lm-border-default)',\n                  color: 'var(--lm-text-secondary)',\n                }}\n              />\n            )}\n          </div>\n        )}\n\n        <div className=\"p-6\">{children}</div>\n\n        {footer !== undefined\n          ? footer\n          : showOk || showCancel\n            ? defaultFooter\n            : null}\n      </div>\n    </div>\n  )\n\n  return createPortal(modalContent, document.body)\n}\n\nexport default memo(LMModal)\n"],"names":[],"mappings":"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"}

package/dist/LMNumberInput-B1tU7T_W.cjs

@@ -0,0 +1,294 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+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 = `lm-ni-err-${React.useId()}`;
+  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 ${componentSizes.SIZE_INPUT_CONFIG[size].padding} ${componentSizes.SIZE_INPUT_CONFIG[size].height} ${componentSizes.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
+        ]
+      }
+    )
+  ] });
+};
+exports.LMNumberInput = LMNumberInput;
+//# sourceMappingURL=LMNumberInput-B1tU7T_W.cjs.map

package/dist/LMNumberInput-B1tU7T_W.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMNumberInput-B1tU7T_W.cjs","sources":["../src/components/Form/LMNumberInput/LMNumberInput.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  useMemo,\n  useCallback,\n  useId,\n} from 'react'\nimport { SIZE_INPUT_CONFIG } from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMNumberInputProps {\n  /** Current value (controlled) */\n  value?: number | null\n  /** Change callback */\n  onChange?: (value: number | null) => void\n  /** Error state */\n  error?: boolean\n  /** Error message */\n  errorMessage?: string\n  /** Placeholder */\n  placeholder?: string\n  /** Disabled state */\n  disabled?: boolean\n  /** Class name */\n  className?: string\n  /** Form field name */\n  name?: string\n  /** Size */\n  size?: ComponentSize\n  /** Minimum value */\n  min?: number\n  /** Maximum value */\n  max?: number\n  /** Step */\n  step?: number\n  /** Decimal precision */\n  precision?: number\n  /** Show increment/decrement controls */\n  showControls?: boolean\n  /** Prefix text */\n  prefix?: string\n  /** Suffix text */\n  suffix?: string\n}\n\nconst LMNumberInput: React.FC<LMNumberInputProps> = ({\n  value,\n  onChange,\n  error = false,\n  errorMessage,\n  placeholder = 'Enter number...',\n  disabled = false,\n  className = '',\n  name,\n  size = 'md',\n  min,\n  max,\n  step = 1,\n  precision = 0,\n  showControls = true,\n  prefix,\n  suffix,\n}) => {\n  const [inputValue, setInputValue] = useState<string>(\n    value !== null && value !== undefined ? String(value) : ''\n  )\n  const [isFocused, setIsFocused] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const errId = `lm-ni-err-${useId()}`\n\n  const formatNumber = useCallback(\n    (num: number): string => {\n      if (!Number.isFinite(num)) return ''\n      if (precision <= 0) return String(Math.round(num))\n      return num.toFixed(precision)\n    },\n    [precision]\n  )\n\n  useEffect(() => {\n    if (value === undefined || value === null) {\n      setInputValue('')\n    } else if (!isFocused) {\n      setInputValue(formatNumber(value))\n    }\n  }, [value, isFocused, formatNumber])\n\n  const baseClassName = `\n    w-full ${SIZE_INPUT_CONFIG[size].padding} ${SIZE_INPUT_CONFIG[size].height} ${SIZE_INPUT_CONFIG[size].fontSize}\n    backdrop-blur-md border rounded-2xl\n    focus:ring-2 focus:outline-none transition-all duration-300\n    shadow-sm\n    ${showControls ? 'pr-10' : ''}\n    ${prefix ? 'pl-10' : ''}\n    ${suffix ? 'pr-10' : ''}\n    ${className}\n    [&::-webkit-outer-spin-button]:appearance-none\n    [&::-webkit-inner-spin-button]:appearance-none\n    [-moz-appearance:textfield]\n  `\n    .trim()\n    .replace(/\\s+/g, ' ')\n\n  const getNumberInputStyles = () => {\n    const base = {\n      backgroundColor: 'var(--lm-bg-elevated)',\n      color: 'var(--lm-text-primary)',\n      borderColor: error\n        ? 'var(--lm-error-300)'\n        : isFocused\n          ? 'var(--lm-primary-400)'\n          : 'var(--lm-border-default)',\n      boxShadow: 'var(--lm-shadow-sm)',\n    } as React.CSSProperties\n\n    return {\n      ...base,\n      '--tw-ring-color': error\n        ? 'var(--lm-error-400)'\n        : 'var(--lm-primary-400)',\n      '--tw-ring-opacity': '0.3',\n    }\n  }\n\n  const getDisabledStyles = () =>\n    disabled\n      ? {\n          backgroundColor: 'var(--lm-bg-paper)',\n          color: 'var(--lm-text-disabled)',\n          cursor: 'not-allowed',\n          opacity: 0.6,\n        }\n      : {}\n\n  const getIconStyles = () => {\n    if (error) return { color: 'var(--lm-error-400)' }\n    if (isFocused) return { color: 'var(--lm-primary-500)' }\n    return { color: 'var(--lm-text-secondary)' }\n  }\n\n  const getControlButtonStyles = () => ({\n    backgroundColor: 'var(--lm-bg-paper)',\n    color: 'var(--lm-text-secondary)',\n    borderColor: 'var(--lm-border-light)',\n  })\n\n  const getHoverControlButtonStyles = () => ({\n    backgroundColor: 'var(--lm-bg-elevated)',\n    color: 'var(--lm-text-primary)',\n  })\n\n  const parseNumber = (str: string): number | null => {\n    const n = parseFloat(str)\n    return Number.isNaN(n) ? null : n\n  }\n\n  const clamp = (num: number): number => {\n    let v = num\n    if (min !== undefined) v = Math.max(v, min)\n    if (max !== undefined) v = Math.min(v, max)\n    return v\n  }\n\n  const stepFrom = useMemo(() => min ?? 0, [min])\n  const alignToStep = (num: number) => {\n    const offset = num - stepFrom\n    const k = Math.round(offset / step)\n    const next = stepFrom + k * step\n    return Number(next.toFixed(Math.max(precision, 12)))\n  }\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const val = event.target.value\n    setInputValue(val)\n\n    if (val.trim() === '') {\n      onChange?.(null)\n      return\n    }\n\n    const num = parseNumber(val)\n    if (num === null) return\n\n    const clamped = clamp(num)\n    if (clamped !== num) return\n    onChange?.(num)\n  }\n\n  const changeByStep = (delta: number) => {\n    if (disabled) return\n\n    const current = parseNumber(inputValue)\n    const base = current ?? min ?? 0\n    const raw = base + delta * step\n    const clamped = clamp(raw)\n    const aligned = alignToStep(clamped)\n\n    setInputValue(formatNumber(aligned))\n    onChange?.(aligned)\n  }\n\n  const handleIncrement = () => changeByStep(+1)\n  const handleDecrement = () => changeByStep(-1)\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      handleIncrement()\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      handleDecrement()\n    }\n  }\n\n  const handleFocus = () => setIsFocused(true)\n  const handleBlur = () => {\n    setIsFocused(false)\n\n    if (inputValue.trim() === '') {\n      setInputValue('')\n      if (value !== null) onChange?.(null)\n      return\n    }\n\n    const num = parseNumber(inputValue)\n    if (num === null) {\n      if (typeof value === 'number') {\n        setInputValue(formatNumber(clamp(value)))\n      } else {\n        setInputValue('')\n        if (value !== null) onChange?.(null)\n      }\n      return\n    }\n    let v = clamp(num)\n    v = alignToStep(v)\n    const formatted = formatNumber(v)\n    setInputValue(formatted)\n    if (v !== value) onChange?.(v)\n  }\n\n  const handleWheel: React.WheelEventHandler<HTMLInputElement> = (e) => {\n    if (document.activeElement === inputRef.current) {\n      e.preventDefault()\n    }\n  }\n\n  const currentNum = parseNumber(inputValue)\n  const incDisabled = useMemo(() => {\n    if (disabled) return true\n    const base = currentNum ?? min ?? 0\n    return max !== undefined && base >= max\n  }, [disabled, currentNum, min, max])\n\n  const decDisabled = useMemo(() => {\n    if (disabled) return true\n    const base = currentNum ?? min ?? 0\n    return min !== undefined && base <= min\n  }, [disabled, currentNum, min])\n\n  const ChevronUp = () => (\n    <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n    </svg>\n  )\n\n  const ChevronDown = () => (\n    <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n    </svg>\n  )\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"relative group\">\n        {prefix && (\n          <div className=\"absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10\">\n            <span className=\"text-sm font-medium\" style={getIconStyles()}>\n              {prefix}\n            </span>\n          </div>\n        )}\n\n        <input\n          ref={inputRef}\n          type=\"number\"\n          name={name}\n          value={inputValue}\n          placeholder={placeholder}\n          disabled={disabled}\n          min={min}\n          max={max}\n          step={step}\n          inputMode=\"decimal\"\n          className={baseClassName}\n          style={{ ...getNumberInputStyles(), ...getDisabledStyles() } as React.CSSProperties}\n          aria-invalid={error || undefined}\n          aria-describedby={errorMessage ? errId : undefined}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onWheel={handleWheel}\n          onMouseEnter={(e) => {\n            if (!disabled && !error && !isFocused) {\n              e.currentTarget.style.borderColor = 'var(--lm-border-strong)'\n            }\n          }}\n          onMouseLeave={(e) => {\n            if (!disabled && !error && !isFocused) {\n              e.currentTarget.style.borderColor = 'var(--lm-border-default)'\n            }\n          }}\n        />\n\n        {suffix && (\n          <div\n            className={`absolute inset-y-0 flex items-center pointer-events-none z-10 ${\n              showControls ? 'right-10' : 'right-4'\n            }`}\n          >\n            <span className=\"text-sm font-medium\" style={getIconStyles()}>\n              {suffix}\n            </span>\n          </div>\n        )}\n\n        {showControls && (\n          <div className=\"absolute inset-y-0 right-0 flex flex-col w-8\">\n            <button\n              type=\"button\"\n              aria-label=\"Increment\"\n              onClick={handleIncrement}\n              disabled={incDisabled}\n              className=\"flex-1 px-1 border-l border-b rounded-tr-2xl transition-colors duration-200 flex items-center justify-center\"\n              style={getControlButtonStyles()}\n              onMouseEnter={(e) => {\n                if (!incDisabled)\n                  Object.assign(e.currentTarget.style, getHoverControlButtonStyles())\n              }}\n              onMouseLeave={(e) => {\n                if (!incDisabled)\n                  Object.assign(e.currentTarget.style, getControlButtonStyles())\n              }}\n            >\n              <ChevronUp />\n            </button>\n            <button\n              type=\"button\"\n              aria-label=\"Decrement\"\n              onClick={handleDecrement}\n              disabled={decDisabled}\n              className=\"flex-1 px-1 border-l rounded-br-2xl transition-colors duration-200 flex items-center justify-center\"\n              style={getControlButtonStyles()}\n              onMouseEnter={(e) => {\n                if (!decDisabled)\n                  Object.assign(e.currentTarget.style, getHoverControlButtonStyles())\n              }}\n              onMouseLeave={(e) => {\n                if (!decDisabled)\n                  Object.assign(e.currentTarget.style, getControlButtonStyles())\n              }}\n            >\n              <ChevronDown />\n            </button>\n          </div>\n        )}\n      </div>\n\n      {errorMessage && (\n        <p\n          id={errId}\n          className=\"text-xs flex items-center gap-1\"\n          style={{ color: 'var(--lm-error-500)' }}\n          role=\"alert\"\n          aria-live=\"polite\"\n        >\n          <svg className=\"w-3 h-3\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\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 LMNumberInput\n"],"names":["useState","useRef","useId","useCallback","useEffect","SIZE_INPUT_CONFIG","useMemo","jsx","jsxs"],"mappings":"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"}