@parallelworks/ui 0.43.0 → 0.45.0

package/dist/components/Combobox.js

@@ -1,12 +1,11 @@
-import { FaCaretDown } from "../icons/fa/FaCaretDown.js";
-import { FaCheck } from "../icons/fa/FaCheck.js";
-import { FiX } from "../icons/fi/FiX.js";
-import { panelClassName, panelItemClassName, portalContainer, positionerClassName } from "./floating.js";
+import { cx } from "../cx.js";
+import { AddIcon, CheckIcon, ChevronDownIcon, RemoveIcon } from "../icons.js";
+import { panelClassName, panelItemClassName, positionerClassName } from "./floating.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { useQueryMatch } from "./search.js";
 import { isComboboxGroup } from "./comboboxItems.js";
-import { clsx } from "clsx";
+import { fieldBox } from "./fieldBox.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Combobox } from "@base-ui/react/combobox";
@@ -66,16 +65,20 @@ function useEntries(items) {
 }
 function useEntryFilter() {
 	const match = useQueryMatch();
-	return useCallback((entry, query) => match(query, entry.label, typeof entry.value === "string" ? entry.value : void 0, entry.group), [match]);
+	return useCallback((entry, query) => entry.created === true || match(query, entry.label, typeof entry.value === "string" ? entry.value : void 0, entry.group), [match]);
 }
 var entryLabel = (entry) => entry?.label ?? "";
-var fieldClassName = "theme-input relative flex min-h-8 w-full items-center gap-1 rounded-md border text-sm focus-within:border-(--theme-element) focus-within:ring-1 focus-within:ring-(--theme-element) has-[[aria-invalid=true]]:border-(--theme-error) has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-(--theme-input-disabled-bg) has-[input:disabled]:text-(--theme-input-disabled-text)";
+var fieldClassName = cx(fieldBox({
+	within: true,
+	multiline: true,
+	padded: false
+}), "relative flex items-center gap-1");
 var inputClassName = "h-full min-w-12 flex-1 self-stretch border-0 bg-transparent py-1.5 pl-3 text-inherit outline-none placeholder:text-(--theme-muted-text-color) disabled:cursor-not-allowed";
 var triggerClassName = "flex shrink-0 items-center self-stretch px-2 text-(--theme-muted-text-color) disabled:cursor-not-allowed";
-var popupInputClassName = "theme-input h-7 w-full rounded-md border px-2 text-sm outline-none placeholder:text-(--theme-muted-text-color) focus:border-(--theme-element)";
+var popupInputClassName = fieldBox({ size: "sm" });
 /** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
 function Combobox$1(props) {
-	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, trigger, triggerTooltip } = props;
+	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, trigger, triggerTooltip } = props;
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const strings = useStrings();
@@ -89,25 +92,46 @@ function Combobox$1(props) {
 	const toEntries = (values) => values?.map(entryOf);
 	const toSingle = (value) => value === void 0 ? void 0 : value === null ? null : entryOf(value);
 	const selected = props.multiple ? void 0 : toSingle(props.value);
+	const [uncontrolledCount, setUncontrolledCount] = useState(props.multiple ? props.defaultValue?.length ?? 0 : 0);
+	const chosen = props.multiple ? props.value ?? null : null;
+	const full = props.multiple && props.maxItems !== void 0 && (chosen?.length ?? uncontrolledCount) >= props.maxItems;
+	const isChosen = (entry) => chosen?.some((value) => isItemEqualToValue(entry.value, value)) ?? false;
+	const typed = inputValue?.trim() ?? "";
+	const lowered = typed.toLocaleLowerCase();
+	const sameText = (value, label) => label?.toLocaleLowerCase() === lowered || typeof value === "string" && value.toLocaleLowerCase() === lowered;
+	const created = props.multiple && props.creatable && typed !== "" && !full && !entries.flat.some((entry) => sameText(entry.value, entry.label)) && !chosen?.some((value) => sameText(value)) ? {
+		value: typed,
+		label: t.add(typed),
+		icon: /* @__PURE__ */ jsx(AddIcon, {}),
+		created: true
+	} : void 0;
+	const [first] = entries.items;
+	const listItems = !created ? entries.items : first !== void 0 && "items" in first ? [{
+		label: "",
+		items: [created],
+		order: -1
+	}, ...entries.items] : [created, ...entries.items];
 	const selectedIcon = selected?.icon && (inputValue === null || inputValue === selected.label) ? selected.icon : null;
 	const input = /* @__PURE__ */ jsx(Combobox.Input, {
 		id: trigger ? void 0 : id,
-		placeholder,
+		placeholder: full && props.maxItems !== void 0 ? t.limitReached(props.maxItems) : placeholder,
+		maxLength: props.multiple ? props.maxLength : void 0,
 		"aria-label": ariaLabel || void 0,
 		"aria-labelledby": ariaLabelledBy,
 		"aria-describedby": ariaDescribedBy,
 		"aria-invalid": ariaInvalid || void 0,
+		"aria-required": ariaRequired || required || void 0,
 		autoComplete: "off",
 		className: trigger ? popupInputClassName : inputClassName
 	});
 	const itemRow = (entry, rowProps) => /* @__PURE__ */ jsxs(Combobox.Item, {
 		value: entry,
-		disabled: entry.disabled,
+		disabled: entry.disabled || full && !isChosen(entry),
 		...rowProps.props,
 		className: itemClassName,
 		children: [/* @__PURE__ */ jsx(ItemContent, { entry }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 			className: "ml-auto flex shrink-0 items-center",
-			children: /* @__PURE__ */ jsx(FaCheck, { className: "size-3.5" })
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
 		})]
 	}, rowProps.key);
 	const parts = trigger ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
