@sapphire-caitlyn/schema-kit-ng 0.0.4 → 0.0.6

package/README.md

@@ -2,6 +2,8 @@
 
 Lib de CRUD do backoffice: um `SchemaService` descreve a entidade, o `<schema-table>` faz a listagem e o
 `<schema-view>` faz o criar/editar. Cada componente tem um README ao lado do código, em `src/lib/components/`.
+No pacote publicado eles ficam em `docs/`, com a mesma estrutura de pastas (ex.: `docs/schema-view/README.md`),
+então os links entre eles continuam valendo. README novo em `src/lib/components/` entra no pacote sem configuração.
 
 ## Entry points
 

package/docs/inputs/date/input-date/README.md

@@ -0,0 +1,37 @@
+# input-date
+
+Data com calendário e digitação mascarada (`dd/MM/yyyy`).
+
+## Uso
+
+```ts
+import { InputDateComponent } from '@schema-kit';
+import { DateTime } from 'luxon';
+
+hoje = DateTime.now();
+```
+
+```html
+<input-date label="Nascimento" [maxDate]="hoje" [formField]="form.nascimento" />
+```
+
+## Inputs
+
+| Input                | Tipo               | Padrão           | Descrição                         |
+| -------------------- | ------------------ | ---------------- | --------------------------------- |
+| `minDate`            | `DateTime \| null` | `null`           | Menor data selecionável           |
+| `maxDate`            | `DateTime \| null` | `null`           | Maior data selecionável           |
+| `defaultFocusedDate` | `DateTime`         | `DateTime.now()` | Mês aberto no calendário sem valor |
+
+Comuns (`label`, `loading`, `tooltipInfo`): [input-base](../../input-base/README.md).
+
+**Valor:** `string | null`: ISO às 00:00 locais, com offset (ex.: `2026-11-03T00:00:00.000-03:00`).
+
+## Slots
+
+- `[slot=input]`: dentro do date picker, depois do campo.
+
+## Atenção
+
+- `placeholder` é ignorado (fixo `dd/MM/yyyy`).
+- Não emite `touch`.

package/docs/inputs/date/input-date-span/README.md

@@ -0,0 +1,36 @@
+# input-date-span
+
+Intervalo de datas com calendário de intervalo e digitação mascarada (`dd/MM/yyyy - dd/MM/yyyy`).
+
+## Uso
+
+```ts
+import { InputDateSpanComponent, Span } from '@schema-kit';
+
+model = signal<{ periodo: Span | null }>({ periodo: null });
+```
+
+```html
+<input-date-span label="Período" [formField]="form.periodo" />
+```
+
+## Inputs
+
+| Input     | Tipo               | Padrão | Descrição               |
+| --------- | ------------------ | ------ | ----------------------- |
+| `minDate` | `DateTime \| null` | `null` | Menor data selecionável |
+| `maxDate` | `DateTime \| null` | `null` | Maior data selecionável |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../../input-base/README.md).
+
+**Valor:** `Span | null` = `[início, fim]` em ISO às 00:00 locais. `null` quando vazio.
+
+## Slots
+
+- `[slot=input]`: dentro do date picker, depois do campo.
+
+## Atenção
+
+- Digitar uma data só vira um intervalo de um dia. Datas invertidas são ordenadas.
+- O fim é 00:00 do último dia, não o fim do dia.
+- Com `[formField]`, as duas pontas são marcadas como dirty ao mudar, para o span entrar no `extractValue({ dirty: true })`.

package/docs/inputs/date/input-date-time/README.md

@@ -0,0 +1,32 @@
+# input-date-time
+
+Data e hora: digitação mascarada (`dd/MM/yyyy HH:mm:ss`) ou calendário + campo de horário num popover.
+
+## Uso
+
+```ts
+import { InputDateTimeComponent } from '@schema-kit';
+```
+
+```html
+<input-date-time label="Agendado para" [enableSeconds]="false" [formField]="form.agendadoEm" />
+```
+
+## Inputs
+
+| Input           | Tipo               | Padrão | Descrição                          |
+| --------------- | ------------------ | ------ | ---------------------------------- |
+| `minDate`       | `DateTime \| null` | `null` | Menor data aceita                  |
+| `maxDate`       | `DateTime \| null` | `null` | Maior data aceita                  |
+| `enableSeconds` | `boolean`          | `true` | `HH:mm:ss` ou `HH:mm` na digitação |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../../input-base/README.md).
+
+**Valor:** `string | null`: ISO com offset (ex.: `2026-11-03T14:30:00.000-03:00`).
+
+## Atenção
+
+- Escolher só o horário, sem data, usa o dia de hoje.
+- Trocar a data no calendário mantém o horário atual.
+- `defaultFocusedDate` não tem efeito aqui.
+- Não emite `touch`.

