// ==========================================================================
// Text Field — 完整規範頁 (Anatomy + Size + Variants × States)
// ==========================================================================

const { Pill: __Pill_tf, Spinner: __Spinner_tf } = window;
const Pill = __Pill_tf, Spinner = __Spinner_tf;

// 顏色 token
const TF_TOKENS = {
  borderDefault: "rgba(0,0,0,0.23)",
  borderHover:   "rgba(0,0,0,0.87)",
  borderFocus:   "#1976D2",
  borderError:   "#D32F2F",
  borderSuccess: "#2E7D32",
  borderDisabled:"rgba(0,0,0,0.26)",
  bgDisabled:    "rgba(0,0,0,0.06)",
  bgDefault:     "#FFFFFF",
  textPrimary:   "rgba(0,0,0,0.87)",
  textPlaceholder:"rgba(0,0,0,0.45)",
  textDisabled:  "rgba(0,0,0,0.38)",
  helperDefault: "rgba(0,0,0,0.6)",
  helperError:   "#D32F2F",
  helperSuccess: "#2E7D32",
  iconDefault:   "rgba(0,0,0,0.54)",
  iconDisabled:  "rgba(0,0,0,0.38)",
};

// 尺寸
const TF_SIZES = [
  { key: "L", name: "Large",  h: 40, fs: 16, lh: 24, padTop: 8, padBottom: 8, padLeft: 12, padRight: 12, radius: 4, iconSize: 20, use: "新增、編輯頁面、彈窗、表單頁、篩選列" },
  { key: "M", name: "Medium", h: 32, fs: 14, lh: 20, padTop: 6, padBottom: 6, padLeft: 10, padRight: 10, radius: 4, iconSize: 18, use: "抽屜內、批量操作工具列、資訊密度高的地方、表格內嵌操作" },
  { key: "S", name: "Small",  h: 24, fs: 12, lh: 16, padTop: 4, padBottom: 4, padLeft: 8,  padRight: 8,  radius: 4, iconSize: 14, use: "非常少用，通常只用於 Tag、表格內的小型操作 icon 按鈕" },
];

// 7 個狀態
const TF_STATES = [
  { key: "enabled",  label: "Enabled" },
  { key: "hover",    label: "Hover" },
  { key: "focus",    label: "Focus" },
  { key: "filled",   label: "Filled" },
  { key: "disabled", label: "Disabled" },
  { key: "error",    label: "Error" },
  { key: "success",  label: "Success" },
];

// 共用 state 色值（所有變體共用一份；變體只差結構）
const TF_BASE_STATES = {
  enabled:  { border: TF_TOKENS.borderDefault,  bg: TF_TOKENS.bgDefault,   text: TF_TOKENS.textPrimary,  helper: TF_TOKENS.helperDefault },
  hover:    { border: TF_TOKENS.borderHover,    bg: TF_TOKENS.bgDefault,   text: TF_TOKENS.textPrimary,  helper: TF_TOKENS.helperDefault },
  focus:    { border: TF_TOKENS.borderFocus,    bg: TF_TOKENS.bgDefault,   text: TF_TOKENS.textPrimary,  helper: TF_TOKENS.helperDefault, focusRing: true },
  filled:   { border: TF_TOKENS.borderDefault,  bg: TF_TOKENS.bgDefault,   text: TF_TOKENS.textPrimary,  helper: TF_TOKENS.helperDefault, hasValue: true },
  disabled: { border: TF_TOKENS.borderDisabled, bg: TF_TOKENS.bgDisabled,  text: TF_TOKENS.textDisabled, helper: TF_TOKENS.textDisabled },
  error:    { border: TF_TOKENS.borderError,    bg: TF_TOKENS.bgDefault,   text: TF_TOKENS.textPrimary,  helper: TF_TOKENS.helperError,   hasValue: true,  helperText: "輸入格式錯誤" },
  success:  { border: TF_TOKENS.borderSuccess,  bg: TF_TOKENS.bgDefault,   text: TF_TOKENS.textPrimary,  helper: TF_TOKENS.helperSuccess, hasValue: true,  helperText: "格式正確" },
};

