@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/select/index.mjs

@@ -1,335 +1,287 @@
-import { jsx as r, jsxs as ce } from "react/jsx-runtime";
-import { useFormFieldControl as de } from "@spark-ui/components/form-field";
-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 { cx as C, cva as U } from "class-variance-authority";
-import { I as H } from "../Icon-BO327oHU.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: i,
-  itemsComponent: a,
-  name: c,
-  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 || i, ee = `${ge}-field-${me()}`, te = d.id || ee, se = d.labelId, le = d.disabled ?? n, re = d.readOnly ?? o, ae = d.name ?? c, 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, ie = M.text !== N[T]?.text;
-      return oe || ie;
-    })) && 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 });
+import { t as e } from "../icon-D05Uqh8_.mjs";
+import { cva as t, cx as n } from "class-variance-authority";
+import { Children as r, createContext as i, isValidElement as a, useContext as o, useEffect as s, useId as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { ArrowHorizontalDown as f } from "@spark-ui/icons/ArrowHorizontalDown";
+import { useFormFieldControl as p } from "@spark-ui/components/form-field";
+import { useCombinedState as m } from "@spark-ui/hooks/use-combined-state";
+//#region src/select/utils.ts
+var h = (e) => (t) => r.toArray(e).filter(a).find((e) => g(e)?.includes(t)), g = (e) => e ? e.type.displayName : "", _ = (e, t = []) => (r.forEach(e, (e) => {
+	if (a(e)) {
+		if (g(e) === "Select.Item" || g(e) === "Select.Placeholder") {
+			let n = e.props;
+			t.push({
+				value: n.value,
+				disabled: !!n.disabled,
+				text: n.children
+			});
+		}
+		e.props.children && _(e.props.children, t);
+	}
+}), t), v = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	return _(e).forEach((e) => {
+		t.set(e.value, e);
+	}), t;
+}, y = i(null), b = ":select", x = ({ children: e, defaultValue: t, value: n, onValueChange: r, disabled: i = !1, readOnly: a = !1, state: o, itemsComponent: d, name: f, required: h }) => {
+	let [g, _] = m(n, t, r), [x, S] = l(void 0), [C, w] = l(v(d)), [T, E] = l(), D = C.entries().next()?.value?.[1], O = typeof g == "string" ? C.get(g) : D, k = n != null, A = p(), j = A.state || o, M = `${b}-field-${c()}`, N = A.id || M, P = A.labelId, F = A.disabled ?? i, I = A.readOnly ?? a, L = A.name ?? f, R = !!(A.isRequired ?? h);
+	return s(() => {
+		let e = v(d), t = [...C.values()], n = [...e.values()];
+		(t.length !== n.length || t.some((e, t) => {
+			let r = e.value !== n[t]?.value, i = e.text !== n[t]?.text;
+			return r || i;
+		})) && w(e);
+	}, [e]), /* @__PURE__ */ u(y.Provider, {
+		value: {
+			disabled: F,
+			readOnly: I,
+			itemsMap: C,
+			state: j,
+			itemsComponent: d,
+			selectedItem: O,
+			setValue: _,
+			isControlled: k,
+			onValueChange: r,
+			ariaLabel: T,
+			setAriaLabel: E,
+			fieldId: N,
+			fieldLabelId: P,
+			name: L,
+			required: R,
+			placeholder: x,
+			setPlaceholder: S
+		},
+		children: e
+	});
+}, S = () => {
+	let e = o(y);
+	if (!e) throw Error("useSelectContext must be used within a Select provider");
+	return e;
+}, C = ({ children: e, ...t }) => {
+	let n = h(e), r = n("Trigger"), i = n("Items");
+	return /* @__PURE__ */ u(x, {
+		...t,
+		itemsComponent: i,
+		children: r
+	});
 };
-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
-    }
-  );
+C.displayName = "Select";
+//#endregion
+//#region src/select/SelectItemsGroupContext.tsx
+var w = i(null), T = ({ children: e }) => {
+	let [t, n] = l("");
+	return /* @__PURE__ */ u(w.Provider, {
+		value: {
+			groupLabel: t,
+			setGroupLabel: n
+		},
+		children: e
+	});
+}, E = () => {
+	let e = o(w);
+	if (!e) throw Error("useSelectGroupContext must be used within a SelectGroup provider");
+	return e;
+}, D = ({ children: e, ref: t, ...n }) => /* @__PURE__ */ u(T, { children: /* @__PURE__ */ u(O, {
+	ref: t,
+	...n,
+	children: e
+}) }), O = ({ children: e, className: t, ref: r }) => {
+	let { groupLabel: i } = E();
+	return /* @__PURE__ */ u("optgroup", {
+		"data-spark-component": "select-group",
+		ref: r,
+		className: n(t),
+		label: i,
+		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: i,
-    ariaLabel: a,
-    fieldLabelId: c,
-    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 || i,
-      name: S,
-      required: u,
-      "aria-labelledby": c,
-      ...a && { "aria-label": a },
-      className: ve({ className: t, state: n, disabled: o, readOnly: i }),
-      value: y?.value,
-      onChange: x,
-      id: I,
-      ...l,
-      children: e
-    }
-  );
+D.displayName = "Select.Group";
+//#endregion
+//#region src/select/SelectItem.tsx
+var k = ({ disabled: e = !1, value: t, children: n, ref: r }) => /* @__PURE__ */ u("option", {
+	"data-spark-component": "select-item",
+	ref: r,
+	value: t,
+	disabled: e,
+	children: n
+}, t);
+k.displayName = "Select.Item";
+//#endregion
+//#region src/select/SelectItems.tsx
+var A = t([
+	"absolute left-0 top-0 size-full rounded-lg opacity-0",
+	"min-h-sz-44",
+	"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"
+	}]
+}), j = ({ children: e, className: t, ref: n, ...r }) => {
+	let { state: i, disabled: a, readOnly: o, ariaLabel: s, fieldLabelId: c, isControlled: l, onValueChange: d, selectedItem: f, setValue: p, name: m, required: h, fieldId: g } = S(), _ = (e) => {
+		l ? (e.preventDefault(), d?.(e.target.value)) : p(e.target.value);
+	};
+	return /* @__PURE__ */ u("select", {
+		"data-spark-component": "select-items",
+		ref: n,
+		disabled: a || o,
+		name: m,
+		required: h,
+		"aria-labelledby": c,
+		...s && { "aria-label": s },
+		className: A({
+			className: t,
+			state: i,
+			disabled: a,
+			readOnly: o
+		}),
+		value: f?.value,
+		onChange: _,
+		id: g,
+		...r,
+		children: e
+	});
 };
