@opensaas/stack-ui 0.1.7 → 0.3.0

package/.turbo/turbo-build.log

@@ -1,10 +1,11 @@
 
-> @opensaas/stack-ui@0.1.7 build /home/runner/work/stack/stack/packages/ui
+> @opensaas/stack-ui@0.3.0 build /home/runner/work/stack/stack/packages/ui
 > tsc && npm run build:css
 
 npm warn Unknown env config "verify-deps-before-run". This will stop working in the next major version of npm.
+npm warn Unknown env config "npm-globalconfig". This will stop working in the next major version of npm.
 npm warn Unknown env config "_jsr-registry". This will stop working in the next major version of npm.
 
-> @opensaas/stack-ui@0.1.7 build:css
+> @opensaas/stack-ui@0.3.0 build:css
 > mkdir -p dist/styles && postcss ./src/styles/globals.css -o ./dist/styles/globals.css
 

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @opensaas/stack-ui
 
+## 0.3.0
+
+## 0.2.0
+
 ## 0.1.7
 
 ### Patch Changes

package/dist/components/AdminUI.d.ts

@@ -9,6 +9,7 @@ export interface AdminUIProps<TPrisma> {
     };
     basePath?: string;
     serverAction: (input: ServerActionInput) => Promise<unknown>;
+    onSignOut?: () => Promise<void>;
 }
 /**
  * Main AdminUI component - complete admin interface with routing
@@ -20,5 +21,5 @@ export interface AdminUIProps<TPrisma> {
  * - [list, 'create'] → ItemForm (create)
  * - [list, id] → ItemForm (edit)
  */
