@imfusion/web-ui 0.6.4-dev.1.g4ec1264f → 0.6.4-dev.7.g1840f300

package/dist/code-Ce8uiPsv.js

@@ -0,0 +1,134 @@
+import { t as e } from "./chunk-DmhlhrBa.js";
+import { t } from "./meta-CySnRuVp.js";
+import { Ma as n, Xo as r, r as i } from "./icons-Cy1HAosO.js";
+import { cx as a } from "class-variance-authority";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useCallback as l, useEffect as u, useRef as d, useState as f } from "react";
+import { mergeProps as p } from "@base-ui/react/merge-props";
+import { useRender as m } from "@base-ui/react/use-render";
+//#region src/hooks/use-clipboard.ts
+function h({ timeout: e = 1500 } = {}) {
+	let [t, n] = f(!1), r = d(void 0);
+	return u(() => () => clearTimeout(r.current), []), {
+		copied: t,
+		copy: l((t) => {
+			navigator.clipboard.writeText(t).then(() => {
+				n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
+			});
+		}, [e])
+	};
+}
+var g = {
+	block: "imf-ui-code-module-block",
+	copy: "imf-ui-code-module-copy",
+	inline: "imf-ui-code-module-inline",
+	inlineCopy: "imf-ui-code-module-inlineCopy",
+	inlineLink: "imf-ui-code-module-inlineLink",
+	language: "imf-ui-code-module-language",
+	pre: "imf-ui-code-module-pre",
+	separator: "imf-ui-code-module-separator"
+}, _ = /* @__PURE__ */ e({
+	Block: () => b,
+	Inline: () => v,
+	InlineLink: () => y
+});
+function v({ className: e, copyable: t = !1, children: l, render: u, ...f }) {
+	let { copied: _, copy: v } = h(), y = d(null), b = _ ? n : r;
+	return m({
+		defaultTagName: "code",
+		render: u,
+		props: {
+			...p(f, {
+				className: a(g.inline, e),
+				children: /* @__PURE__ */ c(o, { children: [
+					/* @__PURE__ */ s("span", {
+						ref: y,
+						children: l
+					}),
+					t && /* @__PURE__ */ s("span", { className: g.separator }),
+					t && /* @__PURE__ */ s("button", {
+						type: "button",
+						className: g.inlineCopy,
+						"data-copied": _ || void 0,
+						"aria-label": _ ? "Copied" : "Copy",
+						onClick: () => v(y.current?.textContent ?? ""),
+						children: /* @__PURE__ */ s(i, {
+							glyph: b,
+							size: 12,
+							strokeWidth: 2,
+							"aria-hidden": !0
+						})
+					})
+				] })
+			}),
+			"data-imf-ui-component": "Code.Inline"
+		}
+	});
+}
+v.displayName = "Code.Inline";
+function y({ kind: e = "external", ...t }) {
+	let n = e === "external" ? {
+		target: "_blank",
+		rel: "noreferrer"
+	} : {};
+	return m({
+		defaultTagName: "a",
+		render: t.render,
+		props: {
+			...p(n, t, {
+				className: a(g.inline, g.inlineLink, t.className),
+				children: t.children
+			}),
+			"data-imf-ui-component": "Code.InlineLink",
+			"data-kind": e
+		}
+	});
+}
+y.displayName = "Code.InlineLink";
+function b({ className: e, language: t, hideCopy: o = !1, children: l, ...u }) {
+	let { copied: f, copy: p } = h(), m = d(null), _ = f ? n : r;
+	return /* @__PURE__ */ c("div", {
+		"data-imf-ui-component": "Code.Block",
+		className: a(g.block, e),
+		children: [
+			t != null && /* @__PURE__ */ s("span", {
+				className: g.language,
+				children: t
+			}),
+			!o && /* @__PURE__ */ s("button", {
+				type: "button",
+				className: g.copy,
+				"data-copied": f || void 0,
+				"aria-label": f ? "Copied" : "Copy",
+				onClick: () => p(m.current?.textContent ?? ""),
+				children: /* @__PURE__ */ s(i, {
+					glyph: _,
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			}),
+			/* @__PURE__ */ s("pre", {
+				...u,
+				className: g.pre,
+				children: /* @__PURE__ */ s("code", {
+					ref: m,
+					children: l
+				})
+			})
+		]
+	});
+}
+b.displayName = "Code.Block";
+//#endregion
+//#region src/components/code/code.meta.ts
+var x = {
+	name: "Code",
+	category: t.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"
+};
+//#endregion
+export { _ as a, y as i, b as n, h as o, v as r, x as t };

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

@@ -15,20 +15,18 @@ export declare namespace Inline {
     var displayName: string;
 }
 export type CodeInlineLinkKind = "external" | "internal";
-type InlineLinkProps = Omit<useRender.ComponentProps<"a">, "children"> & {
-    /** The link text, as a raw string, rendered as a code fragment. */
-    children: string;
-    /** Link target scope. `"external"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `"internal"` stays in the current tab with a horizontal `ArrowRight` icon. */
+type InlineLinkProps = useRender.ComponentProps<"a"> & {
+    /** Link target scope. `"external"` (default) opens in a new tab; `"internal"` stays in the current tab. */
     kind?: CodeInlineLinkKind;
 };
 /**
  * Code.InlineLink — the inline-code chip rendered as a link: the same hairline
- * box, with a directional arrow behind the separator instead of a copy button.
+ * box, with an optional directional arrow behind the separator instead of a copy button.
  * Sibling of `Code.Inline`, sharing its chip visual (`.inline`) — never both a
  * copy button and a link on the same chip. Mirrors `ChipLink`'s shape (anchor
  * is the chip root, trailing icon nudges on hover, `data-kind` picks the icon).
  */
-export declare function InlineLink({ className, kind, children, render, ...props }: InlineLinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function InlineLink({ kind, ...props }: InlineLinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace InlineLink {
     var displayName: string;
 }

package/dist/components/typo/typo.d.ts

@@ -20,7 +20,7 @@ type OrderedListProps = useRender.ComponentProps<"ol"> & TypoProps & SpacingProp
 type UnorderedListProps = useRender.ComponentProps<"ul"> & TypoProps & SpacingProps;
 export type TypoLinkKind = "external" | "internal";
 type LinkProps = useRender.ComponentProps<"a"> & TypoProps & {
-    /** Link target scope. `"external"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `"internal"` stays in the current tab with a horizontal `ArrowRight` icon. */
+    /** Link target scope. `"external"` (default) opens in a new tab; `"internal"` stays in the current tab. */
     kind?: TypoLinkKind;
 };
 /** Typo.H1 — top-level page heading. */
@@ -83,7 +83,7 @@ export declare function Highlight({ variant, className, render, ...props }: Inli
 export declare namespace Highlight {
     var displayName: string;
 }
-/** Typo.Link — inline anchor. Auto-appends a local Web UI directional icon (`ArrowUpRight` for external, `ArrowRight` for internal), mirroring ChipLink's affordance for prose links. */
+/** Typo.Link — inline anchor with an optional local Web UI directional icon. */
 export declare function Link({ variant, kind, className, render, ...props }: LinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Link {
     var displayName: string;