@nccirtu/tablefy 0.8.4 → 0.9.1

package/dist/index.js

@@ -15,6 +15,14 @@ var checkbox = require('@/components/ui/checkbox');
 var tooltip = require('@/components/ui/tooltip');
 var progress = require('@/components/ui/progress');
 var alertDialog = require('@/components/ui/alert-dialog');
+var textarea = require('@/components/ui/textarea');
+var _switch = require('@/components/ui/switch');
+var radioGroup = require('@/components/ui/radio-group');
+var label = require('@/components/ui/label');
+var calendar = require('@/components/ui/calendar');
+var popover = require('@/components/ui/popover');
+var card = require('@/components/ui/card');
+var tabs = require('@/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);
@@ -1859,27 +1867,1077 @@ function ConfirmProvider({ children }) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(alertDialog.AlertDialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxRuntime.jsxs(alertDialog.AlertDialogContent, { className: "max-w-md", children: [jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [jsxRuntime.jsx(alertDialog.AlertDialogTitle, { className: "text-center", children: title || "Bestätigung erforderlich" }), description && (jsxRuntime.jsx(alertDialog.AlertDialogDescription, { className: "text-center", children: description }))] }), image && (jsxRuntime.jsx("div", { className: "flex justify-center py-4", children: jsxRuntime.jsx("img", { src: image, alt: "Confirmation", className: "h-24 w-24 object-contain" }) })), icon && !image && (jsxRuntime.jsx("div", { className: "flex justify-center py-4 text-6xl", children: icon })), jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { className: "flex flex-row !justify-between w-full", children: [jsxRuntime.jsx(alertDialog.AlertDialogCancel, { onClick: handleCancel, className: "mt-0", children: cancelLabel || "Abbrechen" }), jsxRuntime.jsx(alertDialog.AlertDialogAction, { onClick: handleConfirm, variant: variant === "destructive" ? "destructive" : "default", children: confirmLabel || "Bestätigen" })] })] }) })] }));
 }
 
