import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../lib/utils.js";
import { EMPTY_DISPLAY, bareInputStyles, fieldWrapperStyles } from "../Field/field-wrapper.js";
import { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldVariant, useResolvedFieldMode, useResolvedFieldInvalid } from "../Field/field-context.js";
import { ICON_SIZE, ItemPrefix, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
import { CircularProgress } from "../CircularProgress/circular-progress.js";
const Input = React.forwardRef(
  ({
    mode: modeProp,
    variant: variantProp,
    error = false,
    size: sizeProp,
    startIcon: StartIcon,
    endAction,
    endSlot,
    loading = false,
    autoWidth = false,
    className,
    disabled: disabledProp,
    readOnly,
    value,
    id: idProp,
    "aria-describedby": ariaDescribedByProp,
    "aria-errormessage": ariaErrorMessageProp,
    ...props
  }, ref) => {
    const fieldCtx = useFieldContext();
    const size = useResolvedFieldSize(sizeProp);
    const disabled = useResolvedFieldDisabled(disabledProp);
    const variant = useResolvedFieldVariant(variantProp);
    const resolvedMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly });
    const isEditable = resolvedMode === "edit";
    const isDisplay = resolvedMode === "display";
    const resolvedError = useResolvedFieldInvalid(error);
    const iconSize = ICON_SIZE[size];
    const iconColor = resolvedMode === "disabled" ? "text-fg-disabled" : "text-fg-muted";
    if (isDisplay) {
      const displayValue = value != null && value !== "" ? String(value) : null;
      return /* @__PURE__ */ jsxs(
        "div",
        {
          className: cn(
            fieldWrapperStyles({ mode: "display", variant, size }),
            autoWidth && "inline-flex w-auto",
            className
          ),
          "data-field-mode": "display",
          children: [
            StartIcon && /* @__PURE__ */ jsx(ItemPrefix, { children: /* @__PURE__ */ jsx(
              StartIcon,
              {
                size: iconSize,
                className: cn("pointer-events-none", iconColor),
                "aria-hidden": true
              }
            ) }),
            /* @__PURE__ */ jsx(
              "span",
              {
                className: cn(
                  bareInputStyles,
                  // B1 fix(2026-05-05):display mode 單行 ellipsis 截斷(對齊 Notion / Airtable / Linear
                  //   cell display canonical:single-line value 過長 → ellipsis。Textarea display 走 wrap path,
                  //   不在此處;Input display 永遠 single-line。)
                  "truncate",
                  displayValue == null && "text-fg-muted"
                ),
                children: displayValue ?? EMPTY_DISPLAY
              }
            )
          ]
        }
      );
    }
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: cn(
          fieldWrapperStyles({ mode: resolvedMode, variant, size }),
          isEditable && resolvedError && [
            "border-error hover:border-error-hover",
            "focus-within:border-error focus-within:hover:border-error"
          ],
          // autoWidth:wrapper 縮到 inline-flex + w-auto,讓寬度由 startIcon + input(field-sizing: content)+ endAction 自然累加
          autoWidth && "inline-flex w-auto",
          className
        ),
        "data-field-mode": resolvedMode,
        "data-error": isEditable && resolvedError ? "" : void 0,
        "aria-busy": loading || void 0,
        children: [
          StartIcon && /* @__PURE__ */ jsx(ItemPrefix, { children: /* @__PURE__ */ jsx(
            StartIcon,
            {
              size: iconSize,
              className: cn("pointer-events-none", iconColor),
              "aria-hidden": true
            }
          ) }),
          /* @__PURE__ */ jsx(
            "input",
            {
              ref,
              type: "text",
              id: idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
              value,
              readOnly: resolvedMode === "readonly",
              disabled: resolvedMode === "disabled",
              "aria-invalid": resolvedError || void 0,
              "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
              "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
              "aria-errormessage": ariaErrorMessageProp ?? (resolvedError ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
              className: cn(
                bareInputStyles,
                resolvedMode === "disabled" && "text-fg-disabled placeholder:text-fg-disabled cursor-not-allowed",
                // autoWidth:input 本身 field-sizing:content(Chrome 123+ / Safari 17.4+),寬度跟 value 文字寬。
                // w-auto 關掉預設 w-full;min-w-0 讓 flex shrink 不卡住。
                autoWidth && "[field-sizing:content] w-auto min-w-0"
              ),
              ...props
            }
          ),
          loading ? /* @__PURE__ */ jsx(CircularProgress, { size: iconSize, className: "shrink-0" }) : endSlot && isEditable ? (
            // endSlot escape hatch:consumer 自控右側 slot(如 DropdownMenuTrigger asChild wrap)
            endSlot
          ) : endAction && isEditable ? /* @__PURE__ */ jsx(ItemInlineAction, { action: endAction, size: size ?? "md" }) : null
        ]
      }
    );
  }
);
Input.displayName = "Input";
const inputMeta = {
  component: "Input",
  family: 4,
  variants: {},
  sizes: {},
  states: ["default", "hover", "active", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-surface"],
    fg: ["text-fg-disabled", "text-fg-muted"],
    ring: []
  }
};
export {
  Input,
  inputMeta
};
//# sourceMappingURL=input.js.map
