@protobase/ui 0.15.5 → 0.16.1

package/dist/primitives/otp-input.js

@@ -0,0 +1,117 @@
+import { cn } from "../lib/cn.js";
+import { editedCode, pastedCode } from "./otp-value.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/otp-input.tsx
+/**
+* A one-time code field drawn as a box per digit: one real input, so the system's code autofill (`one-time-code`, from
+* a mail or a text message), pasting a whole code into any box, the phone's digit keyboard and a form's `required`
+* work as on any field. Arrow keys, Home and End move between boxes, and a digit typed on a filled box replaces it.
+* Label it as any input, with a `<label>` around it or `aria-label`.
+*/
+const OtpInput = ({ value, onChange, onComplete, length = 6, invalid, disabled, className, ref, onFocus, onBlur, onSelect, onKeyDown, onClick, onPaste, ...rest }) => {
+	const input = useRef(null);
+	const [focused, setFocused] = useState(false);
+	const [caret, setCaret] = useState(value.length);
+	const code = value.slice(0, length);
+	const active = Math.min(caret, length - 1);
+	const attach = (node) => {
+		input.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const commit = (next) => {
+		if (next === code) return;
+		onChange(next);
+		if (next.length === length) onComplete?.(next);
+	};
+	const place = (at) => {
+		const field = input.current;
+		if (!field) return;
+		const to = Math.max(0, Math.min(at, code.length));
+		field.setSelectionRange(to, to < code.length ? to + 1 : to);
+		setCaret(to);
+	};
+	const moveWithKeys = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return;
+		const at = event.currentTarget.selectionStart ?? code.length;
+		const target = {
+			ArrowLeft: at - 1,
+			ArrowRight: at + 1,
+			Home: 0,
+			End: code.length
+		}[event.key];
+		if (target === void 0) return;
+		event.preventDefault();
+		place(target);
+	};
+	const placeAtPointer = (event) => {
+		onClick?.(event);
+		const box = event.currentTarget.getBoundingClientRect();
+		if (event.clientX <= box.left || event.clientX >= box.right) return;
+		place(Math.floor((event.clientX - box.left) / box.width * length));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", disabled && "opacity-50", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			className: "flex justify-center gap-2",
+			children: Array.from({ length }, (_, index) => {
+				const current = focused && index === active;
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": index,
+					"data-digit": code[index],
+					className: cn("flex h-12 min-w-0 max-w-12 flex-1 items-center justify-center rounded-md border bg-background font-mono text-xl font-semibold text-foreground shadow-sm transition-colors before:content-[attr(data-digit)]", invalid ? "border-danger" : current ? "border-primary" : "border-border-strong", current && (invalid ? "ring-2 ring-danger/20" : "ring-2 ring-primary/20")),
+					children: code[index] === void 0 && (current ? /* @__PURE__ */ jsx("span", { className: "h-6 w-px animate-pulse bg-foreground" }) : /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-border-strong" }))
+				}, index);
+			})
+		}), /* @__PURE__ */ jsx("input", {
+			ref: attach,
+			type: "text",
+			inputMode: "numeric",
+			autoComplete: "one-time-code",
+			pattern: `[0-9]{${length}}`,
+			spellCheck: false,
+			autoCorrect: "off",
+			autoCapitalize: "off",
+			"aria-invalid": invalid || void 0,
+			disabled,
+			value: code,
+			className: "absolute inset-0 size-full cursor-text bg-transparent text-transparent caret-transparent outline-none selection:bg-transparent disabled:cursor-not-allowed",
+			...rest,
+			onChange: (event) => {
+				const { data, dataTransfer } = event.nativeEvent;
+				commit(editedCode(event.target.value, data ?? dataTransfer?.getData("text/plain"), length));
+			},
+			onPaste: (event) => {
+				onPaste?.(event);
+				if (event.defaultPrevented) return;
+				event.preventDefault();
+				const field = event.currentTarget;
+				const next = pastedCode(code, event.clipboardData.getData("text"), field.selectionStart ?? code.length, length);
+				commit(next);
+				setCaret(next.length);
+			},
+			onSelect: (event) => {
+				onSelect?.(event);
+				const field = event.currentTarget;
+				const start = field.selectionStart ?? code.length;
+				if (start === field.selectionEnd && start < field.value.length) field.setSelectionRange(start, start + 1);
+				setCaret(start);
+			},
+			onKeyDown: moveWithKeys,
+			onClick: placeAtPointer,
+			onFocus: (event) => {
+				setFocused(true);
+				onFocus?.(event);
+			},
+			onBlur: (event) => {
+				setFocused(false);
+				onBlur?.(event);
+			}
+		})]
+	});
+};
+//#endregion
+export { OtpInput };

