@mohasinac/appkit 2.7.45 → 2.7.46

package/dist/features/shell/StepForm.d.ts

@@ -23,6 +23,8 @@ export interface StepFormProps<T extends object = Record<string, unknown>> {
     onStepChange: (step: number) => void;
     /** Suppress the built-in action bar. Use FormShell's renderBottomBar instead. */
     hideActions?: boolean;
+    /** Per-step error flags — when true, step button shows a red error badge */
+    stepErrors?: boolean[];
 }
 export interface StepFormActionsProps {
     currentStep: number;
@@ -36,11 +38,13 @@ export interface StepFormActionsProps {
 /** Standalone step nav bar — use as `renderBottomBar` in FormShell. */
 export declare function StepFormActions({ currentStep, totalSteps, onNext, onPrev, completeLabel, isLoading, disabled, }: StepFormActionsProps): import("react/jsx-runtime").JSX.Element;
 /** Step indicator bar shown above step content. */
-export declare function StepIndicator({ steps, currentStep, onStepClick, }: {
+export declare function StepIndicator({ steps, currentStep, onStepClick, stepErrors, }: {
     steps: {
         label: string;
     }[];
     currentStep: number;
     onStepClick?: (index: number) => void;
+    /** True for each step that has a validation error — renders a red dot badge */
+    stepErrors?: boolean[];
 }): import("react/jsx-runtime").JSX.Element;
-export declare function StepForm<T extends object = Record<string, unknown>>({ steps, values, onChange, onComplete, completeLabel, isLoading, formId, currentStep, onStepChange, hideActions, }: StepFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function StepForm<T extends object = Record<string, unknown>>({ steps, values, onChange, onComplete, completeLabel, isLoading, formId, currentStep, onStepChange, hideActions, stepErrors, }: StepFormProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/features/shell/StepForm.js

@@ -13,25 +13,28 @@ export function StepFormActions({ currentStep, totalSteps, onNext, onPrev, compl
     return (_jsxs("div", { className: "flex items-center justify-between gap-2 px-5 py-3 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(_Fragment, { children: !isFirst && onPrev && (_jsx(Button, { variant: "outline", size: "sm", onClick: onPrev, disabled: disabled || isLoading, children: "\u2190 Back" })) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "text-xs text-[var(--appkit-color-text-muted)]", children: [currentStep + 1, " / ", totalSteps] }), _jsx(Button, { variant: "primary", size: "sm", onClick: onNext, disabled: disabled || isLoading, isLoading: isLoading && isLast, children: isLast ? completeLabel : nextStepLabel })] })] }));
 }
 /** Step indicator bar shown above step content. */
-export function StepIndicator({ steps, currentStep, onStepClick, }) {
+export function StepIndicator({ steps, currentStep, onStepClick, stepErrors, }) {
     return (_jsx("nav", { "aria-label": "Form steps", className: "flex items-center gap-0 mb-6 overflow-x-auto", children: steps.map((step, i) => {
             const isDone = i < currentStep;
             const isActive = i === currentStep;
+            const hasError = stepErrors?.[i] === true;
             return (_jsxs("div", { className: "flex items-center gap-0 flex-shrink-0", children: [_jsxs("button", { type: "button", disabled: !isDone && !isActive, onClick: () => isDone && onStepClick?.(i), className: classNames("flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors", isActive
                             ? "font-semibold text-[var(--appkit-color-primary)]"
                             : isDone
                                 ? "text-[var(--appkit-color-text-muted)] cursor-pointer hover:text-[var(--appkit-color-text)]"
-                                : "text-[var(--appkit-color-text-faint)] cursor-default"), children: [_jsx("span", { className: classNames("flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold border-2", isActive
-                                    ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
-                                    : isDone
-                                        ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
-                                        : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-faint)]"), children: isDone ? _jsx(Check, { className: "w-3 h-3" }) : i + 1 }), _jsx("span", { className: "hidden sm:inline", children: step.label })] }), i < steps.length - 1 && (_jsx("div", { className: classNames("w-6 h-px flex-shrink-0 mx-1", i < currentStep
+                                : "text-[var(--appkit-color-text-faint)] cursor-default"), children: [_jsxs("span", { className: "relative flex-shrink-0", children: [hasError && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-[var(--appkit-color-error)] z-10", "aria-label": "This step has errors" })), _jsx("span", { className: classNames("flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold border-2", hasError
+                                            ? "border-[var(--appkit-color-error)] bg-[var(--appkit-color-error)] text-white"
+                                            : isActive
+                                                ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
+                                                : isDone
+                                                    ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
+                                                    : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-faint)]"), children: isDone && !hasError ? _jsx(Check, { className: "w-3 h-3" }) : hasError ? "!" : i + 1 })] }), _jsx("span", { className: "hidden sm:inline", children: step.label })] }), i < steps.length - 1 && (_jsx("div", { className: classNames("w-6 h-px flex-shrink-0 mx-1", i < currentStep
                             ? "bg-[var(--appkit-color-primary)]"
                             : "bg-[var(--appkit-color-border)]") }))] }, i));
         }) }));
 }
-export function StepForm({ steps, values, onChange, onComplete, completeLabel = "Publish Now", isLoading = false, formId, currentStep, onStepChange, hideActions = false, }) {
-    const [stepErrors, setStepErrors] = useState({});
+export function StepForm({ steps, values, onChange, onComplete, completeLabel = "Publish Now", isLoading = false, formId, currentStep, onStepChange, hideActions = false, stepErrors, }) {
+    const [fieldErrors, setFieldErrors] = useState({});
     const [stepError, setStepError] = useState(null);
     // Persist step to localStorage if formId provided
     useEffect(() => {
@@ -75,8 +78,8 @@ export function StepForm({ steps, values, onChange, onComplete, completeLabel =
     }, [currentStep, onStepChange]);
     const currentStepDef = steps[currentStep];
     const isLast = currentStep === steps.length - 1;
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(StepIndicator, { steps: steps, currentStep: currentStep, onStepClick: (i) => { if (i < currentStep) {
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(StepIndicator, { steps: steps, currentStep: currentStep, stepErrors: stepErrors, onStepClick: (i) => { if (i < currentStep) {
                     setStepError(null);
                     onStepChange(i);
-                } } }), _jsx("div", { className: "flex-1", children: currentStepDef?.render({ values, onChange, errors: stepErrors }) }), !hideActions && stepError && (_jsx(Text, { className: "mt-3 text-sm text-[var(--appkit-color-error)]", children: stepError })), !hideActions && (_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void goNext(), onPrev: currentStep > 0 ? goPrev : undefined, completeLabel: completeLabel, isLoading: isLoading && isLast, disabled: isLoading }))] }));
+                } } }), _jsx("div", { className: "flex-1", children: currentStepDef?.render({ values, onChange, errors: fieldErrors }) }), !hideActions && stepError && (_jsx(Text, { className: "mt-3 text-sm text-[var(--appkit-color-error)]", children: stepError })), !hideActions && (_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void goNext(), onPrev: currentStep > 0 ? goPrev : undefined, completeLabel: completeLabel, isLoading: isLoading && isLast, disabled: isLoading }))] }));
 }