@jfrader/ui 0.6.0 → 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';
@@ -100,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
 
@@ -119,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
@@ -131,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`.
 
-### Registry choice / installing
+<a id="registry-choice--installing"></a>
+
+### 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/{avatar-group-DvP8mAE-.js → avatar-group-BlMLNw4J.js}

@@ -3,7 +3,7 @@ import { i as e } from "./css-BYJhdGh-.js";
 import { n as t } from "./media-8yrN85VT.js";
 import { t as n } from "./sx-BJXJ2xJK.js";
 import { t as r } from "./visually-hidden-DgVO3NaB.js";
-import { t as i } from "./avatar-B6idYC59.js";
+import { t as i } from "./avatar-sPxDqFiZ.js";
 import { useId as a } from "react";
 import { vars as o } from "@jfrader/tokens/vars";
 import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";

package/dist/avatar-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as AvatarGroup } from "./avatar-group-DvP8mAE-.js";
+export { t as AvatarGroup } from "./avatar-group-BlMLNw4J.js";

package/dist/avatar-sPxDqFiZ.js

@@ -0,0 +1,133 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
+import { t as r } from "./initials-DEdwNe9_.js";
+import { useState as i } from "react";
+import { vars as a } from "@jfrader/tokens/vars";
+import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
+//#region src/components/avatar/avatar.tsx
+var c = 2, l = e({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	borderRadius: a.radius.full,
+	backgroundColor: a.color.surfaceHover,
+	color: a.color.text,
+	fontWeight: a.fontWeight.medium,
+	lineHeight: 1,
+	userSelect: "none",
+	verticalAlign: "middle",
+	[t]: { outline: "1px solid CanvasText" }
+}), u = {
+	sm: e({
+		inlineSize: a.space[6],
+		blockSize: a.space[6],
+		fontSize: a.textSize.xs
+	}),
+	md: e({
+		inlineSize: a.space[8],
+		blockSize: a.space[8],
+		fontSize: a.textSize.sm
+	}),
+	lg: e({
+		inlineSize: a.space[10],
+		blockSize: a.space[10],
+		fontSize: a.textSize.md
+	})
+}, d = e({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	borderRadius: a.radius.full,
+	objectFit: "cover"
+}), f = e({
+	position: "absolute",
+	insetBlockEnd: 0,
+	insetInlineEnd: 0,
+	inlineSize: "25%",
+	blockSize: "25%",
+	"&::before": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		inlineSize: "100%",
+		blockSize: "100%",
+		boxSizing: "border-box",
+		borderRadius: a.radius.full,
+		boxShadow: `0 0 0 2px ${a.color.bg}`
+	}
+}), p = {
+	online: e({ "&::before": { backgroundColor: a.color.success } }),
+	away: e({ "&::before": {
+		border: `2px solid ${a.color.warning}`,
+		backgroundColor: "transparent"
+	} }),
+	busy: e({ "&::before": {
+		backgroundColor: a.color.danger,
+		blockSize: "30%",
+		insetBlockStart: "35%"
+	} }),
+	offline: e({ "&::before": {
+		backgroundColor: a.color.textSubtle,
+		inlineSize: "60%",
+		blockSize: "60%",
+		insetBlockStart: "20%",
+		insetInlineStart: "20%"
+	} })
+}, m = e({ [t]: {
+	"&::before": {
+		forcedColorAdjust: "none",
+		backgroundColor: "CanvasText",
+		outline: "2px solid Canvas"
+	},
+	"&[data-status=\"away\"]::before": {
+		borderColor: "CanvasText",
+		backgroundColor: "Canvas"
+	}
+} });
+function h({ ref: e, name: t, src: a, size: h = "md", status: g, statusLabel: _, slotProps: v, className: y, sx: b, ...x }) {
+	let [S, C] = i(), w = a !== void 0 && a !== "" && a !== S, T = g === void 0 ? t : `${t}, ${_ ?? g}`;
+	return /* @__PURE__ */ o(n, {
+		className: y,
+		styles: [l, u[h]],
+		sx: b,
+		children: (n) => /* @__PURE__ */ s("span", {
+			...x,
+			ref: e,
+			"data-ui": "avatar",
+			role: "img",
+			"aria-label": T,
+			className: n,
+			children: [w ? /* @__PURE__ */ o("img", {
+				src: a,
+				alt: "",
+				onError: () => C(a),
+				className: v?.image?.className,
+				css: [d, v?.image?.css]
+			}) : /* @__PURE__ */ o("span", {
+				"aria-hidden": "true",
+				className: v?.fallback?.className,
+				css: v?.fallback?.css,
+				children: r(t, c)
+			}), g !== void 0 && /* @__PURE__ */ o("span", {
+				"aria-hidden": "true",
+				"data-status": g,
+				className: v?.status?.className,
+				css: [
+					f,
+					p[g],
+					m,
+					v?.status?.css
+				]
+			})]
+		})
+	});
+}
+h.displayName = "Avatar";
+//#endregion
+export { h as t };

package/dist/avatar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Avatar } from "./avatar-B6idYC59.js";
+export { t as Avatar } from "./avatar-sPxDqFiZ.js";

package/dist/{chat-thread-DVa17BRC.js → chat-thread-DkB-WMWJ.js}

@@ -8,7 +8,7 @@ import { t as s } from "./visually-hidden-DgVO3NaB.js";
 import { t as c } from "./button-C6OV0C7J.js";
 import { t as ee } from "./part-id-D0zksy32.js";
 import { t as te } from "./card-C008OQCp.js";
-import { c as l, d as ne, g as re, h as u, i as ie, m as ae, n as d, p as oe, r as se, t as f } from "./thread-parts-DfZNz70v.js";
+import { c as l, d as ne, g as re, h as u, i as ie, m as ae, n as d, p as oe, r as se, t as f } from "./thread-parts-Cpktor6D.js";
 import { useEffect as ce, useId as le, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
 import { vars as _ } from "@jfrader/tokens/vars";
 import { Fragment as v, jsx as y, jsxs as b } from "@emotion/react/jsx-runtime";

package/dist/chat-thread.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ChatThread } from "./chat-thread-DVa17BRC.js";
+export { t as ChatThread } from "./chat-thread-DkB-WMWJ.js";

package/dist/{comment-thread-BnUHxviq.js → comment-thread-DXfqgRNI.js}

@@ -8,7 +8,7 @@ import { t as ee } from "./renderable-DzcIj1Lo.js";
 import { t as s } from "./button-C6OV0C7J.js";
 import { t as c } from "./part-id-D0zksy32.js";
 import { t as l } from "./card-C008OQCp.js";
-import { a as u, c as d, d as f, f as te, g as p, h as m, i as ne, l as re, n as ie, o as ae, p as oe, r as se, s as ce, t as le, u as ue } from "./thread-parts-DfZNz70v.js";
+import { a as u, c as d, d as f, f as te, g as p, h as m, i as ne, l as re, n as ie, o as ae, p as oe, r as se, s as ce, t as le, u as ue } from "./thread-parts-Cpktor6D.js";
 import { useEffect as de, useId as fe, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
 import { vars as y } from "@jfrader/tokens/vars";
 import { Fragment as pe, jsx as b, jsxs as x } from "@emotion/react/jsx-runtime";

package/dist/comment-thread.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as CommentThread } from "./comment-thread-BnUHxviq.js";
+export { t as CommentThread } from "./comment-thread-DXfqgRNI.js";

package/dist/emblem-DnXmpZCh.js

@@ -0,0 +1,166 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.js";
+import { t as i } from "./initials-DEdwNe9_.js";
+import { useState as a } from "react";
+import { vars as o } from "@jfrader/tokens/vars";
+import { jsx as s } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as c } from "@floating-ui/react";
+//#region src/components/emblem/emblem.tsx
+var l = 3, u = "[data-ui=\"emblem-plate\"]", d = "polygon(50% 0, 91% 16%, 84% 73%, 50% 100%, 16% 73%, 9% 16%)", f = "polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)", p = "0.12", m = "0.85", h = "@supports (color: oklch(from red l c h))", g = "@supports (color: contrast-color(red))", _ = e({
+	"--emblem-fill": o.color.accent,
+	"--emblem-highlight": "var(--emblem-fill)",
+	"--emblem-secondary": "var(--emblem-highlight)",
+	"--emblem-pattern": "none",
+	"--emblem-shadow": `drop-shadow(${o.shadow.raised})`,
+	"--emblem-brightness": "1",
+	position: "relative",
+	display: "inline-block",
+	inlineSize: "var(--emblem-size)",
+	blockSize: "var(--emblem-size)",
+	fontSize: "var(--emblem-size)",
+	verticalAlign: "middle",
+	userSelect: "none",
+	filter: "var(--emblem-shadow) brightness(var(--emblem-brightness))",
+	[h]: { "--emblem-highlight": `oklch(from var(--emblem-fill) calc(l + ${p}) calc(c * ${m}) h)` }
+}), v = e({
+	position: "absolute",
+	inset: 0,
+	display: "grid",
+	placeItems: "center",
+	overflow: "hidden",
+	backgroundImage: "var(--emblem-pattern), linear-gradient(135deg, var(--emblem-highlight), var(--emblem-fill))",
+	"&::after": {
+		content: "\"\"",
+		position: "absolute",
+		inset: "10% 12% 14%",
+		border: "1px solid color-mix(in srgb, var(--emblem-secondary) 42%, transparent)",
+		borderRadius: "inherit",
+		clipPath: "inherit"
+	}
+}), y = e({
+	position: "relative",
+	maxInlineSize: "100%",
+	overflow: "hidden",
+	fontFamily: o.font.sans,
+	fontSize: "0.5em",
+	fontWeight: o.fontWeight.semibold,
+	letterSpacing: "-0.03em",
+	lineHeight: 1,
+	whiteSpace: "nowrap"
+}), b = e({
+	color: `var(--emblem-ink, ${o.color.accentContrast})`,
+	[g]: { color: "var(--emblem-ink, contrast-color(var(--emblem-highlight)))" }
+}), x = e({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	objectFit: "cover"
+}), S = {
+	sm: e({ "--emblem-size": o.size.emblemSm }),
+	md: e({ "--emblem-size": o.size.emblemMd }),
+	lg: e({ "--emblem-size": o.size.emblemLg }),
+	xl: e({ "--emblem-size": o.size.emblemXl })
+}, C = {
+	shield: e({
+		blockSize: "calc(var(--emblem-size) * 8 / 7)",
+		[`& > ${u}`]: { clipPath: d }
+	}),
+	circle: e({ [`& > ${u}`]: { borderRadius: o.radius.full } }),
+	squircle: e({ [`& > ${u}`]: { borderRadius: "30%" } }),
+	hexagon: e({ [`& > ${u}`]: { clipPath: f } })
+}, w = {
+	none: e({ "--emblem-pattern": "none" }),
+	stripes: e({ "--emblem-pattern": "repeating-linear-gradient(to right, var(--emblem-secondary) 0 10%, transparent 10% 20%)" }),
+	hoops: e({ "--emblem-pattern": "repeating-linear-gradient(to bottom, var(--emblem-secondary) 0 12%, transparent 12% 24%)" }),
+	sash: e({
+		"--emblem-pattern": "linear-gradient(135deg, transparent 34%, var(--emblem-secondary) 34% 62%, transparent 62%)",
+		"&:dir(rtl)": { "--emblem-pattern": "linear-gradient(225deg, transparent 34%, var(--emblem-secondary) 34% 62%, transparent 62%)" }
+	})
+}, T = e({
+	cursor: "pointer",
+	textDecoration: "none",
+	transitionProperty: "filter, transform",
+	transitionDuration: o.motion.duration.fast,
+	transitionTimingFunction: o.motion.easeStandard,
+	"&:hover": {
+		"--emblem-brightness": "1.08",
+		transform: "translateY(-1px)"
+	},
+	"&:focus-visible": { ...t },
+	[n]: { transitionDuration: "0s" }
+});
+function E({ ref: e, name: t, initials: n, src: o, color: u, secondaryColor: d, inkColor: f, shape: p = "shield", size: m = "md", pattern: h = "none", slotProps: g, className: E, style: D, sx: O, render: k, ...A }) {
+	let [j, M] = a(), N = c([e]), P = o !== void 0 && o !== "" && o !== j, F = [
+		_,
+		S[m],
+		C[p],
+		w[h]
+	];
+	k !== void 0 && F.push(T);
+	let I = n ?? i(t, l), L = P ? t : `${t} — ${I}`, R = {};
+	u !== void 0 && (R["--emblem-fill"] = u), d !== void 0 && (R["--emblem-secondary"] = d), f !== void 0 && (R["--emblem-ink"] = f);
+	let z = {
+		...R,
+		...D
+	}, B = /* @__PURE__ */ s("span", {
+		"data-ui": "emblem-plate",
+		"aria-hidden": "true",
+		css: v,
+		children: P ? /* @__PURE__ */ s("img", {
+			src: o,
+			alt: "",
+			onError: () => M(o),
+			className: g?.image?.className,
+			css: [x, g?.image?.css]
+		}) : /* @__PURE__ */ s("span", {
+			"data-ui": "emblem-ink",
+			"aria-hidden": "true",
+			className: g?.monogram?.className,
+			css: [
+				y,
+				b,
+				g?.monogram?.css
+			],
+			children: I
+		})
+	});
+	return k ? /* @__PURE__ */ s(r, {
+		className: E,
+		styles: F,
+		sx: O,
+		children: (e) => k({
+			...A,
+			className: e,
+			ref: N,
+			style: z,
+			"data-ui": "emblem",
+			"data-shape": p,
+			"data-pattern": h,
+			"aria-label": L,
+			css: F,
+			children: B
+		})
+	}) : /* @__PURE__ */ s(r, {
+		className: E,
+		styles: F,
+		sx: O,
+		children: (n) => /* @__PURE__ */ s("span", {
+			...A,
+			ref: e,
+			role: "img",
+			"aria-label": t,
+			"data-ui": "emblem",
+			"data-shape": p,
+			"data-pattern": h,
+			className: n,
+			style: z,
+			children: B
+		})
+	});
+}
+E.displayName = "Emblem";
+//#endregion
+export { E as t };

package/dist/emblem.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as Emblem } from "./emblem-DnXmpZCh.js";

package/dist/game-card-Oeu74giK.js

@@ -0,0 +1,194 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./sx-BJXJ2xJK.js";
+import { t as n } from "./renderable-DzcIj1Lo.js";
+import { vars as r } from "@jfrader/tokens/vars";
+import { jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
+//#region src/components/game-card/card-frame.ts
+var o = {
+	ratio: 1.48,
+	cornerDivisor: 13
+}, s = {
+	markWidthRatio: .35,
+	watermarkInsetPercent: 3,
+	watermarkOpacity: .15,
+	contentPaddingPercent: 4
+}, c = {
+	oros: "💰",
+	copas: "🍷",
+	espadas: "🗡️",
+	bastos: "🌵",
+	hearts: "♥︎",
+	diamonds: "♦︎",
+	clubs: "♣︎",
+	spades: "♠︎"
+}, l = {
+	hearts: "red",
+	diamonds: "red",
+	clubs: "ink",
+	spades: "ink"
+}, u = {
+	1: "1",
+	2: "2",
+	3: "3",
+	4: "4",
+	5: "5",
+	6: "6",
+	7: "7",
+	8: "8",
+	9: "9",
+	10: "10",
+	11: "11",
+	12: "12",
+	A: "A",
+	J: "J",
+	Q: "Q",
+	K: "K"
+}, d = e({
+	"--game-card-width": r.size.gameCardMd,
+	position: "relative",
+	display: "block",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	inlineSize: "var(--game-card-width)",
+	blockSize: `calc(var(--game-card-width) * ${o.ratio})`,
+	borderRadius: `calc(var(--game-card-width) / ${o.cornerDivisor})`,
+	overflow: "hidden",
+	containerType: "inline-size",
+	userSelect: "none",
+	verticalAlign: "middle"
+}), f = e({
+	backgroundColor: r.color.cardFace,
+	color: r.color.cardInk,
+	border: `1px solid ${r.color.cardInk}`
+}), p = e({ opacity: .55 }), m = e({
+	position: "absolute",
+	inset: 0
+}), h = e({
+	display: "grid",
+	placeItems: "center",
+	paddingInline: `${s.contentPaddingPercent}%`,
+	fontSize: `${s.markWidthRatio * 100}cqw`,
+	fontWeight: r.fontWeight.semibold,
+	lineHeight: 1,
+	whiteSpace: "nowrap"
+}), g = e({
+	display: "grid",
+	placeItems: "center",
+	"& > img, & > svg": {
+		inlineSize: "100%",
+		blockSize: "100%",
+		objectFit: "cover"
+	}
+}), _ = e({
+	display: "grid",
+	gridAutoFlow: "column",
+	alignItems: "center",
+	gap: "0.1em"
+}), v = e({
+	position: "absolute",
+	fontSize: `${s.markWidthRatio * 100}cqw`,
+	lineHeight: 1,
+	opacity: s.watermarkOpacity
+}), y = e({
+	insetBlockStart: `${s.watermarkInsetPercent}%`,
+	insetInlineEnd: 0
+}), b = e({
+	insetBlockEnd: `${s.watermarkInsetPercent}%`,
+	insetInlineStart: 0
+}), x = {
+	red: e({ color: r.color.cardRed }),
+	ink: e({ color: r.color.cardInk })
+}, S = e({
+	backgroundColor: r.color.surfaceRaised,
+	backgroundImage: `repeating-linear-gradient(45deg, ${r.color.surfaceHover} 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, ${r.color.surfaceHover} 0 2px, transparent 2px 6px)`,
+	"&::after": {
+		content: "\"\"",
+		position: "absolute",
+		inset: "8%",
+		border: `1px solid ${r.color.borderControl}`,
+		borderRadius: "inherit"
+	}
+}), C = {
+	sm: e({ "--game-card-width": r.size.gameCardSm }),
+	md: e({ "--game-card-width": r.size.gameCardMd }),
+	lg: e({ "--game-card-width": r.size.gameCardLg })
+};
+function w({ ref: e, label: r, value: a, face: o, size: s = "md", rankLabel: c, dimmed: l = !1, children: u, slotProps: h, className: _, sx: v, ...y }) {
+	let b = o ?? (a === void 0 ? "back" : "emoji"), x = b === "back" || a === void 0;
+	return /* @__PURE__ */ i(t, {
+		className: _,
+		styles: [
+			d,
+			f,
+			C[s],
+			l && p
+		],
+		sx: v,
+		children: (t) => /* @__PURE__ */ i("div", {
+			...y,
+			ref: e,
+			role: "img",
+			"aria-label": r,
+			"data-ui": "game-card",
+			"data-face": b,
+			"data-deck": x ? void 0 : a.deck,
+			className: t,
+			children: x ? /* @__PURE__ */ i("span", {
+				"data-ui": "game-card-back",
+				"aria-hidden": "true",
+				className: h?.back?.className,
+				css: [
+					m,
+					S,
+					h?.back?.css
+				]
+			}) : n(u) ? /* @__PURE__ */ i("span", {
+				"data-ui": "game-card-art",
+				"aria-hidden": "true",
+				className: h?.face?.className,
+				css: [
+					m,
+					g,
+					h?.face?.css
+				],
+				children: u
+			}) : /* @__PURE__ */ i(T, {
+				value: a,
+				rankLabel: c,
+				slotProps: h
+			})
+		})
+	});
+}
+w.displayName = "GameCard";
+function T({ value: e, rankLabel: t, slotProps: n }) {
+	let r = c[e.suit], o = t ?? u[e.rank], s = l[e.suit];
+	return /* @__PURE__ */ a("span", {
+		"data-ui": "game-card-print",
+		"aria-hidden": "true",
+		className: n?.face?.className,
+		css: [
+			m,
+			h,
+			s !== void 0 && x[s],
+			n?.face?.css
+		],
+		children: [
+			/* @__PURE__ */ i("span", {
+				css: [v, y],
+				children: r
+			}),
+			/* @__PURE__ */ a("span", {
+				css: _,
+				children: [/* @__PURE__ */ i("span", { children: o }), /* @__PURE__ */ i("span", { children: r })]
+			}),
+			/* @__PURE__ */ i("span", {
+				css: [v, b],
+				children: r
+			})
+		]
+	});
+}
+//#endregion
+export { l as i, u as n, c as r, w as t };

package/dist/game-card.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as GameCard, n as RANK_MARKS, r as SUIT_GLYPHS, i as SUIT_INK } from "./game-card-Oeu74giK.js";

package/dist/{hover-card-DN1EAlQA.js → hover-card-Dgu2CwMD.js}

@@ -4,7 +4,7 @@ import { r as n } from "./media-8yrN85VT.js";
 import { t as r } from "./sx-BJXJ2xJK.js";
 import { t as i } from "./use-controlled-state-DpeVQZNR.js";
 import { t as a } from "./renderable-DzcIj1Lo.js";
-import { t as o } from "./avatar-B6idYC59.js";
+import { t as o } from "./avatar-sPxDqFiZ.js";
 import { n as s } from "./surface-C69kwSuk.js";
 import { t as c } from "./trigger-style-CtOrdPk4.js";
 import { a as l, i as u } from "./overlay-layer-qEbpEtb8.js";

package/dist/hover-card.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as HoverCard } from "./hover-card-DN1EAlQA.js";
+export { t as HoverCard } from "./hover-card-Dgu2CwMD.js";