package/docs/inputs/date/input-date-time-span/README.md

@@ -0,0 +1,32 @@
+# input-date-time-span
+
+Intervalo de data e hora: dois campos mascarados (`dd/MM/yyyy HH:mm:ss`) ou calendário de intervalo + horários inicial e
+final num popover.
+
+## Uso
+
+```ts
+import { InputDateTimeSpanComponent, Span } from '@schema-kit';
+```
+
+```html
+<input-date-time-span label="Vigência" [formField]="form.vigencia" />
+```
+
+## Inputs
+
+| Input           | Tipo               | Padrão | Descrição                          |
+| --------------- | ------------------ | ------ | ---------------------------------- |
+| `minDate`       | `DateTime \| null` | `null` | Menor data aceita                  |
+| `maxDate`       | `DateTime \| null` | `null` | Maior data aceita                  |
+| `enableSeconds` | `boolean`          | `true` | `HH:mm:ss` ou `HH:mm` na digitação |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../../input-base/README.md).
+
+**Valor:** `Span | null` = `[início, fim]` em ISO com offset (timestamptz). Cada ponta pode ser `null` (intervalo aberto);
+`null` quando as duas estão vazias.
+
+## Atenção
+
+- Escolher a data mantém o horário daquela ponta. Sem horário, usa 00:00.
+- Com `[formField]`, as duas pontas são marcadas como dirty ao mudar, para o span entrar no `extractValue({ dirty: true })`.

package/docs/inputs/date/input-time/README.md

@@ -0,0 +1,28 @@
+# input-time
+
+Horário com máscara (`HH:MM:SS` ou `HH:MM`).
+
+## Uso
+
+```ts
+import { InputTimeComponent } from '@schema-kit';
+```
+
+```html
+<input-time label="Abertura" [enableSeconds]="false" [formField]="form.abertura" />
+```
+
+## Inputs
+
+| Input           | Tipo      | Padrão | Descrição                          |
+| --------------- | --------- | ------ | ---------------------------------- |
+| `enableSeconds` | `boolean` | `true` | `HH:mm:ss` ou `HH:mm` na digitação |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../../input-base/README.md).
+
+**Valor:** `string | null`, sempre `HH:mm:ss` (coluna `time` do postgres). Sem segundos, grava `:00`.
+
+## Atenção
+
+- Enquanto o horário digitado está incompleto, o valor é `null`.
+- Aceita na entrada `HH:mm`, `HH:mm:ss` e `HH:mm:ss.SSS`.

package/docs/inputs/date/input-time-span/README.md

@@ -0,0 +1,29 @@
+# input-time-span
+
+Intervalo de horários: dois campos mascarados (`HH:MM:SS` ou `HH:MM`).
+
+## Uso
+
+```ts
+import { InputTimeSpanComponent, Span } from '@schema-kit';
+```
+
+```html
+<input-time-span label="Expediente" [enableSeconds]="false" [formField]="form.expediente" />
+```
+
+## Inputs
+
+| Input           | Tipo      | Padrão | Descrição                          |
+| --------------- | --------- | ------ | ---------------------------------- |
+| `enableSeconds` | `boolean` | `true` | `HH:mm:ss` ou `HH:mm` na digitação |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../../input-base/README.md).
+
+**Valor:** `Span | null` = `[início, fim]` em `HH:mm:ss`. Cada ponta pode ser `null` (intervalo aberto); `null` quando as
+duas estão vazias.
+
+## Atenção
+
+- Enquanto um horário está incompleto, aquela ponta é `null`.
+- Com `[formField]`, as duas pontas são marcadas como dirty ao mudar, para o span entrar no `extractValue({ dirty: true })`.

package/docs/inputs/input-base/README.md

