@opensaas/stack-ui 0.1.0

package/dist/components/standalone/ItemCreateForm.d.ts

@@ -0,0 +1,34 @@
+import type { FieldConfig } from '@opensaas/stack-core';
+export interface ItemCreateFormProps<TData = Record<string, unknown>> {
+    fields: Record<string, FieldConfig>;
+    onSubmit: (data: TData) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    onCancel?: () => void;
+    relationshipData?: Record<string, Array<{
+        id: string;
+        label: string;
+    }>>;
+    submitLabel?: string;
+    cancelLabel?: string;
+    className?: string;
+}
+/**
+ * Standalone form component for creating items
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <ItemCreateForm
+ *   fields={config.lists.Post.fields}
+ *   onSubmit={async (data) => {
+ *     const result = await createPost(data);
+ *     return { success: !!result };
+ *   }}
+ *   onCancel={() => router.back()}
+ * />
+ * ```
+ */
+export declare function ItemCreateForm<TData = Record<string, unknown>>({ fields, onSubmit, onCancel, relationshipData, submitLabel, cancelLabel, className, }: ItemCreateFormProps<TData>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ItemCreateForm.d.ts.map

package/dist/components/standalone/ItemCreateForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemCreateForm.d.ts","sourceRoot":"","sources":["../../../src/components/standalone/ItemCreateForm.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAGvD,MAAM,WAAW,mBAAmB,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAA;IACvE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC9D,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,gBAAqB,EACrB,WAAsB,EACtB,WAAsB,EACtB,SAAS,GACV,EAAE,mBAAmB,CAAC,KAAK,CAAC,2CAoH5B"}

package/dist/components/standalone/ItemCreateForm.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { FieldRenderer } from '../fields/FieldRenderer.js';
+import { LoadingSpinner } from '../LoadingSpinner.js';
+import { Button } from '../../primitives/button.js';
+import { serializeFieldConfigs } from '../../lib/serializeFieldConfig.js';
+/**
+ * Standalone form component for creating items
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <ItemCreateForm
+ *   fields={config.lists.Post.fields}
+ *   onSubmit={async (data) => {
+ *     const result = await createPost(data);
+ *     return { success: !!result };
+ *   }}
+ *   onCancel={() => router.back()}
+ * />
+ * ```
+ */
+export function ItemCreateForm({ fields, onSubmit, onCancel, relationshipData = {}, submitLabel = 'Create', cancelLabel = 'Cancel', className, }) {
+    // Serialize field configs to remove non-serializable properties
+    const serializedFields = useMemo(() => serializeFieldConfigs(fields), [fields]);
+    const [isPending, setIsPending] = useState(false);
+    const [formData, setFormData] = useState({});
+    const [errors, setErrors] = useState({});
+    const [generalError, setGeneralError] = useState(null);
+    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);
+        setIsPending(true);
+        try {
+            // Transform relationship fields to Prisma format
+            const transformedData = {};
+            for (const [fieldName, value] of Object.entries(formData)) {
+                const fieldConfig = serializedFields[fieldName];
+                // Transform relationship fields
+                if (fieldConfig?.type === 'relationship') {
+                    if (fieldConfig.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 = await onSubmit(transformedData);
+            if (!result.success) {
+                setGeneralError(result.error || 'Failed to create item');
+            }
+        }
+        catch (error) {
+            setGeneralError(error.message || 'Failed to create item');
+        }
+        finally {
+            setIsPending(false);
+        }
+    };
+    // Filter out system fields
+    const editableFields = Object.entries(serializedFields).filter(([key]) => !['id', 'createdAt', 'updatedAt'].includes(key));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: className, children: [generalError && (_jsx("div", { className: "bg-destructive/10 border border-destructive text-destructive rounded-lg p-4 mb-6", 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 }, fieldName))) }), _jsxs("div", { className: "flex gap-3 pt-6 mt-6 border-t border-border", children: [_jsxs(Button, { type: "submit", disabled: isPending, className: "gap-2", children: [isPending && (_jsx(LoadingSpinner, { size: "sm", className: "border-primary-foreground border-t-transparent" })), isPending ? 'Creating...' : submitLabel] }), onCancel && (_jsx(Button, { type: "button", variant: "secondary", onClick: onCancel, disabled: isPending, children: cancelLabel }))] })] }));
+}

