@seedgrid/fe-components 2026.4.12 → 2026.4.13

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

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgWizard.meta.d.ts.map

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

@@ -0,0 +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"}

package/dist/wizard/SgWizard.meta.js

@@ -0,0 +1,50 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "navigation.wizard",
+    package: "@seedgrid/fe-components",
+    exportName: "SgWizard",
+    slug: "sg-wizard",
+    displayName: "SgWizard",
+    category: "navigation",
+    subcategory: "wizard",
+    description: "Fluxo multi-etapas com stepper, validacao por etapa, navegacao controlada e finalizacao assincrona.",
+    tags: ["navigation", "wizard", "steps", "flow", "form"],
+    capabilities: ["multi-step", "validation", "stepper", "previous-next", "async-finish"],
+    fieldSemantics: ["wizard", "multiStepFlow", "stepForm", "guidedFlow", "journey"],
+    props: [
+        { name: "children", type: "ReactNode", required: true, description: "Paginas do wizard renderizadas em ordem.", semanticRole: "data", bindable: false },
+        { name: "initialStep", type: "number", default: 0, description: "Indice inicial da etapa ativa.", semanticRole: "value", bindable: true },
+        { 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: "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: "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 },
+    sdui: { rendererType: "navigation.wizard", acceptsDataBinding: true, defaultProps: { initialStep: 0, stepper: "none", stepNavigation: "previous-and-next" } }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Guiar o usuario por um fluxo multi-etapas com validacao progressiva.",
+        "Organizar cadastros complexos, onboarding e configuracoes assistidas.",
+        "Separar coleta de dados em passos com navegacao controlada."
+    ],
+    avoidUseCases: [
+        "Troca simples de abas sem sequencia; nesses casos prefira PageControl.",
+        "Fluxos sem navegacao guiada; nesses casos prefira formularios comuns com Panel e inputs.",
+        "Dialogs curtos com uma unica acao."
+    ],
+    synonyms: ["wizard", "step form", "multi-step flow", "guided flow"],
+    relatedEntityFields: ["steps", "wizard", "onboarding", "setup", "journey"],
+    compositionHints: [
+        "Usar com SgWizardPage e inputs para formularios complexos.",
+        "Combinar com Button e dialogs de confirmacao quando houver etapa final de submit."
+    ],
+    rankingSignals: { freeText: 0, structuredChoice: 0.65, date: 0, number: 0, denseLayout: 0.8 }
+};

package/dist/wizard/SgWizardPage.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgWizardPage.meta.d.ts.map

package/dist/wizard/SgWizardPage.meta.d.ts.map

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

package/dist/wizard/SgWizardPage.meta.js

