@parallelworks/ui 0.46.0 → 0.48.0

package/dist/components/Provider.d.ts

@@ -30,6 +30,8 @@ export interface UIStrings {
         share: string;
         send: string;
         filter: string;
+        /** A filter's choice that turns it off, showing everything. */
+        all: string;
         loading: string;
         loadMore: string;
         showMore: string;
@@ -110,6 +112,16 @@ export interface UIStrings {
         previousMonth: string;
         nextMonth: string;
     };
+    colorInput: {
+        /** Names the picker beside the hex field: the field's name, or none when it has no plain one. */
+        pick: (name?: string) => string;
+        /** Under the hex field while what is typed isn't a color. */
+        invalid: string;
+    };
+    oneTimeCode: {
+        /** Names each box after the first, which the field's label names. */
+        character: (position: number, length: number) => string;
+    };
     theme: {
         /** Names the light, dark or system choice. */
         appearance: string;
@@ -131,9 +143,6 @@ export interface UIStrings {
         sidebarAccent: string;
         code: string;
         codeStyle: (style: 'balanced' | 'vivid' | 'muted' | 'mono') => string;
-        /** Names a color input's picker, beside its hex field. */
-        pick: (name: string) => string;
-        invalidColor: string;
         copy: string;
         /** The thing a copy toast names. */
         copied: string;

package/dist/components/Provider.js

@@ -45,6 +45,7 @@ var DEFAULTS = {
 			share: "Share",
 			send: "Send",
 			filter: "Filter",
+			all: "All",
 			loading: "Loading…",
 			loadMore: "Load more",
 			showMore: "Show more",
@@ -112,6 +113,11 @@ var DEFAULTS = {
 			previousMonth: "Previous month",
 			nextMonth: "Next month"
 		},
+		colorInput: {
+			pick: (name) => name ? `Pick ${name.toLowerCase()}` : "Pick a color",
+			invalid: "Enter a hex color, such as #1f6feb."
+		},
+		oneTimeCode: { character: (position, length) => `Character ${position} of ${length}` },
 		theme: {
 			appearance: "Appearance",
 			light: "Light",
@@ -133,8 +139,6 @@ var DEFAULTS = {
 				muted: "Muted",
 				mono: "Monochrome"
 			})[style],
-			pick: (name) => `Pick ${name.toLowerCase()}`,
-			invalidColor: "Enter a hex color, such as #1f6feb.",
 			copy: "Copy theme",
 			copied: "theme",
 			import: "Import theme",
@@ -632,6 +636,14 @@ function UIProvider({ strings, navigation, data, slots, engine, children }) {
 				...DEFAULTS.strings.datePicker,
 				...strings?.datePicker
 			},
+			colorInput: {
+				...DEFAULTS.strings.colorInput,
+				...strings?.colorInput
+			},
+			oneTimeCode: {
+				...DEFAULTS.strings.oneTimeCode,
+				...strings?.oneTimeCode
+			},
 			theme: {
 				...DEFAULTS.strings.theme,
 				...strings?.theme

package/dist/components/SearchInput.d.ts

@@ -5,6 +5,7 @@ export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElem
     onValueChange: (value: string) => void;
     /** Names the box, and is its placeholder unless `placeholder` says otherwise. */
     label?: string | undefined;
+    /** `sm` for dense places such as toolbars and table cells. */
     size?: FieldBoxSize | undefined;
     /** On the wrapper: its width or margin. */
     className?: string | undefined;

package/dist/components/Section.d.ts

@@ -1,7 +1,10 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type SectionVariant = 'plain' | 'card';
 export interface SectionProps {
     title: ReactNode;
+    /** Under the title in muted text, saying what the section holds; it describes
+     *  the section, and its toggle, to assistive technology. */
+    description?: ReactNode;
     /** Beside the title, outside the toggle, such as an info tip or a count. */
     beside?: ReactNode;
     /** At the header's far end, such as an add button or a range picker. */
@@ -18,6 +21,8 @@ export interface SectionProps {
     defaultOpen?: boolean | undefined;
     /** The heading level the title sits at in the page's outline. */
     headingLevel?: 2 | 3 | 4 | undefined;
+    /** On the section, so a link or a scroll can target it. */
+    id?: string | undefined;
     className?: string | undefined;
     children: ReactNode;
 }
@@ -25,4 +30,4 @@ export interface SectionProps {
  *  that can fold away. Folding keeps the content mounted, so fields hold their
  *  values and validation while closed. For a line inside content that reveals
  *  more detail, use Disclosure. */
-export declare function Section({ title, beside, actions, variant, collapsible, open, onOpenChange, defaultOpen, headingLevel, className, children, }: SectionProps): import("react").JSX.Element;
+export declare function Section({ title, description, beside, actions, variant, collapsible, open, onOpenChange, defaultOpen, headingLevel, id, className, children, }: SectionProps): import("react").JSX.Element;

package/dist/components/Section.js

@@ -2,73 +2,92 @@ import { cx } from "../cx.js";
 import { ChevronRightIcon } from "../icons.js";
 import { collapsePanelClassName } from "./Disclosure.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/components/Section.tsx
 var rootClasses = {
 	plain: "flex w-full flex-col",
-	card: "group/section panel mb-1 flex w-full flex-col"
+	card: "panel mb-1 flex w-full flex-col"
 };
 var headerClasses = {
 	plain: "mb-2 flex w-full items-center gap-2 border-b border-(--theme-border) pb-1",
-	card: "flex w-full items-center gap-2 px-2 py-3"
+	card: "flex w-full items-center gap-2 px-3 py-3"
 };
+var cardBodyClassName = "px-3 pb-3";
 var titleClasses = {
 	plain: "text-lg font-semibold",
-	card: "text-sm font-bold text-(--theme-muted-text-color) group-data-open/section:text-inherit"
+	card: "text-sm font-bold"
 };
+var foldedTitleClasses = {
+	plain: "",
+	card: "not-data-panel-open:text-(--theme-muted-text-color)"
+};
+var chevronIndent = "pl-6";
 /** A titled part of a page or form, its title a heading in the page's outline,
 *  that can fold away. Folding keeps the content mounted, so fields hold their
 *  values and validation while closed. For a line inside content that reveals
 *  more detail, use Disclosure. */
-function Section({ title, beside, actions, variant = "plain", collapsible = true, open, onOpenChange, defaultOpen = true, headingLevel = 3, className, children }) {
+function Section({ title, description, beside, actions, variant = "plain", collapsible = true, open, onOpenChange, defaultOpen = true, headingLevel = 3, id, className, children }) {
 	const Heading = `h${headingLevel}`;
-	const end = actions && /* @__PURE__ */ jsx("div", {
-		className: "ml-auto flex items-center gap-2",
-		children: actions
-	});
+	const descriptionId = useId();
+	const describedBy = description ? descriptionId : void 0;
 	const titleProps = { "data-section-title": "" };
 	const fill = !beside && !actions;
+	const header = (heading) => /* @__PURE__ */ jsxs("div", {
+		className: headerClasses[variant],
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [heading, beside]
+			}), description && /* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: cx("text-sm theme-muted-text", collapsible && chevronIndent),
+				children: description
+			})]
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center gap-2",
+			children: actions
+		})]
+	});
 	if (!collapsible) return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-describedby": describedBy,
 		className: cx(rootClasses[variant], className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: headerClasses[variant],
-			children: [
-				/* @__PURE__ */ jsx(Heading, {
-					...titleProps,
-					className: cx("flex items-center", titleClasses[variant]),
-					children: title
-				}),
-				beside,
-				end
-			]
-		}), children]
+		children: [header(/* @__PURE__ */ jsx(Heading, {
+			...titleProps,
+			className: cx("flex items-center", titleClasses[variant]),
+			children: title
+		})), variant === "card" ? /* @__PURE__ */ jsx("div", {
+			className: cardBodyClassName,
+			children
+		}) : children]
 	});
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		id,
+		"aria-describedby": describedBy,
 		open,
 		onOpenChange: (next) => onOpenChange?.(next),
 		defaultOpen,
 		className: cx(rootClasses[variant], className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: headerClasses[variant],
-			children: [
-				/* @__PURE__ */ jsx(Heading, {
-					className: cx("flex min-w-0", fill && "flex-1"),
-					children: /* @__PURE__ */ jsxs(Collapsible.Trigger, {
-						...titleProps,
-						className: cx("group flex min-w-0 cursor-pointer items-center gap-1 text-left", fill && "w-full", titleClasses[variant]),
-						children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
-							"aria-hidden": "true",
-							className: cx("shrink-0 transition-transform group-data-panel-open:rotate-90 motion-reduce:transition-none", "px-1 text-[1.25rem]")
-						}), title]
-					})
-				}),
-				beside,
-				end
-			]
-		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+		children: [header(/* @__PURE__ */ jsx(Heading, {
+			className: cx("flex min-w-0", fill && "flex-1"),
+			children: /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				...titleProps,
+				"aria-describedby": describedBy,
+				className: cx("group flex min-w-0 cursor-pointer items-center gap-1 text-left", fill && "w-full", titleClasses[variant], foldedTitleClasses[variant]),
+				children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
+					"aria-hidden": "true",
+					className: cx("shrink-0 transition-transform group-data-panel-open:rotate-90 motion-reduce:transition-none", "px-1 text-[1.25rem]")
+				}), title]
+			})
+		})), /* @__PURE__ */ jsx(Collapsible.Panel, {
 			keepMounted: true,
 			className: collapsePanelClassName,
-			children
+			children: variant === "card" ? /* @__PURE__ */ jsx("div", {
+				className: cardBodyClassName,
+				children
+			}) : children
 		})]
 	});
 }

