@opensaas/stack-ui 0.1.0

package/dist/components/ItemFormClient.js

@@ -0,0 +1,127 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
+import { FieldRenderer } from './fields/FieldRenderer.js';
+import { ConfirmDialog } from './ConfirmDialog.js';
+import { LoadingSpinner } from './LoadingSpinner.js';
+import { Button } from '../primitives/button.js';
+/**
+ * Client component for interactive form
+ * Handles form state, validation, and submission
+ */
+export function ItemFormClient({ listKey, urlKey, mode, fields, initialData = {}, itemId, basePath, serverAction, relationshipData = {}, }) {
+    const router = useRouter();
+    const [isPending, startTransition] = useTransition();
+    const [formData, setFormData] = useState(initialData);
+    const [errors, setErrors] = useState({});
+    const [generalError, setGeneralError] = useState(null);
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+    const handleFieldChange = (fieldName, value) => {
+        setFormData((prev) => ({ ...prev, [fieldName]: value }));
+        // Clear error for this field when user starts typing
+        if (errors[fieldName]) {
+            setErrors((prev) => {
+                const newErrors = { ...prev };
+                delete newErrors[fieldName];
+                return newErrors;
+            });
+        }
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setErrors({});
+        setGeneralError(null);
+        startTransition(async () => {
+            try {
+                // Transform relationship fields to Prisma format
+                // Filter out password fields with isSet objects (unchanged passwords)
+                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 },
+                                };
+                            }
+                        }
+                    }
+                    else {
+                        // Non-relationship field: pass through
+                        transformedData[fieldName] = value;
+                    }
+                }
+                const result = mode === 'create'
+                    ? await serverAction({
+                        listKey,
+                        action: 'create',
+                        data: transformedData,
+                    })
+                    : await serverAction({
+                        listKey,
+                        action: 'update',
+                        id: itemId,
+                        data: transformedData,
+                    });
+                if (result) {
+                    // Navigate back to list view
+                    router.push(`${basePath}/${urlKey}`);
+                    router.refresh();
+                }
+                else {
+                    setGeneralError('Access denied or operation failed');
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to save item';
+                setGeneralError(errorMessage);
+            }
+        });
+    };
+    const handleDelete = async () => {
+        if (!itemId)
+            return;
+        setGeneralError(null);
+        setShowDeleteConfirm(false);
+        startTransition(async () => {
+            try {
+                const result = await serverAction({
+                    listKey,
+                    action: 'delete',
+                    id: itemId,
+                });
+                if (result) {
+                    router.push(`${basePath}/${urlKey}`);
+                    router.refresh();
+                }
+                else {
+                    setGeneralError('Access denied or failed to delete item');
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to delete item';
+                setGeneralError(errorMessage);
+            }
+        });
+    };
+    // Filter out system fields
+    const editableFields = Object.entries(fields).filter(([key]) => !['id', 'createdAt', 'updatedAt'].includes(key));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [generalError && (_jsx("div", { className: "bg-destructive/10 border border-destructive text-destructive rounded-lg p-4", children: _jsx("p", { className: "text-sm font-medium", children: generalError }) })), _jsx("div", { className: "space-y-6", children: editableFields.map(([fieldName, fieldConfig]) => (_jsx(FieldRenderer, { fieldName: fieldName, fieldConfig: fieldConfig, value: formData[fieldName], onChange: (value) => handleFieldChange(fieldName, value), error: errors[fieldName], disabled: isPending, mode: "edit", relationshipItems: relationshipData[fieldName] || [], relationshipLoading: false, basePath: basePath }, fieldName))) }), _jsxs("div", { className: "flex items-center justify-between pt-6 border-t border-border", children: [_jsxs("div", { className: "flex gap-3", children: [_jsxs(Button, { type: "submit", disabled: isPending, className: "gap-2", children: [isPending && (_jsx(LoadingSpinner, { size: "sm", className: "border-primary-foreground border-t-transparent" })), isPending ? 'Saving...' : mode === 'create' ? 'Create' : 'Save'] }), _jsx(Button, { type: "button", variant: "secondary", onClick: () => router.push(`${basePath}/${urlKey}`), disabled: isPending, children: "Cancel" })] }), mode === 'edit' && itemId && (_jsx(Button, { type: "button", variant: "destructive", onClick: () => setShowDeleteConfirm(true), disabled: isPending, children: "Delete" }))] }), _jsx(ConfirmDialog, { isOpen: showDeleteConfirm, title: "Delete Item", message: "Are you sure you want to delete this item? This action cannot be undone.", confirmLabel: "Delete", cancelLabel: "Cancel", variant: "danger", onConfirm: handleDelete, onCancel: () => setShowDeleteConfirm(false) })] }));
+}