// 變體 — 每個變體只差在「結構」(有沒有 icon / 多行 / 數字 stepper / 搜尋清除)
const TF_VARIANTS = [
  { key: "text",     name: "Text Field",   subName: "單行文字輸入框", desc: "最常用的輸入框、單行文字", type: "text",     example: "Jenny" },
  { key: "textarea", name: "Textarea",     subName: "多行文字輸入框", desc: "多行文字、可自動撐高",     type: "textarea", example: "Happy\nBirthday" },
  { key: "icon",     name: "Icon Field",   subName: "圖標輸入框",     desc: "前綴 leading icon",          type: "icon",     example: "Jenny", icon: "user" },
  { key: "number",   name: "Number Field", subName: "數字輸入框",     desc: "帶上下 stepper",              type: "number",   example: "3" },
  { key: "search",   name: "Search Field", subName: "搜尋輸入框",     desc: "前綴搜尋 icon、可清除",      type: "search",   example: "dog",  icon: "search" },
];

// ===========================================================================
// 結構拆解 (Anatomy)
// ===========================================================================
const TfAnatomy = () => (
  <div style={{
    background: "#fff", border: "1px solid var(--n-200)", borderRadius: 12,
    padding: 32, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36, alignItems: "center",
  }}>
    {/* LEFT: Anatomy diagram */}
    <div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 360 }}>
        {/* Label */}
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <NumDot n="1" />
          <span style={{ fontSize: 14, color: TF_TOKENS.textPrimary, fontWeight: 500 }}>Label</span>
        </div>

        {/* Field */}
        <div style={{ display: "flex", alignItems: "center", gap: 10, position: "relative" }}>
          <NumDot n="2" />
          <div style={{
            flex: 1, height: 40, padding: "8px 12px",
            border: `1px solid ${TF_TOKENS.borderDefault}`,
            borderRadius: 4, background: "#fff",
            display: "flex", alignItems: "center", gap: 8,
            position: "relative",
          }}>
            <Icon name="user" size={20} color={TF_TOKENS.iconDefault} />
            <span style={{ fontSize: 16, color: TF_TOKENS.textPlaceholder }}>Placeholder</span>
            {/* callout 5 — pointing to the field */}
            <span style={{
              position: "absolute", right: -28, top: "50%", transform: "translateY(-50%)",
            }}><NumDot n="5" /></span>
          </div>
        </div>

        {/* Helper text */}
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <NumDot n="3" />
          <span style={{ fontSize: 12, color: TF_TOKENS.helperDefault }}>Helper text</span>
          <span><NumDot n="4" /></span>
        </div>
      </div>
    </div>

    {/* RIGHT: legend + CSS */}
    <div>
      <div style={{ fontSize: 11, color: "var(--n-500)", marginBottom: 12, textTransform: "uppercase", letterSpacing: ".06em", fontFamily: "var(--ff-en)" }}>5 個主要元素</div>
      <ol style={{ paddingLeft: 18, margin: 0, fontSize: 13, color: "var(--n-800)", lineHeight: 1.9 }}>
        <li><strong>Label</strong>：描述字段的用途</li>
        <li><strong>Icon</strong>：顯示在輸入框內文字之前</li>
        <li><strong>Helper text</strong>：告知使用者如何格式化或輸入文字</li>
        <li><strong>Placeholder</strong>：提供上下文指導</li>
        <li><strong>Input</strong>：顯示輸入欄位容器</li>
      </ol>

      <div style={{
        marginTop: 18, background: "var(--n-50)", borderRadius: 8, padding: 14,
        fontFamily: "var(--ff-mono)", fontSize: 12, color: "var(--n-700)",
        display: "flex", flexDirection: "column", gap: 4,
      }}>
        <Pill kind="value">height: 40px</Pill>
        <Pill kind="value">font-size: 16px</Pill>
        <Pill kind="value">line-height: 24px</Pill>
        <Pill kind="value">padding: 8px 12px</Pill>
        <Pill kind="value">border: 1px solid rgba(0,0,0,0.23)</Pill>
        <Pill kind="value">border-radius: 4px</Pill>
      </div>
    </div>
  </div>
);

