import { jsx as i, jsxs as k } from "react/jsx-runtime";
import { useMemo as o, useRef as A } from "react";
import B from "./hooks/useInputGroup.js";
import { inputGroupSizes as L } from "./types/InputGroupSize.js";
import { c as s } from "../../index-BtlgVD4m.js";
import { InputGroupProvider as M } from "./context/InputGroupContext.js";
const P = (c) => {
  const {
    size: a = "default",
    disabled: e = !1,
    readOnly: d = !1,
    // Input props that will be passed to InputGroupInput
    id: p,
    type: m,
    value: f,
    inputMode: v,
    name: h,
    placeholder: g,
    maxLength: b,
    autoComplete: y,
    isError: n,
    onChange: x,
    mask: G
  } = c, r = d && !e, { inlineContent: C, outlineLeftAddons: l, outlineRightAddons: u, isFocused: t, setIsFocused: I, handleBlur: F, handleFocus: R } = B(c), N = o(
    () => ({
      id: p,
      type: m,
      value: f,
      inputMode: v,
      name: h,
      placeholder: g,
      maxLength: b,
      autoComplete: y,
      readOnly: d,
      onChange: x,
      mask: G
    }),
    [p, m, f, v, h, g, b, y, x, d, G]
  ), S = A(null), w = o(() => L[a], [a]), z = o(
    () => ({
      size: a,
      isError: n,
      disabled: e,
      readOnly: r,
      isFocused: t,
      setIsFocused: I,
      inputProps: N,
      // Stable ref object — its identity never changes so it's safe in deps
      inputRef: S
    }),
    [a, n, r, t, N, I, S, e]
  ), O = o(
    () => s(
      // Base layout
      "group group-input",
      "inline-flex items-stretch w-full",
      // Disabled state — cursor/pointer-events on outer container, opacity is scoped to inner container only
      e && "cursor-not-allowed pointer-events-none",
      r && "cursor-default pointer-events-none",
      // Focus ring styles
      "outline outline-transparent outline-[length:var(--border-width-border-1)]",
      "transition-all duration-200",
      // Focus state
      t && !n && "outline-[var(--base-ring)] outline-offset-2",
      // Border radius - adjusted based on outline addons presence
      "rounded-[var(--border-radius-md)]",
      // Error state
      n && "outline-[var(--base-ring-error)] outline-offset-2"
    ),
    [e, r, t, n]
  ), j = o(
    () => s(
      // Base layout with gap for spacing between inline elements
      "inline-flex items-center flex-1 min-w-0",
      "gap-[var(--spacing-2)]",
      "px-[var(--spacing-3)]",
      // Border and background
      "border border-[var(--base-input)]",
      "bg-[var(--base-background)]",
      r && "border-[var(--base-border)] bg-[var(--base-muted)]",
      // Height based on size
      w.height,
      // Border radius - adjusted based on outline addons presence
      "rounded-[var(--border-radius-md)]",
      // Remove left radius when has outline-left addon
      l.length > 0 && "rounded-l-none",
      // Remove right radius when has outline-right addon
      u.length > 0 && "rounded-r-none"
    ),
    [l.length, u.length, w.height, r]
  );
  return /* @__PURE__ */ i(M, { value: z, children: /* @__PURE__ */ k(
    "div",
    {
      className: O,
      onFocus: R,
      onBlur: F,
      "data-disabled": e || void 0,
      "data-error": n,
      "data-focused": t || void 0,
      "data-readonly": r || void 0,
      children: [
        /* @__PURE__ */ i("div", { className: s("inline-flex items-stretch", e && "opacity-[var(--opacity-opacity-50)]"), style: { order: 1 }, children: l }),
        /* @__PURE__ */ i("div", { className: j, style: { order: 3 }, "data-inner-container": !0, children: C }),
        /* @__PURE__ */ i("div", { className: s("inline-flex items-stretch", e && "opacity-[var(--opacity-opacity-50)]"), style: { order: 5 }, children: u })
      ]
    }
  ) });
};
P.displayName = "InputGroup";
export {
  P as default
};
//# sourceMappingURL=InputGroup.js.map
