@nccirtu/tablefy 0.8.4 → 0.9.1

package/dist/index.esm.js

@@ -1,18 +1,26 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@/components/ui/table';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Search, X, Columns, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink, MoreHorizontal } from 'lucide-react';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { Search, X, Columns, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink, MoreHorizontal, CalendarIcon, Upload, File, GripVertical, Trash2, Plus, Check } from 'lucide-react';
+import { Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
-import { Checkbox } from '@/components/ui/checkbox';
+import { Checkbox as Checkbox$1 } from '@/components/ui/checkbox';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 import { Progress } from '@/components/ui/progress';
 import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@/components/ui/alert-dialog';
+import { Textarea as Textarea$1 } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { RadioGroup as RadioGroup$1, RadioGroupItem } from '@/components/ui/radio-group';
+import { Label } from '@/components/ui/label';
+import { Calendar as Calendar$1 } from '@/components/ui/calendar';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 
 function DataTableHeader({ title, description, actions = [], search, searchValue = "", onSearchChange, table, selectedCount = 0, enableColumnVisibility = false, columnVisibilityLabel = "Spalten", className, }) {
     const normalActions = actions.filter((a) => !a.bulk && !a.hidden);
@@ -72,7 +80,7 @@ function DataTablePagination({ table, config, className, }) {
     if (!config?.enabled)
         return null;
     const { showPageInfo = true, showPageSizeSelector = true, pageSizeOptions = [10, 20, 30, 50, 100], } = config;
-    return (jsxs("div", { className: cn("flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between", className), children: [jsx("div", { className: "text-sm text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length > 0 ? (jsxs("span", { children: [table.getFilteredSelectedRowModel().rows.length, " von", " ", table.getFilteredRowModel().rows.length, " Zeile(n) ausgew\u00E4hlt"] })) : showPageInfo ? (jsxs("span", { children: [table.getFilteredRowModel().rows.length, " Eintr\u00E4ge"] })) : null }), jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-6", children: [showPageSizeSelector && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Zeilen pro Seite" }), jsxs(Select, { value: `${table.getState().pagination.pageSize}`, onValueChange: (value) => table.setPageSize(Number(value)), children: [jsx(SelectTrigger, { className: "h-8 w-[70px]", children: jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }), jsx(SelectContent, { side: "top", children: pageSizeOptions.map((pageSize) => (jsx(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize))) })] })] })), showPageInfo && (jsxs("div", { className: "text-sm text-muted-foreground whitespace-nowrap", children: ["Seite", " ", table.getPageCount() > 0
+    return (jsxs("div", { className: cn("flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between", className), children: [jsx("div", { className: "text-sm text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length > 0 ? (jsxs("span", { children: [table.getFilteredSelectedRowModel().rows.length, " von", " ", table.getFilteredRowModel().rows.length, " Zeile(n) ausgew\u00E4hlt"] })) : showPageInfo ? (jsxs("span", { children: [table.getFilteredRowModel().rows.length, " Eintr\u00E4ge"] })) : null }), jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-6", children: [showPageSizeSelector && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Zeilen pro Seite" }), jsxs(Select$1, { value: `${table.getState().pagination.pageSize}`, onValueChange: (value) => table.setPageSize(Number(value)), children: [jsx(SelectTrigger, { className: "h-8 w-[70px]", children: jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }), jsx(SelectContent, { side: "top", children: pageSizeOptions.map((pageSize) => (jsx(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize))) })] })] })), showPageInfo && (jsxs("div", { className: "text-sm text-muted-foreground whitespace-nowrap", children: ["Seite", " ", table.getPageCount() > 0
                                 ? table.getState().pagination.pageIndex + 1
                                 : 0, " ", "von ", Math.max(table.getPageCount(), 0)] })), jsxs("div", { className: "flex items-center gap-1", children: [jsxs(Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: [jsx(ChevronsLeft, { className: "h-4 w-4" }), jsx("span", { className: "sr-only", children: "Erste Seite" })] }), jsxs(Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [jsx(ChevronLeft, { className: "h-4 w-4" }), jsx("span", { className: "sr-only", children: "Vorherige Seite" })] }), jsxs(Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [jsx(ChevronRight, { className: "h-4 w-4" }), jsx("span", { className: "sr-only", children: "N\u00E4chste Seite" })] }), jsxs(Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), children: [jsx(ChevronsRight, { className: "h-4 w-4" }), jsx("span", { className: "sr-only", children: "Letzte Seite" })] })] })] })] }));
 }
@@ -669,9 +677,9 @@ class CheckboxColumn {
     build() {
         return {
             id: "select",
-            header: ({ table }) => (jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() ||
+            header: ({ table }) => (jsx(Checkbox$1, { checked: table.getIsAllPageRowsSelected() ||
                     (table.getIsSomePageRowsSelected() && "indeterminate"), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value), "aria-label": "Alle ausw\u00E4hlen" })),
-            cell: ({ row }) => (jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": "Zeile ausw\u00E4hlen" })),
+            cell: ({ row }) => (jsx(Checkbox$1, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": "Zeile ausw\u00E4hlen" })),
             enableSorting: false,
             enableHiding: false,
         };
@@ -1559,7 +1567,7 @@ class SelectColumn extends BaseColumn {
                         onValueChange(row.original, newValue);
                     }
                 };
-                return (jsxs(Select, { value: localValue, onValueChange: handleValueChange, disabled: isDisabled, children: [jsx(SelectTrigger, { className: cn("h-8", this.config.cellClassName), children: jsx(SelectValue, { placeholder: placeholder || "Select..." }) }), jsx(SelectContent, { children: options?.map((option, index) => (jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, index))) })] }));
+                return (jsxs(Select$1, { value: localValue, onValueChange: handleValueChange, disabled: isDisabled, children: [jsx(SelectTrigger, { className: cn("h-8", this.config.cellClassName), children: jsx(SelectValue, { placeholder: placeholder || "Select..." }) }), jsx(SelectContent, { children: options?.map((option, index) => (jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, index))) })] }));
             },
         };
     }
