@jfrader/ui 0.5.1 → 0.7.0

package/README.md

@@ -22,7 +22,9 @@ 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/emblem` | `Emblem` |
 | `@jfrader/ui/flex` | `Flex` |
+| `@jfrader/ui/game-card` | `GameCard` |
 | `@jfrader/ui/kbd` | `Kbd` |
 | `@jfrader/ui/menu` | `Menu` |
 | `@jfrader/ui/pagination` | `Pagination` |
@@ -52,7 +54,7 @@ Each subpath also exports its prop types. The package root re-exports everything
 import { Button, Dialog, ThemeRoot } from '@jfrader/ui';
 ```
 
-Or import per path:
+Or import each component by subpath:
 
 ```tsx
 import { Button } from '@jfrader/ui/button';
@@ -62,7 +64,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
 
@@ -83,7 +102,7 @@ Token names and values live in `packages/tokens/src/tokens.ts`.
 pnpm --filter @jfrader/tokens build && pnpm --filter @jfrader/ui build
 ```
 
-Writes ES modules to `dist/` (`dist/index.js` plus one `dist/<name>.js` per component) and declarations to `dist/types/`. `react`, `react-dom` and every package in `dependencies` stay external.
+The build writes ES modules to `dist/` (`dist/index.js` plus one `dist/<name>.js` per component) and declarations to `dist/types/`. It does not bundle `react`, `react-dom` or any package in `dependencies`.
 
 ## Publishing
 
@@ -102,9 +121,9 @@ gh workflow run publish.yml --repo jfrader/jfrader-ui --ref v0.1.1
 
 npmjs authenticates through the package's trusted publisher for `jfrader/jfrader-ui` → `.github/workflows/publish.yml`, configured on npmjs after the first version is published by hand. GitHub Packages uses the workflow's `GITHUB_TOKEN`. See the [root README](https://github.com/jfrader/jfrader-ui#publishing) for the full release setup.
 
-In the repo, `exports` point at `src/` so the workspace consumes source. `node scripts/flip-exports.mjs dist` validates and switches both packages to the publish layout; `node scripts/flip-exports.mjs src` switches both back. The UI `prepack` builds UI and flips only its manifest with `--package ui`; `postpack` restores only UI. Each flip validates only the selected package's export targets.
+In the repo, `exports` point at `src/` so workspace apps use the source. `node scripts/flip-exports.mjs dist` validates and switches both packages to the publish layout. `node scripts/flip-exports.mjs src` switches both back. The UI `prepack` builds UI and switches only its manifest with `--package ui`; `postpack` restores only UI. Each switch validates only the selected package's export targets.
 
-Build tokens before packing UI: the published UI package depends on `@jfrader/tokens`, which stays external rather than being bundled. The UI hook does not build or validate tokens; prepare its published artifacts separately. Run from the repo root:
+Build tokens before packing UI. UI depends on the published `@jfrader/tokens` package and does not bundle it. The UI hook does not build or validate tokens. Run from the repo root:
 
 ```sh
 pnpm --filter @jfrader/tokens build && pnpm --filter @jfrader/ui build
@@ -114,9 +133,11 @@ pnpm --filter @jfrader/ui pack --pack-destination /tmp/opencode
 
 Root `pnpm build` builds Storybook, not the published packages. If packing fails after `prepack`, run `node scripts/flip-exports.mjs src` from the repo root to restore workspace exports.
 
-It must contain only `dist/**`, `package.json`, `README.md` and `LICENSE`.
+The tarball must contain only `dist/**`, `package.json`, `README.md` and `LICENSE`.
+
+<a id="registry-choice--installing"></a>
 
-### Registry choice / installing
+### Registry choice
 
 npmjs needs no authentication; GitHub Packages requires authentication even for public packages. To install from GitHub Packages, add this to `.npmrc`:
 

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";