@@ -0,0 +1,42 @@
+# input-base
+
+Classe base de todos os `input-*`. Não é usada no template: define as props que todos os inputs têm.
+
+## Uso
+
+Ligue o input ao formulário com `[formField]` (signal forms). Ele liga valor, erros e estados:
+
+```html
+<input-string
+  label="Nome"
+  placeholder="Seu nome"
+  tooltipInfo="Como aparece no perfil"
+  [formField]="form.nome"
+  [loading]="carregando()"
+/>
+```
+
+Também funciona com `[(ngModel)]`, sem erros nem estados do form (ex.: [schema-table-filter](../../schema-table/schema-table-filter/schema-table-filter.component.html)).
+
+## Inputs comuns
+
+| Input         | Tipo             | Padrão  | Descrição                                       |
+| ------------- | ---------------- | ------- | ----------------------------------------------- |
+| `label`       | `string`         | `''`    | Label acima do campo. Vazio: não renderiza      |
+| `placeholder` | `string \| null` | `null`  | Placeholder                                     |
+| `loading`     | `boolean`        | `false` | Skeleton por cima do campo                      |
+| `tooltipInfo` | `string \| null` | `null`  | Ícone (?) com tooltip ao lado do label          |
+
+Vêm do `[formField]`: `value`, `errors`, `invalid`, `touched`, `readonly` e `disabled`. `readonly` e `disabled` têm o
+mesmo efeito: bloqueiam a edição.
+
+## Outputs
+
+| Output  | Tipo   | Descrição                                                                    |
+| ------- | ------ | ---------------------------------------------------------------------------- |
+| `touch` | `void` | Fim da interação (blur, seleção, limpar). O `[formField]` marca como tocado  |
+
+## Erros
+
+As mensagens (`message` dos validators) aparecem abaixo do campo só com `invalid && touched`. Inputs que não emitem
+`touch` (indicado no README de cada um) só mostram erro depois que o campo é marcado como tocado por outro caminho.

package/docs/inputs/input-bool/README.md

