@opensaas/stack-ui 0.1.0

package/dist/components/fields/FieldRenderer.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getFieldComponent } from './registry.js';
+import { formatFieldName } from '../../lib/utils.js';
+import { getUrlKey } from '@opensaas/stack-core';
+/**
+ * Internal component that receives the resolved Component
+ */
+function FieldRendererInner({ Component, fieldName, fieldConfig, value, onChange, error, disabled, mode, relationshipItems, relationshipLoading, basePath,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ }) {
+    const label = fieldConfig.label || formatFieldName(fieldName);
+    const isRequired = fieldConfig.validation &&
+        typeof fieldConfig.validation === 'object' &&
+        fieldConfig.validation !== null &&
+        'isRequired' in fieldConfig.validation
+        ? fieldConfig.validation.isRequired
+        : false;
+    // Build props based on field type
+    const baseProps = {
+        name: fieldName,
+        value,
+        onChange,
+        label,
+        error,
+        disabled,
+        required: isRequired,
+        mode,
+    };
+    // Add field-type-specific props
+    const specificProps = {};
+    if (fieldConfig.type === 'select' && 'options' in fieldConfig && fieldConfig.options) {
+        specificProps.options = fieldConfig.options.map((opt) => typeof opt === 'string' ? { label: opt, value: opt } : opt);
+    }
+    if (fieldConfig.type === 'password') {
+        specificProps.showConfirm = mode === 'edit';
+    }
+    if (fieldConfig.type === 'relationship') {
+        specificProps.items = relationshipItems;
+        specificProps.isLoading = relationshipLoading;
+        specificProps.many = fieldConfig.many || false;
+        // Extract related list key from ref (format: 'ListName.fieldName')
+        if (fieldConfig.ref) {
+            const [relatedListName] = fieldConfig.ref.split('.');
+            specificProps.relatedListKey = getUrlKey(relatedListName);
+            specificProps.basePath = basePath;
+        }
+    }
+    // Pass through any UI options from fieldConfig.ui (excluding component and fieldType)
+    if (fieldConfig.ui) {
+        const { _component, _fieldType, ...uiOptions } = fieldConfig.ui;
+        Object.assign(specificProps, uiOptions);
+    }
+    const allProps = { ...baseProps, ...specificProps };
+    return _jsx(Component, { ...allProps });
+}
+/**
+ * Factory component that renders the appropriate field type
+ * based on the field configuration and component registry
+ */
+export function FieldRenderer(props) {
+    const { fieldName, fieldConfig, mode = 'edit' } = props;
+    const label = fieldConfig.label || formatFieldName(fieldName);
+    // Skip rendering ID and timestamp fields in forms
+    if (mode === 'edit' && ['id', 'createdAt', 'updatedAt'].includes(fieldName)) {
+        return null;
+    }
+    // Get component from:
+    // 1. Per-field component override (ui.component)
+    // 2. Custom field type override (ui.fieldType) - uses global registry
+    // 3. Default field type (fieldConfig.type) - uses global registry
+    const Component = fieldConfig.ui?.component ||
+        (fieldConfig.ui?.fieldType
+            ? getFieldComponent(fieldConfig.ui.fieldType)
+            : getFieldComponent(fieldConfig.type));
+    if (!Component) {
+        console.warn(`No component registered for field type: ${fieldConfig.type}`);
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-muted-foreground", children: String(label) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["Unsupported field type: ", fieldConfig.type] })] }));
+    }
+    return _jsx(FieldRendererInner, { ...props, Component: Component });
+}

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