@@ -118,6 +142,7 @@ function Combobox$1(props) {
 			"aria-labelledby": ariaLabelledBy,
 			"aria-describedby": ariaDescribedBy,
 			"aria-invalid": ariaInvalid || void 0,
+			"aria-required": ariaRequired || required || void 0,
 			render: trigger
 		})
 	}), /* @__PURE__ */ jsx(ListPopup, {
@@ -133,7 +158,7 @@ function Combobox$1(props) {
 		renderItem: itemRow
 	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
 		"data-testid": "combobox",
-		className: clsx(fieldClassName, className),
+		className: cx(fieldClassName, className),
 		children: [props.multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
 			className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-1",
 			children: [/* @__PURE__ */ jsx(Combobox.Value, { children: (values) => values.map((entry) => /* @__PURE__ */ jsxs(Combobox.Chip, {
@@ -142,7 +167,7 @@ function Combobox$1(props) {
 				children: [entry.label, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
 					"aria-label": `${strings.common.remove} ${entry.label}`,
 					className: "flex size-4 items-center justify-center rounded hover:bg-(--theme-hover)",
-					children: /* @__PURE__ */ jsx(FiX, { className: "size-3" })
+					children: /* @__PURE__ */ jsx(RemoveIcon, { className: "size-3" })
 				})]
 			}, entry.label)) }), input]
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [selectedIcon && /* @__PURE__ */ jsx("span", {
@@ -152,7 +177,7 @@ function Combobox$1(props) {
 			"aria-label": t.showOptions,
 			"data-testid": "combobox-button",
 			className: triggerClassName,
-			children: /* @__PURE__ */ jsx(FaCaretDown, { className: "size-3" })
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })
 		})]
 	}), /* @__PURE__ */ jsx(ListPopup, {
 		listRef: list,
@@ -162,7 +187,7 @@ function Combobox$1(props) {
 		renderItem: itemRow
 	})] });
 	const root = {
-		items: entries.items,
+		items: listItems,
 		filter,
 		isItemEqualToValue: (a, b) => isItemEqualToValue(a.value, b.value),
 		itemToStringLabel: entryLabel,
@@ -171,6 +196,7 @@ function Combobox$1(props) {
 		disabled,
 		required,
 		virtualized: true,
+		autoHighlight: Boolean(props.multiple && props.creatable),
 		children: parts
 	};
 	return props.multiple ? /* @__PURE__ */ jsx(Combobox.Root, {
@@ -178,7 +204,10 @@ function Combobox$1(props) {
 		multiple: true,
 		value: toEntries(props.value),
 		defaultValue: toEntries(props.defaultValue),
-		onValueChange: (next) => props.onValueChange?.(next.map((entry) => entry.value))
+		onValueChange: (next) => {
+			setUncontrolledCount(next.length);
+			props.onValueChange?.(next.map((entry) => entry.value));
+		}
 	}) : /* @__PURE__ */ jsx(Combobox.Root, {
 		...root,
 		value: selected,
@@ -187,7 +216,7 @@ function Combobox$1(props) {
 	});
 }
 /** A free-text field that suggests values as you type. */
-function Autocomplete$1({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }) {
+function Autocomplete$1({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired }) {
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const t = useStrings().dropdown;
@@ -205,7 +234,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 		virtualized: true,
 		children: [/* @__PURE__ */ jsxs(Autocomplete.InputGroup, {
 			"data-testid": "combobox",
-			className: clsx(fieldClassName, className),
+			className: cx(fieldClassName, className),
 			children: [/* @__PURE__ */ jsx(Autocomplete.Input, {
 				id,
 				placeholder,
@@ -213,13 +242,14 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 				"aria-labelledby": ariaLabelledBy,
 				"aria-describedby": ariaDescribedBy,
 				"aria-invalid": ariaInvalid || void 0,
+				"aria-required": ariaRequired || required || void 0,
 				autoComplete: "off",
 				className: inputClassName
 			}), entries.flat.length > 0 && /* @__PURE__ */ jsx(Autocomplete.Trigger, {
 				"aria-label": t.showOptions,
 				"data-testid": "combobox-button",
 				className: triggerClassName,
-				children: /* @__PURE__ */ jsx(FaCaretDown, { className: "size-3" })
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })
 			})]
 		}), /* @__PURE__ */ jsx(ListPopup, {
 			listRef: list,
@@ -233,7 +263,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 		})]
 	});
 }
