@slotted/react 0.1.0-beta.8 → 0.1.0-beta.9

package/dist/breadcrumb-Dwhy6HNo.js

@@ -0,0 +1,222 @@
+import { n as e, t } from "./icon-DMdotKfc.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+import { keyedProps as r } from "@slotted/core/selector-key";
+import { createControllable as i } from "@slotted/core/state";
+import { Children as a, createContext as o, isValidElement as s, useCallback 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 { createCollapse as v } from "@slotted/core/overflow";
+import { breadcrumbMessages as y } from "@slotted/core/i18n";
+//#region src/breadcrumb/breadcrumb-defaults.tsx
+var b = o({});
+function x() {
+	return l(b);
+}
+function S({ children: e, ...t }) {
+	let n = x();
+	return /* @__PURE__ */ g(b.Provider, {
+		value: {
+			itemsAfterCollapse: t.itemsAfterCollapse ?? n.itemsAfterCollapse,
+			itemsBeforeCollapse: t.itemsBeforeCollapse ?? n.itemsBeforeCollapse,
+			maxItems: t.maxItems ?? n.maxItems,
+			overflow: t.overflow ?? n.overflow,
+			separator: t.separator ?? n.separator
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/breadcrumb/breadcrumb.tsx
+var C = o(void 0), w = o(void 0);
+function T() {
+	let e = l(C);
+	if (e === void 0) throw Error("Breadcrumb parts must be rendered inside a Breadcrumb.");
+	return e;
+}
+function E() {
+	return l(w);
+}
+var D = w.Provider;
+function O({ children: e, defaultExpanded: t, expanded: a, itemsAfterCollapse: o, itemsBeforeCollapse: s, maxItems: c, messages: l, onExpandedChange: f, overflow: h, render: _, separator: v, ...b }) {
+	let S = x(), w = n(y, l), T = d(), [E, D] = m(t ?? !1), [O, k] = m(0), A = a ?? E, j = `slotted-breadcrumb-${T}`, M = p(!1), N = (e, t) => {
+		let n = i({
+			controlled: a,
+			initial: A,
+			onRequest: (e) => f?.(e.value, e)
+		});
+		M.current = !0, n.request(!0, e, t) && D(!0);
+	};
+	u(() => {
+		M.current && A && (M.current = !1, document.getElementById(j)?.focus());
+	}, [A, j]);
+	let P = {
+		expand: N,
+		expanded: A,
+		firstRevealedId: j,
+		itemsAfterCollapse: o ?? S.itemsAfterCollapse ?? 2,
+		itemsBeforeCollapse: s ?? S.itemsBeforeCollapse ?? 1,
+		maxItems: c ?? S.maxItems ?? 8,
+		overflow: h ?? S.overflow ?? "collapse",
+		separator: v ?? S.separator,
+		setCollapsed: k,
+		t: w
+	}, F = r({
+		"aria-label": w("label"),
+		...b,
+		children: e,
+		"data-collapsed": O > 0 ? String(O) : void 0,
+		"data-expanded": A ? "" : void 0,
+		"data-part": "root",
+		"data-ui": "breadcrumb"
+	});
+	return /* @__PURE__ */ g(C.Provider, {
+		value: P,
+		children: _ === void 0 ? /* @__PURE__ */ g("nav", { ...F }) : _(F)
+	});
+}
+//#endregion
+//#region src/breadcrumb/breadcrumb-parts.tsx
+function k(e, t, n) {
+	if (!(e <= Math.max(0, t) + Math.max(0, n))) return {
+		start: Math.max(0, t),
+		end: e - Math.max(0, n)
+	};
+}
+function A({ children: e, ref: t, render: n, ...i }) {
+	let o = T(), l = a.toArray(e).filter((e) => s(e)), u = Math.max(0, o.itemsBeforeCollapse), d = Math.max(0, o.itemsAfterCollapse), h = o.maxItems <= 0 || l.length <= o.maxItems ? void 0 : k(l.length, u, d), _ = o.expanded ? void 0 : h, y = l.length > u + d, b = o.overflow === "collapse" && !o.expanded && h === void 0 && y, x = p(null), S = p(null), [C, w] = m(0), { setCollapsed: E } = o;
+	f(() => {
+		let e = x.current;
+		if (!b || e === null) {
+			w(0);
+			return;
+		}
+		let t = () => [...e.children].filter((e) => e instanceof HTMLElement && e !== S.current), n = v(e, {
+			collapsible: (e) => {
+				let n = t().indexOf(e);
+				return n >= u && n < t().length - d;
+			},
+			onChange: (e) => w(e.length),
+			rank: (e) => t().indexOf(e),
+			trigger: () => S.current,
+			units: t
+		});
+		return () => {
+			n.destroy(), w(0);
+		};
+	}, [
+		d,
+		u,
+		l.length,
+		b
+	]);
+	let O = _ === void 0 ? C : _.end - _.start;
+	f(() => {
+		E(O);
+	}, [O, E]);
+	let A = c((e) => {
+		x.current = e, typeof t == "function" ? t(e) : t != null && (t.current = e);
+	}, [t]), j = [];
+	for (let [e, t] of l.entries()) {
+		e === u && (_ !== void 0 || b) && j.push(/* @__PURE__ */ g(M, {
+			hidden: O,
+			idle: _ === void 0,
+			itemRef: S
+		}, "slotted-breadcrumb-ellipsis"));
+		let n = _ !== void 0 && e >= _.start && e < _.end;
+		j.push(/* @__PURE__ */ g(D, {
+			value: {
+				hidden: n,
+				last: e === l.length - 1,
+				revealedId: y && e === u ? o.firstRevealedId : void 0
+			},
+			children: t
+		}, t.key ?? e));
+	}
+	let N = r({
+		...i,
+		children: j,
+		"data-part": "list",
+		ref: A
+	});
+	return n === void 0 ? /* @__PURE__ */ g("ol", { ...N }) : n(N);
+}
+function j({ children: e }) {
+	return /* @__PURE__ */ g("span", {
+		"aria-hidden": "true",
+		"data-part": "separator",
+		"data-part-separator": "",
+		children: e
+	});
+}
+function M({ hidden: n, idle: r, itemRef: i }) {
+	let a = T();
+	return /* @__PURE__ */ _("li", {
+		"data-part": "item",
+		"data-part-item": "",
+		hidden: r,
+		ref: i,
+		children: [/* @__PURE__ */ g("button", {
+			"aria-expanded": !1,
+			"aria-label": a.t("showHidden", { count: n }),
+			"data-part": "ellipsis",
+			"data-part-ellipsis": "",
+			onClick: (e) => a.expand("pointer", e),
+			onKeyDown: (e) => {
+				(e.key === "Enter" || e.key === " ") && a.expand("keyboard", e);
+			},
+			type: "button",
+			children: /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { name: "ellipsis" }) })
+		}), /* @__PURE__ */ g(j, { children: a.separator })]
+	});
+}
+function N({ children: e, ref: t, render: n, ...i }) {
+	let a = T(), o = E(), s = r({
+		...i,
+		children: /* @__PURE__ */ _(h, { children: [e, o?.last === !0 ? null : /* @__PURE__ */ g(j, { children: a.separator })] }),
+		"data-part": "item",
+		hidden: o?.hidden === !0 || i.hidden
+	});
+	return n === void 0 ? /* @__PURE__ */ g("li", {
+		...s,
+		ref: t
+	}) : n(s);
+}
+function P({ children: e, ref: t, render: n, ...i }) {
+	let a = E(), o = r({
+		...i,
+		children: e,
+		"data-part": "link",
+		id: i.id ?? a?.revealedId
+	});
+	return n === void 0 ? /* @__PURE__ */ g("a", {
+		...o,
+		ref: t
+	}) : n(o);
+}
+function F({ children: n, current: i, ref: a, render: o, ...s }) {
+	let c = E(), l = r({
+		type: "button",
+		...s,
+		"aria-current": i === !0 ? "page" : s["aria-current"],
+		children: /* @__PURE__ */ _(h, { children: [n, /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(e, { name: "chevron-down" }) })] }),
+		"data-part": "trigger",
+		id: s.id ?? c?.revealedId
+	});
+	return o === void 0 ? /* @__PURE__ */ g("button", {
+		...l,
+		ref: a
+	}) : o(l);
+}
+function I({ children: e, ref: t, render: n, ...i }) {
+	let a = r({
+		...i,
+		"aria-current": "page",
+		children: e,
+		"data-part": "page"
+	});
+	return n === void 0 ? /* @__PURE__ */ g("span", {
+		...a,
+		ref: t
+	}) : n(a);
+}
+//#endregion
+export { F as a, T as c, I as i, S as l, P as n, k as o, A as r, O as s, N as t, x as u };

