@softize/opus 21.0.1 → 22.0.0

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

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Slot } from "radix-ui";
 
@@ -15,6 +16,7 @@ const buttonGroupVariants = cva(
       mode: {
         connected: "",
         spaced: "gap-1",
+        divided: "gap-1",
       },
       shape: {
         default: "",
@@ -22,8 +24,11 @@ const buttonGroupVariants = cva(
       },
       distribution: {
         content: "",
-        equal:
-          "w-full gap-2 [&>*]:min-w-0 [&>*]:w-full [&>*]:flex-1",
+        equal: "w-full gap-2 [&>*]:min-w-0 [&>*]:w-full [&>*]:flex-1",
+      },
+      framed: {
+        true: "border p-1",
+        false: "",
       },
     },
     compoundVariants: [
@@ -59,12 +64,29 @@ const buttonGroupVariants = cva(
         className:
           "[&>*]:rounded-full [&>[data-slot=select]_[data-slot=select-control]]:rounded-full [&>[data-slot=select-wrapper]_[data-slot=select]]:rounded-full",
       },
+      {
+        mode: "divided",
+        shape: "pill",
+        className:
+          "[&>*]:rounded-full [&>[data-slot=select]_[data-slot=select-control]]:rounded-full [&>[data-slot=select-wrapper]_[data-slot=select]]:rounded-full",
+      },
+      {
+        mode: "divided",
+        distribution: "equal",
+        className: "gap-1",
+      },
+      {
+        framed: true,
+        shape: "default",
+        className: "rounded-xl",
+      },
     ],
     defaultVariants: {
       orientation: "horizontal",
       mode: "connected",
       shape: "default",
       distribution: "content",
+      framed: false,
     },
   },
 );
