import {
  __objRest,
  __spreadValues
} from "./chunk-N552FDTV.js";

// src/atoms/auto-sizing-input.tsx
import {
  forwardRef,
  useCallback,
  useEffect,
  useRef,
  useState
} from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var AutoSizingInput = forwardRef(
  (_a, ref) => {
    var _b = _a, { value: _value, onChangeValue, onChange } = _b, rest = __objRest(_b, ["value", "onChangeValue", "onChange"]);
    const [value, setValue] = useState(_value);
    const [width, setWidth] = useState(0);
    const span = useRef(null);
    useEffect(() => {
      span.current && setWidth(span.current.offsetWidth);
    }, [value]);
    const changeHandler = useCallback(
      (evt) => {
        onChange == null ? void 0 : onChange(evt);
        setValue(evt.target.value);
      },
      [onChange]
    );
    useEffect(() => {
      setValue(_value || "");
    }, [_value]);
    useEffect(() => {
      onChangeValue == null ? void 0 : onChangeValue(value || "");
    }, [value, onChangeValue]);
    return /* @__PURE__ */ jsxs("div", { className: "auto-sizing-input wrapper", style: { width: width + 24 }, children: [
      /* @__PURE__ */ jsx("input", __spreadValues({ onChange: changeHandler, ref, value }, rest)),
      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ref: span, style: rest.style, children: value })
    ] });
  }
);
AutoSizingInput.displayName = "AutoSizingInput";

export {
  AutoSizingInput
};
//# sourceMappingURL=chunk-UARPROHP.js.map