@softize/opus 8.6.6

package/src/ui/components/patterns/form.tsx

@@ -0,0 +1,584 @@
+/**
+ * <ActionForm action /> — renderiza um FormAction do Opus em UI do Opus.
+ *
+ * Dois modos, um motor:
+ * - AUTO (sem children): monta TODOS os campos na ordem do contrato — zero JSX de campo;
+ *   o espaçamento entre campos (space-y-6) é deste modo, que é quem diagrama.
+ * - COMPOSIÇÃO (com children): você diagrama; <ActionFormField name /> coloca cada campo
+ *   (label/hint/widget/erro/asterisco derivados do contrato) onde quiser. Condicional é
+ *   JSX ({cond && <ActionFormField/>}); opções de runtime entram por prop no campo. O
+ *   espaçamento é 100% seu — nenhuma margem imposta (o campo não sabe onde será colocado).
+ *
+ * Auto-detect do Zod (nos dois modos):
+ * - z.enum(...) → <Select> com opções inferidas
+ * - z.string com max > 200 → <Textarea>
+ * - z.boolean → <Checkbox> · z.array → multiselect (Select multiple)
+ *
+ * Submit via useFormAction (RHF + zodResolver + cache invalidation). Erro do servidor
+ * inline; toast em sucesso/erro. Emite `data-action="<action.name>"` na raiz (selector E2E).
+ */
+
+import { createContext, useContext } from 'react'
+import type { UseFormReturn } from 'react-hook-form'
+import { getLogicalType, type FormContract, type OptionsSpec } from '../../../core/index.ts'
+import { useDicts, useFormAction, type DictLike } from '../../drivers/react.tsx'
+import { z, type ZodTypeAny } from 'zod'
+import { cn } from '../../lib/cn.ts'
+import { toast } from '../primitives/sonner.tsx'
+import { Button } from '../primitives/button.tsx'
+import { Input } from '../primitives/input.tsx'
+import { Textarea } from '../primitives/textarea.tsx'
+import { Label } from '../primitives/label.tsx'
+import { Checkbox } from '../primitives/checkbox.tsx'
+import { IconPicker } from '../primitives/icon-picker.tsx'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../primitives/tooltip.tsx'
+import { Info } from 'lucide-react'
+import { Select, type SelectOption } from '../primitives/select.tsx'
+
+// =============================================================================
+// Inferência de tipo de field a partir do Zod schema
+// =============================================================================
+
+type FieldKind =
+  | { kind: 'text'; required: boolean }
+  | { kind: 'textarea'; required: boolean }
+  | { kind: 'checkbox'; required: boolean }
+  | { kind: 'select'; required: boolean; options: string[] }
+  | { kind: 'multiselect'; required: boolean; options: string[] }
+  | { kind: 'lines'; required: boolean }
+  | { kind: 'refItems'; required: boolean }
+  | { kind: 'icon'; required: boolean }
+
+function unwrap(schema: ZodTypeAny): { inner: ZodTypeAny; required: boolean } {
+  let inner: ZodTypeAny = schema
+  let required = true
+  // ZodOptional / ZodDefault / ZodNullable → desce no _def.innerType.
+  while (
+    inner instanceof z.ZodOptional ||
+    inner instanceof z.ZodDefault ||
+    inner instanceof z.ZodNullable
+  ) {
+    if (inner instanceof z.ZodOptional || inner instanceof z.ZodDefault) {
+      required = false
+    }
+    const def = (inner as unknown as { _def: { innerType: ZodTypeAny } })._def
+    inner = def.innerType
+  }
+  return { inner, required }
+}
+
+function inferFieldKind(schema: ZodTypeAny): FieldKind {
+  const { inner, required } = unwrap(schema)
+
+  if (inner instanceof z.ZodBoolean) {
+    return { kind: 'checkbox', required }
+  }
+
+  if (inner instanceof z.ZodEnum) {
+    return { kind: 'select', required, options: inner.options as string[] }
+  }
+
+  // z.array(...) → multiselect (Select multiple). Opções estáticas só quando o elemento é
+  // z.enum; pra z.array(z.string()) (ids em runtime) as opções vêm de fora (spec).
+  if (inner instanceof z.ZodArray) {
+    const el = (inner._def as { type: ZodTypeAny }).type
+    return { kind: 'multiselect', required, options: el instanceof z.ZodEnum ? (el.options as string[]) : [] }
+  }
+
+  if (inner instanceof z.ZodString) {
+    const maxCheck = inner._def.checks.find(
+      (c: { kind: string }) => c.kind === 'max',
+    ) as { value: number } | undefined
+    if (maxCheck !== undefined && maxCheck.value > 200) {
+      return { kind: 'textarea', required }
+    }
+  }
+
+  return { kind: 'text', required }
+}
+
+// =============================================================================
+// FieldSpec (subset usado aqui)
+// =============================================================================
+
+interface FieldSpec {
+  label?: string
+  placeholder?: string
+  hint?: string
+  /** Ajuda na label: ícone ⓘ + tooltip no hover (explicação mais longa que o hint). */
+  help?: string
+  /** Override explícito do tipo de campo, quando o auto-detect do Zod não basta.
+   *  Honra 'textarea' (string sem max), 'code' (textarea monoespaçada, ex.: SKILL.md),
+   *  'lines' (z.array(z.string()) num textarea, um item por linha), 'refItems'
+   *  (z.array(z.object({ref, text})) — linhas de referência + texto; as opções do
+   *  `ref` vêm de fieldOptions[campo]) e 'icon' (string com o nome kebab-case da
+   *  paleta da casa — renderiza o <IconPicker>). */
+  widget?: string
+  /** Renderiza o campo só quando true pro input atual (ex.: clientId só se !staff).
+   *  No modo COMPOSIÇÃO o condicional pode (e deve) ser JSX de quem diagrama. */
+  showWhen?: (input: Record<string, unknown>) => boolean
+  /** Origem declarada das opções (static/dictionary/lookup) — ver a precedência
+   *  em `ActionFormField`. `dictionary` resolve pelos dicts do TbdlibProvider. */
+  options?: OptionsSpec
+}
+
+/** Opções declaradas no FieldSpec: static direto; dictionary via provider; lookup
+ *  fica de fora (origem em action — entra por `fieldOptions`/prop por enquanto). */
+function optionsFromSpec(
+  spec: OptionsSpec | undefined,
+  dicts: Record<string, DictLike>,
+): SelectOption[] | undefined {
+  if (spec === undefined) return undefined
+  if (spec.kind === 'static') {
+    return spec.items.map((i) => ({
+      value: i.value,
+      label: typeof i.label === 'string' ? i.label : i.label.default,
+    }))
+  }
+  if (spec.kind === 'dictionary') {
+    const dict = dicts[spec.ref]
+    if (dict === undefined) return undefined
+    return dict.options().map((o) => ({ value: o.value, label: o.label }))
+  }
+  return undefined
+}
+
+/** Fallback zero-config: o schema do contrato CARREGA o vocabulário do `t.dict`
+ *  (meta `params.keys/entries`) — labels sem registry no provider. Cobre o campo
+ *  dict e o multiselect com elemento dict. */
+function dictMetaOptions(schema: ZodTypeAny): SelectOption[] | undefined {
+  const { inner } = unwrap(schema)
+  const el = inner instanceof z.ZodArray ? (inner._def as { type: ZodTypeAny }).type : inner
+  const meta = getLogicalType(el as object)
+  if (meta?.logicalType !== 'dict') return undefined
+  const params = (meta.params ?? {}) as {
+    keys?: unknown
+    entries?: Record<string, { label?: unknown }>
+  }
+  const { keys, entries } = params
+  if (!Array.isArray(keys) || entries === undefined) return undefined
+  return (keys as string[]).map((k) => {
+    const label = entries[k]?.label
+    return { value: k, label: typeof label === 'string' ? label : k }
+  })
+}
+
+/** Ícone de ajuda na label (ⓘ + tooltip Radix). Self-contained (inclui o Provider) — só
+ *  renderiza quando o FieldSpec define `help`. `tabIndex={-1}`: fica FORA do autofocus do
+ *  diálogo (senão o modal foca no ícone ao abrir e o tooltip vem aberto); abre só no hover.
+ *  preventDefault: clicar o ícone não dispara o label (não foca o input / não toggla). */
+function LabelHelp({ help }: { help: string | undefined }): React.ReactElement | null {
+  if (help === undefined || help.trim().length === 0) return null
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            tabIndex={-1}
+            aria-label="Ajuda"
+            onClick={(e) => {
+              // Clicar o ícone não ativa o label (não foca/toggla o campo).
+              e.preventDefault()
+              e.stopPropagation()
+            }}
+            className="inline-flex shrink-0 cursor-help text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+          >
+            <Info className="h-3.5 w-3.5" />
+          </button>
+        </TooltipTrigger>
+        {/* max-w-sm: frase de help típica (~50 caracteres) cabe numa linha; o
+            text-balance do primitivo só divide o que realmente transborda. */}
+        <TooltipContent className="max-w-sm">{help}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+/** Asterisco de obrigatório na label — derivado do Zod (campo sem optional/default).
+ *  aria-hidden: leitor de tela valida pelo erro do resolver, não pelo símbolo. */
+function RequiredMark({ required }: { required: boolean }): React.ReactElement | null {
+  if (!required) return null
+  return (
+    <span aria-hidden className="ml-0.5 text-destructive">
+      *
+    </span>
+  )
+}
+
+/** action.messages.* pode ser string ou I18nRef ({ key, default }). Resolve pra texto. */
+function msgText(m: unknown, fallback: string): string {
+  if (typeof m === 'string') return m
+  if (m !== null && typeof m === 'object' && 'default' in m) {
+    const d = (m as { default: unknown }).default
+    if (typeof d === 'string') return d
+  }
+  return fallback
+}
+
+// =============================================================================
+// Contexto — liga o <ActionFormField> ao form/contrato do <ActionForm> pai
+// =============================================================================
+
+export interface ActionFormContextValue {
+  /** RHF do useFormAction. O shape é dinâmico — os paths entram como string. */
+  form: UseFormReturn<Record<string, unknown>>
+  shape: Record<string, ZodTypeAny | undefined>
+  fields: Record<string, FieldSpec>
+  fieldOptions?: Record<string, SelectOption[]> | undefined
+}
+
+const ActionFormContext = createContext<ActionFormContextValue | null>(null)
+
+/**
+ * O contexto do `<ActionForm>` pai — a válvula de escape pra CONTROLE CUSTOM no
+ * modo composição: um campo com UI própria (grade de permissões, canvas, o que
+ * for) participa do form do contrato sem abandonar o ActionForm. Leia com
+ * `form.watch(name)`, escreva com `form.setValue(name, v, { shouldValidate:
+ * true, shouldDirty: true })` e mostre erro com `form.formState.errors[name]` —
+ * zod-resolver, erro inline e submit continuam do contrato.
+ */
+export function useActionFormContext(): ActionFormContextValue {
+  const ctx = useContext(ActionFormContext)
+  if (ctx === null) throw new Error('useActionFormContext precisa estar dentro de um <ActionForm>.')
+  return ctx
+}
+
+// =============================================================================
+// ActionFormField — um campo do contrato, onde você quiser
+// =============================================================================
+
+export interface ActionFormFieldProps {
+  /** Nome do campo no input do contrato (a chave em `fields`/schema). */
+  name: string
+  /** Opções por id de runtime — sobrepõe o fieldOptions do form e o z.enum. */
+  options?: SelectOption[]
+  /** Classes do invólucro do campo (ex.: col-span-2 numa grid). */
+  className?: string
+}
+
+export function ActionFormField({ name, options: optionsProp, className }: ActionFormFieldProps): React.ReactElement | null {
+  const ctx = useContext(ActionFormContext)
+  if (ctx === null) throw new Error('ActionFormField precisa estar dentro de um <ActionForm>.')
+  const dicts = useDicts()
+  const { form, shape, fields, fieldOptions } = ctx
+  // Assina TODOS os valores: alimenta o showWhen e os widgets controlados.
+  const formValues = form.watch()
+
+  // Clique na label foca o controle — todo controle da casa honra o id (o Select
+  // reaplica o dele, que o cmdk sobrescreve).
+  const focusControl = (): void => {
+    document.getElementById(name)?.focus()
+  }
+
+  const spec: FieldSpec = fields[name] ?? {}
+  const fieldSchema = shape[name]
+  if (fieldSchema === undefined) return null
+  if (typeof spec.showWhen === 'function' && !spec.showWhen(formValues)) return null
+
+  const inferred = inferFieldKind(fieldSchema)
+  // `widget` no FieldSpec sobrepõe o auto-detect (ex.: textarea pra string sem max).
+  const fieldKind: FieldKind =
+    spec.widget === 'textarea' || spec.widget === 'code'
+      ? { kind: 'textarea', required: inferred.required }
+      : spec.widget === 'lines'
+        ? { kind: 'lines', required: inferred.required }
+        : spec.widget === 'refItems'
+          ? { kind: 'refItems', required: inferred.required }
+          : spec.widget === 'icon'
+            ? { kind: 'icon', required: inferred.required }
+            : inferred
+  const fieldError = form.formState.errors[name]
+  const errorMessage = typeof fieldError?.message === 'string' ? fieldError.message : undefined
+  // Precedência das opções: prop do campo > fieldOptions do form > spec.options
+  // (dictionary via provider, static direto) > meta do t.dict no schema
+  // (zero-config) > chaves cruas do z.enum.
+  const runtimeOptions = optionsProp ?? fieldOptions?.[name]
+  const specOptions = optionsFromSpec(spec.options, dicts)
+  const declaredOptions = runtimeOptions ?? specOptions
+  const options: SelectOption[] =
+    declaredOptions ??
+    dictMetaOptions(fieldSchema) ??
+    (fieldKind.kind === 'select' || fieldKind.kind === 'multiselect'
+      ? fieldKind.options.map((o) => ({ value: o, label: o }))
+      : [])
+  // Campo texto COM opções declaradas (runtime ou spec) → single-select por-id.
+  const effectiveKind: FieldKind =
+    fieldKind.kind === 'text' && declaredOptions !== undefined
+      ? { kind: 'select', required: fieldKind.required, options: [] }
+      : fieldKind
+
+  const setValue = (v: unknown): void =>
+    form.setValue(name, v, { shouldValidate: true, shouldDirty: true })
+
+  // Checkbox tem layout próprio (controle + label na mesma linha).
+  if (fieldKind.kind === 'checkbox') {
+    return (
+      <div className={cn('space-y-2', className)}>
+        <label className="flex items-center gap-2">
+          <Checkbox
+            id={name}
+            checked={(formValues[name] as boolean | undefined) ?? false}
+            onCheckedChange={(v) => setValue(v === true)}
+          />
+          <span className="text-sm font-medium">
+            {spec.label ?? name}
+            <RequiredMark required={fieldKind.required} />
+          </span>
+          <LabelHelp help={spec.help} />
+        </label>
+        {spec.hint !== undefined && <p className="text-xs text-muted-foreground">{spec.hint}</p>}
+        {errorMessage !== undefined && <p className="text-xs text-destructive">{errorMessage}</p>}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <Label htmlFor={name} onClick={focusControl} className="flex items-center gap-1.5">
+        <span>
+          {spec.label ?? name}
+          <RequiredMark required={fieldKind.required} />
+        </span>
+        <LabelHelp help={spec.help} />
+      </Label>
+
+      {effectiveKind.kind === 'multiselect' ? (
+        <Select
+          multiple
+          searchable
+          id={name}
+          value={(formValues[name] as string[] | undefined) ?? []}
+          onChange={(v) => setValue(v)}
+          options={options}
+          placeholder={spec.placeholder ?? 'Selecione…'}
+          className="w-full"
+        />
+      ) : effectiveKind.kind === 'select' ? (
+        // w-full: campo de FORM alinha com os inputs (todos cheios) — coluna uniforme.
+        <Select
+          id={name}
+          value={(formValues[name] as string | undefined) ?? ''}
+          onChange={(v) => setValue(v)}
+          options={options}
+          placeholder={spec.placeholder ?? 'Selecione…'}
+          className="w-full"
+        />
+      ) : effectiveKind.kind === 'lines' ? (
+        // Lista de strings num textarea: um item por linha. split/join round-trip
+        // estável (linhas vazias do meio da digitação são filtradas no servidor).
+        <Textarea
+          id={name}
+          placeholder={spec.placeholder ?? ''}
+          rows={4}
+          className="max-h-80"
+          value={((formValues[name] as string[] | undefined) ?? []).join('\n')}
+          onChange={(e) => setValue(e.target.value.split('\n'))}
+        />
+      ) : effectiveKind.kind === 'refItems' ? (
+        // Lista composta {ref, text}: cada linha = select de referência (opções de
+        // fieldOptions) + texto. Estruturado de propósito — o ref nunca é texto livre.
+        (() => {
+          const items = (formValues[name] as Array<{ ref: string; text: string }> | undefined) ?? []
+          const setItems = (next: Array<{ ref: string; text: string }>): void => setValue(next)
+          return (
+            <div className="space-y-2">
+              {items.map((item, i) => (
+                <div key={i} className="flex items-start gap-2">
+                  <Select
+                    value={item.ref}
+                    onChange={(v) => setItems(items.map((it, j) => (j === i ? { ...it, ref: v } : it)))}
+                    options={options}
+                    placeholder="Papel…"
+                    className="w-44 shrink-0"
+                  />
+                  <Input
+                    value={item.text}
+                    placeholder={spec.placeholder ?? 'O quê (com critério)…'}
+                    onChange={(e) => setItems(items.map((it, j) => (j === i ? { ...it, text: e.target.value } : it)))}
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="shrink-0 px-2 text-muted-foreground"
+                    onClick={() => setItems(items.filter((_, j) => j !== i))}
+                    aria-label="Remover item"
+                  >
+                    ×
+                  </Button>
+                </div>
+              ))}
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => setItems([...items, { ref: '', text: '' }])}
+              >
+                Adicionar item
+              </Button>
+            </div>
+          )
+        })()
+      ) : effectiveKind.kind === 'icon' ? (
+        // Widget 'icon': o value é o NOME do ícone (kebab-case) — ver <IconPicker>.
+        <IconPicker
+          id={name}
+          value={(formValues[name] as string | undefined) ?? ''}
+          onChange={(v) => setValue(v)}
+          placeholder={spec.placeholder ?? 'Selecione um ícone…'}
+        />
+      ) : effectiveKind.kind === 'textarea' ? (
+        // max-h: o Textarea v4 auto-cresce (field-sizing-content) — capa e scrolla
+        // o CAMPO, não o form/dialog inteiro. widget 'code' = monoespaçado (SKILL.md).
+        <Textarea
+          id={name}
+          placeholder={spec.placeholder ?? ''}
+          rows={5}
+          className={spec.widget === 'code' ? 'max-h-80 font-mono text-xs' : 'max-h-80'}
+          {...form.register(name)}
+        />
+      ) : (
+        <Input
+          id={name}
+          placeholder={spec.placeholder ?? ''}
+          {...form.register(name)}
+        />
+      )}
+
+      {spec.hint !== undefined && (
+        <p className="text-xs text-muted-foreground">{spec.hint}</p>
+      )}
+      {errorMessage !== undefined && (
+        <p className="text-xs text-destructive">{errorMessage}</p>
+      )}
+    </div>
+  )
+}
+
+// =============================================================================
+// ActionForm
+// =============================================================================
+
+export interface ActionFormProps<TInput extends Record<string, unknown>, TData> {
+  action: FormContract<TInput, TData>
+  defaultValues?: Partial<TInput>
+  onSuccess?: (data: TData) => void
+  submitLabel?: string
+  cancelLabel?: string
+  onCancel?: () => void
+  /** Opções por campo pra select/multiselect carregados em runtime (ex.: papéis/skills
+   *  por id). Sobrepõe as opções estáticas inferidas do z.enum. Chave = nome do campo. */
+  fieldOptions?: Record<string, SelectOption[]>
+  /** Classes do <form> (layout externo — ex.: coluna flex no dialog). */
+  className?: string
+  /** Slot do CORPO: recebe os campos montados e decide o invólucro. Default: inline. No
+   *  dialog, o ActionFormDialog injeta `DialogBody` (a área que rola). */
+  body?: (fields: React.ReactNode) => React.ReactNode
+  /** Slot do RODAPÉ: recebe os botões (Cancelar/Salvar) — com o estado do form e DENTRO
+   *  do <form> — e decide o invólucro. Default: faixa de ação simples. No dialog, o
+   *  ActionFormDialog injeta `DialogFooter` (a faixa da casa). */
+  footer?: (actions: React.ReactNode) => React.ReactNode
+  /** Modo COMPOSIÇÃO: diagrame os campos com <ActionFormField name/> (grid, seções,
+   *  condicionais em JSX). Sem children, o modo AUTO monta todos na ordem do contrato. */
+  children?: React.ReactNode
+}
+
+export function ActionForm<TInput extends Record<string, unknown>, TData>({
+  action,
+  defaultValues,
+  onSuccess,
+  submitLabel = 'Salvar',
+  cancelLabel = 'Cancelar',
+  onCancel,
+  fieldOptions,
+  className,
+  body,
+  footer,
+  children,
+}: ActionFormProps<TInput, TData>) {
+  const { form, submit, isLoading, error, isSuccess } = useFormAction<TInput, TData>(action, {
+    ...(defaultValues !== undefined ? { defaultValues: defaultValues as never } : {}),
+    onSuccess: (data) => {
+      toast.success(msgText(action.messages?.success, 'Concluído'))
+      onSuccess?.(data)
+    },
+    onError: (err) => {
+      toast.error(msgText(action.messages?.error, err.message))
+    },
+  })
+
+  const shape = (action.input as unknown as z.ZodObject<z.ZodRawShape>).shape
+  const fields = action.fields as Record<string, FieldSpec>
+
+  // Corpo e rodapé como SLOTS: por padrão renderizam inline; o ActionFormDialog injeta
+  // DialogBody/DialogFooter (fonte única do scroll e da faixa). Os botões ficam DENTRO do
+  // <form> nos dois casos — o submit exige isso; o que muda é só o invólucro.
+  const wrapBody = body ?? ((fields: React.ReactNode) => fields)
+  const wrapFooter =
+    footer ??
+    ((actions: React.ReactNode) => (
+      <div className="mt-6 flex shrink-0 justify-end gap-2">{actions}</div>
+    ))
+
+  // Banner de erro do servidor (chrome do próprio form, nos dois modos). No AUTO o
+  // space-y-6 do wrapper espaça; na COMPOSIÇÃO ele carrega a própria separação (mt-6).
+  const errorBanner =
+    error !== undefined && !isSuccess ? (
+      <div
+        className={cn(
+          'rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive',
+          children !== undefined && 'mt-6',
+        )}
+      >
+        <strong>{error.code}</strong>: {error.message}
+      </div>
+    ) : null
+
+  return (
+    <ActionFormContext.Provider
+      value={{
+        form: form as unknown as UseFormReturn<Record<string, unknown>>,
+        shape,
+        fields,
+        fieldOptions,
+      }}
+    >
+      <form onSubmit={submit} className={cn('flex flex-col', className)} data-action={action.name}>
+        {wrapBody(
+          children !== undefined ? (
+            // COMPOSIÇÃO: nenhum espaçamento imposto — o componente não sabe onde será
+            // colocado; a diagramação (grid/gap/space-y) é 100% de quem compõe.
+            <>
+              {children}
+              {errorBanner}
+            </>
+          ) : (
+            // AUTO: aqui o ActionForm É o pai que diagrama — o space-y-6 é dele.
+            <div className="space-y-6">
+              {Object.keys(fields).map((name) => (
+                <ActionFormField key={name} name={name} />
+              ))}
+              {errorBanner}
+            </div>
+          ),
+        )}
+
+        {wrapFooter(
+          <>
+            {onCancel !== undefined && (
+              <Button type="button" variant="outline" onClick={onCancel}>
+                {cancelLabel}
+              </Button>
+            )}
+            {/* Gated por dirty: só habilita com mudança real (igual aos forms antigos).
+                busy = a submissão em andamento (spinner + disable vêm do Button). */}
+            <Button type="submit" busy={isLoading} disabled={!form.formState.isDirty}>
+              {submitLabel}
+            </Button>
+          </>,
+        )}
+      </form>
+    </ActionFormContext.Provider>
+  )
+}