@kandiforge/kandi-office 0.15.148

package/dist/forms/KandiForm.js

@@ -0,0 +1,577 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { useFormStorage } from './KandiFormProvider';
+import { useFormState } from './hooks/useFormState';
+function PasswordInput({ id, value, onChange, onBlur, placeholder, disabled, readOnly, showToggle, ariaLabel, hasError, }) {
+    const [showPassword, setShowPassword] = useState(false);
+    return (_jsxs("div", { className: "kandi-password-wrapper", children: [_jsx("input", { type: showPassword ? 'text' : 'password', id: id, value: value, onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: placeholder, disabled: disabled, readOnly: readOnly, "aria-label": ariaLabel, "aria-invalid": hasError }), showToggle && (_jsx("button", { type: "button", className: "kandi-password-toggle", onClick: () => setShowPassword(!showPassword), "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? '👁️' : '👁️‍🗨️' }))] }));
+}
+function FormLoading({ message = 'Loading form...' }) {
+    return (_jsxs("div", { className: "kandi-form-loading", children: [_jsx("div", { className: "kandi-form-spinner" }), _jsx("p", { children: message })] }));
+}
+function FormError({ error, onRetry }) {
+    return (_jsxs("div", { className: "kandi-form-error", children: [_jsx("h3", { children: "Failed to load form" }), _jsx("p", { children: error.message }), onRetry && (_jsx("button", { type: "button", onClick: onRetry, children: "Retry" }))] }));
+}
+function FieldRenderer({ field, value, error, touched, onChange, onBlur, readOnly, disabled, }) {
+    const hasError = touched && error && error.length > 0;
+    const isDisabled = disabled || field.disabled;
+    const isReadOnly = readOnly || field.readonly;
+    const renderWidget = () => {
+        switch (field.widget.type) {
+            case 'textInput':
+                return (_jsx("input", { type: "text", id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: field.placeholder, disabled: isDisabled, readOnly: isReadOnly, maxLength: field.widget.maxLength, "aria-label": field.ariaLabel, "aria-describedby": field.ariaDescribedBy, "aria-invalid": hasError }));
+            case 'textArea':
+                return (_jsx("textarea", { id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: field.placeholder, disabled: isDisabled, readOnly: isReadOnly, rows: field.widget.rows ?? 3, maxLength: field.widget.maxLength, "aria-label": field.ariaLabel, "aria-invalid": hasError }));
+            case 'email':
+                return (_jsx("input", { type: "email", id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: field.placeholder, disabled: isDisabled, readOnly: isReadOnly, "aria-label": field.ariaLabel, "aria-invalid": hasError }));
+            case 'phone':
+                return (_jsx("input", { type: "tel", id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: field.placeholder, disabled: isDisabled, readOnly: isReadOnly, "aria-label": field.ariaLabel, "aria-invalid": hasError }));
+            case 'url':
+                return (_jsx("input", { type: "url", id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: field.placeholder ?? 'https://', disabled: isDisabled, readOnly: isReadOnly, "aria-label": field.ariaLabel, "aria-invalid": hasError }));
+            case 'password':
+                return (_jsx(PasswordInput, { id: field.id, value: value ?? '', onChange: onChange, onBlur: onBlur, placeholder: field.placeholder, disabled: isDisabled, readOnly: isReadOnly, showToggle: field.widget.showToggle, ariaLabel: field.ariaLabel, hasError: hasError }));
+            case 'number':
+                return (_jsx("input", { type: "number", id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.valueAsNumber || null), onBlur: onBlur, placeholder: field.placeholder, disabled: isDisabled, readOnly: isReadOnly, min: field.widget.min, max: field.widget.max, step: field.widget.step, "aria-label": field.ariaLabel, "aria-invalid": hasError }));
+            case 'currency': {
+                const { currency, min, max } = field.widget;
+                return (_jsxs("div", { className: "kandi-currency-wrapper", children: [_jsx("span", { className: "kandi-currency-symbol", children: currency }), _jsx("input", { type: "number", id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.valueAsNumber || null), onBlur: onBlur, placeholder: field.placeholder ?? '0.00', disabled: isDisabled, readOnly: isReadOnly, min: min, max: max, step: 0.01, "aria-label": field.ariaLabel, "aria-invalid": hasError })] }));
+            }
+            case 'slider': {
+                const { min, max, step, showValue, showTicks } = field.widget;
+                const sliderValue = value ?? min;
+                return (_jsxs("div", { className: "kandi-slider-wrapper", children: [_jsx("input", { type: "range", id: field.id, value: sliderValue, onChange: (e) => onChange(Number(e.target.value)), onBlur: onBlur, disabled: isDisabled, min: min, max: max, step: step, "aria-label": field.ariaLabel, "aria-invalid": hasError, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": sliderValue }), showValue && (_jsx("span", { className: "kandi-slider-value", children: sliderValue })), showTicks && (_jsxs("div", { className: "kandi-slider-ticks", children: [_jsx("span", { className: "kandi-slider-tick-min", children: min }), _jsx("span", { className: "kandi-slider-tick-max", children: max })] }))] }));
+            }
+            case 'rating': {
+                const { maxRating, icon, allowHalf } = field.widget;
+                const currentValue = value ?? 0;
+                const icons = {
+                    star: '★',
+                    heart: '❤',
+                    thumbsUp: '👍',
+                };
+                const activeIcon = icons[icon] || icons.star;
+                const inactiveIcons = {
+                    star: '☆',
+                    heart: '♡',
+                    thumbsUp: '👍',
+                };
+                const inactiveIcon = inactiveIcons[icon] || inactiveIcons.star;
+                return (_jsx("div", { className: "kandi-rating", role: "slider", "aria-label": field.ariaLabel ?? field.label, "aria-valuemin": 0, "aria-valuemax": maxRating, "aria-valuenow": currentValue, "aria-invalid": hasError, children: Array.from({ length: maxRating }, (_, i) => {
+                        const ratingValue = i + 1;
+                        const isActive = currentValue >= ratingValue;
+                        const isHalfActive = allowHalf && currentValue >= ratingValue - 0.5 && currentValue < ratingValue;
+                        return (_jsx("button", { type: "button", className: `kandi-rating-item ${isActive ? 'kandi-rating-active' : ''} ${isHalfActive ? 'kandi-rating-half' : ''}`, onClick: () => onChange(ratingValue), onBlur: onBlur, disabled: isDisabled, "aria-label": `Rate ${ratingValue} out of ${maxRating}`, children: isActive || isHalfActive ? activeIcon : inactiveIcon }, i));
+                    }) }));
+            }
+            case 'opinionScale': {
+                const { min, max, minLabel, maxLabel, showNumbers } = field.widget;
+                const scaleValue = value ?? null;
+                return (_jsxs("div", { className: "kandi-opinion-scale", children: [minLabel && _jsx("span", { className: "kandi-scale-label kandi-scale-min", children: minLabel }), _jsx("div", { className: "kandi-scale-options", role: "radiogroup", "aria-label": field.ariaLabel ?? field.label, children: Array.from({ length: max - min + 1 }, (_, i) => {
+                                const optionValue = min + i;
+                                const isSelected = scaleValue === optionValue;
+                                return (_jsx("button", { type: "button", className: `kandi-scale-option ${isSelected ? 'kandi-scale-selected' : ''}`, onClick: () => onChange(optionValue), onBlur: onBlur, disabled: isDisabled, role: "radio", "aria-checked": isSelected, children: showNumbers ? optionValue : '' }, optionValue));
+                            }) }), maxLabel && _jsx("span", { className: "kandi-scale-label kandi-scale-max", children: maxLabel })] }));
+            }
+            case 'hidden':
+                return (_jsx("input", { type: "hidden", id: field.id, name: field.id, value: value ?? field.widget.value ?? '' }));
+            case 'toggle':
+                return (_jsxs("label", { className: "kandi-toggle", children: [_jsx("input", { type: "checkbox", id: field.id, checked: value ?? false, onChange: (e) => onChange(e.target.checked), onBlur: onBlur, disabled: isDisabled, "aria-label": field.ariaLabel }), _jsx("span", { className: "kandi-toggle-slider" }), field.widget.onLabel && field.widget.offLabel && (_jsx("span", { className: "kandi-toggle-label", children: value ? field.widget.onLabel : field.widget.offLabel }))] }));
+            case 'dropdown':
+                return (_jsxs("select", { id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.value || null), onBlur: onBlur, disabled: isDisabled, "aria-label": field.ariaLabel, "aria-invalid": hasError, children: [_jsx("option", { value: "", children: field.placeholder ?? 'Select...' }), field.widget.options.map((opt) => (_jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)))] }));
+            case 'radio':
+                return (_jsx("div", { className: `kandi-radio-group kandi-layout-${field.widget.layout}`, role: "radiogroup", "aria-label": field.ariaLabel ?? field.label, "aria-invalid": hasError, children: field.widget.options.map((opt) => (_jsxs("label", { className: `kandi-radio-option ${value === opt.value ? 'kandi-radio-selected' : ''} ${opt.disabled ? 'kandi-radio-disabled' : ''}`, children: [_jsx("input", { type: "radio", name: field.id, value: opt.value, checked: value === opt.value, onChange: (e) => onChange(e.target.value), onBlur: onBlur, disabled: isDisabled || opt.disabled }), _jsx("span", { className: "kandi-radio-indicator" }), _jsx("span", { className: "kandi-radio-label", children: opt.label })] }, opt.value))) }));
+            case 'checkbox':
+                return (_jsx("div", { className: `kandi-checkbox-group kandi-layout-${field.widget.layout}`, role: "group", "aria-label": field.ariaLabel ?? field.label, "aria-invalid": hasError, children: field.widget.options.map((opt) => {
+                        const selectedValues = value ?? [];
+                        const isChecked = selectedValues.includes(opt.value);
+                        return (_jsxs("label", { className: `kandi-checkbox-option ${isChecked ? 'kandi-checkbox-selected' : ''} ${opt.disabled ? 'kandi-checkbox-disabled' : ''}`, children: [_jsx("input", { type: "checkbox", name: field.id, value: opt.value, checked: isChecked, onChange: (e) => {
+                                        const newValues = e.target.checked
+                                            ? [...selectedValues, opt.value]
+                                            : selectedValues.filter((v) => v !== opt.value);
+                                        onChange(newValues.length > 0 ? newValues : null);
+                                    }, onBlur: onBlur, disabled: isDisabled || opt.disabled }), _jsx("span", { className: "kandi-checkbox-indicator" }), _jsx("span", { className: "kandi-checkbox-label", children: opt.label })] }, opt.value));
+                    }) }));
+            case 'buttonGroup': {
+                const { options, multiple: isMultiple } = field.widget;
+                return (_jsx("div", { className: "kandi-button-group", role: isMultiple ? 'group' : 'radiogroup', "aria-label": field.ariaLabel ?? field.label, "aria-invalid": hasError, children: options.map((opt) => {
+                        const selectedValues = isMultiple
+                            ? (value ?? [])
+                            : [value];
+                        const isSelected = selectedValues.includes(opt.value);
+                        return (_jsx("button", { type: "button", className: `kandi-btn-group-option ${isSelected ? 'kandi-btn-selected' : ''}`, onClick: () => {
+                                if (isMultiple) {
+                                    const newValues = isSelected
+                                        ? selectedValues.filter((v) => v !== opt.value)
+                                        : [...selectedValues, opt.value];
+                                    onChange(newValues.length > 0 ? newValues : null);
+                                }
+                                else {
+                                    onChange(opt.value);
+                                }
+                            }, onBlur: onBlur, disabled: isDisabled || opt.disabled, "aria-pressed": isSelected, children: opt.label }, opt.value));
+                    }) }));
+            }
+            case 'date': {
+                const { minDate, maxDate } = field.widget;
+                return (_jsx("input", { type: "date", id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.value || null), onBlur: onBlur, disabled: isDisabled, readOnly: isReadOnly, min: minDate, max: maxDate, "aria-label": field.ariaLabel, "aria-invalid": hasError }));
+            }
+            case 'time': {
+                const { minuteStep } = field.widget;
+                return (_jsx("input", { type: "time", id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.value || null), onBlur: onBlur, disabled: isDisabled, readOnly: isReadOnly, step: minuteStep * 60, "aria-label": field.ariaLabel, "aria-invalid": hasError }));
+            }
+            case 'dateTime': {
+                const { minuteStep } = field.widget;
+                return (_jsx("input", { type: "datetime-local", id: field.id, value: value ?? '', onChange: (e) => onChange(e.target.value || null), onBlur: onBlur, disabled: isDisabled, readOnly: isReadOnly, step: minuteStep * 60, "aria-label": field.ariaLabel, "aria-invalid": hasError }));
+            }
+            case 'dateRange': {
+                const { minDate, maxDate } = field.widget;
+                const rangeValue = value ?? ['', ''];
+                return (_jsxs("div", { className: "kandi-date-range", children: [_jsxs("div", { className: "kandi-date-range-field", children: [_jsx("label", { htmlFor: `${field.id}-start`, className: "kandi-date-range-label", children: "Start" }), _jsx("input", { type: "date", id: `${field.id}-start`, value: rangeValue[0] ?? '', onChange: (e) => {
+                                        const newRange = [e.target.value || '', rangeValue[1] ?? ''];
+                                        onChange(newRange.some(Boolean) ? newRange : null);
+                                    }, onBlur: onBlur, disabled: isDisabled, readOnly: isReadOnly, min: minDate, max: rangeValue[1] || maxDate, "aria-invalid": hasError })] }), _jsx("span", { className: "kandi-date-range-separator", children: "to" }), _jsxs("div", { className: "kandi-date-range-field", children: [_jsx("label", { htmlFor: `${field.id}-end`, className: "kandi-date-range-label", children: "End" }), _jsx("input", { type: "date", id: `${field.id}-end`, value: rangeValue[1] ?? '', onChange: (e) => {
+                                        const newRange = [rangeValue[0] ?? '', e.target.value || ''];
+                                        onChange(newRange.some(Boolean) ? newRange : null);
+                                    }, onBlur: onBlur, disabled: isDisabled, readOnly: isReadOnly, min: rangeValue[0] || minDate, max: maxDate, "aria-invalid": hasError })] })] }));
+            }
+            case 'heading': {
+                const HeadingTag = `h${field.widget.level}`;
+                return React.createElement(HeadingTag, {}, field.widget.text);
+            }
+            case 'paragraph':
+                return _jsx("p", { className: "kandi-paragraph", children: field.widget.text });
+            case 'divider':
+                return _jsx("hr", { className: "kandi-divider" });
+            case 'spacer':
+                return _jsx("div", { className: "kandi-spacer", style: { height: field.widget.height } });
+            case 'image':
+                return (_jsx("img", { src: field.widget.src, alt: field.widget.alt, width: field.widget.width, height: field.widget.height, className: "kandi-image" }));
+            case 'fileUpload': {
+                const { accept, maxSize, maxFiles, multiple } = field.widget;
+                const currentFiles = value ?? [];
+                const handleFileChange = (e) => {
+                    const files = Array.from(e.target.files || []);
+                    if (files.length === 0)
+                        return;
+                    if (maxSize) {
+                        const oversizedFiles = files.filter(f => f.size > maxSize);
+                        if (oversizedFiles.length > 0) {
+                            console.warn('Some files exceed max size:', oversizedFiles);
+                        }
+                    }
+                    const validFiles = files.slice(0, maxFiles);
+                    const fileNames = validFiles.map(f => f.name);
+                    onChange(multiple ? [...currentFiles, ...fileNames] : fileNames);
+                };
+                const handleRemove = (fileName) => {
+                    onChange(currentFiles.filter(f => f !== fileName));
+                };
+                return (_jsxs("div", { className: "kandi-file-upload", children: [_jsx("input", { type: "file", id: field.id, accept: accept?.join(','), multiple: multiple, onChange: handleFileChange, onBlur: onBlur, disabled: isDisabled, "aria-label": field.ariaLabel, "aria-invalid": hasError, style: { display: 'none' } }), _jsxs("label", { htmlFor: field.id, className: "kandi-file-upload-label", children: [_jsx("span", { className: "kandi-file-upload-icon", children: "\uD83D\uDCC1" }), _jsx("span", { className: "kandi-file-upload-text", children: currentFiles.length > 0
+                                        ? `${currentFiles.length} file(s) selected`
+                                        : 'Click to upload or drag and drop' }), maxSize && (_jsxs("span", { className: "kandi-file-upload-hint", children: ["Max size: ", Math.round(maxSize / 1024 / 1024), "MB"] }))] }), currentFiles.length > 0 && (_jsx("ul", { className: "kandi-file-list", children: currentFiles.map((fileName) => (_jsxs("li", { className: "kandi-file-item", children: [_jsx("span", { className: "kandi-file-name", children: fileName }), _jsx("button", { type: "button", className: "kandi-file-remove", onClick: () => handleRemove(fileName), "aria-label": `Remove ${fileName}`, children: "\u00D7" })] }, fileName))) }))] }));
+            }
+            case 'imageUpload': {
+                const { accept: imgAccept, maxSize: imgMaxSize } = field.widget;
+                const imagePreview = value;
+                const handleImageChange = (e) => {
+                    const file = e.target.files?.[0];
+                    if (!file)
+                        return;
+                    if (imgMaxSize && file.size > imgMaxSize) {
+                        console.warn('Image exceeds max size');
+                        return;
+                    }
+                    const reader = new FileReader();
+                    reader.onload = (event) => {
+                        onChange(event.target?.result);
+                    };
+                    reader.readAsDataURL(file);
+                };
+                const handleClear = () => {
+                    onChange(null);
+                };
+                return (_jsxs("div", { className: "kandi-image-upload", children: [_jsx("input", { type: "file", id: field.id, accept: imgAccept?.join(',') || 'image/*', onChange: handleImageChange, onBlur: onBlur, disabled: isDisabled, "aria-label": field.ariaLabel, "aria-invalid": hasError, style: { display: 'none' } }), imagePreview ? (_jsxs("div", { className: "kandi-image-preview", children: [_jsx("img", { src: imagePreview, alt: "Preview" }), _jsx("button", { type: "button", className: "kandi-image-clear", onClick: handleClear, "aria-label": "Remove image", children: "\u00D7" })] })) : (_jsxs("label", { htmlFor: field.id, className: "kandi-image-upload-label", children: [_jsx("span", { className: "kandi-image-upload-icon", children: "\uD83D\uDDBC\uFE0F" }), _jsx("span", { className: "kandi-image-upload-text", children: "Click to upload an image" })] }))] }));
+            }
+            case 'signature': {
+                const { width, height, penColor } = field.widget;
+                const signatureData = value;
+                const canvasRef = React.useRef(null);
+                const [isDrawing, setIsDrawing] = React.useState(false);
+                const [lastPos, setLastPos] = React.useState(null);
+                React.useEffect(() => {
+                    const canvas = canvasRef.current;
+                    if (!canvas)
+                        return;
+                    const ctx = canvas.getContext('2d');
+                    if (!ctx)
+                        return;
+                    ctx.fillStyle = '#ffffff';
+                    ctx.fillRect(0, 0, width, height);
+                    if (signatureData) {
+                        const img = new Image();
+                        img.onload = () => {
+                            ctx.drawImage(img, 0, 0);
+                        };
+                        img.src = signatureData;
+                    }
+                }, [signatureData, width, height]);
+                const getPos = (e) => {
+                    const canvas = canvasRef.current;
+                    if (!canvas)
+                        return null;
+                    const rect = canvas.getBoundingClientRect();
+                    const scaleX = canvas.width / rect.width;
+                    const scaleY = canvas.height / rect.height;
+                    if ('touches' in e) {
+                        const touch = e.touches[0];
+                        return {
+                            x: (touch.clientX - rect.left) * scaleX,
+                            y: (touch.clientY - rect.top) * scaleY,
+                        };
+                    }
+                    return {
+                        x: (e.clientX - rect.left) * scaleX,
+                        y: (e.clientY - rect.top) * scaleY,
+                    };
+                };
+                const startDrawing = (e) => {
+                    if (isDisabled)
+                        return;
+                    setIsDrawing(true);
+                    setLastPos(getPos(e));
+                };
+                const draw = (e) => {
+                    if (!isDrawing || isDisabled)
+                        return;
+                    const canvas = canvasRef.current;
+                    const ctx = canvas?.getContext('2d');
+                    if (!canvas || !ctx)
+                        return;
+                    const pos = getPos(e);
+                    if (!pos || !lastPos)
+                        return;
+                    ctx.beginPath();
+                    ctx.strokeStyle = penColor;
+                    ctx.lineWidth = 2;
+                    ctx.lineCap = 'round';
+                    ctx.lineJoin = 'round';
+                    ctx.moveTo(lastPos.x, lastPos.y);
+                    ctx.lineTo(pos.x, pos.y);
+                    ctx.stroke();
+                    setLastPos(pos);
+                };
+                const stopDrawing = () => {
+                    if (isDrawing) {
+                        setIsDrawing(false);
+                        setLastPos(null);
+                        const canvas = canvasRef.current;
+                        if (canvas) {
+                            const dataUrl = canvas.toDataURL('image/png');
+                            onChange(dataUrl);
+                        }
+                    }
+                };
+                const clearSignature = () => {
+                    const canvas = canvasRef.current;
+                    const ctx = canvas?.getContext('2d');
+                    if (!canvas || !ctx)
+                        return;
+                    ctx.fillStyle = '#ffffff';
+                    ctx.fillRect(0, 0, width, height);
+                    onChange(null);
+                };
+                return (_jsxs("div", { className: "kandi-signature", children: [_jsx("canvas", { ref: canvasRef, width: width, height: height, className: "kandi-signature-canvas", onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, style: {
+                                border: '1px solid var(--kf-border, #ccc)',
+                                borderRadius: 'var(--kf-border-radius, 4px)',
+                                touchAction: 'none',
+                                cursor: isDisabled ? 'not-allowed' : 'crosshair',
+                            }, "aria-label": field.ariaLabel ?? 'Signature pad' }), _jsx("button", { type: "button", className: "kandi-signature-clear", onClick: clearSignature, disabled: isDisabled || !signatureData, children: "Clear" })] }));
+            }
+            case 'richText': {
+                const { maxLength } = field.widget;
+                const content = value ?? '';
+                return (_jsxs("div", { className: "kandi-rich-text", children: [_jsx("textarea", { id: field.id, value: content, onChange: (e) => {
+                                if (maxLength && e.target.value.length > maxLength)
+                                    return;
+                                onChange(e.target.value);
+                            }, onBlur: onBlur, disabled: isDisabled, readOnly: isReadOnly, placeholder: field.placeholder ?? 'Enter rich text...', className: "kandi-rich-text-editor", "aria-label": field.ariaLabel, "aria-invalid": hasError, style: { minHeight: '120px' } }), maxLength && (_jsxs("div", { className: "kandi-rich-text-counter", children: [content.length, "/", maxLength] }))] }));
+            }
+            case 'markdown': {
+                const { preview, maxLength } = field.widget;
+                const mdContent = value ?? '';
+                const [showPreview, setShowPreview] = React.useState(preview);
+                const renderMarkdownPreview = (md) => {
+                    return md
+                        .split('\n')
+                        .map((line, i) => {
+                        if (line.startsWith('# '))
+                            return _jsx("h1", { children: line.slice(2) }, i);
+                        if (line.startsWith('## '))
+                            return _jsx("h2", { children: line.slice(3) }, i);
+                        if (line.startsWith('### '))
+                            return _jsx("h3", { children: line.slice(4) }, i);
+                        if (line.startsWith('- '))
+                            return _jsx("li", { children: line.slice(2) }, i);
+                        if (line.trim() === '')
+                            return _jsx("br", {}, i);
+                        return _jsx("p", { children: line }, i);
+                    });
+                };
+                return (_jsxs("div", { className: "kandi-markdown", children: [_jsxs("div", { className: "kandi-markdown-header", children: [_jsx("button", { type: "button", className: `kandi-markdown-tab ${!showPreview ? 'active' : ''}`, onClick: () => setShowPreview(false), children: "Write" }), _jsx("button", { type: "button", className: `kandi-markdown-tab ${showPreview ? 'active' : ''}`, onClick: () => setShowPreview(true), children: "Preview" })] }), showPreview ? (_jsx("div", { className: "kandi-markdown-preview", children: renderMarkdownPreview(mdContent) })) : (_jsx("textarea", { id: field.id, value: mdContent, onChange: (e) => {
+                                if (maxLength && e.target.value.length > maxLength)
+                                    return;
+                                onChange(e.target.value);
+                            }, onBlur: onBlur, disabled: isDisabled, readOnly: isReadOnly, placeholder: field.placeholder, className: "kandi-markdown-editor", "aria-label": field.ariaLabel, "aria-invalid": hasError }))] }));
+            }
+            case 'codeEditor': {
+                const { language, theme, lineNumbers } = field.widget;
+                const code = value ?? '';
+                const lines = code.split('\n');
+                return (_jsxs("div", { className: `kandi-code-editor kandi-code-theme-${theme}`, children: [language && (_jsx("div", { className: "kandi-code-language", children: language })), _jsxs("div", { className: "kandi-code-container", children: [lineNumbers && (_jsx("div", { className: "kandi-code-line-numbers", children: lines.map((_, i) => (_jsx("span", { children: i + 1 }, i))) })), _jsx("textarea", { id: field.id, value: code, onChange: (e) => onChange(e.target.value), onBlur: onBlur, disabled: isDisabled, readOnly: isReadOnly, placeholder: field.placeholder, className: "kandi-code-textarea", spellCheck: false, "aria-label": field.ariaLabel, "aria-invalid": hasError })] })] }));
+            }
+            case 'matrix': {
+                const { rows, columns, inputType } = field.widget;
+                const matrixValue = value ?? {};
+                const handleCellChange = (rowId, colId, cellValue) => {
+                    const key = `${rowId}_${colId}`;
+                    if (inputType === 'radio') {
+                        const newValue = { ...matrixValue };
+                        columns.forEach(col => {
+                            delete newValue[`${rowId}_${col.id}`];
+                        });
+                        newValue[key] = cellValue;
+                        onChange(newValue);
+                    }
+                    else {
+                        onChange({ ...matrixValue, [key]: cellValue });
+                    }
+                };
+                return (_jsx("div", { className: "kandi-matrix", children: _jsxs("table", { className: "kandi-matrix-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), columns.map((col) => (_jsx("th", { children: col.label }, col.id)))] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { children: [_jsx("td", { className: "kandi-matrix-row-label", children: row.label }), columns.map((col) => {
+                                            const key = `${row.id}_${col.id}`;
+                                            const cellValue = matrixValue[key];
+                                            return (_jsxs("td", { className: "kandi-matrix-cell", children: [inputType === 'radio' && (_jsx("input", { type: "radio", name: `${field.id}_${row.id}`, checked: !!cellValue, onChange: () => handleCellChange(row.id, col.id, true), disabled: isDisabled })), inputType === 'checkbox' && (_jsx("input", { type: "checkbox", checked: !!cellValue, onChange: (e) => handleCellChange(row.id, col.id, e.target.checked), disabled: isDisabled })), inputType === 'text' && (_jsx("input", { type: "text", value: cellValue ?? '', onChange: (e) => handleCellChange(row.id, col.id, e.target.value), disabled: isDisabled })), inputType === 'number' && (_jsx("input", { type: "number", value: cellValue ?? '', onChange: (e) => handleCellChange(row.id, col.id, e.target.value), disabled: isDisabled }))] }, col.id));
+                                        })] }, row.id))) })] }) }));
+            }
+            case 'repeater': {
+                const { fields: repeaterFields, minItems, maxItems, addButtonText } = field.widget;
+                const items = value ?? [];
+                React.useEffect(() => {
+                    if (items.length < minItems) {
+                        const newItems = [...items];
+                        while (newItems.length < minItems) {
+                            newItems.push({});
+                        }
+                        onChange(newItems);
+                    }
+                }, [minItems]);
+                const handleAdd = () => {
+                    if (maxItems && items.length >= maxItems)
+                        return;
+                    onChange([...items, {}]);
+                };
+                const handleRemove = (index) => {
+                    if (items.length <= minItems)
+                        return;
+                    const newItems = items.filter((_, i) => i !== index);
+                    onChange(newItems);
+                };
+                const handleItemChange = (index, fieldId, fieldValue) => {
+                    const newItems = [...items];
+                    newItems[index] = { ...newItems[index], [fieldId]: fieldValue };
+                    onChange(newItems);
+                };
+                return (_jsxs("div", { className: "kandi-repeater", children: [items.map((item, index) => (_jsxs("div", { className: "kandi-repeater-item", children: [_jsxs("div", { className: "kandi-repeater-item-header", children: [_jsxs("span", { className: "kandi-repeater-item-number", children: ["#", index + 1] }), _jsx("button", { type: "button", className: "kandi-repeater-remove", onClick: () => handleRemove(index), disabled: isDisabled || items.length <= minItems, "aria-label": "Remove item", children: "\u00D7" })] }), _jsx("div", { className: "kandi-repeater-fields", children: repeaterFields.map((subField) => (_jsxs("div", { className: "kandi-repeater-field", children: [_jsx("label", { children: subField.label }), _jsx("input", { type: "text", value: item[subField.id] ?? '', onChange: (e) => handleItemChange(index, subField.id, e.target.value), disabled: isDisabled, placeholder: subField.placeholder })] }, subField.id))) })] }, index))), _jsx("button", { type: "button", className: "kandi-repeater-add", onClick: handleAdd, disabled: isDisabled || (maxItems !== undefined && items.length >= maxItems), children: addButtonText || 'Add Item' })] }));
+            }
+            case 'address': {
+                const { includeCountry, includePhone, countries } = field.widget;
+                const addressValue = value ?? {};
+                const handleAddressChange = (key, val) => {
+                    onChange({ ...addressValue, [key]: val });
+                };
+                return (_jsxs("div", { className: "kandi-address", children: [_jsx("div", { className: "kandi-address-row", children: _jsx("input", { type: "text", placeholder: "Street Address", value: addressValue.street ?? '', onChange: (e) => handleAddressChange('street', e.target.value), onBlur: onBlur, disabled: isDisabled, className: "kandi-address-street" }) }), _jsx("div", { className: "kandi-address-row", children: _jsx("input", { type: "text", placeholder: "Address Line 2", value: addressValue.street2 ?? '', onChange: (e) => handleAddressChange('street2', e.target.value), disabled: isDisabled, className: "kandi-address-street2" }) }), _jsxs("div", { className: "kandi-address-row kandi-address-row-split", children: [_jsx("input", { type: "text", placeholder: "City", value: addressValue.city ?? '', onChange: (e) => handleAddressChange('city', e.target.value), disabled: isDisabled, className: "kandi-address-city" }), _jsx("input", { type: "text", placeholder: "State/Province", value: addressValue.state ?? '', onChange: (e) => handleAddressChange('state', e.target.value), disabled: isDisabled, className: "kandi-address-state" }), _jsx("input", { type: "text", placeholder: "ZIP/Postal Code", value: addressValue.zip ?? '', onChange: (e) => handleAddressChange('zip', e.target.value), disabled: isDisabled, className: "kandi-address-zip" })] }), includeCountry && (_jsx("div", { className: "kandi-address-row", children: countries && countries.length > 0 ? (_jsxs("select", { value: addressValue.country ?? '', onChange: (e) => handleAddressChange('country', e.target.value), disabled: isDisabled, className: "kandi-address-country", children: [_jsx("option", { value: "", children: "Select Country" }), countries.map((c) => (_jsx("option", { value: c, children: c }, c)))] })) : (_jsx("input", { type: "text", placeholder: "Country", value: addressValue.country ?? '', onChange: (e) => handleAddressChange('country', e.target.value), disabled: isDisabled, className: "kandi-address-country" })) })), includePhone && (_jsx("div", { className: "kandi-address-row", children: _jsx("input", { type: "tel", placeholder: "Phone Number", value: addressValue.phone ?? '', onChange: (e) => handleAddressChange('phone', e.target.value), disabled: isDisabled, className: "kandi-address-phone" }) }))] }));
+            }
+            case 'name': {
+                const { includeMiddle, includePrefix, includeSuffix } = field.widget;
+                const nameValue = value ?? {};
+                const handleNameChange = (key, val) => {
+                    onChange({ ...nameValue, [key]: val });
+                };
+                return (_jsx("div", { className: "kandi-name", children: _jsxs("div", { className: "kandi-name-row", children: [includePrefix && (_jsxs("select", { value: nameValue.prefix ?? '', onChange: (e) => handleNameChange('prefix', e.target.value), disabled: isDisabled, className: "kandi-name-prefix", children: [_jsx("option", { value: "", children: "Prefix" }), _jsx("option", { value: "Mr.", children: "Mr." }), _jsx("option", { value: "Mrs.", children: "Mrs." }), _jsx("option", { value: "Ms.", children: "Ms." }), _jsx("option", { value: "Dr.", children: "Dr." }), _jsx("option", { value: "Prof.", children: "Prof." })] })), _jsx("input", { type: "text", placeholder: "First Name", value: nameValue.first ?? '', onChange: (e) => handleNameChange('first', e.target.value), onBlur: onBlur, disabled: isDisabled, className: "kandi-name-first" }), includeMiddle && (_jsx("input", { type: "text", placeholder: "Middle Name", value: nameValue.middle ?? '', onChange: (e) => handleNameChange('middle', e.target.value), disabled: isDisabled, className: "kandi-name-middle" })), _jsx("input", { type: "text", placeholder: "Last Name", value: nameValue.last ?? '', onChange: (e) => handleNameChange('last', e.target.value), disabled: isDisabled, className: "kandi-name-last" }), includeSuffix && (_jsxs("select", { value: nameValue.suffix ?? '', onChange: (e) => handleNameChange('suffix', e.target.value), disabled: isDisabled, className: "kandi-name-suffix", children: [_jsx("option", { value: "", children: "Suffix" }), _jsx("option", { value: "Jr.", children: "Jr." }), _jsx("option", { value: "Sr.", children: "Sr." }), _jsx("option", { value: "II", children: "II" }), _jsx("option", { value: "III", children: "III" }), _jsx("option", { value: "IV", children: "IV" })] }))] }) }));
+            }
+            case 'opinionScale': {
+                const { min, max, minLabel, maxLabel, showNumbers } = field.widget;
+                const scaleValue = value;
+                const range = Array.from({ length: max - min + 1 }, (_, i) => min + i);
+                return (_jsxs("div", { className: "kandi-opinion-scale", children: [_jsxs("div", { className: "kandi-opinion-scale-labels", children: [minLabel && _jsx("span", { className: "kandi-opinion-min-label", children: minLabel }), maxLabel && _jsx("span", { className: "kandi-opinion-max-label", children: maxLabel })] }), _jsx("div", { className: "kandi-opinion-scale-options", children: range.map((num) => (_jsx("button", { type: "button", className: `kandi-opinion-option ${scaleValue === num ? 'selected' : ''}`, onClick: () => onChange(num), disabled: isDisabled, "aria-pressed": scaleValue === num, children: showNumbers ? num : '' }, num))) })] }));
+            }
+            case 'hidden':
+                return (_jsx("input", { type: "hidden", id: field.id, name: field.id, value: field.widget.value }));
+            case 'calculated': {
+                const { formula, format } = field.widget;
+                const calculatedValue = value ?? '';
+                return (_jsxs("div", { className: "kandi-calculated", children: [_jsx("div", { className: "kandi-calculated-value", children: format ? `${format}${calculatedValue}` : calculatedValue }), _jsx("div", { className: "kandi-calculated-formula", title: formula, children: _jsxs("small", { children: ["Formula: ", formula] }) })] }));
+            }
+            default: {
+                const _exhaustiveCheck = field.widget;
+                return (_jsxs("div", { className: "kandi-widget-placeholder", children: ["Widget type \"", field.widget.type, "\" not yet implemented"] }));
+            }
+        }
+    };
+    const isLayoutWidget = ['heading', 'paragraph', 'divider', 'spacer', 'image'].includes(field.widget.type);
+    if (isLayoutWidget) {
+        return _jsx("div", { className: "kandi-field kandi-field-layout", children: renderWidget() });
+    }
+    return (_jsxs("div", { className: `kandi-field ${hasError ? 'kandi-field-error' : ''}`, style: {
+            gridColumn: field.style?.columnSpan ? `span ${field.style.columnSpan}` : undefined,
+            gridRow: field.style?.rowSpan ? `span ${field.style.rowSpan}` : undefined,
+            order: field.style?.order,
+        }, children: [!field.style?.hideLabel && (_jsxs("label", { htmlFor: field.id, className: "kandi-field-label", children: [field.label, field.required && _jsx("span", { className: "kandi-required", children: "*" })] })), field.description && (_jsx("p", { className: "kandi-field-description", children: field.description })), renderWidget(), hasError && (_jsx("div", { className: "kandi-field-errors", role: "alert", children: error.map((msg, i) => (_jsx("p", { children: msg }, i))) }))] }));
+}
+function PageRenderer({ page, formState, readOnly, disabled, }) {
+    const { setValue, setTouched, getFieldState } = formState;
+    return (_jsxs("div", { className: "kandi-page", children: [page.title && _jsx("h2", { className: "kandi-page-title", children: page.title }), page.description && _jsx("p", { className: "kandi-page-description", children: page.description }), _jsx("div", { className: "kandi-fields", children: page.fields.map((field) => {
+                    const fieldState = getFieldState(field.id);
+                    return (_jsx(FieldRenderer, { field: field, value: fieldState.value, error: fieldState.errors, touched: fieldState.touched, onChange: (value) => setValue(field.id, value), onBlur: () => setTouched(field.id), readOnly: readOnly, disabled: disabled }, field.id));
+                }) })] }));
+}
+function WizardProgress({ pages, currentPageIndex, visiblePageIndices, onPageClick, allowNavigation = false, }) {
+    const visiblePages = visiblePageIndices.map(idx => ({
+        page: pages[idx],
+        originalIndex: idx,
+    }));
+    const currentVisibleIndex = visiblePageIndices.indexOf(currentPageIndex);
+    const progressPercent = visiblePages.length > 1
+        ? (currentVisibleIndex / (visiblePages.length - 1)) * 100
+        : 100;
+    return (_jsxs("div", { className: "kandi-wizard-progress", children: [_jsx("div", { className: "kandi-progress-bar", children: _jsx("div", { className: "kandi-progress-fill", style: { width: `${progressPercent}%` } }) }), _jsx("div", { className: "kandi-steps", children: visiblePages.map(({ page, originalIndex }, visibleIdx) => {
+                    const isCompleted = visibleIdx < currentVisibleIndex;
+                    const isCurrent = originalIndex === currentPageIndex;
+                    const isClickable = allowNavigation && (isCompleted || isCurrent);
+                    return (_jsxs("button", { type: "button", className: `kandi-step ${isCompleted ? 'kandi-step-completed' : ''} ${isCurrent ? 'kandi-step-current' : ''}`, onClick: () => isClickable && onPageClick?.(originalIndex), disabled: !isClickable, "aria-current": isCurrent ? 'step' : undefined, children: [_jsx("span", { className: "kandi-step-indicator", children: isCompleted ? (_jsx("svg", { className: "kandi-step-check", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : (_jsx("span", { className: "kandi-step-number", children: visibleIdx + 1 })) }), page.title && (_jsx("span", { className: "kandi-step-title", children: page.title })), page.icon && (_jsx("span", { className: "kandi-step-icon", "aria-hidden": "true", children: page.icon }))] }, page.id));
+                }) })] }));
+}
+function WizardNavigation({ onPrevious, onNext, onSubmit, isSubmitting, isLastPage, isFirstPage, previousLabel = 'Previous', nextLabel = 'Next', submitLabel = 'Submit', }) {
+    return (_jsxs("div", { className: "kandi-wizard-navigation", children: [_jsx("button", { type: "button", className: "kandi-btn kandi-btn-secondary", onClick: onPrevious, disabled: isFirstPage || isSubmitting, children: previousLabel }), isLastPage ? (_jsx("button", { type: "submit", className: "kandi-btn kandi-btn-primary", onClick: onSubmit, disabled: isSubmitting, children: isSubmitting ? 'Submitting...' : submitLabel })) : (_jsx("button", { type: "button", className: "kandi-btn kandi-btn-primary", onClick: onNext, disabled: isSubmitting, children: nextLabel }))] }));
+}
+function KandiFormInner({ form, theme, initialValues, onSubmit, onChange, className, readOnly, disabled, }) {
+    const formState = useFormState({
+        form,
+        initialValues,
+        validationMode: form.settings?.validationMode,
+        onSubmit,
+    });
+    const [currentPageIndex, setCurrentPageIndex] = useState(0);
+    const visiblePageIndices = useMemo(() => formState.getVisiblePageIndices(), [formState]);
+    useEffect(() => {
+        if (!visiblePageIndices.includes(currentPageIndex) && visiblePageIndices.length > 0) {
+            setCurrentPageIndex(visiblePageIndices[0]);
+        }
+    }, [visiblePageIndices, currentPageIndex]);
+    const isMultiPage = form.pages.length > 1;
+    const currentVisibleIndex = visiblePageIndices.indexOf(currentPageIndex);
+    const isFirstPage = currentVisibleIndex === 0;
+    const isLastPage = currentVisibleIndex === visiblePageIndices.length - 1;
+    const handlePrevious = useCallback(() => {
+        if (currentVisibleIndex > 0) {
+            const prevPageIndex = visiblePageIndices[currentVisibleIndex - 1];
+            setCurrentPageIndex(prevPageIndex);
+        }
+    }, [currentVisibleIndex, visiblePageIndices]);
+    const handleNext = useCallback(() => {
+        const validation = formState.validatePage(currentPageIndex);
+        if (!validation.valid) {
+            return;
+        }
+        if (currentVisibleIndex < visiblePageIndices.length - 1) {
+            const nextPageIndex = visiblePageIndices[currentVisibleIndex + 1];
+            setCurrentPageIndex(nextPageIndex);
+        }
+    }, [currentPageIndex, currentVisibleIndex, visiblePageIndices, formState]);
+    const handlePageClick = useCallback((pageIndex) => {
+        const targetVisibleIndex = visiblePageIndices.indexOf(pageIndex);
+        if (targetVisibleIndex >= 0 && targetVisibleIndex <= currentVisibleIndex) {
+            setCurrentPageIndex(pageIndex);
+        }
+    }, [visiblePageIndices, currentVisibleIndex]);
+    useEffect(() => {
+        if (onChange) {
+            onChange(formState.state.values);
+        }
+    }, [onChange, formState.state.values]);
+    const themeStyle = theme
+        ? {
+            '--kf-primary': theme.colors.primary,
+            '--kf-secondary': theme.colors.secondary,
+            '--kf-accent': theme.colors.accent,
+            '--kf-background': theme.colors.background,
+            '--kf-surface': theme.colors.surface,
+            '--kf-text': theme.colors.text,
+            '--kf-text-secondary': theme.colors.textSecondary,
+            '--kf-error': theme.colors.error,
+            '--kf-success': theme.colors.success,
+            '--kf-warning': theme.colors.warning,
+            '--kf-border': theme.colors.border,
+            '--kf-font-family': theme.typography.fontFamily,
+            '--kf-heading-font': theme.typography.headingFontFamily ?? theme.typography.fontFamily,
+            '--kf-font-size': theme.typography.baseFontSize,
+            '--kf-line-height': theme.typography.lineHeight,
+            '--kf-border-radius': theme.borders.radius,
+            '--kf-spacing-xs': theme.spacing.xs,
+            '--kf-spacing-sm': theme.spacing.sm,
+            '--kf-spacing-md': theme.spacing.md,
+            '--kf-spacing-lg': theme.spacing.lg,
+            '--kf-spacing-xl': theme.spacing.xl,
+        }
+        : {};
+    const submitText = form.settings?.submitButtonText ?? 'Submit';
+    const showProgressBar = form.settings?.showProgressBar ?? true;
+    const currentPage = form.pages[currentPageIndex];
+    return (_jsxs("form", { className: `kandi-form theme-${form.theme} ${isMultiPage ? 'kandi-form-wizard' : ''} ${className ?? ''}`, style: themeStyle, onSubmit: formState.handleSubmit, noValidate: true, children: [(form.name || form.description) && (_jsxs("header", { className: "kandi-form-header", children: [form.name && _jsx("h1", { className: "kandi-form-title", children: form.name }), form.description && _jsx("p", { className: "kandi-form-description", children: form.description })] })), isMultiPage && showProgressBar && (_jsx(WizardProgress, { pages: form.pages, currentPageIndex: currentPageIndex, visiblePageIndices: visiblePageIndices, onPageClick: handlePageClick, allowNavigation: true })), _jsx("div", { className: "kandi-pages", children: isMultiPage ? (currentPage && (_jsx(PageRenderer, { page: currentPage, formState: formState, readOnly: readOnly, disabled: disabled }, currentPage.id))) : (form.pages.map((page) => (_jsx(PageRenderer, { page: page, formState: formState, readOnly: readOnly, disabled: disabled }, page.id)))) }), !readOnly && (_jsx("footer", { className: "kandi-form-footer", children: isMultiPage ? (_jsx(WizardNavigation, { currentPageIndex: currentPageIndex, visiblePageIndices: visiblePageIndices, onPrevious: handlePrevious, onNext: handleNext, onSubmit: formState.handleSubmit, isSubmitting: formState.state.isSubmitting, isLastPage: isLastPage, isFirstPage: isFirstPage, submitLabel: submitText })) : (_jsx("button", { type: "submit", className: "kandi-submit-btn", disabled: disabled || formState.state.isSubmitting, children: formState.state.isSubmitting ? 'Submitting...' : submitText })) }))] }));
+}
+export function KandiForm({ formId, form: inlineForm, initialValues, onSubmit, onChange, onError, className, readOnly = false, disabled = false, }) {
+    const storage = useFormStorage();
+    const [form, setForm] = useState(inlineForm ?? null);
+    const [theme, setTheme] = useState(null);
+    const [loading, setLoading] = useState(!inlineForm && !!formId);
+    const [error, setError] = useState(null);
+    const loadForm = useCallback(async () => {
+        if (!formId)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await storage.preview(formId);
+            setForm(result.form);
+            setTheme(result.theme);
+        }
+        catch (err) {
+            const loadError = err instanceof Error ? err : new Error(String(err));
+            setError(loadError);
+            onError?.(loadError);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [formId, storage, onError]);
+    useEffect(() => {
+        if (formId && !inlineForm) {
+            loadForm();
+        }
+    }, [formId, inlineForm, loadForm]);
+    useEffect(() => {
+        if (inlineForm) {
+            setForm(inlineForm);
+        }
+    }, [inlineForm]);
+    if (loading) {
+        return _jsx(FormLoading, {});
+    }
+    if (error) {
+        return _jsx(FormError, { error: error, onRetry: loadForm });
+    }
+    if (!form) {
+        return _jsx(FormError, { error: new Error('No form provided') });
+    }
+    return (_jsx(KandiFormInner, { form: form, theme: theme, initialValues: initialValues, onSubmit: onSubmit, onChange: onChange, className: className, readOnly: readOnly, disabled: disabled }));
+}
+//# sourceMappingURL=KandiForm.js.map