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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Slotted contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,46 @@
-# Temporary Holding Version
+# @slotted/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React components for Slotted, a UI library for product web applications.
+
+This package is a `0.x` beta. Its public API changes between beta releases without deprecation.
+
+## Install
+
+```sh
+npm install @slotted/react @slotted/core @slotted/theme @slotted/themes
+```
+
+`react` `>=19.2.0 <20` is a peer dependency.
+
+## Use
+
+Load the component stylesheet and one theme once, then import each component from its subpath:
+
+```tsx
+import '@slotted/themes/default.css';
+import '@slotted/react/styles.css';
+import { Button } from '@slotted/react/button';
+
+export function Actions() {
+  return <Button>Save</Button>;
+}
+```
+
+Every rule the library ships lives in the `slotted` cascade layer. An application that keeps its own CSS in layers declares `@layer slotted, app;` before the first import ([styling](https://github.com/andrelopes-code/slotted/blob/main/docs/styling.md)).
+
+## Language
+
+Components write English when no provider is present. `SlottedProvider` sets the locale and the catalogs of its subtree:
+
+```tsx
+import { SlottedProvider } from '@slotted/react/i18n';
+import { PT_BR } from '@slotted/core/i18n/pt-BR';
+
+<SlottedProvider locale="pt-BR" catalogs={{ 'pt-BR': PT_BR }}>
+  {children}
+</SlottedProvider>;
+```
+
+## License
+
+MIT

package/dist/accordion-D-YuMJzk.js

@@ -0,0 +1,143 @@
+import { isHeldOpen as e, nextOpenValues as t, sameOpenValues as n } from "@slotted/core/disclosure";
+import { createArrowNavigation as r } from "@slotted/core/focus";
+import { createControllable as i } from "@slotted/core/state";
+import { createContext as a, useContext as o, useEffect as s, useImperativeHandle as c, useState as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/accordion/accordion-defaults.tsx
+var d = a({
+	headingLevel: "3",
+	indicator: "chevron",
+	loop: !0,
+	mount: "eager",
+	multiple: !1,
+	requireOpen: !1,
+	size: "md",
+	togglePlacement: "end",
+	truncate: !1,
+	variant: "ruled"
+});
+function f() {
+	return o(d);
+}
+function p({ children: e, ...t }) {
+	let n = f();
+	return /* @__PURE__ */ u(d.Provider, {
+		value: {
+			headingLevel: t.headingLevel ?? n.headingLevel,
+			indicator: t.indicator ?? n.indicator,
+			loop: t.loop ?? n.loop,
+			mount: t.mount ?? n.mount,
+			multiple: t.multiple ?? n.multiple,
+			requireOpen: t.requireOpen ?? n.requireOpen,
+			size: t.size ?? n.size,
+			togglePlacement: t.togglePlacement ?? n.togglePlacement,
+			truncate: t.truncate ?? n.truncate,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/accordion/accordion.tsx
+var m = ":scope > * > [data-part=\"header\"] > [data-part=\"trigger\"]", h = {
+	plain: "plain",
+	ruled: "ruled",
+	framed: "ruled",
+	separated: "framed"
+}, g = a(void 0);
+function _(e) {
+	return e === null ? [] : [...e.querySelectorAll(":scope > [data-value]")].map((e) => ({
+		disabled: e.hasAttribute("data-disabled"),
+		value: e.getAttribute("data-value") ?? ""
+	}));
+}
+function v() {
+	return o(g);
+}
+function y({ children: a, className: o, defaultValue: d, disabled: p, handle: v, headingLevel: y, indicator: b, loop: x, mount: S, multiple: C, onValueChange: w, ref: T, render: E, requireOpen: D, size: O, style: k, togglePlacement: A, truncate: ee, value: j, variant: M, ...N }) {
+	let P = f(), [F, I] = l(d ?? []), L = j ?? F, [R, z] = l(null), B = p === !0, V = y ?? P.headingLevel, H = b ?? P.indicator, U = x ?? P.loop, W = S ?? P.mount, G = C ?? P.multiple, K = D ?? P.requireOpen, q = O ?? P.size, J = A ?? P.togglePlacement, Y = ee ?? P.truncate, X = M ?? P.variant, Z = {
+		multiple: G,
+		requireOpen: K
+	};
+	s(() => {
+		if (R === null) return;
+		let e = r(R, {
+			itemSelector: m,
+			loop: U,
+			orientation: () => "vertical"
+		}), t = new MutationObserver(() => e.refresh());
+		return t.observe(R, {
+			childList: !0,
+			subtree: !0
+		}), () => {
+			t.disconnect(), e.destroy();
+		};
+	}, [R, U]);
+	function Q(e, t, r) {
+		let a = !1, o = i({
+			controlled: j,
+			equals: n,
+			initial: L,
+			onRequest: (e) => {
+				a = e.cancelled, w?.(e.value, e);
+			}
+		}).request(e, t, r);
+		a || o && I(e);
+	}
+	let te = {
+		disabled: B,
+		indicator: H,
+		isHeld: (t) => e(L, t, Z),
+		isOpen: (e) => L.includes(e),
+		level: V,
+		mount: W,
+		size: q,
+		togglePlacement: J,
+		toggle: (e, n, r) => {
+			let i = t(L, e, Z);
+			i !== L && Q(i, n, r);
+		},
+		truncate: Y,
+		variant: h[X]
+	};
+	c(v, () => ({
+		openAll: () => {
+			let e = _(R).filter((e) => !e.disabled).map((e) => e.value);
+			Q(G ? e : e.slice(0, 1), "programmatic", void 0);
+		},
+		closeAll: () => {
+			if (K && L.length > 0) {
+				Q(L.slice(0, 1), "programmatic", void 0);
+				return;
+			}
+			Q([], "programmatic", void 0);
+		}
+	}), [
+		R,
+		L,
+		G,
+		K
+	]);
+	let $ = {
+		...N,
+		children: a,
+		className: o,
+		...B ? { "data-disabled": "" } : {},
+		"data-part": "root",
+		"data-size": q,
+		"data-ui": "accordion",
+		"data-variant": X,
+		style: k
+	};
+	return /* @__PURE__ */ u(g.Provider, {
+		value: te,
+		children: E === void 0 ? /* @__PURE__ */ u("div", {
+			...$,
+			ref: (e) => {
+				z(e), typeof T == "function" ? T(e) : T != null && (T.current = e);
+			}
+		}) : E($)
+	});
+}
+//#endregion
+export { f as a, p as i, y as n, v as r, m as t };

package/dist/accordion.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, r, t as i } from "./accordion-D-YuMJzk.js";
+export { i as ACCORDION_TRIGGER_SELECTOR, n as Accordion, t as AccordionDefaultsProvider, r as useAccordion, e as useAccordionDefaults };

package/dist/action-bar-C7cGnEyJ.js

@@ -0,0 +1,282 @@
+import { t as e } from "./button-defaults-DNq_DDJh.js";
+import { n as t, t as n } from "./icon-T9Yt4tnm.js";
+import { _ as r, g as i, n as a, t as o } from "./menu-parts-BQej6eU9.js";
+import { Fragment as s, createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { createCollapse as v } from "@slotted/core/overflow";
+import { createPresence as y } from "@slotted/core/presence";
+var b = c({
+	counterpart: () => null,
+	declare: () => void 0,
+	registerActions: () => void 0,
+	registerTrigger: () => void 0,
+	release: () => void 0,
+	surface: []
+});
+function x() {
+	return u(b);
+}
+var S = "data-unit", C = "data-priority", w = "--_stacked", T = Object.freeze({
+	always: 0,
+	hide: 0,
+	high: 2,
+	low: 1,
+	pinned: 0
+});
+function E(e, t) {
+	return e === void 0 ? t ? "low" : "pinned" : e === "hide" || e === "pinned" || t ? e : "pinned";
+}
+//#endregion
+//#region src/action-bar/action-bar-defaults.tsx
+var D = c({
+	align: "end",
+	size: "md",
+	sticky: !1,
+	variant: "plain"
+});
+function O() {
+	return u(D);
+}
+function k({ children: e, ...t }) {
+	let n = O();
+	return /* @__PURE__ */ g(D.Provider, {
+		value: {
+			align: t.align ?? n.align,
+			size: t.size ?? n.size,
+			sticky: t.sticky ?? n.sticky,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/action-bar/action-bar.tsx
+var A = Object.freeze([]);
+function j(e) {
+	return [...e.children].filter((e) => e instanceof HTMLElement && e.getAttribute("data-part") !== "overflow" && e.getAttribute("data-priority") !== "always");
+}
+function M(e) {
+	return e.getAttribute("data-priority") ?? "pinned";
+}
+function N(e, t) {
+	for (let n = e.nextElementSibling; n !== null && n !== t; n = n.nextElementSibling) if (n.getAttribute("data-part") === "separator") return !0;
+	return !1;
+}
+function P(e, t) {
+	let n = new Set(t), r = [...e.children].filter((e) => e instanceof HTMLElement && e.hasAttribute("data-unit") && (n.has(e) || e.getAttribute("data-priority") === "always"));
+	return r.map((e, t) => {
+		let n = r[t - 1];
+		return {
+			id: e.getAttribute("data-unit") ?? "",
+			separatorBefore: n !== void 0 && N(n, e)
+		};
+	});
+}
+function F(e, t) {
+	return e.length === t.length && e.every((e, n) => e.id === t[n]?.id && e.separatorBefore === t[n]?.separatorBefore);
+}
+function I({ align: t, children: n, className: r, onOverflowChange: i, present: a, ref: o, render: s, size: c, sticky: u, style: f, variant: _, ...x }) {
+	let E = O(), D = m(null), k = m(/* @__PURE__ */ new Map()), N = m([]), I = m(null), [L, R] = h(null), [z, B] = h(null), [V, H] = h(!1), [U, W] = h(A), G = m(i);
+	G.current = i;
+	let ee = t ?? E.align, K = c ?? E.size, te = u ?? E.sticky, ne = _ ?? E.variant, q = a ?? !0, [J, re] = h(q ? "open" : "unmounted"), Y = m(null);
+	Y.current ??= y({
+		onStatusChange: re,
+		present: q,
+		skipInitialAnimation: !0
+	}), d(() => {
+		Y.current?.sync(q);
+	}, [q]), d(() => {
+		let e = Y.current;
+		return () => e?.destroy();
+	}, []);
+	let X = l((e) => R(e), []), Z = l((e) => B(e), []), ie = p(() => ({
+		counterpart: (e) => k.current.get(e) ?? null,
+		declare: (e, t) => {
+			k.current.set(e, t);
+		},
+		registerActions: X,
+		registerTrigger: Z,
+		release: (e) => {
+			k.current.delete(e);
+		},
+		surface: U
+	}), [
+		X,
+		Z,
+		U
+	]), Q = l((e) => {
+		if (D.current = e, Y.current?.setNode(e), typeof o == "function") return o(e);
+		o && (o.current = e);
+	}, [o]);
+	if (d(() => {
+		let e = L;
+		if (e === null) return;
+		let t = () => {
+			let t = (e.ownerDocument?.defaultView)?.getComputedStyle(e).getPropertyValue(w).trim() === "1";
+			H((e) => e === t ? e : t);
+		};
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [L]), d(() => {
+		let e = L;
+		if (e === null || V) return;
+		let t = () => {
+			let t = P(e, N.current);
+			W((e) => F(e, t) ? e : t);
+		}, n = v(e, {
+			collapsible: (e) => M(e) !== "pinned",
+			divides: (e) => e.getAttribute("data-part") === "separator",
+			onChange: (e) => {
+				N.current = e, t(), G.current?.(e.filter((e) => e.hasAttribute(S)).length);
+			},
+			rank: (e) => T[M(e)],
+			trigger: () => z,
+			triggerAlways: () => e.querySelector(`[${C}='always']`) !== null,
+			units: () => j(e)
+		});
+		I.current = n, t();
+		let r = new MutationObserver(() => {
+			n.refresh(), t();
+		});
+		return r.observe(e, {
+			childList: !0,
+			subtree: !0
+		}), () => {
+			r.disconnect(), n.destroy(), I.current = null, N.current = [], W(A);
+		};
+	}, [
+		L,
+		V,
+		z
+	]), J === "unmounted") return null;
+	let ae = N.current.length, $ = {
+		role: "group",
+		...x,
+		children: /* @__PURE__ */ g(e, {
+			size: K,
+			children: n
+		}),
+		className: r,
+		"data-align": ee,
+		...z === null ? {} : { "data-collapsed": String(ae) },
+		"data-part": "root",
+		"data-size": K,
+		...J === "open" ? {} : { "data-status": J },
+		...te ? { "data-sticky": "" } : {},
+		"data-ui": "action-bar",
+		"data-variant": ne,
+		style: f
+	};
+	return /* @__PURE__ */ g(b.Provider, {
+		value: ie,
+		children: s === void 0 ? /* @__PURE__ */ g("div", {
+			...$,
+			ref: Q
+		}) : s({
+			...$,
+			ref: Q
+		})
+	});
+}
+//#endregion
+//#region src/action-bar/action-bar-overflow.tsx
+function L(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+function R(e, t) {
+	return typeof e == "function" ? e(t) : e === void 0 ? `${t} more ${t === 1 ? "action" : "actions"}` : e;
+}
+function z({ align: e, label: c, menuRef: u, ref: d, render: f, side: p, size: h, ...v }) {
+	let y = x(), b = y.surface, { registerTrigger: S } = y, C = m(void 0), w = l((e) => {
+		S(e), L(e, C.current, d);
+	}, [d, S]);
+	return /* @__PURE__ */ _(r, {
+		...e === void 0 ? {} : { align: e },
+		...u === void 0 ? {} : { ref: u },
+		...p === void 0 ? {} : { side: p },
+		...h === void 0 ? {} : { size: h },
+		children: [/* @__PURE__ */ g(a, { render: ({ ref: e, ...r }) => {
+			C.current = e;
+			let i = {
+				...r,
+				...v,
+				"aria-label": R(c, b.length),
+				children: /* @__PURE__ */ g(n, { children: /* @__PURE__ */ g(t, { name: "ellipsis" }) }),
+				"data-part": "overflow"
+			};
+			return f === void 0 ? /* @__PURE__ */ g("button", {
+				...i,
+				ref: w,
+				type: "button"
+			}) : f({
+				...i,
+				ref: w
+			});
+		} }), /* @__PURE__ */ g(o, { children: b.map((e) => /* @__PURE__ */ _(s, { children: [e.separatorBefore ? /* @__PURE__ */ g(i, {}) : null, y.counterpart(e.id)] }, e.id)) })]
+	});
+}
+//#endregion
+//#region src/action-bar/action-bar-parts.tsx
+function B({ children: e, ref: t, render: n, ...r }) {
+	let i = {
+		...r,
+		children: e,
+		"data-part": "status"
+	};
+	return n === void 0 ? /* @__PURE__ */ g("div", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+function V({ children: e, ref: t, render: n, ...r }) {
+	let { registerActions: i } = x(), a = l((e) => {
+		if (i(e), typeof t == "function") return t(e);
+		t && (t.current = e);
+	}, [t, i]);
+	d(() => () => i(null), [i]);
+	let o = {
+		...r,
+		children: e,
+		"data-part": "actions"
+	};
+	return n === void 0 ? /* @__PURE__ */ g("div", {
+		...o,
+		ref: a
+	}) : n({
+		...o,
+		ref: a
+	});
+}
+function H({ children: e, counterpart: t, priority: n, ref: r, render: i, ...a }) {
+	let o = x(), s = f(), c = t != null && t !== !1, l = E(n, c);
+	c && o.declare(s, t);
+	let { release: u } = o;
+	d(() => () => u(s), [s, u]);
+	let p = {
+		...a,
+		...c ? { [S]: s } : {},
+		...l === "always" ? { hidden: !0 } : {},
+		children: e,
+		"data-part": "action",
+		"data-priority": l
+	};
+	return i === void 0 ? /* @__PURE__ */ g("div", {
+		...p,
+		ref: r
+	}) : i(p);
+}
+function U({ ref: e, render: t, ...n }) {
+	let r = {
+		"aria-orientation": "vertical",
+		...n,
+		"data-part": "separator",
+		role: "separator"
+	};
+	return t === void 0 ? /* @__PURE__ */ g("div", {
+		...r,
+		ref: e
+	}) : t(r);
+}
+//#endregion
+export { z as a, O as c, B as i, x as l, V as n, I as o, U as r, k as s, H as t };

package/dist/action-bar.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 "./action-bar-C7cGnEyJ.js";
+export { a as ActionBar, c as ActionBarAction, i as ActionBarActions, s as ActionBarDefaultsProvider, e as ActionBarOverflow, o as ActionBarSeparator, n as ActionBarStatus, t as useActionBarDefaults, r as useActionBarOverflow };