@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/data-display/Chip/Chip.mjs

@@ -0,0 +1,223 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { assignRef as n } from "../../../utils/refs.mjs";
+import { cx as r } from "../../../utils/cx.mjs";
+import { VisuallyHidden as i } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { CheckIcon as a, CloseIcon as o } from "../../primitives/Icon/icons.mjs";
+import s from "./Chip.module.css.mjs";
+import { createContext as c, useCallback as l, useContext as u, useId as d, useMemo as f, useRef as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/data-display/Chip/Chip.tsx
+var ee = {
+	solid: s.solid,
+	soft: s.soft,
+	outline: s.outline
+}, te = {
+	neutral: s.neutral,
+	primary: s.primary,
+	accent: s.accent,
+	success: s.success,
+	warning: s.warning,
+	danger: s.danger,
+	info: s.info
+}, _ = {
+	sm: s.sm,
+	md: s.md,
+	lg: s.lg
+}, ne = {
+	none: s.radiusNone,
+	xs: s.radiusXs,
+	sm: s.radiusSm,
+	md: s.radiusMd,
+	lg: s.radiusLg,
+	xl: s.radiusXl,
+	"2xl": s.radius2xl,
+	pill: s.radiusPill
+}, v = "data-chip", y = "data-chip-part", b = "data-chip-group", x = c(null), S = ({ children: c, variant: f, tone: b, size: S, radius: re = "pill", startIcon: C, avatar: w, onRemove: T, removeLabel: E, removeTabIndex: D, disabled: O, selected: k, defaultSelected: A, onSelectedChange: j, value: M, href: N, target: P, rel: ie, download: ae, onClick: oe, onKeyDown: se, className: ce, style: F, type: le, ref: I, ...L }) => {
+	let ue = t(), R = u(x), de = f ?? R?.variant ?? "soft", fe = b ?? R?.tone ?? "neutral", pe = S ?? R?.size ?? "md", z = !!O || !!R?.disabled, B = d(), V = d(), H = p(null), U = R?.selectionMode !== void 0 && M !== void 0, W = U || k !== void 0 || A !== void 0 || j !== void 0, [me, he] = e({
+		value: k,
+		defaultValue: A ?? !1,
+		onChange: U ? void 0 : j
+	}), G = U ? R.isSelected(M) : W && me, K = T !== void 0, q = N !== void 0 && !W, J = q || !q && (W || oe !== void 0), ge = J && K, _e = l((e) => {
+		H.current = e, n(I, e);
+	}, [I]), ve = l((e) => {
+		H.current = e;
+	}, []), Y = (e) => {
+		!z && T && (R && H.current && R.focusAfterRemoval(H.current, e), T());
+	}, ye = (e) => e.key === "Backspace" || e.key === "Delete", be = (e) => {
+		se?.(e), !e.defaultPrevented && J && K && ye(e) && (e.preventDefault(), Y("action"));
+	}, xe = (e) => {
+		if (z) {
+			e.preventDefault();
+			return;
+		}
+		oe?.(e), !e.defaultPrevented && W && (U ? (R.toggle(M), j?.(!G)) : he(!G));
+	}, Se = (e) => {
+		e.stopPropagation(), Y("remove");
+	}, Ce = (e) => {
+		ye(e) && (e.preventDefault(), e.stopPropagation(), Y("remove"));
+	}, X = typeof c == "string" || typeof c == "number" ? String(c) : void 0, Z = /* @__PURE__ */ g(m, { children: [
+		G && /* @__PURE__ */ h("span", {
+			className: s.check,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ h(a, {})
+		}),
+		w != null && /* @__PURE__ */ h("span", {
+			className: s.avatar,
+			"aria-hidden": "true",
+			children: w
+		}),
+		C != null && /* @__PURE__ */ h("span", {
+			className: s.icon,
+			"aria-hidden": "true",
+			children: C
+		}),
+		/* @__PURE__ */ h("span", {
+			id: B,
+			className: s.label,
+			title: X,
+			children: c
+		})
+	] }), we = K && /* @__PURE__ */ g("button", {
+		type: "button",
+		className: s.remove,
+		[y]: "remove",
+		disabled: z,
+		tabIndex: D,
+		"aria-label": E ?? (X === void 0 ? void 0 : ue.chip.removeNamed(X)),
+		"aria-labelledby": E === void 0 && X === void 0 ? `${V} ${B}` : void 0,
+		onClick: Se,
+		onKeyDown: Ce,
+		children: [E === void 0 && X === void 0 && /* @__PURE__ */ h(i, {
+			id: V,
+			children: ue.chip.remove
+		}), /* @__PURE__ */ h(o, {})]
+	}), Q = r(s.root, ee[de], te[fe], _[pe], ne[re], J && s.interactive, ge && s.split, K && s.removable, w != null && s.hasAvatar, G && s.selected, z && s.disabled, ce), Te = (e, t, n) => {
+		let r = n ? {
+			[v]: "",
+			style: F
+		} : {};
+		return q ? /* @__PURE__ */ h("a", {
+			...L,
+			...r,
+			[y]: "action",
+			ref: t,
+			className: e,
+			href: z ? void 0 : N,
+			target: P,
+			rel: ie,
+			download: ae,
+			role: z ? "link" : void 0,
+			"aria-disabled": z || void 0,
+			onClick: xe,
+			onKeyDown: be,
+			children: Z
+		}) : /* @__PURE__ */ h("button", {
+			...L,
+			...r,
+			[y]: "action",
+			ref: t,
+			type: le ?? "button",
+			className: e,
+			disabled: z,
+			"aria-pressed": W ? G : void 0,
+			onClick: xe,
+			onKeyDown: be,
+			children: Z
+		});
+	}, $;
+	return $ = ge ? /* @__PURE__ */ g("span", {
+		ref: ve,
+		className: Q,
+		style: F,
+		[v]: "",
+		children: [Te(s.action, I ?? (() => {}), !1), we]
+	}) : J ? Te(Q, _e, !0) : /* @__PURE__ */ g("span", {
+		...L,
+		ref: _e,
+		className: Q,
+		style: F,
+		"aria-disabled": z || void 0,
+		onKeyDown: se,
+		[v]: "",
+		children: [Z, we]
+	}), R?.list ? /* @__PURE__ */ h("span", {
+		role: "listitem",
+		className: s.item,
+		children: $
+	}) : $;
+}, re = {
+	sm: s.groupSm,
+	md: s.groupMd,
+	lg: s.groupLg
+};
+function C(e, t) {
+	let n = [...e.hasAttribute(y) ? [e] : [], ...Array.from(e.querySelectorAll(`[${y}]`))].filter((e) => !e.disabled && e.getAttribute("aria-disabled") !== "true");
+	return n.find((e) => e.getAttribute(y) === t) ?? n[0] ?? null;
+}
+var w = (t) => {
+	let { role: i, size: a = "md", variant: o, tone: c, disabled: u = !1, focusFallback: d, selectionMode: m, value: g, defaultValue: ee, onValueChange: te, className: _, children: ne, ref: y, ...S } = t, w = m === "multiple", T = i ?? (m ? "group" : "list"), [E, D] = e({
+		value: g,
+		defaultValue: ee ?? (w ? [] : null),
+		onChange: te
+	}), O = p(null), k = l((e) => {
+		O.current = e, n(y, e);
+	}, [y]), A = p(d);
+	A.current = d;
+	let j = f(() => Array.isArray(E) ? E : typeof E == "string" ? [E] : [], [E]), M = l((e) => j.includes(e), [j]), N = l((e) => {
+		D((t) => {
+			if (w) {
+				let n = Array.isArray(t) ? t : [];
+				return n.includes(e) ? n.filter((t) => t !== e) : [...n, e];
+			}
+			return t === e ? null : e;
+		});
+	}, [w, D]), P = l((e, t) => {
+		let n = O.current;
+		if (!n) return;
+		let r = Array.from(n.querySelectorAll(`[${v}]`)).filter((e) => e.closest(`[${b}]`) === n), i = r.indexOf(e), a = i === -1 ? [] : [...r.slice(i + 1), ...r.slice(0, i).reverse()];
+		for (let e of a) {
+			let n = C(e, t);
+			if (n) {
+				n.focus();
+				return;
+			}
+		}
+		let o = A.current, s = typeof o == "function" ? o() : o?.current;
+		s ? s.focus() : n.focus();
+	}, []), ie = f(() => ({
+		list: T === "list",
+		size: a,
+		variant: o,
+		tone: c,
+		disabled: u,
+		selectionMode: m,
+		isSelected: M,
+		toggle: N,
+		focusAfterRemoval: P
+	}), [
+		T,
+		a,
+		o,
+		c,
+		u,
+		m,
+		M,
+		N,
+		P
+	]);
+	return /* @__PURE__ */ h(x.Provider, {
+		value: ie,
+		children: /* @__PURE__ */ h("div", {
+			tabIndex: -1,
+			...S,
+			[b]: "",
+			ref: k,
+			role: T,
+			className: r(s.group, re[a], _),
+			children: ne
+		})
+	});
+};
+//#endregion
+export { S as Chip, w as ChipGroup };

package/dist/components/data-display/Chip/Chip.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_p0ngi_45`,t=`_label_p0ngi_169`,n=`_icon_p0ngi_185`,r=`_check_p0ngi_187`,i=`_avatar_p0ngi_189`,a=`_remove_p0ngi_207`,o=`_hasAvatar_p0ngi_243`,s=`_removable_p0ngi_251`,c=`_solid_p0ngi_263`,l=`_soft_p0ngi_279`,u=`_outline_p0ngi_295`,d=`_selected_p0ngi_319`,f=`_disabled_p0ngi_339`,p=`_neutral_p0ngi_365`,m=`_primary_p0ngi_387`,h=`_accent_p0ngi_409`,g=`_success_p0ngi_431`,_=`_warning_p0ngi_453`,v=`_danger_p0ngi_475`,y=`_info_p0ngi_497`,b=`_sm_p0ngi_523`,x=`_md_p0ngi_539`,S=`_lg_p0ngi_555`,C=`_radiusNone_p0ngi_575`,w=`_radiusXs_p0ngi_581`,T=`_radiusSm_p0ngi_587`,E=`_radiusMd_p0ngi_593`,D=`_radiusLg_p0ngi_599`,O=`_radiusXl_p0ngi_605`,k=`_radius2xl_p0ngi_611`,A=`_radiusPill_p0ngi_617`,j=`_interactive_p0ngi_633`,M=`_split_p0ngi_641`,N=`_action_p0ngi_699`,P=`_group_p0ngi_943`,F=`_groupSm_p0ngi_977`,I=`_groupMd_p0ngi_983`,L=`_groupLg_p0ngi_989`,R=`_item_p0ngi_999`,z={root:e,label:t,icon:n,check:r,avatar:i,remove:a,"chip-check-in":`_chip-check-in_p0ngi_1`,hasAvatar:o,removable:s,solid:c,soft:l,outline:u,selected:d,disabled:f,neutral:p,primary:m,accent:h,success:g,warning:_,danger:v,info:y,sm:b,md:x,lg:S,radiusNone:C,radiusXs:w,radiusSm:T,radiusMd:E,radiusLg:D,radiusXl:O,radius2xl:k,radiusPill:A,interactive:j,split:M,action:N,group:P,groupSm:F,groupMd:I,groupLg:L,item:R};exports.accent=h,exports.action=N,exports.avatar=i,exports.check=r,exports.danger=v,exports.default=z,exports.disabled=f,exports.group=P,exports.groupLg=L,exports.groupMd=I,exports.groupSm=F,exports.hasAvatar=o,exports.icon=n,exports.info=y,exports.interactive=j,exports.item=R,exports.label=t,exports.lg=S,exports.md=x,exports.neutral=p,exports.outline=u,exports.primary=m,exports.radius2xl=k,exports.radiusLg=D,exports.radiusMd=E,exports.radiusNone=C,exports.radiusPill=A,exports.radiusSm=T,exports.radiusXl=O,exports.radiusXs=w,exports.removable=s,exports.remove=a,exports.root=e,exports.selected=d,exports.sm=b,exports.soft=l,exports.solid=c,exports.split=M,exports.success=g,exports.warning=_;

package/dist/components/data-display/Chip/Chip.module.css.mjs

@@ -0,0 +1,45 @@
+//#region src/components/data-display/Chip/Chip.module.css
+var e = "_root_p0ngi_45", t = "_label_p0ngi_169", n = "_icon_p0ngi_185", r = "_check_p0ngi_187", i = "_avatar_p0ngi_189", a = "_remove_p0ngi_207", o = "_hasAvatar_p0ngi_243", s = "_removable_p0ngi_251", c = "_solid_p0ngi_263", l = "_soft_p0ngi_279", u = "_outline_p0ngi_295", d = "_selected_p0ngi_319", f = "_disabled_p0ngi_339", p = "_neutral_p0ngi_365", m = "_primary_p0ngi_387", h = "_accent_p0ngi_409", g = "_success_p0ngi_431", _ = "_warning_p0ngi_453", v = "_danger_p0ngi_475", y = "_info_p0ngi_497", b = "_sm_p0ngi_523", x = "_md_p0ngi_539", S = "_lg_p0ngi_555", C = "_radiusNone_p0ngi_575", w = "_radiusXs_p0ngi_581", T = "_radiusSm_p0ngi_587", E = "_radiusMd_p0ngi_593", D = "_radiusLg_p0ngi_599", O = "_radiusXl_p0ngi_605", k = "_radius2xl_p0ngi_611", A = "_radiusPill_p0ngi_617", j = "_interactive_p0ngi_633", M = "_split_p0ngi_641", N = "_action_p0ngi_699", P = "_group_p0ngi_943", F = "_groupSm_p0ngi_977", I = "_groupMd_p0ngi_983", L = "_groupLg_p0ngi_989", R = "_item_p0ngi_999", z = {
+	root: e,
+	label: t,
+	icon: n,
+	check: r,
+	avatar: i,
+	remove: a,
+	"chip-check-in": "_chip-check-in_p0ngi_1",
+	hasAvatar: o,
+	removable: s,
+	solid: c,
+	soft: l,
+	outline: u,
+	selected: d,
+	disabled: f,
+	neutral: p,
+	primary: m,
+	accent: h,
+	success: g,
+	warning: _,
+	danger: v,
+	info: y,
+	sm: b,
+	md: x,
+	lg: S,
+	radiusNone: C,
+	radiusXs: w,
+	radiusSm: T,
+	radiusMd: E,
+	radiusLg: D,
+	radiusXl: O,
+	radius2xl: k,
+	radiusPill: A,
+	interactive: j,
+	split: M,
+	action: N,
+	group: P,
+	groupSm: F,
+	groupMd: I,
+	groupLg: L,
+	item: R
+};
+//#endregion
+export { h as accent, N as action, i as avatar, r as check, v as danger, z as default, f as disabled, P as group, L as groupLg, I as groupMd, F as groupSm, o as hasAvatar, n as icon, y as info, j as interactive, R as item, t as label, S as lg, x as md, p as neutral, u as outline, m as primary, k as radius2xl, D as radiusLg, E as radiusMd, C as radiusNone, A as radiusPill, T as radiusSm, O as radiusXl, w as radiusXs, s as removable, a as remove, e as root, d as selected, b as sm, l as soft, c as solid, M as split, g as success, _ as warning };

package/dist/components/data-display/Chip/index.d.ts

@@ -0,0 +1 @@
+export * from './Chip';

package/dist/components/data-display/CodeBlock/CodeBlock.cjs.js

@@ -0,0 +1,6 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/clipboard.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),i=require("../../primitives/Button/Button.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("./tokenize.cjs.js"),s=require("./CodeBlock.module.css.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var ee={neutral:s.default.highlightNeutral,primary:s.default.highlightPrimary,accent:s.default.highlightAccent,success:s.default.highlightSuccess,warning:s.default.highlightWarning,danger:s.default.highlightDanger,info:s.default.highlightInfo},u={neutral:s.default.inlineNeutral,primary:s.default.inlinePrimary,accent:s.default.inlineAccent,success:s.default.inlineSuccess,warning:s.default.inlineWarning,danger:s.default.inlineDanger,info:s.default.inlineInfo},d={keyword:s.default.tokenKeyword,string:s.default.tokenString,number:s.default.tokenNumber,comment:s.default.tokenComment,punctuation:s.default.tokenPunctuation,tag:s.default.tokenTag,attribute:s.default.tokenAttribute,plain:void 0},f={added:s.default.diffAdded,removed:s.default.diffRemoved,hunk:s.default.diffHunk,context:void 0};function te(e){return e.replace(/^\r?\n/,``).replace(/\s+$/,``).replace(/\r\n?/g,`
+`)}function p(e){let t=new Set;for(let n of e??[]){let e=String(n).trim().match(/^(\d+)(?:\s*-\s*(\d+))?$/);if(!e)continue;let r=Number(e[1]),i=e[2]?Number(e[2]):r;for(let e=Math.min(r,i);e<=Math.max(r,i);e++)t.add(e)}return t}function ne(e){let t=[[]];for(let n of e)n.content.split(`
+`).forEach((e,r)=>{r>0&&t.push([]),e&&t[t.length-1].push({type:n.type,content:e})});return t}function m(e){return e.startsWith(`@@`)?`hunk`:e.startsWith(`+`)?`added`:e.startsWith(`-`)?`removed`:`context`}var h=({tone:e=`neutral`,className:t,children:r,...i})=>(0,l.jsx)(`code`,{...i,className:n.cx(s.default.inline,u[e],t),children:r}),g=({code:u,children:h,language:g,title:_,showLineNumbers:v=!1,startLine:y=1,highlightLines:b,highlightTone:x=`primary`,highlightLabel:S,diff:C=!1,wrap:w=!1,maxHeight:T,copyable:E=!0,onCopyStatusChange:D,copyLabel:O,copiedLabel:k,copyErrorLabel:A,copiedDuration:j=2e3,highlighter:M,regionLabel:re,preClassName:ie,className:ae,style:oe,...se})=>{let N=e.useMessages(),ce=O??N.codeBlock.copy,le=k??N.codeBlock.copied,P=A??N.codeBlock.copyError,F=(0,c.useMemo)(()=>te(u??h??``),[u,h]),I=(0,c.useMemo)(()=>F.split(`
+`),[F]),L=(0,c.useMemo)(()=>C?I.map(m):void 0,[C,I]),R=(0,c.useMemo)(()=>C?I.map((e,t)=>L[t]===`hunk`?e:e.slice(1)).join(`
+`):F,[C,I,L,F]),z=(0,c.useMemo)(()=>M?M(R,g):void 0,[M,R,g]),B=Array.isArray(z)&&z.length===I.length?z:void 0,V=M!==void 0&&B===void 0,H=(0,c.useMemo)(()=>M?void 0:ne(o.tokenizeCode(R,g)),[M,R,g]),U=(0,c.useMemo)(()=>p(b),[b]),W=(0,c.useRef)(null),[G,ue]=(0,c.useState)(!1);(0,c.useEffect)(()=>{let e=W.current;if(!e)return;let t=()=>ue(e.scrollWidth>e.clientWidth+1||e.scrollHeight>e.clientHeight+1);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),e.firstElementChild&&n.observe(e.firstElementChild),()=>n.disconnect()},[F,w,T,v,C]);let[K,de]=(0,c.useState)(`idle`),q=(0,c.useRef)(void 0),J=(0,c.useRef)(D);J.current=D,(0,c.useEffect)(()=>()=>clearTimeout(q.current),[]);let Y=(0,c.useCallback)(e=>{de(e),J.current?.(e)},[]),fe=(0,c.useCallback)(async()=>{clearTimeout(q.current);try{await t.copyToClipboard(F),Y(`copied`)}catch{Y(`error`)}q.current=setTimeout(()=>Y(`idle`),j)},[F,j,Y]),X=typeof _==`string`||typeof _==`number`?String(_):void 0,pe=re??N.codeBlock.region(X??g??N.codeBlock.snippet),Z=_!=null||!!g||E,me=y+I.length-1,Q=(e,t)=>{let i=y+t,a=U.has(i),o=L?.[t],c=o===`added`?`+`:o===`removed`?`-`:o===`context`?I[t].charAt(0):``;return(0,l.jsxs)(`span`,{className:n.cx(s.default.line,a&&s.default.highlighted,a&&ee[x],o&&f[o]),"data-line":i,"data-highlighted":a||void 0,"data-diff":o,children:[v&&(0,l.jsx)(`span`,{className:s.default.lineNumber,"data-line-number":i,"aria-hidden":`true`}),C&&(0,l.jsx)(`span`,{className:s.default.diffSign,children:o===`hunk`?``:c}),(0,l.jsxs)(`span`,{className:s.default.lineContent,children:[a&&S&&(0,l.jsx)(r.VisuallyHidden,{children:`${S} `}),e,`
+`]})]},t)},$;$=V?z:B?B.map(Q):H.map((e,t)=>Q(e.map((e,t)=>d[e.type]?(0,l.jsx)(`span`,{className:d[e.type],children:e.content},t):e.content),t));let he={"--_code-digits":String(String(me).length),...oe},ge=T===void 0?void 0:{maxBlockSize:typeof T==`number`?`${T}px`:T};return(0,l.jsxs)(`div`,{...se,className:n.cx(s.default.root,w?s.default.wrap:s.default.scroll,v&&s.default.withLineNumbers,C&&s.default.diff,!Z&&s.default.noHeader,ae),style:he,children:[Z&&(0,l.jsxs)(`div`,{className:s.default.header,children:[(0,l.jsxs)(`div`,{className:s.default.meta,children:[_!=null&&(0,l.jsx)(`span`,{className:s.default.title,children:_}),g&&(0,l.jsx)(`span`,{className:s.default.language,children:g})]}),E&&(0,l.jsx)(i.IconButton,{"aria-label":ce,variant:`ghost`,tone:`neutral`,size:`sm`,className:s.default.copy,"data-status":K,onClick:fe,children:(0,l.jsx)(`span`,{className:s.default.copyIcon,children:K===`copied`?(0,l.jsx)(a.CheckIcon,{}):K===`error`?(0,l.jsx)(a.ErrorIcon,{}):(0,l.jsx)(a.CopyIcon,{})},K)})]}),(0,l.jsx)(`pre`,{ref:W,className:n.cx(s.default.pre,ie),style:ge,tabIndex:G?0:void 0,role:G?`region`:void 0,"aria-label":G?pe:void 0,children:(0,l.jsx)(`code`,{className:s.default.code,"data-language":g,children:$})}),E&&(0,l.jsx)(r.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:K===`copied`?le:K===`error`?P:``})]})};exports.Code=h,exports.CodeBlock=g,exports.parseLineSelectors=p,exports.resolveTokenizerLanguage=o.resolveTokenizerLanguage,exports.tokenizeCode=o.tokenizeCode;

package/dist/components/data-display/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,96 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Tone } from '../../../types/common';
+export { tokenizeCode, resolveTokenizerLanguage, type CodeToken, type CodeTokenType, type TokenizerLanguage, } from './tokenize';
+/**
+ * Language of a code sample. The listed names get built-in highlighting;
+ * any other string is shown as the header label and rendered plain.
+ */
+export type CodeLanguage = "ts" | "tsx" | "js" | "jsx" | "typescript" | "javascript" | "css" | "json" | "bash" | "sh" | "shell" | "html" | "xml" | (string & {});
+/** A line to highlight: a 1-based line number, or an inclusive range such as `"5-7"`. */
+export type CodeLineSelector = number | `${number}` | `${number}-${number}`;
+/** Result of a copy attempt, passed to `onCopyStatusChange`. `idle` is restored after `copiedDuration`. */
+export type CodeCopyStatus = "idle" | "copied" | "error";
+/** Kind of a line in `diff` mode, from its first character. */
+export type CodeDiffKind = "added" | "removed" | "hunk" | "context";
+/**
+ * Custom highlighter. Return one node per line (an array the same length as
+ * the code's lines) to keep line numbers, highlighted lines, and diff
+ * gutters; return any other node to replace the whole code body (line
+ * features are then skipped).
+ */
+export type CodeHighlighter = (code: string, language: string | undefined) => ReactNode;
+/** Expands `[2, "5-7"]` into a set of line numbers. Invalid entries are ignored. */
+export declare function parseLineSelectors(selectors: readonly CodeLineSelector[] | undefined): Set<number>;
+export interface CodeOwnProps {
+    /** Semantic color of the soft background. @default "neutral" */
+    tone?: Tone;
+    /** The code text. */
+    children?: ReactNode;
+}
+export type CodeProps = CodeOwnProps & Omit<ComponentPropsWithRef<"code">, keyof CodeOwnProps>;
+/**
+ * Inline code inside running text, e.g. a prop name or a command. Renders a
+ * native `<code>` in the mono font on a soft tinted background. Its size
+ * follows the surrounding text.
+ */
+export declare const Code: ({ tone, className, children, ...rest }: CodeProps) => import("react").JSX.Element;
+export interface CodeBlockOwnProps {
+    /** The source to show and copy. Takes precedence over `children`. One leading newline and trailing whitespace are trimmed. */
+    code?: string;
+    /** The source as a plain string, when `code` isn't set. */
+    children?: string;
+    /** Language, used for highlighting and shown as the header label (e.g. `"tsx"`, `"css"`). Unknown languages render plain. */
+    language?: CodeLanguage;
+    /** Filename or title shown in the header, e.g. `"Button.tsx"`. Also names the scroll region. */
+    title?: ReactNode;
+    /** Shows line numbers in a gutter. They're hidden from assistive technology and never selected or copied. @default false */
+    showLineNumbers?: boolean;
+    /** Number of the first line, for excerpts. @default 1 */
+    startLine?: number;
+    /** Lines to emphasize, e.g. `[2, "5-7"]` (numbers as shown in the gutter). Marked with a tint and a left bar, not color alone. */
+    highlightLines?: readonly CodeLineSelector[];
+    /** Tint of highlighted lines. @default "primary" */
+    highlightTone?: Tone;
+    /**
+     * Screen-reader text added at the start of each highlighted line, e.g.
+     * `"Highlighted:"`. Off by default because it's also included when a user
+     * selects and copies text by hand (the copy button never includes it).
+     */
+    highlightLabel?: string;
+    /** Diff mode: lines starting with `+` / `-` get a success / danger tint and a `+` / `-` sign in a gutter. `@@` lines are hunk headers. @default false */
+    diff?: boolean;
+    /** Soft-wraps long lines instead of scrolling horizontally. @default false */
+    wrap?: boolean;
+    /** Maximum height before the code scrolls vertically. Numbers are pixels; strings are any CSS length. */
+    maxHeight?: number | string;
+    /** Shows a "Copy code" button in the header. @default true */
+    copyable?: boolean;
+    /** Called with the result of each copy attempt, then with `"idle"` when the confirmation resets. */
+    onCopyStatusChange?: (status: CodeCopyStatus) => void;
+    /** Accessible name of the copy button. @default "Copy code" */
+    copyLabel?: string;
+    /** Announcement after a successful copy. @default "Copied" */
+    copiedLabel?: string;
+    /** Announcement when copying fails. @default "Couldn't copy. Select the code and copy it manually." */
+    copyErrorLabel?: string;
+    /** How long the copied (or error) state shows, in ms. @default 2000 */
+    copiedDuration?: number;
+    /** Replaces the built-in tokenizer. See `CodeHighlighter`. */
+    highlighter?: CodeHighlighter;
+    /** Accessible name of the scroll region when it overflows. @default `"Code: {title or language}"` */
+    regionLabel?: string;
+    /** Extra class for the `<pre>` scroll container. */
+    preClassName?: string;
+}
+export type CodeBlockProps = CodeBlockOwnProps & Omit<ComponentPropsWithRef<"div">, keyof CodeBlockOwnProps>;
+/**
+ * A block of source code with a header (language and filename), a copy
+ * button, optional line numbers, highlighted lines, and diff gutters.
+ * Highlighting uses the built-in, dependency-free `tokenizeCode`, or your
+ * own `highlighter`.
+ *
+ * Accessibility: renders `<pre><code>`. When the code overflows (scrolls),
+ * the `<pre>` becomes a focusable `role="region"` with a name, so keyboard
+ * users can scroll it. Copy results are announced in a polite live region.
+ */
+export declare const CodeBlock: ({ code: codeProp, children, language, title, showLineNumbers, startLine, highlightLines, highlightTone, highlightLabel, diff, wrap, maxHeight, copyable, onCopyStatusChange, copyLabel: copyLabelProp, copiedLabel: copiedLabelProp, copyErrorLabel: copyErrorLabelProp, copiedDuration, highlighter, regionLabel, preClassName, className, style, ...rest }: CodeBlockProps) => import("react").JSX.Element;

package/dist/components/data-display/CodeBlock/CodeBlock.mjs

@@ -0,0 +1,207 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { copyToClipboard as t } from "../../../utils/clipboard.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { VisuallyHidden as r } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { IconButton as i } from "../../primitives/Button/Button.mjs";
+import { CheckIcon as a, CopyIcon as o, ErrorIcon as s } from "../../primitives/Icon/icons.mjs";
+import { resolveTokenizerLanguage as c, tokenizeCode as l } from "./tokenize.mjs";
+import u from "./CodeBlock.module.css.mjs";
+import { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/data-display/CodeBlock/CodeBlock.tsx
+var ee = {
+	neutral: u.highlightNeutral,
+	primary: u.highlightPrimary,
+	accent: u.highlightAccent,
+	success: u.highlightSuccess,
+	warning: u.highlightWarning,
+	danger: u.highlightDanger,
+	info: u.highlightInfo
+}, v = {
+	neutral: u.inlineNeutral,
+	primary: u.inlinePrimary,
+	accent: u.inlineAccent,
+	success: u.inlineSuccess,
+	warning: u.inlineWarning,
+	danger: u.inlineDanger,
+	info: u.inlineInfo
+}, y = {
+	keyword: u.tokenKeyword,
+	string: u.tokenString,
+	number: u.tokenNumber,
+	comment: u.tokenComment,
+	punctuation: u.tokenPunctuation,
+	tag: u.tokenTag,
+	attribute: u.tokenAttribute,
+	plain: void 0
+}, te = {
+	added: u.diffAdded,
+	removed: u.diffRemoved,
+	hunk: u.diffHunk,
+	context: void 0
+};
+function ne(e) {
+	return e.replace(/^\r?\n/, "").replace(/\s+$/, "").replace(/\r\n?/g, "\n");
+}
+function b(e) {
+	let t = /* @__PURE__ */ new Set();
+	for (let n of e ?? []) {
+		let e = String(n).trim().match(/^(\d+)(?:\s*-\s*(\d+))?$/);
+		if (!e) continue;
+		let r = Number(e[1]), i = e[2] ? Number(e[2]) : r;
+		for (let e = Math.min(r, i); e <= Math.max(r, i); e++) t.add(e);
+	}
+	return t;
+}
+function x(e) {
+	let t = [[]];
+	for (let n of e) n.content.split("\n").forEach((e, r) => {
+		r > 0 && t.push([]), e && t[t.length - 1].push({
+			type: n.type,
+			content: e
+		});
+	});
+	return t;
+}
+function S(e) {
+	return e.startsWith("@@") ? "hunk" : e.startsWith("+") ? "added" : e.startsWith("-") ? "removed" : "context";
+}
+var C = ({ tone: e = "neutral", className: t, children: r, ...i }) => /* @__PURE__ */ g("code", {
+	...i,
+	className: n(u.inline, v[e], t),
+	children: r
+}), w = ({ code: c, children: v, language: C, title: w, showLineNumbers: T = !1, startLine: E = 1, highlightLines: D, highlightTone: re = "primary", highlightLabel: O, diff: k = !1, wrap: A = !1, maxHeight: j, copyable: M = !0, onCopyStatusChange: N, copyLabel: ie, copiedLabel: ae, copyErrorLabel: oe, copiedDuration: P = 2e3, highlighter: F, regionLabel: se, preClassName: ce, className: le, style: ue, ...de }) => {
+	let I = e(), fe = ie ?? I.codeBlock.copy, pe = ae ?? I.codeBlock.copied, L = oe ?? I.codeBlock.copyError, R = p(() => ne(c ?? v ?? ""), [c, v]), z = p(() => R.split("\n"), [R]), B = p(() => k ? z.map(S) : void 0, [k, z]), V = p(() => k ? z.map((e, t) => B[t] === "hunk" ? e : e.slice(1)).join("\n") : R, [
+		k,
+		z,
+		B,
+		R
+	]), H = p(() => F ? F(V, C) : void 0, [
+		F,
+		V,
+		C
+	]), U = Array.isArray(H) && H.length === z.length ? H : void 0, me = F !== void 0 && U === void 0, he = p(() => F ? void 0 : x(l(V, C)), [
+		F,
+		V,
+		C
+	]), ge = p(() => b(D), [D]), W = m(null), [G, _e] = h(!1);
+	f(() => {
+		let e = W.current;
+		if (!e) return;
+		let t = () => _e(e.scrollWidth > e.clientWidth + 1 || e.scrollHeight > e.clientHeight + 1);
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), e.firstElementChild && n.observe(e.firstElementChild), () => n.disconnect();
+	}, [
+		R,
+		A,
+		j,
+		T,
+		k
+	]);
+	let [K, ve] = h("idle"), q = m(void 0), J = m(N);
+	J.current = N, f(() => () => clearTimeout(q.current), []);
+	let Y = d((e) => {
+		ve(e), J.current?.(e);
+	}, []), ye = d(async () => {
+		clearTimeout(q.current);
+		try {
+			await t(R), Y("copied");
+		} catch {
+			Y("error");
+		}
+		q.current = setTimeout(() => Y("idle"), P);
+	}, [
+		R,
+		P,
+		Y
+	]), X = typeof w == "string" || typeof w == "number" ? String(w) : void 0, be = se ?? I.codeBlock.region(X ?? C ?? I.codeBlock.snippet), Z = w != null || !!C || M, xe = E + z.length - 1, Q = (e, t) => {
+		let i = E + t, a = ge.has(i), o = B?.[t], s = o === "added" ? "+" : o === "removed" ? "-" : o === "context" ? z[t].charAt(0) : "";
+		return /* @__PURE__ */ _("span", {
+			className: n(u.line, a && u.highlighted, a && ee[re], o && te[o]),
+			"data-line": i,
+			"data-highlighted": a || void 0,
+			"data-diff": o,
+			children: [
+				T && /* @__PURE__ */ g("span", {
+					className: u.lineNumber,
+					"data-line-number": i,
+					"aria-hidden": "true"
+				}),
+				k && /* @__PURE__ */ g("span", {
+					className: u.diffSign,
+					children: o === "hunk" ? "" : s
+				}),
+				/* @__PURE__ */ _("span", {
+					className: u.lineContent,
+					children: [
+						a && O && /* @__PURE__ */ g(r, { children: `${O} ` }),
+						e,
+						"\n"
+					]
+				})
+			]
+		}, t);
+	}, $;
+	$ = me ? H : U ? U.map(Q) : he.map((e, t) => Q(e.map((e, t) => y[e.type] ? /* @__PURE__ */ g("span", {
+		className: y[e.type],
+		children: e.content
+	}, t) : e.content), t));
+	let Se = {
+		"--_code-digits": String(String(xe).length),
+		...ue
+	}, Ce = j === void 0 ? void 0 : { maxBlockSize: typeof j == "number" ? `${j}px` : j };
+	return /* @__PURE__ */ _("div", {
+		...de,
+		className: n(u.root, A ? u.wrap : u.scroll, T && u.withLineNumbers, k && u.diff, !Z && u.noHeader, le),
+		style: Se,
+		children: [
+			Z && /* @__PURE__ */ _("div", {
+				className: u.header,
+				children: [/* @__PURE__ */ _("div", {
+					className: u.meta,
+					children: [w != null && /* @__PURE__ */ g("span", {
+						className: u.title,
+						children: w
+					}), C && /* @__PURE__ */ g("span", {
+						className: u.language,
+						children: C
+					})]
+				}), M && /* @__PURE__ */ g(i, {
+					"aria-label": fe,
+					variant: "ghost",
+					tone: "neutral",
+					size: "sm",
+					className: u.copy,
+					"data-status": K,
+					onClick: ye,
+					children: /* @__PURE__ */ g("span", {
+						className: u.copyIcon,
+						children: g(K === "copied" ? a : K === "error" ? s : o, {})
+					}, K)
+				})]
+			}),
+			/* @__PURE__ */ g("pre", {
+				ref: W,
+				className: n(u.pre, ce),
+				style: Ce,
+				tabIndex: G ? 0 : void 0,
+				role: G ? "region" : void 0,
+				"aria-label": G ? be : void 0,
+				children: /* @__PURE__ */ g("code", {
+					className: u.code,
+					"data-language": C,
+					children: $
+				})
+			}),
+			M && /* @__PURE__ */ g(r, {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: K === "copied" ? pe : K === "error" ? L : ""
+			})
+		]
+	});
+};
+//#endregion
+export { C as Code, w as CodeBlock, b as parseLineSelectors, c as resolveTokenizerLanguage, l as tokenizeCode };

package/dist/components/data-display/CodeBlock/CodeBlock.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_inline_bpd4y_39`,t=`_inlineNeutral_bpd4y_73`,n=`_inlinePrimary_bpd4y_81`,r=`_inlineAccent_bpd4y_89`,i=`_inlineSuccess_bpd4y_97`,a=`_inlineWarning_bpd4y_105`,o=`_inlineDanger_bpd4y_113`,s=`_inlineInfo_bpd4y_121`,c=`_root_bpd4y_151`,l=`_header_bpd4y_181`,u=`_meta_bpd4y_209`,d=`_title_bpd4y_223`,f=`_language_bpd4y_245`,p=`_copy_bpd4y_265`,m=`_copyIcon_bpd4y_275`,h=`_pre_bpd4y_327`,g=`_noHeader_bpd4y_353`,_=`_code_bpd4y_371`,v=`_scroll_bpd4y_383`,y=`_line_bpd4y_393`,b=`_lineContent_bpd4y_407`,x=`_wrap_bpd4y_419`,S=`_lineNumber_bpd4y_431`,C=`_highlighted_bpd4y_469`,w=`_highlightNeutral_bpd4y_479`,T=`_highlightPrimary_bpd4y_487`,E=`_highlightAccent_bpd4y_495`,D=`_highlightSuccess_bpd4y_503`,O=`_highlightWarning_bpd4y_511`,k=`_highlightDanger_bpd4y_519`,A=`_highlightInfo_bpd4y_527`,j=`_diffSign_bpd4y_545`,M=`_diffAdded_bpd4y_559`,N=`_diffRemoved_bpd4y_575`,P=`_diffHunk_bpd4y_591`,F=`_tokenKeyword_bpd4y_621`,I=`_tokenString_bpd4y_629`,L=`_tokenNumber_bpd4y_635`,R=`_tokenComment_bpd4y_641`,z=`_tokenPunctuation_bpd4y_649`,B=`_tokenTag_bpd4y_655`,V=`_tokenAttribute_bpd4y_663`,H={inline:e,inlineNeutral:t,inlinePrimary:n,inlineAccent:r,inlineSuccess:i,inlineWarning:a,inlineDanger:o,inlineInfo:s,root:c,header:l,meta:u,title:d,language:f,copy:p,copyIcon:m,"copy-pop":`_copy-pop_bpd4y_1`,pre:h,noHeader:g,code:_,scroll:v,line:y,lineContent:b,wrap:x,lineNumber:S,highlighted:C,highlightNeutral:w,highlightPrimary:T,highlightAccent:E,highlightSuccess:D,highlightWarning:O,highlightDanger:k,highlightInfo:A,diffSign:j,diffAdded:M,diffRemoved:N,diffHunk:P,tokenKeyword:F,tokenString:I,tokenNumber:L,tokenComment:R,tokenPunctuation:z,tokenTag:B,tokenAttribute:V};exports.code=_,exports.copy=p,exports.copyIcon=m,exports.default=H,exports.diffAdded=M,exports.diffHunk=P,exports.diffRemoved=N,exports.diffSign=j,exports.header=l,exports.highlightAccent=E,exports.highlightDanger=k,exports.highlightInfo=A,exports.highlightNeutral=w,exports.highlightPrimary=T,exports.highlightSuccess=D,exports.highlightWarning=O,exports.highlighted=C,exports.inline=e,exports.inlineAccent=r,exports.inlineDanger=o,exports.inlineInfo=s,exports.inlineNeutral=t,exports.inlinePrimary=n,exports.inlineSuccess=i,exports.inlineWarning=a,exports.language=f,exports.line=y,exports.lineContent=b,exports.lineNumber=S,exports.meta=u,exports.noHeader=g,exports.pre=h,exports.root=c,exports.scroll=v,exports.title=d,exports.tokenAttribute=V,exports.tokenComment=R,exports.tokenKeyword=F,exports.tokenNumber=L,exports.tokenPunctuation=z,exports.tokenString=I,exports.tokenTag=B,exports.wrap=x;

package/dist/components/data-display/CodeBlock/CodeBlock.module.css.mjs

@@ -0,0 +1,48 @@
+//#region src/components/data-display/CodeBlock/CodeBlock.module.css
+var e = "_inline_bpd4y_39", t = "_inlineNeutral_bpd4y_73", n = "_inlinePrimary_bpd4y_81", r = "_inlineAccent_bpd4y_89", i = "_inlineSuccess_bpd4y_97", a = "_inlineWarning_bpd4y_105", o = "_inlineDanger_bpd4y_113", s = "_inlineInfo_bpd4y_121", c = "_root_bpd4y_151", l = "_header_bpd4y_181", u = "_meta_bpd4y_209", d = "_title_bpd4y_223", f = "_language_bpd4y_245", p = "_copy_bpd4y_265", m = "_copyIcon_bpd4y_275", h = "_pre_bpd4y_327", g = "_noHeader_bpd4y_353", _ = "_code_bpd4y_371", v = "_scroll_bpd4y_383", y = "_line_bpd4y_393", b = "_lineContent_bpd4y_407", x = "_wrap_bpd4y_419", S = "_lineNumber_bpd4y_431", C = "_highlighted_bpd4y_469", w = "_highlightNeutral_bpd4y_479", T = "_highlightPrimary_bpd4y_487", E = "_highlightAccent_bpd4y_495", D = "_highlightSuccess_bpd4y_503", O = "_highlightWarning_bpd4y_511", k = "_highlightDanger_bpd4y_519", A = "_highlightInfo_bpd4y_527", j = "_diffSign_bpd4y_545", M = "_diffAdded_bpd4y_559", N = "_diffRemoved_bpd4y_575", P = "_diffHunk_bpd4y_591", F = "_tokenKeyword_bpd4y_621", I = "_tokenString_bpd4y_629", L = "_tokenNumber_bpd4y_635", R = "_tokenComment_bpd4y_641", z = "_tokenPunctuation_bpd4y_649", B = "_tokenTag_bpd4y_655", V = "_tokenAttribute_bpd4y_663", H = {
+	inline: e,
+	inlineNeutral: t,
+	inlinePrimary: n,
+	inlineAccent: r,
+	inlineSuccess: i,
+	inlineWarning: a,
+	inlineDanger: o,
+	inlineInfo: s,
+	root: c,
+	header: l,
+	meta: u,
+	title: d,
+	language: f,
+	copy: p,
+	copyIcon: m,
+	"copy-pop": "_copy-pop_bpd4y_1",
+	pre: h,
+	noHeader: g,
+	code: _,
+	scroll: v,
+	line: y,
+	lineContent: b,
+	wrap: x,
+	lineNumber: S,
+	highlighted: C,
+	highlightNeutral: w,
+	highlightPrimary: T,
+	highlightAccent: E,
+	highlightSuccess: D,
+	highlightWarning: O,
+	highlightDanger: k,
+	highlightInfo: A,
+	diffSign: j,
+	diffAdded: M,
+	diffRemoved: N,
+	diffHunk: P,
+	tokenKeyword: F,
+	tokenString: I,
+	tokenNumber: L,
+	tokenComment: R,
+	tokenPunctuation: z,
+	tokenTag: B,
+	tokenAttribute: V
+};
+//#endregion
+export { _ as code, p as copy, m as copyIcon, H as default, M as diffAdded, P as diffHunk, N as diffRemoved, j as diffSign, l as header, E as highlightAccent, k as highlightDanger, A as highlightInfo, w as highlightNeutral, T as highlightPrimary, D as highlightSuccess, O as highlightWarning, C as highlighted, e as inline, r as inlineAccent, o as inlineDanger, s as inlineInfo, t as inlineNeutral, n as inlinePrimary, i as inlineSuccess, a as inlineWarning, f as language, y as line, b as lineContent, S as lineNumber, u as meta, g as noHeader, h as pre, c as root, v as scroll, d as title, V as tokenAttribute, R as tokenComment, F as tokenKeyword, L as tokenNumber, z as tokenPunctuation, I as tokenString, B as tokenTag, x as wrap };

package/dist/components/data-display/CodeBlock/index.d.ts

@@ -0,0 +1 @@
+export * from './CodeBlock';