@nccirtu/tablefy 0.9.0 → 0.9.2

package/dist/forms/index.js

@@ -927,6 +927,7 @@ function WizardRenderer({ steps, fields, data, errors, onChange, onBlur, isField
     const currentStepConfig = steps[currentStep];
     const isLastStep = currentStep === steps.length - 1;
     const isFirstStep = currentStep === 0;
+    const progressPercent = Math.round(((currentStep + 1) / steps.length) * 100);
     const canProceed = currentStepConfig?.canProceed
         ? currentStepConfig.canProceed(data)
         : true;
@@ -949,12 +950,7 @@ function WizardRenderer({ steps, fields, data, errors, onChange, onBlur, isField
     const stepFields = currentStepConfig?.fields
         ? fields.filter((f) => currentStepConfig.fields.includes(f.name))
         : [];
-    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsx("nav", { "aria-label": "Progress", children: jsxRuntime.jsx("ol", { className: "flex items-center", children: steps.map((step, index) => (jsxRuntime.jsxs("li", { className: utils.cn("flex items-center", index < steps.length - 1 && "flex-1"), children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: utils.cn("flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-medium", index < currentStep &&
-                                            "border-primary bg-primary text-primary-foreground", index === currentStep &&
-                                            "border-primary text-primary", index > currentStep &&
-                                            "border-muted-foreground/25 text-muted-foreground"), children: index < currentStep ? (jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })) : (index + 1) }), jsxRuntime.jsxs("div", { className: "hidden sm:block", children: [jsxRuntime.jsx("p", { className: utils.cn("text-sm font-medium", index <= currentStep
-                                                    ? "text-foreground"
-                                                    : "text-muted-foreground"), children: step.label }), step.description && (jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: step.description }))] })] }), index < steps.length - 1 && (jsxRuntime.jsx("div", { className: utils.cn("mx-4 hidden h-0.5 flex-1 sm:block", index < currentStep ? "bg-primary" : "bg-muted") }))] }, step.id))) }) }), jsxRuntime.jsx("div", { children: currentStepConfig?.sections ? (jsxRuntime.jsx("div", { className: "space-y-4", children: currentStepConfig.sections.map((section) => (jsxRuntime.jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) })) : (jsxRuntime.jsx(GridLayout, { columns: columns, children: stepFields.map((field) => {
+    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-6", children: [jsxRuntime.jsxs("p", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: ["Step: ", currentStep + 1, " of ", steps.length] }), jsxRuntime.jsxs("div", { className: "mt-1 flex items-center justify-between gap-4", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h3", { className: "text-xl font-bold text-foreground", children: currentStepConfig?.label }), currentStepConfig?.description && (jsxRuntime.jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: currentStepConfig.description }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "h-3 w-40 overflow-hidden rounded-full bg-muted", children: jsxRuntime.jsx("div", { className: "h-full rounded-full bg-primary transition-all duration-300 ease-in-out", style: { width: `${progressPercent}%` } }) }), jsxRuntime.jsxs("span", { className: "text-sm font-medium text-muted-foreground", children: [progressPercent, "%"] })] })] })] }), jsxRuntime.jsx("div", { children: currentStepConfig?.sections ? (jsxRuntime.jsx("div", { className: "space-y-4", children: currentStepConfig.sections.map((section) => (jsxRuntime.jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) })) : (jsxRuntime.jsx(GridLayout, { columns: columns, children: stepFields.map((field) => {
                         if (!isFieldVisible(field))
                             return null;
                         return (jsxRuntime.jsx(FieldRenderer, { field: field, value: data[field.name], error: errors[field.name], disabled: isFieldDisabled(field), data: data, onChange: (v) => onChange(field.name, v), onBlur: onBlur ? () => onBlur(field.name) : undefined }, field.name));