const NumDot = ({ n }) => (
  <span style={{
    display: "inline-flex", width: 22, height: 22, alignItems: "center", justifyContent: "center",
    background: "var(--n-900)", color: "#fff", borderRadius: "50%",
    fontFamily: "var(--ff-en)", fontWeight: 700, fontSize: 12, flexShrink: 0,
  }}>{n}</span>
);

// ===========================================================================
// 尺寸規範 — 3 個 card 並排
// ===========================================================================
const TfSizeSpecs = () => (
  <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
    {TF_SIZES.map(s => (
      <div key={s.key} style={{
        background: "#fff", border: "1px solid var(--n-200)", borderRadius: 12,
        padding: "24px 22px", display: "flex", flexDirection: "column", gap: 18,
      }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
          <span style={{
            display: "inline-flex", width: 32, height: 32, alignItems: "center", justifyContent: "center",
            background: "var(--blue-50)", color: "var(--blue-600)",
            borderRadius: 8, fontFamily: "var(--ff-en)", fontWeight: 700, fontSize: 14,
          }}>{s.key}</span>
          <div>
            <div style={{ fontFamily: "var(--ff-en)", fontSize: 17, fontWeight: 600, color: "var(--n-900)" }}>{s.name}</div>
            <div style={{ fontSize: 12, color: "var(--n-500)" }}>{s.h}px height</div>
          </div>
        </div>

        <div style={{
          background: "var(--n-50)", borderRadius: 8, padding: "28px 16px",
          display: "flex", alignItems: "center", justifyContent: "center", minHeight: 110,
        }}>
          <TfSizeAnnotated s={s} />
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <Pill kind="value">{`height: ${s.h}px`}</Pill>
          <Pill kind="value">{`font-size: ${s.fs}px`}</Pill>
          <Pill kind="value">{`padding: ${s.padTop}px ${s.padLeft}px`}</Pill>
          <Pill kind="value">{`border-radius: ${s.radius}px`}</Pill>
        </div>

        <div style={{ fontSize: 11.5, color: "var(--n-500)", lineHeight: 1.55 }}>
          用於：{s.use}
        </div>
      </div>
    ))}
  </div>
);

const TfSizeAnnotated = ({ s }) => (
  <div style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
    {/* 高度標註 */}
    <div style={{
      position: "absolute", right: "calc(100% + 14px)", top: 0, bottom: 0,
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between",
      pointerEvents: "none",
    }}>
      <span style={{ width: 10, height: 1, background: "#e43131" }} />
      <span style={{
        fontFamily: "var(--ff-mono)", fontSize: 11, color: "#e43131",
        background: "#fff", padding: "1px 6px", borderRadius: 3, border: "1px solid #e43131",
        whiteSpace: "nowrap", fontWeight: 600,
      }}>{s.h}px</span>
      <span style={{ width: 10, height: 1, background: "#e43131" }} />
    </div>
    <div style={{
      position: "absolute", right: "calc(100% + 4px)", top: 0, bottom: 0,
      width: 1, background: "#e43131",
    }} />

    <div style={{
      height: s.h, padding: `${s.padTop}px ${s.padLeft}px ${s.padBottom}px ${s.padRight}px`,
      border: `1px solid ${TF_TOKENS.borderDefault}`, borderRadius: s.radius,
      background: "#fff", display: "inline-flex", alignItems: "center", gap: 6, minWidth: 140,
    }}>
      <Icon name="search" size={s.iconSize} color={TF_TOKENS.iconDefault} />
      <span style={{ fontSize: s.fs, color: TF_TOKENS.textPlaceholder, lineHeight: `${s.lh}px` }}>Search</span>
    </div>
  </div>
);

// ===========================================================================
// 互動式 Prototype — 點擊循環狀態
// ===========================================================================
const InteractiveTextField = ({ v, size, stateKey, onClick, showLabel, showHelper }) => {
  const st = TF_BASE_STATES[stateKey];
  const showValue = st.hasValue;
  const placeholder = "提示訊息";

  // 標題與輔助文字
  const labelStr = "Label";
  const helperStr = st.helperText || "輔助說明文字";

  // 根據 variant type 渲染
  const inputStyle = {
    width: "100%", border: "none", outline: "none", background: "transparent",
    fontSize: size.fs, color: st.text, fontFamily: "inherit",
    lineHeight: `${size.lh}px`, padding: 0,
  };

  const fieldShellStyle = {
    height: v.type === "textarea" ? "auto" : size.h,
    padding: `${size.padTop}px ${size.padRight}px ${size.padBottom}px ${size.padLeft}px`,
    border: `${st.focusRing ? 2 : 1}px solid ${st.border}`,
    borderRadius: size.radius, background: st.bg,
    display: "flex", alignItems: v.type === "textarea" ? "stretch" : "center",
    gap: 8, cursor: stateKey === "disabled" ? "not-allowed" : "text",
    transition: "border-color 120ms, background 120ms",
    minWidth: 200, maxWidth: 280,
    boxSizing: "border-box",
  };

  // 字級調整
  const placeholderEl = !showValue && <span style={{ color: TF_TOKENS.textPlaceholder, fontSize: size.fs, lineHeight: `${size.lh}px` }}>{placeholder}</span>;
  const valueEl = showValue && (v.type === "textarea"
    ? <span style={{ color: st.text, fontSize: size.fs, lineHeight: `${size.lh}px`, whiteSpace: "pre-wrap" }}>{v.example}</span>
    : <span style={{ color: st.text, fontSize: size.fs, lineHeight: `${size.lh}px` }}>{v.example}</span>);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4, width: "100%", maxWidth: 280 }}>
      {/* Label */}
      {showLabel && (
        <label style={{
          fontSize: 12, color: stateKey === "disabled" ? TF_TOKENS.textDisabled : TF_TOKENS.textPrimary,
          fontWeight: 500, marginBottom: 2,
        }}>{labelStr}</label>
      )}

      {/* Field */}
      <div onClick={onClick} style={fieldShellStyle}>
        {/* Leading icon */}
        {(v.type === "icon" || v.type === "search") && (
          <Icon name={v.icon} size={size.iconSize} color={stateKey === "disabled" ? TF_TOKENS.iconDisabled : TF_TOKENS.iconDefault} />
        )}

        {/* Body */}
        {v.type === "textarea" ? (
          <div style={{ flex: 1, minHeight: size.lh * 3, display: "flex", flexDirection: "column", gap: 2 }}>
            {placeholderEl}
            {valueEl}
          </div>
        ) : (
          <div style={{ flex: 1, display: "flex", alignItems: "center" }}>
            {placeholderEl}
            {valueEl}
          </div>
        )}

        {/* Number stepper */}
        {v.type === "number" && (
          <div style={{
            display: "flex", flexDirection: "column",
            borderLeft: `1px solid ${TF_TOKENS.borderDefault}`,
            marginLeft: 4, marginRight: -size.padRight + 2,
            height: size.h - 2,
          }}>
            <span style={{ flex: 1, padding: "0 4px", display: "flex", alignItems: "center", color: TF_TOKENS.iconDefault, fontSize: 10 }}>▲</span>
            <span style={{ flex: 1, padding: "0 4px", display: "flex", alignItems: "center", color: TF_TOKENS.iconDefault, fontSize: 10, borderTop: `1px solid ${TF_TOKENS.borderDefault}` }}>▼</span>
          </div>
        )}

        {/* Search clear button (when filled) */}
        {v.type === "search" && showValue && (
          <Icon name="x" size={Math.round(size.iconSize * 0.85)} color={TF_TOKENS.iconDefault} />
        )}

        {/* Success / Error icon */}
        {stateKey === "success" && (
          <Icon name="ok" size={size.iconSize} color={TF_TOKENS.borderSuccess} />
        )}
        {stateKey === "error" && (
          <Icon name="err" size={size.iconSize} color={TF_TOKENS.borderError} />
        )}
      </div>

      {/* Helper text */}
      {showHelper && (
        <div style={{
          fontSize: 11.5, color: st.helper, lineHeight: 1.55,
          marginTop: 2, display: "flex", alignItems: "center", gap: 4,
        }}>
          {stateKey === "error" && <Icon name="err" size={12} color={st.helper} />}
          {stateKey === "success" && <Icon name="ok" size={12} color={st.helper} />}
          <span>{helperStr}</span>
        </div>
      )}
    </div>
  );
};