package/dist/components/ListView.d.ts

@@ -0,0 +1,17 @@
+import { AccessContext, OpenSaasConfig, type PrismaClientLike } from '@opensaas/stack-core';
+export interface ListViewProps<TPrisma extends PrismaClientLike = PrismaClientLike> {
+    context: AccessContext<TPrisma>;
+    config: OpenSaasConfig;
+    listKey: string;
+    basePath?: string;
+    columns?: string[];
+    page?: number;
+    pageSize?: number;
+    search?: string;
+}
+/**
+ * List view component - displays items in a table
+ * Server Component that fetches data and renders client table
+ */
+export declare function ListView<TPrisma extends PrismaClientLike = PrismaClientLike>({ context, config, listKey, basePath, columns, page, pageSize, search, }: ListViewProps<TPrisma>): Promise<import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=ListView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../src/components/ListView.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,aAAa,EAGb,cAAc,EACd,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAA;AAE7B,MAAM,WAAW,aAAa,CAAC,OAAO,SAAS,gBAAgB,GAAG,gBAAgB;IAChF,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,OAAO,SAAS,gBAAgB,GAAG,gBAAgB,EAAE,EAClF,OAAO,EACP,MAAM,EACN,OAAO,EACP,QAAmB,EACnB,OAAO,EACP,IAAQ,EACR,QAAa,EACb,MAAM,GACP,EAAE,aAAa,CAAC,OAAO,CAAC,oDAqHxB"}