package/dist/primitives/otp-value.js

@@ -0,0 +1,23 @@
+//#region src/primitives/otp-value.ts
+/** The digits of `text`, at most `length`. */
+const digitsOf = (text, length) => text.replace(/\D/g, "").slice(0, length);
+/**
+* The field's new code after an edit left `edited` in it. Text inserted in one go that holds a whole code, as a paste,
+* the keyboard's suggestion or the system's autofill does, is the code, whatever was in the field before; anything else
+* keeps the field's digits.
+*/
+const editedCode = (edited, inserted, length) => {
+	const whole = digitsOf(inserted ?? "", length);
+	return whole.length === length ? whole : digitsOf(edited, length);
+};
+/**
+* The code after `pasted` went into `code` at box `start`: a whole code replaces the field's, and fewer digits fill the
+* boxes from `start` on, over the digits they held.
+*/
+const pastedCode = (code, pasted, start, length) => {
+	const digits = pasted.replace(/\D/g, "");
+	if (digits.length >= length) return digits.slice(0, length);
+	return digitsOf(code.slice(0, start) + digits + code.slice(start + digits.length), length);
+};
+//#endregion
+export { digitsOf, editedCode, pastedCode };

package/dist/primitives/responsive-dialog.d.ts

@@ -8,10 +8,12 @@ export type ResponsiveDialogProps = {
   /** Buttons: right-aligned in the modal, stacked full width at the bottom of the sheet. */
   actions: ReactNode;
   children?: ReactNode;
+  /** Room for a row of cards or a table in the modal's body. */
+  wide?: boolean;
 };
 /**
  * A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
  * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
  */
-export declare const ResponsiveDialog: ({ title, description, open, onClose, actions, children }: ResponsiveDialogProps) => import("react").JSX.Element | null;
+export declare const ResponsiveDialog: ({ title, description, open, onClose, actions, children, wide }: ResponsiveDialogProps) => import("react").JSX.Element | null;
 //#endregion

package/dist/primitives/responsive-dialog.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
 * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
 */