-var itemClassName = clsx(panelItemClassName, "data-selected:font-medium");
+var itemClassName = cx(panelItemClassName, "data-selected:font-medium");
 function ItemContent({ entry }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [entry.icon && /* @__PURE__ */ jsx("span", {
 		className: "flex shrink-0 items-center",
@@ -275,30 +305,27 @@ function GroupHeading({ group }) {
 }
 /** Portal, positioner and popup shared by Combobox and Autocomplete; both use the same parts. */
 function ListPopup({ listRef, empty, statusGroups = [], query = "", header, className = "w-(--anchor-width) max-w-(--available-width)", renderItem }) {
-	return /* @__PURE__ */ jsx(Combobox.Portal, {
-		container: portalContainer(),
-		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
-			align: "start",
-			sideOffset: 4,
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
-				className: clsx("overflow-hidden", className, panelClassName),
-				children: [
-					header,
-					empty && statusGroups.length === 0 && /* @__PURE__ */ jsx(Combobox.Empty, {
-						className: "px-3 py-2 text-(--theme-muted-text-color) empty:hidden",
-						children: empty
-					}),
-					/* @__PURE__ */ jsx(Combobox.List, { children: /* @__PURE__ */ jsx(VirtualList, {
-						ref: listRef,
-						statusGroups,
-						query,
-						renderItem
-					}) })
-				]
-			})
+	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		align: "start",
+		sideOffset: 4,
+		className: positionerClassName,
+		children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+			className: cx("overflow-hidden", className, panelClassName),
+			children: [
+				header,
+				empty && statusGroups.length === 0 && /* @__PURE__ */ jsx(Combobox.Empty, {
+					className: "px-3 py-2 text-(--theme-muted-text-color) empty:hidden",
+					children: empty
+				}),
+				/* @__PURE__ */ jsx(Combobox.List, { children: /* @__PURE__ */ jsx(VirtualList, {
+					ref: listRef,
+					statusGroups,
+					query,
+					renderItem
+				}) })
+			]
 		})
-	});
+	}) });
 }
 function toRows(filtered, statusGroups) {
 	const nodes = statusGroups.length ? [...filtered, ...statusGroups].sort((a, b) => ("order" in a ? a.order : 0) - ("order" in b ? b.order : 0)) : filtered;

package/dist/components/ConfirmModal.js

@@ -1,12 +1,11 @@
 import { useStrings } from "./Provider.js";
-import { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses } from "./ghostButton.js";
+import { Button } from "./Button.js";
 import { Modal, ModalDescription, ModalTitle } from "./Modal.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/components/ConfirmModal.tsx
 function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
-	const strings = useStrings();
+	const { common } = useStrings();
 	const [pending, setPending] = useState(false);
 	const firedRef = useRef(false);
 	useEffect(() => {
@@ -54,17 +53,18 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "mt-5 flex items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
 				onClick: onClose,
 				disabled: pending,
-				className: clsx(ghostButtonClasses, pending && "cursor-wait"),
-				children: cancelLabel ?? strings.modal.cancel
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
+				children: cancelLabel ?? common.cancel
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: destructive ? "danger" : "primary",
+				size: "sm",
 				onClick: runConfirm,
-				disabled: confirmDisabled || pending,
-				className: clsx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
+				disabled: confirmDisabled,
+				loading: pending,
 				children: confirmLabel
 			})]
 		})]

