// src/components/inputs/handle-input/handle-input.tsx
import { Input, Text } from "@medusajs/ui";
import {
  forwardRef,
  useLayoutEffect,
  useRef,
  useState
} from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var HandleInput = forwardRef(({ prefix = "/", style, ...props }, ref) => {
  const prefixRef = useRef(null);
  const [paddingLeft, setPaddingLeft] = useState(
    prefix === "/" ? 40 : 0
  );
  useLayoutEffect(() => {
    if (prefixRef.current) {
      setPaddingLeft(prefixRef.current.offsetWidth + 8);
    }
  }, [prefix]);
  const mergedStyle = { ...style, paddingLeft };
  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        ref: prefixRef,
        className: "absolute inset-y-0 left-0 z-10 flex min-w-8 items-center justify-center border-r px-2.5",
        children: /* @__PURE__ */ jsx(
          Text,
          {
            className: "text-ui-fg-muted",
            size: "small",
            leading: "compact",
            weight: "plus",
            children: prefix
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(Input, { ref, ...props, style: mergedStyle })
  ] });
});
HandleInput.displayName = "HandleInput";

export {
  HandleInput
};
