sellmate-design-system-react 0.1.8 → 0.1.9

package/dist/components/SNumberInput/SNumberInput.cjs

@@ -5,7 +5,7 @@ var react = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var RPopover = require('@radix-ui/react-popover');
+var RPopover2 = require('@radix-ui/react-popover');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RPopover__namespace = /*#__PURE__*/_interopNamespace(RPopover);
+var RPopover2__namespace = /*#__PURE__*/_interopNamespace(RPopover2);
 
 var twMerge = tailwindMerge.extendTailwindMerge({
   extend: {
@@ -2897,11 +2897,200 @@ PortalContainerContext.Provider;
 function usePortalContainer() {
   return react.useContext(PortalContainerContext) ?? void 0;
 }
+
+// src/components/STag/tag.config.ts
+var TAG_SIZE_CONFIG = {
+  xs: {
+    height: 20,
+    paddingX: 8,
+    gap: 4,
+    radius: 6,
+    iconSize: 12,
+    fontSize: 11,
+    fontWeight: 500,
+    lineHeight: 18
+  },
+  sm: {
+    height: 24,
+    paddingX: 8,
+    gap: 4,
+    radius: 6,
+    iconSize: 16,
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 20
+  },
+  md: {
+    height: 28,
+    paddingX: 12,
+    gap: 6,
+    radius: 8,
+    iconSize: 16,
+    fontSize: 14,
+    fontWeight: 700,
+    lineHeight: 24
+  }
+};
+var STag = react.forwardRef(function STag2({
+  shape = "square",
+  size = "sm",
+  color = "grey",
+  label = "",
+  icon,
+  iconLeft = true,
+  width,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const s = TAG_SIZE_CONFIG[size];
+  const contentColor = `var(--cmp-tag-${color}-content)`;
+  const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
+  const resolvedWidth = typeof width === "number" ? `${width}px` : width;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      "aria-label": label || "tag",
+      className: cn(
+        "box-border inline-flex w-fit select-none items-center justify-center whitespace-nowrap",
+        className
+      ),
+      style: {
+        minHeight: s.height,
+        padding: `0 ${s.paddingX}px`,
+        gap: s.gap,
+        borderRadius: shape === "pill" ? 999 : s.radius,
+        fontSize: s.fontSize,
+        fontWeight: s.fontWeight,
+        lineHeight: `${s.lineHeight}px`,
+        background: `var(--cmp-tag-${color}-bg)`,
+        color: contentColor,
+        ...resolvedWidth != null ? { width: resolvedWidth } : {},
+        ...style
+      },
+      ...rest,
+      children: [
+        icon && iconLeft && iconNode,
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center justify-center", children: label }),
+        icon && !iconLeft && iconNode
+      ]
+    }
+  );
+});
+var SIZE = {
+  xxs: { icon: 12, radius: "sm" },
+  xs: { icon: 16, radius: "sm" },
+  sm: { icon: 20, radius: "sm" },
+  md: { icon: 24, radius: "md" },
+  lg: { icon: 32, radius: "md" }
+};
+var TOOLTIP_HIDE_DELAY_MS = 100;
+function SGhostButton({
+  icon,
+  size = "sm",
+  intent = "default",
+  ariaLabel = "",
+  tooltipText,
+  disabled = false,
+  onClick,
+  className,
+  style
+}) {
+  const portalContainer = usePortalContainer();
+  const [open, setOpen] = react.useState(false);
+  const hideTimer = react.useRef(void 0);
+  const cancelHide = () => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
+  };
+  const openNow = () => {
+    cancelHide();
+    setOpen(true);
+  };
+  const startHide = () => {
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpen(false), TOOLTIP_HIDE_DELAY_MS);
+  };
+  const s = SIZE[size];
+  const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const btn = /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      "aria-disabled": disabled ? "true" : void 0,
+      "aria-label": ariaLabel.trim() || void 0,
+      tabIndex: disabled ? -1 : void 0,
+      onClick: (e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      },
+      className: cn(
+        "group relative box-border inline-flex items-center justify-center border-none bg-transparent p-0 transition-shadow",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--cmp-ghostButton-action-hover-bg)]",
+        className
+      ),
+      style: {
+        width: `var(--cmp-ghostButton-${size}-size)`,
+        height: `var(--cmp-ghostButton-${size}-size)`,
+        borderRadius: `var(--cmp-ghostButton-radius-${s.radius})`,
+        ...style
+      },
+      children: [
+        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover:opacity-5",
+            style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
+      ]
+    }
+  );
+  const text = (tooltipText ?? "").trim();
+  if (text === "") return btn;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "inline-flex",
+        onMouseEnter: openNow,
+        onMouseLeave: startHide,
+        onFocus: openNow,
+        onBlur: startHide,
+        children: btn
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RPopover2__namespace.Content,
+      {
+        side: "top",
+        sideOffset: 4,
+        className: cn("z-50", FLOATING_SLIDE_ANIM),
+        "aria-hidden": true,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onMouseEnter: cancelHide,
+        onMouseLeave: startHide,
+        children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
+      }
+    ) })
+  ] });
+}
 var HIDE_DELAY_MS = 100;
 function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: line }, i)) });
