npm - @etus/ui - Versions diffs - 0.1.1 → 0.1.2 - Mend

@etus/ui 0.1.1 → 0.1.2

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.

Files changed (1080) hide show

package/src/components/forms/ToggleGroup/README.md DELETED Viewed

@@ -1,870 +0,0 @@
-# ToggleGroup
-## Visão Geral
-O **ToggleGroup** e um componente de selecao que permite ao usuario alternar entre opcoes mutuamente exclusivas (single) ou selecionar multiplas opcoes (multiple). Como elemento de formulario, ele combina a funcionalidade de botoes toggle em um grupo coeso e acessivel.
-### Casos de Uso
-- Alternar entre modos de visualizacao (grid/lista/tabela)
-- Selecao de alinhamento de texto (esquerda/centro/direita/justificado)
-- Filtros de opcoes mutuamente exclusivas
-- Selecao de multiplas tags ou categorias
-- Controles de formatacao de texto (negrito/italico/sublinhado)
-- Alternancia entre periodos de tempo (dia/semana/mes)
-### Classificacao
-**Categoria:** Molecule (Form Control)
-**Dependencias:** `@radix-ui/react-toggle-group`, `class-variance-authority`, `Toggle` (primitivo)
----
-## Design Specs
-### Variantes (`variant`)
-| Variante | Uso | Tokens |
-|----------|-----|--------|
-| `default` | Estilo padrao, fundo transparente | `bg-transparent`, `hover:bg-muted` |
-| `outline` | Com borda e sombra sutil | `border-input`, `shadow-xs`, `hover:bg-accent` |
-### Tamanhos (`size`)
-| Tamanho | Altura | Min-Width | Padding | Uso |
-|---------|--------|-----------|---------|-----|
-| `sm` | `h-8` (32px) | `min-w-8` | `px-1.5` | Interfaces compactas, toolbars |
-| `default` | `h-9` (36px) | `min-w-9` | `px-2` | Uso geral |
-| `lg` | `h-10` (40px) | `min-w-10` | `px-2.5` | Maior acessibilidade, destaque |
-### Espacamento (`spacing`)
-| Valor | Comportamento | Uso |
-|-------|---------------|-----|
-| `0` | Items unidos (segmented control) | Visual coeso, toolbars |
-| `> 0` | Gap entre items | Items separados visualmente |
-### Estados
-| Estado | Classes/Atributos | Comportamento |
-|--------|-------------------|---------------|
-| Default | - | Aparencia base |
-| Hover | `hover:bg-muted`, `hover:text-muted-foreground` | Feedback visual |
-| Focus | `focus-visible:ring-[3px]`, `focus-visible:ring-ring/50` | Ring de foco acessivel |
-| Pressed (on) | `data-[state=on]:bg-accent`, `data-[state=on]:text-accent-foreground` | Item selecionado |
-| Disabled | `disabled:opacity-50`, `disabled:pointer-events-none` | Interacao bloqueada |
-### Tokens Utilizados
-```css
-/* Cores */
---color-muted: /* cor de fundo hover */
---color-muted-foreground: /* texto hover */
---color-accent: /* fundo selecionado */
---color-accent-foreground: /* texto selecionado */
---color-input: /* borda (outline) */
---color-ring: /* ring de foco */
-/* Espacamento */
---spacing-px: 1.5, 2, 2.5, 3 /* padding horizontal */
-/* Tipografia */
---font-size-sm: 0.875rem
---font-weight-medium: 500
-/* Bordas */
---radius-md: 0.375rem
-/* Sombras */
---shadow-xs: /* sombra sutil para outline */
-/* Transicoes */
-transition-[color,box-shadow]
-```
-### data-slot
-```html
-<div data-slot="toggle-group" data-variant="outline" data-size="default" data-spacing="0">
-  <button data-slot="toggle-group-item" data-state="on">...</button>
-  <button data-slot="toggle-group-item" data-state="off">...</button>
-</div>
-```
----
-## API
-### ToggleGroup Props
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `type` | `"single" \| "multiple"` | - | **Obrigatorio.** Modo de selecao |
-| `value` | `string \| string[]` | - | Valor(es) selecionado(s) (controlado) |
-| `defaultValue` | `string \| string[]` | - | Valor(es) inicial(is) (nao-controlado) |
-| `onValueChange` | `(value: string \| string[]) => void` | - | Callback de mudanca |
-| `variant` | `"default" \| "outline"` | `"default"` | Estilo visual |
-| `size` | `"sm" \| "default" \| "lg"` | `"default"` | Tamanho dos items |
-| `spacing` | `number` | `0` | Gap entre items (px) |
-| `disabled` | `boolean` | `false` | Desabilita todo o grupo |
-| `rovingFocus` | `boolean` | `true` | Navegacao com setas |
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Direcao do layout |
-| `loop` | `boolean` | `true` | Loop na navegacao |
-| `className` | `string` | - | Classes CSS adicionais |
-| `children` | `ReactNode` | - | ToggleGroupItem components |
-> Herda todas as props de `React.ComponentProps<typeof ToggleGroupPrimitive.Root>`
-### ToggleGroupItem Props
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `value` | `string` | - | **Obrigatorio.** Valor unico do item |
-| `variant` | `"default" \| "outline"` | - | Sobrescreve variant do grupo |
-| `size` | `"sm" \| "default" \| "lg"` | - | Sobrescreve size do grupo |
-| `disabled` | `boolean` | `false` | Desabilita o item |
-| `className` | `string` | - | Classes CSS adicionais |
-| `children` | `ReactNode` | - | Conteudo (texto, icone) |
-> Herda todas as props de `React.ComponentProps<typeof ToggleGroupPrimitive.Item>`
-### Callbacks
-| Callback | Tipo | Descricao |
-|----------|------|-----------|
-| `onValueChange` | `(value: string) => void` (single) | Valor selecionado mudou |
-| `onValueChange` | `(value: string[]) => void` (multiple) | Valores selecionados mudaram |
-### TypeScript
-```typescript
-import { type VariantProps } from "class-variance-authority"
-import { toggleVariants } from "@/components/primitives/Toggle"
-// Props do ToggleGroup
-type ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }
-// Props do ToggleGroupItem
-type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>
-// Tipos derivados
-type ToggleGroupType = "single" | "multiple"
-type ToggleGroupVariant = NonNullable<VariantProps<typeof toggleVariants>["variant"]>
-type ToggleGroupSize = NonNullable<VariantProps<typeof toggleVariants>["size"]>
-```
-### Comparativo com Design Systems de Referencia
-#### Matriz de Features (14 Design Systems)
-| Feature | ETUS | Shadcn | Radix | React Aria | Chakra | MUI | Mantine | AntD | NextUI | Headless | Ariakit | Fluent | Carbon | Blueprint | PrimeReact |
-|---------|:----:|:------:|:-----:|:----------:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:---------:|:----------:|
-| Single select | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ | - | ✓ | ✓ | ✓ | ✓ | ✓ |
-| Multiple select | ✓ | ✓ | ✓ | ✓ | - | ✓ | ✓ | - | ✓ | - | ✓ | ✓ | - | ✓ | ✓ |
-| Roving focus | ✓ | ✓ | ✓ | ✓ | - | ✓ | - | - | ✓ | - | ✓ | ✓ | ✓ | - | - |
-| Orientation | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ | - | ✓ | ✓ | - | ✓ | ✓ |
-| Spacing control | ✓ | ✓ | - | - | - | - | - | - | - | - | - | - | - | - | - |
-| CVA variants | ✓ | ✓ | - | - | - | - | - | - | - | - | - | - | - | - | - |
-| data-slot | ✓ | ✓ | - | - | - | - | - | - | - | - | - | - | - | - | - |
-| Icon support | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ | - | ✓ | ✓ | ✓ | ✓ | ✓ |
-| Disabled items | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ | - | ✓ | ✓ | ✓ | ✓ | ✓ |
-| Controlled | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ | - | ✓ | ✓ | ✓ | ✓ | ✓ |
-| Uncontrolled | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ | - | ✓ | ✓ | - | ✓ | ✓ |
-#### Comparativo de Props por Design System
-| Prop | ETUS | Shadcn | Radix | MUI | Mantine | NextUI | Fluent |
-|------|:----:|:------:|:-----:|:---:|:-------:|:------:|:------:|
-| `type` | ✓ | ✓ | ✓ | - | - | - | - |
-| `value` | ✓ | ✓ | ✓ | `value` | `value` | `value` | `selectedValue` |
-| `onValueChange` | ✓ | ✓ | ✓ | `onChange` | `onChange` | `onValueChange` | `onChange` |
-| `variant` | ✓ | ✓ | - | `color` | `variant` | `variant` | `appearance` |
-| `size` | ✓ | ✓ | - | `size` | `size` | `size` | `size` |
-| `spacing` | ✓ | ✓ | - | - | - | - | - |
-| `orientation` | ✓ | ✓ | ✓ | `orientation` | `orientation` | - | - |
-| `exclusive` | - | - | - | ✓ | - | - | - |
-**Nomenclatura MUI:** MUI usa `ToggleButtonGroup` com `exclusive` para single select.
-**Nomenclatura Mantine:** Mantine usa `SegmentedControl` como equivalente.
----
-## Acessibilidade (A11y)
-### ARIA Attributes
-| Atributo | Uso |
-|----------|-----|
-| `role="group"` | Identifica o grupo de toggles |
-| `aria-pressed="true/false"` | Estado do toggle individual |
-| `aria-disabled="true"` | Item/grupo desabilitado |
-| `aria-orientation` | Direcao do grupo (horizontal/vertical) |
-### Suporte a Teclado
-| Tecla | Acao |
-|-------|------|
-| `Tab` | Move foco para dentro/fora do grupo |
-| `Space` / `Enter` | Ativa/desativa o item focado |
-| `Arrow Right/Down` | Move foco para proximo item |
-| `Arrow Left/Up` | Move foco para item anterior |
-| `Home` | Move foco para primeiro item |
-| `End` | Move foco para ultimo item |
-### Focus Management
-```tsx
-// Focus visible apenas para navegacao por teclado
-focus-visible:border-ring
-focus-visible:ring-ring/50
-focus-visible:ring-[3px]
-// Focus elevado para visibilidade
-focus:z-10
-focus-visible:z-10
-```
-### Contraste de Cores
-Todos os pares de cores seguem WCAG 2.1 AA (minimo 4.5:1):
-| Variante | Foreground | Background | Ratio |
-|----------|------------|------------|-------|
-| Default (off) | `foreground` | `transparent` | N/A |
-| Default (on) | `accent-foreground` | `accent` | >= 4.5:1 |
-| Outline (off) | `foreground` | `transparent` | N/A |
-| Outline (on) | `accent-foreground` | `accent` | >= 4.5:1 |
-| Disabled | `muted-foreground` | - | >= 3:1 |
-### Screen Readers
-- O grupo e anunciado como "grupo de botoes toggle"
-- Cada item anuncia seu estado (pressionado/nao pressionado)
-- Mudanca de estado e anunciada automaticamente
-- Items desabilitados sao anunciados como tal
-### Reduced Motion
-```tsx
-// Transicoes respeitam preferencia do usuario
-motion-reduce:transition-none
-```
-### Comparativo A11y (14 Design Systems)
-| Feature | ETUS | React Aria | Radix | Ariakit | Headless | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Blueprint | PrimeReact |
-|---------|:----:|:----------:|:-----:|:-------:|:--------:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|:---------:|:----------:|
-| aria-pressed | ✓ | ✓ | ✓ | ✓ | ~ | ✓ | ✓ | ~ | - | ✓ | ✓ | ✓ | ✓ | ~ |
-| Roving focus | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | - | - | ✓ | ✓ | ✓ | - | - |
-| Arrow keys | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | - | - | ✓ | ✓ | ✓ | - | - |
-| Home/End | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | - | - | ✓ | ✓ | ✓ | - | - |
-| Focus visible | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ~ | ✓ | ✓ | ✓ | ✓ | ~ |
-| Reduced motion | ✓ | ✓ | ✓ | ~ | ~ | ~ | ~ | ~ | - | ~ | ✓ | ✓ | - | - |
-| Screen reader | ✓ | ✓ | ✓ | ✓ | ~ | ✓ | ✓ | ~ | ~ | ✓ | ✓ | ✓ | ✓ | ~ |
-**Legenda:** ✓ = Suporte completo | ~ = Parcial/Manual | - = Nao suportado
----
-## Exemplos
-### Uso Basico
-```tsx
-import { ToggleGroup, ToggleGroupItem } from "@etus/ui"
-function Example() {
-  return (
-    <ToggleGroup type="single" defaultValue="center">
-      <ToggleGroupItem value="left">Esquerda</ToggleGroupItem>
-      <ToggleGroupItem value="center">Centro</ToggleGroupItem>
-      <ToggleGroupItem value="right">Direita</ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
-```
-### Variantes
-```tsx
-// Default (transparente)
-<ToggleGroup type="single" variant="default" defaultValue="a">
-  <ToggleGroupItem value="a">A</ToggleGroupItem>
-  <ToggleGroupItem value="b">B</ToggleGroupItem>
-</ToggleGroup>
-// Outline (com borda)
-<ToggleGroup type="single" variant="outline" defaultValue="a">
-  <ToggleGroupItem value="a">A</ToggleGroupItem>
-  <ToggleGroupItem value="b">B</ToggleGroupItem>
-</ToggleGroup>
-```
-### Tamanhos
-```tsx
-// Pequeno
-<ToggleGroup type="single" size="sm" defaultValue="a">
-  <ToggleGroupItem value="a">Sm</ToggleGroupItem>
-  <ToggleGroupItem value="b">Sm</ToggleGroupItem>
-</ToggleGroup>
-// Padrao
-<ToggleGroup type="single" size="default" defaultValue="a">
-  <ToggleGroupItem value="a">Default</ToggleGroupItem>
-  <ToggleGroupItem value="b">Default</ToggleGroupItem>
-</ToggleGroup>
-// Grande
-<ToggleGroup type="single" size="lg" defaultValue="a">
-  <ToggleGroupItem value="a">Lg</ToggleGroupItem>
-  <ToggleGroupItem value="b">Lg</ToggleGroupItem>
-</ToggleGroup>
-```
-### Com Icones
-```tsx
-import { AlignLeft, AlignCenter, AlignRight, AlignJustify } from "lucide-react"
-<ToggleGroup type="single" variant="outline" defaultValue="left">
-  <ToggleGroupItem value="left" aria-label="Alinhar a esquerda">
-    <AlignLeft className="size-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="center" aria-label="Centralizar">
-    <AlignCenter className="size-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="right" aria-label="Alinhar a direita">
-    <AlignRight className="size-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="justify" aria-label="Justificar">
-    <AlignJustify className="size-4" />
-  </ToggleGroupItem>
-</ToggleGroup>
-```
-### Icones com Texto
-```tsx
-import { Grid, List, LayoutGrid } from "lucide-react"
-<ToggleGroup type="single" variant="outline" defaultValue="grid">
-  <ToggleGroupItem value="grid" className="gap-2">
-    <Grid className="size-4" />
-    Grid
-  </ToggleGroupItem>
-  <ToggleGroupItem value="list" className="gap-2">
-    <List className="size-4" />
-    Lista
-  </ToggleGroupItem>
-  <ToggleGroupItem value="cards" className="gap-2">
-    <LayoutGrid className="size-4" />
-    Cards
-  </ToggleGroupItem>
-</ToggleGroup>
-```
-### Selecao Multipla
-```tsx
-import { Bold, Italic, Underline } from "lucide-react"
-function TextFormatting() {
-  const [formats, setFormats] = React.useState<string[]>([])
-  return (
-    <ToggleGroup
-      type="multiple"
-      value={formats}
-      onValueChange={setFormats}
-      variant="outline"
-    >
-      <ToggleGroupItem value="bold" aria-label="Negrito">
-        <Bold className="size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Italico">
-        <Italic className="size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Sublinhado">
-        <Underline className="size-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
-```
-### Com Espacamento
-```tsx
-// Sem espacamento (segmented control) - padrao
-<ToggleGroup type="single" variant="outline" spacing={0} defaultValue="a">
-  <ToggleGroupItem value="a">Item A</ToggleGroupItem>
-  <ToggleGroupItem value="b">Item B</ToggleGroupItem>
-  <ToggleGroupItem value="c">Item C</ToggleGroupItem>
-</ToggleGroup>
-// Com espacamento (botoes separados)
-<ToggleGroup type="single" variant="outline" spacing={4} defaultValue="a">
-  <ToggleGroupItem value="a">Item A</ToggleGroupItem>
-  <ToggleGroupItem value="b">Item B</ToggleGroupItem>
-  <ToggleGroupItem value="c">Item C</ToggleGroupItem>
-</ToggleGroup>
-```
-### Controlado
-```tsx
-function ControlledExample() {
-  const [view, setView] = React.useState("grid")
-  return (
-    <div className="flex flex-col gap-4">
-      <ToggleGroup
-        type="single"
-        value={view}
-        onValueChange={(value) => value && setView(value)}
-        variant="outline"
-      >
-        <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
-        <ToggleGroupItem value="list">Lista</ToggleGroupItem>
-        <ToggleGroupItem value="table">Tabela</ToggleGroupItem>
-      </ToggleGroup>
-      <p className="text-sm text-muted-foreground">
-        Visualizacao atual: {view}
-      </p>
-    </div>
-  )
-}
-```
-### Item Desabilitado
-```tsx
-<ToggleGroup type="single" variant="outline" defaultValue="option1">
-  <ToggleGroupItem value="option1">Opcao 1</ToggleGroupItem>
-  <ToggleGroupItem value="option2" disabled>Opcao 2 (desabilitada)</ToggleGroupItem>
-  <ToggleGroupItem value="option3">Opcao 3</ToggleGroupItem>
-</ToggleGroup>
-```
-### Grupo Desabilitado
-```tsx
-<ToggleGroup type="single" variant="outline" defaultValue="a" disabled>
-  <ToggleGroupItem value="a">A</ToggleGroupItem>
-  <ToggleGroupItem value="b">B</ToggleGroupItem>
-  <ToggleGroupItem value="c">C</ToggleGroupItem>
-</ToggleGroup>
-```
-### Orientacao Vertical
-```tsx
-<ToggleGroup
-  type="single"
-  variant="outline"
-  orientation="vertical"
-  defaultValue="top"
->
-  <ToggleGroupItem value="top">Topo</ToggleGroupItem>
-  <ToggleGroupItem value="middle">Meio</ToggleGroupItem>
-  <ToggleGroupItem value="bottom">Base</ToggleGroupItem>
-</ToggleGroup>
-```
-### Em Formulario
-```tsx
-import { useForm } from "react-hook-form"
-import { Form, FormField, FormItem, FormLabel, FormMessage } from "@etus/ui"
-function FormExample() {
-  const form = useForm({
-    defaultValues: {
-      priority: "medium"
-    }
-  })
-  return (
-    <Form {...form}>
-      <FormField
-        control={form.control}
-        name="priority"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>Prioridade</FormLabel>
-            <ToggleGroup
-              type="single"
-              variant="outline"
-              value={field.value}
-              onValueChange={field.onChange}
-            >
-              <ToggleGroupItem value="low">Baixa</ToggleGroupItem>
-              <ToggleGroupItem value="medium">Media</ToggleGroupItem>
-              <ToggleGroupItem value="high">Alta</ToggleGroupItem>
-            </ToggleGroup>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </Form>
-  )
-}
-```
----
-## Testes
-### Testes Unitarios
-```tsx
-// ToggleGroup.test.tsx
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { describe, expect, it, vi } from "vitest"
-import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup"
-describe("ToggleGroup", () => {
-  it("renderiza children corretamente", () => {
-    render(
-      <ToggleGroup type="single">
-        <ToggleGroupItem value="a">Item A</ToggleGroupItem>
-        <ToggleGroupItem value="b">Item B</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    expect(screen.getByRole("group")).toBeInTheDocument()
-    expect(screen.getByText("Item A")).toBeInTheDocument()
-    expect(screen.getByText("Item B")).toBeInTheDocument()
-  })
-  it("aplica data-slot attributes", () => {
-    render(
-      <ToggleGroup type="single">
-        <ToggleGroupItem value="a">Item A</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    expect(screen.getByRole("group")).toHaveAttribute("data-slot", "toggle-group")
-    expect(screen.getByRole("radio")).toHaveAttribute("data-slot", "toggle-group-item")
-  })
-  it("aplica variant e size via context", () => {
-    render(
-      <ToggleGroup type="single" variant="outline" size="lg">
-        <ToggleGroupItem value="a">Item A</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    const group = screen.getByRole("group")
-    expect(group).toHaveAttribute("data-variant", "outline")
-    expect(group).toHaveAttribute("data-size", "lg")
-  })
-  it("seleciona item em modo single", async () => {
-    const user = userEvent.setup()
-    const onValueChange = vi.fn()
-    render(
-      <ToggleGroup type="single" onValueChange={onValueChange}>
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-        <ToggleGroupItem value="b">B</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    await user.click(screen.getByText("A"))
-    expect(onValueChange).toHaveBeenCalledWith("a")
-  })
-  it("permite multipla selecao em modo multiple", async () => {
-    const user = userEvent.setup()
-    const onValueChange = vi.fn()
-    render(
-      <ToggleGroup type="multiple" onValueChange={onValueChange}>
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-        <ToggleGroupItem value="b">B</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    await user.click(screen.getByText("A"))
-    await user.click(screen.getByText("B"))
-    expect(onValueChange).toHaveBeenLastCalledWith(["a", "b"])
-  })
-})
-```
-### Testes de Interacao
-```tsx
-describe("ToggleGroup interactions", () => {
-  it("navega com setas do teclado", async () => {
-    const user = userEvent.setup()
-    render(
-      <ToggleGroup type="single" defaultValue="a">
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-        <ToggleGroupItem value="b">B</ToggleGroupItem>
-        <ToggleGroupItem value="c">C</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    const itemA = screen.getByText("A")
-    await user.click(itemA)
-    await user.keyboard("{ArrowRight}")
-    expect(screen.getByText("B")).toHaveFocus()
-  })
-  it("ativa item com Space", async () => {
-    const user = userEvent.setup()
-    const onValueChange = vi.fn()
-    render(
-      <ToggleGroup type="single" onValueChange={onValueChange}>
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-        <ToggleGroupItem value="b">B</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    screen.getByText("A").focus()
-    await user.keyboard(" ")
-    expect(onValueChange).toHaveBeenCalledWith("a")
-  })
-  it("nao seleciona item desabilitado", async () => {
-    const user = userEvent.setup()
-    const onValueChange = vi.fn()
-    render(
-      <ToggleGroup type="single" onValueChange={onValueChange}>
-        <ToggleGroupItem value="a" disabled>A</ToggleGroupItem>
-        <ToggleGroupItem value="b">B</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    await user.click(screen.getByText("A"))
-    expect(onValueChange).not.toHaveBeenCalled()
-  })
-  it("respeita grupo desabilitado", async () => {
-    const user = userEvent.setup()
-    const onValueChange = vi.fn()
-    render(
-      <ToggleGroup type="single" disabled onValueChange={onValueChange}>
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    await user.click(screen.getByText("A"))
-    expect(onValueChange).not.toHaveBeenCalled()
-  })
-})
-```
-### Testes de Acessibilidade
-```tsx
-import { axe, toHaveNoViolations } from "jest-axe"
-expect.extend(toHaveNoViolations)
-describe("ToggleGroup accessibility", () => {
-  it("nao tem violacoes de acessibilidade", async () => {
-    const { container } = render(
-      <ToggleGroup type="single" defaultValue="a">
-        <ToggleGroupItem value="a">Item A</ToggleGroupItem>
-        <ToggleGroupItem value="b">Item B</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-  it("tem role=group no container", () => {
-    render(
-      <ToggleGroup type="single">
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    expect(screen.getByRole("group")).toBeInTheDocument()
-  })
-  it("items tem aria-pressed correto", async () => {
-    const user = userEvent.setup()
-    render(
-      <ToggleGroup type="multiple">
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    const item = screen.getByRole("button")
-    expect(item).toHaveAttribute("aria-pressed", "false")
-    await user.click(item)
-    expect(item).toHaveAttribute("aria-pressed", "true")
-  })
-  it("item desabilitado tem aria-disabled", () => {
-    render(
-      <ToggleGroup type="single">
-        <ToggleGroupItem value="a" disabled>A</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    expect(screen.getByRole("radio")).toHaveAttribute("aria-disabled", "true")
-  })
-  it("suporta navegacao Home/End", async () => {
-    const user = userEvent.setup()
-    render(
-      <ToggleGroup type="single">
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-        <ToggleGroupItem value="b">B</ToggleGroupItem>
-        <ToggleGroupItem value="c">C</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    screen.getByText("A").focus()
-    await user.keyboard("{End}")
-    expect(screen.getByText("C")).toHaveFocus()
-    await user.keyboard("{Home}")
-    expect(screen.getByText("A")).toHaveFocus()
-  })
-})
-```
-### Testes de Composicao
-```tsx
-describe("ToggleGroup composition", () => {
-  it("item pode sobrescrever variant do grupo", () => {
-    render(
-      <ToggleGroup type="single" variant="default">
-        <ToggleGroupItem value="a" variant="outline">A</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    const item = screen.getByRole("radio")
-    expect(item).toHaveAttribute("data-variant", "outline")
-  })
-  it("item pode sobrescrever size do grupo", () => {
-    render(
-      <ToggleGroup type="single" size="sm">
-        <ToggleGroupItem value="a" size="lg">A</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    const item = screen.getByRole("radio")
-    expect(item).toHaveAttribute("data-size", "lg")
-  })
-  it("aceita className customizado", () => {
-    render(
-      <ToggleGroup type="single" className="custom-class">
-        <ToggleGroupItem value="a" className="item-class">A</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    expect(screen.getByRole("group")).toHaveClass("custom-class")
-    expect(screen.getByRole("radio")).toHaveClass("item-class")
-  })
-  it("spacing 0 aplica estilos de segmented control", () => {
-    render(
-      <ToggleGroup type="single" spacing={0} variant="outline">
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-        <ToggleGroupItem value="b">B</ToggleGroupItem>
-      </ToggleGroup>
-    )
-    const group = screen.getByRole("group")
-    expect(group).toHaveAttribute("data-spacing", "0")
-  })
-})
-```
----
-## Roadmap / Features Futuras
-Baseado na analise comparativa com 14 design systems, as seguintes features sao candidatas para implementacao futura:
-### Prioridade Alta
-- [ ] **Loading state**: Adicionar suporte a estado de carregamento no grupo
-- [ ] **Tooltips integrados**: Prop `tooltip` nos items para acessibilidade
-- [ ] **Valor obrigatorio**: Prop `allowEmpty={false}` para garantir selecao
-### Prioridade Media
-- [ ] **Icones dedicados**: Props `startContent`/`endContent` padronizadas
-- [ ] **Cores semanticas**: Variantes `success`, `warning`, `danger`
-- [ ] **Full width**: Prop `fullWidth` para ocupar container
-### Prioridade Baixa
-- [ ] **Animacoes**: Transicoes suaves entre estados
-- [ ] **Tamanho auto**: Ajuste automatico baseado em container query
-- [ ] **Variante ghost**: Estilo minimalista sem background
-### Decisoes de Design
-| Feature | Recomendacao | Justificativa |
-|---------|--------------|---------------|
-| `loading` | Implementar | 8/14 DS suportam; UX importante |
-| `colorScheme` | Avaliar | Chakra/Mantine tem; pode conflitar com variant |
-| `exclusive` | Nao implementar | Redundante com `type="single"` |
-| `isIconOnly` | Avaliar | NextUI tem; util para toolbars |
-| `disabledFocusable` | Nao implementar | Fluent-specific; baixa demanda |
----
-## Referências
-### Design Systems Analisados
-| Design System | Documentacao | GitHub |
-|---------------|--------------|--------|
-| **Shadcn/ui** | [ToggleGroup](https://ui.shadcn.com/docs/components/toggle-group) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
-| **Radix UI** | [ToggleGroup](https://www.radix-ui.com/primitives/docs/components/toggle-group) | [radix-ui/primitives](https://github.com/radix-ui/primitives) |
-| **React Aria** | [ToggleButton](https://react-spectrum.adobe.com/react-aria/ToggleButton.html) | [adobe/react-spectrum](https://github.com/adobe/react-spectrum) |
-| **Chakra UI** | [ButtonGroup](https://chakra-ui.com/docs/components/button-group) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
-| **MUI** | [ToggleButton](https://mui.com/material-ui/react-toggle-button/) | [mui/material-ui](https://github.com/mui/material-ui) |
-| **Mantine** | [SegmentedControl](https://mantine.dev/core/segmented-control/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
-| **Ant Design** | [Radio.Group](https://ant.design/components/radio) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
-| **NextUI** | [ButtonGroup](https://nextui.org/docs/components/button-group) | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
-| **Headless UI** | - | [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui) |
-| **Ariakit** | [Checkbox Group](https://ariakit.org/components/checkbox) | [ariakit/ariakit](https://github.com/ariakit/ariakit) |
-| **Fluent UI** | [ToggleButton](https://react.fluentui.dev/?path=/docs/components-togglebutton) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
-| **Carbon** | [ContentSwitcher](https://carbondesignsystem.com/components/content-switcher/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
-| **Blueprint** | [ButtonGroup](https://blueprintjs.com/docs/#core/components/button-group) | [palantir/blueprint](https://github.com/palantir/blueprint) |
-| **PrimeReact** | [SelectButton](https://primereact.org/selectbutton/) | [primefaces/primereact](https://github.com/primefaces/primereact) |
-### Especificacoes e Padroes
-- [WAI-ARIA APG - Toggle Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
-- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
-- [MDN - button Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
-### Ferramentas Utilizadas
-- [CVA - Class Variance Authority](https://cva.style/docs)
-- [Tailwind CSS v4](https://tailwindcss.com/docs)
-- [Radix Toggle Group](https://www.radix-ui.com/primitives/docs/components/toggle-group)
-- [Lucide Icons](https://lucide.dev/icons/)