-export declare function AdminUI<TPrisma>({ context, config, params, searchParams, basePath, serverAction, }: AdminUIProps<TPrisma>): import("react/jsx-runtime").JSX.Element;
+export declare function AdminUI<TPrisma>({ context, config, params, searchParams, basePath, serverAction, onSignOut, }: AdminUIProps<TPrisma>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AdminUI.d.ts.map

package/dist/components/AdminUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminUI.d.ts","sourceRoot":"","sources":["../../src/components/AdminUI.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAqB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGvF,MAAM,WAAW,YAAY,CAAC,OAAO;IACnC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAA;KAAE,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;CAC7D;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,EAC/B,OAAO,EACP,MAAM,EACN,MAAW,EACX,YAAiB,EACjB,QAAmB,EACnB,YAAY,GACb,EAAE,YAAY,CAAC,OAAO,CAAC,2CA2EvB"}
+{"version":3,"file":"AdminUI.d.ts","sourceRoot":"","sources":["../../src/components/AdminUI.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAqB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGvF,MAAM,WAAW,YAAY,CAAC,OAAO;IACnC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAA;KAAE,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5D,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAChC;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,EAC/B,OAAO,EACP,MAAM,EACN,MAAW,EACX,YAAiB,EACjB,QAAmB,EACnB,YAAY,EACZ,SAAS,GACV,EAAE,YAAY,CAAC,OAAO,CAAC,2CA4EvB"}

package/dist/components/AdminUI.js

@@ -15,7 +15,7 @@ import { generateThemeCSS } from '../lib/theme.js';
  * - [list, 'create'] → ItemForm (create)
  * - [list, id] → ItemForm (edit)
  */
-export function AdminUI({ context, config, params = [], searchParams = {}, basePath = '/admin', serverAction, }) {
+export function AdminUI({ context, config, params = [], searchParams = {}, basePath = '/admin', serverAction, onSignOut, }) {
     // Parse route from params
     const [urlSegment, action] = params;
     // Convert URL segment (kebab-case) to PascalCase listKey
@@ -44,5 +44,5 @@ export function AdminUI({ context, config, params = [], searchParams = {}, baseP
     }
     // Generate theme styles if custom theme is configured
     const themeStyles = config.ui?.theme ? generateThemeCSS(config.ui.theme) : null;
-    return (_jsxs(_Fragment, { children: [themeStyles && _jsx("style", { dangerouslySetInnerHTML: { __html: themeStyles } }), _jsxs("div", { className: "flex min-h-screen bg-background", children: [_jsx(Navigation, { context: context, config: config, basePath: basePath, currentPath: currentPath }), _jsx("main", { className: "flex-1 overflow-y-auto", children: content })] })] }));
+    return (_jsxs(_Fragment, { children: [themeStyles && _jsx("style", { dangerouslySetInnerHTML: { __html: themeStyles } }), _jsxs("div", { className: "flex min-h-screen bg-background", children: [_jsx(Navigation, { context: context, config: config, basePath: basePath, currentPath: currentPath, onSignOut: onSignOut }), _jsx("main", { className: "flex-1 overflow-y-auto", children: content })] })] }));
 }

package/dist/components/ItemFormClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemFormClient.d.ts","sourceRoot":"","sources":["../../src/components/ItemFormClient.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAA;AAE7E,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAA;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACrC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAA;CACxE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,MAAM,EACN,IAAI,EACJ,MAAM,EACN,WAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,gBAAqB,GACtB,EAAE,mBAAmB,2CAwMrB"}
+{"version":3,"file":"ItemFormClient.d.ts","sourceRoot":"","sources":["../../src/components/ItemFormClient.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAA;AAE7E,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAA;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACrC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAA;CACxE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,MAAM,EACN,IAAI,EACJ,MAAM,EACN,WAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,gBAAqB,GACtB,EAAE,mBAAmB,2CA8NrB"}

package/dist/components/ItemFormClient.js

@@ -33,67 +33,78 @@ export function ItemFormClient({ listKey, urlKey, mode, fields, initialData = {}
         setErrors({});
         setGeneralError(null);
         startTransition(async () => {
-            try {
-                // Transform relationship fields to Prisma format
-                // Filter out password fields with isSet objects (unchanged passwords)
-                // File/Image fields: pass File objects through (Next.js will serialize them)
-                const transformedData = {};
-                for (const [fieldName, value] of Object.entries(formData)) {
-                    const fieldConfig = fields[fieldName];
-                    // Skip password fields that have { isSet: boolean } value (not being changed)
-                    if (typeof value === 'object' && value !== null && 'isSet' in value) {
-                        continue;
-                    }
-                    // Transform relationship fields - check discriminated union type
-                    const fieldAny = fieldConfig;
-                    if (fieldAny?.type === 'relationship') {
-                        if (fieldAny.many) {
-                            // Many relationship: use connect format
-                            if (Array.isArray(value) && value.length > 0) {
-                                transformedData[fieldName] = {
-                                    connect: value.map((id) => ({ id })),
-                                };
-                            }
-                        }
-                        else {
-                            // Single relationship: use connect format
-                            if (value) {
-                                transformedData[fieldName] = {
-                                    connect: { id: value },
-                                };
-                            }
+            // Transform relationship fields to Prisma format
+            // Filter out password fields with isSet objects (unchanged passwords)
+            // File/Image fields: pass File objects through (Next.js will serialize them)
+            const transformedData = {};
+            for (const [fieldName, value] of Object.entries(formData)) {
+                const fieldConfig = fields[fieldName];
+                // Skip password fields that have { isSet: boolean } value (not being changed)
+                if (typeof value === 'object' && value !== null && 'isSet' in value) {
+                    continue;
+                }
+                // Transform relationship fields - check discriminated union type
+                const fieldAny = fieldConfig;
+                if (fieldAny?.type === 'relationship') {
+                    if (fieldAny.many) {
+                        // Many relationship: use connect format
+                        if (Array.isArray(value) && value.length > 0) {
+                            transformedData[fieldName] = {
+                                connect: value.map((id) => ({ id })),
+                            };
                         }
                     }
                     else {
-                        // Non-relationship field: pass through (including File objects for file/image fields)
-                        // File objects will be serialized by Next.js server action
-                        transformedData[fieldName] = value;
+                        // Single relationship: use connect format
+                        if (value) {
+                            transformedData[fieldName] = {
+                                connect: { id: value },
+                            };
+                        }
                     }
                 }
-                const result = mode === 'create'
-                    ? await serverAction({
-                        listKey,
-                        action: 'create',
-                        data: transformedData,
-                    })
-                    : await serverAction({
-                        listKey,
-                        action: 'update',
-                        id: itemId,
-                        data: transformedData,
-                    });
-                if (result) {
+                else {
+                    // Non-relationship field: pass through (including File objects for file/image fields)
+                    // File objects will be serialized by Next.js server action
+                    transformedData[fieldName] = value;
+                }
+            }
+            const result = mode === 'create'
+                ? await serverAction({
+                    listKey,
+                    action: 'create',
+                    data: transformedData,
+                })
+                : await serverAction({
+                    listKey,
+                    action: 'update',
+                    id: itemId,
+                    data: transformedData,
+                });
+            // Check if result has the new format with success/error fields
+            if (result && typeof result === 'object' && 'success' in result) {
+                const actionResult = result;
+                if (actionResult.success) {
                     // Navigate back to list view
                     router.push(`${basePath}/${urlKey}`);
                     router.refresh();
                 }
                 else {
-                    setGeneralError('Access denied or operation failed');
+                    // Handle error response
+                    if (actionResult.fieldErrors) {
+                        setErrors(actionResult.fieldErrors);
+                    }
+                    setGeneralError(actionResult.error);
                 }
             }
-            catch (error) {
-                const errorMessage = error instanceof Error ? error.message : 'Failed to save item';
-                setGeneralError(errorMessage);
+            else if (result) {
+                // Legacy format: result is the data itself
+                router.push(`${basePath}/${urlKey}`);
+                router.refresh();
+            }
+            else {
+                // null result means access denied
+                setGeneralError('Access denied or operation failed');
             }
         });
     };
@@ -103,23 +114,30 @@ export function ItemFormClient({ listKey, urlKey, mode, fields, initialData = {}
         setGeneralError(null);
         setShowDeleteConfirm(false);
         startTransition(async () => {
-            try {
-                const result = await serverAction({
-                    listKey,
-                    action: 'delete',
-                    id: itemId,
-                });
-                if (result) {
+            const result = await serverAction({
+                listKey,
+                action: 'delete',
+                id: itemId,
+            });
+            // Check if result has the new format with success/error fields
+            if (result && typeof result === 'object' && 'success' in result) {
+                const actionResult = result;
+                if (actionResult.success) {
                     router.push(`${basePath}/${urlKey}`);
                     router.refresh();
                 }
                 else {
-                    setGeneralError('Access denied or failed to delete item');
+                    setGeneralError(actionResult.error);
                 }
             }
-            catch (error) {
-                const errorMessage = error instanceof Error ? error.message : 'Failed to delete item';
-                setGeneralError(errorMessage);
+            else if (result) {
+                // Legacy format: result is the data itself
+                router.push(`${basePath}/${urlKey}`);
+                router.refresh();
+            }
+            else {
+                // null result means access denied
+                setGeneralError('Access denied or failed to delete item');
             }
         });
     };

package/dist/components/Navigation.d.ts

@@ -4,10 +4,11 @@ export interface NavigationProps<TPrisma> {
     config: OpenSaasConfig;
     basePath?: string;
     currentPath?: string;
+    onSignOut?: () => Promise<void>;
 }
 /**
  * Navigation sidebar showing all lists
  * Server Component
  */
-export declare function Navigation<TPrisma>({ context, config, basePath, currentPath, }: NavigationProps<TPrisma>): import("react/jsx-runtime").JSX.Element;
+export declare function Navigation<TPrisma>({ context, config, basePath, currentPath, onSignOut, }: NavigationProps<TPrisma>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Navigation.d.ts.map

package/dist/components/Navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../src/components/Navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAa,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE/E,MAAM,WAAW,eAAe,CAAC,OAAO;IACtC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,EAClC,OAAO,EACP,MAAM,EACN,QAAmB,EACnB,WAAgB,GACjB,EAAE,eAAe,CAAC,OAAO,CAAC,2CAgG1B"}
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../src/components/Navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAa,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG/E,MAAM,WAAW,eAAe,CAAC,OAAO;IACtC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAChC;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,EAClC,OAAO,EACP,MAAM,EACN,QAAmB,EACnB,WAAgB,EAChB,SAAS,GACV,EAAE,eAAe,CAAC,OAAO,CAAC,2CAkF1B"}

package/dist/components/Navigation.js

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import Link from 'next/link.js';
 import { formatListName } from '../lib/utils.js';
 import { getUrlKey } from '@opensaas/stack-core';
+import { UserMenu } from './UserMenu.js';
 /**
  * Navigation sidebar showing all lists
  * Server Component
  */
-export function Navigation({ context, config, basePath = '/admin', currentPath = '', }) {
+export function Navigation({ context, config, basePath = '/admin', currentPath = '', onSignOut, }) {
     const lists = Object.keys(config.lists || {});
     return (_jsxs("nav", { className: "w-64 border-r border-border bg-card h-screen sticky top-0 flex flex-col", children: [_jsxs("div", { className: "p-6 border-b border-border relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/10 to-accent/10 opacity-50" }), _jsx(Link, { href: basePath, className: "block relative", children: _jsx("h1", { className: "text-xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent", children: "OpenSaas Admin" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: _jsxs("div", { className: "space-y-1", children: [_jsxs(Link, { href: basePath, className: `block px-3 py-2.5 rounded-lg text-sm font-medium transition-all relative overflow-hidden group ${currentPath === ''
                                 ? 'bg-gradient-to-r from-primary to-accent text-primary-foreground shadow-lg shadow-primary/25'
@@ -16,5 +17,5 @@ export function Navigation({ context, config, basePath = '/admin', currentPath =
                                     return (_jsxs(Link, { href: `${basePath}/${urlKey}`, className: `block px-3 py-2.5 rounded-lg text-sm font-medium transition-all relative overflow-hidden group ${isActive
                                             ? 'bg-gradient-to-r from-primary to-accent text-primary-foreground shadow-lg shadow-primary/25'
                                             : 'text-foreground hover:bg-accent/50 hover:text-accent-foreground'}`, children: [isActive && (_jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-primary/20 to-accent/20 animate-pulse" })), _jsxs("span", { className: "relative flex items-center gap-2", children: [_jsx("span", { className: "opacity-60 group-hover:opacity-100 transition-opacity", children: "\uD83D\uDCC1" }), formatListName(listKey)] })] }, listKey));
-                                })] }))] }) }), context.session && (_jsx("div", { className: "p-4 border-t border-border bg-gradient-to-br from-primary/5 to-accent/5", children: _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("div", { className: "h-9 w-9 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg shadow-primary/25", children: _jsx("span", { className: "text-sm font-bold text-primary-foreground", children: String(context.session.data?.name)?.[0]?.toUpperCase() || '?' }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate", children: String(context.session.data?.name) || 'User' }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: String(context.session.data?.email) || '' })] })] }) }))] }));
+                                })] }))] }) }), context.session && (_jsx(UserMenu, { userName: String(context.session.data?.name) || 'User', userEmail: String(context.session.data?.email) || '', onSignOut: onSignOut }))] }));
 }

package/dist/components/UserMenu.d.ts

@@ -0,0 +1,11 @@
+export interface UserMenuProps {
+    userName?: string;
+    userEmail?: string;
+    onSignOut?: () => Promise<void>;
+}
+/**
+ * User menu component with sign-out button
+ * Client Component
+ */
+export declare function UserMenu({ userName, userEmail, onSignOut }: UserMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserMenu.d.ts.map

package/dist/components/UserMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAChC;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,aAAa,2CA4BzE"}

package/dist/components/UserMenu.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from 'next/navigation.js';
+import { Button } from '../primitives/button.js';
+/**
+ * User menu component with sign-out button
+ * Client Component
+ */
+export function UserMenu({ userName, userEmail, onSignOut }) {
+    const router = useRouter();
+    const handleSignOut = async () => {
+        if (onSignOut) {
+            await onSignOut();
+        }
+        router.push('/sign-in');
+    };
+    return (_jsxs("div", { className: "p-4 border-t border-border bg-gradient-to-br from-primary/5 to-accent/5", children: [_jsxs("div", { className: "flex items-center space-x-3 mb-3", children: [_jsx("div", { className: "h-9 w-9 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg shadow-primary/25", children: _jsx("span", { className: "text-sm font-bold text-primary-foreground", children: userName?.[0]?.toUpperCase() || '?' }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate", children: userName || 'User' }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: userEmail || '' })] })] }), _jsx(Button, { onClick: handleSignOut, variant: "outline", size: "sm", className: "w-full text-sm", children: "Sign Out" })] }));
+}

package/dist/components/fields/TextField.d.ts

@@ -8,6 +8,7 @@ export interface TextFieldProps {
     disabled?: boolean;
     required?: boolean;
     mode?: 'read' | 'edit';
+    displayMode?: 'input' | 'textarea';
 }
-export declare function TextField({ name, value, onChange, label, placeholder, error, disabled, required, mode, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextField({ name, value, onChange, label, placeholder, error, disabled, required, mode, displayMode, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/components/fields/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/TextField.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,GACd,EAAE,cAAc,2CA8BhB"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/TextField.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;CACnC;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,WAAqB,GACtB,EAAE,cAAc,2CAgChB"}

package/dist/components/fields/TextField.js

@@ -1,11 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from '../../primitives/input.js';
+import { Textarea } from '../../primitives/textarea.js';
 import { Label } from '../../primitives/label.js';
 import { cn } from '../../lib/utils.js';
-export function TextField({ name, value, onChange, label, placeholder, error, disabled, required, mode = 'edit', }) {
+export function TextField({ name, value, onChange, label, placeholder, error, disabled, required, mode = 'edit', displayMode = 'input', }) {
     if (mode === 'read') {
         return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-muted-foreground", children: label }), _jsx("p", { className: "text-sm", children: value || '-' })] }));
     }
-    return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsx(Input, { id: name, name: name, type: "text", value: value || '', onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, required: required, className: cn(error && 'border-destructive') }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+    const InputComponent = displayMode === 'textarea' ? Textarea : Input;
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsx(InputComponent, { id: name, name: name, type: displayMode === 'input' ? 'text' : undefined, value: value || '', onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, required: required, className: cn(error && 'border-destructive') }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
 }

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { AdminUI } from './components/AdminUI.js';
 export { Dashboard } from './components/Dashboard.js';
 export { Navigation } from './components/Navigation.js';
+export { UserMenu } from './components/UserMenu.js';
 export { ListView } from './components/ListView.js';
 export { ListViewClient } from './components/ListViewClient.js';
 export { ItemForm } from './components/ItemForm.js';
@@ -12,6 +13,7 @@ export { TextField, IntegerField, CheckboxField, SelectField, TimestampField, Pa
 export type { AdminUIProps } from './components/AdminUI.js';
 export type { DashboardProps } from './components/Dashboard.js';
 export type { NavigationProps } from './components/Navigation.js';
+export type { UserMenuProps } from './components/UserMenu.js';
 export type { ListViewProps } from './components/ListView.js';
 export type { ListViewClientProps } from './components/ListViewClient.js';
 export type { ItemFormProps } from './components/ItemForm.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAG5F,OAAO,EACL,SAAS,EACT,YAAY,EACZ,aAAa,EACb,WAAW,EACX,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,8BAA8B,CAAA;AAGrC,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AACjE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AACvE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AAEzE,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,GACpB,MAAM,8BAA8B,CAAA;AAGrC,OAAO,EACL,cAAc,EACd,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,MAAM,kCAAkC,CAAA;AAEzC,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,iBAAiB,GAClB,MAAM,kCAAkC,CAAA;AAGzC,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAG1F,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAG5F,OAAO,EACL,SAAS,EACT,YAAY,EACZ,aAAa,EACb,WAAW,EACX,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,8BAA8B,CAAA;AAGrC,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AACjE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AACvE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AAEzE,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,GACpB,MAAM,8BAA8B,CAAA;AAGrC,OAAO,EACL,cAAc,EACd,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,MAAM,kCAAkC,CAAA;AAEzC,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,iBAAiB,GAClB,MAAM,kCAAkC,CAAA;AAGzC,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAG1F,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -2,6 +2,7 @@
 export { AdminUI } from './components/AdminUI.js';
 export { Dashboard } from './components/Dashboard.js';
 export { Navigation } from './components/Navigation.js';
+export { UserMenu } from './components/UserMenu.js';
 export { ListView } from './components/ListView.js';
 export { ListViewClient } from './components/ListViewClient.js';
 export { ItemForm } from './components/ItemForm.js';

package/dist/primitives/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/styles/globals.css

@@ -244,6 +244,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -300,6 +303,24 @@
   .z-50 {
     z-index: 50;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
@@ -333,6 +354,9 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensaas/stack-ui",
-  "version": "0.1.7",
+  "version": "0.3.0",
   "description": "Composable React UI components for OpenSaas Stack",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,10 +51,10 @@
     "url": "https://github.com/OpenSaasAU/stack/issues"
   },
   "peerDependencies": {
+    "@opensaas/stack-core": "^0",
     "next": "^15.0.0 || ^16.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@opensaas/stack-core": "0.1.7"
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -68,7 +68,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "lucide-react": "^0.553.0",
+    "lucide-react": "^0.554.0",
     "react-hook-form": "^7.54.2",
     "tailwind-merge": "^3.3.1"
   },
@@ -81,14 +81,20 @@
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/browser": "^4.0.9",
+    "@vitest/browser-playwright": "^4.0.9",
     "@vitest/coverage-v8": "^4.0.4",
     "happy-dom": "^20.0.0",
+    "next": "^16.0.1",
+    "playwright": "^1.56.1",
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.0",
-    "@opensaas/stack-core": "0.1.7"
+    "@opensaas/stack-core": "0.3.0"
   },
   "scripts": {
     "build": "tsc && npm run build:css",
@@ -97,6 +103,9 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest --coverage",
+    "test:browser": "BROWSER_TEST=true vitest --run",
+    "test:browser:ui": "BROWSER_TEST=true vitest --ui",
+    "test:browser:coverage": "BROWSER_TEST=true vitest --coverage --run",
     "clean": "rm -rf .turbo dist tsconfig.tsbuildinfo"
   }
 }

package/src/components/AdminUI.tsx

@@ -15,6 +15,7 @@ export interface AdminUIProps<TPrisma> {
   basePath?: string
   // Server action can return any shape depending on the list item type
   serverAction: (input: ServerActionInput) => Promise<unknown>
+  onSignOut?: () => Promise<void>
 }
 
 /**
@@ -34,6 +35,7 @@ export function AdminUI<TPrisma>({
   searchParams = {},
   basePath = '/admin',
   serverAction,
+  onSignOut,
 }: AdminUIProps<TPrisma>) {
   // Parse route from params
   const [urlSegment, action] = params
@@ -104,6 +106,7 @@ export function AdminUI<TPrisma>({
           config={config}
           basePath={basePath}
           currentPath={currentPath}
+          onSignOut={onSignOut}
         />
         <main className="flex-1 overflow-y-auto">{content}</main>
       </div>