@seedgrid/fe-components 2026.3.27 → 2026.3.28

package/dist/wizard/SgWizard.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { type WizardStepNavigation } from "./logic";
 export type SgWizardPageProps = {
     title?: string;
     icon?: React.ReactNode;
@@ -23,6 +24,7 @@ export type SgWizardProps = {
     initialStep?: number;
     labels?: Partial<SgWizardLabels>;
     stepper?: SgWizardStepper;
+    stepNavigation?: WizardStepNavigation;
     className?: string;
     style?: React.CSSProperties;
 };

package/dist/wizard/SgWizard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgWizard.d.ts","sourceRoot":"","sources":["../../src/wizard/SgWizard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAEpD;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAiFF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA+H5C"}
+{"version":3,"file":"SgWizard.d.ts","sourceRoot":"","sources":["../../src/wizard/SgWizard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAEpD;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAqGF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA2J5C"}

package/dist/wizard/SgWizard.js

@@ -1,32 +1,35 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { t, useComponentsI18n } from "../i18n";
-import { canProceedWizardAction, clampWizardStep } from "./logic";
+import { canNavigateToWizardStep, canProceedWizardAction, clampWizardStep } from "./logic";
 export function SgWizardPage(props) {
     return _jsx("div", { className: props.className, style: props.style, children: props.children });
 }
 function CheckIcon({ className }) {
     return (_jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }));
 }
-function StepperBar({ i18n, pages, currentStep, mode }) {
+function StepperBar({ i18n, pages, currentStep, mode, canNavigateStep, onNavigateStep }) {
     return (_jsx("nav", { "aria-label": t(i18n, "components.wizard.progress"), className: "mb-8", children: _jsx("ol", { className: "flex items-center", children: pages.map((page, i) => {
                 const isCompleted = i < currentStep;
                 const isCurrent = i === currentStep;
+                const isClickable = canNavigateStep(i);
                 const title = page.props.title ?? t(i18n, "components.wizard.step", { step: i + 1 });
                 const icon = page.props.icon;
                 const isLast = i === pages.length - 1;
-                return (_jsxs("li", { className: `flex items-center ${isLast ? "" : "flex-1"}`, children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: `flex items-center justify-center rounded-full border-2 transition-colors duration-200 ${isCompleted
-                                        ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
-                                        : isCurrent
-                                            ? "border-[hsl(var(--primary))] bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[hsl(var(--primary))]"
-                                            : "border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-muted-foreground"}`, style: { width: 40, height: 40 }, children: isCompleted ? (_jsx(CheckIcon, { className: "size-5" })) : mode === "icons" && icon ? (_jsx("span", { className: "flex items-center justify-center size-5", children: icon })) : (_jsx("span", { className: "text-sm font-semibold", children: i + 1 })) }), _jsx("span", { className: `mt-2 text-xs font-medium text-center max-w-[80px] leading-tight ${isCompleted || isCurrent ? "text-[hsl(var(--primary))]" : "text-muted-foreground"}`, children: title })] }), !isLast ? (_jsx("div", { className: "flex-1 mx-2 self-start", style: { marginTop: 19 }, children: _jsx("div", { className: `h-0.5 w-full transition-colors duration-200 ${isCompleted ? "bg-[hsl(var(--primary))]" : "bg-border"}` }) })) : null] }, i));
+                const content = (_jsxs(_Fragment, { children: [_jsx("div", { "aria-current": isCurrent ? "step" : undefined, className: `flex items-center justify-center rounded-full border-2 transition-colors duration-200 ${isCompleted
+                                ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+                                : isCurrent
+                                    ? "border-[hsl(var(--primary))] bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[hsl(var(--primary))]"
+                                    : "border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-muted-foreground"}`, style: { width: 40, height: 40 }, children: isCompleted ? (_jsx(CheckIcon, { className: "size-5" })) : mode === "icons" && icon ? (_jsx("span", { className: "flex items-center justify-center size-5", children: icon })) : (_jsx("span", { className: "text-sm font-semibold", children: i + 1 })) }), _jsx("span", { className: `mt-2 text-xs font-medium text-center max-w-[80px] leading-tight ${isCompleted || isCurrent ? "text-[hsl(var(--primary))]" : "text-muted-foreground"}`, children: title })] }));
+                return (_jsxs("li", { className: `flex items-center ${isLast ? "" : "flex-1"}`, children: [isClickable ? (_jsx("button", { type: "button", onClick: () => onNavigateStep(i), className: "flex cursor-pointer flex-col items-center rounded-md outline-none transition-opacity duration-200 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))] focus-visible:ring-offset-2", "data-sg-wizard-step": i, children: content })) : (_jsx("div", { className: "flex flex-col items-center", "data-sg-wizard-step": i, children: content })), !isLast ? (_jsx("div", { className: "flex-1 mx-2 self-start", style: { marginTop: 19 }, children: _jsx("div", { className: `h-0.5 w-full transition-colors duration-200 ${isCompleted ? "bg-[hsl(var(--primary))]" : "bg-border"}` }) })) : null] }, i));
             }) }) }));
 }
 export function SgWizard(props) {
     const i18n = useComponentsI18n();
     const pages = React.Children.toArray(props.children).filter((child) => React.isValidElement(child) && child.type === SgWizardPage);
     const stepper = props.stepper ?? "none";
+    const stepNavigation = props.stepNavigation ?? "previous-and-next";
     const [step, setStep] = React.useState(() => clampWizardStep(props.initialStep, pages.length));
     const [isFinishing, setIsFinishing] = React.useState(false);
     const [isValidating, setIsValidating] = React.useState(false);
@@ -76,11 +79,28 @@ export function SgWizard(props) {
             setIsValidating(false);
         }
     };