package/dist/components/standalone/ItemEditForm.d.ts

@@ -0,0 +1,37 @@
+import type { FieldConfig } from '@opensaas/stack-core';
+export interface ItemEditFormProps<TData = Record<string, unknown>> {
+    fields: Record<string, FieldConfig>;
+    initialData: TData;
+    onSubmit: (data: TData) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    onCancel?: () => void;
+    relationshipData?: Record<string, Array<{
+        id: string;
+        label: string;
+    }>>;
+    submitLabel?: string;
+    cancelLabel?: string;
+    className?: string;
+    basePath?: string;
+}
+/**
+ * Standalone form component for editing items
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <ItemEditForm
+ *   fields={config.lists.Post.fields}
+ *   initialData={post}
+ *   onSubmit={async (data) => {
+ *     const result = await updatePost(postId, data);
+ *     return { success: !!result };
+ *   }}
+ *   onCancel={() => router.back()}
+ * />
+ * ```
+ */
+export declare function ItemEditForm<TData = Record<string, unknown>>({ fields, initialData, onSubmit, onCancel, relationshipData, submitLabel, cancelLabel, className, basePath, }: ItemEditFormProps<TData>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ItemEditForm.d.ts.map

package/dist/components/standalone/ItemEditForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemEditForm.d.ts","sourceRoot":"","sources":["../../../src/components/standalone/ItemEditForm.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAGvD,MAAM,WAAW,iBAAiB,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAChE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;IACnC,WAAW,EAAE,KAAK,CAAA;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAA;IACvE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC5D,MAAM,EACN,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,gBAAqB,EACrB,WAAoB,EACpB,WAAsB,EACtB,SAAS,EACT,QAAmB,GACpB,EAAE,iBAAiB,CAAC,KAAK,CAAC,2CA+I1B"}

package/dist/components/standalone/ItemEditForm.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { FieldRenderer } from '../fields/FieldRenderer.js';
+import { LoadingSpinner } from '../LoadingSpinner.js';
+import { Button } from '../../primitives/button.js';
+import { serializeFieldConfigs } from '../../lib/serializeFieldConfig.js';
+/**
+ * Standalone form component for editing items
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <ItemEditForm
+ *   fields={config.lists.Post.fields}
+ *   initialData={post}
+ *   onSubmit={async (data) => {
+ *     const result = await updatePost(postId, data);
+ *     return { success: !!result };
+ *   }}
+ *   onCancel={() => router.back()}
+ * />
+ * ```
+ */
+export function ItemEditForm({ fields, initialData, onSubmit, onCancel, relationshipData = {}, submitLabel = 'Save', cancelLabel = 'Cancel', className, basePath = '/admin', }) {
+    // Serialize field configs to remove non-serializable properties
+    const serializedFields = useMemo(() => serializeFieldConfigs(fields), [fields]);
+    // Apply valueForClientSerialization transformations to initial data
+    const transformedInitialData = useMemo(() => {
+        const transformed = { ...initialData };
+        for (const [fieldName, fieldConfig] of Object.entries(fields)) {
+            const fieldConfigAny = fieldConfig;
+            if (fieldConfigAny.ui?.valueForClientSerialization &&
+                typeof fieldConfigAny.ui.valueForClientSerialization === 'function') {
+                const transformer = fieldConfigAny.ui.valueForClientSerialization;
+                transformed[fieldName] = transformer({
+                    value: transformed[fieldName],
+                });
+            }
+        }
+        return transformed;
+    }, [initialData, fields]);
+    const [isPending, setIsPending] = useState(false);
+    const [formData, setFormData] = useState(transformedInitialData);
+    const [errors, setErrors] = useState({});
+    const [generalError, setGeneralError] = useState(null);
+    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);
+        setIsPending(true);
+        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 = serializedFields[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
+                if (fieldConfig?.type === 'relationship') {
+                    if (fieldConfig.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 = await onSubmit(transformedData);
+            if (!result.success) {
+                setGeneralError(result.error || 'Failed to update item');
+            }
+        }
+        catch (error) {
+            setGeneralError(error.message || 'Failed to update item');
+        }
+        finally {
+            setIsPending(false);
+        }
+    };
+    // Filter out system fields
+    const editableFields = Object.entries(serializedFields).filter(([key]) => !['id', 'createdAt', 'updatedAt'].includes(key));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: className, children: [generalError && (_jsx("div", { className: "bg-destructive/10 border border-destructive text-destructive rounded-lg p-4 mb-6", 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 gap-3 pt-6 mt-6 border-t border-border", 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...' : submitLabel] }), onCancel && (_jsx(Button, { type: "button", variant: "secondary", onClick: onCancel, disabled: isPending, children: cancelLabel }))] })] }));
+}

package/dist/components/standalone/ListTable.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface ListTableProps {
+    items: Array<Record<string, unknown>>;
+    fieldTypes: Record<string, string>;
+    relationshipRefs?: Record<string, string>;
+    basePath?: string;
+    columns?: string[];
+    onRowClick?: (item: Record<string, unknown>) => void;
+    sortable?: boolean;
+    emptyMessage?: string;
+    className?: string;
+    renderActions?: (item: Record<string, unknown>) => React.ReactNode;
+}
+/**
+ * Standalone table component for displaying list data
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <ListTable
+ *   items={posts}
+ *   fieldTypes={{ title: 'text', status: 'select', publishedAt: 'timestamp', author: 'relationship' }}
+ *   relationshipRefs={{ author: 'User.posts' }}
+ *   columns={['title', 'status', 'publishedAt', 'author']}
+ *   onRowClick={(post) => router.push(`/posts/${post.id}`)}
+ *   renderActions={(post) => (
+ *     <Button onClick={() => deletePost(post.id)}>Delete</Button>
+ *   )}
+ * />
+ * ```
+ */
+export declare function ListTable({ items, fieldTypes, relationshipRefs, basePath, columns, onRowClick, sortable, emptyMessage, className, renderActions, }: ListTableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListTable.d.ts.map

package/dist/components/standalone/ListTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListTable.d.ts","sourceRoot":"","sources":["../../../src/components/standalone/ListTable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IACrC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;CACnE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,QAAmB,EACnB,OAAO,EACP,UAAU,EACV,QAAe,EACf,YAA+B,EAC/B,SAAS,EACT,aAAa,GACd,EAAE,cAAc,2CAyJhB"}

package/dist/components/standalone/ListTable.js

@@ -0,0 +1,94 @@
+'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 { formatFieldName, getFieldDisplayValue } from '../../lib/utils.js';
+import { getUrlKey } from '@opensaas/stack-core';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../../primitives/table.js';
+/**
+ * Standalone table component for displaying list data
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <ListTable
+ *   items={posts}
+ *   fieldTypes={{ title: 'text', status: 'select', publishedAt: 'timestamp', author: 'relationship' }}
+ *   relationshipRefs={{ author: 'User.posts' }}
+ *   columns={['title', 'status', 'publishedAt', 'author']}
+ *   onRowClick={(post) => router.push(`/posts/${post.id}`)}
+ *   renderActions={(post) => (
+ *     <Button onClick={() => deletePost(post.id)}>Delete</Button>
+ *   )}
+ * />
+ * ```
+ */
+export function ListTable({ items, fieldTypes, relationshipRefs, basePath = '/admin', columns, onRowClick, sortable = true, emptyMessage = 'No items found', className, renderActions, }) {
+    const [sortBy, setSortBy] = useState(null);
+    const [sortOrder, setSortOrder] = useState('asc');
+    /**
+     * Render a relationship field as a clickable link or links
+     */
+    const renderRelationshipCell = (value, fieldName) => {
+        if (!relationshipRefs) {
+            return getFieldDisplayValue(value, 'relationship');
+        }
+        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 }));
+    };
+    // 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 && sortable) {
+        sortedItems.sort((a, b) => {
+            const aVal = a[sortBy];
+            const bVal = b[sortBy];
+            if (aVal === bVal)
+                return 0;
+            const comparison = String(aVal) > String(bVal) ? 1 : -1;
+            return sortOrder === 'asc' ? comparison : -comparison;
+        });
+    }
+    const handleSort = (column) => {
+        if (!sortable)
+            return;
+        if (sortBy === column) {
+            setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+        }
+        else {
+            setSortBy(column);
+            setSortOrder('asc');
+        }
+    };
+    return (_jsx("div", { className: className, children: _jsx("div", { className: "rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [displayColumns.map((column) => (_jsx(TableHead, { className: sortable ? '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) }), sortable && sortBy === column && (_jsx("span", { className: "text-primary", children: sortOrder === 'asc' ? '↑' : '↓' }))] }) }, column))), renderActions && _jsx(TableHead, { className: "text-right", children: "Actions" })] }) }), _jsx(TableBody, { children: sortedItems.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: displayColumns.length + (renderActions ? 1 : 0), className: "h-24 text-center", children: emptyMessage }) })) : (sortedItems.map((item) => (_jsxs(TableRow, { className: onRowClick ? 'cursor-pointer' : '', onClick: () => onRowClick?.(item), children: [displayColumns.map((column) => (_jsx(TableCell, { children: fieldTypes[column] === 'relationship'
+                                        ? renderRelationshipCell(item[column], column)
+                                        : getFieldDisplayValue(item[column], fieldTypes[column]) }, column))), renderActions && (_jsx(TableCell, { className: "text-right", onClick: (e) => e.stopPropagation(), children: renderActions(item) }))] }, String(item.id))))) })] }) }) }));
+}