+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$1 = (jsxRuntime.jsx(input.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: utils.cn(error && "border-destructive", className) }));
+        if (prefix || suffix) {
+            return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [prefix && (jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: prefix })), input$1, suffix && (jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: suffix }))] }));
+        }
+        return input$1;
+    }
+}
+
+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 (jsxRuntime.jsx(textarea.Textarea, { value: value ?? "", onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: placeholder, rows: rows, maxLength: maxLength, disabled: disabled, readOnly: readOnly, className: utils.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 (jsxRuntime.jsxs(select.Select, { value: value ?? "", onValueChange: onChange, disabled: disabled, children: [jsxRuntime.jsx(select.SelectTrigger, { className: utils.cn(error && "border-destructive", cfg.className), children: jsxRuntime.jsx(select.SelectValue, { placeholder: cfg.placeholder || "Select..." }) }), jsxRuntime.jsx(select.SelectContent, { children: resolvedOptions.map((opt) => (jsxRuntime.jsx(select.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 (jsxRuntime.jsxs("div", { className: utils.cn("flex items-center space-x-2", className), children: [jsxRuntime.jsx(checkbox.Checkbox, { id: this.config.name, checked: !!value, onCheckedChange: (checked) => onChange(!!checked), disabled: disabled, className: utils.cn(error && "border-destructive") }), this.config.label && (jsxRuntime.jsx("label", { htmlFor: this.config.name, className: utils.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 (jsxRuntime.jsxs("div", { className: utils.cn("flex items-center space-x-2", className), children: [jsxRuntime.jsx(_switch.Switch, { id: this.config.name, checked: !!value, onCheckedChange: (checked) => onChange(checked), disabled: disabled, className: utils.cn(error && "border-destructive") }), displayLabel && (jsxRuntime.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 (jsxRuntime.jsx(radioGroup.RadioGroup, { value: value ?? "", onValueChange: onChange, disabled: disabled, className: utils.cn(isHorizontal ? "flex flex-row gap-4" : "flex flex-col gap-2", cfg.className), children: cfg.options.map((opt) => (jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntime.jsx(radioGroup.RadioGroupItem, { value: opt.value, id: `${cfg.name}-${opt.value}`, disabled: opt.disabled, className: utils.cn(error && "border-destructive") }), jsxRuntime.jsx(label.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 (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: "outline", disabled: disabled, className: utils.cn("w-full justify-start text-left font-normal", !dateValue && "text-muted-foreground", error && "border-destructive", className), children: [jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 h-4 w-4" }), dateValue ? formatDate(dateValue) : placeholder || "Pick a date"] }) }), jsxRuntime.jsx(popover.PopoverContent, { className: "w-auto p-0", align: "start", children: jsxRuntime.jsx(calendar.Calendar, { 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 jsxRuntime.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 = react.useRef(null);
+        const [dragOver, setDragOver] = react.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 (jsxRuntime.jsxs("div", { className: utils.cn("space-y-2", cfg.className), children: [jsxRuntime.jsxs("div", { className: utils.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: [jsxRuntime.jsx(lucideReact.Upload, { className: "mb-2 h-8 w-8 text-muted-foreground" }), jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: ["Drag & drop or", " ", jsxRuntime.jsx("button", { type: "button", className: "text-primary underline", onClick: () => inputRef.current?.click(), disabled: disabled, children: "browse" })] }), cfg.accept && (jsxRuntime.jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Accepted: ", cfg.accept] })), jsxRuntime.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 && (jsxRuntime.jsx("ul", { className: "space-y-1", children: files.map((file, index) => (jsxRuntime.jsxs("li", { className: "flex items-center justify-between rounded-md border px-3 py-2 text-sm", children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2 truncate", children: [jsxRuntime.jsx(lucideReact.File, { className: "h-4 w-4 text-muted-foreground" }), file.name] }), jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 w-6 p-0", onClick: () => removeFile(index), disabled: disabled, children: jsxRuntime.jsx(lucideReact.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 (jsxRuntime.jsx("div", { className: utils.cn("grid gap-2", gridColsClass[cfg.columns || 1] || gridColsClass[1], cfg.className), children: cfg.options.map((opt) => (jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntime.jsx(checkbox.Checkbox, { id: `${cfg.name}-${opt.value}`, checked: selectedValues.includes(opt.value), onCheckedChange: (checked) => handleToggle(opt.value, !!checked), disabled: disabled || opt.disabled, className: utils.cn(error && "border-destructive") }), jsxRuntime.jsx(label.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 (jsxRuntime.jsxs("div", { className: utils.cn("space-y-3", cfg.className), children: [items.map((item, index) => (jsxRuntime.jsx(card.Card, { children: jsxRuntime.jsxs(card.CardContent, { className: "flex items-start gap-3 pt-4", children: [cfg.orderable && (jsxRuntime.jsx(lucideReact.GripVertical, { className: "mt-2 h-5 w-5 cursor-grab text-muted-foreground" })), jsxRuntime.jsx("div", { className: "grid flex-1 gap-3", children: builtFields.map((field) => (jsxRuntime.jsxs("div", { className: "space-y-1", children: [field.config.label && (jsxRuntime.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 && (jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", className: "mt-1 h-8 w-8 p-0 text-destructive", onClick: () => removeItem(index), disabled: disabled, children: jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" }) }))] }) }, index))), canAdd && (jsxRuntime.jsxs(button.Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, disabled: disabled, className: "w-full", children: [jsxRuntime.jsx(lucideReact.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 (jsxRuntime.jsxs("div", { className: utils.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 && (jsxRuntime.jsxs(label.Label, { htmlFor: field.name, className: utils.cn(error && "text-destructive"), children: [field.config.label, field.config.required && (jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" }))] })), field.render({
+                value,
+                onChange,
+                onBlur,
+                error,
+                disabled,
+                data,
+            }), error && jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: error }), !error && field.config.helperText && (jsxRuntime.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 (jsxRuntime.jsx("div", { className: utils.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 (jsxRuntime.jsx("div", { className: utils.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 (jsxRuntime.jsxs(button.Button, { type: "submit", variant: action.variant || "default", disabled: isDisabled || processing, children: [action.icon && jsxRuntime.jsx("span", { className: "mr-2", children: action.icon }), processing ? "Processing..." : action.label] }, i));
+            }
+            if (action.type === "cancel" && action.href) {
+                return (jsxRuntime.jsx(button.Button, { type: "button", variant: action.variant || "outline", disabled: processing, asChild: true, children: jsxRuntime.jsxs("a", { href: action.href, children: [action.icon && jsxRuntime.jsx("span", { className: "mr-2", children: action.icon }), action.label] }) }, i));
+            }
+            return (jsxRuntime.jsxs(button.Button, { type: "button", variant: action.variant || "outline", onClick: action.onClick, disabled: isDisabled || (action.type === "cancel" && processing), children: [action.icon && jsxRuntime.jsx("span", { className: "mr-2", children: action.icon }), action.label] }, i));
+        }) }));
+}
+
+function SectionRenderer({ section, fields, data, errors, onChange, onBlur, isFieldVisible, isFieldDisabled, }) {
+    const [isCollapsed, setIsCollapsed] = react.useState(section.collapsed ?? false);
+    if (section.hidden && section.hidden(data))
+        return null;
+    const sectionFields = fields.filter((f) => section.fields.includes(f.name));
+    return (jsxRuntime.jsxs(card.Card, { children: [jsxRuntime.jsxs(card.CardHeader, { className: utils.cn(section.collapsible && "cursor-pointer select-none"), onClick: section.collapsible ? () => setIsCollapsed(!isCollapsed) : undefined, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [section.icon, jsxRuntime.jsx(card.CardTitle, { className: "text-lg", children: section.title })] }), section.collapsible && (jsxRuntime.jsx(button.Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: jsxRuntime.jsx(lucideReact.ChevronDown, { className: utils.cn("h-4 w-4 transition-transform", isCollapsed && "-rotate-90") }) }))] }), section.description && (jsxRuntime.jsx(card.CardDescription, { children: section.description }))] }), !isCollapsed && (jsxRuntime.jsx(card.CardContent, { children: jsxRuntime.jsx(GridLayout, { columns: section.columns, children: sectionFields.map((field) => {
+                        if (!isFieldVisible(field))
+                            return null;
+                        return (jsxRuntime.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: tabs$1, fields, data, errors, onChange, onBlur, isFieldVisible, isFieldDisabled, columns, }) {
+    const firstTab = tabs$1[0]?.id;
+    return (jsxRuntime.jsxs(tabs.Tabs, { defaultValue: firstTab, children: [jsxRuntime.jsx(tabs.TabsList, { children: tabs$1.map((tab) => {
+                    const isDisabled = tab.disabled ? tab.disabled(data) : false;
+                    const badge = typeof tab.badge === "function" ? tab.badge(data) : tab.badge;
+                    return (jsxRuntime.jsx(tabs.TabsTrigger, { value: tab.id, disabled: isDisabled, children: jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [tab.icon, tab.label, badge !== undefined && badge !== null && (jsxRuntime.jsx("span", { className: "ml-1 rounded-full bg-muted px-2 py-0.5 text-xs", children: badge }))] }) }, tab.id));
+                }) }), tabs$1.map((tab) => {
+                const tabFields = tab.fields
+                    ? fields.filter((f) => tab.fields.includes(f.name))
+                    : [];
+                return (jsxRuntime.jsx(tabs.TabsContent, { value: tab.id, className: "mt-4", children: tab.sections ? (jsxRuntime.jsx("div", { className: "space-y-4", children: tab.sections.map((section) => (jsxRuntime.jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) })) : (jsxRuntime.jsx(GridLayout, { columns: columns, children: tabFields.map((field) => {
+                            if (!isFieldVisible(field))
+                                return null;
+                            return (jsxRuntime.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] = react.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 = react.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 = react.useCallback(() => {
+        setCurrentStep((prev) => Math.max(prev - 1, 0));
+    }, []);
+    const stepFields = currentStepConfig?.fields
+        ? fields.filter((f) => currentStepConfig.fields.includes(f.name))
+        : [];
+    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsx("nav", { "aria-label": "Progress", children: jsxRuntime.jsx("ol", { className: "flex items-center", children: steps.map((step, index) => (jsxRuntime.jsxs("li", { className: utils.cn("flex items-center", index < steps.length - 1 && "flex-1"), children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: utils.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 ? (jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })) : (index + 1) }), jsxRuntime.jsxs("div", { className: "hidden sm:block", children: [jsxRuntime.jsx("p", { className: utils.cn("text-sm font-medium", index <= currentStep
+                                                    ? "text-foreground"
+                                                    : "text-muted-foreground"), children: step.label }), step.description && (jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: step.description }))] })] }), index < steps.length - 1 && (jsxRuntime.jsx("div", { className: utils.cn("mx-4 hidden h-0.5 flex-1 sm:block", index < currentStep ? "bg-primary" : "bg-muted") }))] }, step.id))) }) }), jsxRuntime.jsx("div", { children: currentStepConfig?.sections ? (jsxRuntime.jsx("div", { className: "space-y-4", children: currentStepConfig.sections.map((section) => (jsxRuntime.jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) })) : (jsxRuntime.jsx(GridLayout, { columns: columns, children: stepFields.map((field) => {
+                        if (!isFieldVisible(field))
+                            return null;
+                        return (jsxRuntime.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));
+                    }) })) }), jsxRuntime.jsxs("div", { className: "flex justify-between", children: [jsxRuntime.jsx(button.Button, { type: "button", variant: "outline", onClick: handlePrevious, disabled: isFirstStep, children: "Previous" }), jsxRuntime.jsx(button.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 = react.useMemo(() => {
+        if (typeof config.title === "function")
+            return config.title(data);
+        return config.title;
+    }, [config.title, data]);
+    const resolvedDescription = react.useMemo(() => {
+        if (typeof config.description === "function")
+            return config.description(data);
+        return config.description;
+    }, [config.description, data]);
+    const isFieldVisible = react.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 = react.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 = () => (jsxRuntime.jsx(GridLayout, { columns: config.columns, children: fields.map((field) => {
+            if (!isFieldVisible(field))
+                return null;
+            return (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.jsx("div", { className: "space-y-4", children: config.sections.map((section) => (jsxRuntime.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 = (jsxRuntime.jsxs("form", { onSubmit: (e) => {
+            e.preventDefault();
+            onSubmit();
+        }, className: utils.cn(spacingClass, className), children: [(resolvedTitle || resolvedDescription) && (jsxRuntime.jsxs("div", { className: "space-y-1", children: [resolvedTitle && (jsxRuntime.jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: resolvedTitle })), resolvedDescription && (jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: resolvedDescription }))] })), renderContent(), showActions && (jsxRuntime.jsx(FormActions, { actions: config.actions, position: config.actionsPosition, data: data, processing: processing }))] }));
+    if (config.bordered) {
+        return (jsxRuntime.jsx(card.Card, { children: jsxRuntime.jsx(card.CardContent, { className: "pt-6", children: formBody }) }));
+    }
+    return formBody;
+}
+
+exports.ActionsBuilder = ActionsBuilder;
 exports.ActionsColumn = ActionsColumn;
 exports.AvatarGroupColumn = AvatarGroupColumn;
 exports.BadgeColumn = BadgeColumn;
 exports.ButtonColumn = ButtonColumn;
+exports.Checkbox = Checkbox;
 exports.CheckboxColumn = CheckboxColumn;
+exports.CheckboxGroup = CheckboxGroup;
 exports.ConfirmProvider = ConfirmProvider;
 exports.DataTable = DataTable;
 exports.DataTableSchema = DataTableSchema;
 exports.DateColumn = DateColumn;
+exports.DatePicker = DatePicker;
 exports.DropdownColumn = DropdownColumn;
 exports.EmptyStateBuilder = EmptyStateBuilder;
 exports.EnumColumn = EnumColumn;
+exports.FileUpload = FileUpload;
+exports.FormRenderer = FormRenderer;
+exports.FormSchema = FormSchema;
+exports.Hidden = Hidden;
 exports.IconColumn = IconColumn;
 exports.ImageColumn = ImageColumn;
 exports.InputColumn = InputColumn;
 exports.LinkColumn = LinkColumn;
 exports.NumberColumn = NumberColumn;
 exports.ProgressColumn = ProgressColumn;
+exports.RadioGroup = RadioGroup;
+exports.Repeater = Repeater;
+exports.SectionBuilder = SectionBuilder;
+exports.Select = Select;
 exports.SelectColumn = SelectColumn;
+exports.TabBuilder = TabBuilder;
 exports.TableSchema = TableSchema;
 exports.TextColumn = TextColumn;
+exports.TextInput = TextInput;
+exports.Textarea = Textarea;
+exports.Toggle = Toggle;
+exports.WizardStep = WizardStep;
 exports.actionsColumn = ActionsColumn;
 exports.avatarGroupColumn = AvatarGroupColumn;
 exports.badgeColumn = BadgeColumn;