@parallelworks/ui 0.45.0 → 0.47.0

package/dist/components/Input.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
-import { fieldBox } from "./fieldBox.js";
 import { Field, RevealToggle } from "./Field.js";
+import { fieldBox } from "./fieldBox.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 //#region src/components/Input.tsx
@@ -19,7 +19,7 @@ function framed({ label, hint, description, error }, { id, required, disabled },
 	});
 }
 /** A single-line text field. `type="password"` adds a button that shows what was typed. */
-var Input = forwardRef(({ label, hint, description, error, className, mono, type, ...props }, ref) => {
+var Input = forwardRef(({ label, hint, description, error, className, mono, size, type, ...props }, ref) => {
 	const [revealed, setRevealed] = useState(false);
 	const secret = type === "password";
 	return framed({
@@ -35,7 +35,7 @@ var Input = forwardRef(({ label, hint, description, error, className, mono, type
 			"aria-invalid": control["aria-invalid"] ?? props["aria-invalid"],
 			"aria-describedby": [props["aria-describedby"], control["aria-describedby"]].filter(Boolean).join(" ") || void 0,
 			type: secret && revealed ? "text" : type,
-			className: cx(fieldBox(), mono && "font-mono", secret && "pr-9", className)
+			className: cx(fieldBox({ size }), mono && "font-mono", secret && "pr-9", className)
 		});
 		return secret ? /* @__PURE__ */ jsxs("div", {
 			className: "relative w-full",
@@ -49,7 +49,7 @@ var Input = forwardRef(({ label, hint, description, error, className, mono, type
 });
 Input.displayName = "Input";
 /** A multi-line text field that grows by hand. */
-var Textarea = forwardRef(({ label, hint, description, error, className, mono, ...props }, ref) => framed({
+var Textarea = forwardRef(({ label, hint, description, error, className, mono, size, ...props }, ref) => framed({
 	label,
 	hint,
 	description,
@@ -60,8 +60,11 @@ var Textarea = forwardRef(({ label, hint, description, error, className, mono, .
 	...control,
 	"aria-invalid": control["aria-invalid"] ?? props["aria-invalid"],
 	"aria-describedby": [props["aria-describedby"], control["aria-describedby"]].filter(Boolean).join(" ") || void 0,
-	className: cx(fieldBox({ multiline: true }), "min-h-24 resize-y", mono && "font-mono", className)
+	className: cx(fieldBox({
+		size,
+		multiline: true
+	}), size === "sm" ? "min-h-16" : "min-h-24", "resize-y", mono && "font-mono", className)
 })));
 Textarea.displayName = "Textarea";
 //#endregion
-export { Input, Textarea };
+export { Input, Textarea, framed };

package/dist/components/Loader.d.ts

@@ -5,7 +5,7 @@ export interface LoaderProps {
      *  loader is named with the provider's `loading` string. */
     label?: string | undefined;
     variant?: 'spinner' | 'logo';
-    /** Sits in a line of text or a button instead of centring in its own row. */
+    /** Sits in a line of text or a button instead of centering in its own row. */
     inline?: boolean;
     /** The spinner's color, such as `currentColor` inside a button. */
     color?: string | undefined;

package/dist/components/MenuEntries.js

@@ -38,7 +38,7 @@ function MenuEntries({ entries, search, query = "" }) {
 			children: /* @__PURE__ */ jsx(Menu.Input, {
 				"aria-label": search.placeholder,
 				placeholder: search.placeholder,
-				className: "w-full rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-1 text-[13px] text-(--theme-app) outline-none placeholder:text-(--theme-muted-text-color) focus:border-(--theme-accent)"
+				className: "w-full rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-1 text-[13px] text-(--theme-app) outline-none placeholder:text-(--theme-placeholder) focus:border-(--theme-accent)"
 			})
 		}),
 		/* @__PURE__ */ jsx(Menu.List, { children: /* @__PURE__ */ jsx(EntryRows, { entries: shown }) }),

package/dist/components/NumberInput.d.ts

@@ -15,6 +15,7 @@ export interface NumberInputProps extends Omit<NumberField.Root.Props, 'classNam
     'aria-invalid'?: boolean | undefined;
     /** Marks the field required for assistive technology without the native check `required` adds. */
     'aria-required'?: boolean | undefined;
+    /** `sm` for dense places such as toolbars and table cells. */
     size?: FieldBoxSize | undefined;
     /** Applied to the box around the input and its steppers, such as a width. */
     className?: string | undefined;

package/dist/components/OneTimeCodeInput.d.ts

@@ -0,0 +1,23 @@
+import { OTPField } from '@base-ui/react/otp-field';
+import { type FieldBoxSize } from './fieldBox.js';
+export interface OneTimeCodeInputProps extends Omit<OTPField.Root.Props, 'className' | 'render' | 'children' | 'length' | 'style'> {
+    /** How many characters the code has. */
+    length?: number | undefined;
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: FieldBoxSize | undefined;
+    'aria-invalid'?: boolean | undefined;
+    'aria-required'?: boolean | undefined;
+    /** On the row of boxes: its margin or gap. */
+    className?: string | undefined;
+}
+/**
+ * A one-time code, such as the six digits of a sign-in check, typed one character to a box. It
+ * fills from the browser's or phone's code autofill (`autocomplete="one-time-code"`) and from a
+ * paste of the whole code, moves on as each character is typed and back on Backspace, and opens a
+ * number pad for a numeric code. The value is the code as one string; `onValueComplete` fires once
+ * every box is filled, and `autoSubmit` submits the form then.
+ *
+ * Name it with a Field or a `<label>` for its `id`, which is the first box's, or with
+ * `aria-label`.
+ */
+export declare function OneTimeCodeInput({ length, size, className, 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, ...rootProps }: OneTimeCodeInputProps): import("react").JSX.Element;

package/dist/components/OneTimeCodeInput.js

@@ -0,0 +1,39 @@
+import { cx } from "../cx.js";
+import { useStrings } from "./Provider.js";
+import { fieldBox } from "./fieldBox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/components/OneTimeCodeInput.tsx
+/**
+* A one-time code, such as the six digits of a sign-in check, typed one character to a box. It
+* fills from the browser's or phone's code autofill (`autocomplete="one-time-code"`) and from a
+* paste of the whole code, moves on as each character is typed and back on Backspace, and opens a
+* number pad for a numeric code. The value is the code as one string; `onValueComplete` fires once
+* every box is filled, and `autoSubmit` submits the form then.
+*
+* Name it with a Field or a `<label>` for its `id`, which is the first box's, or with
+* `aria-label`.
+*/
+function OneTimeCodeInput({ length = 6, size = "md", className, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rootProps }) {
+	const t = useStrings().oneTimeCode;
+	const labelId = useId();
+	return /* @__PURE__ */ jsxs(OTPField.Root, {
+		length,
+		"aria-label": ariaLabel,
+		...rootProps,
+		className: cx("flex items-center", size === "sm" ? "gap-1" : "gap-2", className),
+		children: [ariaLabel && /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			hidden: true,
+			children: ariaLabel
+		}), Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(OTPField.Input, {
+			...index > 0 ? { "aria-label": t.character(index + 1, length) } : ariaLabel ? { "aria-labelledby": labelId } : {},
+			...ariaInvalid && { "aria-invalid": true },
+			...ariaRequired && { "aria-required": true },
+			className: cx(fieldBox({ size }), "px-0 text-center font-mono tabular-nums", size === "sm" ? "w-7" : "w-9 text-base")
+		}, index))]
+	});
+}
+//#endregion
+export { OneTimeCodeInput };

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;
@@ -406,7 +415,7 @@ export interface UIStrings {
             failedTitle: string;
             unknownTitle: string;
             unknownShort: string;
-            cancelled: string;
+            canceled: string;
             completed: string;
             failed: string;
             totalSize: string;
@@ -417,9 +426,9 @@ export interface UIStrings {
             expandDetails: string;
             minimizeDetails: string;
             sessionNotQueued: (id: string, status: string) => string;
-            allCancelled: (count: number) => string;
+            allCanceled: (count: number) => string;
             someUploaded: (count: number) => string;
-            someCancelled: (count: number) => string;
+            someCanceled: (count: number) => string;
             allUploaded: string;
             failedSummary: (failed: number, total: number) => string;
             failReasonGeneric: 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",
@@ -404,7 +408,7 @@ var DEFAULTS = {
 				failedTitle: "Upload Failed",
 				unknownTitle: "Unknown Status",
 				unknownShort: "Unknown",
-				cancelled: "Cancelled",
+				canceled: "Canceled",
 				completed: "Completed",
 				failed: "Failed",
 				totalSize: "Total size:",
@@ -414,9 +418,9 @@ var DEFAULTS = {
 				expandDetails: "Expand details",
 				minimizeDetails: "Minimize details",
 				sessionNotQueued: (id, status) => `Upload session with ID ${id} is not queued, current status is ${status}`,
-				allCancelled: (count) => `All ${count} file(s) were cancelled by user.`,
+				allCanceled: (count) => `All ${count} file(s) were canceled by user.`,
 				someUploaded: (count) => `${count} file(s) uploaded successfully!`,
-				someCancelled: (count) => `${count} file(s) cancelled by user.`,
+				someCanceled: (count) => `${count} file(s) canceled by user.`,
 				allUploaded: "Upload file(s) successfully!",
 				failedSummary: (failed, total) => `${failed}/${total} files failed to upload:`,
 				failReasonGeneric: "The file(s) may be too large or the connection may have been interrupted.",
@@ -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/StatusBadge.d.ts

@@ -9,14 +9,14 @@ interface StatusBadgeProps {
     variant?: BadgeVariant;
     /** Show animated pulse indicator */
     pulse?: boolean;
-    /** Show a still indicator in the variant's colour */
+    /** Show a still indicator in the variant's color */
     dot?: boolean;
     /** Size */
     size?: 'sm' | 'md';
     /** Additional class */
     className?: string;
 }
-/** A line of text in a variant's colour, for a status that stands beside a
+/** A line of text in a variant's color, for a status that stands beside a
  *  dot rather than inside a badge. */
 export declare function statusTextClass(variant: BadgeVariant): string;
 export declare function StatusBadge({ children, variant, pulse, dot, size, className, }: StatusBadgeProps): import("react").JSX.Element;

package/dist/components/StatusBadge.js

@@ -2,7 +2,7 @@ import { cx } from "../cx.js";
 import { toneFill, toneSurface, toneText } from "./tone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/StatusBadge.tsx
-/** A line of text in a variant's colour, for a status that stands beside a
+/** A line of text in a variant's color, for a status that stands beside a
 *  dot rather than inside a badge. */
 function statusTextClass(variant) {
 	return toneText[variant];

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);