@jfrader/ui 0.4.0 → 0.5.0

package/dist/chip-group-DTQd_M-G.js

@@ -0,0 +1,289 @@
+'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"
+	},
+	"&: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-DTQd_M-G.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 };