@protobase/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+//#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]",
+	children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+		className: "contents",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "text-muted-foreground",
+			children: row.label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "text-right tabular-nums text-foreground",
+			children: row.value
+		})]
+	}, row.label))
+});
+const RelatedRecords = ({ records, onNavigate }) => /* @__PURE__ */ jsx("ul", {
+	className: "-mx-2",
+	children: records.map((record) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+		href: record.href ?? "#",
+		onClick: (event) => {
+			event.preventDefault();
+			if (record.href) onNavigate?.(record.href);
+		},
+		className: "group flex items-center justify-between gap-3 rounded-md px-2 py-2 hover:bg-muted",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "min-w-0",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "block text-[11px] uppercase tracking-wide text-faint-foreground",
+					children: record.kind
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "block truncate text-[13px] font-medium text-primary-text",
+					children: record.label
+				}),
+				record.meta && /* @__PURE__ */ jsx("span", {
+					className: "block text-xs text-muted-foreground",
+					children: record.meta
+				})
+			]
+		}), /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-faint-foreground group-hover:text-foreground" })]
+	}) }, record.label))
+});
+const SidebarCard = ({ title, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "rounded-lg border border-border bg-background p-4",
+	children: [/* @__PURE__ */ jsx("h3", {
+		className: "mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+		children: title
+	}), children]
+});
+/** A sidebar card of label/value rows; with no rows to show there is no card, rather than a lone title. */
+const MetadataCard = ({ title, rows }) => rows.length === 0 ? null : /* @__PURE__ */ jsx(SidebarCard, {
+	title,
+	children: /* @__PURE__ */ jsx(MetadataList, { rows })
+});
+//#endregion
+export { MetadataCard, MetadataList, RelatedRecords, SidebarCard };

package/dist/record-view/section.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/record-view/section.tsx
+const Section = ({ title, help, children }) => /* @__PURE__ */ jsxs("section", {
+	className: "py-8 first:pt-8",
+	children: [
+		/* @__PURE__ */ jsx("h2", {
+			className: "text-[15px] font-semibold text-foreground",
+			children: title
+		}),
+		help && /* @__PURE__ */ jsx("p", {
+			className: "mt-1 max-w-xl text-[13px] leading-relaxed text-muted-foreground",
+			children: help
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "mt-5",
+			children
+		})
+	]
+});
+//#endregion
+export { Section };

package/dist/styles.css

@@ -0,0 +1,132 @@
+@import "tailwindcss";
+@source "./";
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+:root {
+  --background: #ffffff;
+  --surface: #fafafa;
+  --muted: #f4f4f5;
+  --border: #e4e4e7;
+  --border-strong: #d4d4d8;
+  --foreground: #18181b;
+  --muted-foreground: #71717a;
+  --faint-foreground: #a1a1aa;
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --primary-foreground: #ffffff;
+  --primary-soft: #eff6ff;
+  --primary-border: #bfdbfe;
+  --primary-text: #1d4ed8;
+  --success: #16a34a;
+  --success-soft: #f0fdf4;
+  --success-text: #15803d;
+  --warning: #d97706;
+  --warning-soft: #fffbeb;
+  --warning-text: #b45309;
+  --danger: #dc2626;
+  --danger-soft: #fef2f2;
+  --danger-text: #b91c1c;
+  --violet: #7c3aed;
+  --violet-soft: #f5f3ff;
+  --violet-text: #6d28d9;
+  --sidebar: #f8f8f9;
+  --shadow-pop: 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.06);
+}
+
+[data-theme="dark"] {
+  --background: #0f0f11;
+  --surface: #151518;
+  --muted: #1f1f23;
+  --border: #27272b;
+  --border-strong: #3a3a40;
+  --foreground: #f4f4f5;
+  --muted-foreground: #a1a1aa;
+  --faint-foreground: #71717a;
+  --primary: #3b82f6;
+  --primary-hover: #60a5fa;
+  --primary-foreground: #ffffff;
+  --primary-soft: #172036;
+  --primary-border: #1e3a6e;
+  --primary-text: #93c5fd;
+  --success: #22c55e;
+  --success-soft: #0f2418;
+  --success-text: #86efac;
+  --warning: #f59e0b;
+  --warning-soft: #2a1f0a;
+  --warning-text: #fcd34d;
+  --danger: #ef4444;
+  --danger-soft: #2a1214;
+  --danger-text: #fca5a5;
+  --violet: #8b5cf6;
+  --violet-soft: #20173a;
+  --violet-text: #c4b5fd;
+  --sidebar: #121215;
+  --shadow-pop: 0 8px 24px -4px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.4);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-surface: var(--surface);
+  --color-muted: var(--muted);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-faint-foreground: var(--faint-foreground);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-soft: var(--primary-soft);
+  --color-primary-border: var(--primary-border);
+  --color-primary-text: var(--primary-text);
+  --color-success: var(--success);
+  --color-success-soft: var(--success-soft);
+  --color-success-text: var(--success-text);
+  --color-warning: var(--warning);
+  --color-warning-soft: var(--warning-soft);
+  --color-warning-text: var(--warning-text);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-danger-text: var(--danger-text);
+  --color-violet: var(--violet);
+  --color-violet-soft: var(--violet-soft);
+  --color-violet-text: var(--violet-text);
+  --color-sidebar: var(--sidebar);
+  --shadow-pop: var(--shadow-pop);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+}
+
+@layer base {
+  html {
+    font-size: 16px;
+  }
+  body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    font-size: 13px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  button {
+    cursor: pointer;
+  }
+  * {
+    border-color: var(--border);
+  }
+}
+
+@keyframes pb-shimmer {
+  0% { opacity: 1; }
+  50% { opacity: 0.45; }
+  100% { opacity: 1; }
+}
+
+@keyframes pb-slide-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}