@@ -0,0 +1,30 @@
+# input-bool
+
+Campo booleano, exibido como switch ou checkbox.
+
+## Uso
+
+```ts
+import { InputBoolComponent, InputBoolPresentation } from '@schema-kit';
+```
+
+```html
+<input-bool label="Ativo" [formField]="form.ativo" />
+<input-bool label="Aceito os termos" [presentation]="InputBoolPresentation.CHECKBOX" [formField]="form.termos" />
+```
+
+## Inputs
+
+| Input          | Tipo                     | Padrão     | Descrição           |
+| -------------- | ------------------------ | ---------- | ------------------- |
+| `presentation` | `InputBoolPresentation` (`SWITCH` \| `CHECKBOX`) | `SWITCH` | Controle exibido |
+
+Comuns (`label`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor:** `boolean | null`. `null` aparece desligado.
+
+## Atenção
+
+- O `label` aparece duas vezes: acima do campo e ao lado do controle.
+- Clicar em qualquer parte do campo alterna o valor.
+- Não emite `touch`.

package/docs/inputs/input-color/README.md

@@ -0,0 +1,24 @@
+# input-color
+
+Campo de cor hexadecimal, com swatch e um [color-picker](color-picker/README.md) num popover.
+
+## Uso
+
+```ts
+import { InputColorComponent } from '@schema-kit';
+```
+
+```html
+<input-color label="Cor" [formField]="form.cor" />
+```
+
+## Inputs
+
+Só os comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor:** `string | null` no formato `#rrggbb` (minúsculo). Aceita digitar `abc`, `#abc`, `aabbcc` ou `#AABBCC`.
+
+## Atenção
+
+- Texto incompleto é descartado no blur e o campo volta para o último valor válido.
+- Mudar a opacidade no seletor grava `#rrggbbaa`. O input não reconhece esse formato e o swatch fica vazio.

package/docs/inputs/input-color/color-picker/README.md

@@ -0,0 +1,25 @@
+# color-picker
+
+Seletor de cor: área de saturação/brilho, barras de matiz e opacidade, campos em HEX, RGB, CSS ou HSL e conta-gotas
+(só em navegadores Chromium). Usado dentro do [input-color](../README.md), mas funciona sozinho.
+
+## Uso
+
+```ts
+import { ColorPickerComponent } from '@schema-kit';
+```
+
+```html
+<color-picker [(ngModel)]="cor" />
+```
+
+## Inputs
+
+| Input          | Tipo                                 | Padrão      | Descrição                                     |
+| -------------- | ------------------------------------ | ----------- | --------------------------------------------- |
+| `defaultValue` | `string`                             | `'#000000'` | Cor exibida enquanto o valor está vazio       |
+| `disabled`     | `boolean`                            | `false`     | Bloqueia a edição                             |
+| `mode`         | `'hex' \| 'rgb' \| 'css' \| 'hsl'`   | `'hex'`     | Formato dos campos. Aceita `[(mode)]`         |
+
+**Valor:** `#rrggbb`, ou `#rrggbbaa` quando a opacidade é menor que 100%. Aceita também `#rgb`, `#rgba`, `rgb()` e
+`rgba()` na entrada.

package/docs/inputs/input-cpf-cnpj/README.md

@@ -0,0 +1,34 @@
+# input-cpf-cnpj
+
+CPF e/ou CNPJ com máscara. Aceita o CNPJ alfanumérico (padrão 2026) e converte letras para maiúsculas.
+
+| Seletor          | Máscara                                                                  |
+| ---------------- | ------------------------------------------------------------------------ |
+| `input-cpf`      | `000.000.000-00`                                                         |
+| `input-cnpj`     | `AA.AAA.AAA/AAAA-00`                                                     |
+| `input-cpf-cnpj` | CPF; vira CNPJ quando passa de 11 caracteres ou tem letra               |
+
+## Uso
+
+```ts
+import { cpfValidator, InputCpfCnpjComponent } from '@schema-kit';
+
+form = form(this.model, (schema) => {
+  cpfValidator(schema.cpf);
+});
+```
+
+```html
+<input-cpf label="CPF" [formField]="form.cpf" />
+```
+
+## Inputs
+
+Só os comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor:** `string | null`: sem pontuação, em maiúsculas (ex.: `12345678901`).
+
+## Atenção
+
+- A máscara não valida os dígitos. Use `cpfValidator`, `cnpjValidator` ou `cpfCnpjValidator` no schema do form.
+- Não emite `touch` no blur.

package/docs/inputs/input-file/README.md

@@ -0,0 +1,33 @@
+# input-file
+
+Seleção de um ou vários arquivos, com pré-visualização de imagens ([file-preview](../../ui/file-preview/README.md)).
+
+## Uso
+
+```ts
+import { InputFileComponent } from '@schema-kit';
+```
+
+```html
+<input-file label="Contrato" [clearable]="true" [formField]="form.contrato" />
+<input-file label="Anexos" [multiple]="true" [formField]="form.anexos" />
+```
+
+## Inputs
+
+| Input       | Tipo      | Padrão  | Descrição                                                   |
+| ----------- | --------- | ------- | ----------------------------------------------------------- |
+| `multiple`  | `boolean` | `false` | Vários arquivos. Cada um ganha um botão de remover          |
+| `clearable` | `boolean` | `false` | Botão de limpar (só sem `multiple`)                         |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor (`InputFileValue`):** recebe `string` (URL de um arquivo já salvo), `File`, `File[]` ou `FileList`. Grava `File`
+(ou `File[]` com `multiple`), ou `null` quando vazio.
+
+## Atenção
+
+- O componente não faz upload. O `SchemaService` envia `FormData` quando algum campo tem arquivo (lista em `campo[]`).
+- Com `multiple`, uma nova seleção soma aos arquivos atuais.
+- Não há `accept` nem limite de tamanho: valide no schema do form.
+- O input `type` (`dropzone`) ainda não tem efeito.

package/docs/inputs/input-icon/README.md

@@ -0,0 +1,28 @@
+# input-icon
+
+Select de ícones [Lucide](https://lucide.dev/icons), com busca e preview.
+
+## Uso
+
+```ts
+import { InputIconComponent } from '@schema-kit';
+```
+
+```html
+<input-icon label="Ícone" placeholder="Buscar ícone" [formField]="form.icone" />
+
+<!-- Exibindo o ícone salvo -->
+<ng-icon [name]="form.icone().value()" />
+```
+
+## Inputs
+
+Só os comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor:** `string | null`: o nome do ícone no `ng-icons` (ex.: `lucideHouse`).
+
+## Atenção
+
+- A busca casa cada palavra com o nome (`home smile`) e exibe no máximo 60 resultados.
+- O componente registra os ícones só para ele. Para exibir o valor fora dele, os ícones Lucide precisam estar registrados no
+  app (o [app.config.ts](../../../../../../../src/app/app.config.ts) já faz isso).

package/docs/inputs/input-json/README.md

@@ -0,0 +1,36 @@
+# input-json
+
+Visualizador/editor de JSON num code block, com botões de copiar, editar e formatar.
+
+## Uso
+
+```ts
+import { InputJsonComponent } from '@schema-kit';
+```
+
+```html
+<input-json label="Payload" [formField]="form.payload" />
+```
+
+## Inputs
+
+| Input  | Tipo               | Padrão   | Descrição                                        |
+| ------ | ------------------ | -------- | ------------------------------------------------ |
+| `mode` | `'view' \| 'edit'` | `'view'` | Exibição com destaque ou textarea. Aceita `[(mode)]` |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor:** `string` com o texto do JSON. Formatar grava com indentação de 2 espaços.
+
+## Slots
+
+- `[slot=field]`: entre o label e o code block.
+- `[slot=input]`: depois do code block.
+
+## Atenção
+
+- Passe o JSON como string: um objeto aparece como `[object Object]` e não formata.
+- `readonly`/`disabled` não bloqueiam a edição: o botão de editar continua ativo.
+- Não valida o JSON. Formatar um JSON inválido não faz nada (só `console.error`).
+- O `label` aparece duas vezes: acima do campo e no título do code block.
+- Não emite `touch`.

package/docs/inputs/input-mask/README.md

@@ -0,0 +1,39 @@
+# input-mask
+
+Campo de texto com uma máscara [Maskito](https://maskito.dev) qualquer.
+
+## Uso
+
+```ts
+import { InputMaskComponent } from '@schema-kit';
+import { MaskitoOptions } from '@maskito/core';
+
+export class ExemploComponent {
+  cepMask: MaskitoOptions = { mask: [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/] };
+  unmaskCep = (masked: string) => masked.replace(/\D/g, '') || null;
+}
+```
+
+```html
+<input-mask label="CEP" [maskitoOptions]="cepMask" [unmaskHandler]="unmaskCep" [formField]="form.cep" />
+```
+
+No [schema-view](../../schema-view/schema-view.component.html): `FieldType.Mask` com `options.maskitoOptions` e
+`options.unmaskHandler`.
+
+## Inputs
+
+| Input            | Tipo                                 | Padrão        | Descrição                              |
+| ---------------- | ------------------------------------ | ------------- | -------------------------------------- |
+| `maskitoOptions` | `MaskitoOptions`                     | (obrigatório) | Máscara                                |
+| `unmaskHandler`  | `(masked: string) => string \| null` | `undefined`   | Converte o texto mascarado para o valor |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor:** `string | null`: o retorno do `unmaskHandler`. Sem ele, o próprio texto mascarado.
+
+## Atenção
+
+- Um valor vindo do form passa pela máscara antes de aparecer (`maskitoTransform`).
+- Máscaras prontas exportadas pela lib: `maskitoOptionsCPF`, `maskitoOptionsCNPJ`, `maskitoOptionsCPFOrCNPJ`, `maskitoOptionsPhone`.
+- Não emite `touch` no blur.

package/docs/inputs/input-number/README.md

@@ -0,0 +1,44 @@
+# input-number
+
+Campo numérico com máscara pt-BR (`1.234,56`). O seletor define o padrão de casas decimais e prefixo:
+
+| Seletor            | Decimais | Prefixo |
+| ------------------ | -------- | ------- |
+| `input-number`     | 0        |         |
+| `input-decimal`    | 2        |         |
+| `input-currency`   | 2        | `R$ `   |
+| `input-percentage` | 0        |         |
+
+## Uso
+
+```ts
+import { InputNumberComponent } from '@schema-kit';
+```
+
+```html
+<input-number label="Quantidade" [min]="0" [formField]="form.quantidade" />
+<input-currency label="Preço" [formField]="form.preco" />
+<input-decimal label="Desconto" postfix=" %" [maximumFractionDigits]="1" [formField]="form.desconto" />
+```
+
+## Inputs
+
+| Input                   | Tipo     | Padrão          | Descrição                     |
+| ----------------------- | -------- | --------------- | ----------------------------- |
+| `minimumFractionDigits` | `number` | pelo seletor    | Mínimo de casas decimais      |
+| `maximumFractionDigits` | `number` | pelo seletor    | Máximo de casas decimais      |
+| `prefix`                | `string` | pelo seletor    | Texto antes do número         |
+| `postfix`               | `string` | `''`            | Texto depois do número        |
+| `min`                   | `number` | `MIN_SAFE_INTEGER` | Menor valor aceito pela máscara |
+| `max`                   | `number` | `MAX_SAFE_INTEGER` | Maior valor aceito pela máscara |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor:** `number | null`
+
+## Atenção
+
+- `input-percentage` não adiciona `%` nem casas decimais. Use `input-decimal` com `postfix=" %"`.
+- `min`/`max` só limitam a digitação e não geram erro. Para mostrar mensagem, use `min()`/`max()` no schema do form.
+- Não emite `touch` no blur e não destaca a borda quando inválido.
+- O label é sempre renderizado, mesmo vazio.

package/docs/inputs/input-phone/README.md

@@ -0,0 +1,25 @@
+# input-phone
+
+Telefone com máscara internacional ([@maskito/phone](https://maskito.dev/addons/phone) + `libphonenumber-js`). O número é
+digitado com o código do país (`+55 11 91234-5678`).
+
+## Uso
+
+```ts
+import { InputPhoneComponent } from '@schema-kit';
+```
+
+```html
+<input-phone label="Telefone" placeholder="+55 11 91234-5678" [formField]="form.telefone" />
+```
+
+## Inputs
+
+Só os comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor:** `string | null`: só dígitos e `+` (ex.: `+5511912345678`).
+
+## Atenção
+
+- Não valida se o número existe. Só aplica a máscara.
+- Não emite `touch` no blur.

package/docs/inputs/input-select/README.md

@@ -0,0 +1,42 @@
+# input-select
+
+Select com busca (`hlm-combobox`). Os itens vêm de uma lista local, de uma Promise/Observable ou de um `SchemaService`.
+
+## Uso
+
+```ts
+import { InputSelectComponent } from '@schema-kit';
+```
+
+```html
+<!-- Lista local -->
+<input-select label="Status" [items]="status" bindLabel="nome" bindValue="id" [formField]="form.status" />
+
+<!-- API: busca no servidor; bindLabel/bindValue vêm do service -->
+<input-select label="Usuário" [schemaService]="usuarioService" [clearable]="true" [formField]="form.usuarioId" />
+```
+
+## Inputs
+
+| Input           | Tipo                                                    | Padrão        | Descrição                                       |
+| --------------- | ------------------------------------------------------- | ------------- | ----------------------------------------------- |
+| `items`         | `T[]`                                                   | `[]`          | Lista local                                     |
+| `loadFrom`      | `Promise \| Observable<IPaginatedResult<T>> \| SchemaService` | `null`  | Fonte dos itens. Tem prioridade sobre `schemaService` |
+| `schemaService` | `SchemaService`                                         | `null`        | Busca na API e define `bindLabel`/`bindValue` padrão |
+| `bindLabel`     | `keyof T \| (item: T) => string \| TemplateRef`         | do service    | Texto (ou template) de cada item                |
+| `bindValue`     | `keyof T \| (item: T) => V`                             | do service    | Valor gravado no form                           |
+| `lstFilter`     | `IIndexFilter[]`                                        | `null`        | Filtros enviados ao `index` (só `SchemaService`) |
+| `clearable`     | `boolean`                                               | `false`       | Botão de limpar                                 |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor:** `V | null`
+
+## Atenção
+
+- Com `SchemaService`, a busca vai para a API (`index`, página 1, 10 itens). Nas outras fontes, a busca filtra a lista
+  localmente pelo label.
+- A lista só recarrega quando a busca muda: trocar `items` ou `loadFrom` depois do carregamento não atualiza.
+- Valor fora da lista (ex.: ao editar um registro): com `SchemaService` e valor `string`, o item é carregado com `show()`.
+- O valor é comparado com `===`: o tipo tem que bater com o `bindValue` (`1` ≠ `'1'`).
+- Um Observable precisa completar (é lido com `lastValueFrom`).

package/docs/inputs/input-string/README.md

@@ -0,0 +1,32 @@
+# input-string
+
+Campo de texto de uma linha.
+
+## Uso
+
+```ts
+import { InputStringComponent } from '@schema-kit';
+```
+
+```html
+<input-string label="E-mail" type="email" placeholder="email@exemplo.com" [formField]="form.email" />
+```
+
+## Inputs
+
+| Input  | Tipo                       | Padrão   | Descrição                                          |
+| ------ | -------------------------- | -------- | -------------------------------------------------- |
+| `type` | `HTMLInputElement['type']` | `'text'` | Tipo do `<input>` nativo (`email`, `password`...) |
+
+Comuns (`label`, `placeholder`, `loading`, `tooltipInfo`): [input-base](../input-base/README.md).
+
+**Valor:** `string | null`
+
+## Slots
+
+- `[slot=field]`: entre o label e o campo.
+- `[slot=input]`: dentro do wrapper `relative` do campo (ex.: um botão sobre o input).
+
+## Atenção
+
+- `type="number"` continua gravando `string`. Para números use o [input-number](../input-number/README.md).