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

package/dist/app-shell.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 "./app-shell-CXwma4XA.js";
+export { y as APP_SHELL_OVERLAY_AT, m as AppShell, i as AppShellActions, h as AppShellAside, v as AppShellAsideBody, o as AppShellAsideFooter, f as AppShellAsideHeader, b as AppShellAsideResizer, s as AppShellAsideToggle, c as AppShellBanner, g as AppShellBrand, p as AppShellCentre, S as AppShellDefaultsProvider, u as AppShellFooter, l as AppShellMain, r as AppShellNav, x as AppShellNavBody, w as AppShellNavFooter, a as AppShellNavHeader, C as AppShellNavRail, t as AppShellNavToggle, e as AppShellProgress, _ as useAppShell, n as useAppShellDefaults, d as useAppShellIfPresent };

package/dist/aspect-ratio-C76l-aoY.js

@@ -0,0 +1,40 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/aspect-ratio/aspect-ratio.tsx
+var t = /* @__PURE__ */ new Set([
+	"square",
+	"landscape",
+	"portrait",
+	"video",
+	"wide"
+]);
+function n(e) {
+	if (typeof e == "string" && t.has(e)) return {
+		attribute: e,
+		token: void 0
+	};
+	if (typeof e == "number") return {
+		attribute: "custom",
+		token: String(e)
+	};
+	let [n, r] = e;
+	return {
+		attribute: "custom",
+		token: `${n} / ${r}`
+	};
+}
+function r({ children: t, ratio: r, render: i, style: a, ...o }) {
+	let { attribute: s, token: c } = n(r), l = {
+		...o,
+		children: t,
+		"data-part": "root",
+		"data-ratio": s,
+		"data-ui": "aspect-ratio",
+		style: c === void 0 ? a : {
+			...a,
+			"--slotted-aspect-ratio": c
+		}
+	};
+	return i === void 0 ? /* @__PURE__ */ e("div", { ...l }) : i(l);
+}
+//#endregion
+export { n, r as t };

package/dist/aspect-ratio.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "./aspect-ratio-C76l-aoY.js";
+export { t as AspectRatio, e as resolveAspectRatio };

package/dist/attachment-DdBbQcEB.js