const TfInteractivePrototype = ({ v, size, showLabel, showHelper }) => {
  const [stateIdx, setStateIdx] = React.useState(0);
  const stateKey = TF_STATES[stateIdx].key;
  const stateLabel = TF_STATES[stateIdx].label;
  const nextState = () => setStateIdx(i => (i + 1) % TF_STATES.length);

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        padding: "4px 12px", borderRadius: 999,
        background: "var(--blue-50)", color: "var(--blue-700)",
        fontSize: 12, fontWeight: 600, fontFamily: "var(--ff-en)",
        border: "1px solid var(--blue-200)",
      }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--blue-500)" }} />
        {stateLabel}
      </div>

      <div style={{
        background: "var(--n-50)", borderRadius: 8, padding: "24px 20px",
        display: "flex", alignItems: "center", justifyContent: "center", minHeight: 130,
        width: "100%",
      }}>
        <InteractiveTextField v={v} size={size} stateKey={stateKey} onClick={nextState} showLabel={showLabel} showHelper={showHelper} />
      </div>

      <button onClick={nextState} style={{
        fontSize: 11, color: "var(--n-500)", background: "transparent",
        border: "1px dashed var(--n-300)", padding: "4px 10px", borderRadius: 4,
        cursor: "pointer", fontFamily: "inherit",
      }}>點輸入框或這裡 → 下一個狀態</button>
    </div>
  );
};

