@nccirtu/tablefy 0.8.4 → 0.9.0

package/dist/forms/index.esm.js

@@ -0,0 +1,1052 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { Textarea as Textarea$1 } from '@/components/ui/textarea';
+import { Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { Checkbox as Checkbox$1 } from '@/components/ui/checkbox';
+import { Switch } from '@/components/ui/switch';
+import { RadioGroup as RadioGroup$1, RadioGroupItem } from '@/components/ui/radio-group';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { CalendarIcon, Upload, File, X, GripVertical, Trash2, Plus, ChevronDown, Check } from 'lucide-react';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+
+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, { 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, BaseField, Checkbox, CheckboxGroup, DatePicker, FieldRenderer, FileUpload, FormActions, FormRenderer, FormSchema, GridLayout, Hidden, RadioGroup, Repeater, SectionBuilder, SectionRenderer, Select, TabBuilder, TabRenderer, TextInput, Textarea, Toggle, WizardRenderer, WizardStep };
+//# sourceMappingURL=index.esm.js.map