@softize/opus 12.10.0 → 13.0.0

package/src/ui/docs/content/toggle-group.md

@@ -1,81 +0,0 @@
-## Escolha única
-
-type=single deixa um item ativo por vez; value é uma string. Controlado por value + onValueChange — bom pra alternar a visão de um workspace.
-
-```tsx preview
-const [view, setView] = useState('sessions')
-
-render(
-  <ToggleGroup type="single" value={view} onValueChange={(v) => v && setView(v)}>
-    <ToggleGroupItem value="overview">Visão geral</ToggleGroupItem>
-    <ToggleGroupItem value="sessions">Sessões</ToggleGroupItem>
-    <ToggleGroupItem value="skills">Skills</ToggleGroupItem>
-  </ToggleGroup>,
-)
-```
-
-## Escolha múltipla
-
-type=multiple permite vários ativos ao mesmo tempo; value é um array de strings. O padrão pra uma barra de formatação.
-
-```tsx preview
-const [marks, setMarks] = useState(['bold'])
-
-render(
-  <ToggleGroup type="multiple" value={marks} onValueChange={setMarks}>
-    <ToggleGroupItem value="bold" aria-label="Negrito">
-      <Bold />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="italic" aria-label="Itálico">
-      <Italic />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="underline" aria-label="Sublinhado">
-      <Underline />
-    </ToggleGroupItem>
-  </ToggleGroup>,
-)
-```
-
-## Variante outline
-
-variant=outline emoldura o grupo com borda; size e o variant definidos no ToggleGroup descem pra cada ToggleGroupItem via contexto.
-
-```tsx preview
-<ToggleGroup type="single" variant="outline" defaultValue="left" aria-label="Alinhamento">
-  <ToggleGroupItem value="left" aria-label="Esquerda">
-    <AlignLeft />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="center" aria-label="Centro">
-    <AlignCenter />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="right" aria-label="Direita">
-    <AlignRight />
-  </ToggleGroupItem>
-</ToggleGroup>
-```
-
-## Com espaçamento
-
-spacing afasta os itens (em unidades de spacing do tema) — sem ele os botões ficam colados num bloco único.
-
-```tsx preview
-<ToggleGroup type="single" variant="outline" spacing={2} defaultValue="developer">
-  <ToggleGroupItem value="developer">developer</ToggleGroupItem>
-  <ToggleGroupItem value="reviewer">reviewer</ToggleGroupItem>
-  <ToggleGroupItem value="designer">designer</ToggleGroupItem>
-</ToggleGroup>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descrição |
-|---|---|---|---|
-| `type (ToggleGroup)` | `'single' \| 'multiple'` | | single mantém um item ativo (value: string); multiple permite vários (value: string[]). |
-| `value (ToggleGroup)` | `string \| string[]` | | O(s) item(ns) ativo(s) no modo controlado — pareie com onValueChange. O tipo segue o type. |
-| `onValueChange (ToggleGroup)` | `(value: string \| string[]) => void` | | Chamado quando a seleção muda. No single, vem string vazia ao desmarcar o ativo. |
-| `defaultValue (ToggleGroup)` | `string \| string[]` | | A seleção inicial no modo não controlado. |
-| `variant (ToggleGroup)` | `'default' \| 'outline'` | `'default'` | default é sem moldura; outline emoldura o grupo com borda. Desce pros itens via contexto. |
-| `size (ToggleGroup)` | `'default' \| 'sm' \| 'lg'` | `'default'` | Altura e respiro dos itens. Desce pros itens via contexto. |
-| `spacing (ToggleGroup)` | `number` | `0` | Distância entre os itens (unidades de spacing). 0 cola tudo num bloco único. |
-| `value (ToggleGroupItem)` | `string` | | Identificador do item — é o que entra no value do grupo quando ativado. |
-| `disabled (ToggleGroupItem)` | `boolean` | `false` | Esmaece e bloqueia um item específico do grupo. |