"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/atoms/auto-sizing-input.tsx
var auto_sizing_input_exports = {};
__export(auto_sizing_input_exports, {
  AutoSizingInput: () => AutoSizingInput
});
module.exports = __toCommonJS(auto_sizing_input_exports);
var import_themes = require("@radix-ui/themes");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var useTextWidth = (text, font) => {
  const [textWidth, setTextWidth] = (0, import_react.useState)(0);
  (0, import_react.useEffect)(() => {
    if (!text) {
      setTextWidth(0);
      return;
    }
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    if (!context) {
      setTextWidth(0);
      return;
    }
    context.font = font;
    const width = Math.ceil(context.measureText(text).width);
    setTextWidth(width);
  }, [text, font]);
  return textWidth;
};
var getFontString = (element) => {
  if (!element) return "14px sans-serif";
  if (typeof window === "undefined") return "14px sans-serif";
  const computedStyle = window.getComputedStyle(element);
  const fontSize = computedStyle.fontSize || "14px";
  const fontFamily = computedStyle.fontFamily || "sans-serif";
  const fontWeight = computedStyle.fontWeight || "normal";
  const fontStyle = computedStyle.fontStyle || "normal";
  return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
};
var AutoSizingInput = (0, import_react.forwardRef)(
  (_a, ref) => {
    var _b = _a, {
      value: externalValue,
      onChangeValue,
      onChange,
      maxWidth,
      minWidth
    } = _b, rest = __objRest(_b, [
      "value",
      "onChangeValue",
      "onChange",
      "maxWidth",
      "minWidth"
    ]);
    const isControlled = externalValue !== void 0;
    const [internalValue, setInternalValue] = (0, import_react.useState)(externalValue || "");
    const value = isControlled ? externalValue : internalValue;
    const defaultRef = (0, import_react.useRef)(null);
    const inputRef = ref || defaultRef;
    const [fontString, setFontString] = (0, import_react.useState)("14px sans-serif");
    const displayValue = (0, import_react.useMemo)(
      () => value || rest.placeholder || "",
      [value, rest.placeholder]
    );
    const textWidth = useTextWidth(displayValue, fontString);
    const dynamicWidth = (0, import_react.useMemo)(
      () => `${Math.max(textWidth + 16, 24)}px`,
      [textWidth]
    );
    (0, import_react.useEffect)(() => {
      if (!("current" in inputRef) || !inputRef.current) return;
      const element = inputRef.current;
      const updateFont = () => {
        const font = getFontString(element);
        setFontString(font);
      };
      updateFont();
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.type === "attributes" && (mutation.attributeName === "style" || mutation.attributeName === "class")) {
            updateFont();
          }
        });
      });
      observer.observe(element, {
        attributes: true,
        attributeFilter: ["style", "class"]
      });
      return () => {
        observer.disconnect();
      };
    }, [inputRef]);
    const handleChange = (0, import_react.useCallback)(
      (evt) => {
        const newValue = evt.target.value;
        onChange == null ? void 0 : onChange(evt);
        if (!isControlled) {
          setInternalValue(newValue);
        }
        onChangeValue == null ? void 0 : onChangeValue(newValue);
      },
      [onChange, onChangeValue, isControlled]
    );
    const onClick = (0, import_react.useCallback)(() => {
      var _a2;
      if ("current" in inputRef) {
        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
      }
    }, [inputRef]);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_themes.Box,
      {
        className: "auto-sizing-input wrapper",
        maxWidth,
        minWidth,
        onClick,
        style: { width: dynamicWidth },
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", __spreadValues({ onChange: handleChange, ref: inputRef, value }, rest))
      }
    );
  }
);
AutoSizingInput.displayName = "AutoSizingInput";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  AutoSizingInput
});
//# sourceMappingURL=auto-sizing-input.cjs.map