@@ -75,26 +97,76 @@ function ButtonGroup({
   mode,
   shape,
   distribution,
+  framed = false,
+  children,
   ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  const effectiveOrientation = orientation ?? "horizontal";
+  const effectiveMode = mode ?? "connected";
+  const controls = React.Children.toArray(children);
+  const content =
+    effectiveMode === "divided"
+      ? controls.flatMap((child, index) => {
+          const childKey = React.isValidElement(child) ? child.key : index;
+          return [
+            ...(index === 0
+              ? []
+              : [
+                  <ButtonGroupSeparator
+                    key={`button-group-separator-${childKey ?? index}`}
+                    orientation={
+                      effectiveOrientation === "horizontal"
+                        ? "vertical"
+                        : "horizontal"
+                    }
+                    className="self-center"
+                    style={
+                      effectiveOrientation === "horizontal"
+                        ? {
+                            flex: "none",
+                            width: "0.0625rem",
+                            height: "1.25rem",
+                          }
+                        : {
+                            flex: "none",
+                            width: "1.25rem",
+                            height: "0.0625rem",
+                          }
+                    }
+                  />,
+                ]),
+            child,
+          ];
+        })
+      : children;
+
   return (
     <div
       role="group"
       data-slot="button-group"
-      data-orientation={orientation}
-      data-mode={mode}
+      data-orientation={effectiveOrientation}
+      data-mode={effectiveMode}
       data-shape={shape}
       data-distribution={distribution}
+      data-framed={framed}
       className={cn(
-        buttonGroupVariants({ orientation, mode, shape, distribution }),
-        mode !== "spaced" &&
-          (orientation === "vertical"
+        buttonGroupVariants({
+          orientation: effectiveOrientation,
+          mode: effectiveMode,
+          shape,
+          distribution,
+          framed,
+        }),
+        effectiveMode === "connected" &&
+          (effectiveOrientation === "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}
-    />
+    >
+      {content}
+    </div>
   );
 }
 

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

@@ -1,8 +1,8 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 
-import type { UiContext } from '../../../core/ui-context.ts'
-import { cn } from '../../lib/cn.ts'
+import type { UiContext } from "../../../core/ui-context.ts";
+import { cn } from "../../lib/cn.ts";
 import {
   controlGlyphClass,
   controlGlyphSize,
@@ -11,25 +11,28 @@ import {
   focusRing,
   type ControlScale,
   type ControlShape,
-} from './control.ts'
-import { Spinner } from './spinner.tsx'
+} from "./control.ts";
+import { Spinner } from "./spinner.tsx";
 
-export type ButtonContext = Extract<UiContext, 'neutral' | 'primary' | 'danger'>
-export type ButtonVariant = 'solid' | 'subtle' | 'outline' | 'ghost' | 'link'
+export type ButtonContext = Extract<
+  UiContext,
+  "neutral" | "primary" | "warning" | "danger"
+>;
+export type ButtonVariant = "solid" | "subtle" | "outline" | "ghost" | "link";
 /** A escala completa de control.ts: alturas de linha e quadrados só-ícone. */
-export type ButtonSize = ControlScale
+export type ButtonSize = ControlScale;
 
 export interface ButtonStyleOptions {
   /** Sem `context`, `solid`/`subtle` assumem `primary`; `outline`/`ghost`/`link` assumem `neutral`. */
-  context?: ButtonContext | null
+  context?: ButtonContext | null;
   /** Tratamento visual. */
-  variant?: ButtonVariant | null
-  size?: ButtonSize | null
-  shape?: ControlShape | null
+  variant?: ButtonVariant | null;
+  size?: ButtonSize | null;
+  shape?: ControlShape | null;
 }
 
 const baseClasses =
-  'inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all disabled:pointer-events-none disabled:opacity-50 active:brightness-90 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 [&_svg]:pointer-events-none [&_svg]:shrink-0'
+  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all disabled:pointer-events-none disabled:opacity-50 active:brightness-90 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 
 /** Padding e ritmo por tamanho; altura e quadrado vêm da escala compartilhada. */
 const sizeClasses: Record<ButtonSize, string> = {
@@ -37,52 +40,73 @@ const sizeClasses: Record<ButtonSize, string> = {
   sm: `${controlHeight.sm} gap-1.5 px-3 has-[>svg]:px-2.5`,
   default: `${controlHeight.default} px-4 py-2 has-[>svg]:px-3`,
   lg: `${controlHeight.lg} px-6 has-[>svg]:px-4`,
-  'icon-xs': controlSquare['icon-xs'],
-  'icon-sm': controlSquare['icon-sm'],
+  "icon-xs": controlSquare["icon-xs"],
+  "icon-sm": controlSquare["icon-sm"],
   icon: controlSquare.icon,
-  'icon-lg': controlSquare['icon-lg'],
-}
+  "icon-lg": controlSquare["icon-lg"],
+};
 
 const solidClasses: Record<ButtonContext, string> = {
-  neutral: 'bg-context-neutral text-context-neutral-foreground hover:brightness-95',
-  primary: 'bg-context-primary text-context-primary-foreground hover:brightness-95',
-  danger: 'bg-context-danger text-context-danger-foreground hover:brightness-95 focus-visible:ring-context-danger/20',
-}
+  neutral:
+    "bg-context-neutral text-context-neutral-foreground hover:brightness-95",
+  primary:
+    "bg-context-primary text-context-primary-foreground hover:brightness-95",
+  warning:
+    "bg-context-warning text-context-warning-foreground hover:brightness-95",
+  danger:
+    "bg-context-danger text-context-danger-foreground hover:brightness-95 focus-visible:ring-context-danger/20",
+};
 
 const subtleClasses: Record<ButtonContext, string> = {
-  neutral: 'bg-context-neutral-subtle text-foreground hover:bg-context-neutral',
-  primary: 'bg-context-primary-subtle text-context-primary-emphasis hover:bg-context-primary/15',
-  danger: 'bg-context-danger-subtle text-context-danger-emphasis hover:bg-context-danger/15',
-}
+  neutral: "bg-context-neutral-subtle text-foreground hover:bg-context-neutral",
+  primary:
+    "bg-context-primary-subtle text-context-primary-emphasis hover:bg-context-primary/15",
+  warning:
+    "bg-context-warning-subtle text-context-warning-emphasis hover:bg-context-warning/15",
+  danger:
+    "bg-context-danger-subtle text-context-danger-emphasis hover:bg-context-danger/15",
+};
 
 const outlineClasses: Record<ButtonContext, string> = {
-  neutral: 'border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',
-  primary: 'border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',
-  danger: 'border border-context-danger-border bg-transparent text-context-danger-emphasis hover:bg-context-danger-subtle',
-}
+  neutral:
+    "border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
+  primary:
+    "border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
+  warning:
+    "border border-context-warning-border bg-transparent text-context-warning-emphasis hover:bg-context-warning-subtle",
+  danger:
+    "border border-context-danger-border bg-transparent text-context-danger-emphasis hover:bg-context-danger-subtle",
+};
 
 const ghostClasses: Record<ButtonContext, string> = {
-  neutral: 'text-foreground hover:bg-accent hover:text-accent-foreground',
-  primary: 'text-context-primary-emphasis hover:bg-context-primary-subtle',
-  danger: 'text-context-danger-emphasis hover:bg-context-danger-subtle',
-}
+  neutral: "text-foreground hover:bg-accent hover:text-accent-foreground",
+  primary: "text-context-primary-emphasis hover:bg-context-primary-subtle",
+  warning: "text-context-warning-emphasis hover:bg-context-warning-subtle",
+  danger: "text-context-danger-emphasis hover:bg-context-danger-subtle",
+};
 
 const linkClasses: Record<ButtonContext, string> = {
-  neutral: 'text-foreground underline-offset-4 hover:underline',
-  primary: 'text-context-primary-emphasis underline-offset-4 hover:underline',
-  danger: 'text-context-danger-emphasis underline-offset-4 hover:underline',
-}
+  neutral: "text-foreground underline-offset-4 hover:underline",
+  primary: "text-context-primary-emphasis underline-offset-4 hover:underline",
+  warning: "text-context-warning-emphasis underline-offset-4 hover:underline",
+  danger: "text-context-danger-emphasis underline-offset-4 hover:underline",
+};
 