package/dist/components/ContextMenu.d.ts

@@ -1,17 +1,11 @@
+import { type FloatingAnchor } from './floating.js';
 import { type MenuEntry, type MenuSearch } from './MenuEntries.js';
-/** Where a menu opens: under an element, such as the button that opened it, or
- *  at a pointer event's point, which then moves with the element it landed on. */
-export type MenuAnchor = Element | {
-    clientX: number;
-    clientY: number;
-    currentTarget?: EventTarget | null;
-};
 export interface OpenMenuOptions {
     search?: MenuSearch | undefined;
     /** Called once the menu closes, or another menu replaces it. */
     onClose?: (() => void) | undefined;
 }
-export type OpenMenu = (at: MenuAnchor, items: MenuEntry[], options?: OpenMenuOptions) => void;
+export type OpenMenu = (at: FloatingAnchor, items: MenuEntry[], options?: OpenMenuOptions) => void;
 /**
  * One menu that any number of rows, buttons or a canvas open with their own
  * items, so a long list holds a single menu rather than one per row. Render

package/dist/components/ContextMenu.js

@@ -1,37 +1,10 @@
+import { toPositionerAnchor } from "./floating.js";
 import { MenuPopup } from "./Menu.js";
 import { MenuEntries, MenuFilter } from "./MenuEntries.js";
 import { Menu } from "@base-ui/react/menu";
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
 //#region src/components/ContextMenu.tsx
-function pointRect(x, y) {
-	return {
-		x,
-		y,
-		left: x,
-		top: y,
-		right: x,
-		bottom: y,
-		width: 0,
-		height: 0
-	};
-}
-function toAnchor(at) {
-	if (at instanceof Element) return at;
-	const { clientX, clientY } = at;
-	const on = at.currentTarget instanceof Element ? at.currentTarget : null;
-	if (!on) return { getBoundingClientRect: () => pointRect(clientX, clientY) };
-	const start = on.getBoundingClientRect();
-	const dx = clientX - start.left;
-	const dy = clientY - start.top;
-	return {
-		contextElement: on,
-		getBoundingClientRect: () => {
-			const now = on.getBoundingClientRect();
-			return pointRect(now.left + dx, now.top + dy);
-		}
-	};
-}
 /**
 * One menu that any number of rows, buttons or a canvas open with their own
 * items, so a long list holds a single menu rather than one per row. Render
@@ -51,7 +24,7 @@ function useContextMenu() {
 		release();
 		const next = {
 			...options,
-			anchor: toAnchor(at),
+			anchor: toPositionerAnchor(at),
 			items
 		};
 		owner.current = next;

package/dist/components/CopyToClipboard.js

@@ -1,29 +1,18 @@
-import { FaCheck } from "../icons/fa/FaCheck.js";
-import { FaEye } from "../icons/fa/FaEye.js";
-import { FaEyeSlash } from "../icons/fa/FaEyeSlash.js";
-import { FiCopy } from "../icons/fi/FiCopy.js";
-import { HiOutlineClipboardCopy } from "../icons/hi/HiOutlineClipboardCopy.js";
-import { useNotify, useStrings } from "./Provider.js";
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { useCopy } from "./useCopy.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 //#region src/components/CopyToClipboard.tsx
 function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
-	const notify = useNotify();
-	const strings = useStrings();
-	const handleCopy = async () => {
-		try {
-			await navigator.clipboard.writeText(text);
-			notify.info("Copied to clipboard");
-		} catch {
-			notify.error("Failed to copy to clipboard");
-		}
-	};
+	const { common } = useStrings();
+	const { copy } = useCopy();
+	const handleCopy = () => void copy(text);
 	return /* @__PURE__ */ jsxs(as, {
 		className,
 		onClick: handleCopy,
 		...as === "button" ? { type: "button" } : {
 			role: "button",
-			"aria-label": strings.common.copy,
+			"aria-label": common.copy,
 			tabIndex: 0,
 			onKeyDown: (e) => {
 				if (e.key === "Enter" || e.key === " ") {
@@ -32,22 +21,14 @@ function CopyToClipboard({ as = "div", text, className, children, showIcon = tru
 				}
 			}
 		},
-		children: [showIcon && /* @__PURE__ */ jsx(HiOutlineClipboardCopy, {}), children]
+		children: [showIcon && /* @__PURE__ */ jsx(CopyIcon, {}), children]
 	});
 }
 function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = false, onRevealToggle }) {
-	const notify = useNotify();
-	const [copied, setCopied] = useState(false);
-	const handleCopy = async () => {
-		if (copied) return;
-		try {
-			await navigator.clipboard.writeText(textToCopy);
-			setCopied(true);
-			notify.info("Copied to clipboard");
-			setTimeout(() => setCopied(false), 2e3);
-		} catch {
-			notify.error("Failed to copy to clipboard");
-		}
+	const { common } = useStrings();
+	const { copy, copied } = useCopy();
+	const handleCopy = () => {
+		if (!copied) copy(textToCopy);
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "group relative",
@@ -65,9 +46,9 @@ function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = fals
 					onRevealToggle?.();
 				},
 				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
-				"aria-label": isRevealed ? "Hide secret" : "Reveal secret",
-				title: isRevealed ? "Hide secret" : "Reveal secret",
-				children: isRevealed ? /* @__PURE__ */ jsx(FaEye, {}) : /* @__PURE__ */ jsx(FaEyeSlash, {})
+				"aria-label": isRevealed ? common.hideValue : common.showValue,
+				title: isRevealed ? common.hideValue : common.showValue,
+				children: isRevealed ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {})
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: (e) => {
@@ -75,8 +56,8 @@ function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = fals
 					handleCopy();
 				},
 				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
-				"aria-label": copied ? "Copied" : "Copy to clipboard",
-				children: copied ? /* @__PURE__ */ jsx(FaCheck, { className: "text-green-400" }) : /* @__PURE__ */ jsx(FiCopy, {})
+				"aria-label": copied ? common.copied : common.copyToClipboard,
+				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-400" }) : /* @__PURE__ */ jsx(CopyIcon, {})
 			})]
 		})]
 	});