package/dist/components/standalone/SearchBar.d.ts

@@ -0,0 +1,29 @@
+export interface SearchBarProps {
+    onSearch?: (query: string) => void;
+    onClear?: () => void;
+    placeholder?: string;
+    defaultValue?: string;
+    searchLabel?: string;
+    className?: string;
+}
+/**
+ * Standalone search bar component
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <SearchBar
+ *   onSearch={(query) => {
+ *     setSearchQuery(query);
+ *     fetchPosts({ search: query });
+ *   }}
+ *   onClear={() => {
+ *     setSearchQuery('');
+ *     fetchPosts({});
+ *   }}
+ *   placeholder="Search posts..."
+ * />
+ * ```
+ */
+export declare function SearchBar({ onSearch, onClear, placeholder, defaultValue, searchLabel, className, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SearchBar.d.ts.map

package/dist/components/standalone/SearchBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../src/components/standalone/SearchBar.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,WAAyB,EACzB,YAAiB,EACjB,WAAsB,EACtB,SAAS,GACV,EAAE,cAAc,2CAyChB"}

package/dist/components/standalone/SearchBar.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Input } from '../../primitives/input.js';
+import { Button } from '../../primitives/button.js';
+import { Card } from '../../primitives/card.js';
+import { usePathname, useRouter } from 'next/navigation';
+/**
+ * Standalone search bar component
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <SearchBar
+ *   onSearch={(query) => {
+ *     setSearchQuery(query);
+ *     fetchPosts({ search: query });
+ *   }}
+ *   onClear={() => {
+ *     setSearchQuery('');
+ *     fetchPosts({});
+ *   }}
+ *   placeholder="Search posts..."
+ * />
+ * ```
+ */
+export function SearchBar({ onSearch, onClear, placeholder = 'Search...', defaultValue = '', searchLabel = 'Search', className, }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const [searchInput, setSearchInput] = useState(defaultValue);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (onSearch)
+            onSearch(searchInput.trim());
+        else
+            router.push(`${pathname}?search=${searchInput.trim()}`);
+    };
+    const handleClear = () => {
+        setSearchInput('');
+        onClear?.();
+    };
+    return (_jsx(Card, { className: `p-4 ${className || ''}`, children: _jsxs("form", { onSubmit: handleSubmit, 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: placeholder, className: "pr-10" }), searchInput && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: "\u2715" }))] }), _jsx(Button, { type: "submit", children: searchLabel })] }) }));
+}

