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

package/dist/menu.js

@@ -0,0 +1,2 @@
+import { C as e, S as t, T as n, _ as r, a as i, b as a, c as o, d as s, f as c, g as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b, v as x, w as S, x as C, y as w } from "./menu-parts-BQej6eU9.js";
+export { e as MENU_FALLBACK, r as Menu, _ as MenuCheckboxItem, y as MenuContent, S as MenuDefaultsProvider, d as MenuEmpty, i as MenuGroup, h as MenuGroupLabel, v as MenuHeader, o as MenuItem, f as MenuItemDescription, b as MenuItemIcon, s as MenuItemLabel, c as MenuItemMeta, g as MenuItemShortcut, p as MenuRadioGroup, u as MenuRadioItem, l as MenuSeparator, x as MenuSurfaceProvider, m as MenuTrigger, w as MenubarSurfaceProvider, a as useMenu, n as useMenuDefaults, C as useMenuSurface, t as useMenubarSurface };

package/dist/menubar-CtGavUTO.js

@@ -0,0 +1,156 @@
+import { y as e } from "./menu-parts-BQej6eU9.js";
+import { createRovingTabindex as t } from "@slotted/core/focus";
+import { createControllable as n } from "@slotted/core/state";
+import { createContext as r, useCallback as i, useContext as a, useEffect as o, useImperativeHandle as s, useRef as c, useState as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+import { createTypeahead as d, isPrintable as f } from "@slotted/core/typeahead";
+//#region src/menubar/menubar-defaults.tsx
+var p = {
+	disabled: !1,
+	loop: !0,
+	orientation: "horizontal",
+	size: "md",
+	typeahead: !0
+}, m = r(p);
+function h() {
+	return a(m);
+}
+function g({ children: e, ...t }) {
+	let n = h(), r = {
+		disabled: t.disabled ?? n.disabled,
+		loop: t.loop ?? n.loop,
+		orientation: t.orientation ?? n.orientation,
+		size: t.size ?? n.size,
+		typeahead: t.typeahead ?? n.typeahead
+	};
+	return /* @__PURE__ */ u(m.Provider, {
+		value: r,
+		children: e
+	});
+}
+//#endregion
+//#region src/menubar/menubar.tsx
+var _ = "[data-part='trigger']";
+function v(e, t) {
+	return (n) => {
+		e?.(n), n.defaultPrevented || t(n);
+	};
+}
+function y({ children: r, defaultValue: a, disabled: p, loop: m, onValueChange: g, orientation: y, ref: b, render: x, size: S, typeahead: C, value: w, ...T }) {
+	let E = h(), D = p ?? E.disabled, O = m ?? E.loop, k = y ?? E.orientation, A = S ?? E.size, j = C ?? E.typeahead, [M, N] = l(null), [P, F] = l(a), I = w ?? P, L = c("first"), R = c(/* @__PURE__ */ new Map()), z = c(null), B = c({
+		held: I,
+		node: M,
+		onValueChange: g,
+		value: w
+	});
+	B.current = {
+		held: I,
+		node: M,
+		onValueChange: g,
+		value: w
+	};
+	let V = i((e, t, r) => {
+		let i = B.current;
+		if (e === i.held) return;
+		let a = !1, o = n({
+			controlled: i.value,
+			initial: i.held ?? "",
+			onRequest: (e) => {
+				a = e.cancelled, i.onValueChange?.(e.value, e);
+			}
+		}).request(e ?? "", t, r);
+		a || o && F(e === "" ? void 0 : e);
+	}, []), H = i(() => [...B.current.node?.querySelectorAll(_) ?? []], []), U = i((e) => {
+		if (e !== void 0) {
+			for (let [t, n] of R.current) if (n === e) return t;
+		}
+	}, []), W = {
+		close: (e, t) => V(void 0, e, t),
+		disabled: D,
+		entry: L,
+		open: (e, t, n) => V(e, t, n),
+		orientation: k,
+		register: (e, t) => {
+			t === null ? R.current.delete(e) : R.current.set(e, t);
+		},
+		size: A,
+		step: i((e, t) => {
+			let n = H();
+			if (n.length === 0) return;
+			let r = B.current.node?.ownerDocument.activeElement, i = B.current.held, a = n.findIndex((e) => e === r || U(e) === i), o = a === -1 ? 0 : a + e, s = n[O ? (o + n.length) % n.length : Math.min(Math.max(o, 0), n.length - 1)];
+			s !== void 0 && (t?.focus !== !1 && s.focus({ preventScroll: !0 }), t?.open === !0 && (L.current = "trigger", V(U(s), "keyboard")));
+		}, [
+			V,
+			U,
+			O,
+			H
+		]),
+		value: I
+	};
+	o(() => {
+		if (M === null) return;
+		let e = t(M, {
+			includeAriaDisabled: !0,
+			itemSelector: _,
+			loop: () => O,
+			orientation: () => k,
+			onMove: (e, t) => {
+				B.current.held !== void 0 && (L.current = "trigger", V(U(t), "keyboard"));
+			}
+		});
+		return () => e.destroy();
+	}, [
+		V,
+		U,
+		M,
+		O,
+		k
+	]), o(() => {
+		if (!j) return;
+		let e = d();
+		return z.current = e, () => {
+			e.destroy(), z.current = null;
+		};
+	}, [j]), s(b, () => ({
+		close: () => V(void 0, "programmatic"),
+		focus: () => {
+			let e = H();
+			(e.find((e) => e.tabIndex === 0) ?? e[0])?.focus({ preventScroll: !0 });
+		}
+	}), [V, H]);
+	let G = (e) => {
+		let t = z.current;
+		if (t === null || !j || e.ctrlKey || e.metaKey || e.altKey || !f(e.key, t.query.length > 0)) return;
+		let n = H(), r = n.findIndex((t) => t === e.target), i = t.match(e.key, n.map((e) => e.textContent?.trim() ?? ""), r);
+		if (i === -1) return;
+		e.preventDefault();
+		let a = n[i];
+		a?.focus({ preventScroll: !0 }), I !== void 0 && (L.current = "trigger", V(U(a), "keyboard"));
+	}, K = {
+		...T,
+		children: /* @__PURE__ */ u(e, {
+			value: W,
+			children: r
+		}),
+		...k === "vertical" ? { "aria-orientation": "vertical" } : {},
+		...D ? {
+			"aria-disabled": !0,
+			"data-disabled": ""
+		} : {},
+		"data-orientation": k,
+		"data-part": "root",
+		"data-size": A,
+		"data-ui": "menubar",
+		onKeyDown: v(T.onKeyDown, G),
+		role: "menubar"
+	};
+	return x === void 0 ? /* @__PURE__ */ u("div", {
+		...K,
+		ref: N
+	}) : x({
+		...K,
+		ref: N
+	});
+}
+//#endregion
+export { h as i, p as n, g as r, y as t };

package/dist/menubar.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "./menubar-CtGavUTO.js";
+export { t as MENUBAR_FALLBACK, r as Menubar, n as MenubarDefaultsProvider, e as useMenubarDefaults };

package/dist/message-Cp0rLCyW.js

@@ -0,0 +1,430 @@
+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, useMemo as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { messageMessages as h } from "@slotted/core/i18n";
+import { advanceStream as g, initialStream as _, prefersReducedMotion as v, settleStream as y } from "@slotted/core/text-stream";
+//#region src/message/message-defaults.tsx
+var b = i({
+	layout: "bubble",
+	actionsVisibility: "hover",
+	variant: "soft",
+	tone: "secondary"
+});
+function x() {
+	return o(b);
+}
+function S({ children: e, ...t }) {
+	let n = x();
+	return /* @__PURE__ */ p(b.Provider, {
+		value: {
+			layout: t.layout ?? n.layout,
+			actionsVisibility: t.actionsVisibility ?? n.actionsVisibility,
+			variant: t.variant ?? n.variant,
+			tone: t.tone ?? n.tone
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/message/message.tsx
+var C = i(null), w = i(null);
+function T() {
+	let e = o(w);
+	if (e === null) throw Error("A Message part is rendered outside a Message.");
+	return e;
+}
+function E() {
+	return o(w);
+}
+function D() {
+	let e = n(h);
+	return o(w)?.t ?? e;
+}
+function O(e) {
+	return e.nativeEvent.detail === 0 ? "keyboard" : "pointer";
+}
+function k({ layout: e, render: t, ...n }) {
+	let r = {
+		...n,
+		"data-part": "group",
+		"data-ui": "message"
+	}, i = l(() => ({ layout: e }), [e]);
+	return /* @__PURE__ */ p(C.Provider, {
+		value: i,
+		children: t === void 0 ? /* @__PURE__ */ p("div", { ...r }) : t(r)
+	});
+}
+function A({ actionsVisibility: e, align: t = "start", defaultVersion: i = 0, layout: s, messages: l, onRetry: u, onVersionChange: f, render: m, status: g, version: _, versionCount: v = 1, ...y }) {
+	let b = x(), S = n(h, l), T = o(C), E = c(), [D, O] = d(!1), [k, A] = d(i), j = _ ?? k, M = s ?? T?.layout ?? b.layout, N = e ?? b.actionsVisibility, P = g === "sending" || g === "streaming", F = a((e, t, n) => {
+		let i = Math.min(Math.max(0, e), Math.max(0, v - 1));
+		r({
+			controlled: _,
+			initial: j,
+			onRequest: (e) => f?.(e.value, e)
+		}).request(i, t, n) && A(i);
+	}, [
+		j,
+		f,
+		_,
+		v
+	]), I = {
+		align: t,
+		authorId: E,
+		layout: M,
+		onRetry: u,
+		registerAuthor: a((e) => O(e), []),
+		requestVersion: F,
+		status: g,
+		t: S,
+		version: j,
+		versionCount: v
+	}, L = {
+		...D && y["aria-label"] === void 0 ? { "aria-labelledby": E } : {},
+		...P ? { "aria-busy": !0 } : {},
+		...y,
+		"data-actions": N,
+		"data-align": t,
+		"data-layout": M,
+		...P ? { "data-loading": "" } : {},
+		...g === "failed" ? { "data-invalid": "" } : {},
+		...g === "read" ? { "data-read": "" } : {},
+		"data-part": "root",
+		...g === void 0 ? {} : { "data-status": g },
+		"data-ui": "message"
+	};
+	return /* @__PURE__ */ p(w.Provider, {
+		value: I,
+		children: m === void 0 ? /* @__PURE__ */ p("article", { ...L }) : m(L)
+	});
+}
+//#endregion
+//#region src/message/bubble-context.ts
+var j = i(null), M = i(!1);
+function N() {
+	let e = o(j);
+	if (e === null) throw Error("A Bubble part is rendered outside a Bubble.");
+	return e;
+}
+//#endregion
+//#region src/message/message-parts.tsx
+function P(e, t) {
+	return function({ render: n, ...r }) {
+		let i = {
+			...r,
+			"data-part": e
+		};
+		return n === void 0 ? p(t === "div" ? "div" : "span", { ...i }) : n(i);
+	};
+}
+var F = P("avatar", "div"), I = P("body", "div"), L = P("header", "div"), R = P("footer", "div");
+function z({ id: e, render: t, ...n }) {
+	let r = T(), { registerAuthor: i } = r;
+	s(() => (i(!0), () => i(!1)), [i]);
+	let a = {
+		...n,
+		"data-part": "author",
+		id: e ?? r.authorId
+	};
+	return t === void 0 ? /* @__PURE__ */ p("span", { ...a }) : t(a);
+}
+function B({ render: e, ...t }) {
+	let n = {
+		...t,
+		"data-part": "time"
+	};
+	return e === void 0 ? /* @__PURE__ */ p("time", { ...n }) : e(n);
+}
+var V = {
+	sending: "clock",
+	sent: "check",
+	delivered: "check-check",
+	read: "check-check"
+};
+function H({ children: n, render: r, status: i, ...a }) {
+	let s = T(), c = o(M), l = i ?? (s.status === "streaming" ? void 0 : s.status) ?? "sent", u = s.t(l), d = l === "failed" ? void 0 : V[l], h = {
+		...a,
+		children: n ?? (c && d !== void 0 ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(e, { name: d }) }), /* @__PURE__ */ p("span", { children: u })] }) : u),
+		"data-part": "receipt",
+		"data-status": l
+	};
+	return r === void 0 ? /* @__PURE__ */ p("span", { ...h }) : r(h);
+}
+function U({ render: e, ...t }) {
+	let { t: n } = T(), r = {
+		"aria-label": n("actions"),
+		role: "toolbar",
+		...t,
+		"data-part": "actions"
+	};
+	return e === void 0 ? /* @__PURE__ */ p("div", { ...r }) : e(r);
+}
+function W({ render: e, ...t }) {
+	let n = {
+		role: "status",
+		...t,
+		"data-part": "activity"
+	};
+	return e === void 0 ? /* @__PURE__ */ p("div", { ...n }) : e(n);
+}
+function G({ children: n, render: r, status: i = "current", ...a }) {
+	let o = i === "complete" ? /* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(e, { name: "check" }) }) : i === "current" ? /* @__PURE__ */ p("span", {
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ p("span", {
+			"aria-hidden": "true",
+			"data-ui": "spinner"
+		})
+	}) : /* @__PURE__ */ p("span", { "aria-hidden": "true" }), s = {
+		...i === "current" ? { "aria-current": "step" } : {},
+		...a,
+		children: /* @__PURE__ */ m(f, { children: [o, /* @__PURE__ */ p("span", { children: n })] }),
+		...i === "complete" ? { "data-complete": "" } : {},
+		...i === "current" ? { "data-current": "" } : {},
+		"data-part": "activity-step"
+	};
+	return r === void 0 ? /* @__PURE__ */ p("div", { ...s }) : r(s);
+}
+function K({ children: n, onKeyDown: r, render: i, ...a }) {
+	let { requestVersion: o, t: s, version: c, versionCount: l } = T();
+	if (l < 2) return null;
+	let u = (e) => (t) => o(c + e, O(t), t), d = {
+		"aria-label": s("versions"),
+		role: "group",
+		...a,
+		children: n ?? /* @__PURE__ */ m(f, { children: [
+			/* @__PURE__ */ p("button", {
+				"aria-label": s("previousVersion"),
+				"data-part": "version-previous",
+				disabled: c <= 0,
+				onClick: u(-1),
+				type: "button",
+				children: /* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(e, { name: "chevron-right" }) })
+			}),
+			/* @__PURE__ */ p("span", {
+				"aria-live": "polite",
+				"data-part": "version-label",
+				children: s("versionLabel", {
+					current: c + 1,
+					total: l
+				})
+			}),
+			/* @__PURE__ */ p("button", {
+				"aria-label": s("nextVersion"),
+				"data-part": "version-next",
+				disabled: c >= l - 1,
+				onClick: u(1),
+				type: "button",
+				children: /* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(e, { name: "chevron-right" }) })
+			})
+		] }),
+		"data-part": "versions",
+		onKeyDown: (e) => {
+			if (r?.(e), e.defaultPrevented) return;
+			let t = getComputedStyle(e.currentTarget).direction === "rtl", n = t ? "ArrowLeft" : "ArrowRight", i = t ? "ArrowRight" : "ArrowLeft";
+			(e.key === n || e.key === i) && (e.preventDefault(), o(c + (e.key === n ? 1 : -1), "keyboard", e));
+		}
+	};
+	return i === void 0 ? /* @__PURE__ */ p("div", { ...d }) : i(d);
+}
+//#endregion
+//#region src/message/bubble.tsx
+function q(e, t) {
+	typeof e == "function" ? e(t) : e != null && (e.current = t);
+}
+function J({ children: n, defaultRevealed: i = !1, maxLines: o, onRevealedChange: s, render: l, revealed: u, style: h, tone: g, variant: _, ...v }) {
+	let y = x(), b = E(), S = D(), C = c(), [w, T] = d(i), [k, A] = d(!1), M = u ?? w, N = o !== void 0, P = b?.layout === "thread" ? "plain" : b?.align === "end" ? "solid" : void 0, F = b?.align === "end" && b.layout !== "thread" ? "accent" : void 0, I = _ ?? P ?? y.variant, L = g ?? F ?? y.tone, R = a((e, t, n) => {
+		r({
+			controlled: u,
+			initial: M,
+			onRequest: (e) => s?.(e.value, e)
+		}).request(e, t, n) && T(e);
+	}, [
+		s,
+		u,
+		M
+	]), z = {
+		clamped: N,
+		contentId: C,
+		overflowing: k,
+		requestRevealed: R,
+		revealed: M,
+		setOverflowing: A,
+		variant: I
+	}, B = N && (k || M) ? /* @__PURE__ */ m("button", {
+		"aria-controls": C,
+		"aria-expanded": M,
+		"data-part": "more",
+		onClick: (e) => R(!M, O(e), e),
+		type: "button",
+		children: [S(M ? "less" : "more"), /* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(e, { name: "chevron-down" }) })]
+	}) : null, V = {
+		...v,
+		children: /* @__PURE__ */ m(f, { children: [n, B] }),
+		...N ? { "data-clamped": "" } : {},
+		"data-part": "bubble",
+		...M && N ? { "data-revealed": "" } : {},
+		"data-tone": L,
+		"data-ui": "message",
+		"data-variant": I,
+		style: N ? {
+			...h,
+			"--slotted-message-max-lines": o
+		} : h
+	};
+	return /* @__PURE__ */ p(j.Provider, {
+		value: z,
+		children: l === void 0 ? /* @__PURE__ */ p("div", { ...V }) : l(V)
+	});
+}
+function Y({ id: e, ref: t, render: n, ...r }) {
+	let i = N(), { clamped: o, revealed: c, setOverflowing: l } = i, d = u(null);
+	s(() => {
+		let e = d.current;
+		if (!o || e === null || c) return;
+		let t = () => l(e.scrollHeight > e.clientHeight + 1);
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [
+		o,
+		c,
+		l
+	]);
+	let f = a((e) => {
+		d.current = e, q(t, e);
+	}, [t]), m = {
+		...r,
+		"data-part": "content",
+		id: e ?? i.contentId,
+		ref: f
+	};
+	return n === void 0 ? /* @__PURE__ */ p("div", { ...m }) : n(m);
+}
+function X({ render: e, ...t }) {
+	let n = {
+		...t,
+		"data-part": "meta"
+	};
+	return /* @__PURE__ */ p(M.Provider, {
+		value: !0,
+		children: e === void 0 ? /* @__PURE__ */ p("span", { ...n }) : e(n)
+	});
+}
+function Z({ author: e, children: t, onJump: n, render: r, ...i }) {
+	let a = /* @__PURE__ */ m(f, { children: [e === void 0 ? null : /* @__PURE__ */ p("span", {
+		"data-part": "quote-author",
+		children: e
+	}), t] }), o = {
+		...i,
+		children: a,
+		"data-part": "quote"
+	};
+	return r === void 0 ? n === void 0 ? /* @__PURE__ */ p("div", { ...o }) : /* @__PURE__ */ p("button", {
+		...o,
+		onClick: (e) => n(e),
+		type: "button"
+	}) : r(o);
+}
+function Q({ text: e, animate: t, render: n, ...r }) {
+	let i = E(), a = t ?? i?.status === "streaming", [o, s] = d(() => ({
+		stream: _(e),
+		streaming: a
+	})), { stream: c } = o;
+	if (c.text !== e || o.streaming !== a) {
+		let t = typeof window > "u" ? null : window;
+		c = g(c, e, {
+			animate: (a || o.streaming) && !v(t),
+			now: typeof performance > "u" ? 0 : performance.now()
+		}), s({
+			stream: c,
+			streaming: a
+		});
+	}
+	let l = {
+		...r,
+		"data-part": "stream",
+		children: /* @__PURE__ */ m(f, { children: [c.settled, c.chunks.map((e) => /* @__PURE__ */ p("span", {
+			"data-part": "stream-chunk",
+			onAnimationEnd: () => s((t) => ({
+				...t,
+				stream: y(t.stream, e.key)
+			})),
+			style: { animationDelay: `${e.delay}ms` },
+			children: e.text
+		}, e.key))] })
+	};
+	return n === void 0 ? /* @__PURE__ */ p("span", { ...l }) : n(l);
+}
+function $(e) {
+	let { render: t, ...n } = e, r = {
+		"aria-hidden": !0,
+		...n,
+		"data-part": "caret"
+	};
+	return t === void 0 ? /* @__PURE__ */ p("span", { ...r }) : t(r);
+}
+function ee(e) {
+	let t = D();
+	return /* @__PURE__ */ m("span", {
+		"aria-label": t("typing"),
+		role: "img",
+		...e,
+		"data-part": "typing",
+		children: [
+			/* @__PURE__ */ p("span", {}),
+			/* @__PURE__ */ p("span", {}),
+			/* @__PURE__ */ p("span", {})
+		]
+	});
+}
+function te({ children: n, onClick: r, render: i, ...a }) {
+	let o = E(), s = {
+		"aria-label": D()("retry"),
+		type: "button",
+		...a,
+		children: n ?? /* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(e, { name: "rotate-ccw" }) }),
+		"data-part": "retry",
+		onClick: (e) => {
+			r?.(e), !e.defaultPrevented && o?.onRetry?.({
+				reason: O(e),
+				source: e
+			});
+		}
+	};
+	return i === void 0 ? /* @__PURE__ */ p("button", { ...s }) : i(s);
+}
+function ne({ render: e, ...t }) {
+	let n = {
+		"aria-label": D()("reactions"),
+		role: "group",
+		...t,
+		"data-part": "reactions"
+	};
+	return e === void 0 ? /* @__PURE__ */ p("div", { ...n }) : e(n);
+}
+function re({ children: e, count: t, defaultPressed: n = !1, disabled: i, onClick: a, onPressedChange: o, pressed: s, ...c }) {
+	let [l, u] = d(n), f = s ?? l, h = (e) => {
+		a?.(e), !e.defaultPrevented && r({
+			controlled: s,
+			initial: f,
+			onRequest: (e) => o?.(e.value, e)
+		}).request(!f, O(e), e) && u(!f);
+	};
+	return /* @__PURE__ */ m("button", {
+		"aria-pressed": f,
+		type: "button",
+		...c,
+		"data-part": "reaction",
+		...f ? { "data-pressed": "" } : {},
+		...i ? { "data-disabled": "" } : {},
+		disabled: i,
+		onClick: h,
+		children: [e, t === void 0 ? null : /* @__PURE__ */ p("span", {
+			"data-part": "reaction-count",
+			children: t
+		})]
+	});
+}
+//#endregion
+export { A as C, x as D, S as E, N as S, T, R as _, Z as a, B as b, te as c, U as d, W as f, I as g, F as h, X as i, Q as l, z as m, $ as n, re as o, G as p, Y as r, ne as s, J as t, ee as u, L as v, k as w, K as x, H as y };