@softize/opus 12.11.0 → 13.0.0

package/src/ui/react.tsx

@@ -125,11 +125,17 @@ export {
   DialogOverlay,
   DialogContent,
   DialogHeader,
+  DialogMedia,
   DialogBody,
   DialogFooter,
   DialogTitle,
   DialogDescription,
 } from "./components/primitives/dialog.tsx";
+export type {
+  DialogProps,
+  DialogCloseProps,
+  DialogMode,
+} from "./components/primitives/dialog.tsx";
 
 export {
   Menu,
@@ -203,6 +209,10 @@ export type {
 } from "./components/primitives/select.tsx";
 
 export { Toaster, toast } from "./components/primitives/sonner.tsx";
+export type {
+  ToastAction,
+  ToastOptions,
+} from "./components/primitives/sonner.tsx";
 export { Markdown } from "./components/primitives/markdown.tsx";
 
 // shadcn (lote inicial — byte-fiéis via registry JSON, locked no registry.lock.json)
@@ -212,20 +222,6 @@ export {
   AccordionItem,
   AccordionTrigger,
 } from "./components/primitives/accordion.tsx";
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "./components/primitives/alert-dialog.tsx";
 export { AspectRatio } from "./components/primitives/aspect-ratio.tsx";
 export {
   Avatar,
@@ -279,7 +275,7 @@ export {
 } from "./components/primitives/drawer.tsx";
 export {
   Empty,
-  EmptyContent,
+  EmptyActions,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
@@ -407,7 +403,9 @@ export {
 } from "./components/patterns/confirm.tsx";
 export type {
   AlertOptions,
+  ChooseOptions,
   ConfirmOptions,
+  DialogChoice,
   PromptOptions,
 } from "./components/patterns/confirm.tsx";
 export type { ActionTriggerProps } from "./components/patterns/trigger.tsx";
@@ -488,13 +486,14 @@ export {
   Sidebar,
   SidebarItem,
   SidebarGroupLabel,
+  SidebarTreeGroup,
   SidebarNav,
 } from "./components/patterns/sidebar.tsx";
 export type {
   SidebarProps,
   SidebarItemProps,
+  SidebarTreeGroupProps,
   SidebarNavGroup,
-  SidebarNavSubgroup,
   SidebarNavItem,
 } from "./components/patterns/sidebar.tsx";
 

package/src/ui/theme.css

@@ -324,3 +324,53 @@
 .prose :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
   border: 1px solid var(--border);
 }
+
+/* O Sonner reserva por padrão apenas 1rem para a mídia. A moldura semântica do
+ * Opus ocupa 2.25rem; a coluna precisa ter a mesma medida para não avançar sob
+ * título e descrição. Estas classes são a fronteira estável com o CSS interno
+ * do Sonner, independentemente da ordem em que a biblioteca injeta seus estilos. */
+.opus-toast {
+  gap: 0.75rem;
+}
+
+.opus-toast .opus-toast-icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  margin: 0;
+  align-self: flex-start;
+  align-items: center;
+  justify-content: center;
+}
+
+.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button]:focus-visible {
+  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--ring) 50%, transparent);
+}
+
+.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Fechar continua sendo um controle circular de ícone, mas deixa de herdar a
+ * paleta cinza, a medida e o foco particulares do Sonner. */
+.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button] {
+  box-sizing: border-box;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0;
+  border-radius: 9999rem;
+  background: var(--popover);
+  color: var(--muted-foreground);
+  outline: none;
+  transition: color 150ms, background-color 150ms, box-shadow 150ms;
+}
+
+.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button]:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button] svg {
+  width: 1rem;
+  height: 1rem;
+}

package/src/ui/components/primitives/alert-dialog.tsx

