@parallelworks/ui 0.48.1 → 0.50.0

package/dist/components/Field.d.ts

@@ -38,6 +38,10 @@ export interface FieldProps {
     layout?: FieldLayout | undefined;
     /** With `inline`, the label takes only its own width rather than the column's. */
     compact?: boolean | undefined;
+    /** Matches the label to a control of the same `size`. At `sm` the label is a small, muted
+     *  caption for a compact control, such as a picker in a toolbar, and an inline label's row
+     *  is the `sm` control's height. Set the control's own `size` to match. */
+    size?: FieldBoxSize | undefined;
     /** A set of controls, such as radios or checkboxes, that a legend names instead of a label. */
     group?: boolean | undefined;
     /** The control's id; one is made up when left out. */
@@ -57,7 +61,7 @@ export declare function ErrorText({ id, children }: {
 }): import("react").JSX.Element | null;
 /** A control with its label, help and error, tied to it for assistive technology. One frame
  *  for every field, in a form or standing alone. */
-export declare function Field({ label, hint, actions, description, error, invalid, required, disabled, layout, compact, group, id: ownId, className, children, }: FieldProps): import("react").JSX.Element;
+export declare function Field({ label, hint, actions, description, error, invalid, required, disabled, layout, compact, size, group, id: ownId, className, children, }: FieldProps): import("react").JSX.Element;
 /** One checkbox or radio and its label inside a Field, such as an option of a group. A bare
  *  `<label>` there would take the Field's label as its own, so every option read as the field. */
 export declare function FieldOption({ disabled, className, children, }: {

package/dist/components/Field.js

@@ -17,7 +17,19 @@ var FieldRowContext = createContext(false);
 function useFieldControl() {
 	return use(ControlContext);
 }
-var labelClassName = "flex items-center gap-1 text-sm font-medium text-(--theme-app)";
+var labelSizes = {
+	sm: {
+		text: "text-xs text-(--theme-muted-text-color)",
+		inlineHeight: "min-h-7",
+		stackGap: "gap-1"
+	},
+	md: {
+		text: "text-sm text-(--theme-app)",
+		inlineHeight: "min-h-9",
+		stackGap: "gap-1.5"
+	}
+};
+var labelClassName = "flex items-center gap-1 font-medium";
 var actionsClassName = "ml-auto flex shrink-0 items-center gap-1";
 var errorTextClassName = "flex items-center gap-1.5 text-xs text-(--theme-error)";
 /** An error in the look a Field gives its own, for a control outside a Field, or for a part of
@@ -36,7 +48,7 @@ function ErrorText({ id, children }) {
 }
 /** A control with its label, help and error, tied to it for assistive technology. One frame
 *  for every field, in a form or standing alone. */
-function Field$1({ label, hint, actions, description, error, invalid, required = false, disabled = false, layout = "stacked", compact = false, group = false, id: ownId, className, children }) {
+function Field$1({ label, hint, actions, description, error, invalid, required = false, disabled = false, layout = "stacked", compact = false, size = "md", group = false, id: ownId, className, children }) {
 	const uid = useId();
 	const id = ownId ?? `${uid}control`;
 	const labelId = `${uid}label`;
@@ -53,7 +65,8 @@ function Field$1({ label, hint, actions, description, error, invalid, required =
 	};
 	const inline = layout === "inline";
 	const inRow = use(FieldRowContext) && !inline && !group;
-	const labelBox = cx(labelClassName, inline && cx("min-h-9 shrink-0", compact ? "mr-2 w-fit" : "w-52 pr-3"), inRow && "row-start-1 self-end");
+	const labelSize = labelSizes[size];
+	const labelBox = cx(labelClassName, labelSize.text, inline && cx(labelSize.inlineHeight, "shrink-0", compact ? "mr-2 w-fit" : "w-52 pr-3"), inRow && "row-start-1 self-end");
 	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("span", { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] }),
 		hint,
@@ -89,7 +102,7 @@ function Field$1({ label, hint, actions, description, error, invalid, required =
 			})
 		]
 	});
-	const frame = inRow ? cx("contents", className) : cx("flex w-full", inline ? "items-start" : "flex-col gap-1.5", className);
+	const frame = inRow ? cx("contents", className) : cx("flex w-full", inline ? "items-start" : cx("flex-col", labelSize.stackGap), className);
 	if (group) return /* @__PURE__ */ jsx(Field.Root, {
 		invalid: isInvalid,
 		disabled,

package/dist/components/OneTimeCodeInput.d.ts

@@ -7,6 +7,8 @@ export interface OneTimeCodeInputProps extends Omit<OTPField.Root.Props, 'classN
     size?: FieldBoxSize | undefined;
     'aria-invalid'?: boolean | undefined;
     'aria-required'?: boolean | undefined;
+    /** Focuses the first box on mount, for a page or dialog whose only task is entering the code. */
+    autoFocus?: boolean | undefined;
     /** On the row of boxes: its margin or gap. */
     className?: string | undefined;
 }
@@ -20,4 +22,4 @@ export interface OneTimeCodeInputProps extends Omit<OTPField.Root.Props, 'classN
  * 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;
+export declare function OneTimeCodeInput({ length, size, className, 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, autoFocus, ...rootProps }: OneTimeCodeInputProps): import("react").JSX.Element;

package/dist/components/OneTimeCodeInput.js

@@ -15,7 +15,7 @@ import { OTPField } from "@base-ui/react/otp-field";
 * 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 }) {
+function OneTimeCodeInput({ length = 6, size = "md", className, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, autoFocus, ...rootProps }) {
 	const t = useStrings().oneTimeCode;
 	const labelId = useId();
 	return /* @__PURE__ */ jsxs(OTPField.Root, {
@@ -31,6 +31,7 @@ function OneTimeCodeInput({ length = 6, size = "md", className, "aria-label": ar
 			...index > 0 ? { "aria-label": t.character(index + 1, length) } : ariaLabel ? { "aria-labelledby": labelId } : {},
 			...ariaInvalid && { "aria-invalid": true },
 			...ariaRequired && { "aria-required": true },
+			autoFocus: autoFocus && index === 0,
 			className: cx(fieldBox({ size }), "px-0 text-center font-mono tabular-nums", size === "sm" ? "w-7" : "w-9 text-base")
 		}, index))]
 	});

package/dist/components/PageHeader.d.ts

@@ -41,7 +41,7 @@ export declare function BreadcrumbsTitleAction({ children }: {
 export declare function BreadcrumbsRightAction({ children }: {
     children: ReactNode;
 }): import("react").ReactPortal | null;
-export declare function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, href, onClick, disabled, tooltip, }: {
+export declare function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, href, onClick, disabled, tooltip, destructive, }: {
     icon: ComponentType<{
         className?: string;
     }>;
@@ -51,6 +51,9 @@ export declare function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel,
     onClick?: (() => void) | undefined;
     disabled?: boolean;
     tooltip?: string | undefined;
+    /** In the error color, as a destructive menu entry is, for an action that removes or breaks
+     *  something. */
+    destructive?: boolean | undefined;
 }): import("react").JSX.Element;
 interface PageHeaderProps {
     breadcrumbs?: PageHeaderBreadcrumb[] | undefined;

package/dist/components/PageHeader.js

@@ -97,22 +97,23 @@ function BreadcrumbsRightAction({ children }) {
 	if (!rightActionSlot) return null;
 	return createPortal(children, rightActionSlot);
 }
-var breadcrumbsActionClasses = "flex items-center gap-1 link text-xs whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed";
-function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, href, onClick, disabled, tooltip }) {
+var breadcrumbsActionClasses = "flex cursor-pointer items-center gap-1 text-xs whitespace-nowrap hover:not-disabled:underline disabled:cursor-not-allowed disabled:opacity-50";
+function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, href, onClick, disabled, tooltip, destructive = false }) {
 	const Link = useLink();
+	const className = cx(breadcrumbsActionClasses, destructive ? "text-(--theme-error)" : "text-(--theme-link)");
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: tooltip,
 		children: href && !disabled ? /* @__PURE__ */ jsx(Link, {
 			href,
-			className: breadcrumbsActionClasses,
+			className,
 			"aria-label": ariaLabel,
 			children: content
 		}) : /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick,
 			disabled,
-			className: breadcrumbsActionClasses,
+			className,
 			"aria-label": ariaLabel,
 			children: content
 		})

