zormy 0.0.1 → 0.0.11

package/AI_SPEC.md

@@ -0,0 +1,224 @@
+# Zormy — AI Spec
+
+> Especificação para assistentes de IA: como usar o pacote **zormy** em projetos React.
+
+## O que é
+
+**Zormy** é uma biblioteca para formulários tipados e reutilizáveis em React. Combina:
+
+- **React Hook Form** — controle de formulário
+- **Zod** — validação e schemas
+- **TypeScript** — inferência de tipos end-to-end
+
+Conceitos principais:
+
+- **Campos reutilizáveis**: criados com `field("key")` ou `abstractField()`, com `.schema()` e `.render()`.
+- **Resolver**: `formyResolver({ fields: [...] })` monta o schema Zod a partir dos campos e integra com react-hook-form.
+- **Form**: componente `<Form methods={...}>` que fornece contexto (FormProvider).
+- **Wizards**: fluxos multi-step com `createWizardConfig`, `createWizardComponents` e `useWizard`.
+
+---
+
+## Instalação e dependências
+
+```bash
+pnpm add zormy zod react-hook-form @hookform/resolvers
+```
+
+Peer dependencies: `react` (^18), `react-hook-form` (^7.71.1), `zod` (^3.25.28), `@hookform/resolvers` (^5.2.2).
+
+---
+
+## API principal (import de `zormy`)
+
+| Exportação | Uso |
+|------------|-----|
+| `field(key)` | Builder para campo com chave fixa (ex: `"name"`, `"user.email"`) |
+| `abstractField()` | Builder para campo sem chave; usar `.extend({ key: "..." })` para obter um campo concreto |
+| `formyResolver({ fields })` | Resolver para `useForm`; recebe array de campos e infere tipo do formulário |
+| `Form` | `<Form methods={form}>` — fornece contexto do formulário (e opcionalmente `<form>`) |
+| `useForm` | Re-export do react-hook-form (para tipagem consistente) |
+| `createWizardConfig({ steps, fields, shouldIncludeStep? })` | Configuração do wizard (steps e campos por step) |
+| `createWizardComponents(config)` | Retorna `{ Wizard, Step }` tipados |
+| `useWizard(config & { defaultValues, onSubmit?, ... })` | Hook do wizard (form + navegação entre steps) |
+| `useWizardContext` | Acesso ao contexto do wizard |
+| `useAutoSaveContext`, `AutoSaveStatus` | Auto-save no wizard |
+| `Controller`, `SubmitHandler` | Re-export do react-hook-form |
+
+Tipos úteis: `FieldKey`, `FieldsToObject`, `FieldValue`.
+
+---
+
+## Padrão: formulário simples
+
+1. Definir campos com `field("key").schema(zodSchema).render(...)`.
+2. Criar o form com `useForm({ resolver: formyResolver({ fields: [...] }), defaultValues })`.
+3. Envolver a UI em `<Form methods={form}>` e renderizar os campos como componentes.
+
+```tsx
+import { z } from "zod";
+import { field, Form, formyResolver, useForm } from "zormy";
+
+const NameField = field("name")
+  .schema(z.string().min(3, "Mín. 3 caracteres"))
+  .render(({ register, fieldState }) => (
+    <div>
+      <input {...register()} />
+      {fieldState.error && <span>{fieldState.error.message}</span>}
+    </div>
+  ));
+
+function MyForm() {
+  const form = useForm({
+    resolver: formyResolver({ fields: [NameField] }),
+    defaultValues: { name: "" },
+  });
+  return (
+    <Form methods={form} onSubmit={form.handleSubmit((data) => console.log(data))}>
+      <NameField />
+      <button type="submit">Enviar</button>
+    </Form>
+  );
+}
+```
+
+- **Importante**: o `resolver` deve usar exatamente os campos que serão renderizados; `defaultValues` deve cobrir todas as chaves dos campos (incluindo aninhadas, se houver).
+- No `render`, use `register()` sem argumentos para usar a chave do campo; para sobrescrever: `register({ name: "outra.chave" })`.
+
+---
+
+## Campos aninhados (dot-notation)
+
+Chaves com ponto são suportadas: o resolver monta um schema aninhado e os valores são acessados como `address.street`, etc.
+
+```tsx
+const StreetField = field("address.street")
+  .schema(z.string().min(1))
+  .render(({ register }) => <input {...register()} />);
+// defaultValues: { address: { street: "" } }
+```
+
+---
+
+## Campos com dependências (dinâmicos)
+
+Use `.dependsOn(OutroCampo, ...)` e depois `.schema()` com função que recebe `formValues` para schema condicional.
+
+```tsx
+const PhoneField = field("phone")
+  .dependsOn(NameField)
+  .schema((formValues) => {
+    const name = formValues?.name;
+    return name?.length ? z.string().min(10, "Telefone obrigatório") : z.string().optional();
+  })
+  .render(({ register, fieldState, getValues }) => {
+    const name = getValues("name");
+    const required = Boolean(name?.length);
+    return <input {...register()} required={required} />;
+  });
+```
+
+O array passado para `formyResolver({ fields })` deve incluir todos os campos usados (incluindo os de `dependsOn`).
+
+---
+
+## Campo abstrato (template)
+
+Use quando vários campos compartilham schema e UI, mudando só a chave.
+
+```tsx
+const BaseText = abstractField()
+  .schema(z.string().min(3))
+  .render(({ register, fieldState }) => (
+    <div>
+      <input {...register()} />
+      {fieldState.error && <span>{fieldState.error.message}</span>}
+    </div>
+  ));
+
+const NameField = BaseText.extend({ key: "name" });
+const EmailField = BaseText.extend({ key: "email" });
+```
+
+---
+
+## Wizard multi-step
+
+1. Definir `steps` (array de strings literais, ex: `["personal", "contact"] as const`).
+2. Mapear cada step para um array de campos em `fields`: `{ personal: [NameField], contact: [EmailField] }`.
+3. `createWizardConfig({ steps, fields, shouldIncludeStep? })`.
+4. `createWizardComponents(config)` → `{ Wizard, Step }`.
+5. `useWizard({ ...config, defaultValues, onSubmit?, initialStep?, mode?, autoSave?, ... })`.
+6. Renderizar: `<Wizard wizard={wizard}>` e dentro `<Step step="personal">` etc.; usar `wizard.nextStep`, `wizard.prevStep` para navegação.
+
+```tsx
+const config = createWizardConfig({
+  steps: ["personal", "contact"] as const,
+  fields: { personal: [NameField], contact: [EmailField] },
+});
+const { Wizard, Step } = createWizardComponents(config);
+
+function MyWizard() {
+  const wizard = useWizard({
+    ...config,
+    defaultValues: { name: "", email: "" },
+    onSubmit: (data) => console.log(data),
+  });
+  return (
+    <Wizard wizard={wizard}>
+      <Step step="personal">
+        <NameField />
+        <button type="button" onClick={wizard.nextStep}>Próximo</button>
+      </Step>
+      <Step step="contact">
+        <EmailField />
+        <button type="button" onClick={wizard.prevStep}>Voltar</button>
+        <button type="submit">Enviar</button>
+      </Step>
+    </Wizard>
+  );
+}
+```
+
+- `defaultValues` deve cobrir todas as chaves de todos os campos de todos os steps.
+- Steps condicionais: use `shouldIncludeStep: (step, formValues) => boolean` em `createWizardConfig`.
+
+---
+
+## Form sem elemento `<form>`
+
+Use `<Form methods={form} contextOnly>` e um único filho que receberá **apenas o contexto** (FormProvider). Props HTML passadas ao `Form` **não** são repassadas automaticamente ao filho (ex.: componente customizado ou Radix Slot).
+
+---
+
+## O que evitar
+
+- Não passar para `formyResolver` campos que não serão renderizados no formulário (ou o tipo e o schema podem ficar inconsistentes).
+- Não misturar chaves flat e aninhadas de forma inconsistente em `defaultValues` (ex.: campo `"user.email"` exige `defaultValues.user.email`).
+- Em wizards, não esquecer de incluir todos os campos de todos os steps em `defaultValues`.
+- Para campos com `dependsOn`, sempre incluir os campos dependentes no array `fields` do resolver (e no wizard, no step correto).
+
+---
+
+## Estrutura de testes (manutenção)
+
+Em `packages/zormy/__tests__/`:
+
+- **`unit/`** — testes unitários por módulo: `unit/fields/`, `unit/wizard/`, `unit/utils/`, `unit/resolvers/`.
+- **`types/`** — testes de tipo (`.test-d.ts`): `types/fields/`, `types/wizard/`.
+- **`performance/`** — benchmarks e testes de re-render (mantido como está).
+- **`integration/`** — reservado para testes end-to-end futuros (vários módulos).
+
+Comandos: `pnpm test`, `pnpm test:typecheck`, `pnpm test:bench`.
+
+---
+
+## Resumo para geração de código
+
+1. **Formulário simples**: `field("key").schema(z...).render(({ register, fieldState }) => ...)` → `formyResolver({ fields: [...] })` → `useForm` → `<Form methods={form}>` + campos.
+2. **Aninhado**: chave `"a.b.c"` e `defaultValues: { a: { b: { c: "" } } }`.
+3. **Condicional**: `.dependsOn(OutroCampo).schema((formValues) => z...)` e incluir dependentes em `fields`.
+4. **Template**: `abstractField().schema(...).render(...)` e `.extend({ key: "..." })`.
+5. **Wizard**: `createWizardConfig` → `createWizardComponents` → `useWizard` → `<Wizard>` + `<Step step="...">` e botões com `nextStep`/`prevStep`.
+
+Versão do pacote: ver `package.json`. Requer React 18+, TypeScript 5+ recomendado.