@@ -1,192 +0,0 @@
-import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
-
-import { cn } from '../../lib/cn.ts'
-import { Button } from './button.tsx'
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/30 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-xs translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border border-border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn(
-        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "grid grid-cols-2 gap-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn(
-        "text-lg font-semibold",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn(
-        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted *:[svg:not([class*='size-'])]:size-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  context = "primary",
-  variant = "solid",
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
-  Pick<React.ComponentProps<typeof Button>, "context" | "variant" | "size">) {
-  return (
-    <Button context={context} variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Action
-        data-slot="alert-dialog-action"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  context = "neutral",
-  variant = "ghost",
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
-  Pick<React.ComponentProps<typeof Button>, "context" | "variant" | "size">) {
-  return (
-    <Button context={context} variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Cancel
-        data-slot="alert-dialog-cancel"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-}

package/src/ui/docs/content/alert-dialog.md

@@ -1,73 +0,0 @@
-## Quase sempre é o `dialog`
-
-Pergunta de sim/não, um aviso a reconhecer, uma string — **não monte isto à mão**: o trio
-`dialog.confirm/alert/prompt` faz em uma linha, e o `body` cobre até corpo com conteúdo
-próprio (lista, detalhe). A demo viva mora na [página do dialog](/ui/confirm). Este
-componente é o **primitivo por baixo deles**.
-
-Então **componha o AlertDialog à mão só quando o trio não alcança**: mais de duas ações, ou
-um layout totalmente custom. É o que as seções abaixo mostram.
-
-## Mais de duas ações
-
-O caso que o `confirm` (binário) não expressa: três saídas. `AlertDialogTrigger` (asChild
-com Button) abre; cada `AlertDialogAction`/`AlertDialogCancel` é uma saída. Diferente do
-Dialog, **não fecha clicando fora** — exige uma escolha.
-
-```tsx preview
-<AlertDialog>
-  <AlertDialogTrigger asChild>
-    <Button variant="outline">Fechar editor</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Alterações não salvas</AlertDialogTitle>
-      <AlertDialogDescription>
-        Você editou o contrato e ainda não salvou. O que fazer antes de fechar?
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Continuar editando</AlertDialogCancel>
-      <AlertDialogAction variant="outline">Descartar</AlertDialogAction>
-      <AlertDialogAction>Salvar e fechar</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>
-```
-
-## A estrutura e o botão destrutivo
-
-`AlertDialogHeader` (media/título/descrição) + `AlertDialogFooter` (as ações).
-`context="danger"` no `AlertDialogAction` (ele herda contexto, variante e tamanho do Button)
-comunica que a confirmação é perigosa. Uma confirmação destrutiva **binária** é só
-`dialog.confirm({ context: 'danger' })` — o exemplo abaixo é só para mostrar a composição e
-onde o `context` entra:
-
-```tsx preview
-<AlertDialog>
-  <AlertDialogTrigger asChild>
-    <Button context="danger">Excluir repositório</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Excluir empresa-x-api?</AlertDialogTitle>
-      <AlertDialogDescription>
-        O repositório sai do workspace e os agentes vinculados perdem o acesso ao código. Não dá pra desfazer.
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Cancelar</AlertDialogCancel>
-      <AlertDialogAction context="danger">Excluir</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descrição |
-|---|---|---|---|
-| `open` (AlertDialog) | `boolean` | | Estado de aberto no modo controlado — pareie com onOpenChange. No padrão, o Trigger cuida disso. |
-| `onOpenChange` (AlertDialog) | `(open: boolean) => void` | | Chamado quando o diálogo abre ou fecha (Trigger, Cancel, Action ou Esc). |
-| `context` (Action/Cancel) | `'neutral' \| 'primary' \| 'danger'` | `primary` / `neutral` | Significado semântico herdado do Button. |
-| `variant` (Action/Cancel) | `'solid' \| 'subtle' \| 'outline' \| 'ghost' \| 'link'` | `solid` / `ghost` | Tratamento visual herdado do Button. |

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

@@ -1,71 +0,0 @@
-## Básico
-
-Envolva os botões no ButtonGroup: as bordas internas colapsam e só as pontas ficam arredondadas.
-Use a mesma variant nos filhos pra manter a barra uniforme.
-
-```tsx preview
-<ButtonGroup>
-  <Button variant="outline">Visão geral</Button>
-  <Button variant="outline">Sessões</Button>
-  <Button variant="outline">Skills</Button>
-</ButtonGroup>
-```
-
-## Ação dividida
-
-O padrão da casa pra ação primária + variações: o botão principal, um separador e um gatilho de
-menu (size=icon).
-
-```tsx preview
-<ButtonGroup>
-  <Button icon={Play}>Rodar agente developer</Button>
-  <ButtonGroupSeparator />
-  <Button size="icon" aria-label="Mais opções">
-    <ChevronDown />
-  </Button>
-</ButtonGroup>
-```
-
-## Com rótulo
-
-ButtonGroupText cola um rótulo (fundo muted) ao grupo — bom pra prefixar o contexto. Aceita ícone
-via [&_svg] e asChild pra virar `<label>`.
-
-```tsx preview
-<ButtonGroup>
-  <ButtonGroupText>
-    <GitBranch />
-    empresa-x-api
-  </ButtonGroupText>
-  <Button variant="outline" icon={RotateCw}>
-    Sincronizar
-  </Button>
-</ButtonGroup>
-```
-
-## Vertical
-
-orientation=vertical empilha os filhos em coluna — as bordas que colapsam passam a ser as de
-cima/baixo. Combina com size=icon pra uma mini-toolbar.
-
-```tsx preview col-start
-<ButtonGroup orientation="vertical">
-  <Button variant="outline" size="icon" aria-label="Rodar sessão">
-    <Play />
-  </Button>
-  <Button variant="outline" size="icon" aria-label="Pausar sessão">
-    <Pause />
-  </Button>
-  <Button variant="outline" size="icon" aria-label="Reiniciar sessão">
-    <RotateCw />
-  </Button>
-</ButtonGroup>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descrição |
-|---|---|---|---|
-| `orientation` (ButtonGroup) | `'horizontal' \| 'vertical'` | `'horizontal'` | Direção do bloco — vertical empilha os filhos em coluna. |
-| `orientation` (ButtonGroupSeparator) | `'horizontal' \| 'vertical'` | `'vertical'` | Direção do traço divisor — herde do grupo (vertical no horizontal). |
-| `asChild` (ButtonGroupText) | `boolean` | `false` | Renderiza como o filho (Radix Slot) — ex.: virar `<label>` sem forkar o estilo. |

package/src/ui/docs/content/confirm.md

@@ -1,120 +0,0 @@
-## O trio imperativo: `dialog`
-
-`dialog.alert` · `dialog.confirm` · `dialog.prompt` — o trio do browser (`alert`/`confirm`/`prompt`), mas **assíncrono, com tema e a11y-correto**. Cada um pergunta e **espera a resposta**:
-
-```tsx
-await dialog.alert({ title: 'Sessão expirada', description: 'Você será desconectado.' })          // Promise<void>
-const ok   = await dialog.confirm({ title: 'Excluir a sessão?', variant: 'destructive' })          // Promise<boolean>
-const nome = await dialog.prompt({ title: 'Nome do snapshot', placeholder: 'ex.: v1-final' })      // Promise<string | null>
-```
-
-É a mesma forma do `toast` (superfície imperativa, host no shell), mas que **responde** — e é isso que tira as ~15 linhas de JSX que cada tela montava. Por baixo é o `AlertDialog`: `role="alertdialog"`, foco preso, **não fecha no clique fora** — a semântica de uma interrupção que EXIGE resposta. Fechar por ESC/Cancelar resolve o "não" de cada tipo (`void`, `false`, `null`).
-
-```tsx preview
-function Demo() {
-  const [last, setLast] = useState('—')
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <DialogHost />
-      <Button variant="outline" size="sm" onClick={async () => {
-        await dialog.alert({ title: 'Sessão expirada', description: 'Você será desconectado.' })
-        setLast('alert → OK')
-      }}>alert</Button>
-      <Button variant="outline" size="sm" onClick={async () => {
-        const ok = await dialog.confirm({ title: 'Excluir a sessão?', description: 'Some o worktree e o preview.', action: 'Excluir', variant: 'destructive' })
-        setLast('confirm → ' + (ok ? 'excluída' : 'mantida'))
-      }}>confirm</Button>
-      <Button variant="outline" size="sm" onClick={async () => {
-        const name = await dialog.prompt({ title: 'Nome do snapshot', placeholder: 'ex.: v1-final' })
-        setLast('prompt → ' + (name === null ? 'cancelado' : name))
-      }}>prompt</Button>
-      <span className="text-sm text-muted-foreground">Última: {last}</span>
-    </div>
-  )
-}
-render(<Demo />)
-```
-
-## Por que namespace, e não `confirm()` solto
-
-`alert`/`confirm`/`prompt` são **globais do browser**. Como função solta, esquecer o import não daria erro — o TypeScript resolveria pro global e o código abriria a caixa cinza do sistema (sem tema, que webview suprime). `window.dialog` não existe, então o namespace **imuniza** a família contra esse footgun. `confirm()` segue exportado como alias (retrocompat), mas o novo código usa `dialog.confirm`.
-
-## `body`: corpo com conteúdo próprio
-
-Os três aceitam `body` — conteúdo que a `description` de texto não expressa (uma lista do que será afetado, um detalhe destacado). É o que antes obrigava a compor o `AlertDialog` à mão:
-
-```tsx preview
-function Demo() {
-  const [status, setStatus] = useState('—')
-  return (
-    <div className="flex items-center gap-3">
-      <DialogHost />
-      <Button variant="outline" size="sm" onClick={async () => {
-        const ok = await dialog.confirm({
-          title: 'Encerrar 3 sessões?',
-          description: 'Os agentes abaixo serão interrompidos:',
-          body: (
-            <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
-              <li><span className="font-medium text-foreground">developer</span> — empresa-x-api</li>
-              <li><span className="font-medium text-foreground">reviewer</span> — empresa-x-web</li>
-            </ul>
-          ),
-          action: 'Encerrar todas',
-        })
-        setStatus(ok ? 'encerradas' : 'mantidas')
-      }}>Encerrar sessões</Button>
-      <span className="text-sm text-muted-foreground">Resposta: {status}</span>
-    </div>
-  )
-}
-render(<Demo />)
-```
-
-## O host
-
-Monte **um** `<DialogHost />` no shell do app, ao lado do `<Toaster />`:
-
-```tsx
-<>
-  {rotas}
-  <Toaster />
-  <DialogHost />
-</>
-```
-
-Sem ele, os três **lançam** — em vez de devolver uma promise que nunca resolve. Promise pendurada viraria clique sem efeito, o pior desfecho pra uma interrupção que exige resposta: a pessoa acha que respondeu, ou clica de novo. (`<ConfirmHost />` segue valendo como alias de `<DialogHost />`.)
-
-Várias perguntas seguidas entram numa **fila** e aparecem uma por vez — cada `await` recebe a resposta do SEU diálogo (duas caixas empilhadas seriam ambíguas sobre qual clique respondeu o quê).
-
-## Quando NÃO usar
-
-- **Excluir uma entidade por contrato** → `ActionTrigger` com `icon={<Trash2 />}`: lê o `action.confirm`, dispara a action e fala o erro de negócio.
-- **Um form de verdade** (validação, vários campos, submete uma action) → `ActionFormDialog`. O `dialog.prompt` é só pra UMA string livre.
-- **Mais de duas ações** (ex.: Salvar / Descartar / Cancelar) ou **layout totalmente custom** → componha o `AlertDialog` à mão.
-- **Só avisar, sem cobrar decisão** → `toast` (passageiro) ou `Alert` (fica na página). O `dialog.alert` é pro aviso que **bloqueia** e exige um "OK".
-
-## Opções
-
-Comuns aos três (`dialog.alert`/`confirm`/`prompt`):
-
-| Opção | Tipo | Default | Descrição |
-|---|---|---|---|
-| `title` | `React.ReactNode` | | O enunciado. Obrigatório. |
-| `description` | `React.ReactNode` | | O que a pessoa precisa saber pra decidir — a CONSEQUÊNCIA, não o óbvio. |
-| `body` | `React.ReactNode` | | Conteúdo próprio entre a descrição e os botões (lista, detalhe). |
-| `media` | `React.ReactNode` | | Ícone grande acima do título (o quadro do `AlertDialogMedia`). |
-| `action` | `string` | `'OK'` / `'Confirmar'` | Rótulo do botão que confirma (default `'OK'` no alert, `'Confirmar'` nos outros). |
-
-Só `confirm` e `prompt`:
-
-| Opção | Tipo | Default | Descrição |
-|---|---|---|---|
-| `cancel` | `string` | `'Cancelar'` | Rótulo do botão que recusa. |
-| `variant` | `'default' \| 'destructive'` | `'default'` | `destructive` pinta o confirmar — o que apaga tem que parecer o que apaga. |
-
-Só `prompt`:
-
-| Opção | Tipo | Default | Descrição |
-|---|---|---|---|
-| `placeholder` | `string` | | Texto-fantasma do input. |
-| `defaultValue` | `string` | | Valor inicial (o input abre focado e selecionado). |

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

@@ -1,79 +0,0 @@
-> Só um **ícone leading**? Não precisa do InputGroup — é a prop `icon` do `Input` (a mesma do Select e do Alert). O InputGroup é pros casos que a prop não cobre: botão no fim, prefixo de texto, adorno em bloco, múltiplos.
-
-## Com ícone (addon)
-
-InputGroupAddon na borda (align inline-start por padrão) cola um ícone ao InputGroupInput dentro da mesma moldura. Clicar no addon foca o campo. Pra um leading simples, prefira `<Input icon={…} />`; aqui é quando o ícone convive com outros adornos.
-
-```tsx preview col
-<InputGroup>
-  <InputGroupAddon>
-    <Search />
-  </InputGroupAddon>
-  <InputGroupInput placeholder="Buscar sessões do workspace" />
-</InputGroup>
-```
-
-## Ícone + ação juntos (o caso do InputGroup)
-
-> Só uma ação no fim (um limpar, um mostrar-senha)? Isso é `<Input trailing={…} />` — não precisa do InputGroup. O InputGroup entra quando os adornos se ACUMULAM: aqui, um ícone leading E um botão no fim, na mesma moldura (a busca do `ActionList` é assim). `align=inline-end` joga o addon pro fim; `InputGroupButton` já vem ghost, tamanho `icon-xs`.
-
-```tsx preview col
-<InputGroup>
-  <InputGroupAddon>
-    <Search />
-  </InputGroupAddon>
-  <InputGroupInput placeholder="Buscar agente" defaultValue="reviewer" />
-  <InputGroupAddon align="inline-end">
-    <InputGroupButton size="icon-xs" aria-label="Limpar filtro">
-      <X />
-    </InputGroupButton>
-  </InputGroupAddon>
-</InputGroup>
-```
-
-## Prefixo e sufixo
-
-InputGroupText é o rótulo inerte na borda — prefixo ou sufixo. Aqui emoldura o slug do repositório entre o host fixo e o sufixo .git.
-
-```tsx preview col
-<InputGroup>
-  <InputGroupAddon>
-    <GitBranch />
-    <InputGroupText>github.com/softize/</InputGroupText>
-  </InputGroupAddon>
-  <InputGroupInput placeholder="empresa-x-api" />
-  <InputGroupAddon align="inline-end">
-    <InputGroupText>.git</InputGroupText>
-  </InputGroupAddon>
-</InputGroup>
-```
-
-## Composer com rodapé
-
-Com InputGroupTextarea a moldura cresce; align=block-end empilha um rodapé de ações embaixo do campo — o padrão do composer de brief do agente.
-
-```tsx preview col
-<InputGroup>
-  <InputGroupTextarea placeholder="Descreva a task para o agente developer" rows={3} />
-  <InputGroupAddon align="block-end">
-    <InputGroupText>
-      <Sparkles />
-      Título gerado pela IA
-    </InputGroupText>
-    <InputGroupButton size="sm" context="primary" variant="solid" className="ml-auto" aria-label="Enviar brief">
-      Enviar
-      <ArrowUp />
-    </InputGroupButton>
-  </InputGroupAddon>
-</InputGroup>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descrição |
-|---|---|---|---|
-| `align` (InputGroupAddon) | `'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'` | `'inline-start'` | Onde o addon ancora: inline nas laterais; block empilha (vira coluna) acima ou abaixo — block exige a moldura alta de um InputGroupTextarea. |
-| `size` (InputGroupButton) | `'xs' \| 'sm' \| 'icon-xs' \| 'icon-sm'` | `'xs'` | Tamanho do botão embutido. As variantes icon-* são quadradas, pra um botão só de ícone. |
-| `context` (InputGroupButton) | `'neutral' \| 'primary' \| 'danger'` | `'primary'` | Significado semântico herdado do Button. |
-| `variant` (InputGroupButton) | `'solid' \| 'subtle' \| 'outline' \| 'ghost' \| 'link'` | `'ghost'` | Tratamento visual herdado do Button. O padrão ghost some na moldura; use `solid` para dar ênfase à ação. |
-| `placeholder / defaultValue / value` (InputGroupInput, InputGroupTextarea) | `string` | | Props nativas do <input>/<textarea> repassadas ao controle. Controle como faria com Input/Textarea (value + onChange). |