@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/multi-select.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "./multi-select-CfzsvAeI.js";
+export { i as MULTI_SELECT_FALLBACK, c as MultiSelect, r as MultiSelectContent, e as MultiSelectControl, u as MultiSelectDefaultsProvider, l as MultiSelectGroup, a as MultiSelectItem, s as MultiSelectSeparator, o as NARROW_WIDTH, t as useMultiSelect, n as useMultiSelectDefaults };

package/dist/navigation-menu-parts-D8qFAwHX.js

@@ -0,0 +1,492 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+import { createControllable as r } from "@slotted/core/state";
+import { createContext as i, useCallback as a, useContext as o, useEffect as s, useId as c, useImperativeHandle as l, useLayoutEffect as u, useMemo as d, useReducer as f, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { createPresence as v } from "@slotted/core/presence";
+import { createDismissableLayer as y } from "@slotted/core/dismissable-layer";
+import { navigationMenuMessages as b } from "@slotted/core/i18n";
+import { createHoverIntent as x, focusTarget as S, measureViewport as C, motionBetween as w, writeGeometry as ee } from "@slotted/core/navigation-menu";
+//#region src/navigation-menu/navigation-menu-defaults.tsx
+var T = {
+	arrow: !1,
+	closeDelay: 300,
+	closeOnSelect: !0,
+	openDelay: 200,
+	size: "md"
+}, E = i(T);
+function D() {
+	return o(E);
+}
+function te({ children: e, ...t }) {
+	let n = D(), r = d(() => ({
+		arrow: t.arrow ?? n.arrow,
+		closeDelay: t.closeDelay ?? n.closeDelay,
+		closeOnSelect: t.closeOnSelect ?? n.closeOnSelect,
+		openDelay: t.openDelay ?? n.openDelay,
+		size: t.size ?? n.size
+	}), [
+		t.arrow,
+		t.closeDelay,
+		t.closeOnSelect,
+		t.openDelay,
+		t.size,
+		n
+	]);
+	return /* @__PURE__ */ g(E.Provider, {
+		value: r,
+		children: e
+	});
+}
+//#endregion
+//#region src/navigation-menu/navigation-menu.tsx
+var ne = 8, O = i(void 0), k = i(!1);
+function A() {
+	let e = o(O);
+	if (e === void 0) throw Error("Every navigation-menu part must be rendered inside NavigationMenu.");
+	return e;
+}
+var j = ":scope > [data-part=\"list\"] > [data-part=\"item\"]";
+function re({ arrow: e, children: t, className: i, closeDelay: c, closeOnSelect: f, defaultValue: v, messages: T, onBlur: E, onKeyDown: te, onPointerEnter: A, onPointerLeave: re, onValueChange: M, openDelay: ie, orientation: N, ref: P, render: F, size: ae, style: oe, value: I, ...L }) {
+	let R = D(), z = o(O), se = o(k), B = z !== void 0 && se, ce = n(b, T), V = e ?? R.arrow, H = c ?? R.closeDelay, U = f ?? R.closeOnSelect, le = ie ?? R.openDelay, W = N ?? (B ? "vertical" : "horizontal"), ue = ae ?? R.size, [de, fe] = m(v ?? null), G = I === void 0 ? de : I, [K, pe] = m(null), [me, he] = m(!1), [ge, _e] = m(!1), q = p(/* @__PURE__ */ new Map()), ve = a((e, t) => (q.current.set(e, t), () => {
+		q.current.get(e) === t && q.current.delete(e);
+	}), []), J = a(() => {
+		let e = Y.current.currentValue, t = e === null ? void 0 : q.current.get(e);
+		return t === void 0 ? null : K?.ownerDocument.getElementById(t) ?? null;
+	}, [K]), [ye, be] = m(0), [xe, Se] = m({
+		from: null,
+		to: G,
+		enter: null,
+		exit: null
+	}), Y = p({
+		currentValue: G,
+		onValueChange: M,
+		value: I
+	});
+	Y.current = {
+		currentValue: G,
+		onValueChange: M,
+		value: I
+	};
+	let X = a((e, t, n) => {
+		r({
+			controlled: Y.current.value,
+			initial: Y.current.currentValue,
+			onRequest: (e) => Y.current.onValueChange?.(e.value, e)
+		}).request(e, t, n) && fe(e);
+	}, []), Ce = a((e) => {
+		B && z !== void 0 ? z.select(e) : X(null, "select", e);
+	}, [
+		B,
+		z,
+		X
+	]), Z = a(() => be((e) => e + 1), []), we = p(G);
+	u(() => {
+		let e = we.current;
+		if (e === G) return;
+		we.current = G;
+		let t = K === null ? [] : [...K.querySelectorAll(j)].map((e) => e.dataset.value ?? "");
+		Se({
+			from: e,
+			to: G,
+			...w(t, e, G)
+		});
+	}, [G, K]);
+	let Q = p(!1);
+	u(() => {
+		if (K === null) return;
+		if (G === null) {
+			Q.current = !1;
+			return;
+		}
+		let e = K.querySelector(`${j}[data-value="${CSS.escape(G)}"]`), t = e?.querySelector(":scope > [data-part=\"trigger\"]"), n = e?.querySelector(":scope > [data-part=\"content\"]");
+		if (_e(!!(t && n)), !t || !n) {
+			Q.current = !1;
+			return;
+		}
+		let r = C(K, t, n, W, ne);
+		if (B) {
+			let e = K.querySelector(":scope > [data-part=\"list\"]");
+			r.blockSize = Math.max(r.blockSize, e?.offsetHeight ?? 0);
+		}
+		let i = !Q.current;
+		i && K.style.setProperty("transition", "none"), ee(K, r), i && (K.offsetWidth, K.style.removeProperty("transition")), Q.current = !0, he(!0), B && z?.remeasure();
+	}, [
+		G,
+		B,
+		z,
+		W,
+		K,
+		ye
+	]), s(() => {
+		if (K === null || G === null || typeof ResizeObserver > "u") return;
+		let e = K.querySelector(`${j}[data-value="${CSS.escape(G)}"] > [data-part="content"]`), t = new ResizeObserver(Z);
+		e && t.observe(e);
+		let n = K.ownerDocument.defaultView;
+		return n?.addEventListener("resize", Z), () => {
+			t.disconnect(), n?.removeEventListener("resize", Z);
+		};
+	}, [
+		G,
+		Z,
+		K
+	]), s(() => {
+		if (K === null || G === null || B) return;
+		let e = J(), t = y(K, {
+			...e !== null && !K.contains(e) ? { branches: [e] } : {},
+			escape: !0,
+			focusOutside: !1,
+			modal: !1,
+			outsidePress: !0,
+			scrollLock: !1,
+			onDismiss: (e) => {
+				let t = e.reason === "escape" ? "escape" : "outsidePress", n = K.querySelector(`${j}[data-value="${CSS.escape(Y.current.currentValue ?? "")}"] > [data-part="trigger"]`);
+				X(null, t, e.source), t === "escape" && n?.focus();
+			}
+		});
+		return () => t.destroy();
+	}, [
+		G,
+		B,
+		J,
+		X,
+		K
+	]);
+	let $ = d(() => x({
+		openDelay: le,
+		closeDelay: H,
+		isOpen: () => Y.current.currentValue !== null,
+		open: (e) => X(e, "pointer"),
+		close: () => X(null, "pointer")
+	}), [
+		X,
+		H,
+		le
+	]);
+	s(() => () => $.destroy(), [$]);
+	let Te = a((e, t) => $.enter(e, t), [$]), Ee = (e) => {
+		A?.(e), $.stay();
+	}, De = (e) => {
+		re?.(e), !B && e.pointerType !== "touch" && $.leave();
+	}, Oe = (e) => {
+		if (E?.(e), B || K === null) return;
+		let t = e.relatedTarget;
+		(t === null || !K.contains(t) && !J()?.contains(t)) && Y.current.currentValue !== null && X(null, "blur", e.nativeEvent);
+	}, ke = (e) => {
+		if (te?.(e), e.defaultPrevented || K === null) return;
+		let t = e.target, n = t.closest("[data-ui=\"navigation-menu\"]"), r = t.closest("[data-part=\"content\"]")?.closest("[data-ui=\"navigation-menu\"]");
+		if (n !== K && r !== K) return;
+		let i = S(K, t, e.key, {
+			orientation: W,
+			dir: getComputedStyle(K).direction === "rtl" ? "rtl" : "ltr"
+		});
+		i !== null && (e.preventDefault(), i.focus());
+	};
+	l(P, () => ({
+		open: (e) => X(e, "programmatic"),
+		close: () => X(null, "programmatic"),
+		focus: (e) => {
+			if (K === null) return;
+			let t = e === void 0 ? `${j} > :is([data-part="trigger"], [data-part="link"])` : `${j}[data-value="${CSS.escape(e)}"] > :is([data-part="trigger"], [data-part="link"])`;
+			K.querySelector(t)?.focus();
+		},
+		root: K
+	}), [X, K]);
+	let Ae = d(() => ({
+		arrow: V,
+		closeOnSelect: U,
+		hover: Te,
+		motion: xe,
+		nested: B,
+		orientation: W,
+		register: ve,
+		remeasure: Z,
+		request: X,
+		root: K,
+		select: Ce,
+		value: G
+	}), [
+		G,
+		Te,
+		xe,
+		B,
+		ve,
+		Z,
+		X,
+		V,
+		U,
+		W,
+		K,
+		Ce
+	]), je = B ? null : /* @__PURE__ */ g("div", {
+		"data-part": "viewport",
+		...G !== null && ge ? { "data-open": "" } : {},
+		...me ? { "data-positioned": "" } : {},
+		children: V ? /* @__PURE__ */ g("span", {
+			"aria-hidden": "true",
+			"data-part": "arrow"
+		}) : null
+	}), Me = {
+		...L,
+		...B ? {} : { "aria-label": L["aria-label"] ?? ce("navigation") },
+		children: /* @__PURE__ */ _(h, { children: [t, je] }),
+		className: i,
+		...B ? { "data-nested": "" } : {},
+		"data-orientation": W,
+		"data-part": "root",
+		"data-size": ue,
+		"data-ui": "navigation-menu",
+		onBlur: Oe,
+		onKeyDown: ke,
+		onPointerEnter: Ee,
+		onPointerLeave: De,
+		ref: pe,
+		style: oe
+	}, Ne = B ? "div" : "nav";
+	return /* @__PURE__ */ g(O.Provider, {
+		value: Ae,
+		children: /* @__PURE__ */ g(k.Provider, {
+			value: B,
+			children: F === void 0 ? /* @__PURE__ */ g(Ne, { ...Me }) : F(Me)
+		})
+	});
+}
+//#endregion
+//#region src/navigation-menu/navigation-menu-parts.tsx
+function M(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+function ie(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+var N = i(void 0);
+function P() {
+	let e = o(N);
+	if (e === void 0) throw Error("NavigationMenuTrigger and NavigationMenuContent must be rendered inside NavigationMenuItem.");
+	return e;
+}
+function F({ children: e, ref: t, render: n, ...r }) {
+	let i = {
+		...r,
+		children: e,
+		"data-part": "list"
+	};
+	return n === void 0 ? /* @__PURE__ */ g("ul", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+function ae({ children: e, disabled: t = !1, ref: n, render: r, value: i, ...l }) {
+	let u = A(), f = o(N), p = c(), [h, _] = m(null), [v, y] = m(() => /* @__PURE__ */ new Set()), b = u.value === i, { register: x } = u;
+	s(() => x(i, p), [
+		p,
+		x,
+		i
+	]);
+	let S = a((e, t) => {
+		y((n) => {
+			if (n.has(e) === t) return n;
+			let r = new Set(n);
+			return t ? r.add(e) : r.delete(e), r;
+		});
+	}, []), C = v.size > 0, w = f?.reportCurrent;
+	s(() => {
+		if (w !== void 0) return w(p, C), () => w(p, !1);
+	}, [
+		p,
+		C,
+		w
+	]);
+	let ee = d(() => ({
+		contentId: p,
+		disabled: t,
+		hasCurrent: v.size > 0,
+		open: b,
+		reportCurrent: S,
+		setTrigger: _,
+		trigger: h,
+		value: i
+	}), [
+		p,
+		v,
+		t,
+		b,
+		S,
+		h,
+		i
+	]), T = {
+		...l,
+		children: e,
+		...t ? { "data-disabled": "" } : {},
+		...b ? { "data-open": "" } : {},
+		"data-part": "item",
+		"data-value": i
+	};
+	return /* @__PURE__ */ g(N.Provider, {
+		value: ee,
+		children: r === void 0 ? /* @__PURE__ */ g("li", {
+			...T,
+			ref: n
+		}) : r(T)
+	});
+}
+function oe({ children: n, disabled: r, onClick: i, onPointerEnter: a, ref: o, ...s }) {
+	let c = A(), l = P(), u = r ?? l.disabled, d = c.orientation === "vertical", f = (e) => {
+		i?.(e), !(e.defaultPrevented || u) && c.request(l.open ? null : l.value, ie(e), e.nativeEvent);
+	}, p = (e) => {
+		a?.(e), !(e.defaultPrevented || u) && (c.root === null || c.root.contains(e.currentTarget)) && c.hover(l.value, e.pointerType);
+	};
+	return /* @__PURE__ */ _("button", {
+		type: "button",
+		...s,
+		"aria-controls": l.contentId,
+		"aria-expanded": l.open,
+		...l.open ? { "data-open": "" } : {},
+		...l.hasCurrent ? { "data-current": "" } : {},
+		"data-part": "trigger",
+		disabled: u,
+		onClick: f,
+		onPointerEnter: p,
+		ref: (e) => M(e, l.setTrigger, o),
+		children: [n, /* @__PURE__ */ g("span", {
+			"aria-hidden": "true",
+			"data-part": "indicator",
+			children: /* @__PURE__ */ g(t, {
+				directional: d,
+				children: /* @__PURE__ */ g(e, { name: d ? "chevron-right" : "chevron-down" })
+			})
+		})]
+	});
+}
+function I({ children: e, columns: t = 1, ref: n, render: r, ...i }) {
+	let a = A(), o = P(), [, c] = f((e) => e + 1, 0), [l] = m(() => v({
+		present: o.open,
+		onStatusChange: () => c()
+	}));
+	u(() => l.sync(o.open), [o.open, l]), s(() => () => l.destroy(), [l]);
+	let { motion: d } = a, p = !o.open && l.status === "exiting", h = o.open && d.to === o.value ? d.enter : p && d.from === o.value ? d.exit : null, _ = {
+		...i,
+		children: e,
+		"data-columns": String(t),
+		...h ? { "data-motion": h } : {},
+		...o.open ? { "data-open": "" } : {},
+		"data-part": "content",
+		hidden: !o.open && !l.mounted,
+		id: o.contentId
+	};
+	return /* @__PURE__ */ g(k.Provider, {
+		value: !0,
+		children: r === void 0 ? /* @__PURE__ */ g("div", {
+			..._,
+			ref: (e) => M(e, l.setNode, n)
+		}) : r(_)
+	});
+}
+function L({ children: e, closeOnSelect: t, current: n, disabled: r = !1, onClick: i, ref: a, render: l, ...u }) {
+	let d = A(), f = o(N), p = o(k), m = c(), h = n ?? u["aria-current"] === "page", _ = f?.reportCurrent;
+	s(() => {
+		if (p && _ !== void 0) return _(m, h), () => _(m, !1);
+	}, [
+		p,
+		h,
+		m,
+		_
+	]);
+	let v = (e) => {
+		if (r) {
+			e.preventDefault();
+			return;
+		}
+		i?.(e), !e.defaultPrevented && p && (t ?? d.closeOnSelect) && d.select(e.nativeEvent);
+	}, y = {
+		...u,
+		...h ? {
+			"aria-current": "page",
+			"data-current": ""
+		} : {},
+		...r ? {
+			"aria-disabled": "true",
+			"data-disabled": ""
+		} : {},
+		children: e,
+		"data-part": "link",
+		onClick: v,
+		ref: (e) => M(e, a)
+	};
+	return l === void 0 ? /* @__PURE__ */ g("a", { ...y }) : l(y);
+}
+function R({ children: e, ref: t, render: n, ...r }) {
+	let i = {
+		...r,
+		children: e,
+		"data-part": "links"
+	};
+	return n === void 0 ? /* @__PURE__ */ g("ul", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+var z = i(void 0);
+function se({ children: e, ref: t, render: n, ...r }) {
+	let i = c(), a = {
+		...r,
+		"aria-labelledby": r["aria-labelledby"] ?? i,
+		children: e,
+		"data-part": "group",
+		role: "group"
+	};
+	return /* @__PURE__ */ g(z.Provider, {
+		value: i,
+		children: n === void 0 ? /* @__PURE__ */ g("div", {
+			...a,
+			ref: t
+		}) : n(a)
+	});
+}
+function B({ children: e, ref: t, render: n, ...r }) {
+	let i = o(z), a = {
+		...r,
+		children: e,
+		"data-part": "group-label",
+		...i !== void 0 && r.id === void 0 ? { id: i } : {}
+	};
+	return n === void 0 ? /* @__PURE__ */ g("div", {
+		...a,
+		ref: t
+	}) : n(a);
+}
+function ce({ children: e, ref: t, render: n, ...r }) {
+	let i = {
+		...r,
+		children: e,
+		"data-part": "footer"
+	};
+	return n === void 0 ? /* @__PURE__ */ g("div", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+function V({ children: e, ...t }) {
+	return /* @__PURE__ */ g("span", {
+		"aria-hidden": "true",
+		...t,
+		"data-part": "icon",
+		children: e
+	});
+}
+function H({ children: e, ...t }) {
+	return /* @__PURE__ */ g("span", {
+		...t,
+		"data-part": "label",
+		children: e
+	});
+}
+function U({ children: e, ...t }) {
+	return /* @__PURE__ */ g("span", {
+		...t,
+		"data-part": "description",
+		children: e
+	});
+}
+//#endregion
+export { te as _, B as a, H as c, F as d, oe as f, T as g, A as h, se as i, L as l, re as m, U as n, V as o, P as p, ce as r, ae as s, I as t, R as u, D as v };

package/dist/navigation-menu.js

@@ -0,0 +1,2 @@
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g, v as _ } from "./navigation-menu-parts-D8qFAwHX.js";
+export { a as NAVIGATION_MENU_FALLBACK, l as NavigationMenu, h as NavigationMenuContent, e as NavigationMenuDefaultsProvider, u as NavigationMenuDescription, p as NavigationMenuFooter, s as NavigationMenuGroup, t as NavigationMenuGroupLabel, d as NavigationMenuIcon, m as NavigationMenuItem, n as NavigationMenuLabel, c as NavigationMenuLink, g as NavigationMenuLinks, r as NavigationMenuList, i as NavigationMenuTrigger, o as useNavigationMenu, _ as useNavigationMenuDefaults, f as useNavigationMenuItem };