@jfrader/ui 0.4.0 → 0.5.1

package/dist/{checkbox-COYG6L7d.js → checkbox-DKSzExj2.js}

@@ -1,6 +1,6 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./media-D_eA_I-e.js";
+import { r as n } from "./media-8yrN85VT.js";
 import { t as r } from "./renderable-DzcIj1Lo.js";
 import { i, n as a, r as o, t as s } from "./choice-control-5kJkLXgv.js";
 import { useEffect as c, useId as l, useImperativeHandle as u, useRef as d } from "react";
@@ -71,16 +71,16 @@ function S({ indeterminate: e }) {
 		}) : /* @__PURE__ */ p("polyline", { points: "3.5 8.5 6.5 11.5 12.5 4.5" })
 	});
 }
-function C({ ref: e, label: n, description: f, indeterminate: h = !1, size: C = "md", onChange: w, onCheckedChange: T, slotProps: E, className: D, sx: O, "aria-labelledby": k, "aria-describedby": A, ...j }) {
-	let M = d(null);
-	u(e, () => M.current, []), c(() => {
-		M.current && (M.current.indeterminate = h);
+function C({ ref: e, label: n, description: f, indeterminate: h = !1, size: C = "md", onChange: w, onCheckedChange: T, slotProps: E, className: D, sx: O, dir: k, "aria-labelledby": A, "aria-describedby": j, ...M }) {
+	let N = d(null);
+	u(e, () => N.current, []), c(() => {
+		N.current && (N.current.indeterminate = h);
 	}, [h]);
-	let N = l(), P = `${N}-label`, F = `${N}-description`, I = r(n), L = r(f), R = [k, I && P].filter(Boolean).join(" ") || void 0, z = [A, L && F].filter(Boolean).join(" ") || void 0, B = [D, E?.root?.className].filter(Boolean).join(" ") || void 0, V = (e) => {
+	let P = l(), F = `${P}-label`, I = `${P}-description`, L = r(n), R = r(f), z = [A, L && F].filter(Boolean).join(" ") || void 0, B = [j, R && I].filter(Boolean).join(" ") || void 0, V = [D, E?.root?.className].filter(Boolean).join(" ") || void 0, H = (e) => {
 		h && (e.currentTarget.indeterminate = !0), w?.(e), T?.(e.currentTarget.checked);
 	};
 	return /* @__PURE__ */ p(t, {
-		className: B,
+		className: V,
 		styles: [
 			o,
 			g,
@@ -90,19 +90,20 @@ function C({ ref: e, label: n, description: f, indeterminate: h = !1, size: C =
 		sx: O,
 		children: (e) => /* @__PURE__ */ m("label", {
 			"data-ui": "checkbox",
+			dir: k,
 			"data-indeterminate": h || void 0,
 			className: e,
 			children: [/* @__PURE__ */ m("span", {
 				css: i,
 				children: [
 					/* @__PURE__ */ p("input", {
-						...j,
-						ref: M,
+						...M,
+						ref: N,
 						type: "checkbox",
-						"aria-labelledby": R,
-						"aria-describedby": z,
+						"aria-labelledby": z,
+						"aria-describedby": B,
 						"aria-checked": h ? "mixed" : void 0,
-						onChange: V,
+						onChange: H,
 						css: s
 					}),
 					/* @__PURE__ */ p("span", {
@@ -115,15 +116,15 @@ function C({ ref: e, label: n, description: f, indeterminate: h = !1, size: C =
 						],
 						children: /* @__PURE__ */ p(S, { indeterminate: h })
 					}),
-					I && /* @__PURE__ */ p("span", {
-						id: P,
+					L && /* @__PURE__ */ p("span", {
+						id: F,
 						className: E?.label?.className,
 						css: [y[C], E?.label?.css],
 						children: n
 					})
 				]
-			}), L && /* @__PURE__ */ p("span", {
-				id: F,
+			}), R && /* @__PURE__ */ p("span", {
+				id: I,
 				className: E?.description?.className,
 				css: [
 					b,

package/dist/checkbox.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Checkbox } from "./checkbox-COYG6L7d.js";
+export { t as Checkbox } from "./checkbox-DKSzExj2.js";

package/dist/chip-group-DjQ0_6Y9.js

@@ -0,0 +1,290 @@
+'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 { n as o, r as s } from "./roving-focus-CYlo_Kf8.js";
+import { t as c } from "./use-controlled-state-DpeVQZNR.js";
+import { t as l } from "./renderable-DzcIj1Lo.js";
+import { useId as u, useImperativeHandle as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
+import { vars as h } from "@jfrader/tokens/vars";
+import { jsx as g, jsxs as _ } from "@emotion/react/jsx-runtime";
+import { MotionConfig as ee, animate as v, motion as y, useReducedMotion as b } from "motion/react";
+import { base as x } from "@jfrader/tokens";
+//#region src/components/chip-group/chip-group.tsx
+var S = [], C = Symbol("overflow"), w = {
+	type: "spring",
+	stiffness: 380,
+	damping: 36
+}, te = Number.parseFloat(x.motion.duration.slow), ne = Number.parseFloat(x.motion.duration.fast) / 4, T = {
+	ownerSelector: "[data-ui=\"chip-group\"]",
+	itemSelector: "[data-ui=\"chip-group-chip\"]:not(:disabled), [data-ui=\"chip-group-overflow\"]:not(:disabled)"
+}, re = t({ minInlineSize: 0 }), ie = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: h.space[2],
+	minInlineSize: 0
+}), E = t({
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	boxSizing: "border-box",
+	minInlineSize: h.space[8],
+	maxInlineSize: "100%",
+	paddingInline: h.space[3],
+	paddingBlock: h.space[1],
+	border: `1px solid ${h.color.borderControl}`,
+	borderRadius: h.radius.full,
+	backgroundColor: h.color.surfaceRaised,
+	color: h.color.text,
+	fontFamily: h.font.sans,
+	fontWeight: h.fontWeight.medium,
+	lineHeight: h.lineHeight.base,
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color, color",
+	transitionDuration: h.motion.duration.fast,
+	transitionTimingFunction: h.motion.easeStandard,
+	"&:hover:not(:disabled)": { backgroundColor: h.color.surfaceHover },
+	"&[aria-pressed=\"true\"]": {
+		backgroundColor: h.color.accentSoft,
+		borderColor: h.color.accent,
+		color: h.color.accentText
+	},
+	"&[aria-pressed=\"true\"]:hover:not(:disabled)": { backgroundColor: h.color.accentSoftHover },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed",
+		borderStyle: "dashed"
+	},
+	"&:focus-visible": r,
+	[a]: { transitionDuration: "0s" },
+	[i]: {
+		borderColor: "CanvasText",
+		"&[aria-pressed=\"true\"]": {
+			borderColor: "Highlight",
+			color: "Highlight"
+		}
+	}
+}), D = {
+	sm: t({
+		minBlockSize: h.space[8],
+		fontSize: h.textSize.sm
+	}),
+	md: t({
+		minBlockSize: h.space[10],
+		fontSize: h.textSize.md
+	})
+}, ae = t({
+	minInlineSize: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+}), O = t({
+	display: "inline-flex",
+	flexShrink: 0,
+	overflow: "hidden",
+	alignItems: "center"
+}), k = t({
+	display: "inline-flex",
+	minInlineSize: 0,
+	maxInlineSize: "100%"
+}), A = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), oe = t({
+	animationName: A,
+	animationDuration: h.motion.duration.fast,
+	animationTimingFunction: h.motion.easeStandard,
+	animationFillMode: "backwards",
+	[a]: { animation: "none" }
+}), j = t({
+	inlineSize: h.space[4],
+	blockSize: h.space[4],
+	flexShrink: 0
+});
+function M({ ref: e, options: t, type: r = "multiple", value: i, defaultValue: a, onValueChange: h, label: v, allowEmpty: b = !0, disabled: x = !1, size: O = "md", maxVisible: A, expanded: j, defaultExpanded: M = !1, onExpandedChange: le, locale: ue, moreLabel: N, lessLabel: P, slotProps: F, className: de, sx: fe, onKeyDown: pe, onBlur: me, "aria-label": he, "aria-labelledby": I, ...ge }) {
+	if (A !== void 0 && (!Number.isInteger(A) || A < 1 || !N || P === void 0)) throw Error("ChipGroup maxVisible requires a positive integer, moreLabel and lessLabel.");
+	let [L, R] = c(i, a ?? (r === "single" ? "" : S), h), [_e, ve] = c(j, M, le), z = _e ?? !1, B = typeof L == "string" ? L === "" ? S : [L] : L ?? S, [V, ye] = m(B), [be, xe] = m(z);
+	be !== z && (xe(z), z || ye(B));
+	let H = t.filter((e, t) => z || A === void 0 || t < A || B.includes(e.value) || V.includes(e.value)), U = t.filter((e, t) => A !== void 0 && t >= A && !B.includes(e.value) && (z || !V.includes(e.value))).length, W = U > 0, G = p(null), Se = p(null), K = p(null), q = p(null), J = p(!1), [Y, X] = m(null), Z = u();
+	d(e, () => G.current, []), d(F?.row?.ref, () => K.current, []);
+	let Q = H.filter((e) => !x && !e.disabled).map((e) => e.value), $ = typeof Y == "string" && Q.includes(Y) ? Y : Q.find((e) => B.includes(e)) ?? Q[0], Ce = !x && W && (Y === C || !$);
+	return f(() => {
+		let e = G.current, t = q.current;
+		if (!e || !t || !J.current) return;
+		let n = s(e, T);
+		if (n.includes(t)) return;
+		let r = e.ownerDocument.activeElement;
+		(r === e.ownerDocument.body || r === t) && (n.find((e) => e.dataset.ui === "chip-group-overflow") ?? n[0])?.focus();
+	}), /* @__PURE__ */ g(ee, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ g(n, {
+			className: de,
+			styles: re,
+			sx: fe,
+			children: (e) => /* @__PURE__ */ g("div", {
+				...ge,
+				ref: G,
+				role: "group",
+				"aria-label": he ?? (I ? void 0 : v),
+				"aria-labelledby": I,
+				"aria-disabled": x || void 0,
+				"data-ui": "chip-group",
+				className: e,
+				onBlur: (e) => {
+					me?.(e), e.currentTarget.contains(e.relatedTarget) || (J.current = !1);
+				},
+				onKeyDown: (e) => {
+					pe?.(e), !e.defaultPrevented && o(e, e.currentTarget, e.key === "ArrowUp" || e.key === "ArrowDown" ? "vertical" : "horizontal", T);
+				},
+				children: /* @__PURE__ */ g(ce, {
+					frameRef: Se,
+					rowRef: K,
+					frameProps: F?.frame,
+					signature: JSON.stringify([z, B]),
+					children: /* @__PURE__ */ _("div", {
+						...F?.row,
+						ref: K,
+						id: Z,
+						css: [ie, F?.row?.css],
+						children: [H.map((e, n) => {
+							let i = typeof F?.chip == "function" ? F.chip(e) : F?.chip, a = B.includes(e.value);
+							return /* @__PURE__ */ g(y.div, {
+								layout: !0,
+								transition: w,
+								css: [k, z && A !== void 0 && n >= A && !V.includes(e.value) && !a && oe],
+								style: { animationDelay: `${Math.min(n * ne, te)}ms` },
+								children: /* @__PURE__ */ _("button", {
+									...i,
+									type: "button",
+									disabled: x || e.disabled,
+									"aria-pressed": a,
+									"data-ui": "chip-group-chip",
+									"data-value": e.value,
+									tabIndex: !x && !e.disabled && !Ce && $ === e.value ? 0 : -1,
+									css: [
+										E,
+										D[O],
+										i?.css
+									],
+									onFocus: (t) => {
+										i?.onFocus?.(t), q.current = t.currentTarget, J.current = !0, X(e.value);
+									},
+									onClick: (n) => {
+										if (i?.onClick?.(n), !n.defaultPrevented) {
+											if (r === "single") a ? b && R("") : R(e.value);
+											else {
+												let n = t.filter((t) => t.value === e.value ? !a : B.includes(t.value)).map((e) => e.value);
+												(n.length !== B.length || n.some((e, t) => e !== B[t])) && R(n);
+											}
+										}
+									},
+									children: [/* @__PURE__ */ g(se, {
+										pressed: a,
+										slot: F?.check
+									}), l(e.label) && /* @__PURE__ */ g("span", {
+										...F?.label,
+										css: [ae, F?.label?.css],
+										children: e.label
+									})]
+								})
+							}, e.value);
+						}), W && /* @__PURE__ */ g(y.div, {
+							layout: "position",
+							transition: w,
+							css: k,
+							children: /* @__PURE__ */ g("button", {
+								...F?.overflow,
+								type: "button",
+								disabled: x,
+								"aria-expanded": z,
+								"aria-controls": Z,
+								"data-ui": "chip-group-overflow",
+								tabIndex: Ce ? 0 : -1,
+								css: [
+									E,
+									D[O],
+									F?.overflow?.css
+								],
+								onFocus: (e) => {
+									F?.overflow?.onFocus?.(e), q.current = e.currentTarget, J.current = !0, X(C);
+								},
+								onClick: (e) => {
+									F?.overflow?.onClick?.(e), e.defaultPrevented || ve(!z);
+								},
+								children: z ? P : N(new Intl.NumberFormat(ue).format(U), U)
+							})
+						})]
+					})
+				})
+			})
+		})
+	});
+}
+M.displayName = "ChipGroup";
+function se({ pressed: e, slot: t }) {
+	return /* @__PURE__ */ g("span", {
+		...t,
+		"aria-hidden": "true",
+		css: [O, t?.css],
+		children: /* @__PURE__ */ g(y.span, {
+			css: O,
+			layout: !0,
+			style: {
+				width: e ? h.space[4] : 0,
+				marginInlineEnd: e ? h.space[2] : 0
+			},
+			transition: w,
+			children: /* @__PURE__ */ g("svg", {
+				css: j,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				children: /* @__PURE__ */ g("path", {
+					d: "m3 8 3 3 7-7",
+					stroke: "currentColor",
+					strokeWidth: "2"
+				})
+			})
+		})
+	});
+}
+function ce({ frameRef: e, rowRef: t, frameProps: n, signature: r, children: i }) {
+	let a = b();
+	d(n?.ref, () => e.current, [e]);
+	let o = p(null);
+	return f(() => {
+		let n = e.current, r = t.current;
+		if (!n || !r) return;
+		let i = r.getBoundingClientRect().height, s = o.current;
+		o.current = i;
+		let c = s !== null && s !== i && !a ? v(s, i, {
+			...w,
+			onUpdate: (e) => {
+				n.style.height = `${e}px`;
+			}
+		}) : void 0, l = !0;
+		c?.then(() => {
+			l && (n.style.height = "auto");
+		});
+		let u = new ResizeObserver(() => {
+			let e = r.getBoundingClientRect().height;
+			o.current = e, e !== i && (c?.stop(), n.style.height = "auto");
+		});
+		return u.observe(r), () => {
+			l = !1, c?.stop(), u.disconnect(), n.style.height = "auto";
+		};
+	}, [
+		r,
+		a,
+		e,
+		t
+	]), /* @__PURE__ */ g("div", {
+		...n,
+		ref: e,
+		css: n?.css,
+		children: i
+	});
+}
+//#endregion
+export { M as t };

package/dist/chip-group.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ChipGroup } from "./chip-group-DjQ0_6Y9.js";

package/dist/code-block/shiki.js

@@ -0,0 +1,147 @@
+'use client';
+import { vars as e } from "@jfrader/tokens/vars";
+import { createHighlighterCore as t, getTokenStyleObject as n } from "shiki/core";
+import { createJavaScriptRegexEngine as r } from "shiki/engine/javascript";
+//#region src/components/code-block/shiki.ts
+var i = "jfrader-ui", a = {
+	name: i,
+	colors: {
+		"editor.foreground": e.color.text,
+		"editor.background": e.color.surfaceInset
+	},
+	tokenColors: [
+		{
+			scope: [
+				"punctuation",
+				"meta.brace",
+				"keyword.operator"
+			],
+			settings: { foreground: e.color.syntaxPunctuation }
+		},
+		{
+			scope: [
+				"keyword",
+				"storage",
+				"keyword.operator.new",
+				"keyword.operator.expression",
+				"variable.language"
+			],
+			settings: { foreground: e.color.syntaxKeyword }
+		},
+		{
+			scope: [
+				"string",
+				"punctuation.definition.string",
+				"string.regexp"
+			],
+			settings: { foreground: e.color.syntaxString }
+		},
+		{
+			scope: [
+				"constant",
+				"support.constant",
+				"keyword.other.unit"
+			],
+			settings: { foreground: e.color.syntaxConstant }
+		},
+		{
+			scope: [
+				"entity.name.function",
+				"support.function",
+				"meta.function-call.generic"
+			],
+			settings: { foreground: e.color.syntaxFunction }
+		},
+		{
+			scope: [
+				"entity.name.type",
+				"entity.name.class",
+				"support.type",
+				"support.class",
+				"entity.other.inherited-class"
+			],
+			settings: { foreground: e.color.syntaxType }
+		},
+		{
+			scope: [
+				"entity.name.tag",
+				"entity.other.attribute-name.class.css",
+				"entity.other.attribute-name.id.css"
+			],
+			settings: { foreground: e.color.syntaxTag }
+		},
+		{
+			scope: [
+				"entity.other.attribute-name",
+				"support.type.property-name",
+				"meta.object-literal.key",
+				"variable.other.property"
+			],
+			settings: { foreground: e.color.syntaxProperty }
+		},
+		{
+			scope: ["comment", "punctuation.definition.comment"],
+			settings: {
+				foreground: e.color.syntaxComment,
+				fontStyle: "italic"
+			}
+		}
+	]
+}, o = {
+	javascript: () => import("shiki/langs/javascript.mjs"),
+	typescript: () => import("shiki/langs/typescript.mjs"),
+	json: () => import("shiki/langs/json.mjs"),
+	css: () => import("shiki/langs/css.mjs"),
+	shellscript: () => import("shiki/langs/shellscript.mjs"),
+	html: () => import("shiki/langs/html.mjs")
+}, s = /* @__PURE__ */ new Map([
+	["javascript", "javascript"],
+	["js", "javascript"],
+	["mjs", "javascript"],
+	["cjs", "javascript"],
+	["typescript", "typescript"],
+	["ts", "typescript"],
+	["mts", "typescript"],
+	["cts", "typescript"],
+	["json", "json"],
+	["css", "css"],
+	["bash", "shellscript"],
+	["sh", "shellscript"],
+	["shell", "shellscript"],
+	["shellscript", "shellscript"],
+	["zsh", "shellscript"],
+	["html", "html"]
+]), c, l = /* @__PURE__ */ new Map();
+function u() {
+	return c ??= t({
+		themes: [a],
+		langs: [],
+		engine: r()
+	}).catch((e) => {
+		throw c = void 0, e;
+	}), c;
+}
+function d(e, t) {
+	let n = l.get(t);
+	return n || (n = e.loadLanguage(o[t]()).catch((e) => {
+		throw l.delete(t), e;
+	}), l.set(t, n)), n;
+}
+var f = async ({ code: t, language: r }) => {
+	let a = r === void 0 ? void 0 : s.get(r.trim().toLowerCase());
+	if (!a) return null;
+	let o = await u();
+	return await d(o, a), o.codeToTokensBase(t, {
+		lang: a,
+		theme: i
+	}).map((t) => t.map((t) => {
+		let r = n(t);
+		return {
+			content: t.content,
+			color: r.color === e.color.text ? void 0 : r.color,
+			fontStyle: r["font-style"] === "italic" ? "italic" : void 0
+		};
+	}));
+};
+//#endregion
+export { f as loadShikiHighlight };