@seedgrid/fe-components 2026.8.6 → 2026.8.7

package/dist/wizard/SgWizard.d.ts

@@ -21,6 +21,18 @@ export type SgWizardProps = {
     onBeforeNext?: (index: number) => boolean | Promise<boolean>;
     onBeforeFinish?: (index: number) => boolean | Promise<boolean>;
     validateStep?: (index: number) => boolean | Promise<boolean>;
+    /**
+     * Desabilita o avanco de forma declarativa: o botao "Proximo" fica desabilitado (opaco, com
+     * cursor de bloqueio) e o stepper para de oferecer as etapas seguintes.
+     *
+     * Complementa `onBeforeNext`/`validateStep`, que so' agem NO CLIQUE. Quando o consumidor ja
+     * sabe que a etapa nao pode avancar — tipicamente o resultado de uma checagem assincrona que
+     * ja' terminou, como "este CNPJ ja' tem cadastro" — o botao continuava com aparencia de
+     * clicavel e o clique nao fazia nada, sem explicar por que.
+     *
+     * Nao afeta o botao de conclusao da ultima etapa: para esse caso existe `onBeforeFinish`.
+     */
+    nextDisabled?: boolean;
     initialStep?: number;
     labels?: Partial<SgWizardLabels>;
     stepper?: SgWizardStepper;

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;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"}
+{"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;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,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,2CAkK5C"}

package/dist/wizard/SgWizard.js

@@ -30,6 +30,7 @@ export function SgWizard(props) {
     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 nextDisabled = props.nextDisabled ?? false;
     const [step, setStep] = React.useState(() => clampWizardStep(props.initialStep, pages.length));
     const [isFinishing, setIsFinishing] = React.useState(false);
     const [isValidating, setIsValidating] = React.useState(false);
@@ -61,6 +62,10 @@ export function SgWizard(props) {
     const goNext = async () => {
         if (isLast)
             return;
+        // Guarda aqui, e nao so' no `disabled` do botao: o avanco pelo stepper cai neste mesmo
+        // caminho, entao um unico ponto cobre as duas formas de ir para frente.
+        if (nextDisabled)
+            return;
         if (isValidating)
             return;
         setIsValidating(true);
@@ -80,13 +85,17 @@ export function SgWizard(props) {
         }
     };
     const canNavigateStep = React.useCallback((targetStep) => {
+        // Com o avanco bloqueado, o stepper nao pode continuar oferecendo as etapas seguintes como
+        // clicaveis — seria um atalho com aparencia de habilitado que nao leva a lugar nenhum.
+        if (nextDisabled && targetStep > step)
+            return false;
         return canNavigateToWizardStep({
             currentStep: step,
             targetStep,
             pageCount: pages.length,
             stepNavigation
         });
-    }, [pages.length, step, stepNavigation]);
+    }, [pages.length, step, stepNavigation, nextDisabled]);
     const goPrevious = () => {
         if (isFirst)
             return;
@@ -128,5 +137,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, 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 })) })] })] }));
+    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 || nextDisabled, 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/SgWizard.meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgWizard.meta.d.ts","sourceRoot":"","sources":["../../src/wizard/SgWizard.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QA8BpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}
+{"version":3,"file":"SgWizard.meta.d.ts","sourceRoot":"","sources":["../../src/wizard/SgWizard.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAwCpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}

package/dist/wizard/SgWizard.meta.js

@@ -17,12 +17,22 @@ export const sgMeta = {
         { name: "stepper", type: '"numbered" | "icons" | "none"', default: "none", description: "Modo visual do stepper.", semanticRole: "appearance", bindable: true },
         { name: "stepNavigation", type: '"none" | "previous" | "previous-and-next"', default: "previous-and-next", description: "Define quais etapas podem ser acessadas clicando no stepper.", semanticRole: "behavior", bindable: true },
         { name: "validateStep", type: "(stepIndex: number) => boolean | Promise<boolean>", description: "Valida a etapa atual antes de avancar.", semanticRole: "validation", bindable: false },
+        { name: "onBeforeNext", type: "(index: number) => boolean | Promise<boolean>", description: "Roda ao clicar em Proximo; devolver false (ou uma Promise<false>) impede o avanco. Enquanto e aguardado, o botao fica desabilitado.", semanticRole: "validation", bindable: false },
+        { name: "onBeforeFinish", type: "(index: number) => boolean | Promise<boolean>", description: "Roda ao clicar em concluir; devolver false impede a finalizacao.", semanticRole: "validation", bindable: false },
+        { name: "nextDisabled", type: "boolean", default: false, description: "Desabilita o avanco de forma declarativa: o botao Proximo fica desabilitado e o stepper para de oferecer as etapas seguintes. Use quando o bloqueio JA e conhecido (ex.: uma checagem assincrona ja resolveu que a etapa nao pode avancar) — onBeforeNext/validateStep so agem no clique e deixam o botao com aparencia de clicavel. Nao afeta o botao da ultima etapa; para isso use onBeforeFinish.", semanticRole: "behavior", bindable: true },
         { name: "onStepChange", type: "(index: number) => void", description: "Callback disparado ao trocar de etapa.", semanticRole: "event", bindable: false },
         { name: "onFinish", type: "() => void | Promise<void>", required: true, description: "Acao executada ao concluir o wizard.", semanticRole: "event", bindable: false }
     ],
     states: ["default", "validating", "finishing", "completed"],
     examples: [
-        { id: "auto-validation", title: "Auto validation", file: "apps/showcase/src/app/components/sg-wizard/samples/auto-validation.tsx.sample", kind: "sample" },
+        { id: "validacao-automatica", title: "Validacao automatica", file: "apps/showcase/src/app/components/sg-wizard/samples/validacao-automatica.tsx.sample", kind: "sample" },
+        { id: "validatestep", title: "validateStep", file: "apps/showcase/src/app/components/sg-wizard/samples/validatestep.tsx.sample", kind: "sample" },
+        { id: "onbeforenext-async", title: "onBeforeNext assincrono", file: "apps/showcase/src/app/components/sg-wizard/samples/onbeforenext-async.tsx.sample", kind: "sample" },
+        { id: "nextdisabled", title: "Avanco bloqueado (nextDisabled)", file: "apps/showcase/src/app/components/sg-wizard/samples/nextdisabled.tsx.sample", kind: "sample" },
+        { id: "stepnavigation", title: "stepNavigation", file: "apps/showcase/src/app/components/sg-wizard/samples/stepnavigation.tsx.sample", kind: "sample" },
+        { id: "stepper-numerado", title: "Stepper numerado", file: "apps/showcase/src/app/components/sg-wizard/samples/stepper-numerado.tsx.sample", kind: "sample" },
+        { id: "stepper-com-icones", title: "Stepper com icones", file: "apps/showcase/src/app/components/sg-wizard/samples/stepper-com-icones.tsx.sample", kind: "sample" },
+        { id: "labels-customizados", title: "Labels customizados", file: "apps/showcase/src/app/components/sg-wizard/samples/labels-customizados.tsx.sample", kind: "sample" },
         { id: "playground", title: "Playground", file: "apps/showcase/src/app/components/sg-wizard/sg-wizard.tsx.playground", kind: "playground" }
     ],
     showcase: { route: "/components/sg-wizard", hasPlayground: true, hasPropsTable: true },

package/dist/wizard/SgWizardPage.meta.js

@@ -18,7 +18,7 @@ export const sgMeta = {
         { name: "className", type: "string", description: "Classes adicionais da etapa.", semanticRole: "appearance", bindable: true }
     ],
     states: ["default", "active", "completed"],
-    examples: [{ id: "auto-validation", title: "Auto validation", file: "apps/showcase/src/app/components/sg-wizard/samples/auto-validation.tsx.sample", kind: "sample" }],
+    examples: [{ id: "validacao-automatica", title: "Validacao automatica", file: "apps/showcase/src/app/components/sg-wizard/samples/validacao-automatica.tsx.sample", kind: "sample" }],
     showcase: { route: "/components/sg-wizard", hasPlayground: true, hasPropsTable: true },
     sdui: { rendererType: "navigation.wizard-page", acceptsDataBinding: true, defaultProps: {} }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seedgrid/fe-components",
-  "version": "2026.8.6",
+  "version": "2026.8.7",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -69,7 +69,7 @@
     "tailwindcss-animate": "^1.0.7",
     "postcss": "^8.4.45",
     "autoprefixer": "^10.4.20",
-    "@seedgrid/fe-theme": "2026.8.6"
+    "@seedgrid/fe-theme": "2026.8.7"
   },
   "dependencies": {
     "@pqina/flip": "^1.8.4",
@@ -77,7 +77,7 @@
   },
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
-    "build": "pnpm run clean && node scripts/build-style.mjs && tsc -p tsconfig.json && node scripts/extract-props.mjs && node scripts/build-ai-manifest.mjs && pnpm run build:sandbox",
+    "build": "pnpm run clean && node scripts/build-style.mjs && tsc -p tsconfig.json && node scripts/extract-props.mjs && node scripts/build-ai-manifest.mjs && node scripts/validate-example-refs.mjs && pnpm run build:sandbox",
     "build:sandbox": "tsup --config tsup.sandbox.config.ts",
     "dev": "node scripts/build-style.mjs && tsc -p tsconfig.json --watch --preserveWatchOutput",
     "typecheck": "tsc -p tsconfig.json --noEmit",