package/dist/components/standalone/index.d.ts

@@ -0,0 +1,11 @@
+export { ItemCreateForm } from './ItemCreateForm.js';
+export { ItemEditForm } from './ItemEditForm.js';
+export { ListTable } from './ListTable.js';
+export { SearchBar } from './SearchBar.js';
+export { DeleteButton } from './DeleteButton.js';
+export type { ItemCreateFormProps } from './ItemCreateForm.js';
+export type { ItemEditFormProps } from './ItemEditForm.js';
+export type { ListTableProps } from './ListTable.js';
+export type { SearchBarProps } from './SearchBar.js';
+export type { DeleteButtonProps } from './DeleteButton.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/standalone/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/standalone/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGhD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/components/standalone/index.js

@@ -0,0 +1,6 @@
+// Standalone composable components
+export { ItemCreateForm } from './ItemCreateForm.js';
+export { ItemEditForm } from './ItemEditForm.js';
+export { ListTable } from './ListTable.js';
+export { SearchBar } from './SearchBar.js';
+export { DeleteButton } from './DeleteButton.js';

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export { AdminUI } from './components/AdminUI.js';
+export { Dashboard } from './components/Dashboard.js';
+export { Navigation } from './components/Navigation.js';
+export { ListView } from './components/ListView.js';
+export { ListViewClient } from './components/ListViewClient.js';
+export { ItemForm } from './components/ItemForm.js';
+export { ItemFormClient } from './components/ItemFormClient.js';
+export { ConfirmDialog } from './components/ConfirmDialog.js';
+export { LoadingSpinner } from './components/LoadingSpinner.js';
+export { SkeletonLoader, TableSkeleton, FormSkeleton } from './components/SkeletonLoader.js';
+export { TextField, IntegerField, CheckboxField, SelectField, TimestampField, PasswordField, RelationshipField, FieldRenderer, fieldComponentRegistry, registerFieldComponent, getFieldComponent, } from './components/fields/index.js';
+export type { AdminUIProps } from './components/AdminUI.js';
+export type { DashboardProps } from './components/Dashboard.js';
+export type { NavigationProps } from './components/Navigation.js';
+export type { ListViewProps } from './components/ListView.js';
+export type { ListViewClientProps } from './components/ListViewClient.js';
+export type { ItemFormProps } from './components/ItemForm.js';
+export type { ItemFormClientProps } from './components/ItemFormClient.js';
+export type { ConfirmDialogProps } from './components/ConfirmDialog.js';
+export type { LoadingSpinnerProps } from './components/LoadingSpinner.js';
+export type { SkeletonLoaderProps } from './components/SkeletonLoader.js';
+export type { TextFieldProps, IntegerFieldProps, CheckboxFieldProps, SelectFieldProps, TimestampFieldProps, PasswordFieldProps, RelationshipFieldProps, FieldRendererProps, FieldComponent, FieldComponentProps, } from './components/fields/index.js';
+export { ItemCreateForm, ItemEditForm, ListTable, SearchBar, DeleteButton, } from './components/standalone/index.js';
+export type { ItemCreateFormProps, ItemEditFormProps, ListTableProps, SearchBarProps, DeleteButtonProps, } from './components/standalone/index.js';
+export { cn, formatListName, formatFieldName, getFieldDisplayValue } from './lib/utils.js';
+export { generateThemeCSS, getThemeStyleTag, presetThemes } from './lib/theme.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -0,0 +1,19 @@
+// Main components
+export { AdminUI } from './components/AdminUI.js';
+export { Dashboard } from './components/Dashboard.js';
+export { Navigation } from './components/Navigation.js';
+export { ListView } from './components/ListView.js';
+export { ListViewClient } from './components/ListViewClient.js';
+export { ItemForm } from './components/ItemForm.js';
+export { ItemFormClient } from './components/ItemFormClient.js';
+export { ConfirmDialog } from './components/ConfirmDialog.js';
+export { LoadingSpinner } from './components/LoadingSpinner.js';
+export { SkeletonLoader, TableSkeleton, FormSkeleton } from './components/SkeletonLoader.js';
+// Field components
+export { TextField, IntegerField, CheckboxField, SelectField, TimestampField, PasswordField, RelationshipField, FieldRenderer, fieldComponentRegistry, registerFieldComponent, getFieldComponent, } from './components/fields/index.js';
+// Standalone composable components
+export { ItemCreateForm, ItemEditForm, ListTable, SearchBar, DeleteButton, } from './components/standalone/index.js';
+// Utility functions
+export { cn, formatListName, formatFieldName, getFieldDisplayValue } from './lib/utils.js';
+// Theme utilities
+export { generateThemeCSS, getThemeStyleTag, presetThemes } from './lib/theme.js';