package/README.md

@@ -1,21 +1,126 @@
-# zormy
-
-> Initial placeholder package - currently under development
-
-## Installation
-
-```bash
-npm install zormy
-```
-
-## Usage
-
-```javascript
-const zormy = require('zormy');
-
-// Coming soon...
-```
-
-## License
-
-ISC
+# Zormy
+
+Sistema de formulários tipados e reutilizáveis para React, com validação Zod, campos aninhados e wizards multi-step.
+
+## Instalação
+
+```bash
+pnpm add zormy zod react-hook-form @hookform/resolvers
+```
+
+Ou com npm/yarn:
+
+```bash
+npm install zormy zod react-hook-form @hookform/resolvers
+```
+
+## Uso rápido
+
+### Formulário simples
+
+```tsx
+import { field, Form, formyResolver, useForm } from "zormy";
+import { z } from "zod";
+
+const NameField = field("name")
+  .schema(z.string().min(3, "Mínimo 3 caracteres"))
+  .render(({ register, fieldState }) => (
+    <div>
+      <input {...register()} />
+      {fieldState.error && <span>{fieldState.error.message}</span>}
+    </div>
+  ));
+
+function MyForm() {
+  const form = useForm({
+    resolver: formyResolver({ fields: [NameField] }),
+    defaultValues: { name: "" },
+    mode: "onChange", // ou "onBlur" | "onSubmit" | "onTouched" | "all"
+  });
+
+  return (
+    <Form methods={form} onSubmit={form.handleSubmit((data) => console.log(data))}>
+      <NameField />
+      <button type="submit">Enviar</button>
+    </Form>
+  );
+}
+```
+
+### Wizard multi-step
+
+```tsx
+import { createWizardConfig, createWizardComponents, useWizard, field } from "zormy";
+import { z } from "zod";
+
+const NameField = field("name").schema(z.string().min(3)).render(({ register, fieldState }) => (
+  <div>
+    <input {...register()} />
+    {fieldState.error && <span>{fieldState.error.message}</span>}
+  </div>
+));
+
+const EmailField = field("email").schema(z.string().email()).render(({ register, fieldState }) => (
+  <div>
+    <input type="email" {...register()} />
+    {fieldState.error && <span>{fieldState.error.message}</span>}
+  </div>
+));
+
+const config = createWizardConfig({
+  steps: ["personal", "contact"] as const,
+  fields: {
+    personal: [NameField],
+    contact: [EmailField],
+  },
+});
+
+const { Wizard, Step } = createWizardComponents(config);
+
+function MyWizard() {
+  const wizard = useWizard({
+    ...config,
+    defaultValues: { name: "", email: "" },
+    mode: "onChange", // opcional: modo de validação do wizard
+    onSubmit: (data) => console.log(data),
+  });
+
+  return (
+    <Wizard methods={wizard} onSubmit={wizard.handleSubmit()}>
+      <Step step="personal"><NameField /></Step>
+      <Step step="contact"><EmailField /></Step>
+      <div>
+        {!wizard.isFirstStep && <button type="button" onClick={wizard.back}>Voltar</button>}
+        {wizard.isLastStep ? (
+          <button type="submit">Finalizar</button>
+        ) : (
+          <button type="button" onClick={() => void wizard.next()}>Próximo</button>
+        )}
+      </div>
+    </Wizard>
+  );
+}
+```
+
+## Recursos
+
+- **TypeScript**: inferência de tipos a partir dos campos e do Zod
+- **Validação**: schemas Zod estáticos ou dinâmicos (por valores do formulário)
+- **Campos reutilizáveis**: `field("key")` e `abstractField()` com `.extend()`
+- **Wizards**: steps, validação por etapa, steps condicionais, auto-save opcional
+- **Resolver**: `formyResolver({ fields })` com suporte a chaves aninhadas (`"user.email"`)
+
+## Documentação
+
+Para guias completos, exemplos e API reference, consulte a [documentação do projeto](https://github.com/your-org/zormy) (ou o site de docs quando disponível).
+
+## Peer dependencies
+
+- `react` (catalog)
+- `react-hook-form` ^7.71.1
+- `zod` ^3.25.28
+- `@hookform/resolvers` ^5.2.2
+
+## Licença
+
+Private / conforme o projeto.

package/dist/src/components/Form.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+/**
+ * Componente de formulário integrado ao react-hook-form.
+ *
+ * Permite controle flexível do elemento raiz usando a prop `contextOnly`.
+ * - Por padrão, renderiza um `<form>`.
+ * - Com `contextOnly`, fornece apenas o contexto do formulário e renderiza o filho customizado, repassando as props do formulário para ele (não renderiza `<form>`).
+ *
+ * @example
+ * ```tsx
+ * // Modo padrão:
+ * <Form methods={formMethods}>
+ *   <input name="foo" />
+ * </Form>
+ *
+ * // Com contextOnly (ex: usando Radix Slot ou wrapper customizado):
+ * <Form methods={formMethods} contextOnly>
+ *   <CustomFormComponent />
+ * </Form>
+ * ```
+ */
+const Form = (props) => {
+    const { methods, contextOnly, children, ...formProps } = props;
+    if (contextOnly) {
+        // Tipagem garante que contextOnly==true implica filhos ReactElement.
+        return (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...methods, children: children });
+    }
+    // Padrão: renderiza <form>
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...methods, children: (0, jsx_runtime_1.jsx)("form", { ...formProps, children: children }) }));
+};
+exports.Form = Form;

