@imfusion/web-ui 0.11.1-dev.83.g3251cc92 → 0.11.1-dev.87.g55c5e1df

package/CHANGELOG.md

@@ -10,6 +10,13 @@
 
 ### Added
 
+- `RichLink` takes `size="sm"` for dense lists: 6px block padding, a 32px tile, and a closer gap between glyph and text. The default `md` is unchanged.
+  [RichLink](src/components/rich-link/rich-link.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `Code.Inline` takes `concealable` to hide its content behind an eye button, hidden by default. `concealed` and
+  `onConcealedChange` control it, `defaultConcealed` sets its start, and `concealedLength` sets the placeholder width before a
+  value arrives. `copyConcealed` keeps copy working while hidden, `toggleLabel` names the eye button, and `size` (`sm`, `md`,
+  `lg`) sets the chip height.
+  [Code](src/components/code/code.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `Avatar` takes `size="xs"`, 16px with smaller initials, to sit in the slot of a 16px icon or swatch in a list row.
   [Avatar](src/components/avatar/avatar.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `Input` takes `shortcut` to show a key such as `/` or `Ctrl K` at its end and set `aria-keyshortcuts`. The key hides before the

package/dist/code-BtxeEf9P.js

@@ -0,0 +1,185 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { Hu as t, Vu as n, Xo as r, ja as i, vM as a } from "./icons-CMetKl2x.js";
+import { t as o } from "./meta-V_KyLeGn.js";
+import { a as s, i as c, n as l, o as u, s as d } from "./scroll-area-CXQ_SxPX.js";
+import { cva as f, cx as p } from "class-variance-authority";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Children as _, isValidElement as v, useCallback as y, useEffect as b, useRef as x, useState as S } from "react";
+import { Toggle as C } from "@base-ui/react/toggle";
+import { useRender as w } from "@base-ui/react/use-render";
+import { mergeProps as T } from "@base-ui/react/merge-props";
+//#region src/hooks/use-clipboard.ts
+function E({ timeout: e = 1500 } = {}) {
+	let [t, n] = S(!1), r = x(void 0);
+	return b(() => () => clearTimeout(r.current), []), {
+		copied: t,
+		copy: y((t) => {
+			navigator.clipboard.writeText(t).then(() => {
+				n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
+			});
+		}, [e])
+	};
+}
+var D = {
+	block: "imf-ui-code-module-block",
+	copy: "imf-ui-code-module-copy",
+	inline: "imf-ui-code-module-inline",
+	inlineCopy: "imf-ui-code-module-inlineCopy",
+	inlineEye: "imf-ui-code-module-inlineEye",
+	inlineLink: "imf-ui-code-module-inlineLink",
+	language: "imf-ui-code-module-language",
+	pending: "imf-ui-code-module-pending",
+	placeholder: "imf-ui-code-module-placeholder",
+	pre: "imf-ui-code-module-pre",
+	pulse: "imf-ui-code-module-pulse",
+	separator: "imf-ui-code-module-separator",
+	sizeLg: "imf-ui-code-module-sizeLg",
+	sizeMd: "imf-ui-code-module-sizeMd"
+};
+//#endregion
+//#region src/components/code/text-of.ts
+function O(e) {
+	let t = "";
+	return _.forEach(e, (e) => {
+		typeof e == "string" || typeof e == "number" ? t += String(e) : v(e) && (t += O(e.props.children));
+	}), t;
+}
+//#endregion
+//#region src/components/code/code.tsx
+var k = /* @__PURE__ */ e({
+	Block: () => N,
+	Inline: () => j,
+	InlineLink: () => M
+}), A = f(D.inline, { variants: { size: {
+	sm: null,
+	md: D.sizeMd,
+	lg: D.sizeLg
+} } });
+function j({ copyable: e = !1, concealable: o = !1, concealed: s, onConcealedChange: c, defaultConcealed: l = !0, concealedLength: u = 8, copyConcealed: d = !1, size: f = "sm", toggleLabel: v = "Show", children: y, render: b, ...k }) {
+	let [j, M] = S(l), N = o && (s ?? j), { copied: P, copy: F } = E(), I = x(null), L = P ? i : r, R = O(y), z = _.toArray(y).length === 0, B = o && (N || z), V = { "--conceal-length": R.length || u }, H = o && (z || N && !d);
+	function U(e) {
+		s === void 0 && M(e), c?.(e);
+	}
+	return w({
+		defaultTagName: "code",
+		render: b,
+		props: {
+			...T(k, {
+				className: A({ size: f }),
+				children: /* @__PURE__ */ g(m, { children: [
+					o && /* @__PURE__ */ h(C, {
+						className: D.inlineEye,
+						pressed: !N,
+						onPressedChange: (e) => U(!e),
+						"aria-label": v,
+						children: /* @__PURE__ */ h(a, {
+							glyph: N ? n : t,
+							size: 12,
+							strokeWidth: 2,
+							"aria-hidden": !0
+						})
+					}),
+					o && /* @__PURE__ */ h("span", { className: D.separator }),
+					B ? /* @__PURE__ */ h("span", {
+						role: "img",
+						"aria-label": "Hidden",
+						className: p(D.placeholder, !N && D.pending),
+						style: V
+					}) : /* @__PURE__ */ h("span", {
+						ref: I,
+						children: y
+					}),
+					e && /* @__PURE__ */ h("span", { className: D.separator }),
+					e && /* @__PURE__ */ h("button", {
+						type: "button",
+						className: D.inlineCopy,
+						"data-copied": P || void 0,
+						"aria-label": P ? "Copied" : "Copy",
+						disabled: H,
+						onClick: () => F(I.current?.textContent ?? R),
+						children: /* @__PURE__ */ h(a, {
+							glyph: L,
+							size: 12,
+							strokeWidth: 2,
+							"aria-hidden": !0
+						})
+					})
+				] })
+			}),
+			"data-imf-ui-component": "Code.Inline",
+			"data-concealed": N || void 0,
+			"data-size": f
+		}
+	});
+}
+j.displayName = "Code.Inline";
+function M({ kind: e = "external", ...t }) {
+	let n = e === "external" ? {
+		target: "_blank",
+		rel: "noreferrer"
+	} : {};
+	return w({
+		defaultTagName: "a",
+		render: t.render,
+		props: {
+			...T(n, t, {
+				className: p(D.inline, D.inlineLink, t.className),
+				children: t.children
+			}),
+			"data-imf-ui-component": "Code.InlineLink",
+			"data-kind": e
+		}
+	});
+}
+M.displayName = "Code.InlineLink";
+function N({ className: e, language: t, hideCopy: n = !1, children: o, ...f }) {
+	let { copied: m, copy: _ } = E(), v = x(null), y = m ? i : r;
+	return /* @__PURE__ */ g("div", {
+		"data-imf-ui-component": "Code.Block",
+		className: p(D.block, e),
+		children: [
+			t != null && /* @__PURE__ */ h("span", {
+				className: D.language,
+				children: t
+			}),
+			!n && /* @__PURE__ */ h("button", {
+				type: "button",
+				className: D.copy,
+				"data-copied": m || void 0,
+				"aria-label": m ? "Copied" : "Copy",
+				onClick: () => _(v.current?.textContent ?? ""),
+				children: /* @__PURE__ */ h(a, {
+					glyph: y,
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			}),
+			/* @__PURE__ */ g(c, { children: [/* @__PURE__ */ h(d, { children: /* @__PURE__ */ h(l, { children: /* @__PURE__ */ h("pre", {
+				...f,
+				className: D.pre,
+				children: /* @__PURE__ */ h("code", {
+					ref: v,
+					children: o
+				})
+			}) }) }), /* @__PURE__ */ h(s, {
+				orientation: "horizontal",
+				children: /* @__PURE__ */ h(u, {})
+			})] })
+		]
+	});
+}
+N.displayName = "Code.Block";
+//#endregion
+//#region src/components/code/code.meta.ts
+var P = {
+	name: "Code",
+	category: o.display,
+	status: "stable",
+	namespace: !0,
+	description: "Displays source code inline or in a block, with optional language labels and copying. Also called a code snippet or code block.",
+	origin: "native",
+	internalDependencies: ["ScrollArea"]
+};
+//#endregion
+export { k as a, M as i, N as n, E as o, j as r, P as t };

package/dist/components/code/code.d.ts

@@ -1,16 +1,39 @@
 import { useRender } from '@base-ui/react/use-render';
 type InlineProps = Omit<useRender.ComponentProps<"code">, "children"> & {
     /** Code content shown in the chip. The copy button copies its rendered text. */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** Show a small copy button on the right, behind a hairline separator. @default false */
     copyable?: boolean;
+    /** Show an eye button at the start that hides the content until it is pressed. @default false */
+    concealable?: boolean;
+    /** Whether the content is hidden. Needs `concealable`. Pass it with `onConcealedChange` to control the chip. */
+    concealed?: boolean;
+    /** Called with the new value when the eye button is pressed. */
+    onConcealedChange?: (concealed: boolean) => void;
+    /** Starting value of an uncontrolled chip. @default true */
+    defaultConcealed?: boolean;
+    /** Width in characters of the hidden placeholder when there is no text to measure. @default 8 */
+    concealedLength?: number;
+    /**
+     * Keep the copy button enabled while the content is hidden. It copies the text read from `children` without revealing it,
+     * so it needs text children: a component child copies nothing until revealed. @default false
+     */
+    copyConcealed?: boolean;
+    /** Height and type scale of the chip. @default "sm" */
+    size?: "sm" | "md" | "lg";
+    /** Accessible name of the eye button; `aria-pressed` tells whether the content is shown. @default "Show" */
+    toggleLabel?: string;
 };
 /**
  * Code.Inline — an inline code fragment (a `<code>` chip) for use inside running
  * text. `Typo.InlineCode` renders this under the hood so inline-code chrome is
  * defined in one place. The copy button copies the rendered text.
+ *
+ * With `concealable`, the content is replaced by a hatched placeholder until the
+ * eye button reveals it. A chip without content shows the placeholder with a
+ * pulse, so a consumer can reveal before the value has loaded.
  */
-export declare function Inline({ copyable, children, render, ...props }: InlineProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Inline({ copyable, concealable, concealed: concealedProp, onConcealedChange, defaultConcealed, concealedLength, copyConcealed, size, toggleLabel, children, render, ...props }: InlineProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Inline {
     var displayName: string;
 }

package/dist/components/code/text-of.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+/** The text a node renders, read from the element tree so nothing has to be in the DOM. */
+export declare function textOf(node: ReactNode): string;

package/dist/components/rich-link/rich-link.d.ts

@@ -8,11 +8,13 @@ type Props = React.ComponentProps<"a"> & {
     kind?: "external" | "internal";
     /** Trailing icon from `@imfusion/web-ui/icons`, replacing the arrow `kind` picks, such as `Download` for a file. */
     endGlyph?: IconComponent;
+    /** Row density. `"md"` is the default row; `"sm"` tightens the padding, tile, and gap for dense lists. @default "md" */
+    size?: "sm" | "md";
 };
 /**
  * RichLink — a link as a whole row: an optional leading icon on a tinted tile, the label with an optional description
  * line, and a trailing icon for where it leads. Draws no divider; stacked links get their spacing from the layout. Wrap it
  * with TanStack Router's `createLink` to use it as a router link.
  */
-export declare function RichLink({ glyph, description, kind, endGlyph, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function RichLink({ glyph, description, kind, endGlyph, size, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.js

@@ -4,7 +4,7 @@ import { t as v } from "./meta-V_KyLeGn.js";
 import { a as le, i as ue, n as de, r as fe, t as pe } from "./toggle-group-CVQzM3lQ.js";
 import { a as y, i as me, n as he, o as ge, r as _e, t as ve } from "./utils-J6vbjIt1.js";
 import { a as ye, i as be, n as xe, o as Se, r as Ce, t as we } from "./row-CaeE5pqs.js";
-import { a as Te, o as Ee, r as De, t as Oe } from "./code-72NzL5Cp.js";
+import { a as Te, o as Ee, r as De, t as Oe } from "./code-BtxeEf9P.js";
 import { A as ke, D as Ae, M as je, N as Me, O as Ne, c as Pe, j as Fe, k as Ie, l as Le, m as Re, p as ze, s as Be, u as Ve } from "./tabs-BNz_OiWn.js";
 import { n as He, t as Ue } from "./toggle-group-ghJtINie.js";
 import { a as We, c as Ge, i as Ke, n as qe, o as Je, r as Ye, s as Xe, t as Ze } from "./scroll-area-CXQ_SxPX.js";
@@ -156,16 +156,17 @@ var Lt = {
 	tile: "imf-ui-rich-link-module-tile",
 	tileGlyph: "imf-ui-rich-link-module-tileGlyph"
 }, zt = b(Rt.root);
-function Bt({ glyph: e, description: t, kind: n = "external", endGlyph: r, children: i, ...a }) {
+function Bt({ glyph: e, description: t, kind: n = "external", endGlyph: r, size: i = "md", children: a, ...o }) {
 	return /* @__PURE__ */ C("a", {
 		...n === "external" ? {
 			target: "_blank",
 			rel: "noreferrer"
 		} : {},
-		...a,
+		...o,
 		"data-imf-ui-component": "RichLink",
 		"data-kind": n,
-		className: zt({ className: a.className }),
+		"data-size": i,
+		className: zt({ className: o.className }),
 		children: [
 			e && /* @__PURE__ */ S("span", {
 				className: Rt.tile,
@@ -179,7 +180,7 @@ function Bt({ glyph: e, description: t, kind: n = "external", endGlyph: r, child
 				className: Rt.text,
 				children: [/* @__PURE__ */ S("span", {
 					className: Rt.label,
-					children: i
+					children: a
 				}), t && /* @__PURE__ */ S("span", {
 					className: Rt.description,
 					children: t

package/dist/integrations/code-highlight.js

@@ -1,6 +1,6 @@
 import { t as e } from "../rolldown-runtime-Dy4uBu1J.js";
 import { t } from "../meta-V_KyLeGn.js";
-import { i as n, n as r, r as i } from "../code-72NzL5Cp.js";
+import { i as n, n as r, r as i } from "../code-BtxeEf9P.js";
 import { jsx as a } from "react/jsx-runtime";
 import { cloneElement as o, useMemo as s } from "react";
 import { createHighlighter as c, defineLanguage as l, renderNodesToHtml as u, renderTokens as d } from "@tanstack/highlight/core";