@parallelworks/ui 0.59.0 → 0.60.0

package/dist/components/ColorInput.d.ts

@@ -9,6 +9,8 @@ export interface ColorInputProps {
     label?: ReactNode;
     /** Beside the label and outside it, so it stays out of the field's name. */
     hint?: ReactNode;
+    /** Buttons at the far end of the label's row that act on the color, as Field's `actions`. */
+    actions?: ReactNode;
     /** Help under the field. */
     description?: ReactNode;
     error?: ReactNode;
@@ -33,4 +35,4 @@ export interface ColorInputProps {
  * in. A half-typed color stays in the field, marked invalid, until it parses; leaving the field
  * puts back the last color that did.
  */
-export declare function ColorInput({ value, onValueChange, label, hint, description, error, size, id, name, disabled, required, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, }: ColorInputProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export declare function ColorInput({ value, onValueChange, label, hint, actions, description, error, size, id, name, disabled, required, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, }: ColorInputProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/components/ColorInput.js

@@ -14,7 +14,7 @@ var swatchClassName = cx("shrink-0 cursor-pointer p-0.5", "[&::-webkit-color-swa
 * in. A half-typed color stays in the field, marked invalid, until it parses; leaving the field
 * puts back the last color that did.
 */
-function ColorInput({ value, onValueChange, label, hint, description, error, size = "md", id, name, disabled, required, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className }) {
+function ColorInput({ value, onValueChange, label, hint, actions, description, error, size = "md", id, name, disabled, required, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className }) {
 	const t = useStrings().colorInput;
 	const [draft, setDraft] = useState(null);
 	const errorId = useId();
@@ -25,6 +25,7 @@ function ColorInput({ value, onValueChange, label, hint, description, error, siz
 	return framed({
 		label,
 		hint,
+		actions,
 		description,
 		error: error ?? (unparsed ? t.invalid : void 0),
 		size

package/dist/components/Input.d.ts

@@ -22,7 +22,9 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     ref?: Ref<HTMLTextAreaElement> | undefined;
 }
 /** The Field around a control when it has a label; the control alone when it doesn't. */
-export declare function framed({ label, hint, help, description, error, size }: Omit<FramedProps, 'mono'>, { id, required, disabled, }: {
+export declare function framed({ label, hint, help, actions, description, error, size, }: Omit<FramedProps, 'mono'> & {
+    actions?: ReactNode;
+}, { id, required, disabled, }: {
     id?: string | undefined;
     required?: boolean | undefined;
     disabled?: boolean | undefined;

package/dist/components/Input.js

@@ -6,12 +6,13 @@ import { useState } from "react";
 import { Input } from "@base-ui/react/input";
 //#region src/components/Input.tsx
 /** The Field around a control when it has a label; the control alone when it doesn't. */
-function framed({ label, hint, help, description, error, size }, { id, required, disabled }, control) {
+function framed({ label, hint, help, actions, description, error, size }, { id, required, disabled }, control) {
 	if (label === void 0) return control(error ? { "aria-invalid": true } : {});
 	return /* @__PURE__ */ jsx(Field, {
 		label,
 		hint,
 		help,
+		actions,
 		description,
 		error,
 		required,

package/dist/components/Provider.d.ts

@@ -153,6 +153,8 @@ export interface UIStrings {
         /** The background a theme is generated from. */
         base: string;
         accent: string;
+        /** Exchanges the background and the accent. */
+        swap: string;
         contrast: string;
         /** Under the contrast slider. */
         contrastHelp: string;

package/dist/components/Provider.js

@@ -153,6 +153,7 @@ var DEFAULTS = {
 			presets: "Presets",
 			base: "Background",
 			accent: "Accent",
+			swap: "Swap background and accent",
 			contrast: "Contrast",
 			contrastHelp: "Separates surfaces and strengthens text. Text always meets WCAG AA.",
 			customSidebar: "Custom sidebar",

package/dist/components/ThemeEditor.js

@@ -1,7 +1,9 @@
 import { cx } from "../cx.js";
+import { SwapIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
 import { useCopy } from "./useCopy.js";
 import { Button } from "./Button.js";
+import { IconButton } from "./IconButton.js";
 import { fieldBox } from "./fieldBox.js";
 import { parseColor, toHex } from "../theme/color.js";
 import { CODE_STYLES, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, schemeFor, serializeTheme } from "../theme/model.js";
@@ -110,6 +112,14 @@ function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPrefer
 				}),
 				/* @__PURE__ */ jsx(ColorInput, {
 					label: t.accent,
+					actions: /* @__PURE__ */ jsx(IconButton, {
+						icon: /* @__PURE__ */ jsx(SwapIcon, { className: "rotate-90" }),
+						label: t.swap,
+						onClick: () => setSeed({
+							base: seed.accent,
+							accent: seed.base
+						})
+					}),
 					value: seed.accent,
 					onValueChange: (accent) => setSeed({ accent })
 				}),

package/dist/theme/derive.js

@@ -402,6 +402,10 @@ function build(scheme, options) {
 	}
 	const sidebarBase = scheme.sidebar?.base ? oklch(scheme.sidebar.base) : neutral(dark ? Math.max(.08, base.l - .035 * s) : base.l - .035 * s);
 	const sidebarAccent = scheme.sidebar?.accent ? oklch(scheme.sidebar.accent) : accent;
+	const activeTint = sidebarAccent.c < .02 ? sidebarBase : {
+		...sidebarAccent,
+		c: Math.min(sidebarAccent.c, .08)
+	};
 	const sidebarDark = isDarkColor(toHex(sidebarBase));
 	const sidebarDir = sidebarDark ? 1 : -1;
 	set("--theme-sidebar-bg", sidebarBase);
@@ -409,17 +413,18 @@ function build(scheme, options) {
 		...sidebarBase,
 		l: sidebarBase.l + sidebarDir * (sidebarDark ? .08 : .05) * s
 	});
-	const activeAt = (f) => ({
-		l: sidebarBase.l + sidebarDir * (sidebarDark ? .12 : .07) * s * f,
-		c: Math.min(sidebarAccent.c, .08),
-		h: sidebarAccent.h
+	const activeAt = (dir) => (f) => ({
+		l: sidebarBase.l + dir * (sidebarDark ? .12 : .07) * s * f,
+		c: activeTint.c,
+		h: activeTint.h
 	});
-	set("--theme-sidebar-active-bg", activeAt(roomFor(activeAt, t.primary)));
+	const [active, room] = [activeAt(sidebarDir), activeAt(-sidebarDir)].map((fill) => [fill, roomFor(fill, t.primary)]).reduce((a, b) => b[1] > a[1] ? b : a);
+	set("--theme-sidebar-active-bg", active(room));
 	solved("--theme-sidebar-text", inkFor(sidebarBase, sidebarBase, sidebarDark), ["--theme-sidebar-bg", "--theme-sidebar-hover"], t.primary);
 	solved("--theme-sidebar-active-text", {
 		l: sidebarBase.l,
-		c: Math.min(sidebarAccent.c, .04),
-		h: sidebarAccent.h
+		c: Math.min(activeTint.c, .04),
+		h: activeTint.h
 	}, ["--theme-sidebar-active-bg"], t.primary);
 	const style = options.code ?? "balanced";
 	set("--theme-code-bg", mutedPanel);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "description": "React UI components: a theme contract, icons, brand logos, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {