@seniorsistemas/angular-components-mcp 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/data/component-rules/button.md

@@ -0,0 +1,37 @@
+# Button — Regras de UX
+
+**Seletor:** `s-button`  
+**Package:** `@seniorsistemas/angular-components/button`
+
+---
+
+## Variantes
+
+| Variante    | Quando usar                                                                  |
+| ----------- | ---------------------------------------------------------------------------- |
+| `primary`   | Ação principal da página — máximo 1 por página/diálogo                       |
+| `secondary` | Ações complementares à ação principal                                        |
+| `link`      | Navegação secundária ou ações de baixa importância visual                    |
+| `select`    | Quando houver menu de ações — obrigatório usar ícone de chevron pré-definido |
+
+---
+
+## Regras
+
+### ⛔ Hierarquia (error)
+
+Use no máximo 1 botão `primary` por página/diálogo. Os demais devem ser `secondary` ou `link`.
+
+### ⚠️ Ícones (warning)
+
+Use no máximo 1 ícone por botão (esquerda ou direita). Nunca 2 ícones no mesmo botão.
+
+### ⛔ Tamanho `small` (error)
+
+Permitido **somente** em células de tabela e section title.  
+Proibido em formulários, navegação primária ou qualquer outro contexto.
+
+### ⛔ Labels
+
+Use labels acionáveis e específicos. Prefira `"Salvar Cadastro"` a `"OK"`.
+

package/dist/data/component-rules/checkbox.md

@@ -0,0 +1,30 @@
+# Checkbox — Regras de UX
+
+## Variantes
+
+| Variante       | Quando usar                                                     |
+| -------------- | --------------------------------------------------------------- |
+| **Horizontal** | Quando todos os itens possuem textos curtos ou palavras únicas. |
+| **Vertical**   | Quando um ou mais itens possuem textos longos.                  |
+
+---
+
+## Regras de uso
+
+- **SEMPRE** use alinhamento vertical em telas pequenas.
+- Cada checkbox deve possuir um label descrevendo a sua ação.
+- Coloque opções importantes no topo.
+
+## ⛔ Regras de erro
+
+- Não use checkbox para escolhas mutuamente exclusivas. Nesses casos use Radio Button.
+- Não use checkbox para ações que se aplicam imediatamente e alteram a interface em tempo real — isso é papel do Switch.
+- Não apresente checkbox horizontalmente em dispositivos móveis.
+- Não utilize checkbox sem um label claro e explícito.
+- Não agrupe muitas opções horizontalmente. Neste caso use alinhamento vertical.
+
+---
+
+## ⚠️ Regras de recomendação
+
+- Prefira usar checkbox em formulários ou contextos de escolha múltipla de forma persistente.

package/dist/data/component-rules/index.json

@@ -0,0 +1,3 @@
+{
+  "components": ["button", "checkbox"]
+}

package/dist/data/component-technical/confirm-dialog.md

@@ -0,0 +1,117 @@
+# ConfirmDialog — Guia Técnico
+
+**Seletor:** `s-confirm-dialog`  
+**Package:** `@seniorsistemas/angular-components/confirm-dialog`
+
+## Exports e Imports
+
+| Tipo    | Símbolo                |
+| ------- | ---------------------- |
+| Service | `ConfirmDialogService` |
+| Type    | `ConfirmDialog`        |
+
+```typescript
+import { ConfirmDialogService } from '@seniorsistemas/angular-components/confirm-dialog';
+import type { ConfirmDialog } from '@seniorsistemas/angular-components/confirm-dialog';
+```
+
+> **Erro comum:** `Module has no exported member 'ConfirmDialogModule'` — use `ConfirmDialogService` diretamente; não existe `ConfirmDialogModule` público nesta versão.
+
+---
+
+O ConfirmDialog é **SEMPRE** utilizado via `ConfirmDialogService`. O componente `s-confirm-dialog` **não deve ser instanciado diretamente** no template — ele é renderizado internamente pelo serviço.
+
+---
+
+## Padrão único: Via `ConfirmDialogService` ✅ ÚNICO PADRÃO SUPORTADO
+
+Abre um dialog de confirmação com mensagem, título e botões configuráveis. Retorna uma `Promise<boolean>` que resolve com `true` se o usuário confirmar e `false` se cancelar.
+
+### Regras obrigatórias
+
+- **NUNCA** adicionar `<s-confirm-dialog>` diretamente no template — o serviço gerencia isso automaticamente
+- Importar `ConfirmDialogModule` no módulo ou componente raiz para registrar o componente
+
+### Exemplo
+
+```typescript
+import { ConfirmDialogModule, ConfirmDialogService } from '@seniorsistemas/angular-components/confirm-dialog';
+
+@Component({
+    imports: [ConfirmDialogModule],
+    template: `
+        <s-button
+            label="Deletar"
+            (clicked)="delete()"
+        />
+    `,
+})
+export class MyComponent {
+    private readonly confirmDialog = inject(ConfirmDialogService);
+
+    protected async delete(): Promise<void> {
+        const confirmed = await this.confirmDialog.open({
+            header: 'Confirmar exclusão',
+            message: 'Tem certeza que deseja excluir este registro? Esta ação não pode ser desfeita.',
+            acceptLabel: 'Excluir',
+            rejectLabel: 'Cancelar',
+        });
+
+        if (confirmed) {
+            // prosseguir com a exclusão
+        }
+    }
+}
+```
+
+---
+
+## Notas de integração
+
+- `ConfirmDialogService.open()` retorna `Promise<boolean>`: use `async/await` ou `.then()` para aguardar a resposta do usuário.
+- Personalize os labels dos botões via `acceptLabel` e `rejectLabel` para dar clareza à ação (ex: `'Excluir'` ao invés de `'Ok'`).
+
+---
+
+## Erros Comuns
+
+### `Property 'open' does not exist on type 'ConfirmDialogService'`
+
+**Tipo:** method  
+**Solução:** Use `confirm()` em vez de `open()`.
+
+```typescript
+// ❌ Incorreto
+await this.confirmDialogService.open({ ... })
+
+// ✅ Correto
+this.confirmDialogService.confirm({ ... })
+```
+
+> `ConfirmDialogService` desta versão expõe o método `confirm(confirmDialog)`.
+
+---
+
+### `Type 'Promise<boolean>' is not assignable...`
+
+**Tipo:** return-type  
+**Solução:** Não use `await` no retorno de `confirm()`; o fluxo ocorre via callbacks `accept`/`reject`.
+
+```typescript
+// ❌ Incorreto
+const ok = await confirmDialogService.confirm(config);
+
+// ✅ Correto
+confirmDialogService.confirm({
+    ...config,
+    accept: () => {
+        /* ação confirmada */
+    },
+    reject: () => {
+        /* ação cancelada */
+    },
+});
+```
+
+> O método `confirm()` não retorna `Promise` nesta implementação.
+

package/dist/data/component-technical/dialog.md

@@ -0,0 +1,202 @@
+# Dialog — Guia Técnico
+
+**Seletor:** `s-dialog`  
+**Package:** `@seniorsistemas/angular-components/dialog`
+
+## Exports e Imports
+
+| Tipo      | Símbolo                      |
+| --------- | ---------------------------- |
+| Component | `DialogComponent`            |
+| Service   | `DialogService`              |
+| Class     | `ActiveDialog`               |
+| Types     | `DialogOptions`, `DialogRef` |
+
+```typescript
+import { DialogComponent } from '@seniorsistemas/angular-components/dialog';
+import { DialogService } from '@seniorsistemas/angular-components/dialog';
+import { ActiveDialog } from '@seniorsistemas/angular-components/dialog';
+import type { DialogOptions, DialogRef } from '@seniorsistemas/angular-components/dialog';
+```
+
+> **Erros comuns:**
+>
+> - `Module has no exported member 'DialogModule'` → use `DialogComponent` standalone
+> - `Module has no exported member 'DynamicDialogRef'` → use `DialogRef` e `ActiveDialog`
+> - `Module has no exported member 'DIALOG_DATA'` → use padrão `ActiveDialog`/`DialogRef`
+
+---
+
+O Dialog pode ser controlado de forma declarativa via binding de propriedade ou de forma programática via `DialogService`. A forma de uso deve ser escolhida conforme o contexto de onde o dialog será aberto.
+
+---
+
+## Padrão 1: Declarativo via `[(visible)]`
+
+**Preferido:** Não (use apenas para casos simples)
+
+O estado de abertura é controlado por uma propriedade booleana no componente pai, vinculada via two-way binding `[(visible)]`.
+
+### Exemplo
+
+```typescript
+import { DialogModule } from '@seniorsistemas/angular-components/dialog';
+
+@Component({
+    imports: [DialogModule],
+    template: `
+        <s-button
+            label="Abrir"
+            (clicked)="isOpen = true"
+        />
+        <s-dialog
+            [(visible)]="isOpen"
+            header="Título"
+        >
+            <ng-template sTemplate="body"> Conteúdo do dialog </ng-template>
+            <ng-template sTemplate="footer">
+                <s-button
+                    label="Fechar"
+                    (clicked)="isOpen = false"
+                />
+            </ng-template>
+        </s-dialog>
+    `,
+})
+export class MyComponent {
+    protected isOpen = false;
+}
+```
+
+---
+
+## Padrão 2: Programático via `DialogService` ✅ PREFERIDO
+
+O dialog é aberto injetando o `DialogService`, que cria e renderiza o componente dinamicamente. Permite abrir dialogs de qualquer lugar da aplicação, inclusive de serviços.
+
+### Exemplo
+
+```typescript
+import { DialogComponent, DialogService } from '@seniorsistemas/angular-components/dialog';
+
+
+// No componente ou serviço que abre o dialog
+@Component({ ... })
+export class MyComponent {
+  private readonly dialogService = inject(DialogService);
+
+  protected openDialog(): void {
+    this.dialogService.open(MyDialogContentComponent, {
+      header: 'Título do Dialog',
+      data: { id: 1 }
+    });
+  }
+}
+
+// Componente de conteúdo do dialog
+@Component({
+  imports: [DialogComponent, TemplateModule]
+  template: `
+    <s-dialog header="Dialog Header">
+        <!-- TODO: Campo opcional, utilizar quando [header] não for provido, caso queira HTML Customizado para o header. -->
+        <ng-template sTemplate="header"></ng-template>
+
+        <p>Id recebido: {{ data.id }}</p>
+        <!-- TODO: Campo opcional. -->
+        <ng-template
+            sTemplate="footer"
+            let-activeDialog="activeDialog">
+        <div class="grid grid-cols-12">
+            <div class="col-span-12 flex justify-around">
+                <s-button
+                    label="Ação terciária"
+                    priority="link"
+                />
+                <s-button
+                    (clicked)="activeDialog.dismiss('Dismissed dialog demo footer')"
+                    label="Ação secundária"
+                />
+                <s-button
+                    label="Ação primária"
+                    (clicked)="activeDialog.close('Closed dialog demo footer')"
+                    priority="primary"
+                />
+            </div>
+        </div>
+      </ng-template>
+
+    </s-dialog>
+
+  `
+})
+export class MyDialogContentComponent {
+  readonly activeDialog = inject(ActiveDialog);
+
+  // Função opcional, caso utilize let-activeDialog no ng-template nao precisa fechar por aqui, ambos possuem o mesmo valor de activeDialog
+  protected close(): void {
+    this.activeDialog.close('resultado opcional');
+  }
+}
+```
+
+---
+
+## Notas de integração
+
+- O `<s-dialog>` deve existir no template para que o `DialogService` possa renderizar conteúdo nele. Coloque-o em um componente de layout de nível superior.
+- Para receber dados no componente de conteúdo, use `inject(DIALOG_DATA)` importado de `@seniorsistemas/angular-components/dialog`.
+- Para fechar o dialog de dentro do componente de conteúdo, injete `DynamicDialogRef` e chame `ref.close(resultado)`.
+
+---
+
+## Erros Comuns
+
+### `Module has no exported member 'DialogModule'`
+
+**Tipo:** import  
+**Solução:** Use standalone import com `DialogComponent`.
+
+```typescript
+// ❌ Incorreto
+imports: [DialogModule];
+
+// ✅ Correto
+imports: [DialogComponent];
+```
+
+> Nesta versão, o public API expõe `DialogComponent` para uso declarativo.
+
+---
+
+### `Property 'onClose' does not exist on type 'DialogRef'`
+
+**Tipo:** property  
+**Solução:** Use o observable `closed`.
+
+```typescript
+// ❌ Incorreto
+ref.onClose.subscribe(...)
+
+// ✅ Correto
+ref.closed.subscribe(...)
+```
+
+> `DialogRef` expõe `closed` e `dismissed`.
+
+---
+
+### `Object literal may only specify known properties, and 'header' does not exist in type 'DialogOptions'`
+
+**Tipo:** parameter  
+**Solução:** Use apenas as `DialogOptions` suportadas (`destroyClickOutside`, `escapeOnEsc`, `size`).
+
+```typescript
+// ❌ Incorreto
+dialogService.open(MyDialogComponent, { header: 'Título' });
+
+// ✅ Correto
+dialogService.open(MyDialogComponent, { size: 'md' });
+```
+
+> `DialogOptions` nesta versão não inclui `header`/`data` no tipo público.
+