@@ -0,0 +1,302 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { n, r } from "./i18n-DpW8lqJ1.js";
+import { n as i } from "./progress-indicator-DwvUSFFs.js";
+import { createRemovalFocus as a } from "@slotted/core/focus";
+import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useMemo as d, useRef as f, useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { attachmentMessages as _ } from "@slotted/core/i18n";
+import { fileKind as v, formatBytes as y, splitName as b } from "@slotted/core/upload";
+//#region src/attachment/attachment-defaults.tsx
+var x = o({
+	layout: "list",
+	orientation: "horizontal",
+	size: "md"
+});
+function S() {
+	return c(x);
+}
+function C({ children: e, ...t }) {
+	let n = S();
+	return /* @__PURE__ */ h(x.Provider, {
+		value: {
+			layout: t.layout ?? n.layout,
+			orientation: t.orientation ?? n.orientation,
+			size: t.size ?? n.size
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/attachment/attachment-kinds.ts
+var w = {
+	archive: "file-archive",
+	audio: "file-audio",
+	document: "file-type",
+	image: "file-image",
+	other: "file",
+	pdf: "file-text",
+	presentation: "presentation",
+	spreadsheet: "file-spreadsheet",
+	video: "file-video"
+}, T = "[data-part=\"trigger\"], [data-part=\"action\"], [data-part=\"remove\"]";
+function E(e, t) {
+	return e === "" ? t : e.slice(1).toUpperCase();
+}
+//#endregion
+//#region src/attachment/attachment.tsx
+var D = o(null), O = o(null);
+function k() {
+	let e = c(O);
+	if (e === null) throw Error("An Attachment part is rendered outside an Attachment.");
+	return e;
+}
+function A(e, t) {
+	typeof e == "function" ? e(t) : e != null && (e.current = t);
+}
+function j({ layout: e, orientation: t, ref: n, render: r, size: i, ...o }) {
+	let c = S(), l = e ?? c.layout, u = t ?? c.orientation, p = i ?? c.size, m = f(null), g = s((e) => {
+		if (m.current?.(), m.current = null, e !== null) {
+			let t = a(e, { itemSelector: T });
+			m.current = () => t.destroy();
+		}
+		A(n, e);
+	}, [n]), _ = {
+		tabIndex: -1,
+		...o,
+		"data-layout": l,
+		"data-orientation": u,
+		"data-part": "group",
+		"data-size": p,
+		"data-ui": "attachment",
+		ref: g
+	}, v = d(() => ({
+		layout: l,
+		orientation: t,
+		size: i
+	}), [
+		t,
+		l,
+		i
+	]);
+	return /* @__PURE__ */ h(D.Provider, {
+		value: v,
+		children: r === void 0 ? /* @__PURE__ */ h("ul", { ..._ }) : r(_)
+	});
+}
+function M({ disabled: e = !1, file: t, invalid: i = !1, loading: a = !1, messages: o, onKeyDown: l, onRemove: d, orientation: f, render: m, size: g, ...y }) {
+	let x = S(), C = c(D), w = u(), T = n(), E = r(_, o), k = g ?? C?.size ?? x.size, A = f ?? C?.orientation ?? x.orientation, j = v({
+		name: t.name,
+		type: t.type ?? ""
+	}), { stem: M, extension: N } = b(t.name), P = d !== void 0, [F, I] = p({
+		detail: null,
+		message: null
+	}), L = s((e, t) => {
+		I((n) => n[e] === t ? n : {
+			...n,
+			[e]: t
+		});
+	}, []), R = s((n, r) => {
+		e || d?.({
+			reason: n,
+			file: t,
+			source: r
+		});
+	}, [
+		e,
+		t,
+		d
+	]), z = {
+		describe: L,
+		described: F,
+		disabled: e,
+		extension: N,
+		file: t,
+		ids: {
+			detail: `${w}-detail`,
+			message: `${w}-message`
+		},
+		invalid: i,
+		kind: j,
+		loading: a,
+		locale: T,
+		orientation: A,
+		removable: P,
+		request: R,
+		stem: M,
+		t: E
+	}, B = {
+		...y,
+		...a ? { "aria-busy": !0 } : {},
+		...e ? { "data-disabled": "" } : {},
+		...i ? { "data-invalid": "" } : {},
+		...a ? { "data-loading": "" } : {},
+		"data-kind": j,
+		"data-orientation": A,
+		"data-part": "root",
+		"data-size": k,
+		"data-ui": "attachment",
+		onKeyDown: (t) => {
+			if (l?.(t), !P || e || t.defaultPrevented || t.repeat || t.key !== "Backspace" && t.key !== "Delete") return;
+			let n = t.target;
+			n.isContentEditable || n.closest("input, textarea, select") !== null || (t.preventDefault(), R("keyboard", t));
+		}
+	}, V = m === void 0 ? h(C === null ? "div" : "li", { ...B }) : m(B);
+	return /* @__PURE__ */ h(O.Provider, {
+		value: z,
+		children: V
+	});
+}
+function N(e, t) {
+	let { describe: n, ids: r } = k(), i = t ?? r[e];
+	return l(() => (n(e, i), () => n(e, null)), [
+		n,
+		i,
+		e
+	]), i;
+}
+//#endregion
+//#region src/attachment/attachment-parts.tsx
+function P({ children: n, render: r, src: i, ...a }) {
+	let o = k(), [s, c] = p(null), l = i !== void 0 && s !== i, u = {
+		"aria-hidden": !0,
+		...a,
+		children: n ?? (l ? /* @__PURE__ */ h("img", {
+			alt: "",
+			onError: () => c(i),
+			src: i
+		}) : /* @__PURE__ */ h(t, { children: /* @__PURE__ */ h(e, { name: w[o.kind] }) })),
+		"data-extension": E(o.extension, o.t("noExtension")),
+		"data-kind": o.kind,
+		"data-part": "preview"
+	};
+	return r === void 0 ? /* @__PURE__ */ h("span", { ...u }) : r(u);
+}
+function F({ render: e, ...t }) {
+	let n = {
+		...t,
+		"data-part": "body"
+	};
+	return e === void 0 ? /* @__PURE__ */ h("div", { ...n }) : e(n);
+}
+function I({ children: e, render: t, ...n }) {
+	let { extension: r, stem: i } = k(), a = {
+		dir: "auto",
+		...n,
+		children: e ?? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("span", {
+			"data-part": "name",
+			children: i
+		}), r === "" ? null : /* @__PURE__ */ h("span", {
+			"data-part": "extension",
+			children: r
+		})] }),
+		"data-part": "filename"
+	};
+	return t === void 0 ? /* @__PURE__ */ h("span", { ...a }) : t(a);
+}
+function L(e) {
+	let t = k(), n = [
+		...e === void 0 ? [] : [e],
+		...t.described.detail === null ? [] : [t.described.detail],
+		...t.described.message === null ? [] : [t.described.message]
+	];
+	return {
+		attachment: t,
+		blocked: t.disabled || t.loading,
+		describedBy: n.length === 0 ? void 0 : n.join(" ")
+	};
+}
+function R({ "aria-describedby": e, children: t, render: n, type: r = "button", ...i }) {
+	let { attachment: a, blocked: o, describedBy: s } = L(e), c = {
+		title: a.file.name,
+		...i,
+		...s === void 0 ? {} : { "aria-describedby": s },
+		children: t ?? /* @__PURE__ */ h(I, {}),
+		"data-part": "trigger",
+		disabled: o || i.disabled === !0,
+		type: r
+	};
+	return n === void 0 ? /* @__PURE__ */ h("button", { ...c }) : n(c);
+}
+function z({ "aria-describedby": e, children: t, onClick: n, render: r, ...i }) {
+	let { attachment: a, blocked: o, describedBy: s } = L(e), c = {
+		title: a.file.name,
+		...i,
+		...s === void 0 ? {} : { "aria-describedby": s },
+		...o ? { "aria-disabled": !0 } : {},
+		children: t ?? /* @__PURE__ */ h(I, {}),
+		"data-part": "trigger",
+		onClick: (e) => {
+			if (o) {
+				e.preventDefault();
+				return;
+			}
+			n?.(e);
+		}
+	};
+	return r === void 0 ? /* @__PURE__ */ h("a", { ...c }) : r(c);
+}
+function B({ children: e, id: t, render: n, ...r }) {
+	let i = k(), a = N("detail", t), o = i.file.size, s = {
+		...r,
+		id: a,
+		children: e ?? (o === void 0 ? null : y(o, i.locale)),
+		"data-part": "detail"
+	};
+	return n === void 0 ? /* @__PURE__ */ h("p", { ...s }) : n(s);
+}
+function V({ id: e, render: t, ...n }) {
+	let r = N("message", e), i = {
+		...n,
+		id: r,
+		"data-part": "message"
+	};
+	return t === void 0 ? /* @__PURE__ */ h("p", { ...i }) : t(i);
+}
+function H({ render: e, value: t, ...n }) {
+	let r = k(), a = {
+		...n,
+		children: /* @__PURE__ */ h(i, {
+			hideLabel: !0,
+			label: r.file.name,
+			size: "sm",
+			tone: r.invalid ? "danger" : "accent",
+			value: t ?? null
+		}),
+		"data-part": "progress"
+	};
+	return e === void 0 ? /* @__PURE__ */ h("div", { ...a }) : e(a);
+}
+function U({ render: e, ...t }) {
+	let n = {
+		...t,
+		"data-part": "actions"
+	};
+	return e === void 0 ? /* @__PURE__ */ h("div", { ...n }) : e(n);
+}
+function W({ render: e, type: t = "button", ...n }) {
+	let r = k(), i = {
+		...n,
+		"data-part": "action",
+		disabled: r.disabled || n.disabled === !0,
+		type: t
+	};
+	return e === void 0 ? /* @__PURE__ */ h("button", { ...i }) : e(i);
+}
+function G({ "aria-label": n, children: r, onClick: i, render: a, type: o = "button", ...s }) {
+	let c = k();
+	if (!c.removable) return null;
+	let l = {
+		...s,
+		"aria-label": n ?? c.t("remove", { name: c.file.name }),
+		children: r ?? /* @__PURE__ */ h(t, { children: /* @__PURE__ */ h(e, { name: "x" }) }),
+		"data-part": "remove",
+		disabled: c.disabled || s.disabled === !0,
+		onClick: (e) => {
+			i?.(e), !e.defaultPrevented && c.request("remove", e);
+		},
+		type: o
+	};
+	return a === void 0 ? /* @__PURE__ */ h("button", { ...l }) : a(l);
+}
+//#endregion
+export { S as _, I as a, P as c, R as d, M as f, C as g, w as h, B as i, H as l, k as m, U as n, z as o, j as p, F as r, V as s, W as t, G as u };

package/dist/attachment.js

@@ -0,0 +1,2 @@
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./attachment-DdBbQcEB.js";
+export { o as ATTACHMENT_KIND_GLYPH, i as Attachment, h as AttachmentAction, u as AttachmentActions, p as AttachmentBody, a as AttachmentDefaultsProvider, s as AttachmentDetail, t as AttachmentFilename, f as AttachmentGroup, d as AttachmentLink, m as AttachmentMessage, n as AttachmentPreview, c as AttachmentProgress, g as AttachmentRemove, r as AttachmentTrigger, l as useAttachment, e as useAttachmentDefaults };

package/dist/avatar-BnlE5jjr.js

@@ -0,0 +1,100 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { createContext as n, useCallback as r, useContext as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { initialsFrom as l, toneFrom as u } from "@slotted/core/identity";
+//#region src/avatar/avatar-defaults.tsx
+var d = n({
+	locale: void 0,
+	shape: "circle",
+	size: "md",
+	tone: "auto",
+	variant: "soft"
+});
+function f() {
+	return i(d);
+}
+function p({ children: e, ...t }) {
+	let n = f();
+	return /* @__PURE__ */ s(d.Provider, {
+		value: {
+			locale: t.locale ?? n.locale,
+			shape: t.shape ?? n.shape,
+			size: t.size ?? n.size,
+			tone: t.tone ?? n.tone,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/avatar/avatar.tsx
+var m = [
+	"accent",
+	"secondary",
+	"success",
+	"warning",
+	"danger"
+], h = {
+	xs: 1,
+	sm: 2,
+	md: 2,
+	lg: 2,
+	xl: 2
+};
+function g({ children: n, decorative: i = !1, disabled: d = !1, idFor: p, initials: g, locale: v, name: y, onStatusChange: b, render: x, renderImage: S, role: C, shape: w, size: T, src: E, status: D, tone: O, variant: k, ...A }) {
+	let j = f(), M = T ?? j.size, N = v ?? j.locale, [P, F] = a(() => ({
+		src: E,
+		status: _(E)
+	}));
+	P.src !== E && F({
+		src: E,
+		status: _(E)
+	});
+	let I = D ?? P.status, L = r((e, t) => {
+		F((n) => n.src === t ? {
+			src: t,
+			status: e
+		} : n), b?.(e);
+	}, [b]), R = r((e) => {
+		e !== null && e.complete && e.naturalWidth > 0 && L("loaded", e.currentSrc || E);
+	}, [L, E]), z = () => L("loaded", E), B = () => L("error", E), V = (O ?? j.tone) === "auto" ? u({
+		seed: p ?? y,
+		tones: m
+	}) ?? "secondary" : O ?? j.tone, H = g ?? l({
+		name: y,
+		max: h[M],
+		locale: N
+	}), U = E === void 0 ? void 0 : {
+		alt: "",
+		"data-part": "image",
+		onError: B,
+		onLoad: z,
+		ref: R,
+		src: E
+	}, W = {
+		...A,
+		children: /* @__PURE__ */ c(o, { children: [U === void 0 ? null : S === void 0 ? /* @__PURE__ */ s("img", { ...U }) : S(U), /* @__PURE__ */ s("span", {
+			"data-part": "fallback",
+			children: n ?? (H === "" ? /* @__PURE__ */ s(t, { children: /* @__PURE__ */ s(e, { name: "person" }) }) : H)
+		})] }),
+		"data-part": "root",
+		"data-shape": w ?? j.shape,
+		"data-size": M,
+		"data-status": I,
+		"data-tone": V,
+		"data-ui": "avatar",
+		"data-variant": k ?? j.variant,
+		...d ? { "data-disabled": "" } : {},
+		...i || y === void 0 || y.trim() === "" ? { "aria-hidden": !0 } : {
+			"aria-label": y,
+			role: "img"
+		},
+		...C === void 0 ? {} : { role: C }
+	};
+	return x === void 0 ? /* @__PURE__ */ s("span", { ...W }) : x(W);
+}
+function _(e) {
+	return e === void 0 ? "idle" : "loading";
+}
+//#endregion
+export { p as n, f as r, g as t };

package/dist/avatar-group-4rBj99tz.js

@@ -0,0 +1,47 @@
+import { n as e, r as t, t as n } from "./avatar-BnlE5jjr.js";
+import { Children as r, isValidElement as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { formatNameList as s } from "@slotted/core/identity";
+import { formatCount as c } from "@slotted/core/count";
+//#region src/avatar-group/avatar-group.tsx
+function l({ children: l, layout: d = "stack", locale: f, max: p = 5, overflowLabel: m, render: h, shape: g, size: _, total: v, variant: y, ...b }) {
+	let x = t(), S = _ ?? x.size, C = g ?? x.shape, w = y ?? x.variant, T = f ?? x.locale, E = r.toArray(l).filter(i), D = v ?? E.length, O = p === !1 ? Infinity : p, k = D > O ? Math.min(O - 1, E.length) : E.length, A = Math.max(D - k, 0), j = v === void 0 || v === E.length ? E.slice(k).map((e) => u(e)) : [], M = c({
+		count: A,
+		max: !1,
+		locale: T
+	}), N = {
+		...b,
+		children: /* @__PURE__ */ o(e, {
+			shape: C,
+			size: S,
+			variant: w,
+			children: [E.slice(0, k).map((e, t) => /* @__PURE__ */ a("li", {
+				"data-part": "item",
+				children: e
+			}, e.key ?? t)), A > 0 && M !== void 0 ? /* @__PURE__ */ a("li", {
+				"data-part": "overflow",
+				children: /* @__PURE__ */ a(n, {
+					initials: `+${M}`,
+					locale: T,
+					name: m ?? s({
+						names: j,
+						locale: T
+					}),
+					tone: "secondary"
+				})
+			}) : null]
+		}),
+		"data-layout": d,
+		"data-part": "root",
+		"data-shape": C,
+		"data-size": S,
+		"data-ui": "avatar-group"
+	};
+	return h === void 0 ? /* @__PURE__ */ a("ul", { ...N }) : h(N);
+}
+function u(e) {
+	let t = e.props;
+	return typeof t?.name == "string" ? t.name : void 0;
+}
+//#endregion
+export { l as t };

package/dist/avatar-group.js

@@ -0,0 +1,2 @@
+import { t as e } from "./avatar-group-4rBj99tz.js";
+export { e as AvatarGroup };

package/dist/avatar.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "./avatar-BnlE5jjr.js";
+export { n as Avatar, e as AvatarDefaultsProvider, t as useAvatarDefaults };

package/dist/badge-C6rbwVpu.js

@@ -0,0 +1,94 @@
+import { createContext as e, useContext as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { formatCount as a } from "@slotted/core/count";
+//#region src/badge/badge-defaults.tsx
+var o = e({
+	locale: void 0,
+	max: 99,
+	shape: "pill",
+	size: "md",
+	tone: "secondary",
+	variant: "soft"
+});
+function s() {
+	return t(o);
+}
+function c({ children: e, ...t }) {
+	let n = s();
+	return /* @__PURE__ */ r(o.Provider, {
+		value: {
+			locale: t.locale ?? n.locale,
+			max: t.max ?? n.max,
+			shape: t.shape ?? n.shape,
+			size: t.size ?? n.size,
+			tone: t.tone ?? n.tone,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/badge/badge.tsx
+var l = {
+	off: void 0,
+	polite: "status",
+	assertive: "alert"
+};
+function u({ children: e, count: t, end: o, live: c = "off", locale: u, max: d, render: f, role: p, shape: m, showZero: h = !1, size: g, start: _, tone: v, variant: y, ...b }) {
+	let x = s(), S = m ?? x.shape, C = t === void 0 ? void 0 : a({
+		count: t,
+		max: d ?? x.max,
+		showZero: h,
+		locale: u ?? x.locale
+	});
+	if (t !== void 0 && C === void 0) return null;
+	let w = /* @__PURE__ */ i(n, { children: [
+		_ === void 0 ? null : /* @__PURE__ */ r("span", {
+			"data-part": "start",
+			children: _
+		}),
+		/* @__PURE__ */ i("span", {
+			"data-part": "label",
+			children: [S === "dot" ? null : C, e]
+		}),
+		o === void 0 ? null : /* @__PURE__ */ r("span", {
+			"data-part": "end",
+			children: o
+		})
+	] }), T = {
+		...b,
+		children: w,
+		"data-part": "root",
+		"data-shape": S,
+		"data-size": g ?? x.size,
+		"data-tone": v ?? x.tone,
+		"data-ui": "badge",
+		"data-variant": y ?? x.variant,
+		...p === void 0 ? {} : { role: p },
+		...p === void 0 && l[c] !== void 0 ? { role: l[c] } : {}
+	};
+	return f === void 0 ? /* @__PURE__ */ r("span", { ...T }) : f(T);
+}
+//#endregion
+//#region src/badge/badge-anchor.tsx
+function d(e) {
+	if (e === void 0) return;
+	let t = {};
+	return e.x !== void 0 && (t["--slotted-badge-anchor-offset-x"] = `${e.x}px`), e.y !== void 0 && (t["--slotted-badge-anchor-offset-y"] = `${e.y}px`), t;
+}
+function f({ offset: e, overlap: t = "rectangle", placement: n = "top-end", render: i, style: a, ...o }) {
+	let s = d(e), c = {
+		...o,
+		"data-overlap": t,
+		"data-part": "anchor",
+		"data-placement": n,
+		"data-ui": "badge",
+		...s === void 0 && a === void 0 ? {} : { style: {
+			...a,
+			...s
+		} }
+	};
+	return i === void 0 ? /* @__PURE__ */ r("span", { ...c }) : i(c);
+}
+//#endregion
+export { s as i, u as n, c as r, f as t };

package/dist/badge.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "./badge-C6rbwVpu.js";
+export { t as Badge, r as BadgeAnchor, n as BadgeDefaultsProvider, e as useBadgeDefaults };