package/dist/breadcrumb.js

@@ -1,2 +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, u as l } from "./breadcrumb-Bf01N4wK.js";
+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, u as l } from "./breadcrumb-Dwhy6HNo.js";
 export { s as Breadcrumb, r as BreadcrumbDefaultsProvider, c as BreadcrumbItem, i as BreadcrumbLink, o as BreadcrumbList, n as BreadcrumbPage, e as BreadcrumbTrigger, a as collapsedRange, t as useBreadcrumb, l as useBreadcrumbDefaults };

package/dist/button-DE4tnH90.js

@@ -0,0 +1,100 @@
+import { r as e } from "./i18n-DpW8lqJ1.js";
+import { a as t, c as n, d as r, f as i, i as a, l as o, o as s, r as c, s as l, u } from "./icon-button-VOA-RY_1.js";
+import { keyedProps as d } from "@slotted/core/selector-key";
+import { jsx as f } from "react/jsx-runtime";
+import { buttonMessages as p } from "@slotted/core/i18n";
+//#region src/button/button-link.tsx
+function m({ children: e, disabled: t = !1, end: n, fullWidth: r = !1, href: o, justify: c = "center", onAuxClick: p, onAuxClickCapture: m, onClick: h, onClickCapture: g, onKeyDown: _, onKeyDownCapture: v, render: y, size: b, start: x, tone: S, variant: C, ...w }) {
+	let T = l({
+		size: b,
+		tone: S,
+		variant: C
+	}, u), E = (e) => t ? (a(e), !0) : !1, D = d({
+		...w,
+		...s({
+			disabled: t,
+			fullWidth: r,
+			justify: c,
+			...T
+		}),
+		"aria-disabled": t || void 0,
+		children: /* @__PURE__ */ f(i, {
+			end: n,
+			start: x,
+			children: e
+		}),
+		role: t ? "link" : void 0,
+		tabIndex: t ? w.tabIndex ?? 0 : w.tabIndex,
+		...y === void 0 && !t ? { href: o } : {},
+		onAuxClick: (e) => {
+			E(e) || p?.(e);
+		},
+		onAuxClickCapture: (e) => {
+			E(e) || m?.(e);
+		},
+		onClick: (e) => {
+			E(e) || h?.(e);
+		},
+		onClickCapture: (e) => {
+			E(e) || g?.(e);
+		},
+		onKeyDown: (e) => {
+			e.key === "Enter" && E(e) || _?.(e);
+		},
+		onKeyDownCapture: (e) => {
+			e.key === "Enter" && E(e) || v?.(e);
+		}
+	});
+	return y === void 0 ? /* @__PURE__ */ f("a", { ...D }) : y(D);
+}
+//#endregion
+//#region src/button/toggle-button.tsx
+function h({ children: u, defaultPressed: m, disabled: h = !1, end: g, focusableWhenDisabled: _ = !1, fullWidth: v = !1, justify: y = "center", loading: b = !1, loadingDelay: x = 0, messages: S, onClick: C, onClickCapture: w, onPressedChange: T, pressed: E, render: D, size: O, start: k, tone: A, type: j = "button", variant: M, ...N }) {
+	let P = l({
+		size: O,
+		tone: A,
+		variant: M
+	}, r), F = t({
+		disabled: h,
+		focusableWhenDisabled: _,
+		loading: b
+	}), I = n({
+		loading: b,
+		loadingDelay: x
+	}), L = e(p, S), R = o({
+		defaultPressed: m,
+		onPressedChange: T,
+		pressed: E
+	}), z = d({
+		...N,
+		...s({
+			disabled: h,
+			fullWidth: v,
+			justify: y,
+			loading: b,
+			pressed: R.pressed,
+			...P
+		}),
+		"aria-disabled": F.ariaDisabled,
+		"aria-pressed": R.pressed,
+		children: /* @__PURE__ */ f(i, {
+			end: g,
+			indicator: I ? /* @__PURE__ */ f(c, { label: L("loading") }) : null,
+			start: k,
+			children: u
+		}),
+		disabled: F.nativelyDisabled,
+		onClick: (e) => {
+			if (F.refuses) return a(e);
+			C?.(e), e.defaultPrevented || R.requestToggle(e);
+		},
+		onClickCapture: (e) => {
+			if (F.refuses) return a(e);
+			w?.(e);
+		},
+		type: j
+	});
+	return D === void 0 ? /* @__PURE__ */ f("button", { ...z }) : D(z);
+}
+//#endregion
+export { m as n, h as t };