package/dist/src/components/Form.d.cts

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import type { FieldValues, UseFormReturn } from "react-hook-form";
+/**
+ * Props do componente Form.
+ *
+ * @template TFieldValues - Tipo dos valores do formulário
+ * @template TContextOnly - Define se o formulário fornece apenas o contexto (sem envolver em `<form>`). Se true, espera um elemento filho do tipo ReactElement que receberá as props do formulário.
+ *
+ * @property methods - Instância de UseFormReturn do react-hook-form.
+ * @property contextOnly - Se verdadeiro, fornece apenas o contexto do formulário e renderiza o filho customizado **sem envolver em `<form>` e sem repassar props HTML do `Form` para o filho**. Útil para integração com bibliotecas como @radix-ui/react-slot, wrappers customizados, ou cenários avançados de composição.
+ */
+export type FormProps<TFieldValues extends FieldValues = FieldValues, TContextOnly extends boolean = false> = TContextOnly extends true ? {
+    methods: UseFormReturn<TFieldValues>;
+    /** Fornece apenas o contexto do formulário em vez de envolver em um <form>. Veja descrição acima. */
+    contextOnly: true;
+    /** Elemento filho único que recebe as props do formulário. */
+    children: ReactElement;
+} & Omit<ComponentPropsWithoutRef<"form">, "children" | "ref"> : {
+    methods: UseFormReturn<TFieldValues>;
+    /** Renderiza formulário padrão <form> (valor default). */
+    contextOnly?: false | undefined;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<"form">;
+/**
+ * Componente de formulário integrado ao react-hook-form.
+ *
+ * Permite controle flexível do elemento raiz usando a prop `contextOnly`.
+ * - Por padrão, renderiza um `<form>`.
+ * - Com `contextOnly`, fornece apenas o contexto do formulário e renderiza o filho customizado, repassando as props do formulário para ele (não renderiza `<form>`).
+ *
+ * @example
+ * ```tsx
+ * // Modo padrão:
+ * <Form methods={formMethods}>
+ *   <input name="foo" />
+ * </Form>
+ *
+ * // Com contextOnly (ex: usando Radix Slot ou wrapper customizado):
+ * <Form methods={formMethods} contextOnly>
+ *   <CustomFormComponent />
+ * </Form>
+ * ```
+ */
+export declare const Form: <TFieldValues extends FieldValues = FieldValues, TContextOnly extends boolean = false>(props: FormProps<TFieldValues, TContextOnly>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Form.d.ts.map

package/dist/src/components/Form.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAElE;;;;;;;;GAQG;AACH,MAAM,MAAM,SAAS,CACpB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,YAAY,SAAS,OAAO,GAAG,KAAK,IACjC,YAAY,SAAS,IAAI,GAC1B;IACA,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,qGAAqG;IACrG,WAAW,EAAE,IAAI,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,EAAE,YAAY,CAAC;CACvB,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAC7D;IACA,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,GAAG,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAChB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,YAAY,SAAS,OAAO,GAAG,KAAK,EAEpC,OAAO,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC,4CAc5C,CAAC"}

package/dist/src/components/Form.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import type { FieldValues, UseFormReturn } from "react-hook-form";
+/**
+ * Props do componente Form.
+ *
+ * @template TFieldValues - Tipo dos valores do formulário
+ * @template TContextOnly - Define se o formulário fornece apenas o contexto (sem envolver em `<form>`). Se true, espera um elemento filho do tipo ReactElement que receberá as props do formulário.
+ *
+ * @property methods - Instância de UseFormReturn do react-hook-form.
+ * @property contextOnly - Se verdadeiro, fornece apenas o contexto do formulário e renderiza o filho customizado **sem envolver em `<form>` e sem repassar props HTML do `Form` para o filho**. Útil para integração com bibliotecas como @radix-ui/react-slot, wrappers customizados, ou cenários avançados de composição.
+ */
+export type FormProps<TFieldValues extends FieldValues = FieldValues, TContextOnly extends boolean = false> = TContextOnly extends true ? {
+    methods: UseFormReturn<TFieldValues>;
+    /** Fornece apenas o contexto do formulário em vez de envolver em um <form>. Veja descrição acima. */
+    contextOnly: true;
+    /** Elemento filho único que recebe as props do formulário. */
+    children: ReactElement;
+} & Omit<ComponentPropsWithoutRef<"form">, "children" | "ref"> : {
+    methods: UseFormReturn<TFieldValues>;
+    /** Renderiza formulário padrão <form> (valor default). */
+    contextOnly?: false | undefined;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<"form">;
+/**
+ * Componente de formulário integrado ao react-hook-form.
+ *
+ * Permite controle flexível do elemento raiz usando a prop `contextOnly`.
+ * - Por padrão, renderiza um `<form>`.
+ * - Com `contextOnly`, fornece apenas o contexto do formulário e renderiza o filho customizado, repassando as props do formulário para ele (não renderiza `<form>`).
+ *
+ * @example
+ * ```tsx
+ * // Modo padrão:
+ * <Form methods={formMethods}>
+ *   <input name="foo" />
+ * </Form>
+ *
+ * // Com contextOnly (ex: usando Radix Slot ou wrapper customizado):
+ * <Form methods={formMethods} contextOnly>
+ *   <CustomFormComponent />
+ * </Form>
+ * ```
+ */
+export declare const Form: <TFieldValues extends FieldValues = FieldValues, TContextOnly extends boolean = false>(props: FormProps<TFieldValues, TContextOnly>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Form.d.ts.map

package/dist/src/components/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAElE;;;;;;;;GAQG;AACH,MAAM,MAAM,SAAS,CACpB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,YAAY,SAAS,OAAO,GAAG,KAAK,IACjC,YAAY,SAAS,IAAI,GAC1B;IACA,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,qGAAqG;IACrG,WAAW,EAAE,IAAI,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,EAAE,YAAY,CAAC;CACvB,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAC7D;IACA,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,GAAG,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAChB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,YAAY,SAAS,OAAO,GAAG,KAAK,EAEpC,OAAO,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC,4CAc5C,CAAC"}

package/dist/src/components/Form.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormProvider } from "react-hook-form";
+/**
+ * Componente de formulário integrado ao react-hook-form.
+ *
+ * Permite controle flexível do elemento raiz usando a prop `contextOnly`.
+ * - Por padrão, renderiza um `<form>`.
+ * - Com `contextOnly`, fornece apenas o contexto do formulário e renderiza o filho customizado, repassando as props do formulário para ele (não renderiza `<form>`).
+ *
+ * @example
+ * ```tsx
+ * // Modo padrão:
+ * <Form methods={formMethods}>
+ *   <input name="foo" />
+ * </Form>
+ *
+ * // Com contextOnly (ex: usando Radix Slot ou wrapper customizado):
+ * <Form methods={formMethods} contextOnly>
+ *   <CustomFormComponent />
+ * </Form>
+ * ```
+ */
+export const Form = (props) => {
+    const { methods, contextOnly, children, ...formProps } = props;
+    if (contextOnly) {
+        // Tipagem garante que contextOnly==true implica filhos ReactElement.
+        return _jsx(FormProvider, { ...methods, children: children });
+    }
+    // Padrão: renderiza <form>
+    return (_jsx(FormProvider, { ...methods, children: _jsx("form", { ...formProps, children: children }) }));
+};

package/dist/src/components/Step.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Step = Step;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("../wizards/wizard/context.cjs");
+/**
+ * Step para wizard, renderiza somente se ativo e com tipagem dinâmica no as
+ */
+function Step(props) {
+    const { step, as, children, ...rest } = props;
+    const { currentStep } = (0, context_1.useWizardContext)();
+    const Component = as || "div";
+    if (currentStep !== step) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(Component, { ...rest, children: children });
+}

package/dist/src/components/Step.d.cts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+/**
+ * StepProps tipada para permitir definir dinamicamente o componente raíz
+ *
+ * @template TAs - Tipo do componente (padrão: 'div')
+ */
+export type StepProps<TAs extends ElementType = "div"> = {
+    step: string;
+    as?: TAs;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<TAs>, "as" | "children">;
+/**
+ * Step para wizard, renderiza somente se ativo e com tipagem dinâmica no as
+ */
+export declare function Step<TAs extends ElementType = "div">(props: StepProps<TAs>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Step.d.ts.map

package/dist/src/components/Step.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E;;;;GAIG;AACH,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,IAAI;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,IAAI,GAAG,UAAU,CAAC,CAAC;AAE3D;;GAEG;AACH,wBAAgB,IAAI,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,kDAU1E"}

package/dist/src/components/Step.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+/**
+ * StepProps tipada para permitir definir dinamicamente o componente raíz
+ *
+ * @template TAs - Tipo do componente (padrão: 'div')
+ */
+export type StepProps<TAs extends ElementType = "div"> = {
+    step: string;
+    as?: TAs;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<TAs>, "as" | "children">;
+/**
+ * Step para wizard, renderiza somente se ativo e com tipagem dinâmica no as
+ */
+export declare function Step<TAs extends ElementType = "div">(props: StepProps<TAs>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Step.d.ts.map

package/dist/src/components/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E;;;;GAIG;AACH,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,IAAI;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,IAAI,GAAG,UAAU,CAAC,CAAC;AAE3D;;GAEG;AACH,wBAAgB,IAAI,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,kDAU1E"}

package/dist/src/components/Step.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWizardContext } from "../wizards/wizard/context.js";
+/**
+ * Step para wizard, renderiza somente se ativo e com tipagem dinâmica no as
+ */
+export function Step(props) {
+    const { step, as, children, ...rest } = props;
+    const { currentStep } = useWizardContext();
+    const Component = as || "div";
+    if (currentStep !== step) {
+        return null;
+    }
+    return _jsx(Component, { ...rest, children: children });
+}

package/dist/src/components/Wizard.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wizard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const context_1 = require("../wizards/wizard/context.cjs");
+/**
+ * Componente de formulário integrado ao react-hook-form.
+ *
+ * Permite controle flexível do elemento raiz usando a prop `contextOnly`.
+ * - Por padrão, renderiza um `<form>`.
+ * - Com `contextOnly`, fornece apenas o contexto do formulário e renderiza o filho customizado, repassando as props do formulário para ele (não renderiza `<form>`).
+ *
+ * @example
+ * ```tsx
+ * // Modo padrão:
+ * <Form methods={formMethods}>
+ *   <input name="foo" />
+ * </Form>
+ *
+ * // Com contextOnly (ex: usando Radix Slot ou wrapper customizado):
+ * <Form methods={formMethods} contextOnly>
+ *   <CustomFormComponent />
+ * </Form>
+ * ```
+ */
+const Wizard = (props) => {
+    const { methods, contextOnly, children, ...formProps } = props;
+    if (contextOnly) {
+        // Tipagem garante que contextOnly==true implica filhos ReactElement.
+        return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...methods, children: (0, jsx_runtime_1.jsx)(context_1.WizardProvider, { value: methods, children: children }) }));
+    }
+    // Padrão: renderiza <form>
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...methods, children: (0, jsx_runtime_1.jsx)(context_1.WizardProvider, { value: methods, children: (0, jsx_runtime_1.jsx)("form", { onSubmit: props?.onSubmit ? methods.handleSubmit(props.onSubmit) : undefined, ...formProps, children: children }) }) }));
+};
+exports.Wizard = Wizard;