package/dist/components/SegmentedControl.d.ts

@@ -10,8 +10,10 @@ export interface SegmentedOption<T extends string> {
 }
 /** A few mutually exclusive choices side by side, one always current, such as
  *  a time range or what to group by. To move between views or pages, use
- *  `Tabs` with `variant="segmented"`, which looks the same. Name it with
- *  `label`, or leave that out inside a `Field group`, whose legend names it. */
+ *  `Tabs` with `variant="segmented"`, which looks the same. To filter a list
+ *  by values that may all be off, or several at once, use `ToggleGroup`. Name
+ *  it with `label`, or leave that out inside a `Field group`, whose legend
+ *  names it. */
 export declare function SegmentedControl<T extends string>({ label, options, value, onValueChange, fill, iconOnly, testId, }: SegmentLayout & {
     label?: string | undefined;
     options: SegmentedOption<T>[];

package/dist/components/SegmentedControl.js

@@ -6,8 +6,10 @@ import { ToggleGroup } from "@base-ui/react/toggle-group";
 //#region src/components/SegmentedControl.tsx
 /** A few mutually exclusive choices side by side, one always current, such as
 *  a time range or what to group by. To move between views or pages, use
-*  `Tabs` with `variant="segmented"`, which looks the same. Name it with
-*  `label`, or leave that out inside a `Field group`, whose legend names it. */
+*  `Tabs` with `variant="segmented"`, which looks the same. To filter a list
+*  by values that may all be off, or several at once, use `ToggleGroup`. Name
+*  it with `label`, or leave that out inside a `Field group`, whose legend
+*  names it. */
 function SegmentedControl({ label, options, value, onValueChange, fill = false, iconOnly = false, testId }) {
 	const layout = {
 		fill,

package/dist/components/Select.d.ts

@@ -1,5 +1,6 @@
 import { Select as BaseSelect } from '@base-ui/react/select';
 import type { ReactElement, ReactNode } from 'react';
+import { type FieldBoxSize } from './fieldBox.js';
 export interface SelectItem<Value> {
     value: Value;
     label: string;
@@ -24,7 +25,7 @@ export type SelectProps<Value, Multiple extends boolean | undefined = false> = O
     /** A hint on the trigger button. */
     triggerTooltip?: ReactNode;
     /** `sm` for dense places such as toolbars and table cells. */
-    size?: 'sm' | 'md' | undefined;
+    size?: FieldBoxSize | undefined;
     /** The item a person is on as they move through the open list, then undefined once it
      *  closes, such as to preview a theme before it is chosen. */
     onItemHighlighted?: ((value: Value | undefined) => void) | undefined;

package/dist/components/Select.js

@@ -36,7 +36,7 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 			className: cx(fieldBox({ size }), triggerClassName, className),
 			children: [/* @__PURE__ */ jsx(Select.Value, {
 				placeholder,
-				className: "truncate data-placeholder:text-(--theme-muted-text-color)",
+				className: "truncate data-placeholder:text-(--theme-placeholder)",
 				children: rootProps.multiple ? (values) => values.length > 0 ? values.map(labelOf).join(", ") : placeholder : void 0
 			}), /* @__PURE__ */ jsx(Select.Icon, {
 				className: "shrink-0 text-(--theme-muted-text-color)",

package/dist/components/Tabs.js

@@ -52,6 +52,7 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 		},
 		orientation: layout.iconOnly ? "vertical" : "horizontal",
 		"data-testid": testId,
+		className: children ? void 0 : "contents",
 		children: [showRow && /* @__PURE__ */ jsxs("div", {
 			className: cx("flex items-center justify-between gap-2", !segmented && "border-b border-(--theme-border)", sticky && stickyClasses[sticky], className),
 			children: [/* @__PURE__ */ jsxs(Tabs.List, {

package/dist/components/ThemeEditor.js

@@ -2,18 +2,19 @@ import { cx } from "../cx.js";
 import { useStrings } from "./Provider.js";
 import { useCopy } from "./useCopy.js";
 import { Button } from "./Button.js";
+import { parseColor, toHex } from "../theme/color.js";
+import { CODE_STYLES, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, schemeFor, serializeTheme } from "../theme/model.js";
+import { deriveTheme, generateTheme } from "../theme/derive.js";
+import { prefersWideGamut } from "../theme/index.js";
+import { Field } from "./Field.js";
 import { fieldBox } from "./fieldBox.js";
+import { Textarea } from "./Input.js";
+import { ColorInput } from "./ColorInput.js";
 import { Disclosure } from "./Disclosure.js";
 import { Switch } from "./Switch.js";
-import { Field } from "./Field.js";
-import { Textarea } from "./Input.js";
 import { Select } from "./Select.js";
 import { SegmentedControl } from "./SegmentedControl.js";
 import { Slider } from "./Slider.js";
-import { parseColor, toHex } from "../theme/color.js";
-import { CODE_STYLES, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, schemeFor, serializeTheme } from "../theme/model.js";
-import { deriveTheme, generateTheme } from "../theme/derive.js";
-import { prefersWideGamut } from "../theme/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo, useState } from "react";
 //#region src/components/ThemeEditor.tsx
@@ -101,15 +102,15 @@ function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPrefer
 						onValueChange: setEditing
 					})
 				}),
-				/* @__PURE__ */ jsx(ColorField, {
+				/* @__PURE__ */ jsx(ColorInput, {
 					label: t.base,
 					value: seed.base,
-					onChange: (base) => setSeed({ base })
+					onValueChange: (base) => setSeed({ base })
 				}),
-				/* @__PURE__ */ jsx(ColorField, {
+				/* @__PURE__ */ jsx(ColorInput, {
 					label: t.accent,
 					value: seed.accent,
-					onChange: (accent) => setSeed({ accent })
+					onValueChange: (accent) => setSeed({ accent })
 				}),
 				/* @__PURE__ */ jsx(Field, {
 					label: t.contrast,
@@ -141,20 +142,20 @@ function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPrefer
 				}),
 				scheme.sidebar && /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-5 border-l-2 border-(--theme-border) pl-4",
-					children: [/* @__PURE__ */ jsx(ColorField, {
+					children: [/* @__PURE__ */ jsx(ColorInput, {
 						label: t.sidebarBase,
 						value: scheme.sidebar.base ?? derived["--theme-sidebar-bg"],
-						onChange: (base) => update({
+						onValueChange: (base) => update({
 							...scheme,
 							sidebar: {
 								...scheme.sidebar,
 								base
 							}
 						})
-					}), /* @__PURE__ */ jsx(ColorField, {
+					}), /* @__PURE__ */ jsx(ColorInput, {
 						label: t.sidebarAccent,
 						value: scheme.sidebar.accent ?? seed.accent,
-						onChange: (accent) => update({
+						onValueChange: (accent) => update({
 							...scheme,
 							sidebar: {
 								...scheme.sidebar,
@@ -214,44 +215,6 @@ function Swatch({ colors }) {
 		}, i))
 	});
 }
-/** A color as a picker beside a hex field. A half-typed hex stays in the field, marked, until it parses. */
-function ColorField({ label, value, onChange }) {
-	const { theme: t } = useStrings();
-	const [draft, setDraft] = useState(null);
-	const parsed = parseColor(value);
-	const hex = parsed ? toHex(parsed) : "#000000";
-	const invalid = draft !== null && parseColor(draft) === null;
-	return /* @__PURE__ */ jsx(Field, {
-		label,
-		error: invalid ? t.invalidColor : void 0,
-		children: (control) => /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx("input", {
-				type: "color",
-				"aria-label": t.pick(label),
-				value: hex,
-				onChange: (e) => {
-					setDraft(null);
-					onChange(e.target.value);
-				},
-				className: "h-8 w-10 shrink-0 cursor-pointer rounded-md border border-(--theme-border) bg-transparent p-0.5"
-			}), /* @__PURE__ */ jsx("input", {
-				...control,
-				className: fieldBox({ size: "sm" }),
-				spellCheck: false,
-				value: draft ?? value,
-				onChange: (e) => {
-					const text = e.target.value;
-					if (parseColor(text)) {
-						setDraft(null);
-						onChange(text.trim().toLowerCase());
-					} else setDraft(text);
-				},
-				onBlur: () => setDraft(null)
-			})]
-		})
-	});
-}
 function ImportTheme({ onImport }) {
 	const { theme: t } = useStrings();
 	const [open, setOpen] = useState(false);

package/dist/components/ToggleGroup.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+export interface ToggleGroupOption<T extends string> {
+    value: T;
+    label: string;
+    /** Before the label, such as a `StatusDot` in the status's tone or a provider's logo. */
+    icon?: ReactNode;
+    /** How many items the option matches, after the label. */
+    count?: number | undefined;
+    disabled?: boolean | undefined;
+    testId?: string;
+}
+export interface ToggleGroupProps<T extends string> {
+    /** Names the group for assistive technology. Leave it out inside a
+     *  `Field group`, whose legend names it. */
+    label?: string | undefined;
+    options: readonly ToggleGroupOption<T>[];
+    /** The pressed options. Empty filters nothing out. */
+    value: readonly T[];
+    /** Called with the pressed options in the order `options` lists them. */
+    onValueChange: (value: T[]) => void;
+    /** Several options may be pressed at once; `false` allows one or none. */
+    multiple?: boolean | undefined;
+    /** Leads with an "All" option, pressed while nothing else is, that clears
+     *  the others. `{ count }` shows the total beside it. */
+    all?: boolean | {
+        count?: number | undefined;
+    } | undefined;
+    size?: 'sm' | 'md' | undefined;
+    disabled?: boolean | undefined;
+    testId?: string;
+}
+/** Options that narrow a list, such as run statuses or job states, as a row of
+ *  toggle buttons that wraps on a narrow screen. Pressing one adds it to the
+ *  filter and pressing it again takes it out, so an empty filter shows
+ *  everything; with `multiple={false}` pressing one replaces the last. Each
+ *  option may carry an icon, such as a status dot, and a count.
+ *
+ *  Use `SegmentedControl` instead for a setting that always has exactly one
+ *  value, such as a time range, what to group by, or which view of the same
+ *  data to show. A filter that may be off, or takes several values, is a
+ *  `ToggleGroup`. */
+export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, size, disabled, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;

package/dist/components/ToggleGroup.js

@@ -0,0 +1,69 @@
+import { cx } from "../cx.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { useStrings } from "./Provider.js";
+import { formatCount } from "../format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/ToggleGroup.tsx
+var ALL = "\0all";
+/** Options that narrow a list, such as run statuses or job states, as a row of
+*  toggle buttons that wraps on a narrow screen. Pressing one adds it to the
+*  filter and pressing it again takes it out, so an empty filter shows
+*  everything; with `multiple={false}` pressing one replaces the last. Each
+*  option may carry an icon, such as a status dot, and a count.
+*
+*  Use `SegmentedControl` instead for a setting that always has exactly one
+*  value, such as a time range, what to group by, or which view of the same
+*  data to show. A filter that may be off, or takes several values, is a
+*  `ToggleGroup`. */
+function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, size = "sm", disabled = false, testId }) {
+	const strings = useStrings();
+	const allCount = typeof all === "object" ? all.count : void 0;
+	const pressed = all && value.length === 0 ? [ALL] : value;
+	return /* @__PURE__ */ jsxs(ToggleGroup, {
+		"aria-label": label,
+		"data-testid": testId,
+		className: "flex flex-wrap items-center gap-1",
+		multiple,
+		disabled,
+		value: pressed,
+		onValueChange: (next) => {
+			if (next.includes(ALL) && !pressed.includes(ALL)) {
+				onValueChange([]);
+				return;
+			}
+			onValueChange(options.filter((option) => next.includes(option.value)).map((option) => option.value));
+		},
+		children: [all && /* @__PURE__ */ jsx(Chip, {
+			value: ALL,
+			label: strings.common.all,
+			count: allCount,
+			size
+		}), options.map((option) => /* @__PURE__ */ jsx(Chip, {
+			...option,
+			size
+		}, option.value))]
+	});
+}
+function Chip({ value, label, icon, count, disabled, testId, size }) {
+	return /* @__PURE__ */ jsxs(Toggle, {
+		value,
+		disabled,
+		"data-testid": testId,
+		className: cx("group aria-pressed:bg-(--theme-accent-subtle)", buttonClasses({
+			variant: "outline",
+			size
+		})),
+		children: [
+			icon,
+			label,
+			count !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "tabular-nums text-(--theme-muted-text-color) group-aria-pressed:text-(--theme-app)",
+				children: formatCount(count)
+			})
+		]
+	});
+}
+//#endregion
+export { ToggleGroup$1 as ToggleGroup };

package/dist/components/fieldBox.js

@@ -16,7 +16,7 @@ var sizes = {
 		text: "text-sm"
 	}
 };
-var base = "w-full min-w-0 rounded-md border border-(--theme-border) bg-(--theme-input-bg) text-(--theme-app) outline-none transition-colors placeholder:text-(--theme-muted-text-color)";
+var base = "w-full min-w-0 rounded-md border border-(--theme-border) bg-(--theme-input-bg) text-(--theme-app) outline-none transition-colors placeholder:text-(--theme-placeholder)";
 var own = cx("focus-visible:border-(--theme-accent) focus-visible:ring-1 focus-visible:ring-(--theme-accent)", "aria-invalid:border-(--theme-error) aria-invalid:focus-visible:ring-(--theme-error)", "disabled:cursor-not-allowed disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
 var inside = cx("has-[:focus-visible]:border-(--theme-accent) has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-(--theme-accent)", "has-[[aria-invalid=true]]:border-(--theme-error) has-[[aria-invalid=true]:focus-visible]:ring-(--theme-error)", "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-(--theme-input-disabled-bg) has-[input:disabled]:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
 /** The box every input-like control draws: text inputs, textareas, and the triggers of

package/dist/form/Fields/BooleanField.js

@@ -1,6 +1,6 @@
 import { Tooltip } from "../../components/Tooltip.js";
-import { Switch } from "../../components/Switch.js";
 import { Field } from "../../components/Field.js";
+import { Switch } from "../../components/Switch.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { jsx } from "react/jsx-runtime";

package/dist/form/Fields/ColorField.js

@@ -1,6 +1,5 @@
-import { cx } from "../../cx.js";
-import { fieldBox } from "../../components/fieldBox.js";
 import { Field } from "../../components/Field.js";
+import { ColorInput } from "../../components/ColorInput.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { jsx } from "react/jsx-runtime";
@@ -8,20 +7,17 @@ import { jsx } from "react/jsx-runtime";
 function ColorField(props) {
 	const { field, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
-	const handleChange = (e) => {
-		onChange?.(e.target.value);
-		change(e.target.value);
-	};
 	return /* @__PURE__ */ jsx(Field, {
 		...fieldFrame(props),
-		children: (control) => /* @__PURE__ */ jsx("input", {
+		children: (control) => /* @__PURE__ */ jsx(ColorInput, {
 			...control,
-			className: cx(fieldBox(), "w-18 cursor-pointer p-1"),
 			name: field.name,
 			value: value || "#fbbf24",
-			type: "color",
 			disabled,
-			onChange: handleChange
+			onValueChange: (color) => {
+				onChange?.(color);
+				change(color);
+			}
 		})
 	});
 }

package/dist/form/Fields/DropdownField.js

@@ -1,5 +1,5 @@
-import { Autocomplete, Combobox } from "../../components/Combobox.js";
 import { Field } from "../../components/Field.js";
+import { Autocomplete, Combobox } from "../../components/Combobox.js";
 import { toFieldItems } from "../utils/fieldItems.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useChoiceField } from "../useChoiceField.js";

package/dist/form/Fields/DurationField.js

@@ -1,7 +1,7 @@
 import { useStrings } from "../../components/Provider.js";
 import { Checkbox } from "../../components/Checkbox.js";
-import { fieldBox } from "../../components/fieldBox.js";
 import { Field, FieldOption } from "../../components/Field.js";
+import { fieldBox } from "../../components/fieldBox.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { formatDurationText, parseDurationText } from "../utils/duration.js";

package/dist/form/Fields/MultiDropdownField.js

@@ -1,5 +1,5 @@
-import { Combobox } from "../../components/Combobox.js";
 import { Field } from "../../components/Field.js";
+import { Combobox } from "../../components/Combobox.js";
 import { toFieldItems } from "../utils/fieldItems.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";

package/dist/form/Fields/StringField.js

@@ -1,6 +1,6 @@
 import { cx } from "../../cx.js";
-import { fieldBox } from "../../components/fieldBox.js";
 import { Field, RevealToggle } from "../../components/Field.js";
+import { fieldBox } from "../../components/fieldBox.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";

package/dist/form/Fields/TextAreaField.js

@@ -1,6 +1,6 @@
 import { cx } from "../../cx.js";
-import { fieldBox } from "../../components/fieldBox.js";
 import { Field } from "../../components/Field.js";
+import { fieldBox } from "../../components/fieldBox.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";

package/dist/form/Form.js

@@ -2,8 +2,8 @@ import { cx } from "../cx.js";
 import { Loader } from "../components/Loader.js";
 import { useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
-import { InfoTip } from "../components/InfoTip.js";
 import { FieldRowContext } from "../components/Field.js";
+import { InfoTip } from "../components/InfoTip.js";
 import { Section } from "../components/Section.js";
 import { parseWizardConfig } from "./Wizard/utils.js";
 import { inputWidth, resolvedFlag } from "./lib.js";