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

package/README.md

@@ -14,11 +14,11 @@ npm install @slotted/react @slotted/core @slotted/theme @slotted/themes
 
 ## Use
 
-Load the component stylesheet and one theme once, then import each component from its subpath:
+Load one theme and the stylesheet of each family the application renders, then import each component from its subpath:
 
 ```tsx
 import '@slotted/themes/default.css';
-import '@slotted/react/styles.css';
+import '@slotted/react/button/styles.css';
 import { Button } from '@slotted/react/button';
 
 export function Actions() {
@@ -26,6 +26,8 @@ export function Actions() {
 }
 ```
 
+`@slotted/react/<family>/styles.css` holds the family and every family it renders. `@slotted/react/styles.css` holds every family in one sheet, 1.5 MB. The modules import no stylesheet, so server rendering and test runners load them unbundled.
+
 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
@@ -41,6 +43,25 @@ import { PT_BR } from '@slotted/core/i18n/pt-BR';
 </SlottedProvider>;
 ```
 
+## Agents
+
+`dist/docs/AGENTS.snippet.md` is the section an application adds to the instructions its coding agent reads. It points the agent at the family pages, the guidelines and the skills of the installed version. The `slotted-agent-docs` command keeps it there, and keeps the skills where the agent finds them:
+
+```sh
+# Writes the snippet between <!-- slotted:begin --> and <!-- slotted:end --> in the file; the rest of the file is left as it is.
+slotted-agent-docs instructions write --file AGENTS.md
+# An instruction file outside the directory that holds node_modules names that directory, relative to the file.
+slotted-agent-docs instructions write --file ../AGENTS.md --app-root web
+# An application with its own theme.
+slotted-agent-docs instructions write --file AGENTS.md --theme brand --theme-css @acme/brand/theme.css
+# One entry per skill: a relative link, or a copy for an agent that does not follow links.
+slotted-agent-docs skills link --dir .agents/skills [--mode copy]
+```
+
+`instructions check` and `skills check` take the same arguments, print what differs, and exit 1 when the file or the directory is not what the matching write would produce: a `prepare` script runs the writes, CI runs the checks.
+
+Skill directories known to agents, as documentation only: `.agents/skills`, `.claude/skills`, `.github/skills`. Instruction files: `AGENTS.md`, `CLAUDE.md`, `.github/copilot-instructions.md`, `GEMINI.md`.
+
 ## License
 
 MIT

package/dist/accordion-n5D6mcmS.js

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

package/dist/accordion.js

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

package/dist/action-bar-z2DPc1Wy.js

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

package/dist/action-bar.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 } from "./action-bar-C7cGnEyJ.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 } from "./action-bar-z2DPc1Wy.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 };