import { jsx as r, jsxs as I, Fragment as j } from "react/jsx-runtime";
import { a as c } from "../index-BmAFn37q.mjs";
import { createContext as W, useContext as H, useId as y, useState as P, useCallback as L, useMemo as X, useEffect as z } from "react";
import { a as _, S as B } from "../Slot-C98rL4yy.mjs";
import { AlertOutline as G } from "@spark-ui/icons/AlertOutline";
import { Check as J } from "@spark-ui/icons/Check";
import { WarningOutline as K } from "@spark-ui/icons/WarningOutline";
import { I as M } from "../Icon-D1RueiPY.mjs";
import { L as O } from "../index-C34GgsKQ.mjs";
const C = W(null), x = ":form-field", b = () => {
  const s = H(C);
  if (!s)
    throw Error("useFormField must be used within a FormField provider");
  return s;
}, T = ({
  id: s,
  name: e,
  disabled: a = !1,
  readOnly: l = !1,
  state: o,
  isRequired: i,
  children: d
}) => {
  const t = `${x}-label-${y()}`, [n, m] = P([]), p = n.length > 0 ? n.join(" ") : void 0, u = L((f) => {
    m((h) => [...h, f]);
  }, []), q = L((f) => {
    m((h) => h.filter((D) => D !== f));
  }, []), V = X(() => ({
    id: s,
    labelId: t,
    name: e,
    disabled: a,
    readOnly: l,
    state: o,
    isRequired: i,
    isInvalid: o === "error",
    description: p,
    onMessageIdAdd: u,
    onMessageIdRemove: q
  }), [
    s,
    t,
    e,
    a,
    l,
    p,
    o,
    i,
    u,
    q
  ]);
  return /* @__PURE__ */ r(C.Provider, { value: V, children: d });
};
T.displayName = "FormFieldProvider";
const w = ({
  className: s,
  disabled: e = !1,
  readOnly: a = !1,
  name: l,
  state: o,
  isRequired: i = !1,
  asChild: d = !1,
  ref: t,
  ...n
}) => {
  const m = `${x}-${y()}`;
  return /* @__PURE__ */ r(
    T,
    {
      id: m,
      name: l,
      isRequired: i,
      disabled: e,
      readOnly: a,
      state: o,
      children: /* @__PURE__ */ r(
        d ? _ : "div",
        {
          ref: t,
          "data-spark-component": "form-field",
          className: c(s, "gap-sm flex flex-col"),
          ...n
        }
      )
    }
  );
};
w.displayName = "FormField";
const g = ({
  id: s,
  className: e,
  ref: a,
  ...l
}) => {
  const { onMessageIdAdd: o, onMessageIdRemove: i } = b(), d = `${x}-message-${y()}`, t = s || d;
  return z(() => (o(t), () => {
    i(t);
  }), [t, o, i]), /* @__PURE__ */ r(
    "span",
    {
      ref: a,
      id: t,
      "data-spark-component": "form-field-message",
      className: c(e, "text-caption"),
      ...l
    }
  );
};
g.displayName = "FormField.Message";
const F = ({
  className: s,
  state: e,
  children: a,
  ref: l,
  ...o
}) => b().state !== e ? null : /* @__PURE__ */ I(
  g,
  {
    ref: l,
    "data-spark-component": "form-field-state-message",
    className: c(
      "gap-sm flex items-center",
      e === "error" ? "text-error" : "text-on-surface/dim-1",
      s
    ),
    ...o,
    children: [
      e === "alert" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(K, {}) }),
      e === "error" && /* @__PURE__ */ r(M, { size: "sm", intent: "error", children: /* @__PURE__ */ r(G, {}) }),
      e === "success" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(J, {}) }),
      a
    ]
  }
);
F.displayName = "FormField.StateMessage";
const v = ({ ref: s, ...e }) => /* @__PURE__ */ r(
  F,
  {
    ref: s,
    "data-spark-component": "form-field-alert-message",
    state: "alert",
    ...e
  }
);
v.displayName = "FormField.AlertMessage";
const S = ({
  className: s,
  value: e = "",
  maxLength: a,
  description: l,
  liveAnnouncement: o,
  ref: i,
  ...d
}) => {
  const [t, n] = P(e);
  return z(() => {
    const m = setTimeout(() => {
      n(e);
    }, 1e3);
    return () => clearTimeout(m);
  }, [e]), /* @__PURE__ */ I("span", { className: "ml-auto self-start", children: [
    l && /* @__PURE__ */ r(g, { className: "default:sr-only", children: l }),
    /* @__PURE__ */ r(
      "span",
      {
        ref: i,
        "aria-hidden": !0,
        "data-spark-component": "form-field-characters-count",
        className: c(s, "text-caption", "text-neutral"),
        ...d,
        children: `${e.length}/${a}`
      }
    ),
    o && /* @__PURE__ */ r("span", { className: "sr-only", "aria-live": "polite", children: o({ remainingChars: a - t.length }) })
  ] });
};
S.displayName = "FormField.CharactersCount";
const Q = () => {
  const { id: s, name: e, description: a, disabled: l, readOnly: o, state: i, labelId: d, isInvalid: t, isRequired: n } = H(C) || {};
  return {
    id: s,
    name: e,
    description: a,
    disabled: l,
    readOnly: o,
    state: i,
    labelId: d,
    isInvalid: t,
    isRequired: n
  };
}, k = ({ children: s }) => {
  const e = Q();
  return /* @__PURE__ */ r(j, { children: s(e) });
};
k.displayName = "FormField.Control";
const R = ({ ref: s, ...e }) => /* @__PURE__ */ r(
  F,
  {
    ref: s,
    "data-spark-component": "form-field-error-message",
    state: "error",
    ...e
  }
);
R.displayName = "FormField.ErrorMessage";
const $ = ({
  className: s,
  ref: e,
  ...a
}) => /* @__PURE__ */ r(
  g,
  {
    ref: e,
    "data-spark-component": "form-field-helper-message",
    className: c("text-on-surface/dim-1", s),
    ...a
  }
);
$.displayName = "FormField.HelperMessage";
const N = ({
  className: s,
  ref: e,
  ...a
}) => /* @__PURE__ */ r(O.RequiredIndicator, { ref: e, className: c("ml-sm", s), ...a });
N.displayName = "FormField.RequiredIndicator";
const A = ({
  htmlFor: s,
  className: e,
  children: a,
  requiredIndicator: l = /* @__PURE__ */ r(N, {}),
  asChild: o,
  ref: i,
  ...d
}) => {
  const t = b(), { disabled: n, labelId: m, isRequired: p } = t, u = o ? void 0 : s || t.id;
  return /* @__PURE__ */ r(
    O,
    {
      ref: i,
      id: m,
      "data-spark-component": "form-field-label",
      htmlFor: u,
      className: c(e, n ? "text-on-surface/dim-3 pointer-events-none" : void 0),
      asChild: o,
      ...d,
      children: /* @__PURE__ */ I(j, { children: [
        /* @__PURE__ */ r(B, { children: a }),
        p && l
      ] })
    }
  );
};
A.displayName = "FormField.Label";
const E = ({ ref: s, ...e }) => /* @__PURE__ */ r(
  F,
  {
    ref: s,
    "data-spark-component": "form-field-success-message",
    state: "success",
    ...e
  }
);
E.displayName = "FormField.SuccessMessage";
const U = Object.assign(w, {
  Label: A,
  Control: k,
  StateMessage: F,
  SuccessMessage: E,
  AlertMessage: v,
  ErrorMessage: R,
  HelperMessage: $,
  RequiredIndicator: N,
  CharactersCount: S
});
U.displayName = "FormField";
A.displayName = "FormField.Label";
k.displayName = "FormField.Control";
F.displayName = "FormField.StateMessage";
E.displayName = "FormField.SuccessMessage";
v.displayName = "FormField.AlertMessage";
R.displayName = "FormField.ErrorMessage";
$.displayName = "FormField.HelperMessage";
N.displayName = "FormField.RequiredIndicator";
S.displayName = "FormField.CharactersCount";
export {
  U as FormField,
  Q as useFormFieldControl
};
//# sourceMappingURL=index.mjs.map