package/dist/button-group-CNDK1041.js

@@ -0,0 +1,51 @@
+import { t as e } from "./button-defaults-DNq_DDJh.js";
+import { keyedProps as t } from "@slotted/core/selector-key";
+import { createContext as n, useContext as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/button-group/button-group-shape.tsx
+var a = n({ orientation: "horizontal" }), o = a.Provider;
+function s() {
+	return r(a);
+}
+//#endregion
+//#region src/button-group/button-group.tsx
+function c({ align: n, children: r, fullWidth: a, justify: s, orientation: c, render: l, size: u, tone: d, variant: f, ...p }) {
+	let m = /* @__PURE__ */ i(o, {
+		value: { orientation: c ?? "horizontal" },
+		children: u !== void 0 || d !== void 0 || f !== void 0 ? /* @__PURE__ */ i(e, {
+			size: u,
+			tone: d,
+			variant: f,
+			children: r
+		}) : r
+	}), h = t({
+		role: "group",
+		...p,
+		...n === void 0 ? {} : { "data-align": n },
+		...s === void 0 ? {} : { "data-justify": s },
+		...c === void 0 ? {} : { "data-orientation": c },
+		...a ? { "data-full-width": "" } : {},
+		"data-part": "root",
+		"data-ui": "button-group",
+		children: m
+	});
+	return l === void 0 ? /* @__PURE__ */ i("div", { ...h }) : l(h);
+}
+//#endregion
+//#region src/button-group/button-group-separator.tsx
+function l({ decorative: e = !1, render: n, ...r }) {
+	let { orientation: a } = s(), o = t({
+		...e ? {
+			"aria-hidden": !0,
+			role: "none"
+		} : {
+			role: "separator",
+			"aria-orientation": a === "vertical" ? "horizontal" : "vertical"
+		},
+		...r,
+		"data-part": "separator"
+	});
+	return n === void 0 ? /* @__PURE__ */ i("div", { ...o }) : n(o);
+}
+//#endregion
+export { c as n, l as t };

package/dist/button-group.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./button-group-Det_nYor.js";
+import { n as e, t } from "./button-group-CNDK1041.js";
 export { e as ButtonGroup, t as ButtonGroupSeparator };

package/dist/button.js

@@ -1,4 +1,4 @@
 import { n as e, t } from "./button-defaults-DNq_DDJh.js";
-import { n, t as r } from "./icon-button-CCWkCDMs.js";
-import { n as i, t as a } from "./button-Db9f3Bxn.js";
+import { n, t as r } from "./icon-button-VOA-RY_1.js";
+import { n as i, t as a } from "./button-DE4tnH90.js";
 export { n as Button, t as ButtonDefaultsProvider, i as ButtonLink, r as IconButton, a as ToggleButton, e as useButtonDefaults };