package/dist/toasts/toast-provider.js

@@ -0,0 +1,69 @@
+import { Toast } from "./toast.js";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/toasts/toast-provider.tsx
+const dismissAfterMs = {
+	loading: Infinity,
+	success: 3500,
+	error: 8e3
+};
+const undoWindowMs = 8e3;
+const ToastContext = createContext(null);
+const useToast = () => {
+	const api = useContext(ToastContext);
+	if (!api) throw new Error("useToast must be used inside ToastProvider");
+	return api;
+};
+const ToastProvider = ({ children }) => {
+	const [items, setItems] = useState([]);
+	const nextId = useRef(1);
+	const timers = useRef(/* @__PURE__ */ new Map());
+	const dismiss = useCallback((id) => {
+		clearTimeout(timers.current.get(id));
+		timers.current.delete(id);
+		setItems((current) => current.filter((item) => item.id !== id));
+	}, []);
+	const schedule = useCallback((id, state, actionable = false) => {
+		clearTimeout(timers.current.get(id));
+		const delay = actionable ? undoWindowMs : dismissAfterMs[state];
+		if (delay === Infinity) return;
+		timers.current.set(id, setTimeout(() => dismiss(id), delay));
+	}, [dismiss]);
+	const api = useMemo(() => ({
+		show: (toast) => {
+			const id = nextId.current++;
+			setItems((current) => [...current, {
+				...toast,
+				id
+			}]);
+			schedule(id, toast.state, Boolean(toast.action));
+			return id;
+		},
+		update: (id, patch) => {
+			setItems((current) => current.map((item) => item.id === id ? {
+				...item,
+				...patch
+			} : item));
+			if (patch.state) schedule(id, patch.state, Boolean(patch.action));
+		},
+		dismiss
+	}), [dismiss, schedule]);
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value: api,
+		children: [children, /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none fixed inset-x-4 bottom-24 z-[100] flex flex-col items-end gap-2 md:inset-x-auto md:bottom-4 md:right-4",
+			children: items.map((item) => /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-auto",
+				children: /* @__PURE__ */ jsx(Toast, {
+					state: item.state,
+					title: item.title,
+					description: item.description,
+					action: item.action,
+					onDismiss: () => dismiss(item.id)
+				})
+			}, item.id))
+		})]
+	});
+};
+//#endregion
+export { ToastProvider, useToast };

package/dist/toasts/toast.js

@@ -0,0 +1,45 @@
+import { cn } from "../lib/cn.js";
+import { Spinner } from "../primitives/spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle2, X, XCircle } from "lucide-react";
+//#region src/toasts/toast.tsx
+const icons = {
+	loading: /* @__PURE__ */ jsx(Spinner, { className: "text-primary" }),
+	success: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-success" }),
+	error: /* @__PURE__ */ jsx(XCircle, { className: "size-4 text-danger" })
+};
+const Toast = ({ state, title, description, action, onDismiss }) => /* @__PURE__ */ jsxs("div", {
+	role: state === "error" ? "alert" : "status",
+	className: cn("flex w-full max-w-80 items-start gap-3 rounded-lg border bg-background p-3 shadow-pop [animation:pb-slide-in_160ms_ease-out]", state === "error" && "border-danger/40"),
+	children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "mt-0.5",
+			children: icons[state]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-[13px] font-medium text-foreground",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "mt-0.5 text-xs text-muted-foreground",
+				children: description
+			})]
+		}),
+		action && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: action.onClick,
+			className: "rounded px-1.5 py-0.5 text-[13px] font-medium text-primary-text hover:bg-primary-soft",
+			children: action.label
+		}),
+		onDismiss && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Dismiss",
+			onClick: onDismiss,
+			className: "inline-flex items-center justify-center rounded p-0.5 text-faint-foreground hover:bg-muted hover:text-foreground pointer-coarse:size-9",
+			children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+		})
+	]
+});
+//#endregion
+export { Toast };

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@protobase/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "The Protobase admin app and the React hooks and components for custom UI.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PrototeamHQ/protobase.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://docs.protobase.net",
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "./dist/app/main.js"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@tanstack/react-query": "^5.104.1",
+    "@tanstack/react-table": "^9.2.6",
+    "@tanstack/react-virtual": "^3.14.13",
+    "lucide-react": "^1.52.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "recharts": "^3.10.1",
+    "tailwindcss": "^4.3.3",
+    "@protobase/client": "0.1.0",
+    "@protobase/schema": "0.1.0",
+    "@protobase/layout": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsdown"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.