solid-baseui 0.1.0-alpha.0

package/dist/lib/client/checkbox-BbAwOptH.js

@@ -0,0 +1,441 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { getStateAttributesProps as t } from "./internals/getStateAttributesProps.js";
+import { w as n } from "./reasons-Co5CzjKq.js";
+import { n as r, t as i } from "./resolveStyle-XcgAuaKR.js";
+import { createChangeEventDetails as a } from "./internals/createBaseUIEventDetails.js";
+import { transitionStatusMapping as o } from "./internals/stateAttributesMapping.js";
+import { composeEventHandlers as s } from "./internals/composeEventHandlers.js";
+import { t as ee } from "./runOnceAnimationsFinish-15EM-Z4l.js";
+import { t as te } from "./createTransitionStatus-B1L-whed.js";
+import { fieldStateAttributesMapping as c } from "./internals/field-constants.js";
+import { n as ne } from "./FieldRootContext-izCEh80D.js";
+import { n as l } from "./FormContext-BB05lWOI.js";
+import { r as u } from "./LabelableContext-DKsB0fIx.js";
+import { n as d } from "./FieldItemContext-Bwzf-4tL.js";
+import { n as f } from "./CheckboxGroupContext-1CRRHK0T.js";
+import { Dynamic as re, createComponent as p, effect as m, getNextElement as h, memo as g, mergeProps as _, ref as ie, runHydrationEvents as ae, setAttribute as v, spread as oe, template as y } from "@solidjs/web";
+import { Show as b, createContext as x, createEffect as S, createMemo as C, createSignal as w, createUniqueId as T, omit as se, onCleanup as ce, onSettled as le, untrack as E, useContext as ue } from "solid-js";
+//#region src/checkbox/utils/getCheckboxStateAttributesMapping.ts
+function de(e) {
+	return {
+		...c,
+		checked(t) {
+			return e.indeterminate ? null : t ? { "data-checked": "" } : { "data-unchecked": "" };
+		}
+	};
+}
+//#endregion
+//#region src/checkbox/root/CheckboxRootContext.ts
+var D = Symbol("CheckboxRootContext"), fe = x(D);
+function O() {
+	let e = ue(fe);
+	if (e === D) throw Error("Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>.");
+	return e;
+}
+//#endregion
+//#region src/checkbox/root/CheckboxRoot.tsx
+var pe = /* @__PURE__ */ y("<input type=hidden>"), me = /* @__PURE__ */ y("<input>"), he = {
+	"clip-path": "inset(50%)",
+	overflow: "hidden",
+	"white-space": "nowrap",
+	border: "0",
+	padding: "0",
+	width: "1px",
+	height: "1px",
+	margin: "-1px",
+	position: "fixed",
+	top: "0",
+	left: "0"
+}, ge = {
+	...he,
+	position: "absolute"
+};
+function _e(e) {
+	let o = ne(!0), ee = l(), te = d(), c = u(), y = f(), x = e, ue = e, D = Symbol("Checkbox"), O = Symbol("CheckboxLabelSource"), _e = Symbol("CheckboxGroupItem"), k = `base-ui-${T()}`, A = `base-ui-${T()}`, j = `base-ui-${T()}`, be = `base-ui-${T()}`, xe = E(c.controlId), Se = typeof xe == "string" ? xe : k, M = E(() => x.checked !== void 0), [Ce, we] = w(E(() => x.defaultChecked ?? !1)), [N, Te] = w(), [P, Ee] = w(), [De, F] = w(), Oe = E(() => M ? !!x.checked : Ce()), I = !1, L = !1, R, z = () => void 0, ke = se(ue, "aria-describedby", "aria-labelledby", "as", "checked", "class", "defaultChecked", "disabled", "form", "id", "indeterminate", "inputRef", "name", "nativeButton", "onBlur", "onChange", "onCheckedChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "parent", "readOnly", "ref", "required", "style", "uncheckedValue", "value"), B = C(() => x.nativeButton ?? !1), V = C(() => x.parent ?? !1), H = C(() => y?.allValues() !== void 0), U = C(() => o.disabled() || te.disabled() || (y?.disabled() ?? !1) || (x.disabled ?? !1)), W = C(() => x.readOnly ?? !1), G = C(() => x.required ?? !1), K = C(() => o.name() ?? x.name), q = C(() => x.value ?? K()), Ae = C(() => M ? !!x.checked : Ce()), J = C(() => !y || q() === void 0 || V() ? H() && V() ? y?.parent.checked() ?? !1 : Ae() : y.value().includes(q())), Y = C(() => H() && V() && (y?.parent.indeterminate() ?? !1) || (x.indeterminate ?? !1)), X = C(() => {
+		if (!H()) return x.id || Se;
+		if (V()) return be;
+		let e = q();
+		return e === void 0 ? x.id || Se || k : `${y?.parent.id}-${e}`;
+	}), je = C(() => H() && V() ? y?.parent.id : B() ? X() : A), Z = C(() => ({
+		...o.state(),
+		checked: J(),
+		disabled: U(),
+		readOnly: W(),
+		required: G(),
+		indeterminate: Y()
+	})), Me = C(() => r(e.class, Z())), Ne = C(() => i(e.style, Z())), Pe = C(() => t(Z(), de(Z()))), Fe = C(() => x["aria-labelledby"] ?? c.labelId() ?? De()), Ie = C(() => c.getAriaDescribedBy(x["aria-describedby"])), Le = {
+		token: _e,
+		disabled: U,
+		element: N,
+		input: P,
+		parent: V,
+		value: q
+	}, Re = {
+		id: A,
+		name: x.name,
+		value: J,
+		getControl: () => N() ?? null
+	}, ze = s(() => x.onBlur), Be = s(() => x.onClick), Ve = s(() => x.onFocus), He = s(() => x.onKeyDown), Ue = s(() => x.onKeyUp);
+	function We(e) {
+		if (L) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		if (Be.call(e.currentTarget, e), e.baseUIHandlerPrevented || W() || U()) return;
+		e.preventDefault();
+		let t = P();
+		t && ve(t, e);
+	}
+	function Ge(e) {
+		Ve.call(e.currentTarget, e), !e.baseUIHandlerPrevented && !U() && o.setFocused(!0);
+	}
+	function Ke(e) {
+		ze.call(e.currentTarget, e), !e.baseUIHandlerPrevented && (o.setTouched(!0), o.setFocused(!1), o.validationMode() === "onBlur" && o.validation.commit(y ? y.value() : J()));
+	}
+	function qe(e) {
+		He.call(e.currentTarget, e), !e.baseUIHandlerPrevented && (e.key === "Enter" ? (B() && $e(e.currentTarget), ye(e, P()?.form ?? null)) : !B() && e.key === " " && e.preventDefault());
+	}
+	function Je(e) {
+		Ue.call(e.currentTarget, e), !(e.baseUIHandlerPrevented || B() || e.defaultPrevented || e.key !== " " || U() || W()) && ve(e.currentTarget, e);
+	}
+	function Ye(e) {
+		if (e.stopPropagation(), e.defaultPrevented) {
+			queueMicrotask(Q);
+			return;
+		}
+		I = !0, Ze(e.currentTarget.checked, e), queueMicrotask(() => {
+			I = !1, Q();
+		});
+	}
+	function Xe(e) {
+		if (I) {
+			I = !1;
+			return;
+		}
+		if (e.defaultPrevented) {
+			queueMicrotask(Q);
+			return;
+		}
+		Ze(e.currentTarget.checked, e), queueMicrotask(Q);
+	}
+	function Ze(e, t) {
+		if (W() || U()) {
+			t.preventDefault();
+			return;
+		}
+		let r = a(n, t);
+		if (x.onCheckedChange?.(e, r), r.isCanceled) {
+			t.preventDefault();
+			return;
+		}
+		let i = q();
+		if (H() && V()) {
+			y?.parent.changeParent(r) || t.preventDefault();
+			return;
+		}
+		if (H() && y && i !== void 0) {
+			y.parent.changeChild(i, e, r) || t.preventDefault();
+			return;
+		}
+		if (y && i !== void 0 && !V()) {
+			let n = e ? [...y.getValue(), i] : y.getValue().filter((e) => e !== i);
+			y.setValue(n, r) || t.preventDefault();
+			return;
+		}
+		M || we(e);
+	}
+	function Q() {
+		let e = P();
+		e && (e.checked = E(J), e.indeterminate = E(Y));
+	}
+	function Qe() {
+		return N() ?? null;
+	}
+	function $e(e) {
+		z(), L = !0;
+		let t = e.ownerDocument, n = t.defaultView, r, i = n?.setTimeout(a, 1e3);
+		function a() {
+			L = !1, t.removeEventListener("keyup", o, !0), n?.removeEventListener("blur", a), r !== void 0 && clearTimeout(r), i !== void 0 && clearTimeout(i), z = () => void 0;
+		}
+		function o(e) {
+			e.key === "Enter" && (r = setTimeout(a, 0));
+		}
+		t.addEventListener("keyup", o, !0), n?.addEventListener("blur", a, { once: !0 }), z = a;
+	}
+	function $(e) {
+		R && R !== e && R.id === j && R.removeAttribute("id"), R !== e && (R = void 0);
+	}
+	return S(X, (e) => c.registerControlId(O, e)), S(() => ({
+		explicit: x["aria-labelledby"],
+		fieldLabel: c.labelId(),
+		input: P(),
+		inputId: X(),
+		nativeButton: B()
+	}), (e) => {
+		function t() {
+			if (e.explicit || e.fieldLabel || e.nativeButton || !e.input) {
+				$(), F(void 0);
+				return;
+			}
+			let t = e.input.closest("label") ?? e.input.labels?.[0];
+			if (!t) {
+				$(), F(void 0);
+				return;
+			}
+			$(t), t.id || (t.id = j, R = t), F(t.id || void 0);
+		}
+		if (t(), e.explicit || e.fieldLabel || e.nativeButton || !e.input || typeof MutationObserver > "u") return;
+		let n, r = new MutationObserver(() => {
+			t(), i();
+		});
+		function i() {
+			let t = e.input?.getRootNode();
+			!t || t === n || (r.disconnect(), n = t, r.observe(t, {
+				attributes: !0,
+				attributeFilter: ["for", "id"],
+				childList: !0,
+				subtree: !0
+			}));
+		}
+		return i(), () => {
+			r.disconnect(), $();
+		};
+	}), S(() => y, (e) => e?.registerCheckbox(Le)), S(() => ({
+		group: y,
+		input: P(),
+		parent: V()
+	}), (e) => {
+		if (!e.input || e.parent) return;
+		let t = e.group?.fieldControlSource ?? D;
+		return o.validation.registerInput(t, e.input, Qe);
+	}), S(() => ({
+		checked: J(),
+		group: y,
+		indeterminate: Y(),
+		input: P(),
+		name: K()
+	}), (e) => {
+		e.input && (e.input.indeterminate = e.indeterminate), !(e.group || e.checked === Oe) && (Oe = e.checked, E(() => {
+			ee.clearError(e.name), o.setFilled(e.checked), o.setDirty(e.checked !== o.validityData().initialValue), o.validation.change(e.checked);
+		}));
+	}), S(() => ({
+		disabled: U(),
+		group: y,
+		name: x.name,
+		root: N()
+	}), (e) => {
+		Re.name = e.name, o.registerFieldControl(D, !e.group && !e.disabled && e.root ? Re : void 0);
+	}), le(() => {
+		J() && o.setFilled(!0), N();
+	}), ce(() => {
+		z(), $(), c.registerControlId(O, void 0), o.registerFieldControl(D, void 0);
+	}), p(fe, {
+		value: Z,
+		get children() {
+			return [
+				p(re, _({
+					get component() {
+						return e.as ?? "span";
+					},
+					ref: [((e) => Te(e)), x.ref],
+					get id() {
+						return je();
+					},
+					get class() {
+						return Me();
+					},
+					get style() {
+						return Ne();
+					},
+					get type() {
+						return B() ? "button" : void 0;
+					},
+					role: "checkbox",
+					get tabIndex() {
+						return U() ? -1 : 0;
+					},
+					get disabled() {
+						return B() && U() ? !0 : void 0;
+					},
+					get "aria-disabled"() {
+						return !B() && U() ? "true" : void 0;
+					},
+					get "aria-checked"() {
+						return g(() => !!Y())() ? "mixed" : J() ? "true" : "false";
+					},
+					get "aria-readonly"() {
+						return W() ? "true" : void 0;
+					},
+					get "aria-required"() {
+						return G() ? "true" : void 0;
+					},
+					get "aria-labelledby"() {
+						return Fe();
+					},
+					get "aria-describedby"() {
+						return Ie();
+					},
+					get "aria-invalid"() {
+						return Z().valid === !1 && !U() ? "true" : void 0;
+					},
+					get "data-parent"() {
+						return V() ? "" : void 0;
+					},
+					get "aria-controls"() {
+						return g(() => !!(H() && V()))() ? y?.parent.ariaControls() : void 0;
+					},
+					onBlur: Ke,
+					onClick: We,
+					onFocus: Ge,
+					onKeyDown: qe,
+					onKeyUp: Je
+				}, Pe, ke)),
+				p(b, {
+					get when() {
+						return g(() => !!(!J() && !y && K() && !V()))() ? x.uncheckedValue !== void 0 : !J() && !y && K() && !V();
+					},
+					get children() {
+						var e = h(pe);
+						return m(() => ({
+							e: x.form,
+							t: K(),
+							a: x.uncheckedValue,
+							o: U()
+						}), ({ e: t, t: n, a: r, o: i }, a) => {
+							t !== a?.e && v(e, "form", t), n !== a?.t && v(e, "name", n), e.value = r ?? "", i !== a?.o && v(e, "disabled", i);
+						}), e;
+					}
+				}),
+				(() => {
+					var e = h(me);
+					return ie(() => [((e) => Ee(e)), x.inputRef], e), oe(e, _({
+						type: "checkbox",
+						get form() {
+							return x.form;
+						},
+						get id() {
+							return B() ? void 0 : X();
+						},
+						get name() {
+							return V() ? void 0 : K();
+						},
+						tabindex: -1,
+						get style() {
+							return K() ? ge : he;
+						},
+						"aria-hidden": "true",
+						get "aria-describedby"() {
+							return Ie();
+						},
+						get "aria-invalid"() {
+							return Z().valid === !1 && !U() ? "true" : void 0;
+						}
+					}, () => x.value === void 0 ? {} : { value: y && !J() ? "" : x.value }, {
+						get disabled() {
+							return U();
+						},
+						get checked() {
+							return J();
+						},
+						get required() {
+							return G();
+						},
+						onClick: Ye,
+						onChange: Xe,
+						onFocus: () => N()?.focus({ preventScroll: !0 })
+					}), !1), ae(), e;
+				})()
+			];
+		}
+	});
+}
+function ve(e, t) {
+	let n = e.ownerDocument.defaultView;
+	if (!n) return;
+	let r = n.PointerEvent ?? n.MouseEvent;
+	e.dispatchEvent(new r("click", {
+		bubbles: !0,
+		cancelable: !0,
+		composed: !0,
+		detail: 0,
+		shiftKey: t.shiftKey,
+		ctrlKey: t.ctrlKey,
+		altKey: t.altKey,
+		metaKey: t.metaKey
+	}));
+}
+function ye(e, t) {
+	e.defaultPrevented || queueMicrotask(() => {
+		e.defaultPrevented || k(t)?.click();
+	});
+}
+function k(e) {
+	if (!e) return null;
+	for (let t of e.elements) if ((t.tagName === "BUTTON" || t.tagName === "INPUT") && t.type === "submit") return t;
+	return null;
+}
+//#endregion
+//#region src/checkbox/indicator/CheckboxIndicator.tsx
+var A = /* @__PURE__ */ y("<span>");
+function j(e) {
+	let n, a = !1, s = O(), c = e, ne = se(e, "as", "class", "keepMounted", "ref", "style"), l = C(() => s().checked || s().indeterminate), u = te(() => l()), d = C(() => (c.keepMounted ?? !1) || u.mounted()), f = C(() => ({
+		...s(),
+		transitionStatus: u.transitionStatus()
+	})), m = C(() => d() ? r(e.class, f()) : void 0), g = C(() => d() ? i(e.style, f()) : void 0), v = C(() => t(f(), {
+		...de(f()),
+		...o
+	}));
+	return S(() => ({
+		element: n,
+		rendered: l(),
+		status: u.transitionStatus()
+	}), (e) => {
+		if (a = e.rendered, e.rendered || e.status !== "ending" || !e.element) return;
+		let t = new AbortController();
+		return ee(e.element, () => {
+			a || u.setMounted(!1);
+		}, t.signal), () => t.abort();
+	}), p(b, {
+		get when() {
+			return d();
+		},
+		get children() {
+			return p(b, {
+				get when() {
+					return e.as;
+				},
+				get fallback() {
+					var e = h(A);
+					return ie(() => [c.ref, ((e) => n = e)], e), oe(e, _({
+						get class() {
+							return m();
+						},
+						get style() {
+							return g();
+						}
+					}, v, ne), !1), ae(), e;
+				},
+				children: (e) => p(re, _({
+					get component() {
+						return e();
+					},
+					ref: [c.ref, ((e) => n = e)],
+					get class() {
+						return m();
+					},
+					get style() {
+						return g();
+					}
+				}, v, ne))
+			});
+		}
+	});
+}
+//#endregion
+//#region src/checkbox/index.parts.ts
+var be = /* @__PURE__ */ e({
+	Indicator: () => j,
+	Root: () => _e
+});
+//#endregion
+export { be as t };

