@imfusion/web-ui 0.5.1-dev.50.ga7a4f1c3 → 0.5.1-dev.52.gcaa229a7

package/README.md

@@ -66,7 +66,7 @@ skill.
 | ------------------------- | ------------------------------------------------------------------------------ |
 | `/imf-web-ui`             | The router: decides whether guidance is needed, then which companion to open.  |
 | `/imf-web-ui-setup`       | Plan and, after approval, bootstrap a consumer project by topic.               |
-| `/imf-web-ui-components`  | Component reference — what exists and how it's meant to be used.               |
+| `/imf-web-ui-components`  | Component and icon reference — what exists and how it's meant to be used.      |
 | `/imf-web-ui-ux`          | UX guidance for building interfaces with the library.                          |
 | `/imf-web-ui-conventions` | The frontend conventions baseline, including the sanctioned styling seams.     |
 | `/imf-web-ui-audit`       | Read-only health check for a consumer project, ending in a plan you approve.   |

package/dist/chunk-DA_OvQe2.js

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { n, t };

package/dist/code-BRy_lg-h.js

@@ -0,0 +1,135 @@
+import { n as e } from "./chunk-DA_OvQe2.js";
+import { r as t, t as n } from "./meta-BwCupYyq.js";
+import { Ma as r, Qt as i, Xo as a, hn as o, r as s } from "./icons-BhogvWBV.js";
+import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/hooks/use-clipboard.ts
+function m({ timeout: e = 1500 } = {}) {
+	let [t, n] = d(!1), r = u(void 0);
+	return l(() => () => clearTimeout(r.current), []), {
+		copied: t,
+		copy: c((t) => {
+			navigator.clipboard.writeText(t).then(() => {
+				n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
+			});
+		}, [e])
+	};
+}
+var h = {
+	block: "imf-ui-code-module-block",
+	copy: "imf-ui-code-module-copy",
+	icon: "imf-ui-code-module-icon",
+	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"
+}, g = /* @__PURE__ */ e({
+	Block: () => y,
+	Inline: () => _,
+	InlineLink: () => v
+});
+function _({ className: e, copyable: n = !1, children: i, ...o }) {
+	let { copied: c, copy: l } = m(), d = u(null), g = c ? r : a;
+	return /* @__PURE__ */ p("code", {
+		...o,
+		"data-imf-ui-component": "Code.Inline",
+		className: t(h.inline, e),
+		children: [
+			/* @__PURE__ */ f("span", {
+				ref: d,
+				children: i
+			}),
+			n && /* @__PURE__ */ f("span", { className: h.separator }),
+			n && /* @__PURE__ */ f("button", {
+				type: "button",
+				className: h.inlineCopy,
+				"data-copied": c || void 0,
+				"aria-label": c ? "Copied" : "Copy",
+				onClick: () => l(d.current?.textContent ?? ""),
+				children: /* @__PURE__ */ f(s, {
+					glyph: g,
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			})
+		]
+	});
+}
+_.displayName = "Code.Inline";
+function v({ className: e, kind: n = "external", children: r, ...a }) {
+	let c = n === "external" ? o : i;
+	return /* @__PURE__ */ p("a", {
+		...n === "external" ? {
+			target: "_blank",
+			rel: "noreferrer"
+		} : {},
+		...a,
+		"data-imf-ui-component": "Code.InlineLink",
+		"data-kind": n,
+		className: t(h.inline, h.inlineLink, e),
+		children: [
+			r,
+			/* @__PURE__ */ f("span", { className: h.separator }),
+			/* @__PURE__ */ f("span", {
+				className: h.icon,
+				"aria-hidden": !0,
+				children: /* @__PURE__ */ f(s, {
+					glyph: c,
+					size: 12,
+					strokeWidth: 2
+				})
+			})
+		]
+	});
+}
+v.displayName = "Code.InlineLink";
+function y({ className: e, language: n, hideCopy: i = !1, children: o, ...c }) {
+	let { copied: l, copy: d } = m(), g = u(null), _ = l ? r : a;
+	return /* @__PURE__ */ p("div", {
+		"data-imf-ui-component": "Code.Block",
+		className: t(h.block, e),
+		children: [
+			n != null && /* @__PURE__ */ f("span", {
+				className: h.language,
+				children: n
+			}),
+			!i && /* @__PURE__ */ f("button", {
+				type: "button",
+				className: h.copy,
+				"data-copied": l || void 0,
+				"aria-label": l ? "Copied" : "Copy",
+				onClick: () => d(g.current?.textContent ?? ""),
+				children: /* @__PURE__ */ f(s, {
+					glyph: _,
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			}),
+			/* @__PURE__ */ f("pre", {
+				...c,
+				className: h.pre,
+				children: /* @__PURE__ */ f("code", {
+					ref: g,
+					children: o
+				})
+			})
+		]
+	});
+}
+y.displayName = "Code.Block";
+//#endregion
+//#region src/components/code/code.meta.ts
+var b = {
+	name: "Code",
+	category: n.display,
+	status: "stable",
+	namespace: !0,
+	description: "Displays source code — Code.Inline for a fragment in running text, Code.Block for a fenced block with an optional language label and copy button. Also called a code snippet or code block.",
+	origin: "native"
+};
+//#endregion
+export { g as a, v as i, y as n, m as o, _ as r, b as t };

package/dist/codegen/gen-icons.d.ts

@@ -0,0 +1,24 @@
+export type IconMetadata = {
+    filename: string;
+    category: string;
+    tags: string[];
+};
+export type IconCatalogRecord = {
+    name: string;
+    category: string;
+    tags: string[];
+    style: "regular" | "solid";
+};
+type IconMetadataSource = {
+    commit: string;
+    url: string;
+};
+export declare function parseIconMetadata(csv: string): IconMetadata[];
+export declare function validateIconMetadataSource(source: string): IconMetadataSource;
+export declare function buildIconCatalog(iconNames: readonly string[], metadata: readonly IconMetadata[]): IconCatalogRecord[];
+export declare function renderIconAliases(iconNames: readonly string[]): string;
+export declare function renderIconCatalogJson(records: readonly IconCatalogRecord[]): string;
+export declare function renderIconCatalog(records: readonly IconCatalogRecord[]): string;
+export declare function writeIconAliases(): void;
+export declare function writeIconCatalog(): void;
+export {};

package/dist/components/callout/callout.d.ts

@@ -19,7 +19,7 @@ declare namespace Root {
 type IconProps = React.HTMLAttributes<HTMLSpanElement>;
 /**
  * Callout.Icon — the leading status glyph. With no children it renders the
- * variant's default lucide icon; pass a custom icon as children to override.
+ * variant's default local icon; pass a custom icon as children to override.
  * `aria-hidden` (the variant is conveyed by copy, not the glyph) and inherits
  * the status colour via `currentColor`.
  */

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

@@ -11,7 +11,7 @@ type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & VariantProps<typeof
 /**
  * ChipLink — anchor styled as a Chip. Reuses Chip's shared variants so the
  * variant and appearance axes stay aligned, and auto-appends a directional icon
- * (Lucide `ArrowUpRight` for external, `ArrowRight` for internal).
+ * (local Web UI `ArrowUpRight` for external, `ArrowRight` for internal).
  */
 export declare function ChipLink({ variant, appearance, inline, kind, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,19 +1,15 @@
 type InlineProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
-    /** The inline code, as a raw string — also the value copied when `copyable`. */
-    children: string;
+    /** Code content shown in the chip. The copy button copies its rendered text. */
+    children: React.ReactNode;
     /** Show a small copy button on the right, behind a hairline separator. @default false */
     copyable?: boolean;
-    /** Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot. */
-    highlighted?: React.ReactNode;
 };
 /**
  * Code.Inline — an inline code fragment (a `<code>` chip) for use inside running
- * text. Dumb: styling only — syntax coloring arrives pre-rendered through the
- * `highlighted` slot (the code-highlight integration supplies it). `Typo.InlineCode`
- * renders this under the hood so inline-code chrome is defined in one place.
- * Children must be a string so an opted-in copy button has clean text to copy.
+ * text. `Typo.InlineCode` renders this under the hood so inline-code chrome is
+ * defined in one place. The copy button copies the rendered text.
  */
-export declare function Inline({ className, copyable, highlighted, children, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
+export declare function Inline({ className, copyable, children, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Inline {
     var displayName: string;
 }
@@ -36,24 +32,20 @@ export declare namespace InlineLink {
     var displayName: string;
 }
 type BlockProps = Omit<React.HTMLAttributes<HTMLPreElement>, "children"> & {
-    /** The code to display, as a raw string — also the value copied by the copy button. */
-    children: string;
+    /** Code content shown in the block. The copy button copies its rendered text. */
+    children: React.ReactNode;
     /** Language label shown in the corner notch. Omit to hide the notch. */
     language?: string;
     /** Hide the copy button. @default false */
     hideCopy?: boolean;
-    /** Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot. */
-    highlighted?: React.ReactNode;
 };
 /**
  * Code.Block — a fenced code block on a flat brand surface, with an optional
  * chamfered language notch (top-left) and a copy button (top-right). The
- * surface follows the global corner-radius token when a preset opts in.
- * Dumb: styling only — syntax coloring arrives pre-rendered through the
- * `highlighted` slot (the code-highlight integration supplies it). Children
- * must be a string so the copy button has clean text to copy.
+ * surface follows the global corner-radius token when a preset opts in. The
+ * copy button copies the rendered text.
  */
-export declare function Block({ className, language, hideCopy, highlighted, children, ...props }: BlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function Block({ className, language, hideCopy, children, ...props }: BlockProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Block {
     var displayName: string;
 }

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+import { IconComponent } from './types';
+export declare const ICON_VARIANTS: readonly ["inherit", "main", "support", "minor", "brand", "primary", "positive", "negative", "warning", "info", "oncolor", "accent-1", "accent-2", "accent-3"];
+export type IconVariant = (typeof ICON_VARIANTS)[number];
+declare const icon: (props?: ({
+    variant?: "primary" | "positive" | "negative" | "main" | "inherit" | "support" | "minor" | "brand" | "warning" | "info" | "oncolor" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type Props = Omit<React.ComponentProps<IconComponent>, "color"> & VariantProps<typeof icon> & {
+    /** Icon component imported from `@imfusion/web-ui/icons`. */
+    glyph: IconComponent;
+    /** Sets both SVG dimensions unless `width` or `height` is provided. */
+    size?: React.SVGProps<SVGSVGElement>["width"];
+};
+/** Icon — renders an icon component with a semantic Web UI foreground color. */
+export declare function Icon({ glyph: Glyph, variant, size, width, height, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icon/icon.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const iconMeta: ComponentMeta;

package/dist/components/icon/index.d.ts

@@ -0,0 +1,4 @@
+export { Icon, ICON_VARIANTS } from './icon';
+export { iconMeta } from './icon.meta';
+export type { IconComponent } from './types';
+export type { IconVariant } from './icon';

package/dist/components/icon/types.d.ts

@@ -0,0 +1,2 @@
+import type * as React from "react";
+export type IconComponent = React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/input/input.d.ts

@@ -9,6 +9,8 @@ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "st
     value?: UpstreamInput["value"];
     defaultValue?: UpstreamInput["defaultValue"];
     onValueChange?: UpstreamInput["onValueChange"];
+    /** Called when the search input's clear button is pressed. */
+    onClear?: () => void;
     className?: UpstreamInput["className"];
     style?: UpstreamInput["style"];
     render?: UpstreamInput["render"];
@@ -21,5 +23,5 @@ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "st
  * @see https://base-ui.com/react/components/input
  * @llm https://base-ui.com/react/components/input.md
  */
-export declare function Input({ variant, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ variant, size, type, value, defaultValue, onValueChange, onClear, disabled, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import { Code } from '../code';
 declare const typo: (props?: ({
-    variant?: "primary" | "positive" | "negative" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | "oncolor" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "oncolor" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const spacingVariants: (props?: ({
     spacing?: "none" | "default" | null | undefined;
@@ -82,7 +82,7 @@ export declare function Highlight({ variant, className, ...props }: InlineProps)
 export declare namespace Highlight {
     var displayName: string;
 }
-/** Typo.Link — inline anchor. Auto-appends a directional icon (Lucide `ArrowUpRight` for external, `ArrowRight` for internal), mirroring ChipLink's affordance for prose links. */
+/** 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. */
 export declare function Link({ variant, kind, className, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Link {
     var displayName: string;

package/dist/docgen/component-sources.d.ts

@@ -0,0 +1,7 @@
+/** A public component source shared by the docgen and LLM index generators. */
+export type ComponentSource = {
+    key: string;
+    componentFile: string;
+    metaFile: string;
+};
+export declare function publicComponentSources(srcDir: string): ComponentSource[];

package/dist/hooks/index.d.ts

@@ -3,3 +3,4 @@ export type { UseClipboardOptions } from './use-clipboard';
 export { useColorScheme } from './use-color-scheme';
 export { useMediaQuery } from './use-media-query';
 export type { UseMediaQueryOptions } from './use-media-query';
+export { useResizeObserver } from './use-resize-observer';

package/dist/hooks/use-resize-observer.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useResizeObserver<T extends Element>(callback: ResizeObserverCallback, enabled?: boolean): RefObject<T | null>;