@nccirtu/tablefy 0.9.1 → 0.9.2

package/dist/forms/index.esm.js

@@ -10,7 +10,7 @@ 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 { CalendarIcon, Upload, File, X, GripVertical, Trash2, Plus, ChevronDown } 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';
@@ -925,6 +925,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;
@@ -947,12 +948,7 @@ function WizardRenderer({ steps, fields, data, errors, onChange, onBlur, isField
     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) => {
+    return (jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "rounded-lg bg-muted/50 p-6", children: [jsxs("p", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: ["Step: ", currentStep + 1, " of ", steps.length] }), jsxs("div", { className: "mt-1 flex items-center justify-between gap-4", children: [jsxs("div", { children: [jsx("h3", { className: "text-xl font-bold text-foreground", children: currentStepConfig?.label }), currentStepConfig?.description && (jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: currentStepConfig.description }))] }), jsxs("div", { className: "flex items-center gap-3", children: [jsx("div", { className: "h-3 w-40 overflow-hidden rounded-full bg-muted", children: jsx("div", { className: "h-full rounded-full bg-primary transition-all duration-300 ease-in-out", style: { width: `${progressPercent}%` } }) }), jsxs("span", { className: "text-sm font-medium text-muted-foreground", children: [progressPercent, "%"] })] })] })] }), 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));