package/dist/lib/client/checkbox-group/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../checkbox-group-CSSp_805.js";
+export { e as CheckboxGroup };

package/dist/lib/client/checkbox-group-CSSp_805.js

@@ -0,0 +1,128 @@
+import { getStateAttributesProps as e } from "./internals/getStateAttributesProps.js";
+import { n as t, t as n } from "./resolveStyle-XcgAuaKR.js";
+import { fieldStateAttributesMapping as r } from "./internals/field-constants.js";
+import { n as i } from "./FieldRootContext-izCEh80D.js";
+import { n as a } from "./FormContext-BB05lWOI.js";
+import { r as o } from "./LabelableContext-DKsB0fIx.js";
+import { t as ee } from "./CheckboxGroupContext-1CRRHK0T.js";
+import { Dynamic as s, createComponent as c, mergeProps as te } from "@solidjs/web";
+import { createEffect as l, createMemo as u, createSignal as d, createUniqueId as f, omit as ne, onCleanup as p, onSettled as m, untrack as h } from "solid-js";
+//#region src/checkbox-group/CheckboxGroup.tsx
+var g = [];
+function _(_) {
+	let b = i(!0), x = a(), S = o(), C = _, w = _, T = Symbol("CheckboxGroup"), E = `base-ui-${f()}`, D = `base-ui-${f()}`, O = h(() => C.value !== void 0), [k, A] = d(() => [...h(() => C.defaultValue) ?? g]), [re, j] = d(), [M, N] = d("mixed"), P = /* @__PURE__ */ new Map(), F = h(() => O ? C.value ?? g : k()), I = F, L = F, R = ne(w, "aria-describedby", "aria-labelledby", "allValues", "as", "class", "defaultValue", "disabled", "onValueChange", "ref", "style", "value"), z = u(() => O ? C.value ?? g : k()), B = u(() => b.disabled() || (C.disabled ?? !1)), V = u(() => ({
+		...b.state(),
+		disabled: B()
+	})), H = u(() => t(_.class, V())), U = u(() => n(_.style, V())), W = u(() => e(V(), r)), G = u(() => C["aria-labelledby"] ?? S.labelId()), K = u(() => S.getAriaDescribedBy(C["aria-describedby"])), q = u(() => z().length === (C.allValues ?? g).length), J = u(() => z().length > 0 && z().length !== (C.allValues ?? g).length), Y = u(() => (C.allValues ?? g).map((e) => `${D}-${e}`).join(" "));
+	function ie(e) {
+		return P.set(e.token, e), () => P.delete(e.token);
+	}
+	function X(e, t) {
+		return C.onValueChange?.(e, t), !t.isCanceled && (O || (I = e, A(e)), !0);
+	}
+	function Z(e) {
+		for (let t of P.values()) if (!t.parent() && t.value() === e) return t.disabled();
+		return !1;
+	}
+	function ae(e) {
+		let t = C.allValues ?? g, n = t.filter((e) => Z(e) && F.includes(e)), r = t.filter((e) => !Z(e) || F.includes(e)), i = F.length === r.length || F.length === 0, a, o = "mixed";
+		return i ? a = Q().length === r.length ? n : r : M() === "mixed" ? (a = r, o = "on") : M() === "on" ? (a = n, o = "off") : a = F, X(a, e) ? (i || N(o), !0) : !1;
+	}
+	function oe(e, t, n) {
+		let r = Q().slice();
+		if (t) r.push(e);
+		else {
+			let t = r.indexOf(e);
+			t !== -1 && r.splice(t, 1);
+		}
+		return X(r, n) ? (F = r, N("mixed"), !0) : !1;
+	}
+	function se() {
+		let e = x.formElement();
+		if (!e) return Q();
+		let t = /* @__PURE__ */ new Set();
+		for (let n of P.values()) {
+			let r = n.input(), i = n.value();
+			r && !n.parent() && i !== void 0 && r.checked && y(r, e) && t.add(i);
+		}
+		return Q().filter((e) => t.has(e));
+	}
+	function Q() {
+		return O ? z() : I;
+	}
+	let $ = {
+		id: E,
+		name: void 0,
+		value: z,
+		getValue: se,
+		getControl: () => b.validation.getInputControl()
+	}, ce = {
+		allValues: () => C.allValues,
+		disabled: B,
+		fieldControlSource: T,
+		getValue: Q,
+		parent: {
+			id: D,
+			checked: q,
+			indeterminate: J,
+			ariaControls: Y,
+			changeParent: ae,
+			changeChild: oe
+		},
+		registerCheckbox: ie,
+		setValue: X,
+		value: z
+	};
+	return l(() => ({
+		disabled: B(),
+		element: re(),
+		id: C.id ?? E,
+		name: b.name()
+	}), (e) => {
+		$.id = e.id, $.name = e.name, b.registerFieldControl(T, e.name && !e.disabled && e.element ? $ : void 0);
+	}), l(() => ({
+		initialValue: b.validityData().initialValue,
+		name: b.name(),
+		value: z()
+	}), (e) => {
+		e.value !== L && (L = e.value, I = e.value, h(() => {
+			x.clearError(e.name), b.setFilled(e.value.length > 0), b.setDirty(!v(e.value, e.initialValue)), b.validation.change(e.value);
+		}));
+	}), m(() => {
+		b.setFilled(z().length > 0);
+	}), p(() => b.registerFieldControl(T, void 0)), c(ee, {
+		value: ce,
+		get children() {
+			return c(s, te({
+				get component() {
+					return _.as ?? "div";
+				},
+				ref: [((e) => j(e)), C.ref],
+				get class() {
+					return H();
+				},
+				get style() {
+					return U();
+				},
+				role: "group",
+				get "aria-labelledby"() {
+					return G();
+				},
+				get "aria-describedby"() {
+					return K();
+				},
+				get "aria-invalid"() {
+					return V().valid === !1 && !B() ? "true" : void 0;
+				}
+			}, W, R));
+		}
+	});
+}
+function v(e, t) {
+	return !Array.isArray(t) || e.length !== t.length ? !1 : e.every((e, n) => e === t[n]);
+}
+function y(e, t) {
+	return e.matches(":disabled") ? !1 : e.form === t || e.form === null && !e.hasAttribute("form");
+}
+//#endregion
+export { _ as t };

package/dist/lib/client/collapsible/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../collapsible-BIbje_ub.js";
+export { e as Collapsible };