package/dist/components/CreateModal.d.ts

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+import type { ReactNode } from 'react';
 import { type ComboboxItems } from './comboboxItems.js';
 import type { MenuEntry } from './MenuEntries.js';
 interface CreateModalProps {
@@ -19,7 +19,9 @@ interface CreateModalProps {
     /** Normalize the name as the user types (e.g. strip disallowed characters). */
     sanitizeName?: (name: string) => string;
     nameHint?: ((name: string) => ReactNode) | undefined;
+    /** The dialog's fields: an `Input`, or a `Field` around any other control. */
     children?: ReactNode;
+    /** Compact pills, such as `CreateModalSelect` and `CreateModalSwitch`, in a row under the name. */
     properties?: ReactNode;
     advanced?: ReactNode;
     submitDisabled?: boolean;
@@ -37,29 +39,6 @@ interface CreateModalProps {
 }
 /** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
 export declare function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceholder, hideName, initialName, showDescription, descriptionPlaceholder, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled, hideSubmit, nameOptional, onNameChange, dirty, showFavorite, onSubmit, }: CreateModalProps): import("react").JSX.Element;
-/** Labeled single-line input row for the dialog's extra fields. */
-export declare function CreateModalField({ label, tooltip, id, ...props }: InputHTMLAttributes<HTMLInputElement> & {
-    label: string;
-    /** Help text surfaced via an info icon next to the label. */
-    tooltip?: string | undefined;
-}): import("react").JSX.Element;
-/** Labeled multi-line field for credential blobs (JSON keys, PEM keys). */
-export declare function CreateModalTextarea({ label, tooltip, rows, id, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement> & {
-    label: string;
-    /** Help text surfaced via an info icon next to the label. */
-    tooltip?: string | undefined;
-}): import("react").JSX.Element;
-/** Labeled input with suggestions; any text is allowed. */
-export declare function CreateModalAutocompleteField({ label, tooltip, value, onValueChange, items, placeholder, }: {
-    label: string;
-    /** Help text surfaced via an info icon next to the label. */
-    tooltip?: string;
-    value: string;
-    onValueChange: (value: string) => void;
-    /** Suggestions, filtered by what's typed. */
-    items: string[];
-    placeholder?: string;
-}): import("react").JSX.Element;
 /** Compact property pill with an on/off switch. */
 export declare function CreateModalSwitch({ label, checked, onCheckedChange, tooltip, }: {
     label: string;