+    const canNavigateStep = React.useCallback((targetStep) => {
+        return canNavigateToWizardStep({
+            currentStep: step,
+            targetStep,
+            pageCount: pages.length,
+            stepNavigation
+        });
+    }, [pages.length, step, stepNavigation]);
     const goPrevious = () => {
         if (isFirst)
             return;
         setStep((prev) => Math.max(prev - 1, 0));
     };
+    const handleStepNavigation = async (targetStep) => {
+        if (!canNavigateStep(targetStep))
+            return;
+        if (targetStep < step) {
+            setStep(targetStep);
+            return;
+        }
+        await goNext();
+    };
     const handleFinish = async () => {
         if (isFinishing)
             return;
@@ -108,5 +128,5 @@ export function SgWizard(props) {
             setIsFinishing(false);
         }
     };
-    return (_jsxs("div", { className: props.className, style: props.style, children: [stepper !== "none" ? (_jsx(StepperBar, { pages: pages, currentStep: step, mode: stepper, i18n: i18n })) : null, _jsx("div", { ref: pageRef, children: pages[step] }), _jsxs("div", { className: "mt-6 flex flex-wrap items-center justify-between gap-3", children: [_jsx("div", { children: !isFirst ? (_jsx("button", { type: "button", onClick: goPrevious, className: "inline-flex h-10 items-center justify-center rounded-full border border-border px-5 text-sm font-semibold text-foreground/80 transition hover:bg-muted/60", children: labels.previous })) : null }), _jsx("div", { className: "flex items-center gap-3", children: !isLast ? (_jsx("button", { type: "button", onClick: goNext, disabled: isValidating, className: "inline-flex h-10 items-center justify-center rounded-full bg-[hsl(var(--primary))] px-5 text-sm font-semibold text-white shadow-lg shadow-[hsl(var(--primary)/0.35)] transition hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-60", children: labels.next })) : (_jsx("button", { type: "button", onClick: handleFinish, disabled: isFinishing || isValidating, className: "inline-flex h-10 items-center justify-center rounded-full bg-[hsl(var(--primary))] px-5 text-sm font-semibold text-white shadow-lg shadow-[hsl(var(--primary)/0.35)] transition hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-60", children: labels.finish })) })] })] }));
+    return (_jsxs("div", { className: props.className, style: props.style, children: [stepper !== "none" ? (_jsx(StepperBar, { pages: pages, currentStep: step, mode: stepper, i18n: i18n, canNavigateStep: canNavigateStep, onNavigateStep: handleStepNavigation })) : null, _jsx("div", { ref: pageRef, children: pages[step] }), _jsxs("div", { className: "mt-6 flex flex-wrap items-center justify-between gap-3", children: [_jsx("div", { children: !isFirst ? (_jsx("button", { type: "button", onClick: goPrevious, className: "inline-flex h-10 items-center justify-center rounded-full border border-border px-5 text-sm font-semibold text-foreground/80 transition hover:bg-muted/60", children: labels.previous })) : null }), _jsx("div", { className: "flex items-center gap-3", children: !isLast ? (_jsx("button", { type: "button", onClick: goNext, disabled: isValidating, className: "inline-flex h-10 items-center justify-center rounded-full bg-[hsl(var(--primary))] px-5 text-sm font-semibold text-white shadow-lg shadow-[hsl(var(--primary)/0.35)] transition hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-60", children: labels.next })) : (_jsx("button", { type: "button", onClick: handleFinish, disabled: isFinishing || isValidating, className: "inline-flex h-10 items-center justify-center rounded-full bg-[hsl(var(--primary))] px-5 text-sm font-semibold text-white shadow-lg shadow-[hsl(var(--primary)/0.35)] transition hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-60", children: labels.finish })) })] })] }));
 }

