@jfrader/ui 0.5.0 → 0.5.1

package/dist/{code-block-ahnRi-g8.js → code-block-B5we2lZa.js}

@@ -2,9 +2,9 @@
 import { r as e, t } from "./sx-Dx9JUKp5.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 "./use-controlled-state-DpeVQZNR.js";
-import { t as ee } from "./button-C92uYFJW.js";
-import { t as o } from "./copy-button-ByiA6D3R.js";
+import { t as ee } from "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./button-NLY0h6EJ.js";
+import { t as o } from "./copy-button-DCSLcYS-.js";
 import { Fragment as te, useCallback as s, useEffect as c, useId as ne, useLayoutEffect as re, useRef as l, useState as ie } from "react";
 import { vars as u } from "@jfrader/tokens/vars";
 import { Fragment as d, jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
@@ -30,17 +30,17 @@ var m = 2, h = `calc(${u.radius.lg} - ${u.space[1]})`, ae = e({
 		borderColor: "CanvasText",
 		color: "CanvasText"
 	}
-}), g = e({
+}), oe = e({
 	display: "flex",
 	alignItems: "center",
 	gap: u.space[2],
 	minBlockSize: u.space[8],
 	paddingInlineStart: u.space[3]
-}), _ = e({
+}), se = e({
 	minInlineSize: 0,
 	fontWeight: u.fontWeight.medium,
 	overflowWrap: "anywhere"
-}), v = e({
+}), ce = e({
 	flexShrink: 0,
 	maxInlineSize: "50%",
 	paddingInline: u.space[2],
@@ -50,7 +50,7 @@ var m = 2, h = `calc(${u.radius.lg} - ${u.space[1]})`, ae = e({
 	fontFamily: u.font.mono,
 	fontSize: u.textSize.xs,
 	overflowWrap: "anywhere"
-}), y = e({ marginInlineStart: "auto" }), b = e({
+}), le = e({ marginInlineStart: "auto" }), g = e({
 	position: "relative",
 	display: "flex",
 	direction: "ltr",
@@ -72,14 +72,14 @@ var m = 2, h = `calc(${u.radius.lg} - ${u.space[1]})`, ae = e({
 		borderColor: "CanvasText",
 		"&[data-state=\"collapsed\"]::after": { display: "none" }
 	}
-}), x = e({
+}), _ = e({
 	fontFamily: u.font.mono,
 	fontSize: u.textSize.sm,
 	lineHeight: u.lineHeight.relaxed,
 	fontVariantNumeric: "tabular-nums",
 	whiteSpace: "pre",
 	tabSize: m
-}), oe = e({
+}), v = e({
 	flexShrink: 0,
 	paddingBlock: u.space[3],
 	paddingInline: u.space[3],
@@ -87,7 +87,7 @@ var m = 2, h = `calc(${u.radius.lg} - ${u.space[1]})`, ae = e({
 	color: u.color.textSubtle,
 	userSelect: "none",
 	borderInlineEnd: `1px solid ${u.color.border}`
-}), se = e({
+}), ue = e({
 	flex: "1 1 auto",
 	minInlineSize: 0,
 	margin: 0,
@@ -103,7 +103,7 @@ var m = 2, h = `calc(${u.radius.lg} - ${u.space[1]})`, ae = e({
 		borderEndStartRadius: 0
 	},
 	"&:focus-visible": n
-}), ce = e({ font: "inherit" }), le = e({
+}), y = e({ font: "inherit" }), b = e({
 	inlineSize: "100%",
 	blockSize: "auto",
 	minBlockSize: u.space[8],
@@ -118,7 +118,7 @@ var m = 2, h = `calc(${u.radius.lg} - ${u.space[1]})`, ae = e({
 	},
 	"&[aria-expanded=\"true\"] svg": { transform: "rotate(180deg)" },
 	[i]: { "& svg": { transitionDuration: "0s" } }
-}), ue = /* @__PURE__ */ f("svg", {
+}), x = /* @__PURE__ */ f("svg", {
 	viewBox: "0 0 16 16",
 	fill: "none",
 	stroke: "currentColor",
@@ -127,13 +127,13 @@ var m = 2, h = `calc(${u.radius.lg} - ${u.space[1]})`, ae = e({
 	strokeLinejoin: "round",
 	children: /* @__PURE__ */ f("path", { d: "M4 6l4 4 4-4" })
 }), S = new Intl.PluralRules("en");
-function de(e, t) {
+function C(e, t) {
 	return `Show all ${t} ${S.select(e) === "one" ? "line" : "lines"}`;
 }
-function C(e) {
+function w(e) {
 	process.env.NODE_ENV !== "production" && console.warn("CodeBlock: highlighting failed; showing plain text.", e);
 }
-function fe(e, t) {
+function de(e, t) {
 	let n = t?.map((e) => e.content).join("");
 	return t === void 0 || n === void 0 || !e.startsWith(n) ? e : /* @__PURE__ */ p(d, { children: [t.map((e, t) => /* @__PURE__ */ f("span", {
 		style: {
@@ -143,17 +143,17 @@ function fe(e, t) {
 		children: e.content
 	}, t)), e.slice(n.length)] });
 }
-function w({ ref: e, code: n, filename: r, language: i, label: u = "Source code", sourceLabel: d = "Selectable source code", maxLines: m, open: h, defaultOpen: S = !1, onOpenChange: w, lineNumbers: T = !1, locale: E, getExpandLabel: D = de, collapseLabel: O = "Show fewer lines", copyable: k = !0, copyButtonProps: A, preRef: j, highlight: M, slotProps: N, className: P, sx: F, "aria-label": I, "aria-labelledby": L, ...R }) {
-	let z = ne(), B = `${z}-label`, V = `${z}-source`, [H, pe] = a(h, S, w), U = n.match(/[^\n]*\n|[^\n]+$/g) ?? [], W = m !== void 0 && Number.isFinite(m) && m > 0 ? Math.max(1, Math.floor(m)) : void 0, G = W !== void 0 && U.length > W, K = !G || H, q = K ? U : U.slice(0, W), J = new Intl.NumberFormat(E), Y = l(null), me = s((e) => {
+function T({ ref: e, code: n, filename: r, language: i, label: u = "Source code", sourceLabel: d = "Selectable source code", maxLines: m, open: h, defaultOpen: S = !1, onOpenChange: T, lineNumbers: fe = !1, locale: pe, getExpandLabel: E = C, collapseLabel: D = "Show fewer lines", copyable: O = !0, copyButtonProps: k, preRef: A, highlight: j, slotProps: M, className: N, sx: P, "aria-label": F, "aria-labelledby": I, ...L }) {
+	let R = ne(), z = `${R}-label`, B = `${R}-source`, [V, me] = ee(h, S, T), H = n.match(/[^\n]*\n|[^\n]+$/g) ?? [], U = m !== void 0 && Number.isFinite(m) && m > 0 ? Math.max(1, Math.floor(m)) : void 0, W = U !== void 0 && H.length > U, G = !W || V, K = G ? H : H.slice(0, U), q = new Intl.NumberFormat(pe), J = l(null), he = s((e) => {
 		if (e) return () => {
-			e.ownerDocument.activeElement === e && (Y.current = e.ownerDocument);
+			e.ownerDocument.activeElement === e && (J.current = e.ownerDocument);
 		};
-	}, []), X = l(M), [Z, he] = ie(null), Q = M !== void 0;
+	}, []), Y = l(j), [X, Z] = ie(null), Q = j !== void 0;
 	c(() => {
-		X.current = M;
+		Y.current = j;
 	}), c(() => {
-		let e = X.current;
-		if (!e || n === "") return;
+		let e = Y.current;
+		if (Z(null), !e || n === "") return;
 		let t = !0, r;
 		try {
 			r = e({
@@ -161,17 +161,18 @@ function w({ ref: e, code: n, filename: r, language: i, label: u = "Source code"
 				language: i
 			});
 		} catch (e) {
-			C(e);
+			w(e);
 			return;
 		}
-		return Promise.resolve(r).then((e) => {
-			t && he(e ? {
+		return Promise.resolve(r).then((r) => {
+			t && Z(r ? {
+				loader: e,
 				code: n,
 				language: i,
-				lines: e
+				lines: r
 			} : null);
 		}, (e) => {
-			t && C(e);
+			t && w(e);
 		}), () => {
 			t = !1;
 		};
@@ -179,114 +180,114 @@ function w({ ref: e, code: n, filename: r, language: i, label: u = "Source code"
 		n,
 		i,
 		Q,
-		M
+		j
 	]);
-	let $ = Q && Z?.code === n && Z.language === i ? Z.lines : void 0;
+	let $ = Q && X?.loader === j && X.code === n && X.language === i ? X.lines : void 0;
 	return re(() => {
-		Y.current &&= (Y.current.getElementById(V)?.focus(), null);
+		J.current &&= (J.current.getElementById(B)?.focus(), null);
 	}), /* @__PURE__ */ f(t, {
-		className: P,
+		className: N,
 		styles: ae,
-		sx: F,
+		sx: P,
 		children: (t) => /* @__PURE__ */ p("section", {
-			...R,
+			...L,
 			ref: e,
 			"data-ui": "code-block",
 			className: t,
-			"aria-label": I,
-			"aria-labelledby": L ? `${L} ${B}` : I === void 0 ? B : void 0,
+			"aria-label": F,
+			"aria-labelledby": I ? `${I} ${z}` : F === void 0 ? z : void 0,
 			"data-highlighted": $ ? "" : void 0,
 			children: [
 				/* @__PURE__ */ p("header", {
 					"data-ui": "code-block-header",
-					className: N?.header?.className,
-					css: [g, N?.header?.css],
+					className: M?.header?.className,
+					css: [oe, M?.header?.css],
 					children: [
 						/* @__PURE__ */ f("span", {
-							id: B,
+							id: z,
 							"data-ui": "code-block-label",
-							className: N?.label?.className,
-							css: [_, N?.label?.css],
+							className: M?.label?.className,
+							css: [se, M?.label?.css],
 							children: r || u
 						}),
 						i !== void 0 && i !== "" && /* @__PURE__ */ f("span", {
 							"data-ui": "code-block-language",
-							className: N?.language?.className,
-							css: [v, N?.language?.css],
+							className: M?.language?.className,
+							css: [ce, M?.language?.css],
 							children: i
 						}),
-						k && /* @__PURE__ */ f(o, {
+						O && /* @__PURE__ */ f(o, {
 							label: "Copy code",
 							pendingLabel: "Copying code",
 							copiedLabel: "Code copied",
 							errorLabel: "Could not copy code",
 							variant: "ghost",
 							iconOnly: !0,
-							...A,
-							css: [y, A?.css],
+							...k,
+							css: [le, k?.css],
 							text: n
 						})
 					]
 				}),
 				/* @__PURE__ */ p("div", {
 					"data-ui": "code-block-source-frame",
-					"data-state": G ? K ? "expanded" : "collapsed" : void 0,
-					className: N?.sourceFrame?.className,
-					css: [b, N?.sourceFrame?.css],
-					children: [T && q.length > 0 && /* @__PURE__ */ f("div", {
+					"data-state": W ? G ? "expanded" : "collapsed" : void 0,
+					className: M?.sourceFrame?.className,
+					css: [g, M?.sourceFrame?.css],
+					children: [fe && K.length > 0 && /* @__PURE__ */ f("div", {
 						"aria-hidden": "true",
 						"data-ui": "code-block-gutter",
-						className: N?.gutter?.className,
+						className: M?.gutter?.className,
 						css: [
-							x,
-							oe,
-							N?.gutter?.css
+							_,
+							v,
+							M?.gutter?.css
 						],
-						children: q.map((e, t) => J.format(t + 1)).join("\n")
+						children: K.map((e, t) => q.format(t + 1)).join("\n")
 					}), /* @__PURE__ */ f("pre", {
-						id: V,
-						ref: j,
+						id: B,
+						ref: A,
 						role: "group",
 						tabIndex: 0,
 						dir: "ltr",
 						"aria-label": d,
 						"data-ui": "code-block-pre",
-						className: N?.pre?.className,
+						className: M?.pre?.className,
 						css: [
-							x,
-							se,
-							N?.pre?.css
+							_,
+							ue,
+							M?.pre?.css
 						],
 						children: /* @__PURE__ */ f("code", {
 							"data-ui": "code-block-code",
-							className: N?.code?.className,
-							css: [ce, N?.code?.css],
-							children: $ ? q.map((e, t) => /* @__PURE__ */ f(te, { children: fe(e, $[t]) }, t)) : K ? n : q.join("")
+							className: M?.code?.className,
+							css: [y, M?.code?.css],
+							children: $ ? K.map((e, t) => /* @__PURE__ */ f(te, { children: de(e, $[t]) }, t)) : G ? n : K.join("")
 						})
 					})]
 				}),
-				G && /* @__PURE__ */ f(ee, {
-					ref: me,
+				W && /* @__PURE__ */ f(a, {
+					ref: he,
 					variant: "ghost",
 					tone: "neutral",
 					size: "sm",
-					endIcon: ue,
-					"aria-expanded": !!H,
-					"aria-controls": V,
+					endIcon: x,
+					"aria-expanded": !!V,
+					"aria-controls": B,
 					"data-ui": "code-block-toggle",
-					className: N?.toggle?.className,
-					css: [le, N?.toggle?.css],
+					className: M?.toggle?.className,
+					css: [b, M?.toggle?.css],
 					render: (e) => /* @__PURE__ */ f("button", {
 						...e,
 						type: "button"
 					}),
-					onClick: () => pe(!H),
-					children: H ? O : D(U.length, J.format(U.length))
+					onClick: () => me(!V),
+					children: V ? D : E(H.length, q.format(H.length))
 				})
 			]
 		})
 	});
 }
-w.displayName = "CodeBlock";
+T.displayName = "CodeBlock";
 //#endregion
-export { w as t };
+export { T as t };

package/dist/code-block.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as CodeBlock } from "./code-block-ahnRi-g8.js";
+export { t as CodeBlock } from "./code-block-B5we2lZa.js";