-G.displayName = "Select.Items";
-const O = ({ children: e }) => {
-  const { setGroupLabel: t } = K();
-  return g(() => {
-    t(e);
-  }, [e]), null;
+j.displayName = "Select.Items";
+//#endregion
+//#region src/select/SelectLabel.tsx
+var M = ({ children: e }) => {
+	let { setGroupLabel: t } = E();
+	return s(() => {
+		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"
-  );
+M.displayName = "Select.Label";
+//#endregion
+//#region src/select/SelectLeadingIcon.tsx
+var N = ({ children: t }) => /* @__PURE__ */ u(e, {
+	size: "sm",
+	className: "shrink-0",
+	children: t
+});
+N.displayName = "Select.LeadingIcon";
+//#endregion
+//#region src/select/SelectPlaceholder.tsx
+var P = ({ disabled: e = !1, children: t, ref: n }) => {
+	let { setPlaceholder: r } = S();
+	return s(() => {
+		r(t);
+	}, [t]), /* @__PURE__ */ u("option", {
+		"data-spark-component": "select-placeholder",
+		ref: n,
+		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: i, setAriaLabel: a, itemsComponent: c } = h();
-  return g(() => {
-    e && a(e);
-  }, [e]), /* @__PURE__ */ ce(
-    "div",
-    {
-      "data-spark-component": "select-trigger",
-      ref: l,
-      className: Se({ className: s, state: i, 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, {}) }),
-        c
-      ]
-    }
-  );
+P.displayName = "Select.Placeholder";
+//#endregion
+//#region src/select/SelectTrigger.styles.tsx
+var F = t([
+	"relative flex w-full items-center justify-between",
+	"min-h-sz-44 rounded-lg px-lg",
+	"text-body-1",
+	"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"
+		}
+	]
+}), I = ({ "aria-label": t, children: n, className: r, ref: i }) => {
+	let { disabled: a, readOnly: o, state: c, setAriaLabel: l, itemsComponent: p } = S();
+	return s(() => {
+		t && l(t);
+	}, [t]), /* @__PURE__ */ d("div", {
+		"data-spark-component": "select-trigger",
+		ref: i,
+		className: F({
+			className: r,
+			state: c,
+			disabled: a,
+			readOnly: o
+		}),
+		children: [
+			/* @__PURE__ */ u("span", {
+				className: "gap-md flex items-center justify-start",
+				children: n
+			}),
+			/* @__PURE__ */ u(e, {
+				className: "ml-md shrink-0",
+				size: "sm",
+				children: /* @__PURE__ */ u(f, {})
+			}),
+			p
+		]
+	});
 };
-V.displayName = "Select.Trigger";
-const z = ({
-  children: e,
-  className: t,
-  placeholder: s,
-  ref: l
-}) => {
-  const { selectedItem: n, placeholder: o, disabled: i } = h(), a = n?.value == null, c = 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 && !i && "text-on-surface/dim-1"
-          ),
-          children: a ? c : e || n?.text
-        }
-      )
-    }
-  );
+I.displayName = "Select.Trigger";
+//#endregion
+//#region src/select/SelectValue.tsx
+var L = ({ children: e, className: t, placeholder: r, ref: i }) => {
+	let { selectedItem: a, placeholder: o, disabled: s } = S(), c = a?.value == null, l = r || o;
+	return /* @__PURE__ */ u("span", {
+		role: "presentation",
+		"data-spark-component": "select-value",
+		ref: i,
+		className: n("flex shrink items-center text-left", t),
+		children: /* @__PURE__ */ u("span", {
+			className: n("line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis", c && !s && "text-on-surface/dim-1"),
+			children: c ? l : e || a?.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
+L.displayName = "Select.Value";
+//#endregion
+//#region src/select/index.ts
+var R = Object.assign(C, {
+	Group: D,
+	Item: k,
+	Items: j,
+	Placeholder: P,
+	Label: M,
+	Trigger: I,
+	Value: L,
+	LeadingIcon: N
 });
-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
+R.displayName = "Select", D.displayName = "Select.Group", j.displayName = "Select.Items", k.displayName = "Select.Item", P.displayName = "Select.Placeholder", M.displayName = "Select.Label", I.displayName = "Select.Trigger", L.displayName = "Select.Value", N.displayName = "Select.LeadingIcon";
+//#endregion
+export { R as Select, x as SelectProvider, S as useSelectContext };
+
+//# sourceMappingURL=index.mjs.map