@imfusion/web-ui 0.6.4-dev.1.g4ec1264f → 0.6.4-dev.22.ge7bf54c9

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/button/button.d.ts

@@ -5,6 +5,7 @@ declare const button: (props?: ({
     size?: "sm" | "md" | "lg" | "hero" | null | undefined;
     chamfer?: boolean | null | undefined;
     radius?: "sm" | "md" | "lg" | "none" | "round" | null | undefined;
+    context?: "default" | "oncolor" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type UpstreamButton = React.ComponentProps<typeof ButtonPrimitive>;
 type Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style"> & VariantProps<typeof button> & {
@@ -26,5 +27,7 @@ type Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "
  * @doc https://base-ui.com/react/components/button
  * @llm https://base-ui.com/react/components/button.md
  */
-export declare function Button({ variant, size, chamfer, radius, className, startIcon, endIcon, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ variant, size, 
+/** Explicit saturated-surface context; this is never inferred from an ancestor. */
+context, chamfer, radius, className, startIcon, endIcon, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/card/card.d.ts

@@ -32,12 +32,15 @@ declare function Root({ density, variant, shadow, radius, orientation, withBorde
 declare namespace Root {
     var displayName: string;
 }
-type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+    /** Width divided by height, or "auto" to use the image's intrinsic ratio. */
+    aspectRatio?: number | "auto";
+};
 /**
  * Card.Image — an edge-to-edge media slot. Has no padding, so the image bleeds
  * to the card edges. Always place it first among the slots.
  */
-declare function Image({ className, alt, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
+declare function Image({ className, alt, aspectRatio, style, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Image {
     var displayName: string;
 }

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/collapsible/collapsible.d.ts

@@ -4,7 +4,7 @@ type UpstreamRoot = React.ComponentProps<typeof CollapsiblePrimitive.Root>;
 type UpstreamTrigger = React.ComponentProps<typeof CollapsiblePrimitive.Trigger>;
 type UpstreamPanel = React.ComponentProps<typeof CollapsiblePrimitive.Panel>;
 declare const collapsibleRoot: (props?: ({
-    variant?: "solid" | "default" | null | undefined;
+    variant?: "default" | "solid" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type RootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & VariantProps<typeof collapsibleRoot> & {
     /** Visual treatment applied to the trigger. `solid` gives the trigger a contained surface background; `default` is transparent at rest and drenched-blue when open. */

package/dist/components/drawer/drawer.d.ts

@@ -1,7 +1,7 @@
 import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
 type BorderColor = "primary" | "fg-minor" | "fg-support" | "none";
 type BorderStyle = "solid" | "dashed" | "none";
-type UpstreamRoot = React.ComponentProps<typeof DrawerPrimitive.Root>;
+type UpstreamRoot<Payload = unknown> = React.ComponentProps<typeof DrawerPrimitive.Root<Payload>>;
 type UpstreamTrigger = React.ComponentProps<typeof DrawerPrimitive.Trigger>;
 type UpstreamPortal = React.ComponentProps<typeof DrawerPrimitive.Portal>;
 type UpstreamBackdrop = React.ComponentProps<typeof DrawerPrimitive.Backdrop>;
@@ -14,23 +14,23 @@ type UpstreamClose = React.ComponentProps<typeof DrawerPrimitive.Close>;
 type UpstreamIndent = React.ComponentProps<typeof DrawerPrimitive.Indent>;
 type UpstreamIndentBackground = React.ComponentProps<typeof DrawerPrimitive.IndentBackground>;
 type UpstreamSwipeArea = React.ComponentProps<typeof DrawerPrimitive.SwipeArea>;
-type RootProps = {
-    open?: UpstreamRoot["open"];
+type RootProps<Payload = unknown> = {
+    open?: UpstreamRoot<Payload>["open"];
     /** @default false */
-    defaultOpen?: UpstreamRoot["defaultOpen"];
-    onOpenChange?: UpstreamRoot["onOpenChange"];
-    onOpenChangeComplete?: UpstreamRoot["onOpenChangeComplete"];
+    defaultOpen?: UpstreamRoot<Payload>["defaultOpen"];
+    onOpenChange?: UpstreamRoot<Payload>["onOpenChange"];
+    onOpenChangeComplete?: UpstreamRoot<Payload>["onOpenChangeComplete"];
     /** @default true */
-    modal?: UpstreamRoot["modal"];
+    modal?: UpstreamRoot<Payload>["modal"];
     /** @default 'down' */
-    swipeDirection?: UpstreamRoot["swipeDirection"];
-    snapPoints?: UpstreamRoot["snapPoints"];
-    snapPoint?: UpstreamRoot["snapPoint"];
-    onSnapPointChange?: UpstreamRoot["onSnapPointChange"];
+    swipeDirection?: UpstreamRoot<Payload>["swipeDirection"];
+    snapPoints?: UpstreamRoot<Payload>["snapPoints"];
+    snapPoint?: UpstreamRoot<Payload>["snapPoint"];
+    onSnapPointChange?: UpstreamRoot<Payload>["onSnapPointChange"];
     /** @default false */
-    disablePointerDismissal?: UpstreamRoot["disablePointerDismissal"];
+    disablePointerDismissal?: UpstreamRoot<Payload>["disablePointerDismissal"];
     /** @default false */
-    snapToSequentialPoints?: UpstreamRoot["snapToSequentialPoints"];
+    snapToSequentialPoints?: UpstreamRoot<Payload>["snapToSequentialPoints"];
     /**
      * Colour of the border on the panel's open edge. Inherited by Drawer.Popup;
      * a Popup-level prop overrides it.
@@ -43,7 +43,7 @@ type RootProps = {
      * @default 'solid'
      */
     borderStyle?: BorderStyle;
-    children?: UpstreamRoot["children"];
+    children?: UpstreamRoot<Payload>["children"];
 };
 /**
  * Drawer.Root — container that manages open/closed state and gesture interaction.
@@ -51,7 +51,7 @@ type RootProps = {
  * @see https://base-ui.com/react/components/drawer
  * @llm https://base-ui.com/react/components/drawer.md
  */
-export declare function Root({ borderColor, borderStyle, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root<Payload = unknown>({ borderColor, borderStyle, ...props }: RootProps<Payload>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }

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

@@ -3,7 +3,7 @@ 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;
+    variant?: "primary" | "positive" | "negative" | "oncolor" | "main" | "inherit" | "support" | "minor" | "brand" | "warning" | "info" | "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`. */

package/dist/components/logo/logo.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const logo: (props?: ({
     size?: "sm" | "md" | "lg" | "hero" | "xs" | "xl" | "fit" | null | undefined;
-    variant?: "main" | "inherit" | "support" | "minor" | "brand" | "oncolor" | null | undefined;
+    variant?: "oncolor" | "main" | "inherit" | "support" | "minor" | "brand" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<typeof logo> & {
     /** Logo source — an image URL or an inline SVG node. Required; this primitive carries no brand default (see `ImFusionLogo` for our own mark). */

package/dist/components/select/select.d.ts

@@ -1,5 +1,5 @@
 import { Select as SelectPrimitive } from '@base-ui/react/select';
-type UpstreamRoot = React.ComponentProps<typeof SelectPrimitive.Root>;
+type UpstreamRoot<Value = unknown, Multiple extends boolean | undefined = false> = React.ComponentProps<typeof SelectPrimitive.Root<Value, Multiple>>;
 type UpstreamLabel = React.ComponentProps<typeof SelectPrimitive.Label>;
 type UpstreamTrigger = React.ComponentProps<typeof SelectPrimitive.Trigger>;
 type UpstreamValue = React.ComponentProps<typeof SelectPrimitive.Value>;
@@ -18,37 +18,37 @@ type UpstreamGroupLabel = React.ComponentProps<typeof SelectPrimitive.GroupLabel
 type UpstreamSeparator = React.ComponentProps<typeof SelectPrimitive.Separator>;
 type UpstreamScrollUpArrow = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>;
 type UpstreamScrollDownArrow = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>;
-type RootProps = {
-    value?: UpstreamRoot["value"];
-    defaultValue?: UpstreamRoot["defaultValue"];
-    onValueChange?: UpstreamRoot["onValueChange"];
+type RootProps<Value = unknown, Multiple extends boolean | undefined = false> = {
+    value?: UpstreamRoot<Value, Multiple>["value"];
+    defaultValue?: UpstreamRoot<Value, Multiple>["defaultValue"];
+    onValueChange?: UpstreamRoot<Value, Multiple>["onValueChange"];
     /** @default false */
-    defaultOpen?: UpstreamRoot["defaultOpen"];
-    open?: UpstreamRoot["open"];
-    onOpenChange?: UpstreamRoot["onOpenChange"];
-    onOpenChangeComplete?: UpstreamRoot["onOpenChangeComplete"];
+    defaultOpen?: UpstreamRoot<Value, Multiple>["defaultOpen"];
+    open?: UpstreamRoot<Value, Multiple>["open"];
+    onOpenChange?: UpstreamRoot<Value, Multiple>["onOpenChange"];
+    onOpenChangeComplete?: UpstreamRoot<Value, Multiple>["onOpenChangeComplete"];
     /** @default false */
-    multiple?: UpstreamRoot["multiple"];
+    multiple?: UpstreamRoot<Value, Multiple>["multiple"];
     /** @default false */
-    disabled?: UpstreamRoot["disabled"];
+    disabled?: UpstreamRoot<Value, Multiple>["disabled"];
     /** @default false */
-    readOnly?: UpstreamRoot["readOnly"];
+    readOnly?: UpstreamRoot<Value, Multiple>["readOnly"];
     /** @default false */
-    required?: UpstreamRoot["required"];
+    required?: UpstreamRoot<Value, Multiple>["required"];
     /** @default true */
-    modal?: UpstreamRoot["modal"];
+    modal?: UpstreamRoot<Value, Multiple>["modal"];
     /** @default true */
-    highlightItemOnHover?: UpstreamRoot["highlightItemOnHover"];
-    items?: UpstreamRoot["items"];
-    isItemEqualToValue?: UpstreamRoot["isItemEqualToValue"];
-    itemToStringLabel?: UpstreamRoot["itemToStringLabel"];
-    itemToStringValue?: UpstreamRoot["itemToStringValue"];
-    autoComplete?: UpstreamRoot["autoComplete"];
-    form?: UpstreamRoot["form"];
-    inputRef?: UpstreamRoot["inputRef"];
-    actionsRef?: UpstreamRoot["actionsRef"];
-    name?: UpstreamRoot["name"];
-    id?: UpstreamRoot["id"];
+    highlightItemOnHover?: UpstreamRoot<Value, Multiple>["highlightItemOnHover"];
+    items?: UpstreamRoot<Value, Multiple>["items"];
+    isItemEqualToValue?: UpstreamRoot<Value, Multiple>["isItemEqualToValue"];
+    itemToStringLabel?: UpstreamRoot<Value, Multiple>["itemToStringLabel"];
+    itemToStringValue?: UpstreamRoot<Value, Multiple>["itemToStringValue"];
+    autoComplete?: UpstreamRoot<Value, Multiple>["autoComplete"];
+    form?: UpstreamRoot<Value, Multiple>["form"];
+    inputRef?: UpstreamRoot<Value, Multiple>["inputRef"];
+    actionsRef?: UpstreamRoot<Value, Multiple>["actionsRef"];
+    name?: UpstreamRoot<Value, Multiple>["name"];
+    id?: UpstreamRoot<Value, Multiple>["id"];
     children?: React.ReactNode;
 };
 /**
@@ -61,7 +61,7 @@ type RootProps = {
  * @doc https://base-ui.com/react/components/select
  * @llm https://base-ui.com/react/components/select.md
  */
-export declare function Root({ className, style, ...props }: RootProps & {
+export declare function Root<Value = unknown, Multiple extends boolean | undefined = false>({ className, style, ...props }: RootProps<Value, Multiple> & {
     className?: string;
     style?: React.CSSProperties;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/toast/toast.d.ts

@@ -13,7 +13,7 @@ type UpstreamPositioner = React.ComponentProps<typeof ToastPrimitive.Positioner>
 type UpstreamArrow = React.ComponentProps<typeof ToastPrimitive.Arrow>;
 declare const toastViewport: (props?: ({
     position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
-    width?: "content" | "default" | "compact" | "wide" | null | undefined;
+    width?: "default" | "content" | "compact" | "wide" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const toastRoot: (props?: ({
     variant?: "warning" | "info" | "neutral" | "success" | "error" | null | undefined;

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

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import { Code } from '../code';
 declare const typo: (props?: ({
-    variant?: "primary" | "positive" | "negative" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "oncolor" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "oncolor" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "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;
@@ -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;