package/dist/components/ListView.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import { ListViewClient } from './ListViewClient.js';
+import { formatListName } from '../lib/utils.js';
+import { getDbKey, getUrlKey, } from '@opensaas/stack-core';
+/**
+ * List view component - displays items in a table
+ * Server Component that fetches data and renders client table
+ */
+export async function ListView({ context, config, listKey, basePath = '/admin', columns, page = 1, pageSize = 50, search, }) {
+    const key = getDbKey(listKey);
+    const urlKey = getUrlKey(listKey);
+    const listConfig = config.lists[listKey];
+    if (!listConfig) {
+        return (_jsx("div", { className: "p-8", children: _jsxs("div", { className: "bg-destructive/10 border border-destructive text-destructive rounded-lg p-6", children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "List not found" }), _jsxs("p", { children: ["The list \"", listKey, "\" does not exist in your configuration."] })] }) }));
+    }
+    // Fetch items using access-controlled context
+    const skip = (page - 1) * pageSize;
+    let items = [];
+    let total = 0;
+    try {
+        const dbContext = context.db;
+        if (!dbContext || !dbContext[key]) {
+            throw new Error(`Context for ${listKey} not found`);
+        }
+        // Build search filter if search term provided
+        let where = undefined;
+        if (search && search.trim()) {
+            // Find all text fields to search across
+            const searchableFields = Object.entries(listConfig.fields)
+                .filter(([_, field]) => field.type === 'text')
+                .map(([fieldName]) => fieldName);
+            if (searchableFields.length > 0) {
+                where = {
+                    OR: searchableFields.map((fieldName) => ({
+                        [fieldName]: {
+                            contains: search.trim(),
+                        },
+                    })),
+                };
+            }
+        }
+        // Build include object for relationship fields
+        const include = {};
+        Object.entries(listConfig.fields).forEach(([fieldName, field]) => {
+            if (field.type === 'relationship') {
+                include[fieldName] = true;
+            }
+        });
+        [items, total] = await Promise.all([
+            dbContext[key].findMany({
+                where,
+                skip,
+                take: pageSize,
+                ...(Object.keys(include).length > 0 ? { include } : {}),
+            }),
+            dbContext[key].count({ where }),
+        ]);
+    }
+    catch (error) {
+        console.error(`Failed to fetch ${listKey}:`, error);
+    }
+    // Serialize items for client component (convert Dates, etc to JSON-safe format)
+    const serializedItems = JSON.parse(JSON.stringify(items));
+    // Extract only the relationship refs needed by client (don't send entire config)
+    const relationshipRefs = {};
+    Object.entries(listConfig.fields).forEach(([fieldName, field]) => {
+        if ('type' in field && field.type === 'relationship' && 'ref' in field && field.ref) {
+            relationshipRefs[fieldName] = field.ref;
+        }
+    });
+    return (_jsxs("div", { className: "p-8", children: [_jsxs("div", { className: "flex items-center justify-between mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: formatListName(listKey) }), _jsxs("p", { className: "text-muted-foreground", children: [total, " ", total === 1 ? 'item' : 'items'] })] }), _jsxs(Link, { href: `${basePath}/${urlKey}/create`, className: "inline-flex items-center px-4 py-2 bg-primary text-primary-foreground rounded-md font-medium hover:bg-primary/90 transition-colors", children: [_jsx("span", { className: "mr-2", children: "+" }), "Create ", formatListName(listKey)] })] }), _jsx(ListViewClient, { items: serializedItems || [], fieldTypes: Object.fromEntries(Object.entries(listConfig.fields).map(([key, field]) => [
+                    key,
+                    field.type,
+                ])), relationshipRefs: relationshipRefs, columns: columns, listKey: listKey, urlKey: urlKey, basePath: basePath, page: page, pageSize: pageSize, total: total || 0, search: search })] }));
+}

package/dist/components/ListViewClient.d.ts