package/dist/wizard/logic.d.ts

@@ -1,4 +1,11 @@
 export declare function clampWizardStep(initialStep: number | undefined, pageCount: number): number;
+export type WizardStepNavigation = "none" | "previous" | "previous-and-next";
+export declare function canNavigateToWizardStep(args: {
+    currentStep: number;
+    targetStep: number;
+    pageCount: number;
+    stepNavigation?: WizardStepNavigation;
+}): boolean;
 export type WizardGuardRunner = {
     validateCurrentPage: () => boolean | Promise<boolean>;
     validateStep?: (index: number) => boolean | Promise<boolean>;

package/dist/wizard/logic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logic.d.ts","sourceRoot":"","sources":["../../src/wizard/logic.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAG1F;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mBAAmB,EAAE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACtD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,wBAAsB,sBAAsB,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,OAAO,CAAC,CAexF"}
+{"version":3,"file":"logic.d.ts","sourceRoot":"","sources":["../../src/wizard/logic.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAG1F;AAED,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,UAAU,GAAG,mBAAmB,CAAC;AAE7E,wBAAgB,uBAAuB,CAAC,IAAI,EAAE;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,oBAAoB,CAAC;CACvC,GAAG,OAAO,CAWV;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mBAAmB,EAAE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACtD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,wBAAsB,sBAAsB,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,OAAO,CAAC,CAexF"}

package/dist/wizard/logic.js

@@ -2,6 +2,16 @@ export function clampWizardStep(initialStep, pageCount) {
     const step = initialStep ?? 0;
     return Math.min(Math.max(step, 0), Math.max(pageCount - 1, 0));
 }
+export function canNavigateToWizardStep(args) {
+    const { currentStep, targetStep, pageCount, stepNavigation = "previous-and-next" } = args;
+    if (targetStep < 0 || targetStep >= pageCount || targetStep === currentStep) {
+        return false;
+    }
+    if (targetStep < currentStep) {
+        return stepNavigation === "previous" || stepNavigation === "previous-and-next";
+    }
+    return stepNavigation === "previous-and-next" && targetStep === currentStep + 1;
+}
 export async function canProceedWizardAction(runner) {
     const pageValid = await runner.validateCurrentPage();
     if (!pageValid)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seedgrid/fe-components",
-  "version": "2026.3.27",
+  "version": "2026.3.28",
   "license": "MIT",
   "type": "module",
   "repository": {