@@ -0,0 +1,15 @@
+export interface IntegerFieldProps {
+    name: string;
+    value: number | null;
+    onChange: (value: number | null) => void;
+    label: string;
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    mode?: 'read' | 'edit';
+    min?: number;
+    max?: number;
+}
+export declare function IntegerField({ name, value, onChange, label, placeholder, error, disabled, required, mode, min, max, }: IntegerFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IntegerField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntegerField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/IntegerField.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,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,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,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,GAAG,EACH,GAAG,GACJ,EAAE,iBAAiB,2CAmCnB"}

package/dist/components/fields/IntegerField.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from '../../primitives/input.js';
+import { Label } from '../../primitives/label.js';
+import { cn } from '../../lib/utils.js';
+export function IntegerField({ name, value, onChange, label, placeholder, error, disabled, required, mode = 'edit', min, max, }) {
+    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 !== null ? 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: "number", value: value ?? '', onChange: (e) => {
+                    const val = e.target.value;
+                    onChange(val === '' ? null : parseInt(val, 10));
+                }, placeholder: placeholder, disabled: disabled, required: required, min: min, max: max, className: cn(error && 'border-destructive') }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/PasswordField.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE,CAAA;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE,GAAG,SAAS,KAAK,IAAI,CAAA;IAClE,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,CAAA;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,WAAkB,GACnB,EAAE,kBAAkB,2CA8HpB"}

package/dist/components/fields/PasswordField.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from '../../primitives/input.js';
+import { Label } from '../../primitives/label.js';
+import { Button } from '../../primitives/button.js';
+import { cn } from '../../lib/utils.js';
+import { useState } from 'react';
+export function PasswordField({ name, value, onChange, label, placeholder, error, disabled, required, mode = 'edit', showConfirm = true, }) {
+    // Check if value is the isSet object
+    const isSetObject = typeof value === 'object' && value !== null && 'isSet' in value;
+    const isPasswordSet = isSetObject ? value.isSet : false;
+    const [isChangingPassword, setIsChangingPassword] = useState(false);
+    const [passwordValue, setPasswordValue] = useState('');
+    const [confirmValue, setConfirmValue] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    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: isPasswordSet ? '••••••••' : 'Not set' })] }));
+    }
+    // If not changing password and it's set, show the button
+    if (!isChangingPassword && isSetObject) {
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: label }), _jsx("div", { children: _jsx(Button, { type: "button", variant: "outline", onClick: () => setIsChangingPassword(true), disabled: disabled, children: isPasswordSet ? 'Change Password' : 'Set Password' }) })] }));
+    }
+    const confirmError = showConfirm && passwordValue !== confirmValue && confirmValue !== ''
+        ? 'Passwords do not match'
+        : undefined;
+    const handleCancel = () => {
+        setIsChangingPassword(false);
+        setPasswordValue('');
+        setConfirmValue('');
+        setShowPassword(false);
+        // Reset to the isSet object
+        if (isSetObject) {
+            onChange(value);
+        }
+    };
+    const handlePasswordChange = (newValue) => {
+        setPasswordValue(newValue);
+        // Update the parent with the actual password string
+        onChange(newValue || undefined);
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: name, children: [label, required && !isPasswordSet && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: name, name: name, type: showPassword ? 'text' : 'password', value: passwordValue, onChange: (e) => handlePasswordChange(e.target.value), placeholder: placeholder, disabled: disabled, required: required && !isPasswordSet, className: cn('pr-10', error && 'border-destructive') }), _jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: showPassword ? '👁️' : '👁️‍🗨️' })] }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }), showConfirm && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${name}-confirm`, children: ["Confirm ", label, required && !isPasswordSet && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsx(Input, { id: `${name}-confirm`, name: `${name}-confirm`, type: showPassword ? 'text' : 'password', value: confirmValue, onChange: (e) => setConfirmValue(e.target.value), placeholder: `Confirm ${placeholder || label.toLowerCase()}`, disabled: disabled, required: required && !isPasswordSet, className: cn(confirmError && 'border-destructive') }), confirmError && _jsx("p", { className: "text-sm text-destructive", children: confirmError })] })), isSetObject && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleCancel, disabled: disabled, children: "Cancel" }) }))] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RelationshipField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/RelationshipField.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAA;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,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,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,SAAiB,EACjB,IAAY,EACZ,cAAc,EACd,QAAQ,GACT,EAAE,sBAAsB,2CAmCxB"}

package/dist/components/fields/RelationshipField.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComboboxField } from './ComboboxField.js';
+import { RelationshipManager } from './RelationshipManager.js';
+export function RelationshipField({ name, value, onChange, label, items, error, disabled, required, mode = 'edit', isLoading = false, many = false, relatedListKey, basePath, }) {
+    // Delegate to specialized components based on cardinality
+    if (many) {
+        return (_jsx(RelationshipManager, { name: name, value: Array.isArray(value) ? value : [], onChange: onChange, label: label, items: items, error: error, disabled: disabled, required: required, mode: mode, isLoading: isLoading, relatedListKey: relatedListKey, basePath: basePath }));
+    }
+    return (_jsx(ComboboxField, { name: name, value: typeof value === 'string' ? value : null, onChange: onChange, label: label, items: items, error: error, disabled: disabled, required: required, mode: mode, isLoading: isLoading }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RelationshipManager.d.ts","sourceRoot":"","sources":["../../../src/components/fields/RelationshipManager.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACnC,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,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EAAE,KAAK,EACX,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,SAAiB,EACjB,cAAc,EACd,QAAmB,GACpB,EAAE,wBAAwB,2CAwI1B"}

package/dist/components/fields/RelationshipManager.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Link from 'next/link';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../../primitives/table.js';
+import { Combobox, ComboboxTrigger, ComboboxContent, ComboboxSearch, ComboboxList, ComboboxEmpty, ComboboxItem, } from '../../primitives/combobox.js';
+import { Button } from '../../primitives/button.js';
+export function RelationshipManager({ name: _name, value, onChange, label, items, error, disabled, required, mode = 'edit', isLoading = false, relatedListKey, basePath = '/admin', }) {
+    const [showConnectModal, setShowConnectModal] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const selectedIds = Array.isArray(value) ? value : [];
+    const selectedItems = items.filter((item) => selectedIds.includes(item.id));
+    const availableItems = items.filter((item) => !selectedIds.includes(item.id));
+    // Read mode
+    if (mode === 'read') {
+        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: selectedItems.length > 0 ? selectedItems.map((item) => item.label).join(', ') : '-' })] }));
+    }
+    // Filter available items based on search
+    const filteredAvailableItems = searchQuery
+        ? availableItems.filter((item) => item.label.toLowerCase().includes(searchQuery.toLowerCase()))
+        : availableItems;
+    const handleRemove = (itemId) => {
+        onChange(selectedIds.filter((id) => id !== itemId));
+    };
+    const handleConnect = (itemId) => {
+        onChange([...selectedIds, itemId]);
+        setShowConnectModal(false);
+        setSearchQuery('');
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-sm font-medium", children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), selectedItems.length > 0 ? (_jsx("div", { className: "rounded-md border border-input", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { className: "w-[100px] text-right", children: "Actions" })] }) }), _jsx(TableBody, { children: selectedItems.map((item) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: relatedListKey ? (_jsx(Link, { href: `${basePath}/${relatedListKey}/${item.id}`, className: "text-primary hover:underline", children: item.label })) : (item.label) }), _jsx(TableCell, { className: "text-right", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleRemove(item.id), disabled: disabled, children: "Remove" }) })] }, item.id))) })] }) })) : (_jsx("div", { className: "rounded-md border border-input border-dashed p-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No items connected. Click \"Connect Existing\" to add items." }) })), _jsx("div", { className: "flex gap-2", children: _jsxs(Combobox, { open: showConnectModal, onOpenChange: setShowConnectModal, children: [_jsx(ComboboxTrigger, { disabled: disabled || isLoading || availableItems.length === 0, className: "h-9 px-3", children: _jsx("span", { children: isLoading ? 'Loading...' : 'Connect Existing' }) }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxSearch, { placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                        }
+                                    } }), _jsx(ComboboxList, { children: filteredAvailableItems.length === 0 ? (_jsx(ComboboxEmpty, { children: availableItems.length === 0
+                                            ? 'All items are already connected'
+                                            : 'No results found' })) : (filteredAvailableItems.map((item) => (_jsx(ComboboxItem, { onClick: () => handleConnect(item.id), children: item.label }, item.id)))) })] })] }) }), error && _jsx("p", { className: "text-sm text-destructive mt-2", children: error })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SelectField.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,gBAAgB;IAC/B,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,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAChD,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,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,GACd,EAAE,gBAAgB,2CAqClB"}

package/dist/components/fields/SelectField.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../primitives/select.js';
+import { Label } from '../../primitives/label.js';
+export function SelectField({ name, value, onChange, label, options, error, disabled, required, mode = 'edit', }) {
+    if (mode === 'read') {
+        const selectedOption = options.find((opt) => opt.value === value);
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-muted-foreground", children: label }), _jsx("p", { className: "text-sm", children: selectedOption?.label || '-' })] }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsxs(Select, { value: value || undefined, onValueChange: (val) => onChange(val || null), disabled: disabled, required: required, children: [_jsx(SelectTrigger, { id: name, className: error ? 'border-destructive' : '', children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsx(SelectContent, { children: options.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+}

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

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

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

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

package/dist/components/fields/TextField.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from '../../primitives/input.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', }) {
+    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 })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimestampField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/TimestampField.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,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,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,GACd,EAAE,mBAAmB,2CAsBrB"}

package/dist/components/fields/TimestampField.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '../../primitives/label.js';
+import { DateTimePicker } from '../../primitives/datetime-picker.js';
+import { format } from 'date-fns';
+export function TimestampField({ name, value, onChange, label, error, disabled, required, mode = 'edit', }) {
+    const dateValue = value ? new Date(value) : null;
+    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: dateValue ? format(dateValue, 'PPpp') : '-' })] }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsx(DateTimePicker, { value: dateValue, onChange: onChange, disabled: disabled }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+}

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

@@ -0,0 +1,23 @@
+export { TextField } from './TextField.js';
+export { IntegerField } from './IntegerField.js';
+export { CheckboxField } from './CheckboxField.js';
+export { SelectField } from './SelectField.js';
+export { TimestampField } from './TimestampField.js';
+export { PasswordField } from './PasswordField.js';
+export { RelationshipField } from './RelationshipField.js';
+export { ComboboxField } from './ComboboxField.js';
+export { RelationshipManager } from './RelationshipManager.js';
+export { FieldRenderer } from './FieldRenderer.js';
+export { fieldComponentRegistry, registerFieldComponent, getFieldComponent } from './registry.js';
+export type { TextFieldProps } from './TextField.js';
+export type { IntegerFieldProps } from './IntegerField.js';
+export type { CheckboxFieldProps } from './CheckboxField.js';
+export type { SelectFieldProps } from './SelectField.js';
+export type { TimestampFieldProps } from './TimestampField.js';
+export type { PasswordFieldProps } from './PasswordField.js';
+export type { RelationshipFieldProps } from './RelationshipField.js';
+export type { ComboboxFieldProps } from './ComboboxField.js';
+export type { RelationshipManagerProps } from './RelationshipManager.js';
+export type { FieldRendererProps } from './FieldRenderer.js';
+export type { FieldComponent, FieldComponentProps } from './registry.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fields/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAGlD,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAGjG,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AACpE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AACxE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/fields/index.js

@@ -0,0 +1,13 @@
+// Field components
+export { TextField } from './TextField.js';
+export { IntegerField } from './IntegerField.js';
+export { CheckboxField } from './CheckboxField.js';
+export { SelectField } from './SelectField.js';
+export { TimestampField } from './TimestampField.js';
+export { PasswordField } from './PasswordField.js';
+export { RelationshipField } from './RelationshipField.js';
+export { ComboboxField } from './ComboboxField.js';
+export { RelationshipManager } from './RelationshipManager.js';
+export { FieldRenderer } from './FieldRenderer.js';
+// Registry for custom field types
+export { fieldComponentRegistry, registerFieldComponent, getFieldComponent } from './registry.js';

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

@@ -0,0 +1,43 @@
+import type { ComponentType } from 'react';
+/**
+ * Base props that all field components must accept
+ * Field components can extend this with additional field-specific props
+ */
+export type FieldComponentProps = {
+    name: string;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    label: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    mode?: 'read' | 'edit';
+};
+/**
+ * Type for field component
+ * Field components must accept props that extend FieldComponentProps.
+ * The registry uses ComponentType<any> because components have different
+ * specific prop types (e.g., value: string vs value: number), but all
+ * must include the base FieldComponentProps structure.
+ */
+export type FieldComponent = ComponentType<FieldComponentProps & Record<string, unknown>>;
+/**
+ * Registry mapping field types to their default UI components
+ * This can be extended for custom field types
+ * Uses ComponentType<any> to allow components with more specific prop types
+ */
+export declare const fieldComponentRegistry: Record<string, ComponentType<any>>;
+/**
+ * Register a custom field component for a field type
+ * Useful for adding support for custom field types
+ *
+ * @param fieldType - The field type identifier
+ * @param component - A React component that accepts FieldComponentProps (and optionally additional props)
+ */
+export declare function registerFieldComponent(fieldType: string, component: ComponentType<any>): void;
+/**
+ * Get the component for a field type
+ * Returns undefined if no component is registered
+ */
+export declare function getFieldComponent(fieldType: string): ComponentType<any> | undefined;
+//# sourceMappingURL=registry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../src/components/fields/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAS1C;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,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,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAEzF;;;;GAIG;AAEH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAQrE,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,EAEjB,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,GAC5B,IAAI,CAEN;AAED;;;GAGG;AAEH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAEnF"}

package/dist/components/fields/registry.js

@@ -0,0 +1,42 @@
+import { TextField } from './TextField.js';
+import { IntegerField } from './IntegerField.js';
+import { CheckboxField } from './CheckboxField.js';
+import { SelectField } from './SelectField.js';
+import { TimestampField } from './TimestampField.js';
+import { PasswordField } from './PasswordField.js';
+import { RelationshipField } from './RelationshipField.js';
+/**
+ * Registry mapping field types to their default UI components
+ * This can be extended for custom field types
+ * Uses ComponentType<any> to allow components with more specific prop types
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const fieldComponentRegistry = {
+    text: TextField,
+    integer: IntegerField,
+    checkbox: CheckboxField,
+    select: SelectField,
+    timestamp: TimestampField,
+    password: PasswordField,
+    relationship: RelationshipField,
+};
+/**
+ * Register a custom field component for a field type
+ * Useful for adding support for custom field types
+ *
+ * @param fieldType - The field type identifier
+ * @param component - A React component that accepts FieldComponentProps (and optionally additional props)
+ */
+export function registerFieldComponent(fieldType, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+component) {
+    fieldComponentRegistry[fieldType] = component;
+}
+/**
+ * Get the component for a field type
+ * Returns undefined if no component is registered
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getFieldComponent(fieldType) {
+    return fieldComponentRegistry[fieldType];
+}

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

@@ -0,0 +1,35 @@
+export interface DeleteButtonProps {
+    onDelete: () => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    itemName?: string;
+    confirmTitle?: string;
+    confirmMessage?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    buttonLabel?: string;
+    variant?: 'danger' | 'warning';
+    buttonVariant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+    size?: 'default' | 'sm' | 'lg' | 'icon';
+    className?: string;
+    disabled?: boolean;
+}
+/**
+ * Standalone delete button with confirmation dialog
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <DeleteButton
+ *   onDelete={async () => {
+ *     await deletePost(postId);
+ *     return { success: true };
+ *   }}
+ *   itemName="post"
+ *   confirmMessage="This will permanently delete the post and all its comments."
+ * />
+ * ```
+ */
+export declare function DeleteButton({ onDelete, itemName, confirmTitle, confirmMessage, confirmLabel, cancelLabel, buttonLabel, variant, buttonVariant, size, className, disabled, }: DeleteButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DeleteButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../src/components/standalone/DeleteButton.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAC9B,aAAa,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IACtF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAiB,EACjB,YAAY,EACZ,cAAc,EACd,YAAuB,EACvB,WAAsB,EACtB,WAAsB,EACtB,OAAkB,EAClB,aAA6B,EAC7B,IAAgB,EAChB,SAAS,EACT,QAAgB,GACjB,EAAE,iBAAiB,2CA8DnB"}

package/dist/components/standalone/DeleteButton.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../primitives/button.js';
+import { ConfirmDialog } from '../ConfirmDialog.js';
+import { LoadingSpinner } from '../LoadingSpinner.js';
+/**
+ * Standalone delete button with confirmation dialog
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <DeleteButton
+ *   onDelete={async () => {
+ *     await deletePost(postId);
+ *     return { success: true };
+ *   }}
+ *   itemName="post"
+ *   confirmMessage="This will permanently delete the post and all its comments."
+ * />
+ * ```
+ */
+export function DeleteButton({ onDelete, itemName = 'item', confirmTitle, confirmMessage, confirmLabel = 'Delete', cancelLabel = 'Cancel', buttonLabel = 'Delete', variant = 'danger', buttonVariant = 'destructive', size = 'default', className, disabled = false, }) {
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [isPending, setIsPending] = useState(false);
+    const [error, setError] = useState(null);
+    const handleDelete = async () => {
+        setShowConfirm(false);
+        setIsPending(true);
+        setError(null);
+        try {
+            const result = await onDelete();
+            if (!result.success) {
+                setError(result.error || `Failed to delete ${itemName}`);
+            }
+        }
+        catch (err) {
+            setError(err.message || `Failed to delete ${itemName}`);
+        }
+        finally {
+            setIsPending(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: buttonVariant, size: size, onClick: () => setShowConfirm(true), disabled: disabled || isPending, className: className, children: [isPending && (_jsx(LoadingSpinner, { size: "sm", className: "border-primary-foreground border-t-transparent mr-2" })), buttonLabel] }), error && (_jsx("div", { className: "mt-2 bg-destructive/10 border border-destructive text-destructive rounded-lg p-3", children: _jsx("p", { className: "text-sm font-medium", children: error }) })), _jsx(ConfirmDialog, { isOpen: showConfirm, title: confirmTitle || `Delete ${itemName}`, message: confirmMessage ||
+                    `Are you sure you want to delete this ${itemName}? This action cannot be undone.`, confirmLabel: confirmLabel, cancelLabel: cancelLabel, variant: variant, onConfirm: handleDelete, onCancel: () => setShowConfirm(false) })] }));
+}