@softize/opus 22.2.0 → 23.0.0

package/src/core/types.ts

@@ -638,6 +638,9 @@ export interface FilterSpec {
 
   type: 'text' | 'select' | 'lookup' | 'date' | 'number'
   multiple?: boolean
+  /** Controle usado para um `select` de escolha única. `select` é o padrão; `toggle`
+   *  mantém todas as opções curtas visíveis em um grupo conectado. */
+  presentation?: 'select' | 'toggle'
   /** Habilita busca local nas opções de um `select`; `lookup` já é pesquisável por natureza. */
   searchable?: boolean
   /** Quando `false`, a interface omite a opção vazia. Limpar restaura o default do filtro. */
@@ -799,7 +802,7 @@ export type LoadersSpec<In> = Record<string, LoaderFn<In>>
  *     aqui.
  *   - **`ParsedIn`** — o lado PARSEADO (o output do schema de input, defaults
  *     aplicados). O runtime SEMPRE valida antes de executar, então `handler`,
- *     `mockHandler`, `authorize` e `loads` recebem `ParsedIn`.
+ *     `handler`, `authorize` e `loads` recebem `ParsedIn`.
  *
  * O default `ParsedIn = In` mantém retrocompat com anotações à mão de dois
  * genéricos; `defineAction`/`defineContract` inferem os dois lados do schema.
@@ -848,16 +851,6 @@ export interface ActionBase<In, Out, ParsedIn = In> {
   // — Execução —
   handler: HandlerFn<ParsedIn, Out>
 
-  /**
-   * Handler alternativo executado quando `process.env.OPUS_MODE === 'design'`.
-   *
-   * @deprecated Desde a 22.1.0 (ADR 0037); sai na próxima major. No modo design, a action sem
-   * mock já responde com dado gerado a partir do `output`; quando o design precisar de uma resposta
-   * específica, declare um cenário fora do contrato com `defineDesignScenario`, de
-   * `@softize/opus/design`, e aponte a opção `scenarios` do `opusDesign()` para ele.
-   */
-  mockHandler?: HandlerFn<ParsedIn, Out>
-
   // — Comportamento —
   audit?: boolean | AuditConfig
   confirm?: ConfirmSpec
@@ -922,24 +915,13 @@ export interface SearchFilters {
  * envelope — handler é fonte de verdade.
  */
 export interface ListAction<In, Out, ParsedIn = In>
-  extends Omit<ActionBase<In, Out, ParsedIn>, 'handler' | 'mockHandler'> {
+  extends Omit<ActionBase<In, Out, ParsedIn>, 'handler'> {
   kind: 'list'
   handler: (
     ctx: ActionContext,
     input: ParsedIn,
     loaded?: Record<string, unknown>,
   ) => Paginated<Out> | Promise<Paginated<Out>>
-  /**
-   * Mesma semântica de `ActionBase.mockHandler`, mas devolve `Paginated<Out>`
-   * (search retorna lista paginada, não item solto).
-   *
-   * @deprecated Desde a 22.1.0 (ADR 0037); ver `ActionBase.mockHandler`.
-   */
-  mockHandler?: (
-    ctx: ActionContext,
-    input: ParsedIn,
-    loaded?: Record<string, unknown>,
-  ) => Paginated<Out> | Promise<Paginated<Out>>
   /** Colunas declarativas da listagem (a UI deriva a tabela; ver ListColumnSpec). */
   columns?: ListColumnSpec[]
   filters?: Record<string, FilterSpec>

package/src/design/index.ts

@@ -9,7 +9,7 @@
  * respostas ao runtime de design.
  */
 
-import { z } from 'zod'
+import type { ZodTypeAny } from 'zod'
 import type { ActionContext, InferOutput, Paginated } from '../core/types.ts'
 import { fake, fakeMany } from '../testing/fake.ts'
 
@@ -102,11 +102,14 @@ interface DesignActionShape {
  * - `list` devolve três páginas do tamanho pedido em `limit` ({@link DESIGN_PAGE_SIZE} quando a
  *   entrada não pede) e respeita a paginação declarada; busca e filtros não filtram o dado gerado.
  * - Nas demais, a saída ecoa o `id` da entrada quando o schema da saída aceita esse valor.
- * - Saída que não é schema zod não tem gerador: a resposta é `null`.
+ * - Saída que não é schema Zod não tem gerador: a resposta é `null`.
  */
 export function designResponse(action: DesignActionShape, input: unknown): unknown {
   const output = action.output
-  if (!(output instanceof z.ZodType)) return null
+  // O contrato vem do grafo do consumidor e pode carregar outra instância física do Zod.
+  // `instanceof` confundiria identidade de módulo com contrato; o gerador usa somente a
+  // estrutura pública/estável que já recebe (`safeParse`) e a definição introspectável (`_def`).
+  if (!isZodSchema(output)) return null
   const seed = `${action.name}:${canonicalJson(withoutPagination(input))}`
 
   if (action.kind === 'list') {
@@ -177,3 +180,11 @@ function canonicalJson(value: unknown): string {
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value)
 }
+
+function isZodSchema(value: unknown): value is ZodTypeAny {
+  return (
+    isRecord(value) &&
+    isRecord(value._def) &&
+    typeof value.safeParse === 'function'
+  )
+}

package/src/testing/index.ts

@@ -14,8 +14,6 @@
  *     valida output (pulado em `list`, como no runtime). Falha estoura o MESMO
  *     `ActionError` tipado do runtime (`validation.invalid_input`, `auth.unauthenticated`,
  *     `auth.system_forbidden`, `auth.forbidden`…). A opção `schedule` executa como o sistema.
- *     Em `OPUS_MODE=design` roteia pro `mockHandler` como o runtime — contrato puro
- *     (sem handler) é testável em design; fora dele, erro claro (`testing.no_handler`).
  *   • `memStorage()` — StorageAdapter em memória pra testar handler que anexa
  *     arquivo, com a mesma régua de key dos drivers reais.
  *
@@ -30,9 +28,7 @@ import { evalExpression } from '../dsl/eval.ts'
 import { parseExpression } from '../dsl/parser.ts'
 import { normalizeKey } from '../storage/index.ts'
 import { error } from '../core/errors.ts'
-// Import direto do runtime (fora do index público): a régua handler×mockHandler
-// tem UMA fonte — o harness nunca pode divergir do execute().
-import { assertAuthenticated, isOpusDesignMode, markSystemActor } from '../core/runtime.ts'
+import { assertAuthenticated, markSystemActor } from '../core/runtime.ts'
 import type {
   ActionContext,
   ActionKind,
@@ -206,14 +202,8 @@ export interface TestableAction<In, Out, ParsedIn = In> {
   authorize?: AuthorizeSpec<ParsedIn>
   input: Schema<In, ParsedIn>
   output: Schema<Out> | Schema<unknown, Out>
-  /** Opcional: contrato puro (sem handler) só executa pelo `mockHandler` obsoleto. */
+  /** Opcional para produzir um erro útil quando um contrato puro chega ao harness. */
   handler?: HandlerFn<ParsedIn, Out>
-  /**
-   * Em `OPUS_MODE=design` vence o handler real — mesma régua do runtime.
-   *
-   * @deprecated Desde a 22.1.0 (ADR 0037); teste a action ligada ao handler.
-   */
-  mockHandler?: HandlerFn<ParsedIn, Out>
 }
 
 /** Variante list: o schema descreve o ITEM, o handler devolve `Paginated<Item>`. */
@@ -230,11 +220,6 @@ export interface TestableListAction<In, Item, ParsedIn = In> {
     input: ParsedIn,
     loaded?: Record<string, unknown>,
   ) => Paginated<Item> | Promise<Paginated<Item>>
-  mockHandler?: (
-    ctx: ActionContext,
-    input: ParsedIn,
-    loaded?: Record<string, unknown>,
-  ) => Paginated<Item> | Promise<Paginated<Item>>
 }
 
 export interface RunActionOptions extends TestContextOptions {
@@ -278,9 +263,8 @@ async function validate<T>(
  * validado + o contexto observável (`emitted`, `logged`); falha estoura o mesmo
  * `ActionError` do runtime — afirme com `expect(...).rejects`.
  *
- * A escolha do executável segue a régua do `execute()`: em `OPUS_MODE=design`,
- * `mockHandler` presente vence; senão, `handler` real. Contrato puro (sem
- * handler) só roda em design — fora dele, `testing.no_handler`.
+ * Contrato puro sem handler termina em `testing.no_handler`: dados de design
+ * pertencem ao plugin `opusDesign()` e não são comportamento da action.
  */
 export async function runAction<In, Item, ParsedIn = In>(
   action: TestableListAction<In, Item, ParsedIn>,
@@ -325,18 +309,14 @@ export async function runAction<In, Out, ParsedIn = In>(
     if (decision !== true) throw decision
   }
 
-  const handlerToRun =
-    isOpusDesignMode() && action.mockHandler !== undefined
-      ? action.mockHandler
-      : action.handler
-  if (handlerToRun === undefined) {
+  if (action.handler === undefined) {
     throw error({
       code: 'testing.no_handler',
       category: 'internal',
       message: `Action "${action.name}" não tem handler executável: teste o ActionDef produzido pelo bindAction. Os dados do modo design são gerados pelo plugin opusDesign() e não são comportamento da action.`,
     })
   }
-  const raw = await handlerToRun(ctx, parsed, loaded)
+  const raw = await action.handler(ctx, parsed, loaded)
 
   // Mesmo skip do runtime: list devolve Paginated<Item>, o schema descreve Item.
   const output = action.kind === 'list' ? (raw as Out) : await validate<Out>(action.output, raw, 'output')

package/src/ui/components/patterns/content-header.tsx

@@ -19,11 +19,9 @@ import { SurfaceMedia, type SurfaceMediaProps } from "./surface-media.tsx";
 import {
   SurfaceHeader,
   surfaceHeaderClasses,
-  type SurfaceHeaderVariant,
 } from "./surface-header.tsx";
 
 export type ContentHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export type ContentHeaderVariant = SurfaceHeaderVariant;
 export type ContentElement = "section" | "fieldset";
 export type ContentFrameVariant = "default" | "legend";
 
@@ -34,7 +32,7 @@ interface ContentContextValue {
   layout: SurfaceLayout;
   level: ContentHeaderLevel;
   titleId: string;
-  variant: ContentHeaderVariant;
+  variant: "page" | "section";
 }
 
 const ContentContext = createContext<ContentContextValue | null>(null);
@@ -55,8 +53,6 @@ interface ContentSharedProps {
   framed?: boolean;
   /** Anatomia interna: contínua (default) ou com header separado do corpo. */
   layout?: SurfaceLayout;
-  /** Hierarquia visual: `section` (default) ou `page`, a mesma de PageHeader. */
-  variant?: ContentHeaderVariant;
 }
 
 interface ContentSectionBaseProps
@@ -80,7 +76,6 @@ interface ContentFieldsetBaseProps
   /** Tratamento visual da moldura: contínua (default) ou recortada pela legenda. */
   frameVariant?: ContentFrameVariant;
   level?: never;
-  variant?: "section";
 }
 
 interface ContentSectionShorthandProps extends ContentSectionBaseProps {
@@ -128,7 +123,6 @@ export function Content({
   description,
   actions,
   level = 2,
-  variant = "section",
   framed = false,
   layout = "continuous",
   frameVariant = "default",
@@ -138,7 +132,8 @@ export function Content({
 }: ContentProps): ReactElement {
   const titleId = useId();
   const fill = useFillRegion();
-  const context = {
+  const variant = level === 1 && as === "section" ? "page" : "section";
+  const context: ContentContextValue = {
     element: as,
     frameVariant,
     framed,
@@ -245,7 +240,8 @@ export function Content({
           {...fill.attributes}
           aria-labelledby={ariaLabelledBy}
           className={cn(
-            layout === "continuous" && "space-y-3",
+            layout === "continuous" &&
+              (variant === "page" ? "space-y-6" : "space-y-3"),
             framed &&
               layout === "continuous" &&
               frameVariant === "default" &&

package/src/ui/components/patterns/list.tsx

@@ -111,6 +111,7 @@ import {
   InputGroupButton,
   InputGroupInput,
 } from "../primitives/input-group.tsx";
+import { iconPickerIcons } from "../primitives/icon-picker.tsx";
 import { Separator } from "../primitives/separator.tsx";
 import {
   Field,
@@ -479,7 +480,23 @@ function dictOptionsFor(
   if (spec.options?.kind !== "dictionary") return [];
   const dict = dicts[spec.options.ref];
   if (dict === undefined) return [];
-  return dict.options().map((o) => ({ value: o.value, label: o.label }));
+  return dict.options().map((o) => {
+    const Icon = o.icon === undefined ? undefined : iconPickerIcons[o.icon];
+    return {
+      value: o.value,
+      label: o.label,
+      ...(Icon === undefined
+        ? {}
+        : {
+            content: (
+              <>
+                <Icon aria-hidden="true" />
+                <span>{o.label}</span>
+              </>
+            ),
+          }),
+    };
+  });
 }
 
 /** Opções vindas de uma action de lookup (`options.kind: 'lookup'`): o Select chama
@@ -571,6 +588,43 @@ function FilterField({
   const changedFromDefault = singleValue !== defaultValue;
   const acceptsEmptyValue = spec.allowEmpty !== false;
 
+  if (
+    spec.type === "select" &&
+    spec.multiple !== true &&
+    spec.presentation === "toggle"
+  ) {
+    const ALL = "__all__";
+    const toggleValue = singleValue === "" ? ALL : singleValue;
+    return (
+      <ToggleGroup
+        type="single"
+        variant="outline"
+        id={`filter-${name}`}
+        value={toggleValue}
+        onValueChange={(next) => {
+          // O grupo sempre preserva uma escolha ativa. Quando vazio é permitido,
+          // a opção explícita representa esse estado em vez de desmarcar o item atual.
+          if (next === "") return;
+          onChange(next === ALL ? "" : next);
+        }}
+        aria-label={label}
+        disabled={!enabled}
+        className={className ?? "max-w-full"}
+      >
+        {acceptsEmptyValue && (
+          <ToggleGroupItem value={ALL}>
+            {text(spec.placeholder, "Todos")}
+          </ToggleGroupItem>
+        )}
+        {base.map((option) => (
+          <ToggleGroupItem key={option.value} value={option.value}>
+            {option.content ?? option.label}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    );
+  }
+
   if (spec.multiple === true) {
     return (
       <Select

package/src/ui/components/patterns/presentation.tsx

@@ -221,7 +221,7 @@ function PresentationFrame({
   if (surface === "page") {
     if (listBody) {
       const content = (
-        <Content level={1} variant="page">
+        <Content level={1}>
           <ContentHeader>
             <ContentTitle>{title}</ContentTitle>
             {headerActions === undefined ? null : (

package/src/ui/components/primitives/icon-picker.tsx

@@ -25,9 +25,12 @@ import {
   Layers,
   LayoutGrid,
   Lightbulb,
+  Mail,
   MapPin,
+  MessageCircle,
   MessageSquare,
   Package,
+  Phone,
   Rocket,
   Settings,
   ShoppingCart,
@@ -77,9 +80,12 @@ export const iconPickerIcons: Record<string, LucideIcon> = {
   'layers': Layers,
   'layout-grid': LayoutGrid,
   'lightbulb': Lightbulb,
+  'mail': Mail,
   'map-pin': MapPin,
+  'message-circle': MessageCircle,
   'message-square': MessageSquare,
   'package': Package,
+  'phone': Phone,
   'rocket': Rocket,
   'settings': Settings,
   'shopping-cart': ShoppingCart,

package/src/ui/components/primitives/tabs.tsx

@@ -1,12 +1,11 @@
 import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
 
 import { cn } from "../../lib/cn.ts";
 import { controlHeight, type ControlSize } from "./control.ts";
 
 // Divergência da casa (ejetado): o Tabs ganhou `size` — Button e Select têm `sm`, o Tabs
-// não tinha, e uma fileira densa ficava com o segmento 0.25rem mais alto
+// não tinha, e uma fileira densa ficava com as abas 0.25rem mais altas
 // que os irmãos. O tamanho flui pra TabsList via contexto (a altura é dela) e a medida é a
 // da escala de control.ts.
 type TabsSize = Extract<ControlSize, "default" | "sm">;
@@ -18,9 +17,6 @@ const TabsFramedContext = React.createContext(false);
 type TabsOrientation = "horizontal" | "vertical";
 const TabsOrientationContext =
   React.createContext<TabsOrientation>("horizontal");
-const TabsListVariantContext = React.createContext<"default" | "line">(
-  "default",
-);
 
 function Tabs({
   className,
@@ -62,87 +58,62 @@ function Tabs({
   );
 }
 
-const tabsListVariants = cva(
-  // A altura horizontal entra como classe simples no componente (abaixo), para que um
-  // `className="h-full"` do consumidor consiga substituí-la via tailwind-merge. Seletores
-  // condicionais por data-size têm especificidade maior e tornavam a altura inextensível.
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[0.1875rem] text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none data-[variant=line]:p-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
 function TabsList({
   className,
   children,
   style,
-  variant = "default",
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List> &
-  VariantProps<typeof tabsListVariants>) {
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
   // O size vem do <Tabs> (contexto) — a altura mora aqui, na list.
   const size = React.useContext(TabsSizeContext);
   const orientation = React.useContext(TabsOrientationContext);
   const distribution = React.useContext(TabsDistributionContext);
-  const normalizedVariant = variant ?? "default";
-  const hasHorizontalLine =
-    normalizedVariant === "line" && orientation === "horizontal";
+  const hasHorizontalLine = orientation === "horizontal";
   return (
-    <TabsListVariantContext.Provider value={normalizedVariant}>
-      <TabsPrimitive.List
-        data-slot="tabs-list"
-        data-variant={normalizedVariant}
-        data-size={size}
-        data-distribution={distribution}
-        className={cn(
-          tabsListVariants({ variant: normalizedVariant }),
-          controlHeight[size],
-          distribution === "equal" && orientation === "horizontal" && "w-full",
-          className,
-        )}
-        style={{
-          ...(hasHorizontalLine
-            ? {
-                position: "relative",
-                width: "100%",
-                height: "auto",
-                justifyContent: "flex-start",
-              }
-            : {}),
-          ...style,
-        }}
-        {...props}
-      >
-        {hasHorizontalLine && (
-          <span
-            aria-hidden="true"
-            data-slot="tabs-line"
-            style={{
-              position: "absolute",
-              insetInline: "0rem",
-              bottom: 0,
-              borderBottomWidth: "0.0625rem",
-              borderBottomStyle: "solid",
-              borderBottomColor: "var(--border)",
-              pointerEvents: "none",
-            }}
-          />
-        )}
-        {children}
-      </TabsPrimitive.List>
-    </TabsListVariantContext.Provider>
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-size={size}
+      data-distribution={distribution}
+      className={cn(
+        "group/tabs-list inline-flex w-fit items-center justify-center gap-1 rounded-none bg-transparent p-0 text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+        controlHeight[size],
+        distribution === "equal" && orientation === "horizontal" && "w-full",
+        className,
+      )}
+      style={{
+        ...(hasHorizontalLine
+          ? {
+              position: "relative",
+              width: "100%",
+              height: "auto",
+              justifyContent: "flex-start",
+            }
+          : {}),
+        ...style,
+      }}
+      {...props}
+    >
+      {hasHorizontalLine && (
+        <span
+          aria-hidden="true"
+          data-slot="tabs-line"
+          style={{
+            position: "absolute",
+            insetInline: "0rem",
+            bottom: 0,
+            borderBottomWidth: "0.0625rem",
+            borderBottomStyle: "solid",
+            borderBottomColor: "var(--border)",
+            pointerEvents: "none",
+          }}
+        />
+      )}
+      {children}
+    </TabsPrimitive.List>
   );
 }
 
-function TabsTrigger({
+function TabsListItem({
   className,
   style,
   icon,
@@ -152,17 +123,16 @@ function TabsTrigger({
   /** Ícone decorativo antes do rótulo. Em uma aba sem texto, declare também `aria-label`. */
   icon?: React.ReactNode;
 }) {
-  const variant = React.useContext(TabsListVariantContext);
   const orientation = React.useContext(TabsOrientationContext);
   const size = React.useContext(TabsSizeContext);
   const distribution = React.useContext(TabsDistributionContext);
   const framed = React.useContext(TabsFramedContext);
-  const hasHorizontalLine = variant === "line" && orientation === "horizontal";
+  const hasHorizontalLine = orientation === "horizontal";
   const content = (
     <>
       {icon !== undefined && (
         <span
-          data-slot="tabs-trigger-icon"
+          data-slot="tabs-list-item-icon"
           aria-hidden="true"
           className="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4"
         >
@@ -174,16 +144,14 @@ function TabsTrigger({
   );
   return (
     <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
+      data-slot="tabs-list-item"
       // px: altura e indicador compensam a hairline do contêiner (um pixel físico, não escala).
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent",
-        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:text-foreground",
-        "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-1px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground dark:data-[state=active]:border-transparent dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-1px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 data-[state=active]:after:opacity-100",
         hasHorizontalLine &&
           cn(
-            "group/tab-trigger rounded-none px-0 py-0 hover:bg-transparent active:brightness-100 data-[state=active]:bg-transparent data-[state=active]:hover:bg-transparent",
+            "group/tab-list-item rounded-none px-0 py-0 hover:bg-transparent active:brightness-100 data-[state=active]:bg-transparent data-[state=active]:hover:bg-transparent",
             framed ? "pb-2" : "pb-1.5",
           ),
         className,
@@ -202,9 +170,9 @@ function TabsTrigger({
     >
       {hasHorizontalLine ? (
         <span
-          data-slot="tabs-trigger-content"
+          data-slot="tabs-list-item-content"
           className={cn(
-            "inline-flex items-center justify-center gap-1.5 rounded-md px-3 transition-colors hover:bg-accent hover:text-accent-foreground active:brightness-90 group-data-[state=active]/tab-trigger:text-foreground",
+            "inline-flex items-center justify-center gap-1.5 rounded-md px-3 transition-colors hover:bg-accent hover:text-accent-foreground active:brightness-90 group-data-[state=active]/tab-list-item:text-foreground",
             distribution === "equal" && "w-full",
             controlHeight[size],
           )}
@@ -218,17 +186,17 @@ function TabsTrigger({
   );
 }
 
-function TabsContent({
+function TabsPanel({
   className,
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.Content>) {
   return (
     <TabsPrimitive.Content
-      data-slot="tabs-content"
+      data-slot="tabs-panel"
       className={cn("flex-1 outline-none", className)}
       {...props}
     />
   );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+export { Tabs, TabsList, TabsListItem, TabsPanel };

package/src/ui/components/primitives/toggle.tsx

@@ -15,7 +15,7 @@ const toggleVariants = cva(
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground data-[state=on]:bg-muted/50 data-[state=on]:text-foreground",
       },
       // Alturas da escala de control.ts (`sm` = o mesmo h-8 de Button e Select).
       size: {