import { jsx as r, jsxs as ie } from "react/jsx-runtime";
import { useFormFieldControl as de } from "../form-field/index.mjs";
import { useCombinedState as ue } from "@spark-ui/hooks/use-combined-state";
import { Children as A, isValidElement as D, createContext as $, useState as f, useId as me, useEffect as g, useContext as R } from "react";
import { a as C, c as U } from "../index-BmAFn37q.mjs";
import { I as H } from "../Icon-D1RueiPY.mjs";
import { ArrowHorizontalDown as pe } from "@spark-ui/icons/ArrowHorizontalDown";
const fe = (e) => (t) => A.toArray(e).filter(D).find((l) => w(l)?.includes(t)), w = (e) => e ? e.type.displayName : "", X = (e, t = []) => (A.forEach(e, (s) => {
  if (D(s)) {
    if (w(s) === "Select.Item" || w(s) === "Select.Placeholder") {
      const l = s.props;
      t.push({
        value: l.value,
        disabled: !!l.disabled,
        text: l.children
      });
    }
    s.props.children && X(s.props.children, t);
  }
}), t), q = (e) => {
  const t = /* @__PURE__ */ new Map();
  return X(e).forEach((s) => {
    t.set(s.value, s);
  }), t;
}, _ = $(null), ge = ":select", he = ({
  children: e,
  defaultValue: t,
  value: s,
  onValueChange: l,
  disabled: n = !1,
  readOnly: o = !1,
  state: c,
  itemsComponent: a,
  name: i,
  required: b
}) => {
  const [p, y] = ue(s, t, l), [v, S] = f(void 0), [u, I] = f(q(a)), [x, m] = f(), Q = u.entries().next()?.value?.[1], W = typeof p == "string" ? u.get(p) : Q, Y = s != null, d = de(), Z = d.state || c, ee = `${ge}-field-${me()}`, te = d.id || ee, se = d.labelId, le = d.disabled ?? n, re = d.readOnly ?? o, ae = d.name ?? i, ne = !!(d.isRequired ?? b);
  return g(() => {
    const j = q(a), F = [...u.values()], N = [...j.values()];
    (F.length !== N.length || F.some((M, T) => {
      const oe = M.value !== N[T]?.value, ce = M.text !== N[T]?.text;
      return oe || ce;
    })) && I(j);
  }, [e]), /* @__PURE__ */ r(
    _.Provider,
    {
      value: {
        disabled: le,
        readOnly: re,
        itemsMap: u,
        state: Z,
        itemsComponent: a,
        selectedItem: W,
        setValue: y,
        isControlled: Y,
        onValueChange: l,
        ariaLabel: x,
        setAriaLabel: m,
        fieldId: te,
        fieldLabelId: se,
        name: ae,
        required: ne,
        placeholder: v,
        setPlaceholder: S
      },
      children: e
    }
  );
}, h = () => {
  const e = R(_);
  if (!e)
    throw Error("useSelectContext must be used within a Select provider");
  return e;
}, B = ({ children: e, ...t }) => {
  const s = fe(e), l = s("Trigger"), n = s("Items");
  return /* @__PURE__ */ r(he, { ...t, itemsComponent: n, children: l });
};
B.displayName = "Select";
const J = $(null), be = ({ children: e }) => {
  const [t, s] = f("");
  return /* @__PURE__ */ r(J.Provider, { value: { groupLabel: t, setGroupLabel: s }, children: e });
}, K = () => {
  const e = R(J);
  if (!e)
    throw Error("useSelectGroupContext must be used within a SelectGroup provider");
  return e;
}, L = ({ children: e, ref: t, ...s }) => /* @__PURE__ */ r(be, { children: /* @__PURE__ */ r(ye, { ref: t, ...s, children: e }) }), ye = ({ children: e, className: t, ref: s }) => {
  const { groupLabel: l } = K();
  return /* @__PURE__ */ r(
    "optgroup",
    {
      "data-spark-component": "select-group",
      ref: s,
      className: C(t),
      label: l,
      children: e
    }
  );
};
L.displayName = "Select.Group";
const P = ({ disabled: e = !1, value: t, children: s, ref: l }) => /* @__PURE__ */ r(
  "option",
  {
    "data-spark-component": "select-item",
    ref: l,
    value: t,
    disabled: e,
    children: s
  },
  t
);
P.displayName = "Select.Item";
const ve = U(
  [
    "absolute left-0 top-0 size-full rounded-lg opacity-0",
    "min-h-sz-44",
    // outline styles
    "ring-1 outline-hidden ring-inset focus:ring-2"
  ],
  {
    variants: {
      state: {
        undefined: "ring-outline focus:ring-outline-high",
        error: "ring-error",
        alert: "ring-alert",
        success: "ring-success"
      },
      disabled: {
        true: "cursor-not-allowed"
      },
      readOnly: {
        true: "cursor-default"
      }
    },
    compoundVariants: [
      {
        disabled: !1,
        state: void 0,
        class: "hover:ring-outline-high"
      }
    ]
  }
), G = ({
  children: e,
  className: t,
  ref: s,
  ...l
}) => {
  const {
    state: n,
    disabled: o,
    readOnly: c,
    ariaLabel: a,
    fieldLabelId: i,
    isControlled: b,
    onValueChange: p,
    selectedItem: y,
    setValue: v,
    name: S,
    required: u,
    fieldId: I
  } = h(), x = (m) => {
    b ? (m.preventDefault(), p?.(m.target.value)) : v(m.target.value);
  };
  return /* @__PURE__ */ r(
    "select",
    {
      "data-spark-component": "select-items",
      ref: s,
      disabled: o || c,
      name: S,
      required: u,
      "aria-labelledby": i,
      ...a && { "aria-label": a },
      className: ve({ className: t, state: n, disabled: o, readOnly: c }),
      value: y?.value,
      onChange: x,
      id: I,
      ...l,
      children: e
    }
  );
};
G.displayName = "Select.Items";
const O = ({ children: e }) => {
  const { setGroupLabel: t } = K();
  return g(() => {
    t(e);
  }, [e]), null;
};
O.displayName = "Select.Label";
const k = ({ children: e }) => /* @__PURE__ */ r(H, { size: "sm", className: "shrink-0", children: e });
k.displayName = "Select.LeadingIcon";
const E = ({
  disabled: e = !1,
  children: t,
  ref: s
}) => {
  const { setPlaceholder: l } = h();
  return g(() => {
    l(t);
  }, [t]), /* @__PURE__ */ r(
    "option",
    {
      "data-spark-component": "select-placeholder",
      ref: s,
      value: "",
      disabled: e,
      children: t
    },
    "placeholder"
  );
};
E.displayName = "Select.Placeholder";
const Se = U(
  [
    "relative flex w-full items-center justify-between",
    "min-h-sz-44 rounded-lg px-lg",
    "text-body-1",
    // outline styles
    "ring-1 outline-hidden ring-inset focus-within:ring-focus"
  ],
  {
    variants: {
      state: {
        undefined: "ring-outline",
        error: "ring-error",
        alert: "ring-alert",
        success: "ring-success"
      },
      disabled: {
        false: "focus-within:ring-2"
      },
      readOnly: {
        true: ""
      }
    },
    compoundVariants: [
      {
        readOnly: !1,
        disabled: !1,
        class: "bg-surface text-on-surface"
      },
      {
        readOnly: !0,
        class: "bg-on-surface/dim-5 text-on-surface cursor-default"
      },
      {
        disabled: !0,
        class: ["bg-on-surface/dim-5 text-on-surface/dim-3", "cursor-not-allowed"]
      },
      {
        disabled: !1,
        state: void 0,
        class: "default:hover:ring-outline-high"
      }
    ]
  }
), V = ({
  "aria-label": e,
  children: t,
  className: s,
  ref: l
}) => {
  const { disabled: n, readOnly: o, state: c, setAriaLabel: a, itemsComponent: i } = h();
  return g(() => {
    e && a(e);
  }, [e]), /* @__PURE__ */ ie(
    "div",
    {
      "data-spark-component": "select-trigger",
      ref: l,
      className: Se({ className: s, state: c, disabled: n, readOnly: o }),
      children: [
        /* @__PURE__ */ r("span", { className: "gap-md flex items-center justify-start", children: t }),
        /* @__PURE__ */ r(H, { className: "ml-md shrink-0", size: "sm", children: /* @__PURE__ */ r(pe, {}) }),
        i
      ]
    }
  );
};
V.displayName = "Select.Trigger";
const z = ({
  children: e,
  className: t,
  placeholder: s,
  ref: l
}) => {
  const { selectedItem: n, placeholder: o, disabled: c } = h(), a = n?.value == null, i = s || o;
  return /* @__PURE__ */ r(
    "span",
    {
      role: "presentation",
      "data-spark-component": "select-value",
      ref: l,
      className: C("flex shrink items-center text-left", t),
      children: /* @__PURE__ */ r(
        "span",
        {
          className: C(
            "line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",
            a && !c && "text-on-surface/dim-1"
          ),
          children: a ? i : e || n?.text
        }
      )
    }
  );
};
z.displayName = "Select.Value";
const Ie = Object.assign(B, {
  Group: L,
  Item: P,
  Items: G,
  Placeholder: E,
  Label: O,
  Trigger: V,
  Value: z,
  LeadingIcon: k
});
Ie.displayName = "Select";
L.displayName = "Select.Group";
G.displayName = "Select.Items";
P.displayName = "Select.Item";
E.displayName = "Select.Placeholder";
O.displayName = "Select.Label";
V.displayName = "Select.Trigger";
z.displayName = "Select.Value";
k.displayName = "Select.LeadingIcon";
export {
  Ie as Select,
  he as SelectProvider,
  h as useSelectContext
};
//# sourceMappingURL=index.mjs.map
