@slotted/react 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/action-sheet-BnedGewu.js

@@ -0,0 +1,360 @@
+import { r as e } from "./i18n-D7xXDd8-.js";
+/* empty css                 */
+import { c as t, d as n, l as r, o as i, r as a, u as o } from "./drawer-fyPyxnYQ.js";
+import { t as s } from "./spinner-ring-DyfaYloA.js";
+import { keyedProps as c, withSelectorKey as l } from "@slotted/core/selector-key";
+import { createRovingTabindex as u } from "@slotted/core/focus";
+import { createControllable as d } from "@slotted/core/state";
+import { createContext as f, useCallback as p, useContext as m, useEffect as h, useId as g, useImperativeHandle as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { actionSheetMessages as w } from "@slotted/core/i18n";
+import { createTypeahead as T, isPrintable as E } from "@slotted/core/typeahead";
+//#region src/action-sheet/action-sheet-defaults.tsx
+var D = f({
+	back: "close",
+	closeOnSelect: !0,
+	escape: "close",
+	modal: !0,
+	mount: "active",
+	outsidePress: "close"
+});
+function O() {
+	return m(D);
+}
+function k({ children: e, ...t }) {
+	let n = O();
+	return /* @__PURE__ */ S(D.Provider, {
+		value: {
+			back: t.back ?? n.back,
+			closeOnSelect: t.closeOnSelect ?? n.closeOnSelect,
+			escape: t.escape ?? n.escape,
+			modal: t.modal ?? n.modal,
+			mount: t.mount ?? n.mount,
+			outsidePress: t.outsidePress ?? n.outsidePress
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/action-sheet/action-sheet-entry.ts
+var A = "[data-part='item']", j = (e) => e === null ? [] : [...e.querySelectorAll(A)], M = (e) => e.dataset.disabled === void 0 && e.dataset.loading === void 0;
+function N(e) {
+	let t = j(e.querySelector("[data-part='list']")).filter(M), n = t[0];
+	if (n !== void 0 && n.dataset.tone !== "danger") return n;
+	let r = e.querySelector("[data-part='cancel']");
+	return r === null ? t.find((e) => e.dataset.tone !== "danger") ?? e : r;
+}
+//#endregion
+//#region src/action-sheet/action-sheet.tsx
+var P = f(void 0);
+function F() {
+	let e = m(P);
+	if (e === void 0) throw Error("Every action sheet part must be rendered inside ActionSheet.");
+	return e;
+}
+var I = 2;
+function L({ back: t, children: n, closeOnSelect: r, container: i, defaultOpen: a, escape: s, finalFocus: c, initialFocus: l, messages: u, modal: f, mount: m, onOpenChange: h, open: g, outsidePress: x, ref: C }) {
+	let T = O(), E = e(w, u), [D, k] = b(a ?? !1), A = g ?? D, j = f ?? T.modal, M = y(null), F = y({
+		list: null,
+		panel: null
+	}), L = p((e, t, n, r) => {
+		if (e === A) return !0;
+		let i = !1, a = d({
+			controlled: g,
+			initial: A,
+			onRequest: (e) => {
+				h?.(e.value, {
+					get cancelled() {
+						return e.cancelled;
+					},
+					cancel: () => e.cancel(),
+					previous: e.previous,
+					reason: t,
+					result: n,
+					source: e.source,
+					value: e.value
+				}), i = e.cancelled;
+			}
+		}).request(e, t, r);
+		return !i && (a && k(e), !0);
+	}, [
+		A,
+		h,
+		g
+	]), R = p((e, t) => {
+		L(e, t.reason, void 0, t.source) || t.cancel();
+	}, [L]), z = v(() => l !== !1 && { get current() {
+		let e = M.current?.panel ?? null;
+		return l?.current ?? (e === null ? null : N(e));
+	} }, [l]);
+	_(C, () => ({
+		open: () => void L(!0, "programmatic", void 0, void 0),
+		close: () => void L(!1, "programmatic", void 0, void 0),
+		focus: () => {
+			(F.current.list?.querySelector("[data-part='item'][tabindex='0']") ?? F.current.panel)?.focus();
+		}
+	}), [L]);
+	let B = v(() => ({
+		close: (e, t, n) => void L(!1, e, t, n),
+		closeOnSelect: r ?? T.closeOnSelect,
+		nodes: F.current,
+		t: E
+	}), [
+		r,
+		T,
+		L,
+		E
+	]);
+	return /* @__PURE__ */ S(o, {
+		back: t ?? T.back,
+		container: i,
+		drag: "panel",
+		escape: s ?? T.escape,
+		initialFocus: z,
+		modal: j,
+		mode: "overlay",
+		mount: m ?? T.mount,
+		onOpenChange: R,
+		open: A,
+		outsidePress: x ?? T.outsidePress,
+		ref: M,
+		scrimFrom: j ? 0 : I,
+		side: "bottom",
+		size: "content",
+		...c === void 0 ? {} : { finalFocus: c },
+		children: /* @__PURE__ */ S(P.Provider, {
+			value: B,
+			children: n
+		})
+	});
+}
+//#endregion
+//#region src/action-sheet/action-sheet-parts.tsx
+function R(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+function z(e, t) {
+	return (n) => {
+		e?.(n), n.defaultPrevented || t(n);
+	};
+}
+function B(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+var V = (e) => e.dataset.textValue ?? e.querySelector("[data-part='label']")?.textContent?.trim() ?? e.textContent?.trim() ?? "";
+function H({ render: e, ...t }) {
+	return /* @__PURE__ */ S(r, {
+		...t,
+		...e === void 0 ? {} : { render: (t) => e(t) }
+	});
+}
+var U = { "--slotted-drawer-sheet-inline-size": "var(--slotted-action-sheet-inline-size, 32rem)" };
+function W({ children: e, ref: t, render: n, style: r, ...a }) {
+	let o = F();
+	return /* @__PURE__ */ S(i, {
+		...a,
+		ref: (e) => {
+			o.nodes.panel = e, R(e, t);
+		},
+		style: {
+			...U,
+			...r
+		},
+		tabIndex: -1,
+		...n === void 0 ? {} : { render: (e) => n(e) },
+		children: /* @__PURE__ */ S("div", {
+			"data-part": "root",
+			"data-part-root": "",
+			"data-ui": "action-sheet",
+			"data-ui-action-sheet": "",
+			children: e
+		})
+	});
+}
+function G(e) {
+	return /* @__PURE__ */ S("header", {
+		"data-part": "header",
+		"data-part-header": "",
+		...e
+	});
+}
+function K({ ref: e, render: n, ...r }) {
+	return /* @__PURE__ */ S(t, {
+		...r,
+		render: (t) => {
+			let r = {
+				...t,
+				ref: (t) => R(t, e)
+			};
+			return n === void 0 ? /* @__PURE__ */ S("h2", { ...r }) : n(r);
+		}
+	});
+}
+function q({ ref: e, render: t, ...n }) {
+	return /* @__PURE__ */ S(a, {
+		...n,
+		render: (n) => {
+			let r = c({
+				...n,
+				"data-part": "message",
+				ref: (t) => R(t, e)
+			});
+			return t === void 0 ? /* @__PURE__ */ S("p", { ...r }) : t(r);
+		}
+	});
+}
+function J({ onFocus: e, onKeyDown: t, ref: r, ...i }) {
+	let a = F(), { titleId: o } = n(), [s, c] = b(null), d = y(null), f = y(null);
+	h(() => {
+		if (s === null) return;
+		let e = u(s, {
+			includeAriaDisabled: !0,
+			itemSelector: A,
+			orientation: () => "vertical"
+		});
+		d.current = e;
+		let t = T();
+		return f.current = t, () => {
+			e.destroy(), t.destroy(), d.current = null, f.current = null;
+		};
+	}, [s]), h(() => {
+		d.current?.refresh();
+	});
+	let p = o !== "" && i["aria-label"] === void 0;
+	return /* @__PURE__ */ S("div", {
+		"aria-orientation": "vertical",
+		...p ? { "aria-labelledby": o } : {},
+		...l(i, "part", "list"),
+		onFocus: z(e, (e) => {
+			let t = j(s).indexOf(e.target);
+			t !== -1 && d.current?.setActive(t);
+		}),
+		onKeyDown: z(t, (e) => {
+			let t = f.current;
+			if (t === null || e.ctrlKey || e.metaKey || e.altKey || !E(e.key, t.query.length > 0)) return;
+			e.preventDefault();
+			let n = j(s), r = n.indexOf(e.target);
+			n[t.match(e.key, n.map(V), r)]?.focus();
+		}),
+		ref: (e) => {
+			c(e), a.nodes.list = e, R(e, r);
+		},
+		role: "menu"
+	});
+}
+function Y(e) {
+	return /* @__PURE__ */ S("div", {
+		"data-part": "group-label",
+		"data-part-group-label": "",
+		...e
+	});
+}
+function X({ children: e, label: t, ...n }) {
+	let r = `${g()}label`;
+	return /* @__PURE__ */ C("div", {
+		...t === void 0 ? {} : { "aria-labelledby": r },
+		...l(n, "part", "group"),
+		role: "group",
+		children: [t === void 0 ? null : /* @__PURE__ */ S(Y, {
+			id: r,
+			children: t
+		}), e]
+	});
+}
+function Z(e) {
+	return /* @__PURE__ */ S("hr", {
+		"data-part": "separator",
+		"data-part-separator": "",
+		role: "separator",
+		...e
+	});
+}
+function Q({ children: e, closeOnSelect: t, description: n, disabled: r, icon: i, loading: a, onClick: o, onPointerLeave: l, onPointerMove: u, onSelect: d, ref: f, render: p, textValue: m, tone: h, value: _, ...v }) {
+	let y = F(), b = `${g()}description`, w = r === !0 || a === !0, T = (e, n) => {
+		if (w) return;
+		let r = !1;
+		d?.({
+			reason: e,
+			source: n,
+			value: _,
+			get defaultPrevented() {
+				return r;
+			},
+			preventDefault: () => {
+				r = !0;
+			}
+		}), !r && (t ?? y.closeOnSelect) && y.close("select", _, n);
+	}, E = c({
+		...v,
+		type: "button",
+		children: /* @__PURE__ */ C(x, { children: [
+			i === void 0 && a !== !0 ? null : /* @__PURE__ */ S("span", {
+				"aria-hidden": "true",
+				"data-part": "icon",
+				"data-part-icon": "",
+				children: a === !0 ? /* @__PURE__ */ S("span", {
+					"data-ui": "spinner",
+					"data-ui-spinner": "",
+					children: s
+				}) : i
+			}),
+			/* @__PURE__ */ S("span", {
+				"data-part": "label",
+				"data-part-label": "",
+				children: e
+			}),
+			n === void 0 ? null : /* @__PURE__ */ S("span", {
+				"data-part": "description",
+				"data-part-description": "",
+				id: b,
+				children: n
+			})
+		] }),
+		...n === void 0 ? {} : { "aria-describedby": b },
+		...w ? { "aria-disabled": !0 } : {},
+		...a === !0 ? {
+			"aria-busy": !0,
+			"data-loading": ""
+		} : {},
+		...r === !0 ? { "data-disabled": "" } : {},
+		...m === void 0 ? {} : { "data-text-value": m },
+		...h === void 0 ? {} : { "data-tone": h },
+		..._ === void 0 ? {} : { "data-value": _ },
+		"data-part": "item",
+		onClick: z(o, (e) => T(B(e), e.nativeEvent)),
+		onPointerMove: z(u, (e) => {
+			if (e.pointerType === "touch") return;
+			let t = e.currentTarget;
+			t.ownerDocument.activeElement !== t && t.focus({ preventScroll: !0 });
+		}),
+		onPointerLeave: z(l, (e) => {
+			if (e.pointerType === "touch") return;
+			let t = e.currentTarget;
+			t.ownerDocument.activeElement === t && y.nodes.panel?.focus({ preventScroll: !0 });
+		}),
+		ref: (e) => R(e, f),
+		role: "menuitem",
+		tabIndex: -1
+	});
+	return p === void 0 ? /* @__PURE__ */ S("button", { ...E }) : p(E);
+}
+function $({ children: e, onClick: t, ref: n, render: r, ...i }) {
+	let a = F(), o = c({
+		...i,
+		children: e ?? a.t("cancel"),
+		"data-part": "cancel",
+		onClick: z(t, (e) => a.close("dismiss", void 0, e.nativeEvent)),
+		ref: (e) => R(e, n),
+		type: "button"
+	});
+	return /* @__PURE__ */ S("div", {
+		"data-part": "footer",
+		"data-part-footer": "",
+		children: r === void 0 ? /* @__PURE__ */ S("button", {
+			...o,
+			disabled: !1
+		}) : r(o)
+	});
+}
+//#endregion
+export { G as a, q as c, H as d, L as f, O as h, Y as i, Z as l, k as m, W as n, Q as o, F as p, X as r, J as s, $ as t, K as u };

package/dist/action-sheet.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, f as r, h as i, i as a, l as o, m as s, n as c, o as l, p as u, r as d, s as f, t as p, u as m } from "./action-sheet-D8Glxl7l.js";
+import { a as e, c as t, d as n, f as r, h as i, i as a, l as o, m as s, n as c, o as l, p as u, r as d, s as f, t as p, u as m } from "./action-sheet-BnedGewu.js";
 export { r as ActionSheet, p as ActionSheetCancel, c as ActionSheetContent, s as ActionSheetDefaultsProvider, d as ActionSheetGroup, a as ActionSheetGroupLabel, e as ActionSheetHeader, l as ActionSheetItem, f as ActionSheetList, t as ActionSheetMessage, o as ActionSheetSeparator, m as ActionSheetTitle, n as ActionSheetTrigger, u as useActionSheet, i as useActionSheetDefaults };

package/dist/alert-BTAXJ69M.js

@@ -0,0 +1,163 @@
+import { r as e } from "./i18n-D7xXDd8-.js";
+import { n as t, t as n } from "./icon-DjqSEQ-o.js";
+import { keyedProps as r } from "@slotted/core/selector-key";
+import { createControllable as i } from "@slotted/core/state";
+import { createContext as a, useCallback as o, useContext as s, useEffect as c, useId as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { alertMessages as h } from "@slotted/core/i18n";
+//#region src/alert/alert-defaults.tsx
+var g = a({
+	live: "off",
+	reach: "section",
+	tone: "accent",
+	variant: "soft"
+});
+function _() {
+	return s(g);
+}
+function v({ children: e, ...t }) {
+	let n = _();
+	return /* @__PURE__ */ p(g.Provider, {
+		value: {
+			live: t.live ?? n.live,
+			reach: t.reach ?? n.reach,
+			tone: t.tone ?? n.tone,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/alert/alert-parts.tsx
+var y = a(void 0), b = y.Provider;
+function x(e) {
+	let t = s(y);
+	if (t === void 0) throw Error(`Alert${e} has to be rendered inside an Alert.`);
+	return t;
+}
+var S = {
+	off: void 0,
+	polite: "status",
+	assertive: "alert"
+};
+function C({ render: e, ...t }) {
+	let { live: n } = x("Content"), i = S[n], a = r({
+		...t,
+		...i === void 0 ? {} : { role: i },
+		"data-part": "content"
+	});
+	return e === void 0 ? /* @__PURE__ */ p("div", { ...a }) : e(a);
+}
+function w({ render: e, ...t }) {
+	let { registerTitle: n, titleId: i } = x("Title");
+	c(() => (n(!0), () => n(!1)), [n]);
+	let a = r({
+		id: i,
+		...t,
+		"data-part": "title"
+	});
+	return e === void 0 ? /* @__PURE__ */ p("div", { ...a }) : e(a);
+}
+function T({ render: e, ...t }) {
+	let n = r({
+		...t,
+		"data-part": "description"
+	});
+	return e === void 0 ? /* @__PURE__ */ p("p", { ...n }) : e(n);
+}
+function E({ render: e, ...t }) {
+	let n = r({
+		...t,
+		"data-part": "actions"
+	});
+	return e === void 0 ? /* @__PURE__ */ p("div", { ...n }) : e(n);
+}
+//#endregion
+//#region src/alert/alert.tsx
+var D = {
+	accent: "circle-info",
+	secondary: null,
+	info: "circle-info",
+	success: "circle-check",
+	warning: "circle-alert",
+	danger: "circle-x"
+};
+function O({ children: a, defaultOpen: s = !0, dismissible: g = !1, hideIcon: v = !1, icon: y, live: x, messages: S, onBlur: C, onFocus: w, onOpenChange: T, open: E, reach: O, ref: k, render: A, restoreFocus: j = !0, tone: M, variant: N, ...P }) {
+	let F = _(), I = e(h, S), [L, R] = f(s), [z, B] = f(!1), V = `${l()}title`, H = x ?? F.live, U = E ?? L, W = d(null), G = d(!1), K = d(U), q = d(j);
+	c(() => {
+		q.current = j;
+	}, [j]);
+	let J = o(() => {
+		if (!q.current || !G.current) return;
+		G.current = !1;
+		let e = W.current;
+		e !== null && e.isConnected && e.focus();
+	}, []);
+	c(() => {
+		K.current && !U && J(), K.current = U;
+	}, [U, J]), c(() => () => J(), [J]);
+	let Y = u(() => ({
+		live: H,
+		registerTitle: B,
+		titleId: V
+	}), [H, V]);
+	function X(e, t) {
+		i({
+			controlled: E,
+			initial: L,
+			onRequest: (e) => T?.(e.value, e)
+		}).request(!1, e, t) && R(!1);
+	}
+	let Z = D[M ?? F.tone], Q = r({
+		...z ? { "aria-labelledby": V } : {},
+		...P,
+		...U ? { "data-open": "" } : {},
+		children: /* @__PURE__ */ m(b, {
+			value: Y,
+			children: [
+				v || y == null && Z === null ? null : /* @__PURE__ */ p("span", {
+					"aria-hidden": "true",
+					"data-part": "icon",
+					"data-part-icon": "",
+					children: y ?? (Z === null ? null : /* @__PURE__ */ p(n, { children: /* @__PURE__ */ p(t, {
+						name: Z,
+						solid: !0
+					}) }))
+				}),
+				a,
+				g ? /* @__PURE__ */ p("button", {
+					"aria-label": I("dismiss"),
+					"data-part": "dismiss",
+					"data-part-dismiss": "",
+					onClick: (e) => {
+						e.defaultPrevented || X("dismiss", e);
+					},
+					type: "button",
+					children: /* @__PURE__ */ p(n, { children: /* @__PURE__ */ p(t, { name: "x" }) })
+				}) : null
+			]
+		}),
+		"data-live": H,
+		"data-part": "root",
+		"data-reach": O ?? F.reach,
+		"data-tone": M ?? F.tone,
+		"data-ui": "alert",
+		"data-variant": N ?? F.variant,
+		hidden: !U,
+		onBlur: (e) => {
+			C?.(e);
+			let t = e.relatedTarget;
+			(t === null || !e.currentTarget.contains(t)) && (G.current = !1);
+		},
+		onFocus: (e) => {
+			w?.(e);
+			let t = e.relatedTarget;
+			t instanceof HTMLElement && !e.currentTarget.contains(t) && (W.current = t), G.current = !0;
+		},
+		ref: k,
+		tabIndex: P.tabIndex ?? -1
+	});
+	return A === void 0 ? /* @__PURE__ */ p("section", { ...Q }) : A(Q);
+}
+//#endregion
+export { w as a, T as i, E as n, v as o, C as r, _ as s, O as t };

package/dist/alert.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./alert-CP62p9Ul.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./alert-BTAXJ69M.js";
 export { o as Alert, n as AlertActions, i as AlertContent, r as AlertDefaultsProvider, t as AlertDescription, e as AlertTitle, a as useAlertDefaults };