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

package/dist/toolbar-CDQTydDx.js

@@ -0,0 +1,240 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { _ as n, g as r, n as i, t as a } from "./menu-parts-BQej6eU9.js";
+import { TOOLBAR_ITEM_SELECTOR as o, createRovingTabindex as s, toolbarOwnedKeys as c } from "@slotted/core/focus";
+import { Fragment as l, createContext as u, useCallback as d, useContext as f, useEffect as p, useId as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { createCollapse as b } from "@slotted/core/overflow";
+var x = u({
+	collapsed: [],
+	counterpart: () => null,
+	declare: () => void 0,
+	orientation: "horizontal",
+	registerTrigger: () => void 0,
+	release: () => void 0
+});
+function S() {
+	return f(x);
+}
+var C = "data-unit", w = u({
+	loop: !0,
+	orientation: "horizontal",
+	overflow: "wrap",
+	size: "md",
+	variant: "plain"
+});
+function T() {
+	return f(w);
+}
+function E({ children: e, ...t }) {
+	let n = T();
+	return /* @__PURE__ */ v(w.Provider, {
+		value: {
+			loop: t.loop ?? n.loop,
+			orientation: t.orientation ?? n.orientation,
+			overflow: t.overflow ?? n.overflow,
+			size: t.size ?? n.size,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/toolbar/toolbar.tsx
+var D = ":scope > *:not([data-part=\"overflow\"])", O = Object.freeze([]);
+function k(e, t) {
+	for (let n = e.nextElementSibling; n !== null && n !== t; n = n.nextElementSibling) if (n.getAttribute("data-part") === "separator") return !0;
+	return !1;
+}
+function A({ children: e, className: t, loop: n, onOverflowChange: r, orientation: i, overflow: a, ref: l, render: u, size: f, style: m, variant: y, ...S }) {
+	let w = T(), E = g(null), A = g(null), j = g(null), M = g(/* @__PURE__ */ new Map()), [N, P] = _(null), [F, I] = _(O), L = g(r);
+	L.current = r;
+	let R = n ?? w.loop, z = i ?? w.orientation, B = a ?? w.overflow, V = f ?? w.size, H = y ?? w.variant, U = d((e) => P(e), []), W = h(() => ({
+		collapsed: F,
+		counterpart: (e) => M.current.get(e) ?? null,
+		declare: (e, t) => {
+			M.current.set(e, t);
+		},
+		orientation: z,
+		registerTrigger: U,
+		release: (e) => {
+			M.current.delete(e);
+		}
+	}), [
+		F,
+		U,
+		z
+	]), G = d((e) => {
+		if (E.current = e, typeof l == "function") return l(e);
+		l && (l.current = e);
+	}, [l]);
+	p(() => {
+		let e = E.current;
+		if (e === null) return;
+		let t = s(e, {
+			crossAxis: !0,
+			includeAriaDisabled: !0,
+			itemSelector: o,
+			loop: R,
+			orientation: () => z,
+			ownedKeys: (e) => c(e, z)
+		});
+		A.current = t;
+		let n = new MutationObserver(() => {
+			t.refresh(), j.current?.refresh();
+		});
+		return n.observe(e, {
+			childList: !0,
+			subtree: !0
+		}), () => {
+			n.disconnect(), t.destroy(), A.current = null;
+		};
+	}, [R, z]), p(() => {
+		let e = E.current;
+		if (e === null || B !== "menu") return;
+		let t = b(e, {
+			collapsible: (e) => e.hasAttribute(C),
+			divides: (e) => e.getAttribute("data-part") === "separator",
+			fixedSize: (e) => e.getAttribute("data-part") === "spacer" ? 0 : void 0,
+			onChange: (e) => {
+				let t = e.filter((e) => e.hasAttribute(C));
+				I(t.map((e, n) => {
+					let r = t[n - 1];
+					return {
+						id: e.getAttribute("data-unit") ?? "",
+						separatorBefore: r !== void 0 && k(r, e)
+					};
+				})), A.current?.refresh(), L.current?.(t.length);
+			},
+			orientation: () => z,
+			trigger: () => N,
+			units: () => [...e.querySelectorAll(D)]
+		});
+		return j.current = t, () => {
+			t.destroy(), j.current = null, I(O);
+		};
+	}, [
+		z,
+		B,
+		N
+	]);
+	let K = {
+		...S,
+		...B === "menu" ? { "data-collapsed": String(F.length) } : {},
+		...z === "vertical" ? { "aria-orientation": "vertical" } : {},
+		children: e,
+		className: t,
+		"data-orientation": z,
+		"data-overflow": B,
+		"data-part": "root",
+		"data-size": V,
+		"data-ui": "toolbar",
+		"data-variant": H,
+		role: "toolbar",
+		style: m
+	};
+	return /* @__PURE__ */ v(x.Provider, {
+		value: W,
+		children: u === void 0 ? /* @__PURE__ */ v("div", {
+			...K,
+			ref: G
+		}) : u({
+			...K,
+			ref: G
+		})
+	});
+}
+//#endregion
+//#region src/toolbar/toolbar-overflow.tsx
+function j(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+function M(e, t) {
+	return typeof e == "function" ? e(t) : e === void 0 ? `${t} more ${t === 1 ? "action" : "actions"}` : e;
+}
+function N({ align: o, label: s, menuRef: c, ref: u, render: f, side: p, size: m, ...h }) {
+	let _ = S(), b = _.collapsed, { registerTrigger: x } = _, C = g(void 0), w = d((e) => {
+		x(e), j(e, C.current, u);
+	}, [u, x]);
+	return /* @__PURE__ */ y(n, {
+		...o === void 0 ? {} : { align: o },
+		...c === void 0 ? {} : { ref: c },
+		...p === void 0 ? {} : { side: p },
+		...m === void 0 ? {} : { size: m },
+		children: [/* @__PURE__ */ v(i, { render: ({ ref: n, ...r }) => {
+			C.current = n;
+			let i = {
+				...r,
+				...h,
+				"aria-label": M(s, b.length),
+				children: /* @__PURE__ */ v(t, { children: /* @__PURE__ */ v(e, { name: "ellipsis" }) }),
+				"data-part": "overflow"
+			};
+			return f === void 0 ? /* @__PURE__ */ v("button", {
+				...i,
+				ref: w,
+				type: "button"
+			}) : f({
+				...i,
+				ref: w
+			});
+		} }), /* @__PURE__ */ v(a, { children: b.map((e) => /* @__PURE__ */ y(l, { children: [e.separatorBefore ? /* @__PURE__ */ v(r, {}) : null, _.counterpart(e.id)] }, e.id)) })]
+	});
+}
+//#endregion
+//#region src/toolbar/toolbar-parts.tsx
+function P(e) {
+	let t = S(), n = m(), r = e != null && e !== !1;
+	r && t.declare(n, e);
+	let { release: i } = t;
+	return p(() => () => i(n), [n, i]), r ? { [C]: n } : {};
+}
+function F({ children: e, counterpart: t, ref: n, render: r, ...i }) {
+	let a = P(t), o = {
+		...i,
+		...a,
+		children: e,
+		"data-part": "item"
+	};
+	return r === void 0 ? /* @__PURE__ */ v("div", {
+		...o,
+		ref: n
+	}) : r(o);
+}
+function I({ children: e, counterpart: t, ref: n, render: r, ...i }) {
+	let a = P(t), o = {
+		...i,
+		...a,
+		children: e,
+		"data-part": "group",
+		role: "group"
+	};
+	return r === void 0 ? /* @__PURE__ */ v("div", {
+		...o,
+		ref: n
+	}) : r(o);
+}
+function L({ ref: e, render: t, ...n }) {
+	let { orientation: r } = S(), i = {
+		...n,
+		"aria-orientation": r === "vertical" ? "horizontal" : "vertical",
+		"data-part": "separator",
+		role: "separator"
+	};
+	return t === void 0 ? /* @__PURE__ */ v("div", {
+		...i,
+		ref: e
+	}) : t(i);
+}
+function R({ ref: e, render: t, ...n }) {
+	let r = {
+		"aria-hidden": !0,
+		...n,
+		"data-part": "spacer"
+	};
+	return t === void 0 ? /* @__PURE__ */ v("div", {
+		...r,
+		ref: e
+	}) : t(r);
+}
+//#endregion
+export { N as a, T as c, R as i, S as l, F as n, A as o, L as r, E as s, I as t };

package/dist/toolbar.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./toolbar-CDQTydDx.js";
+export { a as Toolbar, s as ToolbarDefaultsProvider, c as ToolbarGroup, i as ToolbarItem, e as ToolbarOverflow, o as ToolbarSeparator, n as ToolbarSpacer, t as useToolbarDefaults, r as useToolbarOverflow };

package/dist/tooltip-BggqPDcW.js

@@ -0,0 +1,393 @@
+import { t as e } from "./react-dom-DzrKNxo6.js";
+import { createControllable as t } from "@slotted/core/state";
+import { createContext as n, useCallback as r, useContext as i, useEffect as a, useId as o, useImperativeHandle as s, useRef as c, useState as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+import { isClipped as d } from "@slotted/core/overflow";
+import { createPresence as f } from "@slotted/core/presence";
+import { createPortalRoot as p, setPortalContainer as m } from "@slotted/core/portal";
+import { createDismissableLayer as h } from "@slotted/core/dismissable-layer";
+import { createPositioner as g } from "@slotted/core/positioner";
+//#region src/tooltip/tooltip-defaults.tsx
+var _ = {
+	align: "center",
+	alignOffset: 0,
+	arrow: !0,
+	arrowPadding: 8,
+	closeDelay: 150,
+	closeOnPress: !0,
+	collisionPadding: 8,
+	describes: "description",
+	flip: !0,
+	groupDelay: 400,
+	hideWhenDetached: !0,
+	hoverable: !0,
+	mount: "active",
+	openDelay: 600,
+	openOn: "hover",
+	portal: !0,
+	shift: !0,
+	side: "top",
+	sideOffset: 0,
+	size: "md",
+	strategy: "absolute",
+	touchDelay: 500,
+	variant: "inverse",
+	whenClipped: !1
+}, v = n({
+	defaults: _,
+	group: { lastClosedAt: 0 }
+});
+function y() {
+	return i(v).defaults;
+}
+function b() {
+	return i(v).group;
+}
+function ee({ children: e, container: t, ...n }) {
+	let r = y(), i = c({ lastClosedAt: 0 }), o = {
+		defaults: {
+			...r,
+			...x(n)
+		},
+		group: i.current
+	};
+	return a(() => {
+		if (t !== void 0) return m(t), () => m(null);
+	}, [t]), /* @__PURE__ */ u(v.Provider, {
+		value: o,
+		children: e
+	});
+}
+function x(e) {
+	let t = Object.entries(e).filter(([, e]) => e !== void 0);
+	return Object.fromEntries(t);
+}
+//#endregion
+//#region src/tooltip/tooltip.tsx
+var S = n(void 0), C = n({ current: void 0 });
+function te() {
+	return i(C);
+}
+function w() {
+	let e = i(S);
+	if (e === void 0) throw Error("TooltipTrigger, TooltipLayer, TooltipContent and TooltipArrow have to be inside a Tooltip.");
+	return e;
+}
+function T({ align: e, alignOffset: n, arrow: i, arrowPadding: f, children: p, closeDelay: m, closeOnPress: h, collisionPadding: g, defaultOpen: _, describes: v, disabled: ee, flip: x, hideWhenDetached: te, hoverable: w, mount: T, onOpenChange: E, open: D, openDelay: O, openOn: k, portal: A, ref: j, shift: M, side: N, sideOffset: P, size: F, strategy: I, touchDelay: L, variant: R, whenClipped: z }) {
+	let B = y(), V = b(), H = `${o()}tooltip`, [U, W] = l(_ ?? !1), [G, ne] = l(null), [re, ie] = l(null), ae = c(void 0), K = ee === !0, q = (D ?? U) && !K, oe = v ?? B.describes, se = oe === "label" ? "eager" : T ?? B.mount, J = O ?? B.openDelay, Y = m ?? B.closeDelay, ce = L ?? B.touchDelay, le = B.groupDelay, ue = c(q);
+	q && (ue.current = !0);
+	let X = c(void 0), de = z ?? B.whenClipped, Z = c({
+		current: q,
+		disabled: K,
+		group: V,
+		onOpenChange: E,
+		open: D,
+		triggerNode: G,
+		whenClipped: de
+	});
+	Z.current = {
+		current: q,
+		disabled: K,
+		group: V,
+		onOpenChange: E,
+		open: D,
+		triggerNode: G,
+		whenClipped: de
+	};
+	let Q = r(() => {
+		X.current !== void 0 && clearTimeout(X.current), X.current = void 0;
+	}, []), $ = r((e, n, r) => {
+		Q();
+		let i = Z.current;
+		if (e === i.current || e && i.disabled || e && i.whenClipped && i.triggerNode !== null && !d(i.triggerNode)) return;
+		let a = !1, o = t({
+			controlled: i.open,
+			initial: i.current,
+			onRequest: (e) => {
+				a = e.cancelled, i.onOpenChange?.(e.value, e);
+			}
+		}).request(e, n, r);
+		a || (e || (i.group.lastClosedAt = Date.now()), o && W(e));
+	}, [Q]), fe = r((e) => {
+		Q();
+		let t = Date.now() - Z.current.group.lastClosedAt;
+		if (J <= 0 || t < le) {
+			$(!0, "pointer", e);
+			return;
+		}
+		X.current = setTimeout(() => $(!0, "pointer", e), J);
+	}, [
+		Q,
+		le,
+		J,
+		$
+	]), pe = r((e) => {
+		if (Q(), Y <= 0) {
+			$(!1, "pointer", e);
+			return;
+		}
+		X.current = setTimeout(() => $(!1, "pointer", e), Y);
+	}, [
+		Q,
+		Y,
+		$
+	]), me = r((e) => {
+		Q(), X.current = setTimeout(() => $(!0, "pointer", e), ce);
+	}, [
+		Q,
+		ce,
+		$
+	]);
+	a(() => Q, [Q]), a(() => {
+		K && (Q(), W(!1));
+	}, [Q, K]), s(j, () => ({
+		close: () => $(!1, "programmatic"),
+		open: () => $(!0, "programmatic"),
+		reposition: () => ae.current?.()
+	}), [$]);
+	let he = {
+		align: e ?? B.align,
+		alignOffset: n ?? B.alignOffset,
+		arrowNode: re,
+		arrowPadding: f ?? B.arrowPadding,
+		cancelPending: Q,
+		closeAfterDelay: pe,
+		closeOnPress: h ?? B.closeOnPress,
+		collisionPadding: g ?? B.collisionPadding,
+		contentId: H,
+		describes: oe,
+		disabled: K,
+		flip: x ?? B.flip,
+		hideWhenDetached: te ?? B.hideWhenDetached,
+		hoverable: w ?? B.hoverable,
+		mount: se,
+		open: q,
+		openAfterDelay: fe,
+		openOn: k ?? B.openOn,
+		portal: A ?? B.portal,
+		pressAndHold: me,
+		seen: ue.current,
+		setArrowNode: ie,
+		setTriggerNode: ne,
+		shift: M ?? B.shift,
+		showArrow: i ?? B.arrow,
+		side: N ?? B.side,
+		sideOffset: P ?? B.sideOffset,
+		size: F ?? B.size,
+		strategy: I ?? B.strategy,
+		toggle: $,
+		triggerNode: G,
+		variant: R ?? B.variant
+	};
+	return /* @__PURE__ */ u(S.Provider, {
+		value: he,
+		children: /* @__PURE__ */ u(C.Provider, {
+			value: ae,
+			children: p
+		})
+	});
+}
+//#endregion
+//#region src/tooltip/tooltip-parts.tsx
+var E = e();
+function D(e, t) {
+	return (n) => {
+		e?.(n), n.defaultPrevented || t(n);
+	};
+}
+function O(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+function k({ children: e, ref: t, render: n, ...i }) {
+	let a = w(), o = c(!1), s = (e) => {
+		a.openOn === "hover" && e.pointerType !== "touch" && a.openAfterDelay(e.nativeEvent);
+	}, l = (e) => {
+		o.current = !1, a.openOn !== "manual" && a.closeAfterDelay(e.nativeEvent);
+	}, d = (e) => {
+		if (e.pointerType === "touch") {
+			o.current = !0, a.pressAndHold(e.nativeEvent);
+			return;
+		}
+		a.closeOnPress && a.open && a.toggle(!1, "pointer", e.nativeEvent);
+	}, f = (e) => {
+		o.current && (o.current = !1, a.cancelPending());
+	}, p = (e) => {
+		a.openOn !== "manual" && e.target.matches(":focus-visible") && a.toggle(!0, "keyboard", e.nativeEvent);
+	}, m = (e) => {
+		a.openOn !== "manual" && a.toggle(!1, "blur", e.nativeEvent);
+	}, h = (e) => {
+		a.closeOnPress && a.open && a.toggle(!1, e.detail === 0 ? "keyboard" : "pointer", e.nativeEvent);
+	}, g = a.describes === "description", _ = a.describes !== "none" && (a.open || a.describes === "label"), v = {
+		...i,
+		children: e,
+		..._ && g ? { "aria-describedby": a.contentId } : {},
+		"aria-labelledby": _ && !g ? a.contentId : i["aria-labelledby"],
+		...a.open ? { "data-open": "" } : {},
+		onBlur: D(i.onBlur, m),
+		onClick: D(i.onClick, h),
+		onFocus: D(i.onFocus, p),
+		onPointerCancel: D(i.onPointerCancel, f),
+		onPointerDown: D(i.onPointerDown, d),
+		onPointerEnter: D(i.onPointerEnter, s),
+		onPointerLeave: D(i.onPointerLeave, l),
+		onPointerUp: D(i.onPointerUp, f)
+	}, y = r((e) => {
+		a.setTriggerNode(e), O(e, t);
+	}, [t, a.setTriggerNode]);
+	return n === void 0 ? /* @__PURE__ */ u("button", {
+		type: "button",
+		...v,
+		ref: y
+	}) : n({
+		...v,
+		ref: y
+	});
+}
+function A({ children: e, ref: t, render: n, ...i }) {
+	let o = w(), s = te(), [d, m] = l(null), [_, v] = l(null), [y, b] = l("unmounted"), [ee, x] = l(!1), S = c(null), C = c(o);
+	C.current = o, a(() => {
+		let e = f({
+			present: C.current.open,
+			onStatusChange: b
+		});
+		return S.current = e, b(e.status), () => {
+			e.destroy(), S.current = null;
+		};
+	}, []), a(() => {
+		S.current?.sync(o.open);
+	}, [o.open]), a(() => {
+		S.current?.setNode(d);
+	}, [d]);
+	let T = o.mount === "eager" || o.mount === "lazy" && o.seen || y !== "unmounted";
+	a(() => {
+		if (!T) {
+			v(null);
+			return;
+		}
+		let e = p({
+			origin: o.triggerNode,
+			disabled: !o.portal
+		});
+		return v(e.container), () => e.release();
+	}, [
+		T,
+		o.portal,
+		o.triggerNode
+	]);
+	let { align: k, alignOffset: A, arrowNode: j, arrowPadding: M, collisionPadding: N, flip: P, hideWhenDetached: F, shift: I, side: L, sideOffset: R, strategy: z } = o;
+	a(() => {
+		if (d === null || o.triggerNode === null) return;
+		let e = !0, t = g(o.triggerNode, d, {
+			align: k,
+			alignOffset: A,
+			boundaryPadding: N,
+			flip: P,
+			hideWhenDetached: F,
+			shift: I,
+			side: L,
+			sideOffset: R,
+			strategy: z,
+			...j ? {
+				arrow: j,
+				arrowPadding: M
+			} : {}
+		});
+		return s.current = () => void t.update(), t.update().then(() => {
+			e && x(!0);
+		}), () => {
+			e = !1, s.current = void 0, t.destroy(), x(!1);
+		};
+	}, [
+		k,
+		A,
+		j,
+		M,
+		N,
+		P,
+		F,
+		d,
+		s,
+		I,
+		L,
+		R,
+		z,
+		o.triggerNode
+	]), a(() => {
+		if (d === null || !o.open) return;
+		let e = h(d, {
+			escape: !0,
+			focusOutside: !1,
+			modal: !1,
+			outsidePress: !0,
+			scrollLock: !1,
+			...o.triggerNode ? { branches: [o.triggerNode] } : {},
+			onDismiss: (e) => {
+				C.current.toggle(!1, e.reason === "escape" ? "escape" : "pointer", e.source);
+			}
+		});
+		return () => e.destroy();
+	}, [
+		d,
+		o.open,
+		o.triggerNode
+	]);
+	let B = () => {
+		o.hoverable && o.cancelPending();
+	}, V = (e) => {
+		o.hoverable && o.closeAfterDelay(e.nativeEvent);
+	}, H = r((e) => {
+		m(e), O(e, t);
+	}, [t]);
+	if (!T) return null;
+	let U = {
+		...i,
+		children: e,
+		"data-align": k,
+		...o.hoverable ? { "data-hoverable": "" } : {},
+		...o.open && ee ? { "data-open": "" } : {},
+		"data-part": "root",
+		"data-size": o.size,
+		"data-ui": "tooltip",
+		"data-variant": o.variant,
+		onPointerEnter: D(i.onPointerEnter, B),
+		onPointerLeave: D(i.onPointerLeave, V)
+	}, W = n === void 0 ? /* @__PURE__ */ u("div", {
+		...U,
+		ref: H
+	}) : n({
+		...U,
+		ref: H
+	});
+	return _ === null ? W : (0, E.createPortal)(W, _);
+}
+function j({ children: e, ref: t, render: n, ...r }) {
+	let i = w(), a = {
+		...r,
+		children: e,
+		...i.describes === "none" ? { "aria-hidden": !0 } : {},
+		"data-part": "content",
+		id: i.contentId,
+		role: "tooltip"
+	};
+	return n === void 0 ? /* @__PURE__ */ u("div", {
+		...a,
+		ref: t
+	}) : n(a);
+}
+function M({ ref: e, render: t, ...n }) {
+	let i = w(), a = r((t) => {
+		i.setArrowNode(t), O(t, e);
+	}, [e, i.setArrowNode]);
+	if (!i.showArrow) return null;
+	let o = {
+		...n,
+		"aria-hidden": !0,
+		"data-part": "arrow"
+	};
+	return t === void 0 ? /* @__PURE__ */ u("div", {
+		...o,
+		ref: a
+	}) : t(o);
+}
+//#endregion
+export { T as a, ee as c, k as i, y as l, j as n, w as o, A as r, _ as s, M as t };

package/dist/tooltip.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./tooltip-BggqPDcW.js";
+export { s as TOOLTIP_FALLBACK, e as Tooltip, c as TooltipArrow, i as TooltipContent, t as TooltipDefaultsProvider, o as TooltipLayer, n as TooltipTrigger, a as useTooltip, r as useTooltipDefaults };