@@ -0,0 +1,19 @@
+export interface ListViewClientProps {
+    items: Array<Record<string, unknown>>;
+    fieldTypes: Record<string, string>;
+    relationshipRefs: Record<string, string>;
+    columns?: string[];
+    listKey: string;
+    urlKey: string;
+    basePath: string;
+    page: number;
+    pageSize: number;
+    total: number;
+    search?: string;
+}
+/**
+ * Client component for interactive list table
+ * Handles sorting, pagination, and row interactions
+ */
+export declare function ListViewClient({ items, fieldTypes, relationshipRefs, columns, urlKey, basePath, page, pageSize, total, search: initialSearch, }: ListViewClientProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListViewClient.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListViewClient.d.ts","sourceRoot":"","sources":["../../src/components/ListViewClient.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IACrC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,MAAM,EAAE,aAAa,GACtB,EAAE,mBAAmB,2CAwOrB"}

package/dist/components/ListViewClient.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { formatFieldName, getFieldDisplayValue } from '../lib/utils.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../primitives/table.js';
+import { Input } from '../primitives/input.js';
+import { Button } from '../primitives/button.js';
+import { Card } from '../primitives/card.js';
+import { getUrlKey } from '@opensaas/stack-core';
+/**
+ * Client component for interactive list table
+ * Handles sorting, pagination, and row interactions
+ */
+export function ListViewClient({ items, fieldTypes, relationshipRefs, columns, urlKey, basePath, page, pageSize, total, search: initialSearch, }) {
+    const router = useRouter();
+    const [sortBy, setSortBy] = useState(null);
+    const [sortOrder, setSortOrder] = useState('asc');
+    const [searchInput, setSearchInput] = useState(initialSearch || '');
+    // Determine which columns to show
+    const displayColumns = columns ||
+        Object.keys(fieldTypes).filter((key) => !['password', 'createdAt', 'updatedAt'].includes(key));
+    // Sort items if needed
+    const sortedItems = [...items];
+    if (sortBy) {
+        sortedItems.sort((a, b) => {
+            const aVal = a[sortBy];
+            const bVal = b[sortBy];
+            if (aVal === bVal)
+                return 0;
+            // Handle unknown types for comparison - convert to string for safety
+            const aStr = String(aVal ?? '');
+            const bStr = String(bVal ?? '');
+            const comparison = aStr > bStr ? 1 : -1;
+            return sortOrder === 'asc' ? comparison : -comparison;
+        });
+    }
+    const totalPages = Math.ceil(total / pageSize);
+    const hasNextPage = page < totalPages;
+    const hasPrevPage = page > 1;
+    const handleSort = (column) => {
+        if (sortBy === column) {
+            setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+        }
+        else {
+            setSortBy(column);
+            setSortOrder('asc');
+        }
+    };
+    const handleSearch = (e) => {
+        e.preventDefault();
+        const params = new URLSearchParams();
+        if (searchInput.trim()) {
+            params.set('search', searchInput.trim());
+        }
+        params.set('page', '1'); // Reset to page 1 on new search
+        router.push(`${basePath}/${urlKey}?${params.toString()}`);
+    };
+    const handleClearSearch = () => {
+        setSearchInput('');
+        router.push(`${basePath}/${urlKey}`);
+    };
+    const buildPaginationUrl = (newPage) => {
+        const params = new URLSearchParams();
+        if (initialSearch) {
+            params.set('search', initialSearch);
+        }
+        params.set('page', newPage.toString());
+        return `${basePath}/${urlKey}?${params.toString()}`;
+    };
+    /**
+     * Render a relationship field as a clickable link or links
+     */
+    const renderRelationshipCell = (value, fieldName) => {
+        const ref = relationshipRefs[fieldName];
+        if (!ref) {
+            return getFieldDisplayValue(value, 'relationship');
+        }
+        // Parse ref to get related list name
+        const [relatedListKey] = ref.split('.');
+        const relatedUrlKey = getUrlKey(relatedListKey);
+        if (!value || typeof value !== 'object') {
+            return _jsx("span", { className: "text-muted-foreground", children: "-" });
+        }
+        // Handle array of relationships (many: true)
+        if (Array.isArray(value)) {
+            if (value.length === 0)
+                return _jsx("span", { className: "text-muted-foreground", children: "-" });
+            return (_jsx("span", { className: "flex flex-wrap gap-1", children: value.map((item, idx) => {
+                    if (!item || typeof item !== 'object')
+                        return null;
+                    const displayValue = getFieldDisplayValue(item, 'relationship');
+                    const itemId = 'id' in item ? item.id : null;
+                    const key = itemId || idx;
+                    return (_jsxs(React.Fragment, { children: [idx > 0 && _jsx("span", { className: "text-muted-foreground", children: ", " }), _jsx(Link, { href: `${basePath}/${relatedUrlKey}/${itemId}`, className: "text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: displayValue })] }, key));
+                }) }));
+        }
+        // Handle single relationship
+        const itemId = 'id' in value ? value.id : null;
+        const displayValue = getFieldDisplayValue(value, 'relationship');
+        return (_jsx(Link, { href: `${basePath}/${relatedUrlKey}/${itemId}`, className: "text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: displayValue }));
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { className: "p-4", children: _jsxs("form", { onSubmit: handleSearch, className: "flex gap-2", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(Input, { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), placeholder: "Search...", className: "pr-10" }), searchInput && (_jsx("button", { type: "button", onClick: handleClearSearch, className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: "\u2715" }))] }), _jsx(Button, { type: "submit", children: "Search" })] }) }), _jsx("div", { className: "rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [displayColumns.map((column) => (_jsx(TableHead, { className: "cursor-pointer hover:bg-muted/70 transition-colors", onClick: () => handleSort(column), children: _jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("span", { children: formatFieldName(column) }), sortBy === column && (_jsx("span", { className: "text-primary", children: sortOrder === 'asc' ? '↑' : '↓' }))] }) }, column))), _jsx(TableHead, { className: "text-right", children: "Actions" })] }) }), _jsx(TableBody, { children: sortedItems.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: displayColumns.length + 1, className: "h-24 text-center", children: "No items found" }) })) : (sortedItems.map((item) => (_jsxs(TableRow, { children: [displayColumns.map((column) => (_jsx(TableCell, { children: fieldTypes[column] === 'relationship'
+                                            ? renderRelationshipCell(item[column], column)
+                                            : getFieldDisplayValue(item[column], fieldTypes[column]) }, column))), _jsx(TableCell, { className: "text-right", children: _jsx(Link, { href: `${basePath}/${urlKey}/${item.id}`, className: "text-primary hover:underline", children: "Edit" }) })] }, String(item.id))))) })] }) }), totalPages > 1 && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Showing ", (page - 1) * pageSize + 1, " to ", Math.min(page * pageSize, total), " of ", total, ' ', "results"] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Button, { variant: "outline", onClick: () => router.push(buildPaginationUrl(page - 1)), disabled: !hasPrevPage, children: "Previous" }), _jsxs("span", { className: "text-sm text-muted-foreground", children: ["Page ", page, " of ", totalPages] }), _jsx(Button, { variant: "outline", onClick: () => router.push(buildPaginationUrl(page + 1)), disabled: !hasNextPage, children: "Next" })] })] }))] }));
+}