@@ -0,0 +1,44 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "navigation.wizard-page",
+    package: "@seedgrid/fe-components",
+    exportName: "SgWizardPage",
+    slug: "sg-wizard-page",
+    displayName: "SgWizardPage",
+    category: "navigation",
+    subcategory: "wizard-page",
+    description: "Pagina individual dentro de um wizard, com titulo, icone e conteudo associado a uma etapa.",
+    tags: ["navigation", "wizard", "step", "page", "form-step"],
+    capabilities: ["step-content", "title", "icon", "wizard-children"],
+    fieldSemantics: ["wizardStep", "stepPage", "guidedStep", "formStep"],
+    props: [
+        { name: "title", type: "string", description: "Titulo exibido no stepper do wizard.", semanticRole: "label", bindable: true },
+        { name: "icon", type: "ReactNode", description: "Icone opcional exibido quando o wizard usa stepper por icones.", semanticRole: "label", bindable: true },
+        { name: "children", type: "ReactNode", required: true, description: "Conteudo da etapa.", semanticRole: "data", bindable: false },
+        { 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" }],
+    showcase: { route: "/components/sg-wizard", hasPlayground: true, hasPropsTable: true },
+    sdui: { rendererType: "navigation.wizard-page", acceptsDataBinding: true, defaultProps: {} }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Declarar uma etapa individual dentro de um wizard.",
+        "Separar conteudo, validacao e rotulos por passo em fluxos guiados.",
+        "Modelar passos com icone e titulo em journeys multi-etapas."
+    ],
+    avoidUseCases: [
+        "Abas independentes; nesses casos prefira PageControlPage.",
+        "Containers soltos fora de um Wizard.",
+        "Blocos de layout sem sequencia navegacional."
+    ],
+    synonyms: ["wizard page", "wizard step", "step page", "form step"],
+    relatedEntityFields: ["step", "page", "wizardStep", "stage"],
+    compositionHints: [
+        "Usar sempre como filho de SgWizard.",
+        "Combinar com inputs e secoes de resumo para organizar cada etapa."
+    ],
+    rankingSignals: { freeText: 0, structuredChoice: 0.55, date: 0, number: 0, denseLayout: 0.72 }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seedgrid/fe-components",
-  "version": "2026.4.12",
+  "version": "2026.4.13",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -71,7 +71,7 @@
   },
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
-    "build": "pnpm run clean && tsc -p tsconfig.json && pnpm run build:sandbox",
+    "build": "pnpm run clean && tsc -p tsconfig.json && node scripts/build-ai-manifest.mjs && pnpm run build:sandbox",
     "build:sandbox": "tsup --config tsup.sandbox.config.ts",
     "dev": "tsc -p tsconfig.json --watch --preserveWatchOutput",
     "typecheck": "tsc -p tsconfig.json --noEmit",