// ===========================================================================
// State Tokens 顯示
// ===========================================================================
const isColorTok = (v) => typeof v === "string" && (/^#[0-9a-f]{3,8}$/i.test(v.trim()) || /^rgba?\(/i.test(v.trim()));

const TfColorChip = ({ v }) => (
  <span style={{
    display: "inline-block", width: 16, height: 16, borderRadius: 3,
    background: v === "transparent" ? "repeating-conic-gradient(#fafafa 0% 25%, #d8d8d8 0% 50%) 50% / 8px 8px" : v,
    border: "1px solid rgba(0,0,0,.08)", flexShrink: 0,
  }} />
);

const TfStateGrid = () => (
  <div>
    <div style={{
      fontSize: 11, color: "var(--n-500)", marginBottom: 14,
      textTransform: "uppercase", letterSpacing: ".06em", fontFamily: "var(--ff-en)",
    }}>狀態色值 (State Tokens)</div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 20, rowGap: 12 }}>
      {TF_STATES.map(st => {
        const data = TF_BASE_STATES[st.key];
        return (
          <div key={st.key} style={{
            display: "flex", flexDirection: "column", gap: 6,
            paddingBottom: 10, borderBottom: "1px solid var(--n-100)",
          }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--n-800)" }}>{st.label}</div>
            <TfStateValues data={data} />
          </div>
        );
      })}
    </div>
  </div>
);

const TfStateValues = ({ data }) => {
  const items = [
    { k: "border", v: data.border },
    { k: "bg",     v: data.bg },
    { k: "text",   v: data.text },
    { k: "helper", v: data.helper },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      {items.map(it => (
        <div key={it.k} style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ fontSize: 10.5, color: "var(--n-500)", minWidth: 50, fontFamily: "var(--ff-mono)" }}>{it.k}</span>
          {(isColorTok(it.v) || it.v === "transparent") && <TfColorChip v={it.v} />}
          <Pill kind="value">{it.v}</Pill>
        </div>
      ))}
    </div>
  );
};

