@protobase/ui 0.15.4 → 0.16.0

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/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 };