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

package/dist/hover-card-CSDbA6zd.js

@@ -0,0 +1,214 @@
+import { a as e, f as t, l as n, n as r, p as i } from "./popover-DE22lSpV.js";
+import { tabbables as a } from "@slotted/core/focus";
+import { createControllable as o } from "@slotted/core/state";
+import { createContext as s, useCallback as c, useContext as l, useEffect as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createPointerIntent as h } from "@slotted/core/pointer-intent";
+//#region src/hover-card/hover-card-defaults.tsx
+var g = {
+	closeDelay: 300,
+	disabled: !1,
+	navigable: !1,
+	openDelay: 600
+}, _ = s(g);
+function v() {
+	return l(_);
+}
+function y({ children: e, ...t }) {
+	let n = v(), r = {
+		closeDelay: t.closeDelay ?? n.closeDelay,
+		disabled: t.disabled ?? n.disabled,
+		navigable: t.navigable ?? n.navigable,
+		openDelay: t.openDelay ?? n.openDelay
+	};
+	return /* @__PURE__ */ p(_.Provider, {
+		value: r,
+		children: e
+	});
+}
+//#endregion
+//#region src/hover-card/hover-card.tsx
+var b = s(void 0);
+function x() {
+	let e = l(b);
+	if (e === void 0) throw Error("HoverCardTrigger and HoverCardContent have to be inside a HoverCard.");
+	return e;
+}
+function S(e, t) {
+	return (n) => {
+		e?.(n), n.defaultPrevented || t(n);
+	};
+}
+function C(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+var w = 4;
+function T({ children: e, closeDelay: n, defaultOpen: r, disabled: i, navigable: a, onOpenChange: s, open: l, openDelay: m, ref: g, sideOffset: _, ...y }) {
+	let x = v(), [S, C] = f(r ?? !1), T = i ?? x.disabled, E = (l ?? S) && !T, D = d(void 0), O = d(null), k = d(!1), A = d({
+		current: E,
+		onOpenChange: s,
+		open: l
+	});
+	A.current = {
+		current: E,
+		onOpenChange: s,
+		open: l
+	};
+	let j = c(() => {
+		D.current !== void 0 && clearTimeout(D.current), D.current = void 0, O.current?.destroy(), O.current = null;
+	}, []);
+	u(() => j, [j]);
+	let M = c((e, t, n) => {
+		j();
+		let r = A.current;
+		if (e === r.current) return;
+		let i = !1, a = o({
+			controlled: r.open,
+			initial: r.current,
+			onRequest: (e) => {
+				i = e.cancelled, r.onOpenChange?.(e.value, e);
+			}
+		}).request(e, t, n);
+		i || (!e && (t === "escape" || t === "keyboard") && (k.current = !0), a && C(e));
+	}, [j]), N = m ?? x.openDelay, P = n ?? x.closeDelay, F = c((e) => {
+		j(), D.current = setTimeout(() => M(!0, "pointer", e), N);
+	}, [
+		j,
+		N,
+		M
+	]), I = {
+		cancelPending: j,
+		closeAfterDelay: c((e) => {
+			j(), D.current = setTimeout(() => M(!1, "pointer", e), P);
+		}, [
+			j,
+			P,
+			M
+		]),
+		closeDelay: P,
+		disabled: T,
+		graceToward: c((e, t, n, r) => {
+			j(), O.current = h({
+				origin: t,
+				target: e,
+				timeout: P,
+				onSettled: () => {
+					O.current = null, !n() && M(!1, "pointer", r);
+				}
+			});
+		}, [
+			j,
+			P,
+			M
+		]),
+		navigable: a ?? x.navigable,
+		open: E,
+		openAfterDelay: F,
+		openDelay: N,
+		suppressFocusOpen: k,
+		toggle: M
+	};
+	return /* @__PURE__ */ p(b.Provider, {
+		value: I,
+		children: /* @__PURE__ */ p(t, {
+			...y,
+			autoFocus: !1,
+			disabled: T,
+			onOpenChange: (e, t) => M(e, t.reason, t.source),
+			open: E,
+			ref: g,
+			sideOffset: _ ?? w,
+			children: e
+		})
+	});
+}
+function E({ children: e, ref: t, render: n, ...r }) {
+	let o = i(), s = x(), [l, m] = f(null), h = d(!1);
+	u(() => {
+		l !== null && o.triggerNode === null && o.setTriggerNode(l);
+	}, [
+		l,
+		o.setTriggerNode,
+		o.triggerNode
+	]);
+	let g = l !== null && o.triggerNode === l, _ = () => o.contentNode?.parentElement ?? null, v = () => {
+		l !== null && o.triggerNode !== l && o.setTriggerNode(l);
+	}, y = (e) => {
+		if (!(s.disabled || e.pointerType === "touch")) {
+			if (v(), s.open && g) {
+				s.cancelPending();
+				return;
+			}
+			s.openAfterDelay(e.nativeEvent);
+		}
+	}, b = (e) => {
+		if (e.pointerType !== "touch") {
+			if (!s.open || !g) {
+				s.cancelPending();
+				return;
+			}
+			s.graceToward(() => _()?.getBoundingClientRect() ?? null, () => l?.getBoundingClientRect() ?? null, () => (l?.matches(":hover") ?? !1) || (_()?.matches(":hover") ?? !1), e.nativeEvent);
+		}
+	}, w = (e) => {
+		s.disabled || s.suppressFocusOpen.current || e.target.matches(":focus-visible") && (v(), s.toggle(!0, "keyboard", e.nativeEvent));
+	}, T = (e) => {
+		if (s.suppressFocusOpen.current = !1, !s.open || !g) return;
+		let t = e.relatedTarget;
+		t instanceof Node && _()?.contains(t) || s.toggle(!1, "blur", e.nativeEvent);
+	}, E = (e) => {
+		if (!s.navigable || !s.open || !g || e.key !== "Tab" || e.shiftKey) return;
+		let t = o.contentNode;
+		if (t === null) return;
+		let [n] = a(t);
+		n !== void 0 && (e.preventDefault(), n.focus());
+	}, D = (e) => {
+		h.current = e.pointerType === "touch";
+	}, O = (e) => {
+		h.current && (h.current = !1, !(s.disabled || s.open && g) && (e.preventDefault(), v(), s.toggle(!0, "pointer", e.nativeEvent)));
+	}, k = c((e) => {
+		m(e), C(e, t);
+	}, [t]), A = s.open && g, j = {
+		...r,
+		children: e,
+		"data-ui": "hover-card",
+		"data-part": "root",
+		...A ? { "data-open": "" } : {},
+		...s.navigable ? {
+			"aria-controls": A ? o.contentId : void 0,
+			"aria-expanded": A,
+			"aria-haspopup": "dialog"
+		} : {},
+		onBlur: S(r.onBlur, T),
+		onClick: S(r.onClick, O),
+		onFocus: S(r.onFocus, w),
+		onKeyDown: S(r.onKeyDown, E),
+		onPointerDown: S(r.onPointerDown, D),
+		onPointerEnter: S(r.onPointerEnter, y),
+		onPointerLeave: S(r.onPointerLeave, b)
+	};
+	return n === void 0 ? /* @__PURE__ */ p("a", {
+		...j,
+		ref: k
+	}) : n({
+		...j,
+		ref: k
+	});
+}
+function D({ children: t, ...i }) {
+	let a = x();
+	return /* @__PURE__ */ m(n, {
+		onPointerEnter: (e) => {
+			e.pointerType !== "touch" && a.cancelPending();
+		},
+		onPointerLeave: (e) => {
+			e.pointerType !== "touch" && a.closeAfterDelay(e.nativeEvent);
+		},
+		children: [/* @__PURE__ */ p(e, {
+			role: a.navigable ? "dialog" : "presentation",
+			...i,
+			children: t
+		}), /* @__PURE__ */ p(r, {})]
+	});
+}
+//#endregion
+export { g as a, x as i, D as n, y as o, E as r, v as s, T as t };

package/dist/hover-card.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./hover-card-CSDbA6zd.js";
+export { e as HOVER_CARD_FALLBACK, o as HoverCard, n as HoverCardContent, r as HoverCardDefaultsProvider, i as HoverCardTrigger, t as useHoverCard, a as useHoverCardDefaults };

package/dist/i18n-DpW8lqJ1.js

@@ -0,0 +1,55 @@
+import { createContext as e, useContext as t, useMemo as n, useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { BASE_LOCALE as a, createTranslator as o } from "@slotted/core/i18n";
+//#region src/i18n/slotted-provider.tsx
+var s = {
+	locale: a,
+	catalogs: {},
+	resolve: void 0,
+	translator: o({ locale: a })
+}, c = e(s);
+function l({ locale: e, catalogs: a, resolve: s, children: l }) {
+	let d = t(c), f = e ?? d.locale, p = u(a), m = n(() => p === void 0 ? d.catalogs : {
+		...d.catalogs,
+		...p
+	}, [d.catalogs, p]), h = r(s);
+	h.current = s;
+	let g = s !== void 0, _ = n(() => g ? (e, t, n) => h.current?.(e, t, n) : d.resolve, [g, d.resolve]), v = n(() => ({
+		locale: f,
+		catalogs: m,
+		resolve: _,
+		translator: o({
+			locale: f,
+			catalogs: m,
+			resolve: _
+		})
+	}), [
+		f,
+		m,
+		_
+	]);
+	return /* @__PURE__ */ i(c.Provider, {
+		value: v,
+		children: l
+	});
+}
+function u(e) {
+	let t = r(e), n = t.current;
+	return n === e || n !== void 0 && e !== void 0 && Object.keys(n).length === Object.keys(e).length && Object.entries(e).every(([e, t]) => n[e] === t) || (t.current = e), t.current;
+}
+function d() {
+	return t(c).locale;
+}
+function f() {
+	return t(c).translator;
+}
+function p(e, t) {
+	let r = f();
+	return n(() => r.family(e, t), [
+		r,
+		e,
+		t
+	]);
+}
+//#endregion
+export { f as i, d as n, p as r, l as t };

package/dist/i18n.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "./i18n-DpW8lqJ1.js";
+export { r as SlottedProvider, t as useLocale, n as useMessages, e as useTranslator };

package/dist/icon-T9Yt4tnm.js

@@ -0,0 +1,73 @@
+import { useId as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { GLYPHS as r, GLYPH_VIEW_BOX as i } from "@slotted/core/glyph";
+//#region src/icon/glyph.tsx
+function a({ name: a, solid: o = !1, ...s }) {
+	let c = r[a], [l, u] = c.offset, d = `sl-glyph-${e().replace(/[^a-zA-Z0-9_-]/g, "")}`, f = {
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: c.strokeWidth
+	}, p = c.paint === "fill" ? { fill: "currentColor" } : {
+		fill: "none",
+		stroke: "currentColor",
+		...f
+	}, [m, ...h] = c.paths;
+	return /* @__PURE__ */ n("svg", {
+		"aria-hidden": "true",
+		focusable: "false",
+		viewBox: i,
+		...o ? {} : p,
+		...s,
+		"data-glyph": a,
+		"data-part": "glyph",
+		"data-solid": o ? "" : void 0,
+		children: [o ? /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("mask", {
+			height: "28",
+			id: d,
+			maskUnits: "userSpaceOnUse",
+			width: "28",
+			x: "-2",
+			y: "-2",
+			children: [/* @__PURE__ */ t("rect", {
+				fill: "#fff",
+				height: "28",
+				width: "28",
+				x: "-2",
+				y: "-2"
+			}), /* @__PURE__ */ t("g", {
+				fill: "none",
+				stroke: "#000",
+				...f,
+				children: h.map((e, n) => /* @__PURE__ */ t("path", { d: e }, n))
+			})]
+		}) }) : null, /* @__PURE__ */ t("g", {
+			transform: l === 0 && u === 0 ? void 0 : `translate(${l} ${u})`,
+			children: o ? /* @__PURE__ */ t("path", {
+				d: m,
+				fill: "currentColor",
+				mask: `url(#${d})`,
+				stroke: "currentColor",
+				...f
+			}) : c.paths.map((e, n) => /* @__PURE__ */ t("path", { d: e }, n))
+		})]
+	});
+}
+//#endregion
+//#region src/icon/icon.tsx
+function o({ directional: e, label: n, size: r, tone: i, ...a }) {
+	let o = n !== void 0 || a["aria-label"] !== void 0 || a["aria-labelledby"] !== void 0;
+	return /* @__PURE__ */ t("span", {
+		...a,
+		...r === void 0 ? {} : { "data-size": r },
+		...i === void 0 || i === "inherit" ? {} : { "data-tone": i },
+		...e === !0 ? { "data-directional": "" } : {},
+		...o ? {
+			role: a.role ?? "img",
+			...n === void 0 ? {} : { "aria-label": n }
+		} : { "aria-hidden": !0 },
+		"data-part": "root",
+		"data-ui": "icon"
+	});
+}
+//#endregion
+export { a as n, o as t };

package/dist/icon-button-TnvMhK4o.js

@@ -0,0 +1,211 @@
+import { n as e } from "./button-defaults-DNq_DDJh.js";
+import { r as t } from "./i18n-DpW8lqJ1.js";
+/* empty css                 */
+/* empty css                */
+import { createControllable as n } from "@slotted/core/state";
+import { useEffect as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { buttonMessages as c } from "@slotted/core/i18n";
+//#region src/button/button-content.tsx
+function l({ children: e, end: t, indicator: n, start: r }) {
+	let i = n != null, c = i && r !== void 0, l = i && !c && t !== void 0;
+	return /* @__PURE__ */ s(a, { children: [
+		r === void 0 ? null : /* @__PURE__ */ s("span", {
+			"data-part": "start",
+			children: [r, c ? n : null]
+		}),
+		/* @__PURE__ */ o("span", {
+			"data-part": "label",
+			children: e
+		}),
+		t === void 0 ? null : /* @__PURE__ */ s("span", {
+			"data-part": "end",
+			children: [t, l ? n : null]
+		}),
+		i && !c && !l ? n : null
+	] });
+}
+//#endregion
+//#region src/button/button.constants.ts
+var u = {
+	tone: "accent",
+	variant: "solid",
+	size: "md"
+}, d = u, f = {
+	tone: "secondary",
+	variant: "ghost",
+	size: "md",
+	shape: "square"
+}, p = {
+	tone: "secondary",
+	variant: "outline",
+	size: "md"
+};
+//#endregion
+//#region src/button/button-root.ts
+function m(e) {
+	return {
+		"data-ui": "button",
+		"data-part": "root",
+		"data-tone": e.tone,
+		"data-variant": e.variant,
+		"data-size": e.size,
+		"data-shape": e.shape,
+		"data-full-width": e.fullWidth ? "" : void 0,
+		"data-disabled": e.disabled ? "" : void 0,
+		"data-loading": e.loading ? "" : void 0,
+		"data-pressed": e.pressed ? "" : void 0
+	};
+}
+function h(t, n) {
+	let r = e();
+	return {
+		tone: t.tone ?? r.tone ?? n.tone,
+		variant: t.variant ?? r.variant ?? n.variant,
+		size: t.size ?? r.size ?? n.size
+	};
+}
+function g(e) {
+	e.preventDefault(), e.stopPropagation(), e.nativeEvent.stopImmediatePropagation?.();
+}
+function _({ disabled: e = !1, focusableWhenDisabled: t = !1, loading: n = !1 }) {
+	return {
+		refuses: e || n,
+		nativelyDisabled: e && !t,
+		ariaDisabled: e && t || n || void 0
+	};
+}
+function v(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function y({ loading: e = !1, loadingDelay: t = 0 }) {
+	let [n, a] = i(!1);
+	return r(() => {
+		if (!e || t <= 0) {
+			a(!1);
+			return;
+		}
+		let n = setTimeout(() => a(!0), t);
+		return () => clearTimeout(n);
+	}, [e, t]), e && (t <= 0 || n);
+}
+function b({ defaultPressed: e = !1, onPressedChange: t, pressed: r }) {
+	let [a, o] = i(e), s = n({
+		controlled: r,
+		initial: a,
+		onRequest: (e) => t?.(e.value, e)
+	});
+	return {
+		pressed: s.value,
+		requestToggle(e) {
+			let t = !s.value;
+			s.request(t, v(e), e) && o(t);
+		}
+	};
+}
+function x({ defaultPressed: e, pressed: t }) {
+	return t !== void 0 || e !== void 0;
+}
+//#endregion
+//#region src/button/button-indicator.tsx
+function S({ label: e }) {
+	return /* @__PURE__ */ o("span", {
+		"aria-label": e,
+		"data-part": "indicator",
+		"data-ui": "spinner",
+		role: "progressbar"
+	});
+}
+//#endregion
+//#region src/button/button.tsx
+function C({ children: e, disabled: n = !1, end: r, focusableWhenDisabled: i = !1, fullWidth: a = !1, loading: s = !1, loadingDelay: d = 0, messages: f, onClick: p, onClickCapture: v, render: b, size: x, start: C, tone: w, type: T = "button", variant: E, ...D }) {
+	let O = h({
+		size: x,
+		tone: w,
+		variant: E
+	}, u), k = _({
+		disabled: n,
+		focusableWhenDisabled: i,
+		loading: s
+	}), A = y({
+		loading: s,
+		loadingDelay: d
+	}), j = t(c, f), M = {
+		...D,
+		...m({
+			disabled: n,
+			fullWidth: a,
+			loading: s,
+			...O
+		}),
+		"aria-disabled": k.ariaDisabled,
+		children: /* @__PURE__ */ o(l, {
+			end: r,
+			indicator: A ? /* @__PURE__ */ o(S, { label: j("loading") }) : null,
+			start: C,
+			children: e
+		}),
+		disabled: k.nativelyDisabled,
+		onClick: (e) => {
+			if (k.refuses) return g(e);
+			p?.(e);
+		},
+		onClickCapture: (e) => {
+			if (k.refuses) return g(e);
+			v?.(e);
+		},
+		type: T
+	};
+	return b === void 0 ? /* @__PURE__ */ o("button", { ...M }) : b(M);
+}
+//#endregion
+//#region src/button/icon-button.tsx
+function w({ children: e, defaultPressed: n, disabled: r = !1, focusableWhenDisabled: i = !1, loading: a = !1, loadingDelay: l = 0, messages: u, onClick: d, onClickCapture: p, onPressedChange: v, pressed: C, render: w, shape: T = f.shape, size: E, tone: D, type: O = "button", variant: k, ...A }) {
+	let j = h({
+		size: E,
+		tone: D,
+		variant: k
+	}, f), M = _({
+		disabled: r,
+		focusableWhenDisabled: i,
+		loading: a
+	}), N = y({
+		loading: a,
+		loadingDelay: l
+	}), P = t(c, u), F = x({
+		defaultPressed: n,
+		pressed: C
+	}), I = b({
+		defaultPressed: n,
+		onPressedChange: v,
+		pressed: C
+	}), L = {
+		...A,
+		...m({
+			disabled: r,
+			loading: a,
+			pressed: F ? I.pressed : void 0,
+			shape: T,
+			...j
+		}),
+		"aria-disabled": M.ariaDisabled,
+		"aria-pressed": F ? I.pressed : void 0,
+		children: /* @__PURE__ */ s("span", {
+			"data-part": "icon",
+			children: [e, N ? /* @__PURE__ */ o(S, { label: P("loading") }) : null]
+		}),
+		disabled: M.nativelyDisabled,
+		onClick: (e) => {
+			if (M.refuses) return g(e);
+			d?.(e), F && !e.defaultPrevented && I.requestToggle(e);
+		},
+		onClickCapture: (e) => {
+			if (M.refuses) return g(e);
+			p?.(e);
+		},
+		type: O
+	};
+	return w === void 0 ? /* @__PURE__ */ o("button", { ...L }) : w(L);
+}
+//#endregion
+export { _ as a, y as c, p as d, l as f, g as i, b as l, C as n, m as o, S as r, h as s, w as t, d as u };

package/dist/icon.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+export { e as Glyph, t as Icon };