package/dist/lib/serializeFieldConfig.d.ts

@@ -0,0 +1,43 @@
+import type { FieldConfig } from '@opensaas/stack-core';
+import type { ComponentType } from 'react';
+/**
+ * Serializable field config for client components
+ * Strips out functions and non-serializable properties
+ */
+export type SerializableFieldConfig = {
+    type: string;
+    label?: string;
+    validation?: {
+        isRequired?: boolean;
+        length?: {
+            min?: number;
+            max?: number;
+        };
+        min?: number;
+        max?: number;
+    };
+    options?: Array<{
+        label: string;
+        value: string;
+    }>;
+    many?: boolean;
+    ref?: string;
+    ui?: {
+        component?: ComponentType<any>;
+        fieldType?: string;
+        [key: string]: unknown;
+    };
+};
+/**
+ * Extract only serializable properties from a single field config
+ * Removes functions (getZodSchema, getPrismaType, getTypeScriptType)
+ * and non-serializable properties (access, hooks, typePatch, valueForClientSerialization)
+ */
+export declare function serializeFieldConfig(fieldConfig: FieldConfig): SerializableFieldConfig;
+/**
+ * Extract only serializable properties from field configs
+ * Removes functions (getZodSchema, getPrismaType, getTypeScriptType)
+ * and non-serializable properties (access, hooks, typePatch)
+ */
+export declare function serializeFieldConfigs(fields: Record<string, FieldConfig>): Record<string, SerializableFieldConfig>;
+//# sourceMappingURL=serializeFieldConfig.d.ts.map

package/dist/lib/serializeFieldConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serializeFieldConfig.d.ts","sourceRoot":"","sources":["../../src/lib/serializeFieldConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE;QACX,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,MAAM,CAAC,EAAE;YAAE,GAAG,CAAC,EAAE,MAAM,CAAC;YAAC,GAAG,CAAC,EAAE,MAAM,CAAA;SAAE,CAAA;QACvC,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,GAAG,CAAC,EAAE,MAAM,CAAA;KACb,CAAA;IACD,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACjD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE;QAEH,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;QAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;CACF,CAAA;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,WAAW,GAAG,uBAAuB,CAsCtF;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAClC,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAQzC"}