@softize/opus 13.1.0 → 15.0.0

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

@@ -0,0 +1,204 @@
+/**
+ * Cabeçalho de superfície (interno): a anatomia que Page e Content compartilham.
+ *
+ * Um título, metadata opcional, uma descrição e uma região de ações que vai para o extremo oposto
+ * em larguras amplas e empilha abaixo do contexto nas estreitas. Cada família escolhe quais slots
+ * expõe; layout, validação e classes vivem aqui, uma vez.
+ */
+
+import {
+  Children,
+  Fragment,
+  isValidElement,
+  type ElementType,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { cn } from "../../lib/cn.ts";
+
+export type SurfaceHeaderVariant = "page" | "section";
+
+/** As classes por slot, por hierarquia visual — PageTitle e ContentTitle(page) são o mesmo. */
+export const surfaceHeaderClasses: Record<
+  SurfaceHeaderVariant,
+  { title: string; description: string; count: string; actions: string }
+> = {
+  page: {
+    title: "text-2xl font-semibold tracking-tight",
+    description: "mt-1 truncate text-sm text-muted-foreground",
+    count: "font-mono text-base text-muted-foreground/60",
+    actions: "flex w-full shrink-0 items-center gap-4 sm:w-auto",
+  },
+  section: {
+    title: "text-sm font-semibold",
+    description: "mt-0.5 truncate text-xs text-muted-foreground",
+    count: "font-mono text-xs text-muted-foreground/60",
+    actions: "flex w-full shrink-0 items-center gap-2 sm:w-auto",
+  },
+};
+
+interface SurfaceHeaderSlots {
+  leading?: ElementType | readonly ElementType[];
+  title: ElementType;
+  count?: ElementType;
+  description: ElementType;
+  actions: ElementType;
+}
+
+export interface SurfaceHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /** Nome do componente público, para as mensagens de erro (`PageHeader`, `ContentHeader`). */
+  name: string;
+  /** Prefixo dos `data-slot` (`page` → `page-header`, `page-heading`). */
+  slot: string;
+  /** Os componentes de slot que este cabeçalho reconhece. */
+  slots: SurfaceHeaderSlots;
+  /** Posição de um slot introdutório opcional, antes da linha ou dentro dela. */
+  leadingPlacement?: "above" | "inline";
+  /** Classes de um container interno quando a moldura precisa ocupar toda a largura. */
+  contentClassName?: string;
+}
+
+/** Expande fragments de primeiro nível: o shorthand monta os slots dentro de um `<>`. */
+function flatten(children: ReactNode): ReactNode[] {
+  return Children.toArray(children).flatMap((node) =>
+    isValidElement(node) && node.type === Fragment
+      ? Children.toArray((node.props as { children?: ReactNode }).children)
+      : [node],
+  );
+}
+
+export function SurfaceHeader({
+  name,
+  slot,
+  slots,
+  leadingPlacement = "above",
+  contentClassName,
+  className,
+  children,
+  ...props
+}: SurfaceHeaderProps): ReactElement {
+  const nodes = flatten(children);
+  const of = (type: ElementType) =>
+    nodes.filter((node) => isValidElement(node) && node.type === type);
+  const leadingTypes: readonly ElementType[] =
+    slots.leading === undefined
+      ? []
+      : Array.isArray(slots.leading)
+        ? slots.leading
+        : [slots.leading as ElementType];
+  const leading = leadingTypes.flatMap(of);
+  const titles = of(slots.title);
+  const counts = slots.count === undefined ? [] : of(slots.count);
+  const descriptions = of(slots.description);
+  const actionSlots = of(slots.actions);
+  const recognized =
+    leading.length +
+    titles.length +
+    counts.length +
+    descriptions.length +
+    actionSlots.length;
+
+  if (
+    titles.length !== 1 ||
+    leading.length > 1 ||
+    counts.length > 1 ||
+    descriptions.length > 1 ||
+    actionSlots.length > 1 ||
+    recognized !== nodes.length
+  ) {
+    const label = (type: ElementType) =>
+      typeof type === "string"
+        ? type
+        : ((type as { name?: string }).name ?? "");
+    const optionalSlots = [
+      ...leadingTypes,
+      slots.description,
+      slots.count,
+      slots.actions,
+    ]
+      .filter((type): type is ElementType => type !== undefined)
+      .map(label)
+      .join(", ");
+    // A região introdutória aceita mais de um TIPO, mas só um por vez: a mensagem genérica
+    // ("no máximo um de cada") não diz que eles são alternativas entre si. O que distingue os
+    // dois erros é a quantidade de tipos distintos presentes — dois PageBack são repetição,
+    // não combinação, e merecem a mensagem genérica.
+    const distinctLeading = new Set(
+      leading.flatMap((node) => (isValidElement(node) ? [node.type as ElementType] : [])),
+    );
+    throw new Error(
+      distinctLeading.size > 1
+        ? `${name} aceita ${[...distinctLeading].map(label).join(" ou ")} na região introdutória, nunca os dois na mesma superfície.`
+        : `${name} exige um ${label(slots.title)} e aceita no máximo um de cada: ${optionalSlots}.`,
+    );
+  }
+
+  const heading = (
+    <div
+      data-slot={`${slot}-heading`}
+      className={cn("min-w-0", leadingPlacement === "inline" && "flex-1")}
+    >
+      <div className="flex items-baseline gap-2">
+        {titles}
+        {counts}
+      </div>
+      {descriptions}
+    </div>
+  );
+  const row = (
+    <>
+      {leadingPlacement === "inline" && leading}
+      {heading}
+      {actionSlots}
+    </>
+  );
+  const layout =
+    leadingPlacement === "inline" ? (
+      <div className="flex min-w-0 items-center gap-3">{row}</div>
+    ) : leading.length > 0 ? (
+      <>
+        <div data-slot={`${slot}-navigation`} className="mb-4">
+          {leading}
+        </div>
+        <div
+          data-slot={`${slot}-header-row`}
+          className={cn(
+            actionSlots.length > 0 &&
+              "flex flex-col items-start gap-4 sm:flex-row sm:items-end sm:justify-between",
+          )}
+        >
+          {heading}
+          {actionSlots}
+        </div>
+      </>
+    ) : (
+      <>
+        {heading}
+        {actionSlots}
+      </>
+    );
+
+  return (
+    <div
+      data-slot={`${slot}-header`}
+      className={cn(
+        contentClassName === undefined &&
+          leadingPlacement !== "inline" &&
+          leading.length === 0 &&
+          actionSlots.length > 0 &&
+          "flex flex-col items-start gap-4 sm:flex-row sm:items-end sm:justify-between",
+        className,
+      )}
+      {...props}
+    >
+      {contentClassName === undefined ? (
+        layout
+      ) : (
+        <div data-slot={`${slot}-header-content`} className={contentClassName}>
+          {layout}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -5,8 +5,10 @@
  * - Loading state automático (disabled + "..." enquanto roda).
  * - Toast em sucesso/erro; cache invalidation via action.invalidates.
  * - Confirmação opcional via <Dialog> (compacto, não fecha no clique fora) antes de disparar.
- * - `icon` faz o botão virar icon-only com tooltip: é a ação que mora NO item (linha,
- *   card). Absorveu o antigo DeleteButton, que era este componente com uma lixeira.
+ * - `icon` faz o botão virar icon-only com tooltip, no quadrado `icon-xs` (1.5rem) da escala:
+ *   é a ação que mora NO item (linha, card). Uma composição que peça mais presença — a barra
+ *   do `PageHeader`, por exemplo — declara `size="icon-sm"`. Absorveu o antigo DeleteButton,
+ *   que era este componente com uma lixeira.
  * Emite `data-action="<action.name>"` na raiz (selector E2E).
  */
 
@@ -49,8 +51,8 @@ export interface ActionTriggerProps<TInput, TData> {
   context?: ButtonProps['context']
   /** Tratamento visual do Button. */
   variant?: ButtonProps['variant']
-  /** Tamanho do botão. */
-  size?: 'default' | 'sm' | 'lg' | 'icon'
+  /** Tamanho do botão (escala de control.ts). Com `icon`, o default é `icon-xs`. */
+  size?: ButtonProps['size']
   /** Desabilita o botão independente de loading. */
   disabled?: boolean
   /** Texto do confirm dialog. Default vem do `action.confirm` (ConfirmSpec do
@@ -78,7 +80,7 @@ export function ActionTrigger<TInput, TData>({
   label,
   context,
   variant,
-  size = 'default',
+  size,
   disabled = false,
   confirm: confirmProp,
   onSuccess,
@@ -141,7 +143,7 @@ export function ActionTrigger<TInput, TData>({
       <Button
         context={triggerContext}
         variant={triggerVariant}
-        size={icon !== undefined ? 'icon' : size}
+        size={size ?? (icon !== undefined ? 'icon-xs' : 'default')}
         busy={isLoading}
         disabled={disabled}
         aria-label={icon !== undefined ? buttonLabel : undefined}
@@ -149,10 +151,7 @@ export function ActionTrigger<TInput, TData>({
           e.stopPropagation()
           onClick()
         }}
-        className={cn(
-          icon !== undefined && 'size-7 shrink-0 text-muted-foreground/60',
-          className,
-        )}
+        className={cn(icon !== undefined && 'shrink-0 text-muted-foreground/60', className)}
         data-action={action.name}
       >
         {icon ?? buttonLabel}

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

@@ -10,9 +10,8 @@ import type { ReactNode } from 'react'
 import type { ViewAction } from '../../../core/index.ts'
 import { useViewAction } from '../../drivers/react.tsx'
 import { isBusinessError, isRetryable } from '../../lib/action-errors.ts'
-import { Alert } from '../primitives/alert.tsx'
 import { Skeleton } from '../primitives/skeleton.tsx'
-import { Button } from '../primitives/button.tsx'
+import { EmptySurface, ErrorSurface } from './state-surface.tsx'
 
 export interface ActionViewProps<TInput, TData> {
   action: ViewAction<TInput, TData>
@@ -21,14 +20,16 @@ export interface ActionViewProps<TInput, TData> {
   children?: (data: TData, refetch: () => Promise<void>) => ReactNode
   /** Alias de children (a API original). Children tem precedência. */
   render?: (data: TData, refetch: () => Promise<void>) => ReactNode
-  /** Renderiza estado vazio (200 mas sem dado). Default: nada. */
+  /** Renderiza estado vazio (200 mas sem dado). Default: `emptyMessage` ou nada. */
   empty?: ReactNode
+  /** Atalho do vazio: a frase na mesma superfície de DataState (Empty com moldura sólida). */
+  emptyMessage?: string
   /** Renderiza loading. Default (ou `true`): 3 skeletons empilhados; `false` não renderiza
    *  nada enquanto carrega — o contêiner `data-action` permanece. */
   loading?: ReactNode | boolean
-  /** Renderiza erro. Default: "Não foi possível carregar" + botão "Tentar de novo" (omitido em
-   *  falta de permissão ou sessão); a frase do servidor entra como descrição só quando está na
-   *  allowlist de lib/action-errors.ts. */
+  /** Renderiza erro. Default: a mesma superfície de DataState — "Não foi possível carregar" +
+   *  "Tentar de novo" (omitido em falta de permissão ou sessão); a frase do servidor entra como
+   *  descrição só quando está na allowlist de lib/action-errors.ts. */
   error?: (err: { code: string; message: string; category?: string }, retry: () => Promise<void>) => ReactNode
 }
 
@@ -38,6 +39,7 @@ export function ActionView<TInput, TData>({
   children,
   render,
   empty,
+  emptyMessage,
   loading,
   error,
 }: ActionViewProps<TInput, TData>) {
@@ -66,23 +68,19 @@ export function ActionView<TInput, TData>({
     }
     return (
       <div data-action={action.name}>
-        <Alert
-          context="danger"
+        <ErrorSurface
           title="Não foi possível carregar"
           description={isBusinessError(err) ? err.message.trim() : undefined}
-        >
-          {isRetryable(err) && (
-            <Button variant="outline" size="sm" onClick={() => void refetch()}>
-              Tentar de novo
-            </Button>
-          )}
-        </Alert>
+          {...(isRetryable(err) ? { onRetry: () => refetch() } : {})}
+        />
       </div>
     )
   }
 
   if (data === undefined) {
-    return <div data-action={action.name}>{empty ?? null}</div>
+    const emptyNode =
+      empty ?? (emptyMessage !== undefined ? <EmptySurface title={emptyMessage} compact frame="structural" /> : null)
+    return <div data-action={action.name}>{emptyNode}</div>
   }
 
   return <div data-action={action.name}>{renderData(data, refetch)}</div>

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

@@ -8,17 +8,9 @@ import {
 
 export type AlertContext = Exclude<UiContext, "primary">;
 export type AlertVariant = "subtle" | "outline";
-/**
- * @deprecated Aliases de migração: `default` → `context="neutral"`, `destructive` →
- * `context="danger"`; `success`, `warning` e `info` → o `context` homônimo (todos em
- * `subtle`). Declare `context` + `variant`.
- */
-export type LegacyAlertVariant =
-  "default" | "destructive" | "success" | "warning" | "info";
-
 interface AlertStyleOptions {
   context?: AlertContext | null;
-  variant?: AlertVariant | LegacyAlertVariant | null;
+  variant?: AlertVariant | null;
 }
 
 interface AlertRootContextValue {
@@ -52,30 +44,6 @@ function resolveAlertStyle({ context, variant }: AlertStyleOptions = {}): {
   context: AlertContext;
   variant: AlertVariant;
 } {
-  // `danger` não é alias: é um contexto que chegou pela prop errada. Segue como contexto.
-  if ((variant as string) === "danger")
-    return { context: "danger", variant: "subtle" };
-  const legacy =
-    variant === "default" ||
-    variant === "destructive" ||
-    variant === "success" ||
-    variant === "warning" ||
-    variant === "info";
-  if (context != null && legacy) {
-    throw new Error(
-      "Alert não permite combinar context com uma variante semântica legada.",
-    );
-  }
-  if (variant === "default") return { context: "neutral", variant: "subtle" };
-  if (variant === "destructive")
-    return { context: "danger", variant: "subtle" };
-  if (
-    variant === "success" ||
-    variant === "warning" ||
-    variant === "info"
-  ) {
-    return { context: variant, variant: "subtle" };
-  }
   return { context: context ?? "neutral", variant: variant ?? "subtle" };
 }
 

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

@@ -2,20 +2,26 @@ import * as React from "react"
 import { Avatar as AvatarPrimitive } from "radix-ui"
 
 import { cn } from '../../lib/cn.ts'
+import type { ControlSize } from './control.ts'
 
+/**
+ * Ejetado (14.0.0): `size` segue a escala de control.ts — o avatar de uma linha `sm` mede o
+ * mesmo que o controle `sm` ao lado (2rem); `xs` (1.5rem) é a lista densa; `default` (2.25rem)
+ * e `lg` (2.5rem) pareiam com Button/Input. O fallback e o selo acompanham o tamanho.
+ */
 function Avatar({
   className,
   size = "default",
   ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: "default" | "sm" | "lg"
+  size?: ControlSize
 }) {
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        "group/avatar relative flex shrink-0 overflow-hidden rounded-full select-none data-[size=xs]:size-6 data-[size=sm]:size-8 data-[size=default]:size-9 data-[size=lg]:size-10",
         className
       )}
       {...props}
@@ -44,7 +50,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-xs",
         className
       )}
       {...props}
@@ -58,7 +64,8 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
       data-slot="avatar-badge"
       className={cn(
         "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
-        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=xs]/avatar:size-2 group-data-[size=xs]/avatar:[&>svg]:hidden",
+        "group-data-[size=sm]/avatar:size-2.5 group-data-[size=sm]/avatar:[&>svg]:size-2",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
         className
@@ -89,7 +96,10 @@ function AvatarGroupCount({
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background [&>svg]:size-4",
+        "group-has-data-[size=xs]/avatar-group:size-6 group-has-data-[size=xs]/avatar-group:[&>svg]:size-3",
+        "group-has-data-[size=sm]/avatar-group:size-8 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3.5",
+        "group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5",
         className
       )}
       {...props}

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

@@ -12,22 +12,9 @@ import {
 
 export type BadgeContext = UiContext
 export type BadgeVariant = 'solid' | 'subtle' | 'outline'
-/**
- * @deprecated Aliases de migração: `default` → `context="primary"` solid, `secondary` →
- * `context="neutral"` solid, `destructive` → `context="danger"` solid; `success`, `warning` e
- * `info` → o `context` homônimo em `subtle`. Declare `context` + `variant`.
- */
-export type LegacyBadgeVariant =
-  | 'default'
-  | 'secondary'
-  | 'destructive'
-  | 'success'
-  | 'warning'
-  | 'info'
-
 export interface BadgeStyleOptions {
   context?: BadgeContext | null
-  variant?: BadgeVariant | LegacyBadgeVariant | null
+  variant?: BadgeVariant | null
 }
 
 const baseClasses =
@@ -37,35 +24,7 @@ export function resolveBadgeStyle({
   context,
   variant,
 }: BadgeStyleOptions = {}): { context: BadgeContext; variant: BadgeVariant } {
-  // `danger` não é alias: é um contexto que chegou pela prop errada. Segue como contexto.
-  if ((variant as string) === 'danger') return { context: 'danger', variant: 'subtle' }
-  const legacy =
-    variant === 'default' ||
-    variant === 'secondary' ||
-    variant === 'destructive' ||
-    variant === 'success' ||
-    variant === 'warning' ||
-    variant === 'info'
-  if (context != null && legacy) {
-    throw new Error('Badge não permite combinar context com uma variante semântica legada.')
-  }
-  switch (variant) {
-    case 'default':
-      return { context: 'primary', variant: 'solid' }
-    case 'secondary':
-      return { context: 'neutral', variant: 'solid' }
-    case 'destructive':
-      return { context: 'danger', variant: 'solid' }
-    case 'success':
-    case 'warning':
-    case 'info':
-      return { context: variant, variant: 'subtle' }
-    default:
-      return {
-        context: context ?? 'neutral',
-        variant: variant ?? 'subtle',
-      }
-  }
+  return { context: context ?? 'neutral', variant: variant ?? 'subtle' }
 }
 
 /** Classes do Badge. Contexto seleciona significado; variante seleciona o tratamento visual. */

package/src/ui/components/primitives/button-group.tsx

@@ -9,10 +9,12 @@ const buttonGroupVariants = cva(
   {
     variants: {
       orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+        horizontal: '',
+        vertical: 'flex-col',
+      },
+      mode: {
+        connected: '',
+        spaced: 'gap-1',
       },
       shape: {
         default: '',
@@ -22,17 +24,38 @@ const buttonGroupVariants = cva(
     compoundVariants: [
       {
         orientation: 'horizontal',
+        mode: 'connected',
+        className:
+          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+      },
+      {
+        orientation: 'vertical',
+        mode: 'connected',
+        className:
+          '[&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+      },
+      {
+        orientation: 'horizontal',
+        mode: 'connected',
         shape: 'pill',
         className: '[&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>[data-slot=select]:first-child_[data-slot=select-control]]:rounded-l-full [&>[data-slot=select]:last-child_[data-slot=select-control]]:rounded-r-full [&>[data-slot=select-wrapper]:first-child_[data-slot=select]]:rounded-l-full [&>[data-slot=select-wrapper]:last-child_[data-slot=select]]:rounded-r-full',
       },
       {
         orientation: 'vertical',
+        mode: 'connected',
         shape: 'pill',
         className: '[&>*:first-child]:rounded-t-full [&>*:last-child]:rounded-b-full [&>[data-slot=select]:first-child_[data-slot=select-control]]:rounded-t-full [&>[data-slot=select]:last-child_[data-slot=select-control]]:rounded-b-full [&>[data-slot=select-wrapper]:first-child_[data-slot=select]]:rounded-t-full [&>[data-slot=select-wrapper]:last-child_[data-slot=select]]:rounded-b-full',
       },
+      {
+        mode: 'spaced',
+        shape: 'pill',
+        className:
+          '[&>*]:rounded-full [&>[data-slot=select]_[data-slot=select-control]]:rounded-full [&>[data-slot=select-wrapper]_[data-slot=select]]:rounded-full',
+      },
     ],
     defaultVariants: {
       orientation: "horizontal",
+      mode: 'connected',
       shape: "default",
     },
   }
@@ -41,6 +64,7 @@ const buttonGroupVariants = cva(
 function ButtonGroup({
   className,
   orientation,
+  mode,
   shape,
   ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
@@ -49,12 +73,14 @@ function ButtonGroup({
       role="group"
       data-slot="button-group"
       data-orientation={orientation}
+      data-mode={mode}
       data-shape={shape}
       className={cn(
-        buttonGroupVariants({ orientation, shape }),
-        orientation === 'vertical'
-          ? '[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-t-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-t-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-b-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-t-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-t-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-b-none'
-          : '[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-l-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-l-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-r-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-l-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-l-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-r-none',
+        buttonGroupVariants({ orientation, mode, shape }),
+        mode !== 'spaced' &&
+          (orientation === 'vertical'
+            ? '[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-t-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-t-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-b-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-t-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-t-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-b-none'
+            : '[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-l-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-l-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-r-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-l-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-l-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-r-none'),
         className,
       )}
       {...props}