-export function resolveButtonStyle({ context, variant }: ButtonStyleOptions = {}): {
-  context: ButtonContext
-  variant: ButtonVariant
+export function resolveButtonStyle({
+  context,
+  variant,
+}: ButtonStyleOptions = {}): {
+  context: ButtonContext;
+  variant: ButtonVariant;
 } {
-  const resolvedVariant: ButtonVariant = variant ?? 'solid'
+  const resolvedVariant: ButtonVariant = variant ?? "solid";
   // Tratamentos de superfície (solid/subtle) pedem destaque; os leves (outline/ghost/link)
   // são o chrome discreto da casa e só ganham cor quando o contexto é declarado.
   const defaultContext: ButtonContext =
-    resolvedVariant === 'solid' || resolvedVariant === 'subtle' ? 'primary' : 'neutral'
-  return { context: context ?? defaultContext, variant: resolvedVariant }
+    resolvedVariant === "solid" || resolvedVariant === "subtle"
+      ? "primary"
+      : "neutral";
+  return { context: context ?? defaultContext, variant: resolvedVariant };
 }
 
 /**
@@ -90,35 +114,36 @@ export function resolveButtonStyle({ context, variant }: ButtonStyleOptions = {}
  * `size` a medida na escala compartilhada de control.ts.
  */
 export function buttonVariants(options: ButtonStyleOptions = {}): string {
-  const resolved = resolveButtonStyle(options)
+  const resolved = resolveButtonStyle(options);
   const variantClasses =
-    resolved.variant === 'solid'
+    resolved.variant === "solid"
       ? solidClasses[resolved.context]
-      : resolved.variant === 'subtle'
+      : resolved.variant === "subtle"
         ? subtleClasses[resolved.context]
-        : resolved.variant === 'outline'
+        : resolved.variant === "outline"
           ? outlineClasses[resolved.context]
-          : resolved.variant === 'ghost'
+          : resolved.variant === "ghost"
             ? ghostClasses[resolved.context]
-            : linkClasses[resolved.context]
+            : linkClasses[resolved.context];
   return cn(
     baseClasses,
     focusRing,
     variantClasses,
-    sizeClasses[options.size ?? 'default'],
+    sizeClasses[options.size ?? "default"],
     controlGlyphClass(options.size),
-    options.shape === 'pill' && 'rounded-full',
-  )
+    options.shape === "pill" && "rounded-full",
+  );
 }
 