package/dist/components/LoadingSpinner.d.ts

@@ -0,0 +1,10 @@
+export interface LoadingSpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * Loading spinner component
+ * Used to indicate loading states
+ */
+export declare function LoadingSpinner({ size, className }: LoadingSpinnerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoadingSpinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../src/components/LoadingSpinner.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAoB7E"}

package/dist/components/LoadingSpinner.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+/**
+ * Loading spinner component
+ * Used to indicate loading states
+ */
+export function LoadingSpinner({ size = 'md', className }) {
+    const sizeClasses = {
+        sm: 'h-4 w-4 border-2',
+        md: 'h-8 w-8 border-2',
+        lg: 'h-12 w-12 border-3',
+    };
+    return (_jsx("div", { className: cn('animate-spin rounded-full border-primary border-t-transparent', sizeClasses[size], className), role: "status", "aria-label": "Loading", children: _jsx("span", { className: "sr-only", children: "Loading..." }) }));
+}

package/dist/components/Navigation.d.ts

@@ -0,0 +1,13 @@
+import { AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
+export interface NavigationProps<TPrisma> {
+    context: AccessContext<TPrisma>;
+    config: OpenSaasConfig;
+    basePath?: string;
+    currentPath?: string;
+}
+/**
+ * Navigation sidebar showing all lists
+ * Server Component
+ */
+export declare function Navigation<TPrisma>({ context, config, basePath, currentPath, }: NavigationProps<TPrisma>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Navigation.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Navigation.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from 'next/link';
+import { formatListName } from '../lib/utils.js';
+import { getUrlKey } from '@opensaas/stack-core';
+/**
+ * Navigation sidebar showing all lists
+ * Server Component
+ */
+export function Navigation({ context, config, basePath = '/admin', currentPath = '', }) {
+    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'
+                                : 'text-foreground hover:bg-accent/50 hover:text-accent-foreground'}`, children: [currentPath === '' && (_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: currentPath === '' ? 'text-lg' : 'text-base', children: "\uD83D\uDCCA" }), "Dashboard"] })] }), lists.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "pt-4 pb-2 px-3", children: _jsx("p", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Lists" }) }), lists.map((listKey) => {
+                                    const urlKey = getUrlKey(listKey);
+                                    const isActive = currentPath.startsWith(`/${urlKey}`);
+                                    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) || '' })] })] }) }))] }));
+}

package/dist/components/SkeletonLoader.d.ts

@@ -0,0 +1,22 @@
+export interface SkeletonLoaderProps {
+    className?: string;
+    variant?: 'text' | 'circular' | 'rectangular';
+}
+/**
+ * Skeleton loader component for content placeholders
+ */
+export declare function SkeletonLoader({ className, variant }: SkeletonLoaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Table skeleton loader
+ */
+export declare function TableSkeleton({ rows, columns }: {
+    rows?: number;
+    columns?: number;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Form skeleton loader
+ */
+export declare function FormSkeleton({ fields }: {
+    fields?: number;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SkeletonLoader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.d.ts","sourceRoot":"","sources":["../../src/components/SkeletonLoader.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAA;CAC9C;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,OAAuB,EAAE,EAAE,mBAAmB,2CAazF;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAQ,EAAE,OAAW,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,2CA6B3F;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAU,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,2CAmB/D"}

package/dist/components/SkeletonLoader.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+/**
+ * Skeleton loader component for content placeholders
+ */
+export function SkeletonLoader({ className, variant = 'rectangular' }) {
+    const variantClasses = {
+        text: 'h-4 rounded',
+        circular: 'rounded-full',
+        rectangular: 'rounded-md',
+    };
+    return (_jsx("div", { className: cn('animate-pulse bg-muted', variantClasses[variant], className), "aria-hidden": "true" }));
+}
+/**
+ * Table skeleton loader
+ */
+export function TableSkeleton({ rows = 5, columns = 4 }) {
+    return (_jsx("div", { className: "bg-card border border-border rounded-lg overflow-hidden", children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { className: "bg-muted/50 border-b border-border", children: _jsx("tr", { children: Array.from({ length: columns }).map((_, i) => (_jsx("th", { className: "px-6 py-3", children: _jsx(SkeletonLoader, { variant: "text", className: "h-4 w-24" }) }, i))) }) }), _jsx("tbody", { className: "divide-y divide-border", children: Array.from({ length: rows }).map((_, rowIndex) => (_jsx("tr", { children: Array.from({ length: columns }).map((_, colIndex) => (_jsx("td", { className: "px-6 py-4", children: _jsx(SkeletonLoader, { variant: "text", className: "h-4 w-32" }) }, colIndex))) }, rowIndex))) })] }) }) }));
+}
+/**
+ * Form skeleton loader
+ */
+export function FormSkeleton({ fields = 4 }) {
+    return (_jsx("div", { className: "bg-card border border-border rounded-lg p-6", children: _jsxs("div", { className: "space-y-6", children: [Array.from({ length: fields }).map((_, i) => (_jsxs("div", { className: "space-y-2", children: [_jsx(SkeletonLoader, { variant: "text", className: "h-4 w-24" }), _jsx(SkeletonLoader, { variant: "rectangular", className: "h-10 w-full" })] }, i))), _jsx("div", { className: "flex items-center justify-between pt-6 border-t border-border", children: _jsxs("div", { className: "flex gap-3", children: [_jsx(SkeletonLoader, { variant: "rectangular", className: "h-10 w-20" }), _jsx(SkeletonLoader, { variant: "rectangular", className: "h-10 w-20" })] }) })] }) }));
+}

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

@@ -0,0 +1,11 @@
+export interface CheckboxFieldProps {
+    name: string;
+    value: boolean;
+    onChange: (value: boolean) => void;
+    label: string;
+    error?: string;
+    disabled?: boolean;
+    mode?: 'read' | 'edit';
+}
+export declare function CheckboxField({ name, value, onChange, label, error, disabled, mode, }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckboxField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/CheckboxField.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAa,GACd,EAAE,kBAAkB,2CA8BpB"}

package/dist/components/fields/CheckboxField.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '../../primitives/checkbox.js';
+import { Label } from '../../primitives/label.js';
+export function CheckboxField({ name, value, onChange, label, error, disabled, mode = 'edit', }) {
+    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 ? 'Yes' : 'No' })] }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: name, name: name, checked: value || false, onCheckedChange: (checked) => onChange(checked === true), disabled: disabled }), _jsx(Label, { htmlFor: name, className: "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: label })] }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+}

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

@@ -0,0 +1,18 @@
+export interface ComboboxFieldProps {
+    name: string;
+    value: string | null;
+    onChange: (value: string | null) => void;
+    label: string;
+    items: Array<{
+        id: string;
+        label: string;
+    }>;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    mode?: 'read' | 'edit';
+    isLoading?: boolean;
+    placeholder?: string;
+}
+export declare function ComboboxField({ name, value, onChange, label, items, error, disabled, required, mode, isLoading, placeholder, }: ComboboxFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ComboboxField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ComboboxField.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC3C,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,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,SAAiB,EACjB,WAAyB,GAC1B,EAAE,kBAAkB,2CAsFpB"}

package/dist/components/fields/ComboboxField.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Combobox, ComboboxTrigger, ComboboxContent, ComboboxSearch, ComboboxList, ComboboxEmpty, ComboboxItem, } from '../../primitives/combobox.js';
+export function ComboboxField({ name, value, onChange, label, items, error, disabled, required, mode = 'edit', isLoading = false, placeholder = 'Select...', }) {
+    const [open, setOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    // Read mode
+    if (mode === 'read') {
+        const selectedItem = items.find((item) => item.id === value);
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx("label", { className: "text-sm font-medium text-muted-foreground", children: label }), _jsx("p", { className: "text-sm", children: selectedItem?.label || '-' })] }));
+    }
+    // Filter items based on search query
+    const filteredItems = searchQuery
+        ? items.filter((item) => item.label.toLowerCase().includes(searchQuery.toLowerCase()))
+        : items;
+    const selectedItem = items.find((item) => item.id === value);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { htmlFor: name, className: "text-sm font-medium", children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsxs(Combobox, { open: open, onOpenChange: setOpen, children: [_jsx(ComboboxTrigger, { disabled: disabled || isLoading, children: _jsx("span", { className: !selectedItem ? 'text-muted-foreground' : '', children: isLoading ? 'Loading...' : selectedItem ? selectedItem.label : placeholder }) }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxSearch, { placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
+                                    // Prevent form submission on Enter
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault();
+                                    }
+                                } }), _jsx(ComboboxList, { children: filteredItems.length === 0 ? (_jsx(ComboboxEmpty, {})) : (_jsxs(_Fragment, { children: [!required && value && (_jsxs(_Fragment, { children: [_jsx(ComboboxItem, { onClick: () => {
+                                                        onChange(null);
+                                                        setOpen(false);
+                                                        setSearchQuery('');
+                                                    }, children: _jsx("span", { className: "text-muted-foreground italic", children: "Clear selection" }) }), _jsx("div", { className: "-mx-1 my-1 h-px bg-border" })] })), filteredItems.map((item) => (_jsx(ComboboxItem, { selected: item.id === value, onClick: () => {
+                                                onChange(item.id);
+                                                setOpen(false);
+                                                setSearchQuery('');
+                                            }, children: item.label }, item.id)))] })) })] })] }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+}

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

@@ -0,0 +1,22 @@
+import type { SerializableFieldConfig } from '../../lib/serializeFieldConfig.js';
+export interface FieldRendererProps {
+    fieldName: string;
+    fieldConfig: SerializableFieldConfig;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    error?: string;
+    disabled?: boolean;
+    mode?: 'read' | 'edit';
+    relationshipItems?: Array<{
+        id: string;
+        label: string;
+    }>;
+    relationshipLoading?: boolean;
+    basePath?: string;
+}
+/**
+ * Factory component that renders the appropriate field type
+ * based on the field configuration and component registry
+ */
+export declare function FieldRenderer(props: FieldRendererProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FieldRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/fields/FieldRenderer.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAA;AAEhF,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,uBAAuB,CAAA;IACpC,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACxD,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AA6ED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kDA+BtD"}