package/dist/components/splitter.js

@@ -18,15 +18,21 @@ function useSplitter({ width, onWidthChange, min, max, side, defaultWidth, label
 		e.currentTarget.setPointerCapture?.(e.pointerId);
 		drag.current = {
 			x: e.clientX,
-			width
+			width,
+			live: width
 		};
 		setLive(width);
 	};
 	const onPointerMove = (e) => {
-		if (drag.current) setLive(clamp(drag.current.width + (e.clientX - drag.current.x) * grows));
+		const current = drag.current;
+		if (current) {
+			current.live = clamp(current.width + (e.clientX - current.x) * grows);
+			setLive(current.live);
+		}
 	};
 	const onPointerUp = () => {
-		if (drag.current && live !== null && live !== width) onWidthChange(live);
+		const ended = drag.current;
+		if (ended && ended.live !== ended.width) onWidthChange(ended.live);
 		drag.current = null;
 		setLive(null);
 	};

package/dist/editor/workers.js

@@ -2,12 +2,12 @@
 var monacoEnvironment = { getWorker(_moduleId, label) {
 	if (label === "json") return new Worker(new URL(
 		/* @vite-ignore */
-		new URL("../assets/json.worker-Dqgjpq9F.js", import.meta.url).href,
+		new URL("../assets/json.worker-BKkHJbNB.js", import.meta.url).href,
 		"" + import.meta.url
 	), { type: "module" });
 	return new Worker(new URL(
 		/* @vite-ignore */
-		new URL("../assets/editor.worker-DfmPPyOL.js", import.meta.url).href,
+		new URL("../assets/editor.worker-Cc3TfJ_-.js", import.meta.url).href,
 		"" + import.meta.url
 	), { type: "module" });
 } };
@@ -27,7 +27,7 @@ function setupMonacoWorkers() {
 function createYamlWorker() {
 	return new Worker(new URL(
 		/* @vite-ignore */
-		new URL("../assets/yaml.worker-DLx0whrM.js", import.meta.url).href,
+		new URL("../assets/yaml.worker-k9AdOqzf.js", import.meta.url).href,
 		"" + import.meta.url
 	), { type: "module" });
 }