@@ -1857,5 +1865,1038 @@ function ConfirmProvider({ children }) {
     return (jsxs(Fragment, { children: [children, jsx(AlertDialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxs(AlertDialogContent, { className: "max-w-md", children: [jsxs(AlertDialogHeader, { children: [jsx(AlertDialogTitle, { className: "text-center", children: title || "Bestätigung erforderlich" }), description && (jsx(AlertDialogDescription, { className: "text-center", children: description }))] }), image && (jsx("div", { className: "flex justify-center py-4", children: jsx("img", { src: image, alt: "Confirmation", className: "h-24 w-24 object-contain" }) })), icon && !image && (jsx("div", { className: "flex justify-center py-4 text-6xl", children: icon })), jsxs(AlertDialogFooter, { className: "flex flex-row !justify-between w-full", children: [jsx(AlertDialogCancel, { onClick: handleCancel, className: "mt-0", children: cancelLabel || "Abbrechen" }), jsx(AlertDialogAction, { onClick: handleConfirm, variant: variant === "destructive" ? "destructive" : "default", children: confirmLabel || "Bestätigen" })] })] }) })] }));
 }
 
-export { ActionsColumn, AvatarGroupColumn, BadgeColumn, ButtonColumn, CheckboxColumn, ConfirmProvider, DataTable, DataTableSchema, DateColumn, DropdownColumn, EmptyStateBuilder, EnumColumn, IconColumn, ImageColumn, InputColumn, LinkColumn, NumberColumn, ProgressColumn, SelectColumn, TableSchema, TextColumn, ActionsColumn as actionsColumn, AvatarGroupColumn as avatarGroupColumn, BadgeColumn as badgeColumn, ButtonColumn as buttonColumn, CheckboxColumn as checkboxColumn, confirm, DateColumn as dateColumn, DropdownColumn as dropdownColumn, EnumColumn as enumColumn, IconColumn as iconColumn, InputColumn as inputColumn, TextColumn as textColumn };
+class ActionsBuilder {
+    actionsList = [];
+    submit(opts = {}) {
+        this.actionsList.push({
+            type: "submit",
+            label: opts.label || "Submit",
+            variant: opts.variant || "default",
+            ...opts,
+        });
+        return this;
+    }
+    cancel(opts = {}) {
+        this.actionsList.push({
+            type: "cancel",
+            label: opts.label || "Cancel",
+            variant: opts.variant || "outline",
+            ...opts,
+        });
+        return this;
+    }
+    custom(opts) {
+        this.actionsList.push({ ...opts, type: "custom" });
+        return this;
+    }
+    build() {
+        return [...this.actionsList];
+    }
+}
+
+/**
+ * Form Schema Builder
+ * Fluent API for building complete form configurations
+ */
+class FormSchema {
+    fieldBuilders = [];
+    schemaConfig = {};
+    static make() {
+        return new FormSchema();
+    }
+    // --- Configuration ---
+    title(title) {
+        this.schemaConfig.title = title;
+        return this;
+    }
+    description(description) {
+        this.schemaConfig.description = description;
+        return this;
+    }
+    columns(columns) {
+        this.schemaConfig.columns = columns;
+        return this;
+    }
+    bordered(bordered = true) {
+        this.schemaConfig.bordered = bordered;
+        return this;
+    }
+    spacing(spacing) {
+        this.schemaConfig.spacing = spacing;
+        return this;
+    }
+    disabled(disabled) {
+        this.schemaConfig.disabled = disabled;
+        return this;
+    }
+    // --- Fields ---
+    fields(...builders) {
+        this.fieldBuilders.push(...builders);
+        return this;
+    }
+    // --- Layout ---
+    sections(...sections) {
+        this.schemaConfig.sections = sections.map((s) => s.build());
+        return this;
+    }
+    tabs(...tabs) {
+        this.schemaConfig.tabs = tabs.map((t) => t.build());
+        return this;
+    }
+    wizard(...steps) {
+        this.schemaConfig.wizardSteps = steps.map((s) => s.build());
+        return this;
+    }
+    // --- Actions ---
+    actions(fn) {
+        const builder = new ActionsBuilder();
+        this.schemaConfig.actions = fn(builder).build();
+        return this;
+    }
+    actionsPosition(position) {
+        this.schemaConfig.actionsPosition = position;
+        return this;
+    }
+    // --- Build ---
+    build() {
+        const fields = this.fieldBuilders.map((b) => b.build());
+        return {
+            fields,
+            config: {
+                ...this.schemaConfig,
+                fields,
+            },
+        };
+    }
+}
+
+class SectionBuilder {
+    sectionConfig;
+    constructor(title) {
+        this.sectionConfig = {
+            id: title.toLowerCase().replace(/\s+/g, "-"),
+            title,
+            fields: [],
+            columns: 1,
+            collapsible: false,
+            collapsed: false,
+        };
+    }
+    static make(title) {
+        return new SectionBuilder(title);
+    }
+    id(id) {
+        this.sectionConfig.id = id;
+        return this;
+    }
+    description(description) {
+        this.sectionConfig.description = description;
+        return this;
+    }
+    fields(fields) {
+        this.sectionConfig.fields = fields;
+        return this;
+    }
+    columns(columns) {
+        this.sectionConfig.columns = columns;
+        return this;
+    }
+    collapsible(collapsible = true) {
+        this.sectionConfig.collapsible = collapsible;
+        return this;
+    }
+    collapsed(collapsed = true) {
+        this.sectionConfig.collapsed = collapsed;
+        this.sectionConfig.collapsible = true;
+        return this;
+    }
+    icon(icon) {
+        this.sectionConfig.icon = icon;
+        return this;
+    }
+    hidden(fn) {
+        this.sectionConfig.hidden = fn;
+        return this;
+    }
+    build() {
+        return { ...this.sectionConfig };
+    }
+}
+
+class TabBuilder {
+    tabConfig;
+    constructor(label) {
+        this.tabConfig = {
+            id: label.toLowerCase().replace(/\s+/g, "-"),
+            label,
+        };
+    }
+    static make(label) {
+        return new TabBuilder(label);
+    }
+    id(id) {
+        this.tabConfig.id = id;
+        return this;
+    }
+    icon(icon) {
+        this.tabConfig.icon = icon;
+        return this;
+    }
+    fields(fields) {
+        this.tabConfig.fields = fields;
+        return this;
+    }
+    sections(...sections) {
+        this.tabConfig.sections = sections.map((s) => s.build());
+        return this;
+    }
+    badge(badge) {
+        this.tabConfig.badge = badge;
+        return this;
+    }
+    disabled(fn) {
+        this.tabConfig.disabled = fn;
+        return this;
+    }
+    build() {
+        return { ...this.tabConfig };
+    }
+}
+
+class WizardStep {
+    stepConfig;
+    constructor(label) {
+        this.stepConfig = {
+            id: label.toLowerCase().replace(/\s+/g, "-"),
+            label,
+        };
+    }
+    static make(label) {
+        return new WizardStep(label);
+    }
+    id(id) {
+        this.stepConfig.id = id;
+        return this;
+    }
+    description(description) {
+        this.stepConfig.description = description;
+        return this;
+    }
+    icon(icon) {
+        this.stepConfig.icon = icon;
+        return this;
+    }
+    fields(fields) {
+        this.stepConfig.fields = fields;
+        return this;
+    }
+    sections(...sections) {
+        this.stepConfig.sections = sections.map((s) => s.build());
+        return this;
+    }
+    canProceed(fn) {
+        this.stepConfig.canProceed = fn;
+        return this;
+    }
+    beforeNext(fn) {
+        this.stepConfig.beforeNext = fn;
+        return this;
+    }
+    build() {
+        return { ...this.stepConfig };
+    }
+}
+
+class BaseField {
+    config;
+    constructor(name) {
+        this.config = {
+            name,
+            required: false,
+            disabled: false,
+            readOnly: false,
+            hidden: false,
+            columnSpan: 1,
+            rules: [],
+            dependsOn: [],
+        };
+    }
+    // --- Fluent API ---
+    label(label) {
+        this.config.label = label;
+        return this;
+    }
+    placeholder(placeholder) {
+        this.config.placeholder = placeholder;
+        return this;
+    }
+    helperText(text) {
+        this.config.helperText = text;
+        return this;
+    }
+    required(required = true) {
+        this.config.required = required;
+        if (required &&
+            !this.config.rules?.some((r) => r.type === "required")) {
+            this.config.rules = [
+                ...(this.config.rules || []),
+                {
+                    type: "required",
+                    message: `${this.config.label || this.config.name} is required`,
+                },
+            ];
+        }
+        return this;
+    }
+    disabled(disabled = true) {
+        this.config.disabled = disabled;
+        return this;
+    }
+    readOnly(readOnly = true) {
+        this.config.readOnly = readOnly;
+        return this;
+    }
+    hidden(hidden = true) {
+        this.config.hidden = hidden;
+        return this;
+    }
+    default(value) {
+        this.config.defaultValue = value;
+        return this;
+    }
+    columnSpan(span) {
+        this.config.columnSpan = span;
+        return this;
+    }
+    className(className) {
+        this.config.className = className;
+        return this;
+    }
+    rules(rules) {
+        this.config.rules = [...(this.config.rules || []), ...rules];
+        return this;
+    }
+    zodSchema(schema) {
+        this.config.zodSchema = schema;
+        return this;
+    }
+    dependsOn(field, condition, effect = "show", effectValue) {
+        this.config.dependsOn = [
+            ...(this.config.dependsOn || []),
+            { field, condition, effect, effectValue },
+        ];
+        return this;
+    }
+    reactive(reactive = true) {
+        this.config.reactive = reactive;
+        return this;
+    }
+    // --- Build ---
+    build() {
+        return {
+            name: this.config.name,
+            type: this.fieldType,
+            config: { ...this.config },
+            render: (props) => this.renderField(props),
+        };
+    }
+}
+
+class TextInput extends BaseField {
+    fieldType = "text";
+    static make(name) {
+        return new TextInput(name);
+    }
+    type(type) {
+        this.config.type = type;
+        return this;
+    }
+    email() {
+        return this.type("email");
+    }
+    password() {
+        return this.type("password");
+    }
+    number() {
+        return this.type("number");
+    }
+    url() {
+        return this.type("url");
+    }
+    tel() {
+        return this.type("tel");
+    }
+    minLength(min) {
+        this.config.minLength = min;
+        this.config.rules = [
+            ...(this.config.rules || []),
+            {
+                type: "min",
+                value: min,
+                message: `${this.config.label || this.config.name} must be at least ${min} characters`,
+            },
+        ];
+        return this;
+    }
+    maxLength(max) {
+        this.config.maxLength = max;
+        this.config.rules = [
+            ...(this.config.rules || []),
+            {
+                type: "max",
+                value: max,
+                message: `${this.config.label || this.config.name} must be at most ${max} characters`,
+            },
+        ];
+        return this;
+    }
+    prefix(prefix) {
+        this.config.prefix = prefix;
+        return this;
+    }
+    suffix(suffix) {
+        this.config.suffix = suffix;
+        return this;
+    }
+    autocomplete(value) {
+        this.config.autocomplete = value;
+        return this;
+    }
+    renderField({ value, onChange, onBlur, error, disabled, }) {
+        const { type, placeholder, maxLength, readOnly, autocomplete, className, prefix, suffix, } = this.config;
+        const input = (jsx(Input, { type: type || "text", value: value ?? "", onChange: (e) => onChange(type === "number" ? Number(e.target.value) : e.target.value), onBlur: onBlur, placeholder: placeholder, maxLength: maxLength, disabled: disabled, readOnly: readOnly, autoComplete: autocomplete, className: cn(error && "border-destructive", className) }));
+        if (prefix || suffix) {
+            return (jsxs("div", { className: "flex items-center gap-2", children: [prefix && (jsx("span", { className: "text-sm text-muted-foreground", children: prefix })), input, suffix && (jsx("span", { className: "text-sm text-muted-foreground", children: suffix }))] }));
+        }
+        return input;
+    }
+}
+
+class Textarea extends BaseField {
+    fieldType = "textarea";
+    constructor(name) {
+        super(name);
+        this.config.rows = 3;
+    }
+    static make(name) {
+        return new Textarea(name);
+    }
+    rows(rows) {
+        this.config.rows = rows;
+        return this;
+    }
+    minLength(min) {
+        this.config.minLength = min;
+        this.config.rules = [
+            ...(this.config.rules || []),
+            {
+                type: "min",
+                value: min,
+                message: `${this.config.label || this.config.name} must be at least ${min} characters`,
+            },
+        ];
+        return this;
+    }
+    maxLength(max) {
+        this.config.maxLength = max;
+        this.config.rules = [
+            ...(this.config.rules || []),
+            {
+                type: "max",
+                value: max,
+                message: `${this.config.label || this.config.name} must be at most ${max} characters`,
+            },
+        ];
+        return this;
+    }
+    autoResize(autoResize = true) {
+        this.config.autoResize = autoResize;
+        return this;
+    }
+    renderField({ value, onChange, onBlur, error, disabled, }) {
+        const { placeholder, rows, maxLength, readOnly, className } = this.config;
+        return (jsx(Textarea$1, { value: value ?? "", onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: placeholder, rows: rows, maxLength: maxLength, disabled: disabled, readOnly: readOnly, className: cn(error && "border-destructive", className) }));
+    }
+}
+
+class Select extends BaseField {
+    fieldType = "select";
+    constructor(name) {
+        super(name);
+        this.config.options = [];
+        this.config.multiple = false;
+        this.config.searchable = false;
+        this.config.clearable = false;
+    }
+    static make(name) {
+        return new Select(name);
+    }
+    options(options) {
+        this.config.options = options;
+        return this;
+    }
+    multiple(multiple = true) {
+        this.config.multiple = multiple;
+        return this;
+    }
+    searchable(searchable = true) {
+        this.config.searchable = searchable;
+        return this;
+    }
+    clearable(clearable = true) {
+        this.config.clearable = clearable;
+        return this;
+    }
+    maxItems(max) {
+        this.config.maxItems = max;
+        return this;
+    }
+    loadOptions(fn) {
+        this.config.loadOptions = fn;
+        return this;
+    }
+    renderField({ value, onChange, error, disabled, data, }) {
+        const cfg = this.config;
+        const resolvedOptions = typeof cfg.options === "function" ? cfg.options(data) : cfg.options;
+        return (jsxs(Select$1, { value: value ?? "", onValueChange: onChange, disabled: disabled, children: [jsx(SelectTrigger, { className: cn(error && "border-destructive", cfg.className), children: jsx(SelectValue, { placeholder: cfg.placeholder || "Select..." }) }), jsx(SelectContent, { children: resolvedOptions.map((opt) => (jsx(SelectItem, { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) })] }));
+    }
+}
+
+class Checkbox extends BaseField {
+    fieldType = "checkbox";
+    static make(name) {
+        return new Checkbox(name);
+    }
+    renderField({ value, onChange, error, disabled, }) {
+        const { className } = this.config;
+        return (jsxs("div", { className: cn("flex items-center space-x-2", className), children: [jsx(Checkbox$1, { id: this.config.name, checked: !!value, onCheckedChange: (checked) => onChange(!!checked), disabled: disabled, className: cn(error && "border-destructive") }), this.config.label && (jsx("label", { htmlFor: this.config.name, className: cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", error && "text-destructive"), children: this.config.label }))] }));
+    }
+}
+
+class Toggle extends BaseField {
+    fieldType = "toggle";
+    static make(name) {
+        return new Toggle(name);
+    }
+    onLabel(label) {
+        this.config.onLabel = label;
+        return this;
+    }
+    offLabel(label) {
+        this.config.offLabel = label;
+        return this;
+    }
+    renderField({ value, onChange, error, disabled, }) {
+        const { onLabel, offLabel, className } = this.config;
+        const displayLabel = value ? onLabel : offLabel;
+        return (jsxs("div", { className: cn("flex items-center space-x-2", className), children: [jsx(Switch, { id: this.config.name, checked: !!value, onCheckedChange: (checked) => onChange(checked), disabled: disabled, className: cn(error && "border-destructive") }), displayLabel && (jsx("label", { htmlFor: this.config.name, className: "text-sm text-muted-foreground", children: displayLabel }))] }));
+    }
+}
+
+class RadioGroup extends BaseField {
+    fieldType = "radio-group";
+    constructor(name) {
+        super(name);
+        this.config.options = [];
+        this.config.orientation = "vertical";
+    }
+    static make(name) {
+        return new RadioGroup(name);
+    }
+    options(options) {
+        this.config.options = options;
+        return this;
+    }
+    orientation(orientation) {
+        this.config.orientation = orientation;
+        return this;
+    }
+    horizontal() {
+        return this.orientation("horizontal");
+    }
+    vertical() {
+        return this.orientation("vertical");
+    }
+    renderField({ value, onChange, error, disabled, }) {
+        const cfg = this.config;
+        const isHorizontal = cfg.orientation === "horizontal";
+        return (jsx(RadioGroup$1, { value: value ?? "", onValueChange: onChange, disabled: disabled, className: cn(isHorizontal ? "flex flex-row gap-4" : "flex flex-col gap-2", cfg.className), children: cfg.options.map((opt) => (jsxs("div", { className: "flex items-center space-x-2", children: [jsx(RadioGroupItem, { value: opt.value, id: `${cfg.name}-${opt.value}`, disabled: opt.disabled, className: cn(error && "border-destructive") }), jsx(Label, { htmlFor: `${cfg.name}-${opt.value}`, className: "text-sm font-normal", children: opt.label })] }, opt.value))) }));
+    }
+}
+
+class DatePicker extends BaseField {
+    fieldType = "date-picker";
+    constructor(name) {
+        super(name);
+        this.config.format = "PPP";
+        this.config.includeTime = false;
+        this.config.locale = "en-US";
+    }
+    static make(name) {
+        return new DatePicker(name);
+    }
+    minDate(date) {
+        this.config.minDate = date;
+        return this;
+    }
+    maxDate(date) {
+        this.config.maxDate = date;
+        return this;
+    }
+    format(format) {
+        this.config.format = format;
+        return this;
+    }
+    includeTime(includeTime = true) {
+        this.config.includeTime = includeTime;
+        if (includeTime) {
+            this.fieldType = "date-time-picker";
+        }
+        return this;
+    }
+    locale(locale) {
+        this.config.locale = locale;
+        return this;
+    }
+    renderField({ value, onChange, error, disabled, data, }) {
+        const { placeholder, className, locale } = this.config;
+        const resolvedMinDate = typeof this.config.minDate === "function"
+            ? this.config.minDate(data)
+            : this.config.minDate;
+        const resolvedMaxDate = typeof this.config.maxDate === "function"
+            ? this.config.maxDate(data)
+            : this.config.maxDate;
+        const dateValue = value ? new Date(value) : undefined;
+        const formatDate = (date) => {
+            return date.toLocaleDateString(locale || "en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+            });
+        };
+        return (jsxs(Popover, { children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { variant: "outline", disabled: disabled, className: cn("w-full justify-start text-left font-normal", !dateValue && "text-muted-foreground", error && "border-destructive", className), children: [jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), dateValue ? formatDate(dateValue) : placeholder || "Pick a date"] }) }), jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: jsx(Calendar$1, { mode: "single", selected: dateValue, onSelect: (date) => onChange(date ? date.toISOString().split("T")[0] : ""), disabled: (date) => {
+                            if (resolvedMinDate && date < resolvedMinDate)
+                                return true;
+                            if (resolvedMaxDate && date > resolvedMaxDate)
+                                return true;
+                            return false;
+                        }, initialFocus: true }) })] }));
+    }
+}
+
+class Hidden extends BaseField {
+    fieldType = "hidden";
+    static make(name) {
+        return new Hidden(name);
+    }
+    renderField({ value }) {
+        return jsx("input", { type: "hidden", name: this.config.name, value: value ?? "" });
+    }
+}
+
+class FileUpload extends BaseField {
+    fieldType = "file-upload";
+    constructor(name) {
+        super(name);
+        this.config.multiple = false;
+        this.config.preview = true;
+        this.config.maxFiles = 1;
+    }
+    static make(name) {
+        return new FileUpload(name);
+    }
+    accept(accept) {
+        this.config.accept = accept;
+        return this;
+    }
+    maxSize(bytes) {
+        this.config.maxSize = bytes;
+        return this;
+    }
+    multiple(multiple = true) {
+        this.config.multiple = multiple;
+        return this;
+    }
+    maxFiles(max) {
+        this.config.maxFiles = max;
+        return this;
+    }
+    preview(preview = true) {
+        this.config.preview = preview;
+        return this;
+    }
+    image() {
+        return this.accept("image/*");
+    }
+    pdf() {
+        return this.accept("application/pdf");
+    }
+    renderField({ value, onChange, error, disabled, }) {
+        const cfg = this.config;
+        const inputRef = useRef(null);
+        const [dragOver, setDragOver] = useState(false);
+        const files = Array.isArray(value) ? value : value ? [value] : [];
+        const handleFiles = (fileList) => {
+            if (!fileList)
+                return;
+            const newFiles = Array.from(fileList);
+            if (cfg.maxSize) {
+                const oversized = newFiles.find((f) => f.size > cfg.maxSize);
+                if (oversized)
+                    return;
+            }
+            if (cfg.multiple) {
+                const combined = [...files, ...newFiles].slice(0, cfg.maxFiles);
+                onChange(combined);
+            }
+            else {
+                onChange(newFiles[0] || null);
+            }
+        };
+        const removeFile = (index) => {
+            if (cfg.multiple) {
+                const updated = files.filter((_, i) => i !== index);
+                onChange(updated.length ? updated : null);
+            }
+            else {
+                onChange(null);
+            }
+        };
+        return (jsxs("div", { className: cn("space-y-2", cfg.className), children: [jsxs("div", { className: cn("flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors", dragOver
+                        ? "border-primary bg-primary/5"
+                        : "border-muted-foreground/25", error && "border-destructive", disabled && "cursor-not-allowed opacity-50"), onDragOver: (e) => {
+                        e.preventDefault();
+                        if (!disabled)
+                            setDragOver(true);
+                    }, onDragLeave: () => setDragOver(false), onDrop: (e) => {
+                        e.preventDefault();
+                        setDragOver(false);
+                        if (!disabled)
+                            handleFiles(e.dataTransfer.files);
+                    }, children: [jsx(Upload, { className: "mb-2 h-8 w-8 text-muted-foreground" }), jsxs("p", { className: "text-sm text-muted-foreground", children: ["Drag & drop or", " ", jsx("button", { type: "button", className: "text-primary underline", onClick: () => inputRef.current?.click(), disabled: disabled, children: "browse" })] }), cfg.accept && (jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Accepted: ", cfg.accept] })), jsx("input", { ref: inputRef, type: "file", accept: cfg.accept, multiple: cfg.multiple, onChange: (e) => handleFiles(e.target.files), className: "hidden", disabled: disabled })] }), files.length > 0 && (jsx("ul", { className: "space-y-1", children: files.map((file, index) => (jsxs("li", { className: "flex items-center justify-between rounded-md border px-3 py-2 text-sm", children: [jsxs("span", { className: "flex items-center gap-2 truncate", children: [jsx(File, { className: "h-4 w-4 text-muted-foreground" }), file.name] }), jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 w-6 p-0", onClick: () => removeFile(index), disabled: disabled, children: jsx(X, { className: "h-3 w-3" }) })] }, index))) }))] }));
+    }
+}
+
+class CheckboxGroup extends BaseField {
+    fieldType = "checkbox-group";
+    constructor(name) {
+        super(name);
+        this.config.options = [];
+        this.config.columns = 1;
+    }
+    static make(name) {
+        return new CheckboxGroup(name);
+    }
+    options(options) {
+        this.config.options = options;
+        return this;
+    }
+    columns(columns) {
+        this.config.columns = columns;
+        return this;
+    }
+    renderField({ value, onChange, error, disabled, }) {
+        const cfg = this.config;
+        const selectedValues = Array.isArray(value) ? value : [];
+        const gridColsClass = {
+            1: "grid-cols-1",
+            2: "grid-cols-2",
+            3: "grid-cols-3",
+            4: "grid-cols-4",
+        };
+        const handleToggle = (optionValue, checked) => {
+            if (checked) {
+                onChange([...selectedValues, optionValue]);
+            }
+            else {
+                onChange(selectedValues.filter((v) => v !== optionValue));
+            }
+        };
+        return (jsx("div", { className: cn("grid gap-2", gridColsClass[cfg.columns || 1] || gridColsClass[1], cfg.className), children: cfg.options.map((opt) => (jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Checkbox$1, { id: `${cfg.name}-${opt.value}`, checked: selectedValues.includes(opt.value), onCheckedChange: (checked) => handleToggle(opt.value, !!checked), disabled: disabled || opt.disabled, className: cn(error && "border-destructive") }), jsx(Label, { htmlFor: `${cfg.name}-${opt.value}`, className: "text-sm font-normal", children: opt.label })] }, opt.value))) }));
+    }
+}
+
+class Repeater extends BaseField {
+    fieldType = "repeater";
+    fieldBuilders = [];
+    constructor(name) {
+        super(name);
+        this.config.minItems = 0;
+        this.config.maxItems = Infinity;
+        this.config.addLabel = "Add item";
+        this.config.collapsible = false;
+        this.config.orderable = false;
+    }
+    static make(name) {
+        return new Repeater(name);
+    }
+    fields(...builders) {
+        this.fieldBuilders = builders;
+        this.config.fields = builders.map((b) => b.build());
+        return this;
+    }
+    minItems(min) {
+        this.config.minItems = min;
+        return this;
+    }
+    maxItems(max) {
+        this.config.maxItems = max;
+        return this;
+    }
+    addLabel(label) {
+        this.config.addLabel = label;
+        return this;
+    }
+    collapsible(collapsible = true) {
+        this.config.collapsible = collapsible;
+        return this;
+    }
+    orderable(orderable = true) {
+        this.config.orderable = orderable;
+        return this;
+    }
+    renderField({ value, onChange, error, disabled, data, }) {
+        const cfg = this.config;
+        const items = Array.isArray(value) ? value : [];
+        const builtFields = cfg.fields;
+        const addItem = () => {
+            if (items.length >= (cfg.maxItems || Infinity))
+                return;
+            const defaults = {};
+            builtFields.forEach((f) => {
+                defaults[f.name] = f.config.defaultValue ?? "";
+            });
+            onChange([...items, defaults]);
+        };
+        const removeItem = (index) => {
+            if (items.length <= (cfg.minItems || 0))
+                return;
+            onChange(items.filter((_, i) => i !== index));
+        };
+        const updateItem = (index, fieldName, fieldValue) => {
+            const updated = items.map((item, i) => i === index ? { ...item, [fieldName]: fieldValue } : item);
+            onChange(updated);
+        };
+        const canAdd = items.length < (cfg.maxItems || Infinity);
+        const canRemove = items.length > (cfg.minItems || 0);
+        return (jsxs("div", { className: cn("space-y-3", cfg.className), children: [items.map((item, index) => (jsx(Card, { children: jsxs(CardContent, { className: "flex items-start gap-3 pt-4", children: [cfg.orderable && (jsx(GripVertical, { className: "mt-2 h-5 w-5 cursor-grab text-muted-foreground" })), jsx("div", { className: "grid flex-1 gap-3", children: builtFields.map((field) => (jsxs("div", { className: "space-y-1", children: [field.config.label && (jsx("label", { className: "text-sm font-medium", children: field.config.label })), field.render({
+                                            value: item[field.name],
+                                            onChange: (v) => updateItem(index, field.name, v),
+                                            disabled,
+                                            data,
+                                        })] }, field.name))) }), canRemove && (jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "mt-1 h-8 w-8 p-0 text-destructive", onClick: () => removeItem(index), disabled: disabled, children: jsx(Trash2, { className: "h-4 w-4" }) }))] }) }, index))), canAdd && (jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, disabled: disabled, className: "w-full", children: [jsx(Plus, { className: "mr-2 h-4 w-4" }), cfg.addLabel] }))] }));
+    }
+}
+
+function FieldRenderer({ field, value, error, disabled, data, onChange, onBlur, }) {
+    // Hidden fields render without wrapper
+    if (field.type === "hidden") {
+        return field.render({ value, onChange, onBlur, error, disabled, data });
+    }
+    // Checkbox and Toggle handle their own labels inline
+    const skipLabel = field.type === "checkbox" || field.type === "toggle";
+    return (jsxs("div", { className: cn("space-y-2", field.config.columnSpan && field.config.columnSpan > 1
+            ? `col-span-${field.config.columnSpan}`
+            : undefined, field.config.className), children: [field.config.label && !skipLabel && (jsxs(Label, { htmlFor: field.name, className: cn(error && "text-destructive"), children: [field.config.label, field.config.required && (jsx("span", { className: "text-destructive ml-1", children: "*" }))] })), field.render({
+                value,
+                onChange,
+                onBlur,
+                error,
+                disabled,
+                data,
+            }), error && jsx("p", { className: "text-sm text-destructive", children: error }), !error && field.config.helperText && (jsx("p", { className: "text-sm text-muted-foreground", children: field.config.helperText }))] }));
+}
+
+const gridColsClass = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+function GridLayout({ columns = 1, children, className, }) {
+    return (jsx("div", { className: cn("grid gap-4", gridColsClass[columns] || gridColsClass[1], className), children: children }));
+}
+
+const positionClass = {
+    start: "justify-start",
+    center: "justify-center",
+    between: "justify-between",
+    end: "justify-end",
+};
+function FormActions({ actions, position = "end", data, processing = false, }) {
+    if (!actions.length)
+        return null;
+    return (jsx("div", { className: cn("flex gap-2", positionClass[position]), children: actions.map((action, i) => {
+            const isDisabled = typeof action.disabled === "function"
+                ? action.disabled(data, processing)
+                : action.disabled;
+            if (action.type === "submit") {
+                return (jsxs(Button, { type: "submit", variant: action.variant || "default", disabled: isDisabled || processing, children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), processing ? "Processing..." : action.label] }, i));
+            }
+            if (action.type === "cancel" && action.href) {
+                return (jsx(Button, { type: "button", variant: action.variant || "outline", disabled: processing, asChild: true, children: jsxs("a", { href: action.href, children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), action.label] }) }, i));
+            }
+            return (jsxs(Button, { type: "button", variant: action.variant || "outline", onClick: action.onClick, disabled: isDisabled || (action.type === "cancel" && processing), children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), action.label] }, i));
+        }) }));
+}
+
+function SectionRenderer({ section, fields, data, errors, onChange, onBlur, isFieldVisible, isFieldDisabled, }) {
+    const [isCollapsed, setIsCollapsed] = useState(section.collapsed ?? false);
+    if (section.hidden && section.hidden(data))
+        return null;
+    const sectionFields = fields.filter((f) => section.fields.includes(f.name));
+    return (jsxs(Card, { children: [jsxs(CardHeader, { className: cn(section.collapsible && "cursor-pointer select-none"), onClick: section.collapsible ? () => setIsCollapsed(!isCollapsed) : undefined, children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [section.icon, jsx(CardTitle, { className: "text-lg", children: section.title })] }), section.collapsible && (jsx(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", isCollapsed && "-rotate-90") }) }))] }), section.description && (jsx(CardDescription, { children: section.description }))] }), !isCollapsed && (jsx(CardContent, { children: jsx(GridLayout, { columns: section.columns, children: sectionFields.map((field) => {
+                        if (!isFieldVisible(field))
+                            return null;
+                        return (jsx(FieldRenderer, { field: field, value: data[field.name], error: errors[field.name], disabled: isFieldDisabled(field), data: data, onChange: (v) => onChange(field.name, v), onBlur: onBlur ? () => onBlur(field.name) : undefined }, field.name));
+                    }) }) }))] }));
+}
+
+function TabRenderer({ tabs, fields, data, errors, onChange, onBlur, isFieldVisible, isFieldDisabled, columns, }) {
+    const firstTab = tabs[0]?.id;
+    return (jsxs(Tabs, { defaultValue: firstTab, children: [jsx(TabsList, { children: tabs.map((tab) => {
+                    const isDisabled = tab.disabled ? tab.disabled(data) : false;
+                    const badge = typeof tab.badge === "function" ? tab.badge(data) : tab.badge;
+                    return (jsx(TabsTrigger, { value: tab.id, disabled: isDisabled, children: jsxs("span", { className: "flex items-center gap-2", children: [tab.icon, tab.label, badge !== undefined && badge !== null && (jsx("span", { className: "ml-1 rounded-full bg-muted px-2 py-0.5 text-xs", children: badge }))] }) }, tab.id));
+                }) }), tabs.map((tab) => {
+                const tabFields = tab.fields
+                    ? fields.filter((f) => tab.fields.includes(f.name))
+                    : [];
+                return (jsx(TabsContent, { value: tab.id, className: "mt-4", children: tab.sections ? (jsx("div", { className: "space-y-4", children: tab.sections.map((section) => (jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) })) : (jsx(GridLayout, { columns: columns, children: tabFields.map((field) => {
+                            if (!isFieldVisible(field))
+                                return null;
+                            return (jsx(FieldRenderer, { field: field, value: data[field.name], error: errors[field.name], disabled: isFieldDisabled(field), data: data, onChange: (v) => onChange(field.name, v), onBlur: onBlur ? () => onBlur(field.name) : undefined }, field.name));
+                        }) })) }, tab.id));
+            })] }));
+}
+
+function WizardRenderer({ steps, fields, data, errors, onChange, onBlur, isFieldVisible, isFieldDisabled, columns, onSubmit, processing = false, }) {
+    const [currentStep, setCurrentStep] = useState(0);
+    const currentStepConfig = steps[currentStep];
+    const isLastStep = currentStep === steps.length - 1;
+    const isFirstStep = currentStep === 0;
+    const canProceed = currentStepConfig?.canProceed
+        ? currentStepConfig.canProceed(data)
+        : true;
+    const handleNext = useCallback(async () => {
+        if (currentStepConfig?.beforeNext) {
+            const canContinue = await currentStepConfig.beforeNext(data);
+            if (!canContinue)
+                return;
+        }
+        if (isLastStep) {
+            onSubmit();
+        }
+        else {
+            setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
+        }
+    }, [currentStep, currentStepConfig, data, isLastStep, onSubmit, steps.length]);
+    const handlePrevious = useCallback(() => {
+        setCurrentStep((prev) => Math.max(prev - 1, 0));
+    }, []);
+    const stepFields = currentStepConfig?.fields
+        ? fields.filter((f) => currentStepConfig.fields.includes(f.name))
+        : [];
+    return (jsxs("div", { className: "space-y-6", children: [jsx("nav", { "aria-label": "Progress", children: jsx("ol", { className: "flex items-center", children: steps.map((step, index) => (jsxs("li", { className: cn("flex items-center", index < steps.length - 1 && "flex-1"), children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn("flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-medium", index < currentStep &&
+                                            "border-primary bg-primary text-primary-foreground", index === currentStep &&
+                                            "border-primary text-primary", index > currentStep &&
+                                            "border-muted-foreground/25 text-muted-foreground"), children: index < currentStep ? (jsx(Check, { className: "h-4 w-4" })) : (index + 1) }), jsxs("div", { className: "hidden sm:block", children: [jsx("p", { className: cn("text-sm font-medium", index <= currentStep
+                                                    ? "text-foreground"
+                                                    : "text-muted-foreground"), children: step.label }), step.description && (jsx("p", { className: "text-xs text-muted-foreground", children: step.description }))] })] }), index < steps.length - 1 && (jsx("div", { className: cn("mx-4 hidden h-0.5 flex-1 sm:block", index < currentStep ? "bg-primary" : "bg-muted") }))] }, step.id))) }) }), jsx("div", { children: currentStepConfig?.sections ? (jsx("div", { className: "space-y-4", children: currentStepConfig.sections.map((section) => (jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) })) : (jsx(GridLayout, { columns: columns, children: stepFields.map((field) => {
+                        if (!isFieldVisible(field))
+                            return null;
+                        return (jsx(FieldRenderer, { field: field, value: data[field.name], error: errors[field.name], disabled: isFieldDisabled(field), data: data, onChange: (v) => onChange(field.name, v), onBlur: onBlur ? () => onBlur(field.name) : undefined }, field.name));
+                    }) })) }), jsxs("div", { className: "flex justify-between", children: [jsx(Button, { type: "button", variant: "outline", onClick: handlePrevious, disabled: isFirstStep, children: "Previous" }), jsx(Button, { type: isLastStep ? "submit" : "button", onClick: handleNext, disabled: !canProceed || (isLastStep && processing), children: isLastStep
+                            ? processing
+                                ? "Processing..."
+                                : "Submit"
+                            : "Next" })] })] }));
+}
+
+function FormRenderer({ schema, data, errors, onChange, onSubmit, processing = false, className, disabled = false, onBlur, }) {
+    const { fields, config } = schema;
+    const resolvedTitle = useMemo(() => {
+        if (typeof config.title === "function")
+            return config.title(data);
+        return config.title;
+    }, [config.title, data]);
+    const resolvedDescription = useMemo(() => {
+        if (typeof config.description === "function")
+            return config.description(data);
+        return config.description;
+    }, [config.description, data]);
+    const isFieldVisible = useCallback((field) => {
+        if (typeof field.config.hidden === "function")
+            return !field.config.hidden(data);
+        if (typeof field.config.hidden === "boolean")
+            return !field.config.hidden;
+        for (const dep of field.config.dependsOn || []) {
+            const depValue = data[dep.field];
+            if (dep.effect === "show" && !dep.condition(depValue, data))
+                return false;
+            if (dep.effect === "hide" && dep.condition(depValue, data))
+                return false;
+        }
+        return true;
+    }, [data]);
+    const isFieldDisabled = useCallback((field) => {
+        if (disabled)
+            return true;
+        if (typeof config.disabled === "function" && config.disabled(data))
+            return true;
+        if (typeof config.disabled === "boolean" && config.disabled)
+            return true;
+        if (typeof field.config.disabled === "function")
+            return field.config.disabled(data);
+        if (typeof field.config.disabled === "boolean")
+            return field.config.disabled;
+        for (const dep of field.config.dependsOn || []) {
+            const depValue = data[dep.field];
+            if (dep.effect === "disable" && dep.condition(depValue, data))
+                return true;
+            if (dep.effect === "enable" &&
+                !dep.condition(depValue, data))
+                return true;
+        }
+        return false;
+    }, [disabled, config.disabled, data]);
+    const renderFieldsFlat = () => (jsx(GridLayout, { columns: config.columns, children: fields.map((field) => {
+            if (!isFieldVisible(field))
+                return null;
+            return (jsx(FieldRenderer, { field: field, value: data[field.name], error: errors[field.name], disabled: isFieldDisabled(field), data: data, onChange: (v) => onChange(field.name, v), onBlur: onBlur ? () => onBlur(field.name) : undefined }, field.name));
+        }) }));
+    const renderContent = () => {
+        // Wizard mode
+        if (config.wizardSteps?.length) {
+            return (jsx(WizardRenderer, { steps: config.wizardSteps, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled, columns: config.columns, onSubmit: onSubmit, processing: processing }));
+        }
+        // Tabs mode
+        if (config.tabs?.length) {
+            return (jsx(TabRenderer, { tabs: config.tabs, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled, columns: config.columns }));
+        }
+        // Sections mode
+        if (config.sections?.length) {
+            return (jsx("div", { className: "space-y-4", children: config.sections.map((section) => (jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) }));
+        }
+        // Flat mode (default)
+        return renderFieldsFlat();
+    };
+    const spacingClass = {
+        compact: "space-y-3",
+        normal: "space-y-6",
+        relaxed: "space-y-8",
+    }[config.spacing || "normal"];
+    // Wizard handles its own submit button
+    const showActions = config.actions?.length && !config.wizardSteps?.length;
+    const formBody = (jsxs("form", { onSubmit: (e) => {
+            e.preventDefault();
+            onSubmit();
+        }, className: cn(spacingClass, className), children: [(resolvedTitle || resolvedDescription) && (jsxs("div", { className: "space-y-1", children: [resolvedTitle && (jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: resolvedTitle })), resolvedDescription && (jsx("p", { className: "text-sm text-muted-foreground", children: resolvedDescription }))] })), renderContent(), showActions && (jsx(FormActions, { actions: config.actions, position: config.actionsPosition, data: data, processing: processing }))] }));
+    if (config.bordered) {
+        return (jsx(Card, { children: jsx(CardContent, { className: "pt-6", children: formBody }) }));
+    }
+    return formBody;
+}
+
+export { ActionsBuilder, ActionsColumn, AvatarGroupColumn, BadgeColumn, ButtonColumn, Checkbox, CheckboxColumn, CheckboxGroup, ConfirmProvider, DataTable, DataTableSchema, DateColumn, DatePicker, DropdownColumn, EmptyStateBuilder, EnumColumn, FileUpload, FormRenderer, FormSchema, Hidden, IconColumn, ImageColumn, InputColumn, LinkColumn, NumberColumn, ProgressColumn, RadioGroup, Repeater, SectionBuilder, Select, SelectColumn, TabBuilder, TableSchema, TextColumn, TextInput, Textarea, Toggle, WizardStep, ActionsColumn as actionsColumn, AvatarGroupColumn as avatarGroupColumn, BadgeColumn as badgeColumn, ButtonColumn as buttonColumn, CheckboxColumn as checkboxColumn, confirm, DateColumn as dateColumn, DropdownColumn as dropdownColumn, EnumColumn as enumColumn, IconColumn as iconColumn, InputColumn as inputColumn, TextColumn as textColumn };
 //# sourceMappingURL=index.esm.js.map