@sia.soul/sia-react-ui 0.1.77 → 0.1.78

package/dist/{chunk-YMOOL62S.js → chunk-XHLIIDD2.js}

@@ -1,6 +1,7 @@
 import {
-  Button
-} from "./chunk-IKAMZNCK.js";
+  Button,
+  TextArea
+} from "./chunk-JZWTTSOZ.js";
 import {
   PopupPortal,
   useControlSize,
@@ -1340,10 +1341,331 @@ var Dropdown = Object.assign(DropdownRoot, {
   Button: DropdownButton
 });
 
+// src/components/Modal.tsx
+import { forwardRef as forwardRef2, useEffect as useEffect4, useId as useId2, useRef as useRef4, useState as useState3 } from "react";
+import { createRoot } from "react-dom/client";
+
+// src/components/Overlay.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { createPortal } from "react-dom";
+var bodyLockCount = 0;
+var previousBodyOverflow = "";
+var overlayStack = [];
+function lockBodyScroll() {
+  if (bodyLockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  bodyLockCount += 1;
+  return () => {
+    bodyLockCount = Math.max(0, bodyLockCount - 1);
+    if (bodyLockCount === 0) document.body.style.overflow = previousBodyOverflow;
+  };
+}
+function focusableElements(container) {
+  return [...container.querySelectorAll(
+    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+  )].filter((element) => !element.hidden && element.getAttribute("aria-hidden") !== "true");
+}
+function useOverlayLifecycle(open, panelRef, onRequestClose, keyboard = true) {
+  const overlayIdRef = useRef3(/* @__PURE__ */ Symbol("sia-overlay"));
+  const closeRef = useRef3(onRequestClose);
+  closeRef.current = onRequestClose;
+  useEffect3(() => {
+    if (!open || typeof document === "undefined") return void 0;
+    const overlayId = overlayIdRef.current;
+    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    overlayStack.push(overlayId);
+    const unlockBody = lockBodyScroll();
+    const focusTimer = window.setTimeout(() => {
+      const panel = panelRef.current;
+      if (!panel) return;
+      const [firstFocusable] = focusableElements(panel);
+      (firstFocusable ?? panel).focus({ preventScroll: true });
+    }, 0);
+    function handleKeyDown(event) {
+      if (overlayStack.at(-1) !== overlayId) return;
+      if (event.key === "Escape" && keyboard) {
+        event.preventDefault();
+        closeRef.current();
+        return;
+      }
+      if (event.key !== "Tab" || !panelRef.current) return;
+      const focusable = focusableElements(panelRef.current);
+      if (focusable.length === 0) {
+        event.preventDefault();
+        panelRef.current.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable.at(-1);
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.clearTimeout(focusTimer);
+      document.removeEventListener("keydown", handleKeyDown);
+      const index = overlayStack.lastIndexOf(overlayId);
+      if (index >= 0) overlayStack.splice(index, 1);
+      unlockBody();
+      previouslyFocused?.focus({ preventScroll: true });
+    };
+  }, [keyboard, open, panelRef]);
+}
+function OverlayPortal({ children, container }) {
+  if (typeof document === "undefined") return null;
+  const target = typeof container === "function" ? container() : container ?? document.body;
+  return createPortal(children, target);
+}
+
+// src/components/Modal.tsx
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var modalHandles = /* @__PURE__ */ new Set();
+var MODAL_MOTION_DURATION = 220;
+var typeIcons = {
+  info: /* @__PURE__ */ jsx5(Icon, { name: "info", size: 23 }),
+  success: /* @__PURE__ */ jsx5(Icon, { name: "circle-check", size: 23 }),
+  warning: /* @__PURE__ */ jsx5(Icon, { name: "warning", size: 23 }),
+  error: /* @__PURE__ */ jsx5(Icon, { name: "circle-close", size: 23 }),
+  confirm: /* @__PURE__ */ jsx5(Icon, { name: "question", size: 23 })
+};
+var ModalRoot = forwardRef2(function Modal({
+  open,
+  title,
+  children,
+  footer,
+  footerExtra,
+  type = "default",
+  okText = "\u786E\u5B9A",
+  cancelText = "\u53D6\u6D88",
+  showCancel = type === "default" || type === "confirm",
+  confirmLoading = false,
+  okButtonProps,
+  cancelButtonProps,
+  closable = true,
+  maskClosable = true,
+  keyboard = true,
+  centered = false,
+  width = 520,
+  height,
+  zIndex = 1e3,
+  getContainer,
+  onOk,
+  onCancel,
+  onOpenChange,
+  afterOpenChange,
+  className = "",
+  style,
+  ...props
+}, forwardedRef) {
+  const localRef = useRef4(null);
+  const titleId = useId2();
+  const [submitting, setSubmitting] = useState3(false);
+  const [rendered, setRendered] = useState3(open);
+  const [closing, setClosing] = useState3(false);
+  const afterOpenChangeRef = useRef4(afterOpenChange);
+  afterOpenChangeRef.current = afterOpenChange;
+  const submitLock = useRef4(false);
+  useEffect4(() => {
+    if (!open || !rendered) return void 0;
+    const timer = window.setTimeout(() => afterOpenChangeRef.current?.(true), MODAL_MOTION_DURATION);
+    return () => window.clearTimeout(timer);
+  }, [open, rendered]);
+  useEffect4(() => {
+    if (open) {
+      setRendered(true);
+      setClosing(false);
+      return void 0;
+    }
+    if (!rendered) return void 0;
+    setClosing(true);
+    const timer = window.setTimeout(() => {
+      setRendered(false);
+      setClosing(false);
+      afterOpenChangeRef.current?.(false);
+    }, MODAL_MOTION_DURATION);
+    return () => window.clearTimeout(timer);
+  }, [open, rendered]);
+  function setRef(node) {
+    localRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  }
+  function requestClose() {
+    if (submitting || confirmLoading) return;
+    onCancel?.();
+    onOpenChange?.(false);
+  }
+  async function handleOk() {
+    if (submitLock.current || confirmLoading) return;
+    submitLock.current = true;
+    if (!onOk) {
+      onOpenChange?.(false);
+      submitLock.current = false;
+      return;
+    }
+    try {
+      const result = onOk();
+      if (result instanceof Promise) {
+        setSubmitting(true);
+        const resolved = await result;
+        if (resolved !== false) onOpenChange?.(false);
+      } else if (result !== false) {
+        onOpenChange?.(false);
+      }
+    } catch {
+      return;
+    } finally {
+      submitLock.current = false;
+      setSubmitting(false);
+    }
+  }
+  useOverlayLifecycle(rendered, localRef, requestClose, keyboard);
+  if (!rendered) return null;
+  const mergedStyle = {
+    ...height !== void 0 ? { display: "flex", flexDirection: "column", height, maxHeight: "calc(100dvh - 48px)" } : {},
+    ...style,
+    "--sia-modal-width": typeof width === "number" ? `${width}px` : width
+  };
+  const loading = submitting || confirmLoading;
+  const defaultFooter = /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    showCancel ? /* @__PURE__ */ jsx5(Button, { ...cancelButtonProps, onClick: requestClose, disabled: loading || cancelButtonProps?.disabled, children: cancelText }) : null,
+    /* @__PURE__ */ jsx5(Button, { variant: "primary", ...okButtonProps, onClick: handleOk, loading, children: okText })
+  ] });
+  return /* @__PURE__ */ jsx5(OverlayPortal, { container: getContainer, children: /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: `sia-modal-root${centered ? " sia-modal-root--centered" : ""}`,
+      "data-state": closing ? "closing" : "open",
+      style: { zIndex },
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget && maskClosable) requestClose();
+      },
+      children: /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          ref: setRef,
+          className: `sia-modal sia-modal--${type} ${className}`.trim(),
+          style: mergedStyle,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? titleId : void 0,
+          tabIndex: -1,
+          ...withTitleTooltip(props),
+          children: [
+            /* @__PURE__ */ jsxs5("div", { className: "sia-modal__header", style: height !== void 0 ? { flexShrink: 0 } : void 0, children: [
+              /* @__PURE__ */ jsxs5("div", { className: "sia-modal__heading", children: [
+                typeIcons[type] ? /* @__PURE__ */ jsx5("span", { className: "sia-modal__type-icon", "aria-hidden": "true", children: typeIcons[type] }) : null,
+                title ? /* @__PURE__ */ jsx5("strong", { id: titleId, children: title }) : null
+              ] }),
+              closable ? /* @__PURE__ */ jsx5("button", { type: "button", className: "sia-modal__close", "aria-label": "\u5173\u95ED\u5BF9\u8BDD\u6846", onClick: requestClose, children: /* @__PURE__ */ jsx5(Icon, { name: "close", size: 17 }) }) : null
+            ] }),
+            children !== void 0 ? /* @__PURE__ */ jsx5("div", { className: "sia-modal__body", style: height !== void 0 ? { flex: 1, minHeight: 0, overflow: "auto" } : void 0, children }) : null,
+            footer !== null ? /* @__PURE__ */ jsxs5("div", { className: "sia-modal__footer", style: height !== void 0 ? { flexShrink: 0 } : void 0, children: [
+              footer === void 0 && footerExtra != null ? /* @__PURE__ */ jsx5("div", { style: { marginRight: "auto" }, children: footerExtra }) : null,
+              footer ?? defaultFooter
+            ] }) : null
+          ]
+        }
+      )
+    }
+  ) });
+});
+function openModal(config) {
+  if (typeof document === "undefined") return { destroy() {
+  }, update() {
+  } };
+  const container = document.createElement("div");
+  container.className = "sia-modal-api-host";
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  let currentConfig = config;
+  let currentOpen = true;
+  let destroyed = false;
+  let mounted = false;
+  function cleanup() {
+    if (destroyed) return;
+    destroyed = true;
+    root.unmount();
+    container.remove();
+    modalHandles.delete(handle);
+  }
+  function closeWithMotion() {
+    if (destroyed || !currentOpen) return;
+    currentOpen = false;
+    render();
+  }
+  function ModalInstance() {
+    useEffect4(() => {
+      mounted = true;
+      if (!currentOpen) render();
+    }, []);
+    return /* @__PURE__ */ jsx5(ModalRoot, { ...currentConfig, open: !mounted || currentOpen, onOpenChange: (nextOpen) => {
+      currentConfig.onOpenChange?.(nextOpen);
+      if (!nextOpen) closeWithMotion();
+    }, afterOpenChange: (nextOpen) => {
+      try {
+        currentConfig.afterOpenChange?.(nextOpen);
+      } finally {
+        if (!nextOpen) queueMicrotask(cleanup);
+      }
+    } });
+  }
+  function render() {
+    root.render(/* @__PURE__ */ jsx5(ModalInstance, {}));
+  }
+  const handle = {
+    destroy: closeWithMotion,
+    update(next) {
+      if (destroyed) return;
+      currentConfig = { ...currentConfig, ...next };
+      render();
+    }
+  };
+  modalHandles.add(handle);
+  render();
+  return handle;
+}
+function preset(type, defaults = {}) {
+  return (config) => openModal({
+    okText: type === "confirm" ? "\u786E\u5B9A" : "\u77E5\u9053\u4E86",
+    showCancel: type === "confirm",
+    closable: type !== "confirm",
+    maskClosable: type !== "confirm",
+    ...defaults,
+    ...config,
+    type
+  });
+}
+var Modal2 = Object.assign(ModalRoot, {
+  /** 直接打开实例，返回更新和关闭句柄；关闭动画完成后先调用 afterOpenChange(false)，再卸载实例。 */
+  open: openModal,
+  /** 显示普通信息提示。 */
+  info: preset("info", { title: "\u63D0\u793A" }),
+  /** 显示成功提示。 */
+  success: preset("success", { title: "\u64CD\u4F5C\u6210\u529F" }),
+  /** 显示警告提示。 */
+  warning: preset("warning", { title: "\u8BF7\u6CE8\u610F" }),
+  /** 显示错误提示。 */
+  error: preset("error", { title: "\u64CD\u4F5C\u5931\u8D25" }),
+  /** 打开确认弹框，支持异步确认；返回 false 可阻止关闭。 */
+  confirm: preset("confirm", { title: "\u786E\u8BA4\u64CD\u4F5C" }),
+  /** 关闭由此 API 打开的所有弹层。 */
+  destroyAll() {
+    [...modalHandles].forEach((handle) => handle.destroy());
+  }
+});
+
 // src/components/Input.tsx
