@jfrader/ui 0.5.0 → 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-D6myONB9.js

@@ -0,0 +1,206 @@
+'use client';
+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";
+import { vars as f } from "@jfrader/tokens/vars";
+import { jsx as p } from "@emotion/react/jsx-runtime";
+//#region src/components/accordion/accordion.tsx
+var m = c(null), h = c(null);
+function g(e) {
+	let t = l(m);
+	if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion>.`);
+	return t;
+}
+function _(e) {
+	let t = l(h);
+	if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion.Item>.`);
+	return t;
+}
+var v = "", y = {
+	itemSelector: "[data-ui=\"accordion-trigger\"]:not([disabled])",
+	ownerSelector: "[data-ui=\"accordion\"]"
+}, b = (e, t) => {
+	if (t === "multiple" && Array.isArray(e)) return e;
+	let n = Array.isArray(e) ? e[0] : e;
+	return n === void 0 || n === v ? [] : [n];
+}, x = e({
+	borderBlockEnd: `1px solid ${f.color.border}`,
+	"&:first-of-type": { borderBlockStart: `1px solid ${f.color.border}` }
+}), S = e({
+	margin: 0,
+	font: "inherit"
+}), C = e({
+	appearance: "none",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: f.space[3],
+	inlineSize: "100%",
+	border: 0,
+	background: "transparent",
+	cursor: "pointer",
+	paddingBlock: f.space[3],
+	paddingInline: f.space[4],
+	font: "inherit",
+	fontSize: f.textSize.sm,
+	fontWeight: f.fontWeight.medium,
+	color: f.color.text,
+	textAlign: "start",
+	transitionProperty: "background-color",
+	transitionDuration: f.motion.duration.fast,
+	transitionTimingFunction: f.motion.easeStandard,
+	"&::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 },
+	"&[aria-disabled=\"true\"]": { cursor: "default" },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&:focus-visible": { ...n },
+	[r]: {
+		"&::after": {
+			forcedColorAdjust: "none",
+			borderInlineStartColor: "ButtonText"
+		},
+		"&:disabled::after": { borderInlineStartColor: "GrayText" }
+	},
+	[i]: {
+		transitionDuration: "0s",
+		"&::after": { transitionDuration: "0s" }
+	}
+}), w = e({
+	paddingBlock: f.space[3],
+	paddingInline: f.space[4],
+	color: f.color.textMuted,
+	lineHeight: f.lineHeight.relaxed,
+	"&[hidden]": { display: "none" }
+});
+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) && _(i === "multiple" ? r ? e.filter((e) => e !== n) : [...e, n] : r ? v : n);
+			},
+			canCollapse: t
+		};
+	}, [
+		g,
+		_,
+		i,
+		c
+	]), S = (e) => {
+		l?.(e), !e.defaultPrevented && o(e, e.currentTarget, "vertical", y);
+	};
+	return /* @__PURE__ */ p(m.Provider, {
+		value: x,
+		children: /* @__PURE__ */ p(a, {
+			className: u,
+			sx: f,
+			children: (t) => /* @__PURE__ */ p("div", {
+				...h,
+				ref: e,
+				"data-ui": "accordion",
+				onKeyDown: S,
+				className: t
+			})
+		})
+	});
+}
+T.displayName = "Accordion";
+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,
+		l,
+		c
+	]);
+	return /* @__PURE__ */ p(h.Provider, {
+		value: f,
+		children: /* @__PURE__ */ p(a, {
+			className: r,
+			styles: x,
+			sx: i,
+			children: (t) => /* @__PURE__ */ p("div", {
+				...o,
+				ref: e,
+				"data-ui": "accordion-item",
+				"data-state": l ? "open" : "closed",
+				"data-disabled": n ? "" : void 0,
+				className: t
+			})
+		})
+	});
+}
+E.displayName = "Accordion.Item";
+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) => {
+		t?.(e), !e.defaultPrevented && s(l);
+	};
+	return /* @__PURE__ */ p("h3", {
+		"data-ui": "accordion-heading",
+		css: S,
+		children: /* @__PURE__ */ p(a, {
+			className: r,
+			styles: C,
+			sx: i,
+			children: (t) => /* @__PURE__ */ p("button", {
+				...o,
+				ref: e,
+				type: "button",
+				id: f,
+				"data-ui": "accordion-trigger",
+				"data-state": d ? "open" : "closed",
+				"aria-expanded": d,
+				"aria-controls": m,
+				"aria-disabled": h || void 0,
+				disabled: u || n,
+				onClick: v,
+				className: t
+			})
+		})
+	});
+}
+D.displayName = "Accordion.Trigger";
+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: r,
+		children: (t) => /* @__PURE__ */ p("div", {
+			...i,
+			ref: e,
+			role: "region",
+			id: c,
+			"aria-labelledby": l,
+			hidden: !o,
+			"data-ui": "accordion-panel",
+			"data-state": o ? "open" : "closed",
+			className: t
+		})
+	});
+}
+O.displayName = "Accordion.Panel";
+var k = Object.assign(T, {
+	Item: E,
+	Trigger: D,
+	Panel: O
+});
+//#endregion
+export { k as t };

package/dist/accordion.js

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