import { jsx as l, jsxs as F } from "react/jsx-runtime";
import { DeleteOutline as le } from "@spark-ui/icons/DeleteOutline";
import { a as g, c as E } from "../index-BmAFn37q.mjs";
import { I as K } from "../Icon-D1RueiPY.mjs";
import { createContext as ie, useContext as de, Children as P, isValidElement as ue, useRef as M, useCallback as ce, useMemo as pe, useEffect as fe, cloneElement as ge } from "react";
import { useFormFieldControl as H } from "../form-field/index.mjs";
import { useCombinedState as me } from "@spark-ui/hooks/use-combined-state";
import { useMergeRefs as he } from "@spark-ui/hooks/use-merge-refs";
import { a as J } from "../Slot-C98rL4yy.mjs";
const Q = ie(null), v = () => de(Q) || { isStandalone: !0 }, U = ({
  className: n,
  tabIndex: e = -1,
  onClick: t,
  inline: r = !1,
  ref: o,
  ...s
}) => {
  const { onClear: i, hasTrailingIcon: m } = v(), d = (a) => {
    t && t(a), i && i();
  };
  return /* @__PURE__ */ l(
    "button",
    {
      ref: o,
      "data-spark-component": "input-clear-button",
      className: g(
        n,
        "pointer-events-auto absolute",
        r ? "h-sz-44 top-0 -translate-y-0" : "top-1/2 -translate-y-1/2",
        "inline-flex h-full items-center justify-center outline-hidden",
        "text-neutral hover:text-neutral-hovered",
        m ? "right-3xl px-sz-12" : "pl-md pr-lg right-0"
      ),
      tabIndex: e,
      onClick: d,
      type: "button",
      ...s,
      children: /* @__PURE__ */ l(K, { size: "sm", children: /* @__PURE__ */ l(le, {}) })
    }
  );
}, W = Object.assign(U, {
  id: "ClearButton"
});
U.displayName = "InputGroup.ClearButton";
const Ie = E(["relative inline-flex w-full"], {
  variants: {
    /**
     * When `true`, prevents the user from interacting.
     */
    disabled: {
      true: [
        "cursor-not-allowed",
        "relative",
        "after:absolute",
        "after:top-0",
        "after:h-full",
        "after:w-full",
        "after:border-sm after:border-outline",
        "after:rounded-lg"
      ],
      false: "after:hidden"
    },
    /**
     * Sets the component as interactive or not.
     */
    readOnly: {
      true: [
        "relative",
        "after:absolute",
        "after:top-0",
        "after:h-full",
        "after:w-full",
        "after:border-sm after:border-outline",
        "after:rounded-lg"
      ],
      false: "after:hidden"
    }
  }
}), X = ({
  className: n,
  children: e,
  state: t,
  disabled: r,
  readOnly: o,
  onClear: s,
  ref: i,
  ...m
}) => {
  const d = (y) => y ? y.type.id : "", a = (...y) => c.find((se) => y.includes(d(se) || "")), c = P.toArray(e).filter(ue), p = a("Input"), f = p?.props || {}, h = M(null), x = M(s), V = he(p?.ref, h), [T, C] = me(
    f.value,
    f.defaultValue,
    f.onValueChange
  ), N = H(), L = N.state ?? t, I = N.disabled || !!r, b = N.readOnly || !!o, O = a("LeadingAddon"), G = a("LeadingIcon"), B = a("ClearButton"), w = a("TrailingIcon"), k = a("TrailingAddon"), A = !!O, u = !!k, _ = !!G, $ = !!w, z = !!T && !!B && !I && !b, ae = (y) => {
    f.onChange && f.onChange(y), C(y.target.value);
  }, q = ce(() => {
    x.current && x.current(), C(""), h.current.focus();
  }, [C]), re = pe(() => ({
    state: L,
    disabled: I,
    readOnly: b,
    hasLeadingIcon: _,
    hasTrailingIcon: $,
    hasLeadingAddon: A,
    hasTrailingAddon: u,
    hasClearButton: z,
    onClear: q
  }), [
    L,
    I,
    b,
    _,
    $,
    A,
    u,
    z,
    q
  ]);
  fe(() => {
    x.current = s;
  }, [s]);
  const oe = h.current?.value;
  return /* @__PURE__ */ l(Q.Provider, { value: re, children: /* @__PURE__ */ F(
    "div",
    {
      "data-spark-component": "input-group",
      ref: i,
      className: Ie({ disabled: I, readOnly: b, className: n }),
      ...m,
      children: [
        A && O,
        /* @__PURE__ */ F("div", { className: "relative inline-flex w-full", children: [
          p && ge(p, {
            value: T ?? oe ?? "",
            ref: V,
            defaultValue: void 0,
            onChange: ae
          }),
          G,
          z && B,
          w
        ] }),
        u && k
      ]
    }
  ) });
};
X.displayName = "InputGroup";
const be = E(
  [
    "overflow-hidden",
    "border-sm",
    "shrink-0",
    "h-full",
    "focus-visible:relative focus-visible:z-raised",
    "mx-0"
  ],
  {
    variants: {
      /**
       * Change the component to the HTML tag or custom component of the only child.
       */
      asChild: { false: ["flex", "items-center", "px-lg"] },
      intent: {
        neutral: "border-outline",
        error: "border-error",
        alert: "border-alert",
        success: "border-success"
      },
      /**
       * Disable the input addon, preventing user interaction and adding opacity.
       */
      disabled: {
        true: ["pointer-events-none border-outline!"]
      },
      /**
       * Changes input addon styles based on the read only status from the input.
       */
      readOnly: {
        true: ["pointer-events-none"]
      },
      /**
       * Main style of the input addon.
       */
      design: {
        text: "",
        solid: "",
        inline: ""
      }
    },
    compoundVariants: [
      {
        disabled: !1,
        readOnly: !1,
        design: "text",
        class: ["bg-surface", "text-on-surface"]
      },
      {
        disabled: !0,
        design: "text",
        class: ["text-on-surface/dim-3"]
      },
      {
        disabled: !0,
        design: ["solid", "inline"],
        class: ["opacity-dim-3"]
      }
    ],
    defaultVariants: {
      intent: "neutral"
    }
  }
), S = ({
  asChild: n,
  className: e,
  children: t,
  ref: r,
  ...o
}) => {
  const { state: s, disabled: i, readOnly: m } = v(), d = typeof t == "string", a = !!(!d && n), c = d ? t : P.only(t), p = a && !d ? J : "div", h = d ? "text" : a ? "solid" : "inline";
  return /* @__PURE__ */ l(
    p,
    {
      ref: r,
      "data-spark-component": "input-addon",
      className: be({
        className: e,
        intent: s,
        disabled: i,
        readOnly: m,
        asChild: a,
        design: h
      }),
      ...i && { tabIndex: -1 },
      ...o,
      children: c
    }
  );
};
S.displayName = "InputGroup.Addon";
const Y = ({ className: n, ref: e, ...t }) => {
  const { disabled: r, readOnly: o } = v();
  return /* @__PURE__ */ l("div", { className: g("rounded-l-lg", r || o ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ l(
    S,
    {
      ref: e,
      className: g(n, "rounded-r-0! mr-[-1px] rounded-l-lg"),
      ...t
    }
  ) });
}, Z = Object.assign(Y, {
  id: "LeadingAddon"
});
Y.displayName = "InputGroup.LeadingAddon";
const D = ({ className: n, intent: e, children: t, ...r }) => {
  const { disabled: o, readOnly: s } = v();
  return /* @__PURE__ */ l(
    K,
    {
      "data-spark-component": "input-icon",
      intent: e,
      className: g(
        n,
        "pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",
        e ? void 0 : "text-neutral peer-focus:text-outline-high",
        o || s ? "opacity-dim-3" : void 0
      ),
      ...r,
      children: t
    }
  );
};
D.displayName = "InputGroup.Icon";
const R = ({ className: n, ...e }) => /* @__PURE__ */ l(D, { className: g(n, "left-lg text-body-1"), ...e });
R.id = "LeadingIcon";
R.displayName = "InputGroup.LeadingIcon";
const ee = ({ className: n, ref: e, ...t }) => {
  const { disabled: r, readOnly: o } = v();
  return /* @__PURE__ */ l("div", { className: g("rounded-r-lg", r || o ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ l(
    S,
    {
      ref: e,
      className: g(n, "rounded-l-0! ml-[-1px] rounded-r-lg"),
      ...t
    }
  ) });
}, ne = Object.assign(ee, {
  id: "TrailingAddon"
});
ee.displayName = "InputGroup.TrailingAddon";
const j = ({ className: n, ...e }) => /* @__PURE__ */ l(D, { className: g(n, "right-lg text-body-1"), ...e });
j.id = "TrailingIcon";
j.displayName = "InputGroup.TrailingIcon";
const ye = E(
  [
    "relative",
    "border-sm",
    "peer",
    "w-full",
    "appearance-none outline-hidden",
    "bg-surface",
    "text-ellipsis text-body-1 text-on-surface",
    "caret-neutral",
    "[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]",
    "autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]",
    "disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3",
    "read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5",
    "focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"
  ],
  {
    variants: {
      /**
       * Change the component to the HTML tag or custom component of the only child.
       */
      asChild: {
        true: ["min-h-sz-44"],
        false: ["h-sz-44"]
      },
      /**
       * Color scheme of the button.
       */
      intent: {
        neutral: ["border-outline", "default:hover:border-outline-high"],
        success: ["default:border-success"],
        alert: ["default:border-alert"],
        error: ["default:border-error"]
      },
      /**
       * Sets if there is an addon before the input text.
       */
      hasLeadingAddon: {
        true: ["rounded-l-0"],
        false: ["rounded-l-lg"]
      },
      /**
       * Sets if there is an addon after the input text.
       */
      hasTrailingAddon: {
        true: ["rounded-r-0"],
        false: ["rounded-r-lg"]
      },
      /**
       * Sets if there is an icon before the input text.
       */
      hasLeadingIcon: {
        true: ["pl-3xl"],
        false: ["pl-lg"]
      },
      /**
       * Sets if there is an icon after the input text.
       */
      hasTrailingIcon: { true: "" },
      /**
       * Sets if there is a button to clear the input text.
       */
      hasClearButton: { true: "" }
    },
    compoundVariants: [
      {
        hasTrailingIcon: !1,
        hasClearButton: !1,
        class: "pr-lg"
      },
      {
        hasTrailingIcon: !0,
        hasClearButton: !1,
        class: "pr-3xl"
      },
      {
        hasTrailingIcon: !1,
        hasClearButton: !0,
        class: "pr-3xl"
      },
      {
        hasTrailingIcon: !0,
        hasClearButton: !0,
        class: "pr-[calc(var(--spacing-3xl)*2)]"
      }
    ],
    defaultVariants: {
      intent: "neutral"
    }
  }
), te = ({
  className: n,
  asChild: e = !1,
  onValueChange: t,
  onChange: r,
  onKeyDown: o,
  disabled: s,
  readOnly: i,
  ref: m,
  ...d
}) => {
  const a = H(), c = v(), { id: p, name: f, isInvalid: h, isRequired: x, description: V } = a, {
    hasLeadingAddon: T,
    hasTrailingAddon: C,
    hasLeadingIcon: N,
    hasTrailingIcon: L,
    hasClearButton: I,
    onClear: b
  } = c, O = e ? J : "input", G = a.state || c.state, B = a.disabled || c.disabled || s, w = a.readOnly || c.readOnly || i, k = (u) => {
    r && r(u), t && t(u.target.value);
  }, A = (u) => {
    o && o(u), I && b && u.key === "Escape" && b();
  };
  return /* @__PURE__ */ l(
    O,
    {
      "data-spark-component": "input",
      ref: m,
      id: p,
      name: f,
      className: ye({
        asChild: e,
        className: n,
        intent: G,
        hasLeadingAddon: !!T,
        hasTrailingAddon: !!C,
        hasLeadingIcon: !!N,
        hasTrailingIcon: !!L,
        hasClearButton: !!I
      }),
      disabled: B,
      readOnly: w,
      required: x,
      "aria-describedby": V,
      "aria-invalid": h,
      onChange: k,
      onKeyDown: A,
      ...d
    }
  );
}, we = Object.assign(te, {
  id: "Input"
});
te.displayName = "Input";
const ve = Object.assign(X, {
  LeadingAddon: Z,
  TrailingAddon: ne,
  LeadingIcon: R,
  TrailingIcon: j,
  ClearButton: W
});
ve.displayName = "InputGroup";
Z.displayName = "InputGroup.LeadingAddon";
ne.displayName = "InputGroup.TrailingAddon";
R.displayName = "InputGroup.LeadingIcon";
j.displayName = "InputGroup.TrailingIcon";
W.displayName = "InputGroup.ClearButton";
export {
  we as Input,
  ve as InputGroup,
  v as useInputGroup
};
//# sourceMappingURL=index.mjs.map
