@parallelworks/ui 0.40.1 → 0.42.0

package/dist/components/Table.js

@@ -1,8 +1,8 @@
 import { useStrings } from "./Provider.js";
 import Loader from "./Loader.js";
-import cx from "classnames";
-import React from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
 //#region src/components/Table.tsx
 function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
 	const yPadding = className?.includes("py-") ? "" : "py-4";
@@ -10,7 +10,7 @@ function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
 		colSpan: colspan,
-		className: cx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
+		className: clsx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
 		children
 	});
 }
@@ -18,7 +18,7 @@ function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProp
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
 		colSpan: colspan,
-		className: cx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
+		className: clsx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
 		children
 	});
 }
@@ -31,7 +31,7 @@ function Header({ children, className, style, colspan = 1, onClick, sort, caps =
 		colSpan: colspan,
 		style,
 		"aria-sort": sort === "unsorted" ? "none" : sort,
-		className: cx(className, yPadding, xPadding, textAlign, "text-xs font-medium", caps ? "uppercase tracking-wider" : ""),
+		className: clsx(className, yPadding, xPadding, textAlign, "text-xs font-medium", caps ? "uppercase tracking-wider" : ""),
 		children: onClick ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick,
@@ -52,7 +52,7 @@ function Table({ borderless = false, panel = true, className = "", wrapperClassN
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx("div", {
 		"aria-busy": isLoading,
-		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
+		className: clsx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
 		children: isLoading ? /* @__PURE__ */ jsxs("div", {
 			role: "status",
 			"aria-label": loading,
@@ -62,9 +62,9 @@ function Table({ borderless = false, panel = true, className = "", wrapperClassN
 				children: loading
 			})]
 		}) : /* @__PURE__ */ jsx("div", {
-			className: cx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
+			className: clsx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
 			children: /* @__PURE__ */ jsxs("table", {
-				className: cx(className, "min-w-full divide-y theme-border"),
+				className: clsx(className, "min-w-full divide-y theme-border"),
 				...tableProps,
 				children: [/* @__PURE__ */ jsx("thead", {
 					className: theadClassName,
@@ -82,11 +82,11 @@ function CompactTable({ wrapperClassName = "", className = "", tbodyClassName =
 	const Headers = getHeaders(ChildrenArr);
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
+		className: clsx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
+			className: clsx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
 			children: /* @__PURE__ */ jsxs("table", {
-				className: cx("min-w-full divide-y theme-border", className),
+				className: clsx("min-w-full divide-y theme-border", className),
 				children: [/* @__PURE__ */ jsx("thead", {
 					className: "theme-muted-panel",
 					children: /* @__PURE__ */ jsx("tr", {

package/dist/components/Tooltip.d.ts

@@ -1,21 +1,25 @@
-import { type PlacesType } from 'react-tooltip';
-export declare const TOOLTIP_ID = "global-tooltip";
-/** Anchor props that reveal `content` only while the text is ellipsized; `measure` picks the clipped descendant when it isn't the anchor. */
-export declare function truncationTooltipProps(content: string, measure?: (anchor: HTMLElement) => HTMLElement | null): {
-    role: 'none';
-    'data-tooltip-id': string;
-    onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
-};
-/** Tooltip text can come from untrusted sources (workflow YAML), so all markup is literal text — only `[text](url)` links and newlines are parsed. */
-export declare function formatTooltipContent(content: React.ReactNode): number | bigint | true | import("react").JSX.Element[] | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
-/** Singleton rendered at layout root; anchors opt in via data-tooltip-id={TOOLTIP_ID}, data-tooltip-content, and data-tooltip-shortcut. */
-export declare function GlobalTooltip(): import("react").JSX.Element;
-interface ITooltipInfo {
-    text: string;
-    className?: string | undefined;
-    place?: PlacesType;
-    children?: React.ReactNode;
-    tabIndex?: number;
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { type ReactElement, type ReactNode } from 'react';
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+/** One popup serves every Tooltip below it, so each anchor costs only a trigger.
+ *  UIProvider mounts it; nothing else needs to. */
+export declare function TooltipProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Props beyond the tooltip's own go to the anchor, so a Tooltip can be another
+ *  trigger's render target, such as a popover button with a hint. */
+export interface TooltipProps extends Omit<BaseTooltip.Trigger.Props, 'content' | 'children' | 'render' | 'handle' | 'payload'> {
+    /** Nothing to show disables the tooltip. Newlines in a string break lines. */
+    content: ReactNode;
+    /** The anchor. It receives the trigger's props and ref, so it must pass them to its element. */
+    children: ReactElement;
+    side?: TooltipSide;
+    /** Keys shown beside the content, joined with +, such as ⌘+F. */
+    shortcut?: string | undefined;
+    disabled?: boolean | undefined;
+    /** Opens only while the anchor's text is clipped, such as a truncated label. */
+    overflowOnly?: boolean;
 }
-export declare function TooltipInfo({ text, className, children, place, tabIndex, }: ITooltipInfo): import("react").JSX.Element;
-export {};
+/** A visual hint for sighted pointer and keyboard users. The anchor still needs
+ *  its own accessible name; use InfoTip for content everyone must reach. */
+export declare function Tooltip({ content, children, side, shortcut, disabled, overflowOnly, ...anchorProps }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip.js

@@ -1,98 +1,80 @@
-import { HiQuestionMarkCircle } from "../icons/hi/HiQuestionMarkCircle.js";
+import { portalContainer, positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
 import { keyedByContent } from "./keys.js";
-import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Tooltip } from "react-tooltip";
+import { Fragment as Fragment$1, createContext, use, useState } from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/components/Tooltip.tsx
-var TOOLTIP_ID = "global-tooltip";
-/** Anchor props that reveal `content` only while the text is ellipsized; `measure` picks the clipped descendant when it isn't the anchor. */
-function truncationTooltipProps(content, measure) {
-	return {
-		role: "none",
-		"data-tooltip-id": TOOLTIP_ID,
-		onMouseEnter: (event) => {
-			const anchor = event.currentTarget;
-			const measured = measure ? measure(anchor) : anchor;
-			if (measured && measured.scrollWidth > measured.clientWidth) anchor.setAttribute("data-tooltip-content", content);
-			else anchor.removeAttribute("data-tooltip-content");
-		}
-	};
-}
-var linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
-function formatLine(line) {
-	const nodes = [];
-	let last = 0;
-	for (const match of line.matchAll(linkRegex)) {
-		if (match.index > last) nodes.push(line.slice(last, match.index));
-		nodes.push(/* @__PURE__ */ jsx("a", {
-			href: match[2],
-			target: "_blank",
-			rel: "noopener noreferrer",
-			className: "underline",
-			children: match[1]
-		}, match.index));
-		last = match.index + match[0].length;
-	}
-	if (last < line.length) nodes.push(line.slice(last));
-	return nodes;
-}
-/** Tooltip text can come from untrusted sources (workflow YAML), so all markup is literal text — only `[text](url)` links and newlines are parsed. */
-function formatTooltipContent(content) {
-	if (typeof content !== "string") return content || null;
-	if (!content) return null;
-	return keyedByContent(content.split(/<br\s*\/?>|\n/i), (l) => l).map(({ key, item: line }, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, key));
-}
+var TooltipHandleContext = createContext(null);
 function KbdShortcut({ keys }) {
 	const parts = keys.split("+").map((part) => part.trim()).filter(Boolean);
 	return /* @__PURE__ */ jsx("span", {
 		className: "inline-flex items-center gap-1 align-middle",
-		children: keyedByContent(parts, (p) => p).map(({ key, item: part }, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
+		children: keyedByContent(parts, (p) => p).map(({ key, item: part }, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
 			className: "opacity-60 text-[11px]",
 			children: "+"
 		}), /* @__PURE__ */ jsx("kbd", {
-			className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded border border-white/30 bg-white/10 font-sans text-[11px] font-semibold leading-none",
+			className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded border border-current/30 bg-current/10 font-sans text-[11px] font-semibold leading-none",
 			children: part
 		})] }, key))
 	});
 }
-var globalCloseEvents = { escape: true };
-/** Singleton rendered at layout root; anchors opt in via data-tooltip-id={TOOLTIP_ID}, data-tooltip-content, and data-tooltip-shortcut. */
-function GlobalTooltip() {
-	return /* @__PURE__ */ jsx(Tooltip, {
-		id: TOOLTIP_ID,
-		className: "max-w-lg break-words config-tips normal-case text-left z-[10000]",
-		place: "top",
-		globalCloseEvents,
-		render: ({ content, activeAnchor }) => {
-			const body = formatTooltipContent(content);
-			const shortcut = activeAnchor?.getAttribute("data-tooltip-shortcut");
-			if (!shortcut) return body;
-			return /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center gap-2",
-				children: [body, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
-			});
-		}
+function TooltipPopup({ content, shortcut, side }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, {
+		container: portalContainer(),
+		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			side,
+			sideOffset: 8,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				className: `max-w-xs ${tipClassName}`,
+				children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tipArrowClassName }), shortcut ? /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-2",
+					children: [content, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
+				}) : content]
+			})
+		})
 	});
 }
-function TooltipInfo({ text, className = "", children, place = "top", tabIndex }) {
-	const anchorProps = {
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": text,
-		"data-tooltip-place": place,
-		className
+/** One popup serves every Tooltip below it, so each anchor costs only a trigger.
+*  UIProvider mounts it; nothing else needs to. */
+function TooltipProvider({ children }) {
+	const [handle] = useState(() => Tooltip.createHandle());
+	return /* @__PURE__ */ jsxs(Tooltip.Provider, { children: [/* @__PURE__ */ jsx(TooltipHandleContext, {
+		value: handle,
+		children
+	}), /* @__PURE__ */ jsx(Tooltip.Root, {
+		handle,
+		onOpenChange: skipUnclipped,
+		children: ({ payload }) => payload && /* @__PURE__ */ jsx(TooltipPopup, { ...payload })
+	})] });
+}
+/** An overflowOnly anchor opens only while its text is cut off. */
+function skipUnclipped(open, details) {
+	const anchor = details.trigger;
+	if (open && anchor instanceof HTMLElement && anchor.hasAttribute("data-overflow-only") && anchor.scrollWidth <= anchor.clientWidth) details.cancel();
+}
+/** A visual hint for sighted pointer and keyboard users. The anchor still needs
+*  its own accessible name; use InfoTip for content everyone must reach. */
+function Tooltip$1({ content, children, side = "top", shortcut, disabled = false, overflowOnly = false, ...anchorProps }) {
+	const handle = use(TooltipHandleContext);
+	const payload = {
+		content,
+		shortcut,
+		side
 	};
-	if (children || !text) return /* @__PURE__ */ jsx("div", {
+	const trigger = /* @__PURE__ */ jsx(Tooltip.Trigger, {
 		...anchorProps,
-		tabIndex,
-		children: children || /* @__PURE__ */ jsx(HiQuestionMarkCircle, { className: "tooltip" })
+		handle: handle ?? void 0,
+		payload,
+		disabled: disabled || !content,
+		"data-overflow-only": overflowOnly || void 0,
+		render: children
 	});
-	return /* @__PURE__ */ jsx("div", {
-		...anchorProps,
-		role: "img",
-		"aria-label": text,
-		tabIndex: tabIndex ?? 0,
-		children: /* @__PURE__ */ jsx(HiQuestionMarkCircle, { className: "tooltip" })
+	if (handle) return trigger;
+	return /* @__PURE__ */ jsxs(Tooltip.Root, {
+		onOpenChange: skipUnclipped,
+		children: [trigger, /* @__PURE__ */ jsx(TooltipPopup, { ...payload })]
 	});
 }
 //#endregion
-export { GlobalTooltip, TOOLTIP_ID, TooltipInfo, formatTooltipContent, truncationTooltipProps };
+export { Tooltip$1 as Tooltip, TooltipProvider };

package/dist/components/floating.d.ts

@@ -0,0 +1,14 @@
+/** Popups portal into the host's .ds-root when it has one, so they inherit the
+ *  design system's CSS variables; undefined lets the portal use document.body. */
+export declare function portalContainer(): HTMLElement | undefined;
+/** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
+export declare const positionerClassName = "z-[10000] outline-none data-anchor-hidden:invisible";
+/** A panel of choices: a menu, a select's list, a combobox's list. */
+export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+/** A row in a panel. */
+export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-hover-text) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A tooltip's or infotip's small inverted surface. */
+export declare const tipClassName = "rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+export declare const tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";
+/** A hover card's surface; the card sets its own width and padding. */
+export declare const cardClassName = "overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";

package/dist/components/floating.js

@@ -0,0 +1,21 @@
+//#region src/components/floating.ts
+/** Popups portal into the host's .ds-root when it has one, so they inherit the
+*  design system's CSS variables; undefined lets the portal use document.body. */
+function portalContainer() {
+	if (typeof document === "undefined") return;
+	return document.querySelector(".ds-root") ?? void 0;
+}
+/** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
+var positionerClassName = "z-[10000] outline-none data-anchor-hidden:invisible";
+var enterExit = "origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+/** A panel of choices: a menu, a select's list, a combobox's list. */
+var panelClassName = `rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
+/** A row in a panel. */
+var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-hover-text) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A tooltip's or infotip's small inverted surface. */
+var tipClassName = `rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none ${enterExit}`;
+var tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";
+/** A hover card's surface; the card sets its own width and padding. */
+var cardClassName = `overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
+//#endregion
+export { cardClassName, panelClassName, panelItemClassName, portalContainer, positionerClassName, tipArrowClassName, tipClassName };

package/dist/components/search.d.ts

@@ -0,0 +1,2 @@
+/** Whether a query matches any of the texts, the way every picker in the package searches. */
+export declare function useQueryMatch(): (query: string, ...texts: (string | undefined)[]) => boolean;

package/dist/components/search.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/search.ts
+var fold = (text) => text.replaceAll("-", "");
+/** Whether a query matches any of the texts, the way every picker in the package searches. */
+function useQueryMatch() {
+	const { contains } = Combobox.useFilter();
+	return useCallback((query, ...texts) => {
+		const q = fold(query);
+		return texts.some((text) => text !== void 0 && contains(fold(text), q));
+	}, [contains]);
+}
+//#endregion
+export { useQueryMatch };

package/dist/editor/Editor.js

@@ -1,6 +1,6 @@
 import Loader from "../components/Loader.js";
-import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
 //#region src/editor/Editor.tsx
 var MonacoEditor = lazy(() => import("./Monaco.js"));
 function Editor(props) {

package/dist/editor/EditorField.js

@@ -1,32 +1,27 @@
 import { FieldWrapper } from "../form/FieldWrapper.js";
+import { useFieldValue } from "../form/useFieldValue.js";
 import Editor from "./Editor.js";
-import cx from "classnames";
-import { useMemo, useRef } from "react";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
-import { useField, useFormikContext } from "formik";
+import { useMemo, useRef } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 //#region src/editor/EditorField.tsx
-function hasResetKeys(obj) {
-	return typeof obj === "object" && obj !== null && "editorKeyPostfix" in obj && typeof obj.editorKeyPostfix === "string";
-}
 function EditorField(props) {
-	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact } = props;
 	const fieldName = field.name ?? "";
-	const [fieldState] = useField(fieldName);
-	const { setFieldValue, setFieldTouched, values } = useFormikContext();
-	const debounceRef = useRef(null);
+	const [value, change] = useFieldValue(fieldName);
 	const touchedRef = useRef(false);
 	const handleChange = (val) => {
 		touchedRef.current = true;
-		if (debounceRef.current) clearTimeout(debounceRef.current);
-		debounceRef.current = setTimeout(() => {
-			onChange?.(val);
-			setFieldTouched(fieldName, true);
-			setFieldValue(fieldName, val);
-			setFormDirty(true);
-		}, 500);
+		onChange?.(val);
+		change(val);
 	};
-	let editorKeyPostfix = "";
-	if (hasResetKeys(values)) editorKeyPostfix = values.editorKeyPostfix;
+	const { control } = useFormContext();
+	const resetKey = useWatch({
+		control,
+		name: "editorKeyPostfix"
+	});
+	const editorKeyPostfix = typeof resetKey === "string" ? resetKey : "";
 	const postfixKey = useMemo(() => {
 		const randomKey = Math.random().toString(36).substring(7);
 		return editorKeyPostfix || randomKey;
@@ -41,8 +36,8 @@ function EditorField(props) {
 			ariaLabel: label,
 			height: "200px",
 			path: fieldName,
-			...touchedRef.current ? {} : { value: fieldState.value },
-			className: cx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
+			...touchedRef.current || value === void 0 ? {} : { value },
+			className: clsx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
 			readOnly: disabled,
 			onChange: handleChange,
 			language: field.options?.language || "shell"

package/dist/editor/FormCodePanel.js

@@ -1,14 +1,15 @@
-import { useNotify, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { FaCheck } from "../icons/fa/FaCheck.js";
 import { FiCopy } from "../icons/fi/FiCopy.js";
 import { LuEye } from "../icons/lu/LuEye.js";
 import { LuEyeOff } from "../icons/lu/LuEyeOff.js";
-import SwitchToggleSmall from "../components/SwitchToggleSmall.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useNotify, useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { Switch } from "../components/Switch.js";
 import { flattenGroups, impureSetValueFromPath } from "../form/lib.js";
 import Editor from "./Editor.js";
-import cx from "classnames";
-import { useId, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 //#region src/editor/FormCodePanel.tsx
 var isObject = (value) => typeof value === "object" && value !== null;
 var shouldIgnoreField = (engine, fieldSchema, inputs, arrayIndex) => {
@@ -73,7 +74,6 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 	const engine = useWorkflowEngine();
 	const notify = useNotify();
 	const { common: t } = useStrings();
-	const uid = useId();
 	const [jsonHasErrors, setJsonHasErrors] = useState(false);
 	const [showHidden, setShowHidden] = useState(false);
 	const [copied, setCopied] = useState(false);
@@ -103,22 +103,22 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 		style: { height },
 		className: "flex w-full flex-col gap-2",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx("flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border", jsonHasErrors ? "border-red-500" : "border-(--theme-border)"),
+			className: clsx("flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border", jsonHasErrors ? "border-red-500" : "border-(--theme-border)"),
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "bg-(--theme-muted-panel-bg) text-(--theme-muted-panel-color) flex shrink-0 items-center gap-3 border-b border-(--theme-border) px-3 py-2",
-				children: [hasHiddenFields && /* @__PURE__ */ jsxs("label", {
-					htmlFor: `${uid}-show-hidden`,
-					title: t.showHiddenFieldsHint,
-					className: "flex cursor-pointer select-none items-center gap-2 text-sm text-(--theme-app)",
-					children: [/* @__PURE__ */ jsx(SwitchToggleSmall, {
-						id: `${uid}-show-hidden`,
-						value: showHidden,
-						"aria-label": t.showHiddenFields,
-						onClick: () => setShowHidden((prev) => !prev)
-					}), /* @__PURE__ */ jsxs("span", {
-						className: "flex items-center gap-1.5",
-						children: [showHidden ? /* @__PURE__ */ jsx(LuEye, {}) : /* @__PURE__ */ jsx(LuEyeOff, {}), t.showHiddenFields]
-					})]
+				children: [hasHiddenFields && /* @__PURE__ */ jsx(Tooltip, {
+					content: t.showHiddenFieldsHint,
+					children: /* @__PURE__ */ jsxs("label", {
+						className: "flex cursor-pointer select-none items-center gap-2 text-sm text-(--theme-app)",
+						children: [/* @__PURE__ */ jsx(Switch, {
+							size: "sm",
+							checked: showHidden,
+							onCheckedChange: setShowHidden
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5",
+							children: [showHidden ? /* @__PURE__ */ jsx(LuEye, {}) : /* @__PURE__ */ jsx(LuEyeOff, {}), t.showHiddenFields]
+						})]
+					})
 				}), /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: handleCopy,

package/dist/editor/Monaco.js

@@ -7,9 +7,9 @@ import { defineEditorThemes, getThemeName } from "./themes.js";
 import { setupMonacoWorkers } from "./workers.js";
 import { holdListeners, modelFor } from "./editorModel.js";
 import { ensureYamlLanguage } from "./yamlLanguage.js";
-import cx from "classnames";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import * as monaco from "monaco-editor";
 //#region src/editor/Monaco.tsx
 setupMonacoWorkers();
@@ -116,7 +116,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 			width,
 			height
 		},
-		className: cx("relative border rounded", className),
+		className: clsx("relative border rounded", className),
 		ref: (ref) => {
 			if (ref && !monacoRef.current) {
 				defineEditorThemes(monaco.editor);