package/dist/data/component-technical/dynamic-form.md

@@ -0,0 +1,292 @@
+# DynamicForm — Guia Técnico
+
+**Seletor:** `s-dynamic-form`
+**Package:** `@seniorsistemas/angular-components/dynamic-form`
+
+## Exports e Imports
+
+| Tipo       | Símbolo                                                                                  |
+| ---------- | ---------------------------------------------------------------------------------------- |
+| Components | `DynamicFormComponent`, `DynamicFormDirective`, `FieldLabelComponent`, `LookupComponent` |
+| Classes    | `DynamicFormRegistry`                                                                    |
+| Types      | `DynamicStructure`, `FieldConfig`, `DynamicType`, `FieldType`, `FieldTypeMap`            |
+
+```typescript
+import { DynamicFormComponent } from '@seniorsistemas/angular-components/dynamic-form';
+import { DynamicFormModule } from '@seniorsistemas/angular-components/dynamic-form';
+import type { DynamicStructure } from '@seniorsistemas/angular-components/dynamic-form';
+```
+
+---
+
+## Regra de estruturas
+
+- Use `row` quando os campos não precisam de título visual agrupando-os. É o tipo padrão.
+- **TODOS** os campos do formulário devem ir na **mesma `row`**. Só crie uma estrutura adicional se for necessário separar campos em um agrupamento com título próprio.
+- `section` **OBRIGATORIAMENTE** deve ter `header`. Nunca use `section` sem `header`.
+- Dentro de `section` **SEMPRE** deve haver outra `DynamicStructure` (`row` ou `fieldset`). Campos diretos em `section` não são permitidos.
+- **NUNCA** aninhe `section` dentro de `section`.
+- **Antes de agrupar campos**, pergunte ao usuário qual estrutura ele quer usar para organizar o formulário: `row` (sem título), `section` (nova seção com título), ou `fieldset` (agrupamento semântico com título).
+
+### Exemplo comum (sem seção)
+
+```typescript
+protected configs: DynamicStructure[] = [
+    {
+        type: 'row',
+        fields: [
+            { name: 'name', type: 'string', label: 'Nome', required: () => true, size: { xl: 6 } },
+            { name: 'email', type: 'string', label: 'E-mail', required: () => true, size: { xl: 6 } },
+        ],
+    },
+];
+```
+
+> **OBRIGATÓRIO:** Para cada campo em `fields`, o `FormGroup` **deve ter um `FormControl` declarado explicitamente com o mesmo valor de `name`**. O DynamicForm usa esse nome internamente como `formControlName` para fazer o vínculo — ele NÃO cria os controles automaticamente.
+> No exemplo acima, o `FormGroup` deve ser criado com: `this.fb.group({ name: [], email: [] })`.
+
+### Exemplo com seção (quando há nova seção)
+
+```typescript
+protected configs: DynamicStructure[] = [
+    {
+        type: 'section',
+        header: 'Dados Pessoais',
+        configs: [
+            {
+                type: 'row',
+                fields: [
+                    { name: 'name', type: 'string', label: 'Nome', required: () => true, size: { xl: 6 } },
+                    { name: 'email', type: 'string', label: 'E-mail', required: () => true, size: { xl: 6 } },
+                ],
+            },
+        ],
+    },
+];
+```
+
+### Exemplo com `fieldset` para agrupamento
+
+```typescript
+protected configs: DynamicStructure[] = [
+    {
+        type: 'row',
+        fields: [
+            { name: 'fullName', type: 'string', label: 'Nome completo', size: { xl: 12 } },
+        ],
+    },
+    {
+        type: 'fieldset',
+        header: 'Endereço',
+        configs: [
+            {
+                type: 'row',
+                fields: [
+                    { name: 'zipCode', type: 'string', label: 'CEP', size: { xl: 4 }, mask: '000000-000' },
+                    { name: 'street', type: 'string', label: 'Rua', size: { xl: 8 } },
+                ],
+            },
+        ],
+    },
+];
+```
+
+---
+
+## Padrão 1: Com `FormGroup` externo ✅ PADRÃO OBRIGATÓRIO
+
+O DynamicForm **NÃO cria nem gerencia seu próprio FormGroup**. O `FormGroup` deve ser criado externamente no componente e passado via `[form]`. **Para cada campo declarado em `configs`, deve existir um `FormControl` no `FormGroup` com o mesmo valor de `name`** — o DynamicForm usa esse nome como `formControlName` internamente.
+
+### Exemplo
+
+```typescript
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { DynamicFormModule, DynamicStructure } from '@seniorsistemas/angular-components/dynamic-form';
+
+@Component({
+    imports: [DynamicFormModule, ReactiveFormsModule],
+    template: `
+        <s-dynamic-form
+            [form]="form"
+            [configs]="configs"
+        />
+        <s-button
+            label="Salvar"
+            priority="primary"
+            [disabled]="form.invalid"
+            (clicked)="save()"
+        />
+    `,
+})
+export class MyComponent implements OnInit {
+    private readonly fb = inject(FormBuilder);
+
+    protected form!: FormGroup;
+    protected configs: DynamicStructure[] = [
+        {
+            type: 'row',
+            fields: [
+                { name: 'name', type: 'string', label: 'Nome', required: () => true, size: { xl: 6 } },
+                { name: 'email', type: 'string', label: 'E-mail', required: () => true, size: { xl: 6 } },
+                { name: 'birthDate', type: 'date', label: 'Data de Nascimento', size: { xl: 4 } },
+            ],
+        },
+    ];
+
+    public ngOnInit(): void {
+        // Cada FormControl deve ter o mesmo nome que o `name` do campo em configs
+        this.form = this.fb.group({
+            name: [],
+            email: [],
+            birthDate: [],
+        });
+    }
+
+    protected save(): void {
+        if (this.form.valid) {
+            console.log(this.form.value);
+        }
+    }
+}
+```
+
+---
+
+## Notas de integração
+
+- O `FormGroup` **DEVE** ser criado antes do DynamicForm renderizar, com um `FormControl` para cada campo. Exemplo: `this.fb.group({ fieldName: [], otherField: [] })`.
+- Cada campo em `fields` **DEVE** ter `name` definido. Para cada `name`, **declare explicitamente um `FormControl` no `FormGroup` com o mesmo nome** — o DynamicForm usa esse nome como `formControlName` internamente e não cria controles automaticamente.
+- Exemplo: campos com `name: 'name'` e `name: 'email'` exigem `this.fb.group({ name: [], email: [] })`.
+- No array `fields`, a propriedade `required` deve ser uma função que retorna boolean (`() => boolean`).
+- Para campos opcionais com providers específicos (ex: `editor`), use a tool `detect_required_providers` para identificar o provider necessário e onde adicioná-lo.
+- Use `size` com breakpoints customizados (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `big`) — **NÃO use breakpoints padrão do Tailwind**.
+- **NUNCA** use `s-select`, `s-checkbox`, `s-text-area` ou outros campos individualmente — sempre prefira `s-dynamic-form`.
+
+---
+
+## Criando um tipo de campo customizado
+
+> ⚠️ **ATENÇÃO: uso pouco frequente.** Criar um tipo custom do zero é trabalhoso e só deve ser feito quando não existe nenhum tipo nativo que atenda à necessidade e nenhuma lib externa com provider já disponível. **Antes de criar, pergunte ao usuário:**
+>
+> 1. Já existe algum tipo custom implementado no projeto (ex: em `optional-fields/` ou equivalente)?
+> 2. Existe alguma biblioteca/pacote que o projeto já usa que fornece um provider pronto para o DynamicForm?
+
+### Passo 1 — Criar a interface de configuração e o provider
+
+Crie um arquivo `<nome>-field.ts` no diretório do seu campo customizado.
+A interface deve estender `FieldConfig`, fazer o module augmentation registrando o novo tipo em `FieldTypeMap`, e exportar uma função `provide<Nome>Field()` que registra o componente no `DynamicFormRegistry`.
+
+```typescript
+// my-custom-field.ts
+import { APP_INITIALIZER, EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
+import { FieldConfig, DynamicFormRegistry } from '@seniorsistemas/angular-components/dynamic-form';
+import { MyCustomFieldComponent } from './my-custom-field/my-custom-field.component';
+
+/** Configuração do campo customizado. */
+export interface MyCustomFieldConfig extends FieldConfig {
+    type: 'myCustom';
+    // adicione aqui as propriedades específicas do seu campo
+    someOption?: string;
+}
+
+// Augmentation: registra o novo tipo no mapa do DynamicForm
+declare module '@seniorsistemas/angular-components/dynamic-form' {
+    export interface FieldTypeMap {
+        myCustom: MyCustomFieldConfig;
+    }
+}
+
+/** Registra o componente do campo customizado no DynamicForm. */
+export function provideMyCustomField(): EnvironmentProviders {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            useFactory: () => () => {
+                DynamicFormRegistry.registerField(MyCustomFieldComponent, 'myCustom');
+            },
+            multi: true,
+        },
+    ]);
+}
+```
+
+### Passo 2 — Criar o componente Angular
+
+Crie um componente standalone que implementa `BaseFieldComponentConfig`.
+Requisitos obrigatórios:
+
+- Ser `standalone: true`
+- Implementar `BaseFieldComponentConfig`
+- Ter o `input` de `field` (tipado com a interface criada no passo 1)
+- Ter o `input` de `formControl` (necessário quando o campo modifica o `FormGroup`, que é quase sempre)
+- Importar e **renderizar `FieldLabelComponent` como primeira tag no template** — responsável por exibir o label, tooltip e infoSign do campo
+
+```typescript
+// my-custom-field/my-custom-field.component.ts
+import { Component, input } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { BaseFieldComponentConfig, FieldLabelComponent } from '@seniorsistemas/angular-components/dynamic-form';
+import { MyCustomFieldConfig } from '../my-custom-field';
+
+@Component({
+    standalone: true,
+    imports: [ReactiveFormsModule, FieldLabelComponent /* + outros imports necessários */],
+    templateUrl: './my-custom-field.component.html',
+})
+export class MyCustomFieldComponent implements BaseFieldComponentConfig {
+    /** Config do campo injetada pelo DynamicForm. */
+    field = input.required<MyCustomFieldConfig>();
+
+    /** FormControl associado ao campo no FormGroup pai. */
+    formControl = input.required<FormControl>();
+}
+```
+
+```html
+<!-- my-custom-field/my-custom-field.component.html -->
+@let _field = field();
+
+<!-- OBRIGATÓRIO: sempre a primeira tag do template -->
+<s-field-label [field]="_field"></s-field-label>
+
+<!-- Implemente aqui o input/controle visual do campo -->
+<input
+    [formControl]="formControl()"
+    [placeholder]="_field.placeholder ?? ''"
+/>
+```
+
+### Passo 3 — Registrar o provider no AppConfig ou AppModule
+
+O provider gerado no Passo 1 deve ser adicionado ao `providers` do `app.config.ts` (projetos standalone) ou ao `providers` do `AppModule` (projetos com módulos).
+
+```typescript
+// app.config.ts (projetos standalone)
+import { provideMyCustomField } from './my-custom-field/my-custom-field';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        // ... outros providers
+        provideMyCustomField(),
+    ],
+};
+```
+
+Após registrar o provider, o tipo `'myCustom'` estará disponível na configuração do DynamicForm:
+
+```typescript
+configs: DynamicStructure[] = [
+    {
+        type: 'section',
+        configs: [
+            {
+                type: 'row',
+                fields: [
+                    { type: 'myCustom', name: 'meuCampo', label: 'Meu Campo', someOption: 'valor' }
+                ]
+            }
+        ]
+    }
+];
+```
+

package/dist/data/component-technical/index.json

@@ -0,0 +1,4 @@
+{
+    "components": ["dialog", "confirm-dialog", "toast", "sidebar", "loading-state", "dynamic-form", "kanban", "table"]
+}
+