import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils.js";
import { useFieldContext, useResolvedFieldVariant, useResolvedFieldInvalid, useResolvedFieldSize, useResolvedFieldMode } from "../Field/field-context.js";
import { EMPTY_DISPLAY } from "../Field/field-wrapper.js";
const textareaVariants = cva(
  [
    "w-full rounded-md",
    "text-foreground font-normal",
    "outline-none resize-y",
    "placeholder:text-fg-muted",
    // K10 fix(2026-05-04):disabled 時 placeholder + text 切 fg-disabled(parallel 到 bareInputStyles)
    //   Textarea 自身 `<textarea disabled>` 帶 disabled HTML attribute,用 `disabled:` variant 直接命中
    "disabled:placeholder:text-fg-disabled disabled:text-fg-disabled",
    "px-3 py-2",
    "transition-colors duration-150"
  ],
  {
    variants: {
      mode: {
        edit: "",
        display: "",
        readonly: "",
        disabled: ""
      },
      // chrome 對齊 fieldWrapperStyles.variant(default / bare / naked)。
      variant: {
        default: "",
        bare: "",
        naked: ""
      },
      size: {
        sm: "text-body",
        md: "text-body",
        lg: "text-body-lg"
      }
    },
    compoundVariants: [
      // default chrome × mode
      {
        mode: "edit",
        variant: "default",
        className: [
          "bg-surface border border-border",
          "hover:border-border-hover",
          "focus-visible:!border-primary focus-visible:hover:!border-primary"
        ]
      },
      {
        mode: "display",
        variant: "default",
        // 2026-05-13 Q3 Path Ⅰ:Textarea default display zero chrome,!px-0 !py-0 override base `px-3 py-2`
        // (跟 Input 同 SSOT,per field-controls.spec.md (d))
        className: "bg-transparent border border-transparent !px-0 !py-0"
      },
      {
        mode: "readonly",
        variant: "default",
        className: "bg-disabled border border-transparent"
      },
      {
        mode: "disabled",
        variant: "default",
        className: "bg-disabled border border-transparent cursor-not-allowed text-fg-disabled"
      },
      // bare chrome × mode(對齊 fieldWrapperStyles bare 規則)
      {
        mode: "edit",
        variant: "bare",
        className: [
          "bg-transparent border border-transparent",
          "hover:border-border",
          "focus-visible:!border-primary focus-visible:hover:!border-primary"
        ]
      },
      {
        mode: "display",
        variant: "bare",
        className: "bg-transparent border border-transparent"
      },
      {
        mode: "readonly",
        variant: "bare",
        className: "bg-transparent border border-transparent"
      },
      {
        mode: "disabled",
        variant: "bare",
        className: "bg-transparent border border-transparent cursor-not-allowed opacity-disabled text-fg-disabled"
      },
      // naked chrome × mode — cell-as-input substrate(2026-05-06 v14 revert v12)。
      //   v12 `!absolute -inset-px` autoRowHeight 不相容 → revert v9 baseline + 保留 v13.3
      //   focus !important。focus-visible 用 textarea 自身 selector(focusable element)。
      {
        mode: "edit",
        variant: "naked",
        className: [
          "bg-transparent !rounded-none !resize-none !h-full",
          "!px-[var(--table-cell-px)] !py-[var(--table-cell-py)]",
          "border border-border",
          "hover:border-border-hover",
          "focus-visible:!border-primary focus-visible:hover:!border-primary",
          // textarea UA stylesheet 預設 line-height: normal(1.2-1.5 不定),會跟 display
          // `<div>` text-body line-height: 1.5(21px @ 14px)不一致 → cell 進 edit 後 height
          // shift。顯式 leading 對齊 div 行為。
          "!leading-[1.5]"
        ]
      },
      // 2026-05-13 Q1 R4 verify(per codex Q1 verdict 補 Textarea nuance):
      // Textarea naked display/readonly/disabled 用 `!h-full`,**不**對齊 Field wrapper 的 `!h-auto`。
      // Why divergence:textarea 是 native form element 帶 intrinsic rows-based height,且 cell 內
      // multi-line text 需要撐滿 cell 而非依 line-height intrinsic。`!h-full` 讓 textarea 填滿 cell
      // 高度,文字 anchored to cell.top + cell padding(同視覺結果 Field wrapper autoRow !h-auto)。
      // 此 divergence intentional + documented;非 SSOT violation。
      { mode: "display", variant: "naked", className: "bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]" },
      { mode: "readonly", variant: "naked", className: "bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]" },
      // 2026-05-13 codex V2 fix:移除 `opacity-disabled` blanket(對齊 field-wrapper.tsx naked R3 fix +
      //   color.spec.md:729 逃生艙 rule)。Textarea 已用具體 `text-fg-disabled` token,不需要 wrapper opacity。
      { mode: "disabled", variant: "naked", className: "bg-transparent !rounded-none cursor-not-allowed text-fg-disabled !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]" }
    ],
    defaultVariants: {
      mode: "edit",
      variant: "default",
      size: "md"
    }
  }
);
const Textarea = React.forwardRef(
  ({
    mode: modeProp,
    variant: variantProp,
    error: errorProp = false,
    size: sizeProp,
    className,
    disabled,
    readOnly,
    rows = 3,
    value,
    id: idProp,
    "aria-describedby": ariaDescribedByProp,
    "aria-errormessage": ariaErrorMessageProp,
    ...props
  }, ref) => {
    const fieldCtx = useFieldContext();
    const variant = useResolvedFieldVariant(variantProp);
    const error = useResolvedFieldInvalid(errorProp);
    const size = useResolvedFieldSize(sizeProp);
    const resolvedMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly });
    const isEditable = resolvedMode === "edit";
    const isDisplay = resolvedMode === "display";
    const inputId = idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id);
    const ariaDescribedBy = ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId);
    const ariaErrorMessage = ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0);
    if (isDisplay) {
      const displayValue = value != null && value !== "" ? String(value) : null;
      return /* @__PURE__ */ jsx(
        "div",
        {
          id: inputId,
          "data-field-mode": "display",
          "aria-describedby": ariaDescribedBy,
          className: cn(
            textareaVariants({ mode: "display", variant, size }),
            "whitespace-pre-wrap break-words",
            displayValue == null && "text-fg-muted",
            className
          ),
          children: displayValue ?? EMPTY_DISPLAY
        }
      );
    }
    return /* @__PURE__ */ jsx(
      "textarea",
      {
        ref,
        id: inputId,
        rows,
        value,
        disabled: resolvedMode === "disabled",
        readOnly: resolvedMode === "readonly",
        "aria-invalid": error || void 0,
        "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
        "aria-describedby": ariaDescribedBy,
        "aria-errormessage": ariaErrorMessage,
        "data-field-mode": resolvedMode,
        "data-error": isEditable && error ? "" : void 0,
        className: cn(
          textareaVariants({ mode: resolvedMode, variant, size }),
          isEditable && error && [
            "border-error hover:border-error-hover",
            "focus-visible:border-error focus-visible:hover:border-error"
          ],
          className
        ),
        ...props
      }
    );
  }
);
Textarea.displayName = "Textarea";
const textareaMeta = {
  component: "Textarea",
  family: 4,
  variants: {},
  sizes: {
    sm: { typography: "body" },
    md: { typography: "body" },
    lg: { typography: "body-lg" }
  },
  // states 對齊 cva compoundVariants + anatomy ColorMatrix 真實 state 集合;
  //   text input 無 'active'(按下)視覺態(Material/Polaris/Carbon TextArea 共識)。
  states: ["default", "hover", "focus-visible", "readonly", "disabled", "error"],
  tokens: {
    bg: ["bg-disabled", "bg-surface"],
    fg: ["text-fg-disabled", "text-fg-muted", "text-foreground"],
    ring: []
  },
  defaultSize: "md"
};
export {
  Textarea,
  textareaMeta,
  textareaVariants
};
//# sourceMappingURL=textarea.js.map
