@jfrader/ui 0.5.1 → 0.6.0

package/README.md

@@ -62,7 +62,24 @@ import { ThemeRoot } from '@jfrader/ui/theme-root';
 
 `react` and `react-dom` (`^19.0.0`) are peer dependencies.
 
-Next.js App Router: see [Next.js App Router](https://github.com/jfrader/jfrader-ui/blob/master/docs/consuming-jfrader-ui.md#nextjs-app-router) for the required Emotion registry.
+## Next.js App Router
+
+`@jfrader/ui/next` exports `EmotionRegistry`, the required Emotion registry. It needs the optional `next` and `@emotion/cache` peers:
+
+```sh
+pnpm add @emotion/cache
+```
+
+```tsx
+// app/layout.tsx
+import { EmotionRegistry } from '@jfrader/ui/next';
+
+<body>
+  <EmotionRegistry>{children}</EmotionRegistry>
+</body>;
+```
+
+See [Next.js App Router](https://github.com/jfrader/jfrader-ui/blob/master/docs/consuming-jfrader-ui.md#nextjs-app-router) for Server Component boundaries.
 
 ## Theming
 

package/dist/{accordion-DLul6vIl.js → accordion-D6myONB9.js}

@@ -1,8 +1,9 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { t as n } from "./disclosure-caret-C5T3fcl6.js";
-import { t as r } from "./focus-ring-BK5W5_NY.js";
-import { n as i, r as a } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./disclosure-caret-C5T3fcl6.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./sx-BJXJ2xJK.js";
 import { n as o } from "./roving-focus-CYlo_Kf8.js";
 import { t as s } from "./use-controlled-state-DpeVQZNR.js";
 import { createContext as c, useContext as l, useId as u, useMemo as d } from "react";
@@ -53,7 +54,7 @@ var v = "", y = {
 	transitionProperty: "background-color",
 	transitionDuration: f.motion.duration.fast,
 	transitionTimingFunction: f.motion.easeStandard,
-	"&::after": { ...n },
+	"&::after": { ...t },
 	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
 	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
 	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": { backgroundColor: f.color.surfaceHover },
@@ -62,15 +63,15 @@ var v = "", y = {
 		opacity: .55,
 		cursor: "not-allowed"
 	},
-	"&:focus-visible": { ...r },
-	[i]: {
+	"&:focus-visible": { ...n },
+	[r]: {
 		"&::after": {
 			forcedColorAdjust: "none",
 			borderInlineStartColor: "ButtonText"
 		},
 		"&:disabled::after": { borderInlineStartColor: "GrayText" }
 	},
-	[a]: {
+	[i]: {
 		transitionDuration: "0s",
 		"&::after": { transitionDuration: "0s" }
 	}
@@ -81,28 +82,28 @@ var v = "", y = {
 	lineHeight: f.lineHeight.relaxed,
 	"&[hidden]": { display: "none" }
 });
-function T({ ref: e, value: n, defaultValue: r, onValueChange: i, type: a = "single", collapsible: c = !0, onKeyDown: l, className: u, sx: f, ...h }) {
-	let [g, _] = s(n, r, i), x = d(() => {
-		let e = b(g, a), t = c || e.length > 1;
+function T({ ref: e, value: t, defaultValue: n, onValueChange: r, type: i = "single", collapsible: c = !0, onKeyDown: l, className: u, sx: f, ...h }) {
+	let [g, _] = s(t, n, r), x = d(() => {
+		let e = b(g, i), t = c || e.length > 1;
 		return {
 			openValues: e,
 			toggle: (n) => {
 				let r = e.includes(n);
-				(!r || t) && _(a === "multiple" ? r ? e.filter((e) => e !== n) : [...e, n] : r ? v : n);
+				(!r || t) && _(i === "multiple" ? r ? e.filter((e) => e !== n) : [...e, n] : r ? v : n);
 			},
 			canCollapse: t
 		};
 	}, [
 		g,
 		_,
-		a,
+		i,
 		c
 	]), S = (e) => {
 		l?.(e), !e.defaultPrevented && o(e, e.currentTarget, "vertical", y);
 	};
 	return /* @__PURE__ */ p(m.Provider, {
 		value: x,
-		children: /* @__PURE__ */ p(t, {
+		children: /* @__PURE__ */ p(a, {
 			className: u,
 			sx: f,
 			children: (t) => /* @__PURE__ */ p("div", {
@@ -116,48 +117,48 @@ function T({ ref: e, value: n, defaultValue: r, onValueChange: i, type: a = "sin
 	});
 }
 T.displayName = "Accordion";
-function E({ ref: e, value: n, disabled: r = !1, className: i, sx: a, ...o }) {
-	let { openValues: s } = g("Item"), c = u(), l = s.includes(n), f = d(() => ({
-		value: n,
-		disabled: r,
+function E({ ref: e, value: t, disabled: n = !1, className: r, sx: i, ...o }) {
+	let { openValues: s } = g("Item"), c = u(), l = s.includes(t), f = d(() => ({
+		value: t,
+		disabled: n,
 		expanded: l,
 		triggerId: `${c}-trigger`,
 		panelId: `${c}-panel`
 	}), [
+		t,
 		n,
-		r,
 		l,
 		c
 	]);
 	return /* @__PURE__ */ p(h.Provider, {
 		value: f,
-		children: /* @__PURE__ */ p(t, {
-			className: i,
+		children: /* @__PURE__ */ p(a, {
+			className: r,
 			styles: x,
-			sx: a,
+			sx: i,
 			children: (t) => /* @__PURE__ */ p("div", {
 				...o,
 				ref: e,
 				"data-ui": "accordion-item",
 				"data-state": l ? "open" : "closed",
-				"data-disabled": r ? "" : void 0,
+				"data-disabled": n ? "" : void 0,
 				className: t
 			})
 		})
 	});
 }
 E.displayName = "Accordion.Item";
-function D({ ref: e, onClick: n, disabled: r, className: i, sx: a, ...o }) {
+function D({ ref: e, onClick: t, disabled: n, className: r, sx: i, ...o }) {
 	let { toggle: s, canCollapse: c } = g("Trigger"), { value: l, disabled: u, expanded: d, triggerId: f, panelId: m } = _("Trigger"), h = d && !c, v = (e) => {
-		n?.(e), !e.defaultPrevented && s(l);
+		t?.(e), !e.defaultPrevented && s(l);
 	};
 	return /* @__PURE__ */ p("h3", {
 		"data-ui": "accordion-heading",
 		css: S,
-		children: /* @__PURE__ */ p(t, {
-			className: i,
+		children: /* @__PURE__ */ p(a, {
+			className: r,
 			styles: C,
-			sx: a,
+			sx: i,
 			children: (t) => /* @__PURE__ */ p("button", {
 				...o,
 				ref: e,
@@ -168,7 +169,7 @@ function D({ ref: e, onClick: n, disabled: r, className: i, sx: a, ...o }) {
 				"aria-expanded": d,
 				"aria-controls": m,
 				"aria-disabled": h || void 0,
-				disabled: u || r,
+				disabled: u || n,
 				onClick: v,
 				className: t
 			})
@@ -176,14 +177,14 @@ function D({ ref: e, onClick: n, disabled: r, className: i, sx: a, ...o }) {
 	});
 }
 D.displayName = "Accordion.Trigger";
-function O({ ref: e, "aria-labelledby": n, className: r, sx: i, ...a }) {
-	let { expanded: o, triggerId: s, panelId: c } = _("Panel"), l = [n, s].filter(Boolean).join(" ");
-	return /* @__PURE__ */ p(t, {
-		className: r,
+function O({ ref: e, "aria-labelledby": t, className: n, sx: r, ...i }) {
+	let { expanded: o, triggerId: s, panelId: c } = _("Panel"), l = [t, s].filter(Boolean).join(" ");
+	return /* @__PURE__ */ p(a, {
+		className: n,
 		styles: w,
-		sx: i,
+		sx: r,
 		children: (t) => /* @__PURE__ */ p("div", {
-			...a,
+			...i,
 			ref: e,
 			role: "region",
 			id: c,

package/dist/accordion.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Accordion } from "./accordion-DLul6vIl.js";
+export { t as Accordion } from "./accordion-D6myONB9.js";