+  const singleLine = message.length === 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: singleLine ? "leading-[24px]" : void 0, children: line }, i)) });
 }
 var STooltip = react.forwardRef(function STooltip2({
   content,
@@ -2959,7 +3148,7 @@ var STooltip = react.forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: triggerNode });
   const isHover = trigger === "hover";
   const contentClass = cn(
-    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
+    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
     FLOATING_SLIDE_ANIM,
     className
   );
@@ -2969,10 +3158,10 @@ var STooltip = react.forwardRef(function STooltip2({
     fontWeight: tooltipType === "default" ? 500 : 700,
     ...style
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover__namespace.Root, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
     isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: "inline-flex",
@@ -2983,9 +3172,9 @@ var STooltip = react.forwardRef(function STooltip2({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover__namespace.Content,
+    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover2__namespace.Content,
       {
         side: placement,
         sideOffset: 8,
@@ -3004,15 +3193,21 @@ var STooltip = react.forwardRef(function STooltip2({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[12px]", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: body }),
             useClose && /* @__PURE__ */ jsxRuntime.jsx(
-              RPopover__namespace.Close,
+              SGhostButton,
               {
-                "aria-label": "\uB2EB\uAE30",
-                className: "shrink-0 cursor-pointer opacity-70 hover:opacity-100",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 16, color: fg })
+                icon: "close",
+                size: "xs",
+                intent: tooltipType === "default" ? "inverse" : "default",
+                ariaLabel: "\uB2EB\uAE30",
+                className: "shrink-0",
+                onClick: () => {
+                  cancelHide();
+                  setOpen(false);
+                }
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -3046,8 +3241,8 @@ function useFormField(field) {
   }, [ctx, name]);
 }
 var FIELD_SIZE = {
-  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 12 },
-  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 12 }
+  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 16 },
+  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 16 }
 };
 var ALIGN = {
   start: "flex-start",
@@ -3062,6 +3257,7 @@ var SField = react.forwardRef(function SField2({
   labelTooltip = "",
   labelTooltipProps,
   labelWidth,
+  labelHeight,
   size = "sm",
   addonLabel = "",
   addonAlign = "start",
@@ -3076,6 +3272,7 @@ var SField = react.forwardRef(function SField2({
   readOnly = false,
   width,
   multiline = false,
+  borderless = false,
   children,
   className,
   style,
@@ -3109,8 +3306,8 @@ var SField = react.forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
-  const borderColor = disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
-  const bgColor = disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
+  const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
+  const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
   const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -3127,7 +3324,7 @@ var SField = react.forwardRef(function SField2({
           {
             className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
             style: {
-              height: s.height,
+              height: cssLen(labelHeight) ?? s.height,
               marginRight: s.fieldGap,
               width: cssLen(labelWidth),
               fontSize: s.fontSize,
@@ -3153,14 +3350,14 @@ var SField = react.forwardRef(function SField2({
             {
               className: cn(
                 "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
-                interactive && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
+                interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
                 disabled && "cursor-not-allowed"
               ),
               style: {
                 // @ts-expect-error CSS 변수
                 "--field-bc": borderColor,
                 // focused/hovered prop이 명시된 경우 강조를 즉시 반영
-                ...interactive && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
+                ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
                 ...multiline ? { minHeight: s.height } : { height: s.height },
                 "width": cssLen(width),
                 "borderRadius": s.radius,
@@ -3200,8 +3397,8 @@ var SField = react.forwardRef(function SField2({
   );
 });
 var PAD = {
-  sm: { fontSize: 12, stepper: 20, icon: 12 },
-  md: { fontSize: 14, stepper: 24, icon: 14 }
+  sm: { fontSize: 12, lineHeight: 20, stepper: 20, icon: 12 },
+  md: { fontSize: 14, lineHeight: 24, stepper: 24, icon: 14 }
 };
 var toNumber = (val) => {
   if (val === null || val === void 0 || val === "") return null;
@@ -3219,6 +3416,38 @@ var formatWithCommas = (value) => {
   const result = isNeg ? "-" + formatted : formatted;
   return decPart !== void 0 && decPart !== "" ? result + "." + decPart : result;
 };
+var addCommas = (value) => value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+var formatInputWithCommas = (value) => {
+  const isNeg = value.startsWith("-");
+  const unsigned = isNeg ? value.slice(1) : value;
+  const hasDecimal = unsigned.includes(".");
+  const [intPart = "", decPart = ""] = unsigned.split(".");
+  const formattedInt = addCommas(intPart === "" ? "0" : intPart);
+  return `${isNeg ? "-" : ""}${formattedInt}${hasDecimal ? `.${decPart}` : ""}`;
+};
+var getDecimalLimit = (useDecimal, maxDecimalLength) => {
+  if (!useDecimal || maxDecimalLength === void 0 || !Number.isFinite(maxDecimalLength)) {
+    return void 0;
+  }
+  return Math.max(0, Math.floor(maxDecimalLength));
+};
+var applyDecimalLimit = (value, decimalLimit) => {
+  if (value === null || decimalLimit === void 0) return value;
+  return Number(value.toFixed(decimalLimit));
+};
+var getLogicalCaret = (value, caret) => {
+  return value.slice(0, caret ?? value.length).replace(/,/g, "").length;
+};
+var getDisplayCaret = (value, logicalCaret) => {
+  if (logicalCaret <= 0) return 0;
+  let seen = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    if (value[i] === ",") continue;
+    seen += 1;
+    if (seen >= logicalCaret) return i + 1;
+  }
+  return value.length;
+};
 var SNumberInput = react.forwardRef(function SNumberInput2({
   value,
   onValueChange,
@@ -3228,6 +3457,7 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
   step = 1,
   useButton = false,
   useDecimal = false,
+  maxDecimalLength,
   inputPrefix = "",
   inputSuffix = "",
   inputClass,
@@ -3259,7 +3489,8 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
 }, ref) {
   const p = PAD[size];
   const padX = `var(--cmp-numberInput-${size}-paddingX)`;
-  const numValue = toNumber(value);
+  const decimalLimit = getDecimalLimit(useDecimal, maxDecimalLength);
+  const numValue = applyDecimalLimit(toNumber(value), decimalLimit);
   const [display, setDisplay] = react.useState(() => formatWithCommas(numValue));
   const [ruleError, setRuleError] = react.useState("");
   const innerRef = react.useRef(null);
@@ -3269,8 +3500,9 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
     else if (ref) ref.current = el;
   };
   react.useEffect(() => {
-    setDisplay(formatWithCommas(toNumber(value)));
-  }, [value]);
+    if (document.activeElement === innerRef.current) return;
+    setDisplay(formatWithCommas(applyDecimalLimit(toNumber(value), decimalLimit)));
+  }, [decimalLimit, value]);
   useFormField({
     name,
     validate: () => {
@@ -3282,48 +3514,87 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
   });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const emit = (n) => {
-    setDisplay(formatWithCommas(n));
-    onValueChange?.(n);
+  const restoreCaret = (nextDisplay, logicalCaret) => {
+    const input = innerRef.current;
+    if (logicalCaret === void 0 || !input || document.activeElement !== input) return;
+    const nextCaret = getDisplayCaret(nextDisplay, logicalCaret);
+    requestAnimationFrame(() => {
+      if (document.activeElement !== input) return;
+      input.setSelectionRange(nextCaret, nextCaret);
+    });
+  };
+  const setDisplayWithCaret = (nextDisplay, logicalCaret) => {
+    setDisplay(nextDisplay);
+    restoreCaret(nextDisplay, logicalCaret);
+  };
+  const resetRejectedInput = (target, logicalCaret) => {
+    target.value = display;
+    restoreCaret(display, Math.min(logicalCaret, display.replace(/,/g, "").length));
+  };
+  const emit = (n, logicalCaret) => {
+    const next = applyDecimalLimit(n, decimalLimit);
+    const nextDisplay = formatWithCommas(next);
+    setDisplayWithCaret(nextDisplay, logicalCaret);
+    onValueChange?.(next);
   };
   const incDisabled = disabled || readOnly || numValue !== null && numValue >= max;
   const decDisabled = disabled || readOnly || numValue !== null && numValue <= min;
   const increment = () => {
     if (incDisabled) return;
     const cur = numValue ?? (min === Number.NEGATIVE_INFINITY ? 0 : min);
-    const next = Math.min(cur + step, max);
+    const next = applyDecimalLimit(Math.min(cur + step, max), decimalLimit);
     if (next !== cur) emit(next);
   };
   const decrement = () => {
     if (decDisabled) return;
     const cur = numValue ?? (min === Number.NEGATIVE_INFINITY ? 0 : min);
-    const next = Math.max(cur - step, min);
+    const next = applyDecimalLimit(Math.max(cur - step, min), decimalLimit);
     if (next !== cur) emit(next);
   };
-  const handleInput = (raw) => {
+  const handleInput = (event) => {
+    const target = event.currentTarget;
+    const raw = target.value;
+    const logicalCaret = getLogicalCaret(raw, target.selectionStart);
     if (raw === "") {
-      setDisplay("");
+      setDisplayWithCaret("", 0);
       onValueChange?.(null);
       return;
     }
     const cleaned = raw.replace(/,/g, "");
     const decimals = (cleaned.match(/\./g) || []).length;
-    if (decimals > 1) return;
+    if (decimals > 1) {
+      resetRejectedInput(target, logicalCaret);
+      return;
+    }
     if (cleaned === "-" || cleaned === "." || cleaned === "-.") {
-      setDisplay(cleaned);
+      setDisplayWithCaret(cleaned, logicalCaret);
       return;
     }
-    if (!useDecimal && cleaned.includes(".")) return;
+    if (!useDecimal && cleaned.includes(".")) {
+      resetRejectedInput(target, logicalCaret);
+      return;
+    }
+    if (decimalLimit !== void 0 && cleaned.includes(".")) {
+      const fraction = cleaned.split(".")[1] ?? "";
+      if (fraction.length > decimalLimit) {
+        resetRejectedInput(target, logicalCaret);
+        return;
+      }
+    }
     if (cleaned.endsWith(".") && decimals === 1) {
       const parsed2 = toNumber(cleaned.slice(0, -1));
       if (parsed2 !== null) {
-        setDisplay(formatWithCommas(parsed2) + ".");
+        setDisplayWithCaret(formatInputWithCommas(cleaned), logicalCaret);
         return;
       }
     }
     const parsed = toNumber(cleaned);
-    if (parsed === null) return;
-    emit(parsed);
+    if (parsed === null) {
+      resetRejectedInput(target, logicalCaret);
+      return;
+    }
+    setDisplayWithCaret(formatInputWithCommas(cleaned), logicalCaret);
+    onValueChange?.(applyDecimalLimit(parsed, decimalLimit));
   };
   const stepper = (dir) => {
     const off = dir === "inc" ? incDisabled : decDisabled;
@@ -3336,8 +3607,8 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
         "aria-label": dir === "inc" ? "\uC99D\uAC00" : "\uAC10\uC18C",
         onClick: dir === "inc" ? increment : decrement,
         className: cn(
-          "flex flex-shrink-0 items-center justify-center",
-          off ? "cursor-not-allowed" : "cursor-pointer"
+          "flex flex-shrink-0 items-center justify-center border border-solid border-transparent transition-colors",
+          off ? "cursor-not-allowed" : "cursor-pointer hover:border-[var(--color-border-accentLight)]"
         ),
         style: {
           width: `var(--cmp-numberInput-stepper-${size}-size)`,
@@ -3386,24 +3657,26 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
           style: {
             // 원본 sd-number-input: content gap = padding-x 토큰 (gap 토큰 아님)
             gap: `var(--cmp-numberInput-${size}-paddingX)`,
-            padding: `0 ${useButton ? padX : `calc(${padX} * 2)`}`
+            padding: `0 ${useButton ? padX : `calc(${padX} * 2)`}`,
+            fontSize: p.fontSize,
+            lineHeight: `${p.lineHeight}px`
           },
           children: [
             useButton && stepper("dec"),
-            inputPrefix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { fontSize: p.fontSize, color: affixColor }, children: inputPrefix }),
+            inputPrefix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { color: affixColor }, children: inputPrefix }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
                 ref: setRefs,
                 name,
                 type: "text",
-                inputMode: "numeric",
+                inputMode: useDecimal ? "decimal" : "numeric",
                 value: display,
                 placeholder,
                 disabled,
                 readOnly,
                 autoFocus,
-                onChange: (e) => handleInput(e.target.value),
+                onChange: handleInput,
                 onKeyDown: (e) => {
                   if (e.key === "ArrowUp") {
                     e.preventDefault();
@@ -3415,26 +3688,29 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
                 },
                 onFocus: (e) => onFocus?.(e),
                 onBlur: (e) => {
-                  const n = toNumber(display);
+                  const cleaned = display.replace(/,/g, "");
+                  const n = toNumber(cleaned);
                   const clamped = n === null ? null : Math.min(Math.max(n, min), max);
                   if (clamped !== n) emit(clamped);
-                  else setDisplay(formatWithCommas(n));
+                  else setDisplay(n === null ? "" : formatInputWithCommas(cleaned));
                   if (rules && rules.length > 0) setRuleError(runRules(clamped, rules));
                   onBlur?.(e);
                 },
                 className: cn(
-                  "h-full min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--cmp-numberInput-text-placeholder)] disabled:cursor-not-allowed",
+                  // h-full 대신 라인박스 높이 그대로 두어 prefix/suffix 와 동일하게 flex 로 수직 센터링
+                  // (h-full 이면 input 내부 텍스트 센터링을 브라우저가 수행해 1px 어긋날 수 있음)
+                  "min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--cmp-numberInput-text-placeholder)] disabled:cursor-not-allowed",
                   inputClass
                 ),
                 style: {
-                  fontSize: p.fontSize,
+                  // fontSize/lineHeight 는 컨테이너에서 상속
                   textAlign: useButton ? "center" : "right",
                   color: disabled ? "var(--cmp-numberInput-text-disabled)" : "var(--cmp-numberInput-text-default)",
                   ...inputStyle
                 }
               }
             ),
-            inputSuffix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { fontSize: p.fontSize, color: affixColor }, children: inputSuffix }),
+            inputSuffix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { color: affixColor }, children: inputSuffix }),
             useButton && stepper("inc")
           ]
         }