// ===========================================================================
// Variant Card
// ===========================================================================
const TfVariantCard = ({ v, size, showLabel, showHelper }) => (
  <div style={{
    background: "#fff", border: "1px solid var(--n-200)", borderRadius: 12,
    padding: 24, display: "grid", gridTemplateColumns: "minmax(300px, 380px) 1fr", gap: 36,
  }}>
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
          <span style={{ fontFamily: "var(--ff-en)", fontSize: 18, fontWeight: 700, color: "var(--n-900)" }}>{v.name}</span>
          {v.subName && <span style={{ fontSize: 13, color: "var(--n-500)" }}>{v.subName}</span>}
        </div>
        <div style={{ fontSize: 13, color: "var(--n-600)", marginTop: 4 }}>{v.desc}</div>
      </div>
      <TfInteractivePrototype v={v} size={size} showLabel={showLabel} showHelper={showHelper} />
    </div>
    <TfStateGrid />
  </div>
);

// ===========================================================================
// Size 切換 + Toggles
// ===========================================================================
const TfSizeTabs = ({ size, setSize }) => (
  <div style={{
    display: "inline-flex", padding: 4, gap: 4,
    background: "var(--n-100)", borderRadius: 10,
  }}>
    {TF_SIZES.map(s => {
      const on = size === s.key;
      return (
        <button key={s.key} onClick={() => setSize(s.key)} style={{
          padding: "8px 18px", border: "none",
          background: on ? "#fff" : "transparent",
          borderRadius: 8, cursor: "pointer",
          fontSize: 13, fontWeight: on ? 600 : 400,
          color: on ? "var(--n-900)" : "var(--n-600)",
          boxShadow: on ? "var(--shadow-1)" : "none",
          fontFamily: "inherit", minWidth: 100,
        }}>
          <span style={{ fontFamily: "var(--ff-en)" }}>{s.name}</span>
          <span style={{ fontFamily: "var(--ff-mono)", fontSize: 11, color: on ? "var(--n-500)" : "var(--n-400)", marginLeft: 6 }}>{s.h}px</span>
        </button>
      );
    })}
  </div>
);

const TfToggle = ({ label, on, onChange }) => (
  <div style={{
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "6px 12px", background: "var(--n-100)", borderRadius: 10,
    fontSize: 13, color: "var(--n-700)",
  }}>
    <span>{label}</span>
    <button onClick={() => onChange(!on)} style={{
      position: "relative", width: 36, height: 20, borderRadius: 999,
      background: on ? "var(--blue-500)" : "var(--n-300)",
      border: "none", cursor: "pointer", padding: 0,
      transition: "background 160ms ease",
    }} aria-label={`toggle ${label}`}>
      <span style={{
        position: "absolute", top: 2, left: on ? 18 : 2,
        width: 16, height: 16, borderRadius: "50%", background: "#fff",
        transition: "left 160ms ease",
        boxShadow: "0 1px 3px rgba(0,0,0,.2)",
      }} />
    </button>
  </div>
);

// ===========================================================================
// Showcase
// ===========================================================================
const TfShowcase = () => {
  const [sizeKey, setSizeKey] = React.useState("L");
  const [showLabel, setShowLabel] = React.useState(true);
  const [showHelper, setShowHelper] = React.useState(true);
  const size = TF_SIZES.find(s => s.key === sizeKey);
  return (
    <>
      <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 20, flexWrap: "wrap" }}>
        <TfSizeTabs size={sizeKey} setSize={setSizeKey} />
        <TfToggle label="顯示 Label" on={showLabel} onChange={setShowLabel} />
        <TfToggle label="顯示 Helper text" on={showHelper} onChange={setShowHelper} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {TF_VARIANTS.map(v => <TfVariantCard key={v.key} v={v} size={size} showLabel={showLabel} showHelper={showHelper} />)}
      </div>
    </>
  );
};

// ===========================================================================
// 主 Section
// ===========================================================================
const TextFieldSpec = () => (
  <div style={{ display: "flex", flexDirection: "column", gap: 36 }}>
    <section>
      <h2 className="ds-h2" style={{ marginTop: 0 }}>結構拆解 (Component Anatomy)</h2>
      <TfAnatomy />
    </section>

    <section>
      <h2 className="ds-h2">尺寸規範 — 大 / 中 / 小</h2>
      <TfSizeSpecs />
    </section>

    <section>
      <h2 className="ds-h2">變體 — 5 種輸入框</h2>
      <TfShowcase />
    </section>
  </div>
);

window.TextFieldSpec = TextFieldSpec;