@protobase/ui 0.19.4 → 0.19.6

package/dist/primitives/menu-select.js

@@ -46,7 +46,7 @@ const MenuSelect = ({ value, options, onChange, label }) => {
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
 			onClick: () => setOpen(!open),
-			className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border-strong bg-background px-2.5 text-[13px] font-medium shadow-sm transition-colors hover:bg-muted pointer-coarse:h-11",
+			className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border-strong bg-background px-2.5 text-body font-medium shadow-sm transition-colors hover:bg-muted pointer-coarse:h-11",
 			children: [
 				current?.icon && /* @__PURE__ */ jsx(current.icon, { className: "size-3.5" }),
 				current?.label ?? label,
@@ -56,7 +56,7 @@ const MenuSelect = ({ value, options, onChange, label }) => {
 			role: "menu",
 			"aria-label": label,
 			onKeyDown,
-			className: "absolute right-0 top-full z-30 mt-1 min-w-40 rounded-md border bg-background py-1 text-[13px] shadow-pop",
+			className: "absolute right-0 top-full z-30 mt-1 min-w-40 rounded-md border bg-background py-1 text-body shadow-pop",
 			children: options.map((option, index) => /* @__PURE__ */ jsx("li", {
 				role: "none",
 				children: /* @__PURE__ */ jsxs("button", {

package/dist/primitives/responsive-dialog.js

@@ -23,7 +23,7 @@ const ResponsiveDialog = ({ title, description, open, onClose, actions, children
 		open: true,
 		onClose,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "pt-3 text-[13px]",
+			className: "pt-3",
 			children: [
 				description && /* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",

package/dist/primitives/segmented.js

@@ -8,7 +8,7 @@ const sizes = {
 	},
 	md: {
 		group: "h-8",
-		option: "px-3 text-[13px]"
+		option: "px-3 text-body"
 	}
 };
 const Segmented = ({ value, options, onChange, label, size = "sm", iconOnly = false }) => /* @__PURE__ */ jsx("span", {

package/dist/primitives/sheet-swipe.js

@@ -0,0 +1,5 @@
+//#region src/primitives/sheet-swipe.ts
+/** Whether a drag closes a sheet: mostly downwards, by 60 pixels or more. */
+const closesSheet = (dx, dy) => dy >= 60 && dy > Math.abs(dx);
+//#endregion
+export { closesSheet };

package/dist/primitives/sheet.js

@@ -1,13 +1,31 @@
 import { useFocusTrap } from "../lib/use-focus-trap.js";
+import { closesSheet } from "./sheet-swipe.js";
 import { useRef } from "react";
 import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/sheet.tsx
-/** A panel that rises from the bottom of the screen, for the filter panel on phones. */
+/**
+* A panel that rises from the bottom of the screen, for the filter panel on mobile screens. It closes on Escape, the
+* close button, a press above it and a swipe down on its header. Its content scrolls inside it when taller than the
+* panel, which stops short of the top so the screen behind stays in sight.
+*/
 const Sheet = ({ title, open, onClose, children }) => {
 	const panel = useRef(null);
+	const start = useRef(void 0);
 	useFocusTrap(panel, open, onClose);
 	if (!open) return null;
+	const down = (event) => {
+		if (event.pointerType === "touch") start.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	};
+	const up = (event) => {
+		if (!start.current) return;
+		const closes = closesSheet(event.clientX - start.current.x, event.clientY - start.current.y);
+		start.current = void 0;
+		if (closes) onClose();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "fixed inset-0 z-[80]",
 		children: [/* @__PURE__ */ jsx("div", {
@@ -22,17 +40,27 @@ const Sheet = ({ title, open, onClose, children }) => {
 			tabIndex: -1,
 			className: "absolute inset-x-0 bottom-0 flex max-h-[85vh] flex-col rounded-t-xl border-t bg-background shadow-pop outline-none",
 			children: [/* @__PURE__ */ jsxs("header", {
-				className: "flex shrink-0 items-center justify-between border-b px-4",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-[15px] font-semibold",
-					children: title
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": "Close",
-					onClick: onClose,
-					className: "-mr-2 inline-flex size-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted",
-					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-				})]
+				className: "relative flex shrink-0 touch-none items-center justify-between border-b px-4",
+				onPointerDown: down,
+				onPointerUp: up,
+				onPointerCancel: () => start.current = void 0,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "absolute left-1/2 top-1.5 h-1 w-9 -translate-x-1/2 rounded-full bg-border-strong",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-[16px] font-semibold",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Close",
+						onClick: onClose,
+						className: "-mr-2 inline-flex size-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted",
+						children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+					})
+				]
 			}), /* @__PURE__ */ jsx("div", {
 				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-6",
 				children

package/dist/primitives/textarea.js

@@ -28,7 +28,7 @@ const Textarea = ({ invalid, className, rows = 3, value, ...rest }) => {
 		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),
+		className: cn("block w-full resize-none overflow-hidden rounded-md border bg-background px-2.5 py-1.5 text-body 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
 	});
 };

package/dist/record-view/action-rail.js

@@ -15,7 +15,7 @@ const ActionRail = ({ actions }) => /* @__PURE__ */ jsxs("div", {
 				className: cn("size-4 shrink-0 md:mt-0.5", tone === "danger" ? "text-danger-text" : "text-muted-foreground"),
 				"aria-hidden": true
 			}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
-				className: cn("block text-[13px] font-medium", tone === "danger" ? "text-danger-text" : "text-foreground"),
+				className: cn("block font-medium", tone === "danger" ? "text-danger-text" : "text-foreground"),
 				children: name
 			}), description && /* @__PURE__ */ jsx("span", {
 				className: "mt-0.5 hidden text-xs leading-snug text-muted-foreground md:block",

package/dist/record-view/field.js

@@ -9,7 +9,7 @@ const Field = ({ label, required, help, example, error, conflict, wide, children
 		/* @__PURE__ */ jsxs("div", {
 			className: "mb-1.5 flex items-center gap-2",
 			children: [/* @__PURE__ */ jsxs("label", {
-				className: "text-[13px] font-medium text-foreground",
+				className: "font-medium text-foreground",
 				children: [label, required && /* @__PURE__ */ jsx("span", {
 					className: "ml-0.5 text-danger-text",
 					"aria-label": "required",

package/dist/record-view/key-facts.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/record-view/key-facts.tsx
+/**
+* A record's key facts side by side, as the bedrooms, area and energy label of a listing on a real estate site: each
+* value under its icon, or under its label without one, wrapping onto more rows as needed, two to a row on a mobile
+* screen.
+*/
+const KeyFacts = ({ facts }) => /* @__PURE__ */ jsx("dl", {
+	className: "grid grid-cols-2 gap-x-4 gap-y-5 sm:flex sm:flex-wrap sm:gap-x-10",
+	children: facts.map(({ label, value, icon: Icon }) => /* @__PURE__ */ jsxs("div", {
+		title: label,
+		className: "flex min-w-0 flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "text-muted-foreground",
+			children: Icon ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+				className: "size-5",
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: label
+			})] }) : label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "min-w-0 break-words text-[16px] font-semibold text-foreground",
+			children: value
+		})]
+	}, label))
+});
+//#endregion
+export { KeyFacts };

package/dist/record-view/record-sidebar.js

@@ -2,7 +2,7 @@ import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/record-sidebar.tsx
 const MetadataList = ({ rows }) => /* @__PURE__ */ jsx("dl", {
-	className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-[13px]",
+	className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2",
 	children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
 		className: "contents",
 		children: [/* @__PURE__ */ jsx("dt", {
@@ -31,7 +31,7 @@ const RelatedRecords = ({ records, onNavigate }) => /* @__PURE__ */ jsx("ul", {
 					children: record.kind
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "block truncate text-[13px] font-medium text-primary-text",
+					className: "block truncate font-medium text-primary-text",
 					children: record.label
 				}),
 				record.meta && /* @__PURE__ */ jsx("span", {

package/dist/record-view/section.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** A titled part of the record page; `actions` sit at the end of the title's line. */
 const Section = ({ title, help, actions, children }) => {
 	const heading = /* @__PURE__ */ jsx("h2", {
-		className: "text-[15px] font-semibold text-foreground",
+		className: "text-[16px] font-semibold text-foreground",
 		children: title
 	});
 	return /* @__PURE__ */ jsxs("section", {
@@ -14,7 +14,7 @@ const Section = ({ title, help, actions, children }) => {
 				children: [heading, actions]
 			}) : heading,
 			help && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 max-w-xl text-[13px] leading-relaxed text-muted-foreground",
+				className: "mt-1 max-w-xl leading-6 text-muted-foreground",
 				children: help
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/record-view/spec-table.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * site: what a record page's section shows on its read view. A wide row puts its value under the label.
 */
 const SpecTable = ({ rows }) => /* @__PURE__ */ jsx("dl", {
-	className: "border-t border-border text-[13px]",
+	className: "border-t border-border",
 	children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
 		className: cn("grid gap-x-4 border-b border-border py-2.5", row.wide ? "grid-cols-1 gap-y-1.5" : "grid-cols-[minmax(0,2fr)_minmax(0,3fr)]"),
 		children: [/* @__PURE__ */ jsxs("dt", {