package/dist/inputs/SgInputSelect.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import { type RhfFieldProps } from "../rhf";
-export type SgInputSelectProps = {
-    id: string;
-    label: string;
-    error?: string;
-    className?: string;
-    options: Array<{
-        value: string;
-        label: string;
-    }>;
-    selectProps: React.SelectHTMLAttributes<HTMLSelectElement> & {
-        ref?: React.Ref<HTMLSelectElement>;
-    };
-    alwaysFloat?: boolean;
-} & RhfFieldProps;
-export declare function SgInputSelect(props: SgInputSelectProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SgInputSelect.d.ts.map

package/dist/inputs/SgInputSelect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SgInputSelect.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG/D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,WAAW,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;QAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;KACpC,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,aAAa,CAAC;AA4KlB,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAmDtD"}

package/dist/inputs/SgInputSelect.js

@@ -1,139 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Controller } from "react-hook-form";
-import { resolveFieldError } from "../rhf";
-import { t, useComponentsI18n } from "../i18n";
-function ErrorText(props) {
-    if (!props.message)
-        return null;
-    return _jsx("p", { "data-sg-error": true, className: "text-xs text-red-600", children: props.message });
-}
-function mergeSelectRefs(primary, secondary) {
-    return (node) => {
-        if (typeof primary === "function") {
-            primary(node);
-        }
-        else if (primary && typeof primary === "object" && "current" in primary) {
-            primary.current = node;
-        }
-        if (typeof secondary === "function") {
-            secondary(node);
-        }
-        else if (secondary && typeof secondary === "object" && "current" in secondary) {
-            secondary.current = node;
-        }
-    };
-}
-function mergeSelectPropsWithField(selectProps, field) {
-    const resolvedValue = typeof field.value === "string" || typeof field.value === "number" || Array.isArray(field.value)
-        ? field.value
-        : field.value == null
-            ? ""
-            : String(field.value);
-    return {
-        ...selectProps,
-        value: resolvedValue,
-        onChange: (event) => {
-            field.onChange(event);
-            selectProps?.onChange?.(event);
-        },
-        onBlur: (event) => {
-            field.onBlur();
-            selectProps?.onBlur?.(event);
-        },
-        ref: (node) => {
-            field.ref(node);
-            const ref = selectProps?.ref;
-            if (!ref)
-                return;
-            if (typeof ref === "function") {
-                ref(node);
-            }
-            else if (ref && typeof ref === "object" && "current" in ref) {
-                ref.current = node;
-            }
-        }
-    };
-}
-function SgInputSelectBase(props) {
-    const i18n = useComponentsI18n();
-    const selectRef = React.useRef(null);
-    const [isFilled, setIsFilled] = React.useState(() => {
-        const value = props.selectProps.value ?? props.selectProps.defaultValue ?? "";
-        return String(value).length > 0;
-    });
-    React.useEffect(() => {
-        const next = (selectRef.current?.value ?? "").length > 0;
-        if (next !== isFilled)
-            setIsFilled(next);
-    });
-    React.useEffect(() => {
-        if (props.selectProps.value === undefined)
-            return;
-        setIsFilled(String(props.selectProps.value ?? "").length > 0);
-    }, [props.selectProps.value]);
-    const setRefs = React.useCallback((node) => {
-        selectRef.current = node;
-        const ref = props.selectProps.ref;
-        if (!ref)
-            return;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (typeof ref === "object") {
-            ref.current = node;
-        }
-    }, [props.selectProps]);
-    const handleChange = (event) => {
-        setIsFilled(event.currentTarget.value.length > 0);
-        props.selectProps.onChange?.(event);
-    };
-    const handleBlur = (event) => {
-        setIsFilled(event.currentTarget.value.length > 0);
-        props.selectProps.onBlur?.(event);
-    };
-    const alwaysFloat = props.alwaysFloat ?? (props.selectProps?.["data-floating"] === "always");
-    return (_jsxs("div", { children: [_jsxs("div", { className: "relative", children: [alwaysFloat ? (_jsx("label", { htmlFor: props.id, className: [
-                            "pointer-events-none absolute left-3 top-0 z-10 -translate-y-1/2 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 text-[11px] font-medium leading-none",
-                            props.error ? "text-[hsl(var(--destructive))]" : "text-foreground/70"
-                        ].join(" "), children: props.label })) : null, (() => {
-                        const hasError = Boolean(props.error);
-                        const baseClass = "peer h-11 w-full rounded-md bg-[var(--sg-input-bg,hsl(var(--background)))] text-[var(--sg-input-fg,hsl(var(--foreground)))] px-3 pt-4 text-sm shadow-sm focus:outline-none";
-                        const borderClass = hasError
-                            ? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
-                            : "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]";
-                        const resolvedClassName = props.className ?? [baseClass, borderClass].join(" ");
-                        return (_jsxs("select", { id: props.id, className: resolvedClassName, ...props.selectProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, children: [_jsx("option", { value: "", children: t(i18n, "components.inputs.select.placeholder") }), props.options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
-                    })(), alwaysFloat ? (_jsx("label", { htmlFor: props.id, className: "sr-only", children: props.label })) : (_jsx("label", { htmlFor: props.id, className: [
-                            "absolute left-3 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
-                            isFilled ? "-top-2 text-xs" : "top-3 text-sm",
-                            props.error ? "text-[hsl(var(--destructive))]" : isFilled ? "text-[hsl(var(--primary))]" : "text-foreground/60",
-                            props.error
-                                ? "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--destructive))]"
-                                : "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--primary))]"
-                        ].join(" "), children: props.label }))] }), _jsx(ErrorText, { message: props.error })] }));
-}
-export function SgInputSelect(props) {
-    const { control, name, register, rules, ...rest } = props;
-    if (name && register) {
-        const reg = register(name, rules);
-        return (_jsx(SgInputSelectBase, { ...rest, selectProps: {
-                ...rest.selectProps,
-                name,
-                onChange: (event) => {
-                    reg.onChange(event);
-                    rest.selectProps?.onChange?.(event);
-                },
-                onBlur: (event) => {
-                    reg.onBlur(event);
-                    rest.selectProps?.onBlur?.(event);
-                },
-                ref: mergeSelectRefs(reg.ref, rest.selectProps?.ref)
-            } }));
-    }
-    if (control && name) {
-        return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => (_jsx(SgInputSelectBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), selectProps: mergeSelectPropsWithField(rest.selectProps, field) })) }));
-    }
-    return _jsx(SgInputSelectBase, { ...rest });
-}