@protobase/ui 0.14.2 → 0.14.4

package/dist/auth/auth-gate.js

@@ -69,6 +69,15 @@ const AuthGate = ({ workspace, children }) => {
 	useEffect(() => {
 		if (state.kind === "signed-out" && page.kind === "sign-in" && page.providerError) forgetSignInLink();
 	}, [state.kind, page]);
+	useEffect(() => {
+		if (state.kind !== "signed-out" || !browse) return;
+		const leave = () => {
+			setPage({ kind: "sign-in" });
+			browse();
+		};
+		window.addEventListener("popstate", leave);
+		return () => window.removeEventListener("popstate", leave);
+	}, [state.kind, browse]);
 	const signInFailed = useCallback((error) => setPage({
 		kind: "sign-in",
 		error

package/dist/auth/provider-icon.js

@@ -0,0 +1,15 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/provider-icon.tsx
+/** The GitHub mark, from GitHub's Octicons, in the text color so it follows the theme. */
+const GitHubMark = ({ className }) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	className: cn("size-4 shrink-0", className),
+	"aria-hidden": true,
+	children: /* @__PURE__ */ jsx("path", { d: "M10.226 17.284c-2.965-.36-5.054-2.493-5.054-5.256 0-1.123.404-2.336 1.078-3.144-.292-.741-.247-2.314.09-2.965.898-.112 2.111.36 2.83 1.01.853-.269 1.752-.404 2.853-.404 1.1 0 1.999.135 2.807.382.696-.629 1.932-1.1 2.83-.988.315.606.36 2.179.067 2.942.72.854 1.101 2 1.101 3.167 0 2.763-2.089 4.852-5.098 5.234.763.494 1.28 1.572 1.28 2.807v2.336c0 .674.561 1.056 1.235.786 4.066-1.55 7.255-5.615 7.255-10.646C23.5 6.188 18.334 1 11.978 1 5.62 1 .5 6.188.5 12.545c0 4.986 3.167 9.12 7.435 10.669.606.225 1.19-.18 1.19-.786V20.63a2.9 2.9 0 0 1-1.078.224c-1.483 0-2.359-.808-2.987-2.313-.247-.607-.517-.966-1.034-1.033-.27-.023-.359-.135-.359-.27 0-.27.45-.471.898-.471.652 0 1.213.404 1.797 1.235.45.651.921.943 1.483.943.561 0 .92-.202 1.437-.719.382-.381.674-.718.944-.943" })
+});
+/** The mark of a sign-in provider, by its id; nothing for a provider without one. */
+const ProviderIcon = ({ id, className }) => id === "github" ? /* @__PURE__ */ jsx(GitHubMark, { className }) : null;
+//#endregion
+export { ProviderIcon };

package/dist/auth/sign-in-form.js

@@ -1,6 +1,7 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
+import { ProviderIcon } from "./provider-icon.js";
 import { useRef, useState } from "react";
 import { KeyRound, Mail } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -41,7 +42,11 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 						onClick: () => onContinueWith?.(provider.id),
 						disabled: busy,
 						className: "min-h-10 w-full",
-						children: ["Continue with ", provider.name]
+						children: [
+							/* @__PURE__ */ jsx(ProviderIcon, { id: provider.id }),
+							"Continue with ",
+							provider.name
+						]
 					}, provider.id)),
 					withPasskey && /* @__PURE__ */ jsxs(Button, {
 						onClick: () => onPasskey?.(),

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.14.2";
+var version = "0.14.4";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

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

@@ -11,7 +11,8 @@ export type ResponsiveDialogProps = {
 };
 /**
  * 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.
+ * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open; the sheet also
+ * closes when swiped down.
  */
 export declare const ResponsiveDialog: ({ title, description, open, onClose, actions, children }: ResponsiveDialogProps) => import("react").JSX.Element | null;
 //#endregion

package/dist/primitives/responsive-dialog.js

@@ -5,21 +5,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/responsive-dialog.tsx
 /**
 * 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.
+* the viewport does. Both close on Escape and on a press outside, and keep focus inside while open; the sheet also
+* closes when swiped down.
 */
 const ResponsiveDialog = ({ title, description, open, onClose, actions, children }) => {
-	const desktop = useIsDesktop();
-	if (!open) return null;
-	if (desktop) return /* @__PURE__ */ jsx(Dialog, {
-		title,
-		description,
-		onClose,
-		actions,
-		children
-	});
+	if (useIsDesktop()) {
+		if (!open) return null;
+		return /* @__PURE__ */ jsx(Dialog, {
+			title,
+			description,
+			onClose,
+			actions,
+			children
+		});
+	}
 	return /* @__PURE__ */ jsx(Sheet, {
 		title,
-		open: true,
+		open,
 		onClose,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "pt-3 text-[13px]",

package/dist/primitives/sheet.js

@@ -1,44 +1,44 @@
-import { useFocusTrap } from "../lib/use-focus-trap.js";
-import { useRef } from "react";
 import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
 //#region src/primitives/sheet.tsx
-/** A panel that rises from the bottom of the screen, for the filter panel on phones. */
-const Sheet = ({ title, open, onClose, children }) => {
-	const panel = useRef(null);
-	useFocusTrap(panel, open, onClose);
-	if (!open) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "fixed inset-0 z-[80]",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "absolute inset-0 bg-foreground/40",
-			onClick: onClose,
-			"aria-hidden": true
-		}), /* @__PURE__ */ jsxs("div", {
-			ref: panel,
-			role: "dialog",
-			"aria-modal": "true",
-			"aria-label": title,
-			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" })
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-6",
-				children
-			})]
-		})]
-	});
-};
+const motion = "transition-[transform,opacity] duration-[400ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] motion-reduce:duration-0";
+/**
+* A panel that rises from the bottom of the screen, for the filter panel and `ResponsiveDialog` on phones. It closes
+* when swiped down, on its close button, on a press outside and on Escape, and keeps focus inside while open (Base UI's
+* `Drawer`).
+*/
+const Sheet = ({ title, open, onClose, children }) => /* @__PURE__ */ jsx(Drawer.Root, {
+	open,
+	onOpenChange: (next) => !next && onClose(),
+	children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: `fixed inset-0 z-[80] bg-foreground/40 opacity-[calc(1-var(--drawer-swipe-progress))] data-starting-style:opacity-0 data-ending-style:opacity-0 ${motion}` }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+		className: "fixed inset-0 z-[80] flex items-end",
+		children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+			className: `flex max-h-[85vh] w-full flex-col rounded-t-xl border-t bg-background shadow-pop outline-none [transform:translateY(var(--drawer-swipe-movement-y))] data-starting-style:[transform:translateY(100%)] data-ending-style:[transform:translateY(100%)] data-swiping:select-none ${motion}`,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 justify-center pt-2",
+					"aria-hidden": true,
+					children: /* @__PURE__ */ jsx("div", { className: "h-1 w-10 rounded-full bg-border-strong" })
+				}),
+				/* @__PURE__ */ jsxs("header", {
+					className: "flex shrink-0 items-center justify-between border-b px-4",
+					children: [/* @__PURE__ */ jsx(Drawer.Title, {
+						className: "text-[15px] font-semibold",
+						children: title
+					}), /* @__PURE__ */ jsx(Drawer.Close, {
+						"aria-label": "Close",
+						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(Drawer.Content, {
+					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-6",
+					children
+				})
+			]
+		})
+	})] })
+});
 //#endregion
 export { Sheet };