@jfrader/ui 0.7.1 → 0.7.3

package/README.md

@@ -2,7 +2,15 @@
 
 React components styled with Emotion and themed through the CSS custom properties from `@jfrader/tokens`.
 
-## Components
+## Start here
+
+- [Getting started](https://github.com/jfrader/jfrader-ui/blob/master/docs/consuming-jfrader-ui.md): installation and complete React / Vite and Next.js examples.
+- [Theming](https://github.com/jfrader/jfrader-ui/blob/master/docs/theming.md): light/dark palettes, brand accents and token overrides.
+- [Styling](https://github.com/jfrader/jfrader-ui/blob/master/docs/styling.md): customize instances, public parts and reusable wrappers.
+
+Requires React 19 and the `@jfrader/tokens/tokens.css` stylesheet. The same guides appear under **Foundations** in Storybook.
+
+## Component subpath examples
 
 | Subpath | Exports |
 | --- | --- |
@@ -22,6 +30,7 @@ React components styled with Emotion and themed through the CSS custom propertie
 | `@jfrader/ui/date-picker` | `DatePicker` |
 | `@jfrader/ui/dialog` | `Dialog` |
 | `@jfrader/ui/divider` | `Divider` |
+| `@jfrader/ui/editable-details` | `EditableDetails` |
 | `@jfrader/ui/emblem` | `Emblem` |
 | `@jfrader/ui/flex` | `Flex` |
 | `@jfrader/ui/flip-game-card` | `FlipGameCard` |
@@ -47,7 +56,7 @@ React components styled with Emotion and themed through the CSS custom propertie
 | `@jfrader/ui/toggle-group` | `ToggleGroup` |
 | `@jfrader/ui/tooltip` | `Tooltip` |
 
-Each subpath also exports its prop types. The package root re-exports everything.
+Each component subpath also exports its prop types. The package root re-exports component APIs; optional integrations such as `@jfrader/ui/next` and `@jfrader/ui/code-block/shiki` remain separate imports.
 
 ## Usage
 
@@ -67,35 +76,11 @@ import { ThemeRoot } from '@jfrader/ui/theme-root';
 
 ## 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.
+Use the `EmotionRegistry` adapter from `@jfrader/ui/next`. See the complete [App Router layout](https://github.com/jfrader/jfrader-ui/blob/master/docs/consuming-jfrader-ui.md#nextjs-app-router), including dependencies and Server Component boundaries.
 
 ## Theming
 
-Components read CSS custom properties defined by `@jfrader/tokens`. Load the stylesheet once and wrap the app in `ThemeRoot`:
-
-```tsx
-import '@jfrader/tokens/tokens.css';
-import { ThemeRoot } from '@jfrader/ui/theme-root';
-
-<ThemeRoot theme="light">{app}</ThemeRoot>;
-```
-
-Token names and values live in `packages/tokens/src/tokens.ts`.
+Set `data-theme` on `<html>` for the page, or use `ThemeRoot` for a subtree. `ThemeProvider` supplies styling callbacks with token references; it does not choose light or dark. See [Theming](https://github.com/jfrader/jfrader-ui/blob/master/docs/theming.md) for complete recipes and portal behavior.
 
 ## Build
 

package/dist/editable-details-BndqEnYF.js

@@ -0,0 +1,365 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./disclosure-caret-C5T3fcl6.js";
+import { n, t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
+import { t as o } from "./sx-BJXJ2xJK.js";
+import { t as s } from "./use-controlled-state-DpeVQZNR.js";
+import { createContext as c, useCallback as l, useContext as u, useId as d, useLayoutEffect as f, useMemo as p, useRef as m } from "react";
+import { vars as h } from "@jfrader/tokens/vars";
+import { jsx as g, jsxs as _ } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as v } from "@floating-ui/react";
+//#region src/components/editable-details/editable-details.tsx
+var y = { edit: "Edit" }, b = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+	6: "h6"
+}, x = c(y), S = c({
+	visible: !0,
+	triggers: []
+}), C = e({
+	label: "editable-details",
+	display: "grid",
+	gap: h.space[6],
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	fontFamily: h.font.sans,
+	color: h.color.text,
+	lineHeight: h.lineHeight.base,
+	textAlign: "start",
+	overflowWrap: "anywhere"
+}), w = e({ minInlineSize: 0 }), T = e({
+	margin: 0,
+	font: "inherit"
+}), E = e({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: h.space[3],
+	inlineSize: "100%",
+	minInlineSize: 0,
+	minBlockSize: h.space[10],
+	paddingBlock: h.space[2],
+	paddingInlineStart: 0,
+	paddingInlineEnd: h.space[2],
+	border: 0,
+	background: "transparent",
+	color: "inherit",
+	font: "inherit",
+	fontWeight: h.fontWeight.semibold,
+	textAlign: "start",
+	overflowWrap: "anywhere",
+	cursor: "pointer",
+	"&::after": t,
+	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
+	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
+	"&:hover": { backgroundColor: h.color.surfaceHover },
+	"&:focus-visible": r,
+	[a]: { "&::after": { transitionDuration: "0s" } },
+	[i]: { "&::after": {
+		forcedColorAdjust: "none",
+		borderInlineStartColor: "ButtonText"
+	} }
+}), D = e({
+	display: "grid",
+	gap: h.space[4],
+	minInlineSize: 0,
+	paddingBlockStart: h.space[2],
+	"&[hidden]": { display: "none" }
+}), O = e({
+	margin: 0,
+	minInlineSize: 0
+}), k = e({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: h.space[2],
+	minInlineSize: 0,
+	paddingBlock: h.space[3],
+	"&:where(:not(:last-child))": { borderBlockEnd: `1px solid ${h.color.border}` }
+}), A = e({
+	flex: "1 1 10rem",
+	minInlineSize: 0,
+	color: h.color.textMuted,
+	fontWeight: h.fontWeight.regular
+}), j = e({
+	flex: "2 1 16rem",
+	minInlineSize: 0,
+	margin: 0
+}), M = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "start",
+	gap: h.space[2],
+	minInlineSize: 0
+}), N = e({
+	flex: "1 1 8rem",
+	minInlineSize: 0
+}), P = e({
+	minBlockSize: h.space[8],
+	paddingInline: h.space[2],
+	paddingBlock: h.space[1],
+	border: `1px solid ${h.color.borderControl}`,
+	borderRadius: h.radius.sm,
+	background: "transparent",
+	color: h.color.text,
+	font: "inherit",
+	cursor: "pointer",
+	"&:hover": { backgroundColor: h.color.surfaceHover },
+	"&:focus-visible": n,
+	[i]: {
+		borderColor: "ButtonText",
+		color: "ButtonText"
+	}
+}), F = e({
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	"&:focus": r
+});
+function I(e) {
+	return e !== null && e.isConnected && e.getClientRects().length > 0 && !e.closest("[hidden], [inert]") && e.ownerDocument.defaultView?.getComputedStyle(e).visibility !== "hidden";
+}
+function L(e) {
+	for (let t of e) if (I(t.current)) {
+		t.current.focus();
+		return;
+	}
+}
+function R(e, t = !1) {
+	let n = m(null), r = m(!1);
+	return f(() => {
+		let i = e.current;
+		if (!i) return;
+		let a = i.ownerDocument;
+		n.current = a.activeElement;
+		let o = () => {
+			n.current = a.activeElement, (t || !i.contains(a.activeElement)) && (r.current = !1);
+		}, s = (e) => {
+			!e.defaultPrevented && (t || !e.composedPath().includes(i)) && (r.current = !1), !e.defaultPrevented && !e.composedPath().includes(i) && (n.current = null);
+		};
+		return a.addEventListener("focusin", o), a.addEventListener("mousedown", s), () => {
+			a.removeEventListener("focusin", o), a.removeEventListener("mousedown", s);
+		};
+	}, [e, t]), {
+		last: n,
+		intent: r
+	};
+}
+function z(e, t) {
+	let n = e.ownerDocument.activeElement;
+	return e.contains(n) || n === e.ownerDocument.body && t !== null && e.contains(t);
+}
+function B({ messages: e, className: t, sx: n, ...r }) {
+	let i = u(x), a = p(() => ({
+		...i,
+		...e
+	}), [i, e]);
+	return /* @__PURE__ */ g(x.Provider, {
+		value: a,
+		children: /* @__PURE__ */ g(o, {
+			className: t,
+			styles: C,
+			sx: n,
+			children: (e) => /* @__PURE__ */ g("div", {
+				...r,
+				className: e,
+				"data-ui": "editable-details"
+			})
+		})
+	});
+}
+B.displayName = "EditableDetails";
+function V({ ref: e, title: t, headingLevel: n = 3, open: r, defaultOpen: i = !1, onOpenChange: a, triggerRef: c, slotProps: l, children: h, className: y, sx: x, ...C }) {
+	let [O, k] = s(r, i, a), A = u(S), j = m(null), M = v([j, c]), N = m(null), P = R(N), F = d(), I = b[n], B = A.visible && !!O, V = p(() => [j, ...A.triggers], [A.triggers]), H = p(() => ({
+		visible: B,
+		triggers: V
+	}), [B, V]);
+	return f(() => {
+		let e = N.current;
+		!B && e && z(e, P.last.current) && L(H.triggers);
+	}, [
+		B,
+		H,
+		P.last
+	]), /* @__PURE__ */ g(o, {
+		className: y,
+		styles: w,
+		sx: x,
+		children: (n) => /* @__PURE__ */ _("section", {
+			...C,
+			ref: e,
+			className: n,
+			"data-ui": "editable-details-section",
+			"data-state": O ? "open" : "closed",
+			children: [/* @__PURE__ */ g(I, {
+				css: [T, l?.heading?.css],
+				className: l?.heading?.className,
+				children: /* @__PURE__ */ g("button", {
+					ref: M,
+					type: "button",
+					id: `${F}-trigger`,
+					"aria-expanded": !!O,
+					"aria-controls": `${F}-panel`,
+					onClick: () => k(!O),
+					css: [E, l?.trigger?.css],
+					className: l?.trigger?.className,
+					"data-ui": "editable-details-section-trigger",
+					children: t
+				})
+			}), /* @__PURE__ */ g(S.Provider, {
+				value: H,
+				children: /* @__PURE__ */ g("div", {
+					ref: N,
+					id: `${F}-panel`,
+					hidden: !O,
+					css: [D, l?.panel?.css],
+					className: l?.panel?.className,
+					"data-ui": "editable-details-section-panel",
+					children: h
+				})
+			})]
+		})
+	});
+}
+V.displayName = "EditableDetails.Section";
+function H({ className: e, sx: t, ...n }) {
+	return /* @__PURE__ */ g(o, {
+		className: e,
+		styles: O,
+		sx: t,
+		children: (e) => /* @__PURE__ */ g("dl", {
+			...n,
+			className: e,
+			"data-ui": "editable-details-list"
+		})
+	});
+}
+H.displayName = "EditableDetails.List";
+function U({ renderEditor: e, labelId: t, hostId: n, part: r, edit: i, requestClose: a, focusIntent: o, acceptedClose: s }) {
+	let c = u(S), d = m(null), p = m(null), h = R(d), _ = m(!1), v = m(!1), y = h.intent, b = l((e) => (p.current = e, () => {
+		p.current === e && (p.current = null);
+	}), []), x = l(() => {
+		if (!_.current) return;
+		v.current = !0;
+		let e = d.current;
+		y.current = !!e && z(e, h.last.current), a();
+	}, [
+		a,
+		h.last,
+		y
+	]);
+	return f(() => {
+		_.current = !0;
+		let e = d.current;
+		return () => {
+			if (_.current = !1, !e) return;
+			let t = z(e, h.last.current);
+			queueMicrotask(() => {
+				!e.isConnected && t && e.ownerDocument.activeElement === e.ownerDocument.body && (s.current && v.current && !y.current || (y.current && I(i.current) ? i.current.focus() : L(c.triggers)));
+			});
+		};
+	}, [
+		s,
+		i,
+		h.last,
+		y,
+		c.triggers
+	]), f(() => {
+		if (!o.current) return;
+		o.current = !1;
+		let e = d.current;
+		e && c.visible && (I(p.current) && (p.current.focus(), e.ownerDocument.activeElement === p.current) || e.focus());
+	}, [o, c.visible]), /* @__PURE__ */ g("div", {
+		ref: d,
+		id: n,
+		role: "group",
+		"aria-labelledby": t,
+		tabIndex: -1,
+		className: r?.className,
+		css: [F, r?.css],
+		"data-ui": "editable-details-editor",
+		children: e({
+			initialFocusRef: b,
+			complete: x,
+			cancel: x,
+			visible: c.visible
+		})
+	});
+}
+function W({ ref: e, label: t, renderEditor: n, open: r, defaultOpen: i = !1, onOpenChange: a, children: c, slotProps: p, className: h, sx: y, ...b }) {
+	let [C, w, T] = s(r, n ? i : !1, a), E = u(S), D = u(x), O = m(null), F = m(null), I = R(O, !0), B = m(!!n), V = m(!1);
+	V.current = !C && !!n;
+	let H = d();
+	f(() => {
+		B.current && !n && (I.intent.current = !1, T()), B.current = !!n;
+	}, [
+		n,
+		T,
+		I.intent
+	]);
+	let W = l((e) => (O.current = e, () => {
+		e && z(e, I.last.current) && queueMicrotask(() => {
+			!e.isConnected && e.ownerDocument.activeElement === e.ownerDocument.body && L(E.triggers);
+		}), O.current = null;
+	}), [I.last, E.triggers]), G = v([W, e]), K = l(() => w(!1), [w]), q = !!C && !!n;
+	return /* @__PURE__ */ g(o, {
+		className: h,
+		styles: k,
+		sx: y,
+		children: (e) => /* @__PURE__ */ _("div", {
+			...b,
+			ref: G,
+			className: e,
+			"data-ui": "editable-details-item",
+			"data-state": q ? "open" : "closed",
+			children: [/* @__PURE__ */ g("dt", {
+				id: `${H}-label`,
+				css: [A, p?.label?.css],
+				className: p?.label?.className,
+				children: t
+			}), /* @__PURE__ */ g("dd", {
+				css: [j, p?.description?.css],
+				className: p?.description?.className,
+				children: q ? /* @__PURE__ */ g(U, {
+					renderEditor: n,
+					labelId: `${H}-label`,
+					hostId: `${H}-editor`,
+					part: p?.editor,
+					edit: F,
+					requestClose: K,
+					focusIntent: I.intent,
+					acceptedClose: V
+				}) : /* @__PURE__ */ _("div", {
+					css: [M, p?.summary?.css],
+					className: p?.summary?.className,
+					children: [/* @__PURE__ */ g("div", {
+						css: N,
+						children: c
+					}), n && /* @__PURE__ */ g("button", {
+						ref: F,
+						type: "button",
+						id: `${H}-edit`,
+						"aria-labelledby": `${H}-edit ${H}-label`,
+						onClick: () => {
+							I.intent.current = !0, w(!0);
+						},
+						css: [P, p?.edit?.css],
+						className: p?.edit?.className,
+						"data-ui": "editable-details-edit",
+						children: D.edit
+					})]
+				})
+			})]
+		})
+	});
+}
+W.displayName = "EditableDetails.Item";
+var G = Object.assign(B, {
+	Section: V,
+	List: H,
+	Item: W
+});
+//#endregion
+export { G as t };

package/dist/editable-details.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as EditableDetails } from "./editable-details-BndqEnYF.js";

package/dist/{flip-game-card-xmcR_QSq.js → flip-game-card-BOJIhBrh.js}

@@ -22,7 +22,7 @@ var d = e({
 }, p = e({ "& > [data-ui=\"flip-game-card-rotator\"]": {
 	transform: "none",
 	transition: "none",
-	"& > [data-ui=\"flip-game-card-back\"]": { transform: "none" }
+	"& > [aria-hidden=\"true\"]": { visibility: "hidden" }
 } }), m = e({
 	"&[data-reduced-motion=\"true\"]": p,
 	[t]: p
@@ -32,18 +32,21 @@ var d = e({
 	blockSize: "100%",
 	transformStyle: "preserve-3d",
 	transform: "rotateY(0deg)",
-	transition: `transform ${o.motion.duration.slow} ${o.motion.easeStandard}`,
+	transition: `transform ${o.motion.duration.cardFlip} ${o.motion.easeCardFlip}`,
 	"&[data-state=\"back\"]": { transform: "rotateY(180deg)" }
 }), g = e({
 	position: "absolute",
 	inset: 0,
 	backfaceVisibility: "hidden",
-	"&[aria-hidden=\"true\"]": { visibility: "hidden" },
 	"& > [data-ui=\"game-card\"]": {
 		inlineSize: "100%",
 		blockSize: "100%"
 	}
-}), _ = e({ transform: "rotateY(180deg)" });
+}), _ = e({
+	transform: "rotateY(180deg)",
+	"&[data-reduced-motion=\"true\"]": { transform: "none" },
+	[t]: { transform: "none" }
+});
 function v({ ref: e, flipped: t, front: r, back: o, size: p = "md", slotProps: v, className: y, sx: b, ...x }) {
 	let S = u(), [C, w] = a(!1);
 	i(() => w(!0), []);
@@ -80,6 +83,7 @@ function v({ ref: e, flipped: t, front: r, back: o, size: p = "md", slotProps: v
 						children: r
 					}), /* @__PURE__ */ s("div", {
 						"data-ui": "flip-game-card-back",
+						"data-reduced-motion": C && S || void 0,
 						inert: !t,
 						"aria-hidden": !t || void 0,
 						className: v?.back?.className,

package/dist/flip-game-card.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as FlipGameCard } from "./flip-game-card-xmcR_QSq.js";
+export { t as FlipGameCard } from "./flip-game-card-BOJIhBrh.js";