@jfrader/ui 0.5.0 → 0.6.0

package/dist/{inline-edit-C0eeml65.js → inline-edit-D-pR2RPC.js}

@@ -1,14 +1,15 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r, r as i } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
 import { t as ee } from "./use-controlled-state-DpeVQZNR.js";
-import { t as a } from "./visually-hidden-BJdvqqvn.js";
+import { t as a } from "./visually-hidden-DgVO3NaB.js";
 import { t as o } from "./renderable-DzcIj1Lo.js";
-import { t as s } from "./icon-wrapper-stN8sD7R.js";
-import { t as te } from "./loading-ring-B8-30Dl1.js";
-import { t as ne } from "./input-control-DmMuAuPS.js";
-import { n as re, t as ie } from "./field-anatomy-COVdNpf5.js";
+import { t as s } from "./icon-wrapper-C-zMD0uL.js";
+import { t as te } from "./loading-ring-D0lGrK8z.js";
+import { t as ne } from "./input-control-B6HVBgwl.js";
+import { n as re, t as ie } from "./field-anatomy-BDIP42MI.js";
 import { useEffect as c, useId as ae, useLayoutEffect as oe, useRef as l, useState as u } from "react";
 import { vars as d } from "@jfrader/tokens/vars";
 import { Fragment as f, jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
@@ -75,11 +76,11 @@ var ce = {
 		backgroundColor: d.color.surfaceHover,
 		borderColor: d.color.borderControl
 	},
-	"&:focus-visible": n,
+	"&:focus-visible": t,
 	"&:disabled, &[aria-disabled=\"true\"]": { cursor: "not-allowed" },
 	"&:disabled": { opacity: .55 },
-	[i]: { transitionDuration: "0s" },
-	[r]: {
+	[r]: { transitionDuration: "0s" },
+	[n]: {
 		color: "ButtonText",
 		"&:hover:not(:disabled):not([aria-disabled=\"true\"])": { borderColor: "ButtonText" }
 	}
@@ -94,7 +95,7 @@ var ce = {
 }), ye = e({ color: d.color.textMuted }), be = e({
 	color: d.color.textMuted,
 	fontSize: d.textSize.md,
-	[r]: { color: "ButtonText" }
+	[n]: { color: "ButtonText" }
 }), xe = e({
 	display: "flex",
 	flexWrap: "wrap",
@@ -140,13 +141,13 @@ var ce = {
 		backgroundColor: d.color.surfaceHover,
 		color: d.color.text
 	},
-	"&:focus-visible": n,
+	"&:focus-visible": t,
 	"&:disabled, &[aria-disabled=\"true\"]": {
 		cursor: "not-allowed",
 		opacity: .55
 	},
-	[i]: { transitionDuration: "0s" },
-	[r]: {
+	[r]: { transitionDuration: "0s" },
+	[n]: {
 		color: "ButtonText",
 		borderColor: "ButtonText"
 	}
@@ -199,16 +200,16 @@ var ce = {
 		inlineSize: "1em",
 		blockSize: "1em"
 	},
-	[i]: { transitionDuration: "0s" }
+	[r]: { transitionDuration: "0s" }
 }), Me = e({
 	color: d.color.success,
-	[r]: { color: "CanvasText" }
+	[n]: { color: "CanvasText" }
 }), _ = e({
 	...te,
 	boxSizing: "border-box",
 	inlineSize: "0.875em",
 	blockSize: "0.875em",
-	[i]: { animation: "none" }
+	[r]: { animation: "none" }
 }), v = {
 	viewBox: "0 0 16 16",
 	fill: "none",
@@ -233,11 +234,11 @@ var ce = {
 	}),
 	failed: Fe
 };
-function y({ ref: e, value: n, defaultValue: r = "", onValueChange: i, open: te, defaultOpen: d = !1, onOpenChange: h, onSave: Me, label: _, validate: v, normalize: y = le, multiline: b = !1, variant: Le = "title", size: x = "md", disabled: S = !1, readOnly: C = !1, saveOnBlur: Re = !0, placeholder: ze, inputPlaceholder: Be, description: Ve, error: He, controlProps: w, controlRef: Ue, messages: We, editIcon: Ge = Ne, saveIcon: Ke = Pe, cancelIcon: qe = Fe, slotProps: T, className: Je, sx: Ye, onBlur: Xe, ...Ze }) {
+function y({ ref: e, value: t, defaultValue: n = "", onValueChange: r, open: te, defaultOpen: d = !1, onOpenChange: h, onSave: Me, label: _, validate: v, normalize: y = le, multiline: b = !1, variant: Le = "title", size: x = "md", disabled: S = !1, readOnly: C = !1, saveOnBlur: Re = !0, placeholder: ze, inputPlaceholder: Be, description: Ve, error: He, controlProps: w, controlRef: Ue, messages: We, editIcon: Ge = Ne, saveIcon: Ke = Pe, cancelIcon: qe = Fe, slotProps: T, className: Je, sx: Ye, onBlur: Xe, ...Ze }) {
 	let E = {
 		...ce,
 		...We
-	}, [Qe, $e] = ee(n, r, i), D = Qe ?? "", [et, O] = ee(te, d, h), k = et ?? !1, [tt, A] = u(D), [j, M] = u("idle"), [N, P] = u(null), [nt, F] = u(null), [I, L] = u(null), [rt, it] = u(!1), [at, ot] = u(k);
+	}, [Qe, $e] = ee(t, n, r), D = Qe ?? "", [et, O] = ee(te, d, h), k = et ?? !1, [tt, A] = u(D), [j, M] = u("idle"), [N, P] = u(null), [nt, F] = u(null), [I, L] = u(null), [rt, it] = u(!1), [at, ot] = u(k);
 	at !== k && (ot(k), k && (A(D), F(null), j !== "saving" && (M("idle"), P(null)))), rt && (it(!1), A(D));
 	let R = ae(), st = w?.id ?? `${R}-control`, ct = `${R}-label`, lt = `${R}-instructions`, z = `${R}-description`, B = `${R}-error`, V = l(null), ut = se([V, e]), dt = l(null), H = l(null), ft = se([H, Ue]), U = l(!1), W = l(!1), G = l(null), K = l(!1), q = l(k);
 	q.current = k;
@@ -356,7 +357,7 @@ function y({ ref: e, value: n, defaultValue: r = "", onValueChange: i, open: te,
 		me[Le],
 		he[x]
 	];
-	return /* @__PURE__ */ p(t, {
+	return /* @__PURE__ */ p(i, {
 		className: Nt,
 		styles: [pe, T?.root?.css],
 		sx: Ye,

package/dist/inline-edit.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as InlineEdit } from "./inline-edit-C0eeml65.js";
+export { t as InlineEdit } from "./inline-edit-D-pR2RPC.js";

package/dist/{input-control-DmMuAuPS.js → input-control-B6HVBgwl.js}

@@ -1,5 +1,5 @@
 'use client';
-import { r as e } from "./sx-Dx9JUKp5.js";
+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 { vars as r } from "@jfrader/tokens/vars";

package/dist/{json-viewer-BcySQfjZ.js → json-viewer-Dro3WrjS.js}

@@ -1,12 +1,13 @@
 '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 { t as o } from "./use-controlled-state-DpeVQZNR.js";
-import { t as s } from "./button-C92uYFJW.js";
-import { n as c } from "./surface-DZ4d-2aL.js";
-import { t as l } from "./text-field-C8TWG-tY.js";
+import { t as s } from "./button-C6OV0C7J.js";
+import { n as c } from "./surface-C69kwSuk.js";
+import { t as l } from "./text-field-D0VP7b4P.js";
 import { useId as ee, useLayoutEffect as te, useMemo as u, useRef as d, useState as f } from "react";
 import { vars as p } from "@jfrader/tokens/vars";
 import { Fragment as m, jsx as h, jsxs as g } from "@emotion/react/jsx-runtime";
@@ -149,7 +150,7 @@ var ue = "2px", de = {
 	"@media (max-width: 40rem)": { "--json-indent": p.space[4] }
 }), Ce = e({
 	outline: "none",
-	"&:focus-visible > [data-ui=\"json-viewer-row\"]": r
+	"&:focus-visible > [data-ui=\"json-viewer-row\"]": n
 }), we = e({
 	display: "flex",
 	alignItems: "center",
@@ -170,8 +171,8 @@ var ue = "2px", de = {
 		borderInlineStartColor: p.color.accent,
 		background: p.color.accentSoft
 	},
-	[a]: { transitionDuration: "0s" },
-	[i]: {
+	[i]: { transitionDuration: "0s" },
+	[r]: {
 		color: "CanvasText",
 		"[aria-selected=\"true\"] > &": { borderInlineStartColor: "Highlight" }
 	}
@@ -186,7 +187,7 @@ var ue = "2px", de = {
 		background: p.color.border,
 		pointerEvents: "none"
 	},
-	[i]: { "&::before": { background: "GrayText" } }
+	[r]: { "&::before": { background: "GrayText" } }
 }), Ee = e({
 	display: "inline-flex",
 	alignItems: "center",
@@ -194,10 +195,14 @@ var ue = "2px", de = {
 	flexShrink: 0,
 	inlineSize: "var(--json-caret)",
 	color: p.color.textMuted,
-	"&[data-state]::after": n,
+	"&[data-state]::after": t,
 	"&[data-state=\"open\"]::after": { transform: "rotate(90deg)" },
 	"&[data-state=\"open\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
-	[a]: { "&::after": { transitionDuration: "0s" } }
+	[i]: { "&[data-state]::after": { transitionDuration: "0s" } },
+	[r]: { "&[data-state]::after": {
+		forcedColorAdjust: "none",
+		color: "CanvasText"
+	} }
 }), v = { unicodeBidi: "plaintext" }, De = e({
 	...v,
 	color: p.color.text
@@ -213,7 +218,7 @@ var ue = "2px", de = {
 		color: p.color.textMuted,
 		fontStyle: "italic"
 	},
-	[i]: { color: "CanvasText" }
+	[r]: { color: "CanvasText" }
 }), Ae = e({
 	...v,
 	display: "inline-flex",
@@ -236,7 +241,7 @@ var ue = "2px", de = {
 	textDecoration: "underline",
 	textDecorationColor: p.color.accentText,
 	textUnderlineOffset: "0.2em",
-	[i]: {
+	[r]: {
 		color: "Highlight",
 		background: "Canvas"
 	}
@@ -272,7 +277,7 @@ var ue = "2px", de = {
 	fontSize: p.textSize.xs,
 	maxBlockSize: "var(--json-max-height)",
 	overflow: "auto",
-	"&:focus-visible": r
+	"&:focus-visible": n
 }), Le = e({
 	paddingInline: p.space[3],
 	paddingBlock: p.space[2],
@@ -307,11 +312,11 @@ var ue = "2px", de = {
 	height: "12",
 	rx: "2"
 }), /* @__PURE__ */ h("path", { d: "M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1" })] })), Ge = y(/* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("path", { d: "M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7" }), /* @__PURE__ */ h("path", { d: "M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7" })] }));
-function b({ data: e, rootName: n = "root", expandedValue: r, defaultExpandedValue: i, onExpandedValueChange: a, defaultExpandDepth: c = 1, query: se, defaultQuery: ue = "", onQueryChange: de, value: v, defaultValue: y, onValueChange: b, onNodeActivate: qe, searchable: x = !0, copyable: S = !0, showPath: Je = !0, pageSize: Ye = ie, maxMatches: Xe = ae, maxHeight: C = "26rem", size: Ze = "md", locale: w, labels: Qe, onCopy: $e, onCopyError: et, slotProps: T, ref: tt, className: nt, sx: rt, style: it, onKeyDown: at, onClick: ot, "aria-label": st, "aria-labelledby": E, "aria-describedby": ct, ...lt }) {
+function b({ data: e, rootName: t = "root", expandedValue: n, defaultExpandedValue: r, onExpandedValueChange: i, defaultExpandDepth: c = 1, query: se, defaultQuery: ue = "", onQueryChange: de, value: v, defaultValue: y, onValueChange: b, onNodeActivate: qe, searchable: x = !0, copyable: S = !0, showPath: Je = !0, pageSize: Ye = ie, maxMatches: Xe = ae, maxHeight: C = "26rem", size: Ze = "md", locale: w, labels: Qe, onCopy: $e, onCopyError: et, slotProps: T, ref: tt, className: nt, sx: rt, style: it, onKeyDown: at, onClick: ot, "aria-label": st, "aria-labelledby": E, "aria-describedby": ct, ...lt }) {
 	let D = d(null), O = d(null), k = d(/* @__PURE__ */ new Map()), A = d(null), j = d(!1), M = d({
 		text: "",
 		time: 0
-	}), ut = ee(), N = u(() => le(e, n), [e, n]), P = u(() => new Intl.NumberFormat(w), [w]), dt = u(() => new Intl.PluralRules(w), [w]), F = {
+	}), ut = ee(), N = u(() => le(e, t), [e, t]), P = u(() => new Intl.NumberFormat(w), [w]), dt = u(() => new Intl.PluralRules(w), [w]), F = {
 		tree: "JSON",
 		search: "Search JSON",
 		expandAll: "Expand all",
@@ -327,7 +332,7 @@ function b({ data: e, rootName: n = "root", expandedValue: r, defaultExpandedVal
 		match: (e, t, n) => `${P.format(e)} / ${P.format(t)}${n ? "+" : ""}`,
 		showMore: (e) => `Show more (${P.format(e)} remaining)`,
 		...Qe
-	}, ft = oe(Ye, ie), pt = oe(Xe, ae), [mt] = f(() => i ?? [...N?.values() ?? []].filter((e) => _(e) && e.level <= Math.max(0, Math.floor(c))).map((e) => e.path)), [I = [], ht] = o(r, mt, (e) => a?.([...e])), [L = "", gt] = o(se, ue, de), [R = n, _t] = o(v, y ?? n, b), [vt, z] = f(v ?? y ?? n), [yt, bt] = f({
+	}, ft = oe(Ye, ie), pt = oe(Xe, ae), [mt] = f(() => r ?? [...N?.values() ?? []].filter((e) => _(e) && e.level <= Math.max(0, Math.floor(c))).map((e) => e.path)), [I = [], ht] = o(n, mt, (e) => i?.([...e])), [L = "", gt] = o(se, ue, de), [R = t, _t] = o(v, y ?? t, b), [vt, z] = f(v ?? y ?? t), [yt, bt] = f({
 		data: e,
 		pages: /* @__PURE__ */ new Map()
 	}), [xt, B] = f({
@@ -365,7 +370,7 @@ function b({ data: e, rootName: n = "root", expandedValue: r, defaultExpandedVal
 	]), U = (e) => !V.closed.has(e) && (I.includes(e) || H.ancestors.has(e) || V.opened.has(e)), W = [], G = /* @__PURE__ */ new Map();
 	if (N) {
 		let e = [{
-			path: n,
+			path: t,
 			level: 1,
 			position: 1,
 			setSize: 1
@@ -398,13 +403,13 @@ function b({ data: e, rootName: n = "root", expandedValue: r, defaultExpandedVal
 		selected: R,
 		path: R
 	}), Et = Object.is(K.nodes, N) ? K.previousNodes : K.nodes, Dt = new Set(W.map((e) => e.path)), Ot = (e) => {
-		let t = e;
-		for (; t !== void 0;) {
-			if (Dt.has(t)) return t;
-			t = N?.get(t)?.parent ?? Et?.get(t)?.parent;
+		let n = e;
+		for (; n !== void 0;) {
+			if (Dt.has(n)) return n;
+			n = N?.get(n)?.parent ?? Et?.get(n)?.parent;
 		}
-		return n;
-	}, q = Ot(vt), J = N?.get(R) ?? N?.get(Ot(K.selected === R ? K.path : R)), kt = J?.path ?? n;
+		return t;
+	}, q = Ot(vt), J = N?.get(R) ?? N?.get(Ot(K.selected === R ? K.path : R)), kt = J?.path ?? t;
 	(!Object.is(K.nodes, N) || K.selected !== R || K.path !== kt) && Tt({
 		nodes: N,
 		previousNodes: Et,
@@ -647,7 +652,7 @@ function b({ data: e, rootName: n = "root", expandedValue: r, defaultExpandedVal
 		"aria-hidden": "true",
 		css: be
 	});
-	return /* @__PURE__ */ h(t, {
+	return /* @__PURE__ */ h(a, {
 		className: nt,
 		styles: fe,
 		sx: rt,
@@ -718,7 +723,7 @@ function b({ data: e, rootName: n = "root", expandedValue: r, defaultExpandedVal
 								B({
 									...V,
 									closed: new Set(H.ancestors)
-								}), X(_(N.get(n)) ? [n] : []);
+								}), X(_(N.get(t)) ? [t] : []);
 							}),
 							S && /* @__PURE__ */ g(m, { children: [
 								Lt,
@@ -741,7 +746,7 @@ function b({ data: e, rootName: n = "root", expandedValue: r, defaultExpandedVal
 					"aria-describedby": ct,
 					className: T?.tree?.className,
 					css: [Se, T?.tree?.css],
-					children: Q.get(n)
+					children: Q.get(t)
 				}),
 				Je && J && /* @__PURE__ */ g("div", {
 					"data-ui": "json-viewer-path-bar",

package/dist/json-viewer.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as JsonViewer } from "./json-viewer-BcySQfjZ.js";
+export { t as JsonViewer } from "./json-viewer-Dro3WrjS.js";

package/dist/{kbd-C3ACoMoE.js → kbd-BI_9qzYr.js}

@@ -1,5 +1,6 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./sx-BJXJ2xJK.js";
 import { Children as n, Fragment as r } from "react";
 import { vars as i } from "@jfrader/tokens/vars";
 import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";

package/dist/kbd.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Kbd } from "./kbd-C3ACoMoE.js";
+export { t as Kbd } from "./kbd-BI_9qzYr.js";

package/dist/keycap-keyboard-Cdx-OAS1.js

@@ -0,0 +1,311 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t, 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 "./kbd-BI_9qzYr.js";
+import { useEffect as s, useRef as c } from "react";
+import { vars as l } from "@jfrader/tokens/vars";
+import { jsx as u } from "@emotion/react/jsx-runtime";
+//#region src/components/keycap-keyboard/keycap-keyboard.tsx
+var d = [], f = 1, p = "2px", m = "3px", h = [
+	"QWERTYUIOP",
+	"ASDFGHJKL",
+	"ZXCVBNM"
+].map((e) => Array.from(e, (e) => ({
+	code: `Key${e}`,
+	legend: e
+}))), g = {
+	letters: h,
+	compact: [
+		[
+			{
+				code: "Backquote",
+				legend: "`"
+			},
+			...Array.from("1234567890", (e) => ({
+				code: `Digit${e}`,
+				legend: e
+			})),
+			{
+				code: "Minus",
+				legend: "-"
+			},
+			{
+				code: "Equal",
+				legend: "="
+			},
+			{
+				code: "Backspace",
+				legend: "⌫",
+				units: 2
+			}
+		],
+		[
+			{
+				code: "Tab",
+				legend: "Tab",
+				units: 1.5
+			},
+			...h[0],
+			{
+				code: "BracketLeft",
+				legend: "["
+			},
+			{
+				code: "BracketRight",
+				legend: "]"
+			},
+			{
+				code: "Backslash",
+				legend: "\\",
+				units: 1.5
+			}
+		],
+		[
+			{
+				code: "CapsLock",
+				legend: "Caps",
+				units: 1.75
+			},
+			...h[1],
+			{
+				code: "Semicolon",
+				legend: ";"
+			},
+			{
+				code: "Quote",
+				legend: "'"
+			},
+			{
+				code: "Enter",
+				legend: "↵",
+				units: 2.25
+			}
+		],
+		[
+			{
+				code: "ShiftLeft",
+				legend: "⇧",
+				units: 2.25
+			},
+			...h[2],
+			{
+				code: "Comma",
+				legend: ","
+			},
+			{
+				code: "Period",
+				legend: "."
+			},
+			{
+				code: "Slash",
+				legend: "/"
+			},
+			{
+				code: "ShiftRight",
+				legend: "⇧",
+				units: 2.75
+			}
+		],
+		[
+			{
+				code: "ControlLeft",
+				legend: "Ctrl",
+				units: 1.25
+			},
+			{
+				code: "MetaLeft",
+				legend: "Meta",
+				units: 1.25
+			},
+			{
+				code: "AltLeft",
+				legend: "Alt",
+				units: 1.25
+			},
+			{
+				code: "Space",
+				legend: "Space",
+				units: 6.25
+			},
+			{
+				code: "AltRight",
+				legend: "Alt",
+				units: 1.25
+			},
+			{
+				code: "MetaRight",
+				legend: "Meta",
+				units: 1.25
+			},
+			{
+				code: "ContextMenu",
+				legend: "Menu",
+				units: 1.25
+			},
+			{
+				code: "ControlRight",
+				legend: "Ctrl",
+				units: 1.25
+			}
+		]
+	]
+}, _ = e({
+	label: "keycap-keyboard",
+	boxSizing: "border-box",
+	display: "grid",
+	gap: l.space[1],
+	inlineSize: "100%",
+	minInlineSize: 0,
+	padding: l.space[2],
+	borderRadius: l.radius.md,
+	backgroundColor: l.color.surfaceInset,
+	border: `1px solid ${l.color.borderSubtle}`,
+	boxShadow: l.shadow.raised,
+	[t]: {
+		backgroundColor: "Canvas",
+		borderColor: "CanvasText",
+		boxShadow: "none"
+	}
+}), v = e({
+	display: "grid",
+	direction: "ltr",
+	gap: l.space[1],
+	minInlineSize: 0
+}), y = e({
+	minInlineSize: 0,
+	minBlockSize: l.space[6],
+	justifyContent: "center",
+	paddingInline: l.space[1],
+	paddingBlock: l.space[2],
+	whiteSpace: "normal",
+	borderColor: l.color.borderStrong,
+	borderBlockEndWidth: m,
+	transition: `transform ${l.motion.duration.slow} ${l.motion.easeStandard}`,
+	"&[data-state=\"pressed\"]": {
+		transform: `translateY(${p})`,
+		backgroundColor: l.color.surfaceRaised,
+		transitionDuration: l.motion.duration.fast
+	},
+	"[data-tone=\"accent\"] &[data-state=\"pressed\"]": {
+		backgroundColor: l.color.accentSoft,
+		borderColor: l.color.accent
+	},
+	[n]: {
+		transitionDuration: "0s",
+		"&[data-state=\"pressed\"]": {
+			transform: "none",
+			transitionDuration: "0s"
+		}
+	},
+	[t]: {
+		backgroundColor: "ButtonFace",
+		color: "CanvasText",
+		borderColor: "CanvasText",
+		boxShadow: "none",
+		"&[data-state=\"pressed\"]": {
+			backgroundColor: "Highlight",
+			color: "HighlightText",
+			borderColor: "CanvasText"
+		},
+		"[data-tone=\"accent\"] &[data-state=\"pressed\"]": {
+			backgroundColor: "Highlight",
+			borderColor: "CanvasText"
+		}
+	}
+}), b = e({
+	minInlineSize: 0,
+	overflowWrap: "anywhere",
+	textAlign: "center"
+});
+function x(e) {
+	return [...new Set(e)].sort();
+}
+function S(e, t) {
+	return e.length === t.length && e.every((e, n) => e === t[n]);
+}
+function C(e) {
+	return e.units !== void 0 && Number.isFinite(e.units) && e.units > 0 ? e.units : f;
+}
+function w({ ref: e, layout: t = "compact", rows: n = g[t], value: p, defaultValue: m = d, onValueChange: h, eventTarget: w = null, tone: T = "accent", paused: E = !1, slotProps: D, className: O, sx: k, style: A, ...j }) {
+	let M = c(!1), [N = d, P] = i(p, x(m), (e) => {
+		M.current || h?.(e);
+	}), F = c(N);
+	F.current = x(N);
+	let I = c({
+		eventTarget: w,
+		paused: E
+	});
+	s(() => {
+		let e = I.current;
+		if (I.current = {
+			eventTarget: w,
+			paused: E
+		}, p === void 0 && (e.eventTarget !== w || e.paused !== E) && (M.current = !0, P(d), M.current = !1, F.current = d), !w || E || w.tagName === "INPUT" && w.type === "password") return;
+		let t = w, n = t.ownerDocument, r = n.defaultView, i = new Set(F.current), a = !1, o, s = (e) => {
+			let t = x(e);
+			o && S(t, o) || (o = t, S(t, F.current) || P(t));
+		}, c = () => {
+			i = /* @__PURE__ */ new Set(), s(d);
+		}, l = (e) => {
+			(w.tagName !== "INPUT" || w.type !== "password") && (a || e.isComposing || e.metaKey || e.ctrlKey || e.altKey || !e.code || e.code === "Tab" || /^(Meta|Control|Alt)(Left|Right)$/.test(e.code) || i.has(e.code) || (i.add(e.code), s([...i])));
+		}, u = (e) => {
+			(w.tagName !== "INPUT" || w.type !== "password") && i.delete(e.code) && s([...i]);
+		}, f = () => {
+			a = !0, c();
+		}, m = () => {
+			a = !1;
+		}, h = () => {
+			n.visibilityState === "hidden" && c();
+		};
+		return t.addEventListener("keydown", l), t.addEventListener("keyup", u), t.addEventListener("blur", c), t.addEventListener("compositionstart", f), t.addEventListener("compositionend", m), r?.addEventListener("blur", c), n.addEventListener("visibilitychange", h), () => {
+			t.removeEventListener("keydown", l), t.removeEventListener("keyup", u), t.removeEventListener("blur", c), t.removeEventListener("compositionstart", f), t.removeEventListener("compositionend", m), r?.removeEventListener("blur", c), n.removeEventListener("visibilitychange", h);
+		};
+	}, [
+		w,
+		E,
+		P,
+		p === void 0
+	]);
+	let L = n.map((e) => e.reduce((e, t) => e + C(t), 0)), R = Math.max(f, ...L), z = Math.max(0, ...n.map((e) => e.length - 1));
+	return /* @__PURE__ */ u(r, {
+		className: O,
+		styles: _,
+		sx: k,
+		children: (t) => /* @__PURE__ */ u("div", {
+			...j,
+			ref: e,
+			"aria-hidden": "true",
+			"data-ui": "keycap-keyboard",
+			"data-tone": T,
+			className: t,
+			style: A,
+			children: n.map((e, t) => /* @__PURE__ */ u("div", {
+				"data-ui": "keycap-keyboard-row",
+				className: D?.row?.className,
+				css: [v, D?.row?.css],
+				style: {
+					gridTemplateColumns: e.map((e) => `minmax(0, ${C(e)}fr)`).join(" "),
+					inlineSize: `calc((100% - ${z} * ${l.space[1]}) * ${(L[t] ?? 0) / R} + ${Math.max(0, e.length - 1)} * ${l.space[1]})`
+				},
+				children: e.map((e, t) => /* @__PURE__ */ u(o, {
+					"data-code": e.code,
+					"data-state": N.includes(e.code) ? "pressed" : "idle",
+					className: D?.key?.className,
+					css: [y, D?.key?.css],
+					children: a(e.legend) && e.legend !== "" && /* @__PURE__ */ u("span", {
+						"data-ui": "keycap-keyboard-legend",
+						className: D?.legend?.className,
+						css: [b, D?.legend?.css],
+						children: e.legend
+					})
+				}, `${e.code}-${t}`))
+			}, t))
+		})
+	});
+}
+w.displayName = "KeycapKeyboard";
+//#endregion
+export { w as t };

package/dist/keycap-keyboard.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as KeycapKeyboard } from "./keycap-keyboard-Cdx-OAS1.js";

package/dist/{layout-style-Cbd1Vilw.js → layout-style-BE0gSqrH.js}

@@ -1,5 +1,5 @@
 'use client';
-import { r as e } from "./sx-Dx9JUKp5.js";
+import { i as e } from "./css-BYJhdGh-.js";
 import { vars as t } from "@jfrader/tokens/vars";
 //#region src/styling/layout-style.ts
 var n = [