@softize/opus 21.0.1 → 22.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +47 -0
- package/bin/lib/check.mjs +31 -28
- package/docs/adr/0004-page-content-state-is-composed.md +3 -2
- package/docs/adr/0005-structural-surfaces-share-an-explicit-anatomy.md +3 -0
- package/docs/adr/0006-semantic-context-precedes-visual-variant.md +23 -14
- package/docs/adr/0011-page-shell-coordinates-persistent-page-chrome.md +5 -0
- package/docs/adr/0013-presentation-is-a-portable-action-oriented-artifact.md +7 -4
- package/docs/adr/0016-list-collection-header-belongs-to-content.md +13 -8
- package/docs/adr/0023-surfaces-share-one-anatomy-and-two-layouts.md +27 -26
- package/docs/adr/0025-content-frame-treatment-does-not-change-semantics.md +1 -0
- package/docs/adr/0029-page-header-is-the-single-page-introduction.md +71 -0
- package/docs/adr/0030-framed-content-can-use-sectioned-anatomy.md +89 -0
- package/docs/adr/0031-detail-dividers-own-the-tabular-label-treatment.md +61 -0
- package/docs/adr/0032-tab-baseline-respects-the-container-inset.md +59 -0
- package/docs/adr/0033-drawer-uses-an-inset-structural-frame.md +72 -0
- package/docs/adr/0034-tabs-can-own-a-frame-without-owning-a-surface.md +60 -0
- package/docs/adr/0035-button-group-separates-frame-relationship-and-distribution.md +63 -0
- package/docs/adr/0036-tabs-declares-trigger-distribution.md +58 -0
- package/docs/radius-scale.md +5 -2
- package/package.json +1 -1
- package/registry/skills/build-opus-ui/SKILL.md +9 -6
- package/registry/skills/build-opus-ui/references/evaluations.md +5 -2
- package/registry/skills/build-opus-ui/references/ui-patterns.md +14 -16
- package/src/ui/components/patterns/content-header.tsx +51 -13
- package/src/ui/components/patterns/list.tsx +51 -33
- package/src/ui/components/patterns/page.tsx +139 -251
- package/src/ui/components/patterns/presentation.tsx +2 -6
- package/src/ui/components/primitives/button-group.tsx +80 -8
- package/src/ui/components/primitives/button.tsx +85 -60
- package/src/ui/components/primitives/detail.tsx +63 -57
- package/src/ui/components/primitives/dialog.tsx +8 -11
- package/src/ui/components/primitives/drawer.tsx +16 -12
- package/src/ui/components/primitives/tabs.tsx +123 -54
- package/src/ui/docs/content/button.md +55 -29
- package/src/ui/docs/content/content.md +61 -36
- package/src/ui/docs/content/detail.md +28 -19
- package/src/ui/docs/content/drawer.md +53 -47
- package/src/ui/docs/content/input.md +51 -35
- package/src/ui/docs/content/page.md +84 -95
- package/src/ui/docs/content/pane.md +83 -63
- package/src/ui/docs/content/presentation.md +20 -20
- package/src/ui/docs/content/tabs.md +107 -36
- package/src/ui/meta.ts +5 -5
- package/src/ui/react.tsx +0 -1
|
@@ -9,7 +9,14 @@ validação, use [`Field`](/ui/field).
|
|
|
9
9
|
label="Estágio"
|
|
10
10
|
value={
|
|
11
11
|
<DictionaryValue
|
|
12
|
-
dict={{
|
|
12
|
+
dict={{
|
|
13
|
+
keys: ["prospect", "customer"],
|
|
14
|
+
entries: {
|
|
15
|
+
prospect: { label: "Prospecto" },
|
|
16
|
+
customer: { label: "Cliente", context: "success" },
|
|
17
|
+
},
|
|
18
|
+
presentation: "stage",
|
|
19
|
+
}}
|
|
13
20
|
value="prospect"
|
|
14
21
|
/>
|
|
15
22
|
}
|
|
@@ -39,12 +46,14 @@ React substitui a apresentação. `0` e `false` seguem como valores. A regra é
|
|
|
39
46
|
|
|
40
47
|
## Moldura e divisórias internas
|
|
41
48
|
|
|
42
|
-
`variant="framed"` adiciona a borda externa sem preencher o fundo
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
define se a chave fica sobre o valor ou ao lado dele.
|
|
46
|
-
|
|
47
|
-
|
|
49
|
+
`variant="framed"` adiciona somente a borda externa, sem preencher o fundo. `dividers` desenha as
|
|
50
|
+
divisórias internas; na orientação horizontal, também forma a grade tabular com fundo sutil e
|
|
51
|
+
padding próprio na coluna de rótulos. As duas opções são independentes e podem ser combinadas.
|
|
52
|
+
`orientation` define se a chave fica sobre o valor ou ao lado dele.
|
|
53
|
+
|
|
54
|
+
Na orientação horizontal, todos os valores começam depois da mesma coluna de rótulo, com largura
|
|
55
|
+
padrão de `7rem` em grupos simples e `8.5rem` quando `dividers` está ativo. Quando a superfície
|
|
56
|
+
exigir mais espaço para os rótulos, ajuste a variável no grupo, por exemplo com
|
|
48
57
|
`className="[--detail-label-width:9rem]"`.
|
|
49
58
|
|
|
50
59
|
```tsx preview col
|
|
@@ -62,24 +71,24 @@ começam depois da mesma coluna de rótulo, com largura padrão de `7rem` em gru
|
|
|
62
71
|
|
|
63
72
|
## Propriedades de DetailGroup
|
|
64
73
|
|
|
65
|
-
| Propriedade
|
|
66
|
-
|
|
67
|
-
| `variant`
|
|
68
|
-
| `dividers`
|
|
69
|
-
| `columns`
|
|
70
|
-
| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Chave sobre o valor ou ao lado dele em cada campo.
|
|
74
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
75
|
+
| ------------- | ---------------------------- | ------------ | --------------------------------------------------------------------------------------------------------- |
|
|
76
|
+
| `variant` | `'plain' \| 'framed'` | `'plain'` | `framed` aplica somente a moldura canônica ao conjunto, com fundo transparente. |
|
|
77
|
+
| `dividers` | `boolean` | `false` | Linhas finas entre os campos; na orientação horizontal, aplica fundo sutil e padding próprio aos rótulos. |
|
|
78
|
+
| `columns` | `1 \| 2 \| 3 \| 4 \| 'auto'` | `1` | Número fixo de colunas ou distribuição automática por largura mínima. |
|
|
79
|
+
| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Chave sobre o valor ou ao lado dele em cada campo. |
|
|
71
80
|
|
|
72
81
|
O grupo renderiza uma lista de definições (`<dl>`); os demais atributos, como `className`, vão para
|
|
73
82
|
ela.
|
|
74
83
|
|
|
75
84
|
## Propriedades de DetailField
|
|
76
85
|
|
|
77
|
-
| Propriedade | Tipo
|
|
78
|
-
|
|
79
|
-
| `label`
|
|
80
|
-
| `value`
|
|
81
|
-
| `icon`
|
|
82
|
-
| `empty`
|
|
86
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
87
|
+
| ----------- | ----------- | ----------------- | ----------------------------------------------------------------------------------------------------- |
|
|
88
|
+
| `label` | `ReactNode` | obrigatório | A chave do par. |
|
|
89
|
+
| `value` | `ReactNode` | obrigatório | O valor; `null`, `undefined` e string vazia renderizam a ausência, `0` e `false` seguem como valores. |
|
|
90
|
+
| `icon` | `ReactNode` | | Ícone decorativo antes do par chave/valor. |
|
|
91
|
+
| `empty` | `ReactNode` | `“Não informado”` | Uma string dá significado acessível ao travessão; um nó próprio substitui a apresentação. |
|
|
83
92
|
|
|
84
93
|
Os demais atributos, como `className`, vão para o contêiner do par. `DetailField` não aceita
|
|
85
94
|
`children`: o conteúdo entra por `value`.
|
|
@@ -5,6 +5,10 @@ tela ao fundo. Para conteúdo curto e centralizado, prefira [`Dialog`](/ui/dialo
|
|
|
5
5
|
`side="right"`, o painel entra pela direita e pode ser fechado por Esc, pelo overlay ou pelo botão
|
|
6
6
|
de fechamento.
|
|
7
7
|
|
|
8
|
+
A moldura fica `0.25rem` afastada da viewport e usa borda completa, fundo base e raio `xl`, o mesmo
|
|
9
|
+
tratamento das superfícies estruturais do shell. O recorte mantém as faixas internas dentro dos
|
|
10
|
+
cantos, em qualquer valor de `side`.
|
|
11
|
+
|
|
8
12
|
```tsx preview
|
|
9
13
|
<Drawer>
|
|
10
14
|
<DrawerTrigger asChild>
|
|
@@ -125,7 +129,9 @@ em que o painel permanece aberto e troca de etapa.
|
|
|
125
129
|
</DrawerActions>
|
|
126
130
|
</DrawerHeader>
|
|
127
131
|
<DrawerBody>
|
|
128
|
-
<p className="text-sm text-muted-foreground">
|
|
132
|
+
<p className="text-sm text-muted-foreground">
|
|
133
|
+
Histórico de passagens na oficina.
|
|
134
|
+
</p>
|
|
129
135
|
</DrawerBody>
|
|
130
136
|
</DrawerContent>
|
|
131
137
|
</Drawer>
|
|
@@ -162,12 +168,12 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
|
|
|
162
168
|
|
|
163
169
|
## Propriedades de Drawer
|
|
164
170
|
|
|
165
|
-
| Propriedade | Tipo | Padrão | Descrição
|
|
166
|
-
| -------------- | ------------------------- | ------- |
|
|
167
|
-
| `open` | `boolean` | | Estado no modo controlado.
|
|
168
|
-
| `defaultOpen` | `boolean` | `false` | Abertura inicial no modo não controlado.
|
|
169
|
-
| `onOpenChange` | `(open: boolean) => void` | | Recebe as mudanças de abertura, inclusive Esc, overlay e botão de fechar.
|
|
170
|
-
| `modal` | `boolean` | `true` | Mantém foco e interação restritos ao painel aberto e exibe o overlay.
|
|
171
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
172
|
+
| -------------- | ------------------------- | ------- | ------------------------------------------------------------------------- |
|
|
173
|
+
| `open` | `boolean` | | Estado no modo controlado. |
|
|
174
|
+
| `defaultOpen` | `boolean` | `false` | Abertura inicial no modo não controlado. |
|
|
175
|
+
| `onOpenChange` | `(open: boolean) => void` | | Recebe as mudanças de abertura, inclusive Esc, overlay e botão de fechar. |
|
|
176
|
+
| `modal` | `boolean` | `true` | Mantém foco e interação restritos ao painel aberto e exibe o overlay. |
|
|
171
177
|
|
|
172
178
|
## Propriedades de DrawerTrigger
|
|
173
179
|
|
|
@@ -178,61 +184,61 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
|
|
|
178
184
|
|
|
179
185
|
## Propriedades de DrawerClose
|
|
180
186
|
|
|
181
|
-
| Propriedade | Tipo | Padrão | Descrição
|
|
182
|
-
| ----------- | ----------- | ------- |
|
|
183
|
-
| `asChild` | `boolean` | `false` | Aplica o fechamento ao filho; use com `Button`.
|
|
184
|
-
| `children` | `ReactNode` | | Controle que fecha o painel, como o `Cancelar` do rodapé.
|
|
187
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
188
|
+
| ----------- | ----------- | ------- | --------------------------------------------------------- |
|
|
189
|
+
| `asChild` | `boolean` | `false` | Aplica o fechamento ao filho; use com `Button`. |
|
|
190
|
+
| `children` | `ReactNode` | | Controle que fecha o painel, como o `Cancelar` do rodapé. |
|
|
185
191
|
|
|
186
192
|
## Propriedades de DrawerContent
|
|
187
193
|
|
|
188
|
-
| Propriedade | Tipo | Padrão
|
|
189
|
-
| ----------------- | ---------------------------------------- |
|
|
190
|
-
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'`
|
|
191
|
-
| `layout` | `'continuous' \| 'sectioned'` | `'sectioned'` | Anatomia da superfície inteira; os slots leem esse valor e não o recebem.
|
|
192
|
-
| `showCloseButton` | `boolean` | `true`
|
|
193
|
-
| `closeDisabled` | `boolean` | `false`
|
|
194
|
-
| `closeSize` | `"xs" \| "sm"` | `"sm"`
|
|
195
|
-
| `className` | `string` |
|
|
196
|
-
| `children` | `ReactNode` |
|
|
194
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
195
|
+
| ----------------- | ---------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------- |
|
|
196
|
+
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Borda de onde o painel aparece. |
|
|
197
|
+
| `layout` | `'continuous' \| 'sectioned'` | `'sectioned'` | Anatomia da superfície inteira; os slots leem esse valor e não o recebem. |
|
|
198
|
+
| `showCloseButton` | `boolean` | `true` | Inclui o botão de fechar no cabeçalho. Sem ele, Esc e o overlay continuam fechando o painel. |
|
|
199
|
+
| `closeDisabled` | `boolean` | `false` | Mantém o botão de fechar visível e desabilitado e impede que Esc e o clique no overlay fechem o painel. |
|
|
200
|
+
| `closeSize` | `"xs" \| "sm"` | `"sm"` | Define o tamanho da ação circular de fechar. |
|
|
201
|
+
| `className` | `string` | | Ajusta o painel, como a largura. |
|
|
202
|
+
| `children` | `ReactNode` | | Cabeçalho, corpo e rodapé. |
|
|
197
203
|
|
|
198
204
|
## Propriedades de DrawerHeader
|
|
199
205
|
|
|
200
|
-
| Propriedade | Tipo | Padrão | Descrição
|
|
201
|
-
| ----------- | ----------- | ------ |
|
|
202
|
-
| `className` | `string` | | Ajusta a faixa superior sobre o recuo do layout.
|
|
206
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
207
|
+
| ----------- | ----------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
208
|
+
| `className` | `string` | | Ajusta a faixa superior sobre o recuo do layout. |
|
|
203
209
|
| `children` | `ReactNode` | | Somente `DrawerNavigation`, `DrawerMedia`, `DrawerTitle` e `DrawerActions`, no máximo um de cada; o fechamento padrão entra depois deles. |
|
|
204
210
|
|
|
205
211
|
## Propriedades de DrawerMedia
|
|
206
212
|
|
|
207
|
-
| Propriedade | Tipo | Padrão | Descrição
|
|
208
|
-
| ----------- | ------------------------------------------------------------------------ | ----------- |
|
|
209
|
-
| `size` | `'xs' \| 'sm' \| 'default' \| 'lg'` | `'sm'` | Tamanho da moldura e do glifo na escala compartilhada.
|
|
210
|
-
| `context` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Declara o significado da cor.
|
|
211
|
-
| `variant` | `'subtle' \| 'outline'` | `'subtle'` | Usa preenchimento tonal ou acrescenta borda.
|
|
212
|
-
| `className` | `string` | | Ajusta a moldura sem substituir a escala.
|
|
213
|
-
| `asChild`
|
|
213
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
214
|
+
| ----------- | ------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
|
|
215
|
+
| `size` | `'xs' \| 'sm' \| 'default' \| 'lg'` | `'sm'` | Tamanho da moldura e do glifo na escala compartilhada. |
|
|
216
|
+
| `context` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Declara o significado da cor. |
|
|
217
|
+
| `variant` | `'subtle' \| 'outline'` | `'subtle'` | Usa preenchimento tonal ou acrescenta borda. |
|
|
218
|
+
| `className` | `string` | | Ajusta a moldura sem substituir a escala. |
|
|
219
|
+
| `asChild` | `boolean` | `false` | Cede o elemento para uma marca com visual próprio — um orbe, um logotipo — que ocupa o slot sem ganhar a moldura por cima. |
|
|
214
220
|
|
|
215
221
|
## Propriedades de DrawerNavigation
|
|
216
222
|
|
|
217
|
-
| Propriedade | Tipo | Padrão | Descrição
|
|
218
|
-
| ----------- | ----------- | ------ |
|
|
219
|
-
| `className` | `string` | | Ajusta a região introdutória da linha.
|
|
220
|
-
| `children` | `ReactNode` | | Retorno de um fluxo encadeado, antes do título.
|
|
223
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
224
|
+
| ----------- | ----------- | ------ | ----------------------------------------------- |
|
|
225
|
+
| `className` | `string` | | Ajusta a região introdutória da linha. |
|
|
226
|
+
| `children` | `ReactNode` | | Retorno de um fluxo encadeado, antes do título. |
|
|
221
227
|
|
|
222
228
|
## Propriedades de DrawerActions
|
|
223
229
|
|
|
224
|
-
| Propriedade | Tipo | Padrão | Descrição
|
|
225
|
-
| ----------- | ----------- | ------ |
|
|
226
|
-
| `className` | `string` | | Ajusta o agrupamento das ações.
|
|
227
|
-
| `children` | `ReactNode` | | Ações da tela no cabeçalho, antes do botão de fechar.
|
|
230
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
231
|
+
| ----------- | ----------- | ------ | ----------------------------------------------------- |
|
|
232
|
+
| `className` | `string` | | Ajusta o agrupamento das ações. |
|
|
233
|
+
| `children` | `ReactNode` | | Ações da tela no cabeçalho, antes do botão de fechar. |
|
|
228
234
|
|
|
229
235
|
## Propriedades de DrawerTitle
|
|
230
236
|
|
|
231
|
-
| Propriedade | Tipo
|
|
232
|
-
| ----------- |
|
|
233
|
-
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `h2` da primitiva | Hierarquia do documento. O tamanho vem do `layout`, nunca do nível.
|
|
234
|
-
| `className` | `string`
|
|
235
|
-
| `children` | `ReactNode`
|
|
237
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
238
|
+
| ----------- | ---------------------------- | ----------------- | ------------------------------------------------------------------------ |
|
|
239
|
+
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `h2` da primitiva | Hierarquia do documento. O tamanho vem do `layout`, nunca do nível. |
|
|
240
|
+
| `className` | `string` | | Ajusta o título, que trunca quando não cabe na linha. |
|
|
241
|
+
| `children` | `ReactNode` | | Nome do recurso ou da tarefa; nomeia a superfície para leitores de tela. |
|
|
236
242
|
|
|
237
243
|
## Propriedades de DrawerBody
|
|
238
244
|
|
|
@@ -242,7 +248,7 @@ do corpo como texto ou `Alert`.
|
|
|
242
248
|
|
|
243
249
|
## Propriedades de DrawerFooter
|
|
244
250
|
|
|
245
|
-
| Propriedade | Tipo | Padrão | Descrição
|
|
246
|
-
| ----------- | ----------- | ------ |
|
|
247
|
-
| `className` | `string` | | Ajusta a faixa do rodapé, inclusive a distribuição das ações.
|
|
248
|
-
| `children` | `ReactNode` | | Ações persistentes, normalmente dentro de um `ButtonGroup`.
|
|
251
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
252
|
+
| ----------- | ----------- | ------ | ------------------------------------------------------------- |
|
|
253
|
+
| `className` | `string` | | Ajusta a faixa do rodapé, inclusive a distribuição das ações. |
|
|
254
|
+
| `children` | `ReactNode` | | Ações persistentes, normalmente dentro de um `ButtonGroup`. |
|
|
@@ -28,7 +28,7 @@ senha. Diferentemente de `icon`, essa região pode ser interativa.
|
|
|
28
28
|
|
|
29
29
|
```tsx preview col md
|
|
30
30
|
function Demo() {
|
|
31
|
-
const [q, setQ] = useState(
|
|
31
|
+
const [q, setQ] = useState("preview pipeline");
|
|
32
32
|
return (
|
|
33
33
|
<Input
|
|
34
34
|
icon={<Search />}
|
|
@@ -36,15 +36,20 @@ function Demo() {
|
|
|
36
36
|
onChange={(e) => setQ(e.target.value)}
|
|
37
37
|
trailing={
|
|
38
38
|
q ? (
|
|
39
|
-
<Button
|
|
39
|
+
<Button
|
|
40
|
+
variant="ghost"
|
|
41
|
+
size="icon-xs"
|
|
42
|
+
aria-label="Limpar busca"
|
|
43
|
+
onClick={() => setQ("")}
|
|
44
|
+
>
|
|
40
45
|
<X />
|
|
41
46
|
</Button>
|
|
42
47
|
) : undefined
|
|
43
48
|
}
|
|
44
49
|
/>
|
|
45
|
-
)
|
|
50
|
+
);
|
|
46
51
|
}
|
|
47
|
-
render(<Demo />)
|
|
52
|
+
render(<Demo />);
|
|
48
53
|
```
|
|
49
54
|
|
|
50
55
|
Para combinar mais de um adorno, use `InputGroup`.
|
|
@@ -85,11 +90,11 @@ aplica o tratamento visual correspondente.
|
|
|
85
90
|
|
|
86
91
|
Além das props abaixo, `Input` aceita os atributos nativos de `<input>`.
|
|
87
92
|
|
|
88
|
-
| Propriedade | Tipo
|
|
89
|
-
|
|
90
|
-
| `icon`
|
|
91
|
-
| `trailing`
|
|
92
|
-
| `type`
|
|
93
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
94
|
+
| ----------- | ----------- | ------ | ------------------------------------------------------------------- |
|
|
95
|
+
| `icon` | `ReactNode` | | Ícone decorativo no início do campo. |
|
|
96
|
+
| `trailing` | `ReactNode` | | Ação interativa no fim do campo. |
|
|
97
|
+
| `type` | `string` | | Tipo nativo do campo, como `text`, `email`, `password` ou `number`. |
|
|
93
98
|
|
|
94
99
|
## InputGroup
|
|
95
100
|
|
|
@@ -104,10 +109,14 @@ dos botões, transfere o foco para o campo, seja `InputGroupInput` ou `InputGrou
|
|
|
104
109
|
|
|
105
110
|
```tsx preview col
|
|
106
111
|
<InputGroup>
|
|
107
|
-
<InputGroupAddon
|
|
112
|
+
<InputGroupAddon>
|
|
113
|
+
<Search />
|
|
114
|
+
</InputGroupAddon>
|
|
108
115
|
<InputGroupInput placeholder="Buscar agente" defaultValue="reviewer" />
|
|
109
116
|
<InputGroupAddon align="inline-end">
|
|
110
|
-
<InputGroupButton size="icon-xs" aria-label="Limpar filtro"
|
|
117
|
+
<InputGroupButton size="icon-xs" aria-label="Limpar filtro">
|
|
118
|
+
<X />
|
|
119
|
+
</InputGroupButton>
|
|
111
120
|
</InputGroupAddon>
|
|
112
121
|
</InputGroup>
|
|
113
122
|
```
|
|
@@ -123,7 +132,9 @@ dos botões, transfere o foco para o campo, seja `InputGroupInput` ou `InputGrou
|
|
|
123
132
|
<InputGroupText>github.com/softize/</InputGroupText>
|
|
124
133
|
</InputGroupAddon>
|
|
125
134
|
<InputGroupInput placeholder="empresa-x-api" />
|
|
126
|
-
<InputGroupAddon align="inline-end"
|
|
135
|
+
<InputGroupAddon align="inline-end">
|
|
136
|
+
<InputGroupText>.git</InputGroupText>
|
|
137
|
+
</InputGroupAddon>
|
|
127
138
|
</InputGroup>
|
|
128
139
|
```
|
|
129
140
|
|
|
@@ -133,9 +144,14 @@ Com `InputGroupTextarea`, um addon em `block-end` forma uma região de ações a
|
|
|
133
144
|
|
|
134
145
|
```tsx preview col
|
|
135
146
|
<InputGroup>
|
|
136
|
-
<InputGroupTextarea
|
|
147
|
+
<InputGroupTextarea
|
|
148
|
+
placeholder="Descreva a tarefa para o agente developer"
|
|
149
|
+
rows={3}
|
|
150
|
+
/>
|
|
137
151
|
<InputGroupAddon align="block-end">
|
|
138
|
-
<InputGroupText
|
|
152
|
+
<InputGroupText>
|
|
153
|
+
<Sparkles /> Título gerado pela IA
|
|
154
|
+
</InputGroupText>
|
|
139
155
|
<InputGroupButton
|
|
140
156
|
size="sm"
|
|
141
157
|
context="primary"
|
|
@@ -169,39 +185,39 @@ controle ativo, declare `data-disabled="true"` no `InputGroup`.
|
|
|
169
185
|
|
|
170
186
|
### Propriedades de InputGroup
|
|
171
187
|
|
|
172
|
-
| Propriedade
|
|
173
|
-
|
|
174
|
-
| `shape`
|
|
175
|
-
| `data-disabled` | `'true' \| 'false'`
|
|
188
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
189
|
+
| --------------- | --------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
190
|
+
| `shape` | `'default' \| 'pill'` | `'default'` | Geometria da moldura compartilhada. |
|
|
191
|
+
| `data-disabled` | `'true' \| 'false'` | | Com `true`, esmaece os addons mesmo com o controle ativo. Com o controle desabilitado, os addons já esmaecem sem ele. |
|
|
176
192
|
|
|
177
193
|
### Propriedades de InputGroupAddon
|
|
178
194
|
|
|
179
|
-
| Propriedade | Tipo
|
|
180
|
-
|
|
181
|
-
| `align`
|
|
195
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
196
|
+
| ----------- | ---------------------------------------------------------------- | ---------------- | ---------------------------------------------------------- |
|
|
197
|
+
| `align` | `'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'` | `'inline-start'` | Posição do addon nas laterais ou acima/abaixo do controle. |
|
|
182
198
|
|
|
183
199
|
### Propriedades de InputGroupButton
|
|
184
200
|
|
|
185
|
-
| Propriedade | Tipo
|
|
186
|
-
|
|
187
|
-
| `size`
|
|
188
|
-
| `context`
|
|
189
|
-
| `variant`
|
|
201
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
202
|
+
| ----------- | ------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
|
203
|
+
| `size` | `'xs' \| 'sm' \| 'icon-xs' \| 'icon-sm'` | `'xs'` | O subconjunto da escala única que cabe em um campo (1.5 · 2 · 1.5 · 1.75rem); os `icon-*` são quadrados. |
|
|
204
|
+
| `context` | `'neutral' \| 'primary' \| 'warning' \| 'danger'` | `'neutral'` | Contexto semântico herdado de Button. Com `variant` `solid` ou `subtle` sem contexto declarado, o padrão passa a `'primary'`. |
|
|
205
|
+
| `variant` | `'solid' \| 'subtle' \| 'outline' \| 'ghost' \| 'link'` | `'ghost'` | Tratamento visual; use `solid` quando a ação precisar de ênfase. |
|
|
190
206
|
|
|
191
207
|
### Propriedades de InputGroupInput
|
|
192
208
|
|
|
193
|
-
| Propriedade
|
|
194
|
-
|
|
195
|
-
| `value` / `defaultValue` | `string` |
|
|
196
|
-
| `placeholder`
|
|
209
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
210
|
+
| ------------------------ | -------- | ------ | ------------------------------------------------------ |
|
|
211
|
+
| `value` / `defaultValue` | `string` | | Valor controlado ou inicial do `<input>`. |
|
|
212
|
+
| `placeholder` | `string` | | Exemplo ou formato esperado quando o campo está vazio. |
|
|
197
213
|
|
|
198
214
|
### Propriedades de InputGroupTextarea
|
|
199
215
|
|
|
200
|
-
| Propriedade
|
|
201
|
-
|
|
202
|
-
| `value` / `defaultValue` | `string` |
|
|
203
|
-
| `placeholder`
|
|
204
|
-
| `rows`
|
|
216
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
217
|
+
| ------------------------ | -------- | ------ | -------------------------------------------------------- |
|
|
218
|
+
| `value` / `defaultValue` | `string` | | Valor controlado ou inicial do `<textarea>`. |
|
|
219
|
+
| `placeholder` | `string` | | Exemplo ou orientação exibida quando o campo está vazio. |
|
|
220
|
+
| `rows` | `number` | | Número inicial de linhas visíveis. |
|
|
205
221
|
|
|
206
222
|
### Propriedades de InputGroupText
|
|
207
223
|
|