@jfrader/ui 0.5.1 → 0.7.0

package/dist/{filter-toolbar-Cy5Hqur-.js → filter-toolbar-QRnC4S_H.js}

@@ -1,10 +1,11 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { 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 "./button-NLY0h6EJ.js";
+import { t as o } from "./button-C6OV0C7J.js";
 import { createContext as s, useContext as c, useLayoutEffect as l, useMemo as u, useRef as d } from "react";
 import { vars as f } from "@jfrader/tokens/vars";
 import { jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
@@ -58,8 +59,8 @@ var T = e({
 	color: f.color.text,
 	fontFamily: f.font.sans,
 	fontSize: f.textSize.sm,
-	"&:focus": n,
-	[r]: {
+	"&:focus": t,
+	[n]: {
 		borderColor: "CanvasText",
 		backgroundColor: "Canvas",
 		color: "CanvasText"
@@ -79,7 +80,7 @@ var T = e({
 	borderRadius: f.radius.full,
 	backgroundColor: f.color.surfaceHover,
 	color: f.color.text,
-	[r]: {
+	[n]: {
 		borderColor: "CanvasText",
 		backgroundColor: "Canvas",
 		color: "CanvasText"
@@ -97,7 +98,7 @@ var T = e({
 	padding: 0,
 	borderRadius: f.radius.full,
 	color: f.color.text,
-	[r]: { borderColor: "ButtonText" }
+	[n]: { borderColor: "ButtonText" }
 }), N = e({
 	alignSelf: "flex-start",
 	maxInlineSize: "100%",
@@ -107,7 +108,7 @@ var T = e({
 	whiteSpace: "normal",
 	overflowWrap: "anywhere",
 	borderColor: f.color.borderControl,
-	[r]: { borderColor: "ButtonText" }
+	[n]: { borderColor: "ButtonText" }
 }), P = e({
 	margin: 0,
 	minInlineSize: 0,
@@ -116,8 +117,8 @@ var T = e({
 	fontSize: f.textSize.sm,
 	lineHeight: f.lineHeight.base
 });
-function F({ ref: e, value: n, defaultValue: r = g, onValueChange: a, disabled: o = !1, label: s = "Filters", messages: c, className: f, sx: m, children: y, "aria-label": b, "aria-labelledby": w, tabIndex: T = -1, ...D }) {
-	let [O = g, k] = i(n, r, a), A = u(() => x(O), [O]), j = d(null), M = h([j, e]), N = d(null), P = u(() => ({
+function F({ ref: e, value: t, defaultValue: n = g, onValueChange: a, disabled: o = !1, label: s = "Filters", messages: c, className: f, sx: m, children: y, "aria-label": b, "aria-labelledby": w, tabIndex: T = -1, ...D }) {
+	let [O = g, k] = i(t, n, a), A = u(() => x(O), [O]), j = d(null), M = h([j, e]), N = d(null), P = u(() => ({
 		...v,
 		...c
 	}), [c]), F = u(() => {
@@ -166,7 +167,7 @@ function F({ ref: e, value: n, defaultValue: r = g, onValueChange: a, disabled:
 		(a ?? o ?? t).focus();
 	}, [A]), /* @__PURE__ */ p(C.Provider, {
 		value: F,
-		children: /* @__PURE__ */ p(t, {
+		children: /* @__PURE__ */ p(r, {
 			className: f,
 			styles: E,
 			sx: m,
@@ -186,12 +187,12 @@ function F({ ref: e, value: n, defaultValue: r = g, onValueChange: a, disabled:
 	});
 }
 F.displayName = "FilterToolbar";
-function I({ children: e, className: n, sx: r, ...i }) {
+function I({ children: e, className: t, sx: n, ...i }) {
 	let { value: a, disabled: o, onValueChange: s } = w("Controls");
-	return /* @__PURE__ */ p(t, {
-		className: n,
+	return /* @__PURE__ */ p(r, {
+		className: t,
 		styles: T,
-		sx: r,
+		sx: n,
 		children: (t) => /* @__PURE__ */ p("div", {
 			...i,
 			"data-ui": "filter-toolbar-controls",
@@ -205,29 +206,29 @@ function I({ children: e, className: n, sx: r, ...i }) {
 	});
 }
 I.displayName = "FilterToolbar.Controls";
-function L({ empty: e, slotProps: n, className: r, sx: i, ...s }) {
+function L({ empty: e, slotProps: t, className: n, sx: i, ...s }) {
 	let { value: c, disabled: l, messages: u, remove: d } = w("ActiveFilters");
-	return /* @__PURE__ */ p(t, {
-		className: r,
+	return /* @__PURE__ */ p(r, {
+		className: n,
 		styles: T,
 		sx: i,
-		children: (t) => /* @__PURE__ */ p("div", {
+		children: (n) => /* @__PURE__ */ p("div", {
 			...s,
 			"data-ui": "filter-toolbar-active-filters",
-			className: t,
+			className: n,
 			children: c.length > 0 ? /* @__PURE__ */ p("ul", {
-				className: n?.list?.className,
+				className: t?.list?.className,
 				css: [
 					T,
 					D,
-					n?.list?.css
+					t?.list?.css
 				],
 				children: c.map((e) => /* @__PURE__ */ m("li", {
-					className: n?.chip?.className,
-					css: [O, n?.chip?.css],
+					className: t?.chip?.className,
+					css: [O, t?.chip?.css],
 					children: [/* @__PURE__ */ m("span", {
-						className: n?.label?.className,
-						css: [k, n?.label?.css],
+						className: t?.label?.className,
+						css: [k, t?.label?.css],
 						children: [/* @__PURE__ */ m("span", {
 							css: A,
 							children: [e.label, ": "]
@@ -242,8 +243,8 @@ function L({ empty: e, slotProps: n, className: r, sx: i, ...s }) {
 						"aria-label": u.remove(e),
 						"data-ui": "filter-toolbar-remove",
 						"data-filter-id": e.id,
-						className: n?.remove?.className,
-						css: [M, n?.remove?.css],
+						className: t?.remove?.className,
+						css: [M, t?.remove?.css],
 						onClick: (t) => d(e, t.currentTarget),
 						render: (e) => /* @__PURE__ */ p("button", {
 							...e,
@@ -284,10 +285,10 @@ function R({ children: e, onClick: t, disabled: n = !1, css: r, ...i }) {
 	});
 }
 R.displayName = "FilterToolbar.Clear";
-function z({ count: e, locale: n, formatCount: r = b, loading: i = !1, loadingLabel: a = "Loading results", unknownLabel: o = "Results unavailable", className: s, sx: c, ...l }) {
+function z({ count: e, locale: t, formatCount: n = b, loading: i = !1, loadingLabel: a = "Loading results", unknownLabel: o = "Results unavailable", className: s, sx: c, ...l }) {
 	w("ResultCount");
-	let u = e !== null && Number.isFinite(e) && Number.isInteger(e) && e >= 0 ? r(e, new Intl.NumberFormat(n).format(e)) : o;
-	return /* @__PURE__ */ p(t, {
+	let u = e !== null && Number.isFinite(e) && Number.isInteger(e) && e >= 0 ? n(e, new Intl.NumberFormat(t).format(e)) : o;
+	return /* @__PURE__ */ p(r, {
 		className: s,
 		styles: P,
 		sx: c,

package/dist/filter-toolbar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as FilterToolbar } from "./filter-toolbar-Cy5Hqur-.js";
+export { t as FilterToolbar } from "./filter-toolbar-QRnC4S_H.js";

package/dist/{flex-Dh-_J5-U.js → flex-CS7eMRcK.js}

@@ -1,6 +1,6 @@
 'use client';
-import { t as e } from "./sx-Dx9JUKp5.js";
-import { t } from "./layout-style-Cbd1Vilw.js";
+import { t as e } from "./sx-BJXJ2xJK.js";
+import { t } from "./layout-style-BE0gSqrH.js";
 import { jsx as n } from "@emotion/react/jsx-runtime";
 //#region src/components/flex/flex.tsx
 function r({ ref: r, direction: i, wrap: a, inline: o, align: s, justify: c, gap: l, className: u, sx: d, ...f }) {

package/dist/flex.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Flex } from "./flex-Dh-_J5-U.js";
+export { t as Flex } from "./flex-CS7eMRcK.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/{hold-to-confirm-DjB2EVjM.js → hold-to-confirm-CVBA0wNT.js}

@@ -1,12 +1,13 @@
 'use client';
-import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
-import { n as r } from "./focus-ring-BK5W5_NY.js";
-import { n as i, r as a } from "./media-8yrN85VT.js";
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { 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 { t as o } from "./use-latest-callback-cj1OOQL6.js";
 import { t as s } from "./use-controlled-state-DpeVQZNR.js";
-import { t as c } from "./visually-hidden-BJdvqqvn.js";
+import { t as c } from "./visually-hidden-DgVO3NaB.js";
 import { t as l } from "./renderable-DzcIj1Lo.js";
-import { t as u } from "./icon-wrapper-stN8sD7R.js";
+import { t as u } from "./icon-wrapper-C-zMD0uL.js";
 import { useEffect as d, useId as f, useRef as p, useState as m } from "react";
 import { vars as h } from "@jfrader/tokens/vars";
 import { Fragment as g, jsx as _, jsxs as v } from "@emotion/react/jsx-runtime";
@@ -31,7 +32,7 @@ var te = 1200, y = 24, ne = 1e3, b = 2 ** 31 - 1, x = "--hold-progress", re = t(
 	touchAction: "none",
 	userSelect: "none",
 	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": { backgroundColor: h.color.surfaceHover },
-	"&:focus-visible": r,
+	"&:focus-visible": n,
 	"&:disabled": {
 		cursor: "not-allowed",
 		opacity: .55
@@ -45,7 +46,7 @@ var te = 1200, y = 24, ne = 1e3, b = 2 ** 31 - 1, x = "--hold-progress", re = t(
 		visibility: "visible",
 		clipPath: "inset(0)"
 	},
-	[i]: {
+	[r]: {
 		borderColor: "ButtonText",
 		"&:focus-visible": { outlineColor: "Highlight" },
 		"&[data-state=\"holding\"]": { borderStyle: "double" }
@@ -93,7 +94,7 @@ var te = 1200, y = 24, ne = 1e3, b = 2 ** 31 - 1, x = "--hold-progress", re = t(
 	to: { opacity: 1 }
 }), w = t({
 	animation: `${C} ${h.motion.duration.fast} ${h.motion.easeStandard}`,
-	[a]: { animation: "none" }
+	[i]: { animation: "none" }
 }), oe = t({
 	position: "absolute",
 	inset: 0,
@@ -106,13 +107,13 @@ var te = 1200, y = 24, ne = 1e3, b = 2 ** 31 - 1, x = "--hold-progress", re = t(
 	transitionDuration: h.motion.duration.base,
 	transitionTimingFunction: h.motion.easeStandard,
 	"&:dir(rtl)": { clipPath: "inset(0 0 0 calc(100% - var(--hold-progress, 0%)))" },
-	[a]: { transitionDuration: "0s" },
-	[i]: {
+	[i]: { transitionDuration: "0s" },
+	[r]: {
 		forcedColorAdjust: "none",
 		backgroundColor: "Highlight",
 		color: "HighlightText"
 	}
-}), se = t([c, { [i]: { "&[data-holding=\"true\"]": {
+}), se = t([c, { [r]: { "&[data-holding=\"true\"]": {
 	position: "static",
 	inlineSize: "auto",
 	blockSize: "auto",
@@ -122,18 +123,18 @@ var te = 1200, y = 24, ne = 1e3, b = 2 ** 31 - 1, x = "--hold-progress", re = t(
 	whiteSpace: "normal",
 	marginInlineStart: h.space[2]
 } } }]);
-function T({ ref: e, label: t, confirmedLabel: r, confirmationAnnouncement: i, getHoldDescription: a, locale: h, duration: C = te, value: T, defaultValue: ce = !1, onValueChange: le, onConfirm: ue, onHoldChange: de, tone: fe = "accent", size: pe = "md", icon: me, confirmedIcon: he = "✓", disabled: E = !1, slotProps: D, className: ge, sx: _e, onPointerDown: ve, onPointerMove: ye, onPointerUp: O, onPointerCancel: k, onLostPointerCapture: A, onKeyDown: j, onKeyUp: M, onBlur: N, onClick: P, onContextMenu: be, "aria-describedby": F, ...I }) {
+function T({ ref: e, label: t, confirmedLabel: n, confirmationAnnouncement: r, getHoldDescription: i, locale: h, duration: C = te, value: T, defaultValue: ce = !1, onValueChange: le, onConfirm: ue, onHoldChange: de, tone: fe = "accent", size: pe = "md", icon: me, confirmedIcon: he = "✓", disabled: E = !1, slotProps: D, className: ge, sx: _e, onPointerDown: ve, onPointerMove: ye, onPointerUp: O, onPointerCancel: k, onLostPointerCapture: A, onKeyDown: j, onKeyUp: M, onBlur: N, onClick: P, onContextMenu: be, "aria-describedby": F, ...I }) {
 	if (!Number.isFinite(C) || C <= 0) throw Error("HoldToConfirm: duration must be a finite positive number of milliseconds.");
 	let L = `${f()}-hint`, [R, xe] = s(T, ce, le), [z, B] = m(!1), [Se, V] = m(""), H = p(!1), U = p(null), Ce = ee([e]), W = o(de), we = o(ue), G = I["aria-disabled"] === !0 || I["aria-disabled"] === "true", K = (e = !0) => {
 		let t = U.current;
 		t && (U.current = null, t.stop(), t.button.style.setProperty(x, "0%"), B(!1), !t.completed && e && W(!1), "pointerId" in t.origin && t.button.hasPointerCapture(t.origin.pointerId) && t.button.releasePointerCapture(t.origin.pointerId));
 	}, q = o(K);
 	d(() => {
-		H.current && (H.current = !1, R && V(i)), R || V("");
+		H.current && (H.current = !1, R && V(r)), R || V("");
 	}, [
 		R,
 		z,
-		i
+		r
 	]), d(() => {
 		q();
 	}, [
@@ -181,7 +182,7 @@ function T({ ref: e, label: t, confirmedLabel: r, confirmationAnnouncement: i, g
 	}, X = (e) => {
 		let t = U.current?.origin;
 		t && "pointerId" in t && t.pointerId === e && K();
-	}, Z = R ? r : t, Q = R ? he : me, $ = /* @__PURE__ */ v(g, { children: [l(Q) && /* @__PURE__ */ _("span", {
+	}, Z = R ? n : t, Q = R ? he : me, $ = /* @__PURE__ */ v(g, { children: [l(Q) && /* @__PURE__ */ _("span", {
 		"aria-hidden": "true",
 		className: D?.icon?.className,
 		css: [
@@ -202,7 +203,7 @@ function T({ ref: e, label: t, confirmedLabel: r, confirmationAnnouncement: i, g
 		...C < 1 ? { maximumSignificantDigits: 3 } : void 0
 	}).format(C / ne);
 	return /* @__PURE__ */ v(g, { children: [
-		/* @__PURE__ */ _(n, {
+		/* @__PURE__ */ _(a, {
 			className: ge,
 			styles: [
 				re,
@@ -277,7 +278,7 @@ function T({ ref: e, label: t, confirmedLabel: r, confirmationAnnouncement: i, g
 			"data-holding": z || void 0,
 			className: D?.hint?.className,
 			css: [se, D?.hint?.css],
-			children: a(Te)
+			children: i(Te)
 		}),
 		/* @__PURE__ */ _("span", {
 			role: "status",

package/dist/hold-to-confirm.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as HoldToConfirm } from "./hold-to-confirm-DjB2EVjM.js";
+export { t as HoldToConfirm } from "./hold-to-confirm-CVBA0wNT.js";

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

@@ -1,13 +1,14 @@
 'use client';
-import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
-import { r } from "./media-8yrN85VT.js";
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+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-CaGJHy1N.js";
-import { n as s } from "./surface-DZ4d-2aL.js";
-import { t as c } from "./trigger-style-B1KVC8O1.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";
-import { t as d } from "./overlay-portal-C4JZFq2M.js";
+import { t as d } from "./overlay-portal-C9igMHnC.js";
 import { t as f } from "./use-overlay-floating-Bx2jBKAA.js";
 import { createContext as p, useCallback as m, useContext as h, useEffect as g, useMemo as _, useRef as v, useState as y } from "react";
 import { vars as b } from "@jfrader/tokens/vars";
@@ -60,7 +61,7 @@ var z = b.space[1], B = e({
 	"&[data-side=\"left\"]": { "--hover-card-enter-x": z },
 	"&[data-side=\"right\"]": { "--hover-card-enter-x": `calc(-1 * ${z})` },
 	"&[data-entry=\"warm\"]": { animation: `${V} ${b.motion.duration.fast} ${b.motion.easeStandard}` },
-	[r]: { "&, &[data-entry=\"warm\"]": { animation: "none" } }
+	[n]: { "&, &[data-entry=\"warm\"]": { animation: "none" } }
 });
 function U({ value: e, defaultValue: t = null, onValueChange: n, skipDelay: r = A, intentDelay: a = j, children: o }) {
 	let [s = null, c] = i(e, t, n), l = I(r, A), u = v(/* @__PURE__ */ new Map()), [d, f] = y(() => ({
@@ -178,14 +179,14 @@ function G(e) {
 	}) });
 }
 G.displayName = "HoverCard";
-function K({ ref: e = null, render: t, "aria-describedby": r, className: i, sx: a, ...o }) {
-	let { refs: s, getReferenceProps: l } = F("Trigger"), u = E([s.setReference, e]), { "data-ui": d, ...f } = o, p = l(f), m = [r, p["aria-describedby"]].filter(Boolean).join(" ") || void 0, h = {
+function K({ ref: e = null, render: t, "aria-describedby": n, className: i, sx: a, ...o }) {
+	let { refs: s, getReferenceProps: l } = F("Trigger"), u = E([s.setReference, e]), { "data-ui": d, ...f } = o, p = l(f), m = [n, p["aria-describedby"]].filter(Boolean).join(" ") || void 0, h = {
 		...p,
 		ref: u,
 		"aria-describedby": m,
 		"data-ui": t && d !== void 0 ? `${d} hover-card-trigger` : "hover-card-trigger"
 	};
-	return /* @__PURE__ */ x(n, {
+	return /* @__PURE__ */ x(r, {
 		className: i,
 		styles: t ? void 0 : c,
 		sx: a,
@@ -200,7 +201,7 @@ function K({ ref: e = null, render: t, "aria-describedby": r, className: i, sx:
 	});
 }
 K.displayName = "HoverCard.Trigger";
-function q({ ref: e, style: t, className: r, sx: i, ...a }) {
+function q({ ref: e, style: t, className: n, sx: i, ...a }) {
 	let { side: o, refs: s, floatingStyles: c, getFloatingProps: l, warmEntry: u } = F("Content"), [d] = y(() => {
 		let e = s.domReference.current;
 		return e?.ownerDocument.defaultView?.getComputedStyle(e).direction;
@@ -209,8 +210,8 @@ function q({ ref: e, style: t, className: r, sx: i, ...a }) {
 		ref: s.setFloating,
 		dir: d,
 		style: c,
-		children: /* @__PURE__ */ x(n, {
-			className: r,
+		children: /* @__PURE__ */ x(r, {
+			className: n,
 			styles: H,
 			sx: i,
 			children: (n) => /* @__PURE__ */ x("div", {
@@ -273,17 +274,17 @@ var Y = t({
 	fontSize: b.textSize.xs,
 	color: b.color.textMuted
 });
-function $({ ref: e, name: t, subtitle: r, bio: i, src: s, avatar: c, stats: l = [], meta: u, locale: d, slotProps: f, className: p, sx: m, ...h }) {
+function $({ ref: e, name: t, subtitle: n, bio: i, src: s, avatar: c, stats: l = [], meta: u, locale: d, slotProps: f, className: p, sx: m, ...h }) {
 	let g = l.some((e) => typeof e.value == "number") ? new Intl.NumberFormat(d) : void 0;
-	return /* @__PURE__ */ x(n, {
+	return /* @__PURE__ */ x(r, {
 		className: p,
 		styles: Y,
 		sx: m,
-		children: (n) => /* @__PURE__ */ S("div", {
+		children: (r) => /* @__PURE__ */ S("div", {
 			...h,
 			ref: e,
 			"data-ui": "hover-card-profile",
-			className: n,
+			className: r,
 			children: [
 				/* @__PURE__ */ S("div", {
 					css: X,
@@ -302,9 +303,9 @@ function $({ ref: e, name: t, subtitle: r, bio: i, src: s, avatar: c, stats: l =
 						children: [/* @__PURE__ */ x("div", {
 							css: ne,
 							children: t
-						}), a(r) && /* @__PURE__ */ x("div", {
+						}), a(n) && /* @__PURE__ */ x("div", {
 							css: Q,
-							children: r
+							children: n
 						})]
 					})]
 				}),

package/dist/hover-card.js

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

package/dist/{icon-wrapper-stN8sD7R.js → icon-wrapper-C-zMD0uL.js}

@@ -1,5 +1,5 @@
 'use client';
-import { r as e } from "./sx-Dx9JUKp5.js";
+import { i as e } from "./css-BYJhdGh-.js";
 //#region src/styling/icon-wrapper.ts
 var t = e({
 	display: "inline-flex",