import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../lib/utils.js";
import { EMPTY_DISPLAY, fieldWrapperStyles, bareInputStyles } from "../Field/field-wrapper.js";
import { useFieldContext, useResolvedFieldInvalid, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldVariant, useResolvedFieldMode } from "../Field/field-context.js";
import { ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
function formatNumber(value, options = {}) {
  if (value == null) return "";
  const { precision, prefix = "", suffix = "", locale = "en-US" } = options;
  const formatted = precision != null ? value.toLocaleString(locale, { minimumFractionDigits: precision, maximumFractionDigits: precision }) : value.toLocaleString(locale);
  return `${prefix}${formatted}${suffix}`;
}
const NumberInput = React.forwardRef(
  ({
    mode: modeProp,
    variant: variantProp,
    error: errorProp = false,
    size: sizeProp,
    value,
    onChange,
    precision,
    prefix,
    suffix,
    locale,
    endAction,
    endSlot,
    className,
    disabled: disabledProp,
    readOnly,
    id: idProp,
    "aria-describedby": ariaDescribedByProp,
    "aria-errormessage": ariaErrorMessageProp,
    ...props
  }, ref) => {
    const fieldCtx = useFieldContext();
    const error = useResolvedFieldInvalid(errorProp);
    const size = useResolvedFieldSize(sizeProp);
    const disabled = useResolvedFieldDisabled(disabledProp);
    const variant = useResolvedFieldVariant(variantProp);
    const resolvedMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly });
    if (resolvedMode !== "edit") {
      return /* @__PURE__ */ jsx(
        "div",
        {
          className: cn(fieldWrapperStyles({ mode: resolvedMode, variant, size }), className),
          "data-field-mode": resolvedMode,
          children: /* @__PURE__ */ jsx(
            "span",
            {
              className: cn(
                "flex-1 min-w-0",
                resolvedMode === "disabled" && "text-fg-disabled cursor-not-allowed",
                // 2026-05-31 M24:disabled > muted。disabled 時不可再套 muted(否則 neutral-7 蓋過 disabled neutral-6)
                value == null && resolvedMode !== "disabled" && "text-fg-muted"
              ),
              children: value == null ? EMPTY_DISPLAY : formatNumber(value, { precision, prefix, suffix, locale })
            }
          )
        }
      );
    }
    const handleChange = (e) => {
      if (!onChange) return;
      const raw = e.target.value;
      if (raw === "" || raw === "-") {
        onChange(null);
        return;
      }
      const parsed = Number(raw);
      if (!Number.isNaN(parsed)) {
        onChange(parsed);
      }
    };
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: cn(
          fieldWrapperStyles({ mode: "edit", variant, size }),
          error && [
            "border-error hover:border-error-hover",
            "focus-within:border-error focus-within:hover:border-error"
          ],
          className
        ),
        "data-field-mode": "edit",
        "data-error": error ? "" : void 0,
        children: [
          /* @__PURE__ */ jsx(
            "input",
            {
              ref,
              type: "text",
              inputMode: "decimal",
              id: idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
              value: value ?? "",
              onChange: handleChange,
              "aria-invalid": error || void 0,
              "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
              "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
              "aria-errormessage": ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
              className: bareInputStyles,
              ...props
            }
          ),
          endSlot ? (
            // endSlot escape hatch:consumer 自控右側 slot(對齊 Input.endSlot canonical)
            endSlot
          ) : endAction ? /* @__PURE__ */ jsx(ItemInlineAction, { action: endAction, size: size ?? "md" }) : null
        ]
      }
    );
  }
);
NumberInput.displayName = "NumberInput";
const numberInputMeta = {
  component: "NumberInput",
  family: 4,
  variants: {},
  sizes: {},
  states: ["default", "hover", "active", "focus-visible", "disabled"],
  tokens: {
    bg: [],
    fg: ["text-fg-disabled", "text-fg-muted"],
    ring: []
  }
};
export {
  NumberInput,
  formatNumber,
  numberInputMeta
};
//# sourceMappingURL=number-input.js.map