-import { forwardRef as forwardRef2, useId as useId2, useRef as useRef3, useState as useState3 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var Input = forwardRef2(function Input2({
+import { forwardRef as forwardRef3, useId as useId3, useRef as useRef5, useState as useState4 } from "react";
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var Input = forwardRef3(function Input2({
   label,
   hint,
   status = "default",
@@ -1362,15 +1684,18 @@ var Input = forwardRef2(function Input2({
   defaultValue,
   maxLength,
   onChange,
+  expandable = false,
   ...props
 }, forwardedRef) {
   const size = useControlSize(sizeProp);
-  const fallbackId = useId2();
+  const fallbackId = useId3();
   const inputId = id ?? fallbackId;
-  const localRef = useRef3(null);
-  const [uncontrolledValue, setUncontrolledValue] = useState3(() => defaultValue === void 0 ? "" : String(defaultValue));
+  const localRef = useRef5(null);
+  const [uncontrolledValue, setUncontrolledValue] = useState4(() => defaultValue === void 0 ? "" : String(defaultValue));
   const currentText = value !== void 0 ? String(value) : uncontrolledValue;
   const hasValue = currentText.length > 0;
+  const [expanded, setExpanded] = useState4(false);
+  const [expandedDraft, setExpandedDraft] = useState4("");
   const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
   const hintId = `${inputId}-hint`;
   const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
@@ -1406,7 +1731,7 @@ var Input = forwardRef2(function Input2({
     event.preventDefault();
     localRef.current?.focus({ preventScroll: true });
   }
-  const input = /* @__PURE__ */ jsx5(
+  const input = /* @__PURE__ */ jsx6(
     "input",
     {
       ...withTitleTooltip(props),
@@ -1423,24 +1748,82 @@ var Input = forwardRef2(function Input2({
       onChange: handleChange
     }
   );
-  const control = /* @__PURE__ */ jsxs5("span", { onMouseDown: handleControlMouseDown, className: `sia-input-control sia-input-control--${size} sia-input-control--${status}${floatingPlaceholder ? " sia-input-control--floating" : ""}${floatingPlaceholder && hasValue ? " is-filled" : ""}${disabled ? " is-disabled" : ""}`, children: [
-    prefix ? /* @__PURE__ */ jsx5("span", { className: "sia-input-control__affix", children: prefix }) : null,
-    floatingPlaceholder ? /* @__PURE__ */ jsxs5("span", { className: "sia-input-control__input-wrap", children: [
+  const control = /* @__PURE__ */ jsxs6("span", { onMouseDown: handleControlMouseDown, className: `sia-input-control sia-input-control--${size} sia-input-control--${status}${floatingPlaceholder ? " sia-input-control--floating" : ""}${floatingPlaceholder && hasValue ? " is-filled" : ""}${disabled ? " is-disabled" : ""}`, children: [
+    prefix ? /* @__PURE__ */ jsx6("span", { className: "sia-input-control__affix", children: prefix }) : null,
+    floatingPlaceholder ? /* @__PURE__ */ jsxs6("span", { className: "sia-input-control__input-wrap", children: [
       input,
-      /* @__PURE__ */ jsx5("span", { className: "sia-input-control__floating-placeholder", "aria-hidden": "true", children: placeholder })
+      /* @__PURE__ */ jsx6("span", { className: "sia-input-control__floating-placeholder", "aria-hidden": "true", children: placeholder })
     ] }) : input,
-    allowClear && hasValue && !disabled ? /* @__PURE__ */ jsx5("button", { className: "sia-input-control__clear", type: "button", "aria-label": "\u6E05\u7A7A\u8F93\u5165", onClick: clearValue, children: /* @__PURE__ */ jsx5(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-    suffix ? /* @__PURE__ */ jsx5("span", { className: "sia-input-control__affix", children: suffix }) : null,
-    showCount ? /* @__PURE__ */ jsxs5("span", { className: `sia-input-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
+    allowClear && hasValue && !disabled ? /* @__PURE__ */ jsx6("button", { className: "sia-input-control__clear", type: "button", "aria-label": "\u6E05\u7A7A\u8F93\u5165", onClick: clearValue, children: /* @__PURE__ */ jsx6(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
+    suffix ? /* @__PURE__ */ jsx6("span", { className: "sia-input-control__affix", children: suffix }) : null,
+    expandable && !disabled && !props.readOnly && (!props.type || props.type === "text") ? /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: "sia-input-control__expand",
+        "aria-label": "\u5C55\u5F00\u7F16\u8F91",
+        title: "\u5C55\u5F00\u7F16\u8F91",
+        onClick: () => {
+          if (localRef.current?.matches(":disabled")) return;
+          setExpandedDraft(currentText);
+          setExpanded(true);
+        },
+        children: /* @__PURE__ */ jsx6(Icon, { name: "expand", size: 15 })
+      }
+    ) : null,
+    showCount ? /* @__PURE__ */ jsxs6("span", { className: `sia-input-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
       currentText.length,
       maxLength !== void 0 ? `/${maxLength}` : null
     ] }) : null
   ] });
-  if (!label && !hint) return /* @__PURE__ */ jsx5("span", { className: `sia-field ${className}`.trim(), children: control });
-  return /* @__PURE__ */ jsxs5("span", { className: `sia-field ${className}`.trim(), children: [
-    label ? /* @__PURE__ */ jsx5("label", { className: "sia-field__label", htmlFor: inputId, children: label }) : null,
-    control,
-    hint ? /* @__PURE__ */ jsx5("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
+  const editor = expandable ? /* @__PURE__ */ jsx6(
+    Modal2,
+    {
+      open: expanded,
+      title: "\u5C55\u5F00\u7F16\u8F91",
+      okText: "\u786E\u5B9A",
+      cancelText: "\u53D6\u6D88",
+      onCancel: () => setExpanded(false),
+      afterOpenChange: (open) => {
+        if (!open) setExpandedDraft("");
+      },
+      onOk: () => {
+        const target = localRef.current;
+        if (!target || target.matches(":disabled") || props.readOnly) return false;
+        const normalized = expandedDraft.replace(/\r\n|[\r\n]/g, " ");
+        const next = maxLength !== void 0 && maxLength >= 0 ? normalized.slice(0, maxLength) : normalized;
+        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(target, next);
+        target.dispatchEvent(new Event("input", { bubbles: true }));
+        setUncontrolledValue(next);
+        setExpanded(false);
+      },
+      children: /* @__PURE__ */ jsx6(
+        TextArea,
+        {
+          "aria-label": "\u5C55\u5F00\u7F16\u8F91\u5185\u5BB9",
+          value: expandedDraft,
+          onChange: (event) => setExpandedDraft(event.target.value),
+          maxLength,
+          showCount,
+          placeholder,
+          rows: 8,
+          disabled,
+          readOnly: props.readOnly
+        }
+      )
+    }
+  ) : null;
+  if (!label && !hint) return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    /* @__PURE__ */ jsx6("span", { className: `sia-field ${className}`.trim(), children: control }),
+    editor
+  ] });
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    /* @__PURE__ */ jsxs6("span", { className: `sia-field ${className}`.trim(), children: [
+      label ? /* @__PURE__ */ jsx6("label", { className: "sia-field__label", htmlFor: inputId, children: label }) : null,
+      control,
+      hint ? /* @__PURE__ */ jsx6("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
+    ] }),
+    editor
   ] });
 });
 
@@ -1452,5 +1835,8 @@ export {
   Steps,
   Segmented,
   Dropdown,
+  useOverlayLifecycle,
+  OverlayPortal,
+  Modal2 as Modal,
   Input
 };

package/dist/{chunk-K5OU5NOT.js → chunk-Y4Y2NVBM.js}

@@ -1,10 +1,10 @@
 import {
   FloatingScrollbarProvider,
   Select
-} from "./chunk-TKCXP6RZ.js";
+} from "./chunk-WXERMWTW.js";
 import {
   Icon
-} from "./chunk-YMOOL62S.js";
+} from "./chunk-XHLIIDD2.js";
 import {
   PopupPortal,
   useControlSize,

package/dist/{core-CBLT4Vfl.d.ts → core-0ml74Q-C.d.ts}

@@ -1887,6 +1887,13 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix
     showCount?: boolean;
     /** 占位文案的显示模式 */
     placeholderMode?: InputPlaceholderMode;
+    /**
+     * 在普通文本输入框末尾显示展开按钮，弹框正文仅显示多行编辑器，继承 maxLength、placeholder 和 showCount。
+     * 打开时复制当前值，确定后通过原生 input 事件触发 onChange；受控模式需由调用方回写 value，取消不修改原值。
+     * 多行换行在回填单行输入框时转换为空格；禁用、只读及非 text 类型不显示展开按钮。
+     * @defaultValue false
+     */
+    expandable?: boolean;
 }
 /** 输入框组件。 */
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;

package/dist/{core-Bx07vzrr.d.cts → core-vGTHkzIa.d.cts}

@@ -1887,6 +1887,13 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix
     showCount?: boolean;
     /** 占位文案的显示模式 */
     placeholderMode?: InputPlaceholderMode;
+    /**
+     * 在普通文本输入框末尾显示展开按钮，弹框正文仅显示多行编辑器，继承 maxLength、placeholder 和 showCount。
+     * 打开时复制当前值，确定后通过原生 input 事件触发 onChange；受控模式需由调用方回写 value，取消不修改原值。
+     * 多行换行在回填单行输入框时转换为空格；禁用、只读及非 text 类型不显示展开按钮。
+     * @defaultValue false
+     */
+    expandable?: boolean;
 }
 /** 输入框组件。 */
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;