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

package/dist/time-range-picker.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./time-range-picker-HwBvrrXN.js";
+export { n as TIME_RANGE_PICKER_MAX_OPTIONS, e as TIME_RANGE_PICKER_STEP, s as TimeRangePicker, i as TimeRangePickerDefaultsProvider, r as TimeRangePickerPreset, a as isSameTimeRange, o as timeRangePickerLengthLabel, t as useTimeRangePickerDefaults };

package/dist/timeline-DH_02ysz.js

@@ -0,0 +1,421 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { n, r } from "./i18n-DpW8lqJ1.js";
+/* empty css                 */
+/* empty css                         */
+import { tabbables as i } from "@slotted/core/focus";
+import { createControllable as a } from "@slotted/core/state";
+import { Children as o, createContext as s, isValidElement as c, useContext as l, useEffect as u, useId as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { timelineMessages as v } from "@slotted/core/i18n";
+import { getLiveAnnouncer as y } from "@slotted/core/live-announcer";
+import { connectorOf as b, feedFocusTarget as x, formatTimestamp as S, isComplete as C, revealFocusIndex as w, setSizeOf as T, sideOf as E } from "@slotted/core/timeline";
+//#region src/timeline/timeline-defaults.tsx
+var D = s({});
+function O() {
+	return l(D);
+}
+function k({ children: e, ...t }) {
+	let n = O();
+	return /* @__PURE__ */ g(D.Provider, {
+		value: {
+			growing: t.growing ?? n.growing,
+			level: t.level ?? n.level,
+			mode: t.mode ?? n.mode,
+			now: t.now ?? n.now,
+			order: t.order ?? n.order,
+			orientation: t.orientation ?? n.orientation,
+			placement: t.placement ?? n.placement,
+			size: t.size ?? n.size,
+			timeFormat: t.timeFormat ?? n.timeFormat,
+			timeZone: t.timeZone ?? n.timeZone,
+			tone: t.tone ?? n.tone,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/timeline/timeline-context.ts
+var A = s(void 0), j = s({
+	currentIndex: -1,
+	loaded: 0
+}), M = s(void 0);
+function N() {
+	let e = l(A);
+	if (e === void 0) throw Error("Timeline parts must be rendered inside a Timeline.");
+	return e;
+}
+function P() {
+	return l(j);
+}
+function F() {
+	return l(M);
+}
+//#endregion
+//#region src/timeline/timeline-parts.tsx
+var I = s(0);
+function L(e) {
+	return o.toArray(e).filter((e) => c(e));
+}
+function R(e) {
+	let t = 0, n = -1;
+	for (let r of L(e)) if (r.type === V) r.props.current === !0 && n === -1 && (n = t), t += 1;
+	else if (r.type === B) {
+		let e = R(r.props.children);
+		e.currentIndex !== -1 && n === -1 && (n = t + e.currentIndex), t += e.count;
+	}
+	return {
+		count: t,
+		currentIndex: n
+	};
+}
+function z(e, t) {
+	let n = L(e), r = n.reduce((e, t, n) => t.type === V ? n : e, -1), i = R(e), a = t, o = n.map((e, t) => {
+		if (e.type === V) {
+			let n = a;
+			return a += 1, /* @__PURE__ */ g(M.Provider, {
+				value: {
+					index: n,
+					last: t === r
+				},
+				children: e
+			}, e.key ?? n);
+		}
+		if (e.type === B) {
+			let n = a;
+			return a += R(e.props.children).count, /* @__PURE__ */ g(I.Provider, {
+				value: n,
+				children: e
+			}, e.key ?? t);
+		}
+		return e;
+	});
+	return {
+		count: i.count,
+		currentIndex: i.currentIndex === -1 ? -1 : t + i.currentIndex,
+		nodes: o
+	};
+}
+function B({ children: n, collapsible: r = !1, defaultOpen: i, label: o, level: s, onOpenChange: c, open: u, ref: d, render: f, ...p }) {
+	let v = N(), y = l(I), [b, x] = m(i ?? !0), S = r ? u ?? b : !0, C = `${v.ids.list}-group-${y}`, w = `h${s ?? v.level}`, T = z(n, y), E = (e, t, n) => {
+		a({
+			controlled: u,
+			initial: S,
+			onRequest: (e) => c?.(e.value, e)
+		}).request(e, t, n) && x(e);
+	}, D = /* @__PURE__ */ g(w, {
+		"data-part": "group-label",
+		children: r ? /* @__PURE__ */ _("button", {
+			"aria-controls": C,
+			"aria-expanded": S,
+			"data-part": "group-trigger",
+			onClick: (e) => E(!S, e.detail === 0 ? "keyboard" : "pointer", e),
+			type: "button",
+			children: [
+				/* @__PURE__ */ g("span", {
+					"aria-hidden": "true",
+					"data-part": "group-indicator",
+					children: /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { name: "chevron-down" }) })
+				}),
+				o,
+				/* @__PURE__ */ g("span", {
+					"data-ui": "visually-hidden",
+					children: S ? v.t("collapse") : v.t("expand")
+				})
+			]
+		}) : o
+	}), O = v.mode === "feed", k = g(O ? "div" : "ol", {
+		"data-part": "group-list",
+		hidden: !S,
+		id: C,
+		children: T.nodes
+	}), A = {
+		...p,
+		children: /* @__PURE__ */ _(h, { children: [D, k] }),
+		"data-open": S ? "" : void 0,
+		"data-part": "group"
+	};
+	return f === void 0 ? g(O ? "div" : "li", {
+		...A,
+		ref: d
+	}) : f({
+		...A,
+		ref: d
+	});
+}
+function V({ actions: n, actor: r, children: i, complete: a, connector: o, current: s = !1, description: c, loading: l = !1, marker: d, opposite: f, ref: p, render: m, side: v, time: y, timeLabel: x, title: S, tone: w, variant: D, ...O }) {
+	let k = N(), A = P(), j = F(), M = j?.index ?? 0, I = j?.last ?? !0, L = k.mode === "feed", R = C({
+		autoComplete: k.autoComplete,
+		complete: a,
+		currentIndex: A.currentIndex,
+		index: M,
+		order: k.order
+	}), z = b({
+		autoComplete: k.autoComplete,
+		connector: o,
+		currentIndex: A.currentIndex,
+		index: M,
+		order: k.order
+	}), B = k.placement === "alternate" || v !== void 0 ? E(k.placement, M, v) : void 0, V = (e) => k.ids.item(M, e), U = [
+		S === void 0 ? null : V("title"),
+		r === void 0 ? null : V("actor"),
+		y === void 0 ? null : V("time")
+	].filter((e) => e !== null);
+	u(() => {}, [L, U.length]);
+	let ee = R && !s ? /* @__PURE__ */ g(t, {
+		"data-check": "",
+		children: /* @__PURE__ */ g(e, { name: "check" })
+	}) : null, te = /* @__PURE__ */ _("div", {
+		"data-part": "content",
+		children: [
+			S === void 0 ? null : /* @__PURE__ */ _("div", {
+				"data-part": "title",
+				id: V("title"),
+				children: [S, s ? /* @__PURE__ */ g("span", {
+					"data-ui": "visually-hidden",
+					children: k.t("current")
+				}) : null]
+			}),
+			y === void 0 ? null : /* @__PURE__ */ g(H, {
+				id: V("time"),
+				value: y,
+				children: x
+			}),
+			r === void 0 ? null : /* @__PURE__ */ g("div", {
+				"data-part": "actor",
+				id: V("actor"),
+				children: r
+			}),
+			c === void 0 ? null : /* @__PURE__ */ g("div", {
+				"data-part": "description",
+				id: V("description"),
+				children: c
+			}),
+			i,
+			n === void 0 ? null : /* @__PURE__ */ g("div", {
+				"data-part": "actions",
+				children: n
+			})
+		]
+	}), W = {
+		...O,
+		...s ? { "aria-current": !0 } : {},
+		...L ? {
+			"aria-describedby": c === void 0 ? void 0 : V("description"),
+			"aria-labelledby": U.length === 0 ? void 0 : U.join(" "),
+			"aria-posinset": M + 1,
+			"aria-setsize": T({
+				count: k.count,
+				growing: k.growing,
+				loaded: A.loaded
+			}),
+			role: "article",
+			tabIndex: O.tabIndex ?? 0
+		} : {},
+		...l ? { "aria-busy": !0 } : {},
+		children: /* @__PURE__ */ _(h, { children: [
+			f === void 0 ? null : /* @__PURE__ */ g("div", {
+				"data-part": "opposite",
+				children: f
+			}),
+			/* @__PURE__ */ _("div", {
+				"data-part": "rail",
+				children: [/* @__PURE__ */ g("span", {
+					"data-part": "marker",
+					children: l ? /* @__PURE__ */ g("span", {
+						"aria-hidden": "true",
+						"data-part": "root",
+						"data-ui": "spinner"
+					}) : d ?? ee
+				}), I ? null : /* @__PURE__ */ g("span", {
+					"aria-hidden": "true",
+					"data-part": "connector"
+				})]
+			}),
+			te
+		] }),
+		"data-complete": R && !s ? "" : void 0,
+		"data-connector": z === "solid" ? void 0 : z,
+		"data-current": s ? "" : void 0,
+		"data-loading": l ? "" : void 0,
+		"data-part": "item",
+		"data-side": B,
+		"data-tone": w ?? k.tone,
+		"data-variant": D ?? k.variant
+	};
+	return m === void 0 ? g(L ? "article" : "li", {
+		...W,
+		ref: p
+	}) : m({
+		...W,
+		ref: p
+	});
+}
+function H({ children: e, format: t, locale: r, now: i, ref: a, timeZone: o, value: s, ...c }) {
+	let u = l(A), d = n(), f = S(s, {
+		format: t ?? u?.timeFormat,
+		locale: r ?? u?.locale ?? d,
+		now: i ?? u?.now,
+		timeZone: o ?? u?.timeZone
+	});
+	return /* @__PURE__ */ g("time", {
+		...f.title === null ? {} : { title: f.title },
+		...c,
+		"data-part": "time",
+		dateTime: f.dateTime,
+		ref: a,
+		children: e ?? f.text
+	});
+}
+//#endregion
+//#region src/timeline/timeline.tsx
+function U({ autoComplete: e = !1, children: t, count: a, empty: o, freshCount: s = 0, growing: c, label: l, labelledBy: h, level: b, loading: S = !1, locale: C, messages: T, mode: E, now: D, onKeyDown: k, onLoadMore: M, onReveal: N, order: P, orientation: F, placement: I, reflow: L = !0, render: R, size: B, timeFormat: V, timeZone: H, tone: U, variant: ee, ...te }) {
+	let W = O(), ne = n(), G = r(v, T), K = `slotted-timeline-${d()}`, q = p(null), J = p(null), re = p(null), [Y, ie] = m(s);
+	s > 0 && s !== Y && ie(s);
+	let ae = p(s), oe = E ?? W.mode ?? "list", X = c ?? W.growing ?? "none", se = oe === "feed", Z = z(t, 0), Q = () => [...q.current?.querySelectorAll("[data-part=\"item\"]") ?? []].filter((e) => e.closest("[data-part=\"group-list\"][hidden]") === null), $ = {
+		autoComplete: e,
+		count: a,
+		focusItem: (e) => {
+			Q()[e]?.focus();
+		},
+		growing: X,
+		ids: {
+			item: (e, t) => `${K}-${e}-${t}`,
+			list: K
+		},
+		level: b ?? W.level ?? 3,
+		loading: S,
+		locale: C ?? ne,
+		mode: oe,
+		now: D ?? W.now,
+		order: P ?? W.order ?? "oldest-first",
+		orientation: F ?? W.orientation ?? "vertical",
+		placement: I ?? W.placement ?? "end",
+		size: B ?? W.size ?? "md",
+		t: G,
+		timeFormat: V ?? W.timeFormat ?? "absolute",
+		timeZone: H ?? W.timeZone,
+		tone: U ?? W.tone ?? "secondary",
+		variant: ee ?? W.variant ?? "subtle"
+	}, ce = (e) => {
+		if (k?.(e), e.defaultPrevented || !se) return;
+		let t = Q(), n = t.findIndex((t) => t.contains(e.target)), r = x({
+			count: t.length,
+			ctrlKey: e.ctrlKey,
+			from: n,
+			key: e.key,
+			metaKey: e.metaKey
+		});
+		if (r === null) return;
+		if (e.preventDefault(), typeof r == "number") {
+			t[r]?.focus();
+			return;
+		}
+		let a = q.current;
+		if (a === null) return;
+		let o = i(a.ownerDocument.body), s = a.compareDocumentPosition.bind(a);
+		(r === "after" ? o.find((e) => s(e) & Node.DOCUMENT_POSITION_FOLLOWING && !a.contains(e)) : [...o].reverse().find((e) => s(e) & Node.DOCUMENT_POSITION_PRECEDING && !a.contains(e)))?.focus();
+	};
+	u(() => {
+		s <= 0 || y().announce(G("freshItems", { count: s }));
+	}, [s]), f(() => {
+		let e = ae.current;
+		ae.current = s;
+		let t = re.current;
+		if (s > 0 || e <= 0 || t === null || !t.contains(t.ownerDocument.activeElement)) return;
+		let n = Q(), r = w({
+			loaded: n.length,
+			revealed: e,
+			order: $.order
+		}), a = r === null ? void 0 : n[r];
+		a !== void 0 && (a.hasAttribute("tabindex") ? a : i(a)[0])?.focus();
+	}, [s]), u(() => {
+		let e = J.current;
+		if (X !== "scroll" || e === null || S || typeof IntersectionObserver > "u") return;
+		let t = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && M?.("scroll");
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [
+		X,
+		S,
+		M
+	]);
+	let le = {
+		"aria-label": h === void 0 ? l : void 0,
+		"aria-labelledby": h,
+		"data-part": "list",
+		id: K,
+		onKeyDown: ce
+	}, ue = se ? /* @__PURE__ */ g("div", {
+		...le,
+		"aria-busy": S ? !0 : void 0,
+		ref: q,
+		role: "feed",
+		children: Z.nodes
+	}) : /* @__PURE__ */ g("ol", {
+		...le,
+		ref: q,
+		children: Z.nodes
+	}), de = X === "none" ? null : S ? /* @__PURE__ */ _("div", {
+		"aria-live": "polite",
+		"data-part": "more",
+		ref: J,
+		children: [/* @__PURE__ */ g("span", {
+			"aria-hidden": "true",
+			"data-part": "root",
+			"data-ui": "spinner"
+		}), G("loading")]
+	}) : X === "button" ? /* @__PURE__ */ g("button", {
+		"data-part": "more",
+		onClick: (e) => M?.(e.detail === 0 ? "keyboard" : "pointer", e),
+		ref: J,
+		type: "button",
+		children: G("loadMore")
+	}) : /* @__PURE__ */ g("div", {
+		"data-part": "more",
+		ref: J
+	}), fe = {
+		...te,
+		children: /* @__PURE__ */ g(A.Provider, {
+			value: $,
+			children: /* @__PURE__ */ _(j.Provider, {
+				value: {
+					currentIndex: Z.currentIndex,
+					loaded: Z.count
+				},
+				children: [
+					Y > 0 ? /* @__PURE__ */ g("button", {
+						"data-part": "fresh",
+						hidden: s <= 0,
+						onClick: (e) => N?.(e.detail === 0 ? "keyboard" : "pointer", e),
+						ref: re,
+						type: "button",
+						children: G("freshItems", { count: Y })
+					}) : null,
+					ue,
+					de,
+					Z.count === 0 && !S ? /* @__PURE__ */ g("div", {
+						"data-part": "empty",
+						children: o ?? G("empty")
+					}) : null
+				]
+			})
+		}),
+		"data-growing": $.growing,
+		"data-loading": S ? "" : void 0,
+		"data-mode": $.mode,
+		"data-order": $.order,
+		"data-orientation": $.orientation,
+		"data-part": "root",
+		"data-placement": $.placement,
+		"data-reflow": L ? void 0 : "false",
+		"data-size": $.size,
+		"data-tone": $.tone,
+		"data-ui": "timeline",
+		"data-variant": $.variant
+	};
+	return R === void 0 ? /* @__PURE__ */ g("div", { ...fe }) : R(fe);
+}
+//#endregion
+export { N as a, k as c, H as i, O as l, B as n, F as o, V as r, P as s, U as t };

package/dist/timeline.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 "./timeline-DH_02ysz.js";
+export { c as Timeline, t as TimelineDefaultsProvider, i as TimelineGroup, o as TimelineItem, n as TimelineTime, e as useTimeline, r as useTimelineDefaults, a as useTimelineItem, s as useTimelineList };