-const ResponsiveDialog = ({ title, description, open, onClose, actions, children }) => {
+const ResponsiveDialog = ({ title, description, open, onClose, actions, children, wide }) => {
 	const desktop = useIsDesktop();
 	if (!open) return null;
 	if (desktop) return /* @__PURE__ */ jsx(Dialog, {
@@ -15,6 +15,7 @@ const ResponsiveDialog = ({ title, description, open, onClose, actions, children
 		description,
 		onClose,
 		actions,
+		wide,
 		children
 	});
 	return /* @__PURE__ */ jsx(Sheet, {

package/dist/primitives/route-link.d.ts

@@ -0,0 +1 @@
+import { AnchorHTMLAttributes } from "react";

package/dist/primitives/route-link.js

@@ -0,0 +1,20 @@
+import { inApp } from "../app-shell/breadcrumb.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/route-link.tsx
+/**
+* An ordinary anchor to `to.href`: a plain click follows it in place with `to.onFollow`, while a middle click or one
+* with Ctrl, Cmd, Shift or Alt opens it in a new tab or window, or saves it, as on any link. Every navigation a click
+* starts is one of these, never a button that moves the page, so the browser shows where it goes and can open it.
+*/
+const RouteLink = ({ to, onClick, ...rest }) => /* @__PURE__ */ jsx("a", {
+	href: to.href,
+	onClick: (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented || !inApp(event)) return;
+		event.preventDefault();
+		to.onFollow();
+	},
+	...rest
+});
+//#endregion
+export { RouteLink };

package/dist/primitives/textarea.js

@@ -0,0 +1,36 @@
+import { cn } from "../lib/cn.js";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/textarea.tsx
+const fit = (box) => {
+	box.style.height = "auto";
+	box.style.height = `${box.scrollHeight + box.offsetHeight - box.clientHeight}px`;
+};
+/** A text box of several lines that grows with its text instead of scrolling inside. */
+const Textarea = ({ invalid, className, rows = 3, value, ...rest }) => {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		if (ref.current) fit(ref.current);
+	}, [value]);
+	useEffect(() => {
+		const box = ref.current;
+		if (!box) return;
+		let width = box.clientWidth;
+		const observer = new ResizeObserver(() => {
+			if (box.clientWidth === width) return;
+			width = box.clientWidth;
+			fit(box);
+		});
+		observer.observe(box);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx("textarea", {
+		ref,
+		rows,
+		value,
+		className: cn("block w-full resize-none overflow-hidden rounded-md border bg-background px-2.5 py-1.5 text-[13px] text-foreground shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", invalid ? "border-danger" : "border-border-strong", className),
+		...rest
+	});
+};
+//#endregion
+export { Textarea };

package/dist/record-view/field.js

@@ -3,60 +3,63 @@ import { Button } from "../primitives/button.js";
 import { TriangleAlert } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/field.tsx
-const Field = ({ label, required, help, example, error, conflict, children }) => /* @__PURE__ */ jsxs("div", { children: [
-	/* @__PURE__ */ jsxs("div", {
-		className: "mb-1.5 flex items-center gap-2",
-		children: [/* @__PURE__ */ jsxs("label", {
-			className: "text-[13px] font-medium text-foreground",
-			children: [label, required && /* @__PURE__ */ jsx("span", {
-				className: "ml-0.5 text-danger-text",
-				"aria-label": "required",
-				children: "*"
+const Field = ({ label, required, help, example, error, conflict, wide, children }) => /* @__PURE__ */ jsxs("div", {
+	className: wide ? "sm:col-span-2" : void 0,
+	children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "mb-1.5 flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs("label", {
+				className: "text-[13px] font-medium text-foreground",
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "ml-0.5 text-danger-text",
+					"aria-label": "required",
+					children: "*"
+				})]
+			}), conflict && /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-1.5 text-warning-text",
+				title: `${conflict.user.name} saved a different value`,
+				children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5" }), /* @__PURE__ */ jsx(Avatar, {
+					initials: conflict.user.initials,
+					hue: conflict.user.hue,
+					size: "xs"
+				})]
 			})]
-		}), conflict && /* @__PURE__ */ jsxs("span", {
-			className: "inline-flex items-center gap-1.5 text-warning-text",
-			title: `${conflict.user.name} saved a different value`,
-			children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5" }), /* @__PURE__ */ jsx(Avatar, {
-				initials: conflict.user.initials,
-				hue: conflict.user.hue,
-				size: "xs"
+		}),
+		children,
+		help && /* @__PURE__ */ jsx("p", {
+			className: "mt-1.5 text-xs text-muted-foreground",
+			children: help
+		}),
+		example && /* @__PURE__ */ jsxs("p", {
+			className: "mt-0.5 text-xs text-faint-foreground",
+			children: ["Example: ", example]
+		}),
+		error && /* @__PURE__ */ jsx("p", {
+			className: "mt-1.5 text-xs font-medium text-danger-text",
+			children: error
+		}),
+		conflict && /* @__PURE__ */ jsxs("div", {
+			className: "mt-2 flex items-center justify-between gap-3 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-text",
+			children: [/* @__PURE__ */ jsxs("span", { children: [
+				/* @__PURE__ */ jsx("strong", { children: conflict.user.name }),
+				" saved this ",
+				conflict.ago,
+				": ",
+				/* @__PURE__ */ jsx("strong", { children: conflict.theirValue })
+			] }), /* @__PURE__ */ jsxs("span", {
+				className: "flex gap-1.5",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onClick: conflict.onKeepMine,
+					children: "Keep mine"
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onClick: conflict.onUseTheirs,
+					children: "Use theirs"
+				})]
 			})]
-		})]
-	}),
-	children,
-	help && /* @__PURE__ */ jsx("p", {
-		className: "mt-1.5 text-xs text-muted-foreground",
-		children: help
-	}),
-	example && /* @__PURE__ */ jsxs("p", {
-		className: "mt-0.5 text-xs text-faint-foreground",
-		children: ["Example: ", example]
-	}),
-	error && /* @__PURE__ */ jsx("p", {
-		className: "mt-1.5 text-xs font-medium text-danger-text",
-		children: error
-	}),
-	conflict && /* @__PURE__ */ jsxs("div", {
-		className: "mt-2 flex items-center justify-between gap-3 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-text",
-		children: [/* @__PURE__ */ jsxs("span", { children: [
-			/* @__PURE__ */ jsx("strong", { children: conflict.user.name }),
-			" saved this ",
-			conflict.ago,
-			": ",
-			/* @__PURE__ */ jsx("strong", { children: conflict.theirValue })
-		] }), /* @__PURE__ */ jsxs("span", {
-			className: "flex gap-1.5",
-			children: [/* @__PURE__ */ jsx(Button, {
-				size: "sm",
-				onClick: conflict.onKeepMine,
-				children: "Keep mine"
-			}), /* @__PURE__ */ jsx(Button, {
-				size: "sm",
-				onClick: conflict.onUseTheirs,
-				children: "Use theirs"
-			})]
-		})]
-	})
-] });
+		})
+	]
+});
 //#endregion
 export { Field };