-export interface ButtonProps extends React.ComponentProps<'button'>, ButtonStyleOptions {
+export interface ButtonProps
+  extends React.ComponentProps<"button">, ButtonStyleOptions {
   /** Renderiza como o filho (Radix Slot) em vez de <button> — recompõe sem forkar. */
-  asChild?: boolean
+  asChild?: boolean;
   /** Estado de ação em andamento; mostra Spinner e desabilita o controle. */
-  busy?: boolean
+  busy?: boolean;
   /** Ícone à esquerda, como nó (`icon={<Plus />}`); o tamanho do glifo vem do `size`. No
    *  `busy`, o Spinner ocupa o mesmo espaço. */
-  icon?: React.ReactNode
+  icon?: React.ReactNode;
 }
 
 export function Button({
@@ -134,8 +159,8 @@ export function Button({
   children,
   ...props
 }: ButtonProps): React.ReactElement {
-  const Comp = asChild ? Slot : 'button'
-  const resolved = resolveButtonStyle({ context, variant })
+  const Comp = asChild ? Slot : "button";
+  const resolved = resolveButtonStyle({ context, variant });
   return (
     <Comp
       data-slot="button"
@@ -154,5 +179,5 @@ export function Button({
         </>
       )}
     </Comp>
-  )
+  );
 }

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

@@ -1,66 +1,68 @@
-import * as React from 'react'
+import * as React from "react";
 
-import { cn } from '../../lib/cn.ts'
-import { EmptyValue, isAbsentValue } from './empty-value.tsx'
+import { cn } from "../../lib/cn.ts";
+import { EmptyValue, isAbsentValue } from "./empty-value.tsx";
 
-export type DetailGroupVariant = 'plain' | 'framed'
-export type DetailGroupOrientation = 'vertical' | 'horizontal'
-export type DetailGroupColumns = 1 | 2 | 3 | 4 | 'auto'
+export type DetailGroupVariant = "plain" | "framed";
+export type DetailGroupOrientation = "vertical" | "horizontal";
+export type DetailGroupColumns = 1 | 2 | 3 | 4 | "auto";
 
-export interface DetailGroupProps extends React.ComponentProps<'dl'> {
-  /** `framed` aplica a moldura canônica ao conjunto; na orientação horizontal, a coluna de rótulos ganha fundo sutil. */
-  variant?: DetailGroupVariant
-  /** Exibe hairlines somente entre os campos, sem exigir moldura externa. */
-  dividers?: boolean
+export interface DetailGroupProps extends React.ComponentProps<"dl"> {
+  /** `framed` aplica a moldura canônica ao conjunto. */
+  variant?: DetailGroupVariant;
+  /** Exibe hairlines entre os campos; na orientação horizontal, aplica o tratamento tabular aos rótulos. */
+  dividers?: boolean;
   /** Número fixo de colunas ou distribuição automática por largura mínima. */
-  columns?: DetailGroupColumns
+  columns?: DetailGroupColumns;
   /** Organiza a chave sobre o valor ou ao lado dele em cada campo. */
-  orientation?: DetailGroupOrientation
+  orientation?: DetailGroupOrientation;
 }
 
 const columnClasses: Record<DetailGroupColumns, string> = {
-  1: 'grid-cols-1',
-  2: 'grid-cols-2',
-  3: 'grid-cols-3',
-  4: 'grid-cols-4',
-  auto: 'grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))]',
-}
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  auto: "grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))]",
+};
 
 const DetailGroupLayoutContext = React.createContext({
-  splitHorizontalField: false,
-})
+  dividedHorizontalField: false,
+});
 
 function DetailGroup({
   className,
   children,
   style,
-  variant = 'plain',
+  variant = "plain",
   dividers = false,
   columns = 1,
-  orientation = 'vertical',
+  orientation = "vertical",
   ...props
 }: DetailGroupProps): React.ReactElement {
-  const splitHorizontalField = variant === 'framed' && orientation === 'horizontal'
+  const dividedHorizontalField = dividers && orientation === "horizontal";
 
   return (
-    <DetailGroupLayoutContext.Provider value={{ splitHorizontalField }}>
+    <DetailGroupLayoutContext.Provider value={{ dividedHorizontalField }}>
       <dl
         data-slot="detail-group"
         data-variant={variant}
         data-dividers={dividers}
         data-orientation={orientation}
         className={cn(
-          'group/detail-group grid min-w-0 [--detail-label-width:7rem]',
+          "group/detail-group grid min-w-0 [--detail-label-width:7rem]",
           columnClasses[columns],
-          variant === 'plain' && !dividers && 'gap-x-6 gap-y-4',
-          dividers && 'gap-px overflow-hidden',
-          (variant === 'framed' || dividers) && !splitHorizontalField && '[&>[data-slot=detail-field]]:p-3',
-          variant === 'framed' &&
-            'overflow-hidden rounded-lg border border-border bg-transparent text-foreground',
+          variant === "plain" && !dividers && "gap-x-6 gap-y-4",
+          dividers && "gap-px overflow-hidden",
+          (variant === "framed" || dividers) &&
+            !dividedHorizontalField &&
+            "[&>[data-slot=detail-field]]:p-3",
+          variant === "framed" &&
+            "overflow-hidden rounded-lg border border-border bg-transparent text-foreground",
           // Default da coluna de rótulos como CLASSE, antes do `className`: assim uma classe do
           // consumidor (`[--detail-label-width:9rem]`) a substitui. Em `style` inline, o default
           // vencia qualquer classe e só `style` conseguia ajustar a largura.
-          splitHorizontalField && '[--detail-label-width:8.5rem]',
+          dividedHorizontalField && "[--detail-label-width:8.5rem]",
           className,
         )}
         style={style}
@@ -69,19 +71,22 @@ function DetailGroup({
         {children}
       </dl>
     </DetailGroupLayoutContext.Provider>
-  )
+  );
 }
 
-export interface DetailFieldProps extends Omit<React.ComponentProps<'div'>, 'children'> {
-  label: React.ReactNode
+export interface DetailFieldProps extends Omit<
+  React.ComponentProps<"div">,
+  "children"
+> {
+  label: React.ReactNode;
   /** `null`, `undefined`, string vazia ou só com espaços renderizam a ausência
    *  como travessão; “Não informado” ou `empty` preservam o significado para
    *  leitura assistiva. `0` e `false` seguem como valores. */
-  value: React.ReactNode
+  value: React.ReactNode;
   /** Ícone decorativo que identifica o campo antes do par chave/valor. */
-  icon?: React.ReactNode
+  icon?: React.ReactNode;
   /** O que a ausência significa neste campo: um rótulo (“Nunca enviado”) ou um nó próprio. */
-  empty?: React.ReactNode
+  empty?: React.ReactNode;
 }
 
 function DetailField({
@@ -93,32 +98,33 @@ function DetailField({
   style,
   ...props
 }: DetailFieldProps): React.ReactElement {
-  const { splitHorizontalField } = React.useContext(DetailGroupLayoutContext)
+  const { dividedHorizontalField } = React.useContext(DetailGroupLayoutContext);
   const content = !isAbsentValue(value) ? (
     value
-  ) : empty === undefined || typeof empty === 'string' ? (
+  ) : empty === undefined || typeof empty === "string" ? (
     <EmptyValue compact {...(empty !== undefined ? { label: empty } : {})} />
   ) : (
     empty
-  )
+  );
   return (
     <div
       data-slot="detail-field"
       className={cn(
-        'grid min-w-0 items-start',
-        'group-data-[orientation=vertical]/detail-group:grid-cols-1',
-        !splitHorizontalField &&
-          'group-data-[orientation=horizontal]/detail-group:grid-cols-[minmax(0,var(--detail-label-width))_minmax(0,1fr)] group-data-[orientation=horizontal]/detail-group:items-baseline group-data-[orientation=horizontal]/detail-group:gap-x-3',
-        splitHorizontalField && 'items-stretch gap-x-0',
-        'group-data-[orientation=vertical]/detail-group:gap-y-1',
-        'group-data-[dividers=true]/detail-group:outline group-data-[dividers=true]/detail-group:outline-1 group-data-[dividers=true]/detail-group:outline-border',
-        'group-data-[variant=framed]/detail-group:bg-transparent group-data-[variant=framed]/detail-group:text-foreground',
+        "grid min-w-0 items-start",
+        "group-data-[orientation=vertical]/detail-group:grid-cols-1",
+        !dividedHorizontalField &&
+          "group-data-[orientation=horizontal]/detail-group:grid-cols-[minmax(0,var(--detail-label-width))_minmax(0,1fr)] group-data-[orientation=horizontal]/detail-group:items-baseline group-data-[orientation=horizontal]/detail-group:gap-x-3",
+        dividedHorizontalField && "items-stretch gap-x-0",
+        "group-data-[orientation=vertical]/detail-group:gap-y-1",
+        "group-data-[dividers=true]/detail-group:outline group-data-[dividers=true]/detail-group:outline-1 group-data-[dividers=true]/detail-group:outline-border",
+        "group-data-[variant=framed]/detail-group:bg-transparent group-data-[variant=framed]/detail-group:text-foreground",
         className,
       )}
       style={
-        splitHorizontalField
+        dividedHorizontalField
           ? {
-              gridTemplateColumns: 'minmax(0, var(--detail-label-width)) minmax(0, 1fr)',
+              gridTemplateColumns:
+                "minmax(0, var(--detail-label-width)) minmax(0, 1fr)",
               ...style,
             }
           : style
@@ -128,8 +134,8 @@ function DetailField({
       <dt
         data-slot="detail-field-label"
         className={cn(
-          'flex items-center gap-1.5 text-sm leading-snug font-medium text-muted-foreground',
-          splitHorizontalField && 'bg-muted/30 p-3 dark:bg-input/30',
+          "flex items-center gap-1.5 text-sm leading-snug font-medium text-muted-foreground",
+          dividedHorizontalField && "bg-muted/30 p-3 dark:bg-input/30",
         )}
       >
         {icon !== undefined && (
@@ -146,14 +152,14 @@ function DetailField({
       <dd
         data-slot="detail-field-value"
         className={cn(
-          'min-w-0 text-sm leading-snug font-normal',
-          splitHorizontalField && 'flex items-center p-3',
+          "min-w-0 text-sm leading-snug font-normal",
+          dividedHorizontalField && "flex items-center p-3",
         )}
       >
         {content}
       </dd>
     </div>
-  )
+  );
 }
 
-export { DetailGroup, DetailField }
+export { DetailGroup, DetailField };

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

@@ -18,10 +18,7 @@ import {
   SurfaceMedia,
   type SurfaceMediaProps,
 } from "../patterns/surface-media.tsx";
-import {
-  CloseButton,
-  type CloseButtonSize,
-} from "./close-button.tsx";
+import { CloseButton, type CloseButtonSize } from "./close-button.tsx";
 
 export type DialogMode = "default" | "alert";
 
@@ -349,7 +346,10 @@ export function DialogHeader({
 }
 
 /** Região introdutória do header — o voltar de um fluxo modal encadeado. */
-export function DialogNavigation({ className, ...props }: React.ComponentProps<"div">) {
+export function DialogNavigation({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-navigation-content"
@@ -412,11 +412,7 @@ export function DialogBody({
             ),
         className,
       )}
-      style={
-        mode === "alert"
-          ? style
-          : ({ "--opus-inline-gutter": "1rem", ...style } as React.CSSProperties)
-      }
+      style={style}
       {...props}
     />
   );
@@ -456,7 +452,8 @@ export function DialogTitle({
 }) {
   const { mode } = useDialogContext();
   const layout = useSurfaceLayout("dialog");
-  const Title = mode === "alert" ? AlertDialogPrimitive.Title : DialogPrimitive.Title;
+  const Title =
+    mode === "alert" ? AlertDialogPrimitive.Title : DialogPrimitive.Title;
   const classes = cn(
     mode === "alert" ? undefined : "min-w-0 truncate",
     surfaceTitleClasses("dialog", layout),