@softize/opus 12.10.0 → 13.0.0

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

@@ -1,72 +1,115 @@
 import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
+
+import type { UiContext } from '../../../core/ui-context.ts'
 import { cn } from '../../lib/cn.ts'
 import type { ControlShape } 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 LegacyButtonVariant = 'default' | 'secondary' | 'destructive'
+export type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-xs'
+
+export interface ButtonStyleOptions {
+  context?: ButtonContext | null
+  variant?: ButtonVariant | LegacyButtonVariant | 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 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 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 [&_svg:not([class*=size-])]:size-4'
+
+const sizeClasses: Record<ButtonSize, string> = {
+  default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+  sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
+  lg: 'h-10 px-6 has-[>svg]:px-4',
+  icon: 'size-9',
+  'icon-sm': 'size-8',
+  'icon-xs': 'size-6',
+}
+
+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',
+}
+
+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',
+}
+
+const outlineClasses: Record<ButtonContext, string> = {
+  neutral: 'border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
+  primary: 'border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
+  danger: 'border border-context-danger-border bg-background 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',
+}
+
+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',
+}
+
+export function resolveButtonStyle({ context, variant }: ButtonStyleOptions = {}): {
+  context: ButtonContext
+  variant: ButtonVariant
+} {
+  const legacy = variant === 'default' || variant === 'secondary' || variant === 'destructive'
+  if (context != null && legacy) {
+    throw new Error('Button não permite combinar context com uma variante semântica legada.')
+  }
+  if (variant === 'default') return { context: 'primary', variant: 'solid' }
+  if (variant === 'secondary') return { context: 'neutral', variant: 'solid' }
+  if (variant === 'destructive') return { context: 'danger', variant: 'solid' }
+  return { context: context ?? 'primary', variant: variant ?? 'solid' }
+}
+
 /**
- * Variantes do button (cva). Exportadas pra compor com asChild (ex.: estilizar um
- * <a> com a cara de botão: `<a className={buttonVariants({ variant: 'outline' })}>`).
- * `active:brightness-90` é toque da casa (feedback de clique) — fora do shadcn de propósito.
- * Era `active:scale-95`, mas press GEOMÉTRICO move o rect do gatilho e todo popover
- * ancorado persegue a âncora durante a transição (a "dançada" do menu).
+ * Classes do Button. `context` seleciona a família semântica e `variant` seleciona
+ * o tratamento visual. `default`, `secondary` e `destructive` são aliases temporários.
  */
-export const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 active:brightness-90 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        // Ícone na escala `sm` (2rem) — o par do `sm` para fileiras densas, onde os irmãos
-        // também usam `sm`. Sem ele, um botão de ícone ao lado desses controles ficava
-        // 0.25rem mais alto ou virava override local.
-        'icon-sm': 'size-8',
-        // Ícone menor (1.5rem) — a ação dentro de um campo (clear/mostrar senha no
-        // `trailing` do Input/Select), que precisa caber folgado num h-9. É o mesmo tamanho
-        // do `icon-xs` do InputGroupButton; sem ele, o exemplo virava `className="size-6"`.
-        'icon-xs': 'size-6',
-      },
-      shape: {
-        default: '',
-        pill: 'rounded-full',
-      },
-    },
-    defaultVariants: { variant: 'default', size: 'default', shape: 'default' },
-  },
-)
+export function buttonVariants(options: ButtonStyleOptions = {}): string {
+  const resolved = resolveButtonStyle(options)
+  const variantClasses =
+    resolved.variant === 'solid'
+      ? solidClasses[resolved.context]
+      : resolved.variant === 'subtle'
+        ? subtleClasses[resolved.context]
+        : resolved.variant === 'outline'
+          ? outlineClasses[resolved.context]
+          : resolved.variant === 'ghost'
+            ? ghostClasses[resolved.context]
+            : linkClasses[resolved.context]
+  return cn(
+    baseClasses,
+    variantClasses,
+    sizeClasses[options.size ?? 'default'],
+    options.shape === 'pill' && 'rounded-full',
+  )
+}
 
-export interface ButtonProps
-  extends React.ComponentProps<'button'>,
-    VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends React.ComponentProps<'button'>, ButtonStyleOptions {
   /** Renderiza como o filho (Radix Slot) em vez de <button> — recompõe sem forkar. */
   asChild?: boolean
-  /** Estado "processando": ação em andamento DEPOIS do clique (submit, request) — mostra
-   *  Spinner à esquerda e desabilita. NÃO é "carregando" (ANTES: conteúdo ainda não chegou
-   *  → Spinner centralizado/Skeleton num nível de página, não no botão). Ignorado com asChild. */
+  /** Estado de ação em andamento; mostra Spinner e desabilita o controle. */
   busy?: boolean
-  /** Ícone à esquerda do texto (o componente, ex.: `icon={Plus}`). No `busy` é TROCADO
-   *  pelo Spinner — não soma (evita ícone + spinner juntos). Ignorado com asChild. */
+  /** Ícone à esquerda. No `busy`, o Spinner ocupa o mesmo espaço. */
   icon?: React.ElementType
-  /** Geometria do controle; `pill` não altera cor nem hierarquia da variante. */
-  shape?: ControlShape
 }
 
 export function Button({
   className,
+  context,
   variant,
   size,
   shape,
@@ -78,13 +121,14 @@ export function Button({
   ...props
 }: ButtonProps): React.ReactElement {
   const Comp = asChild ? Slot : 'button'
+  const resolved = resolveButtonStyle({ context, variant })
   const iconSize = size === 'sm' ? 'size-3' : 'size-4'
-  // busy implica disabled; o feedback visual vem do disabled:opacity-50 da cva. O slot
-  // à esquerda é UM só: Spinner no busy, senão o ícone (icon e spinner nunca somam).
   return (
     <Comp
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, shape }), className)}
+      data-context={resolved.context}
+      data-variant={resolved.variant}
+      className={cn(buttonVariants({ ...resolved, size, shape }), className)}
       disabled={disabled || busy}
       {...props}
     >
@@ -103,8 +147,3 @@ export function Button({
     </Comp>
   )
 }
-
-/**
- * Metadado de descoberta — lido pelo manifesto/MCP em build-time (não vai pro runtime;
- * o barrel não re-exporta `meta`). Escrever o componente já o documenta.
- */

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

@@ -1,17 +1,17 @@
-import * as React from "react"
+import * as React from "react";
 import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-} from "lucide-react"
+} from "lucide-react";
 import {
   DayPicker,
   getDefaultClassNames,
   type DayButton,
-} from "react-day-picker"
+} from "react-day-picker";
 
-import { cn } from '../../lib/cn.ts'
-import { Button, buttonVariants } from './button.tsx'
+import { cn } from "../../lib/cn.ts";
+import { Button, buttonVariants } from "./button.tsx";
 
 function Calendar({
   className,
@@ -23,18 +23,18 @@ function Calendar({
   components,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-body]_&]:bg-transparent [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
+        className,
       )}
       captionLayout={captionLayout}
       formatters={{
@@ -46,85 +46,85 @@ function Calendar({
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
           "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
+          defaultClassNames.months,
         ),
         month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
           "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
+          defaultClassNames.nav,
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
-          defaultClassNames.button_previous
+          defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
-          defaultClassNames.button_next
+          defaultClassNames.button_next,
         ),
         month_caption: cn(
           "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
-          defaultClassNames.month_caption
+          defaultClassNames.month_caption,
         ),
         dropdowns: cn(
           "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
+          defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(
           "relative rounded-md border border-input has-focus:border-ring has-focus:ring-[0.1875rem] has-focus:ring-ring/50",
-          defaultClassNames.dropdown_root
+          defaultClassNames.dropdown_root,
         ),
         dropdown: cn(
           "absolute inset-0 bg-popover text-popover-foreground opacity-0",
-          defaultClassNames.dropdown
+          defaultClassNames.dropdown,
         ),
         caption_label: cn(
           "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
             : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
-          defaultClassNames.caption_label
+          defaultClassNames.caption_label,
         ),
         month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
           "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
-          defaultClassNames.weekday
+          defaultClassNames.weekday,
         ),
         week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
           "w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
+          defaultClassNames.week_number_header,
         ),
         week_number: cn(
           "text-[0.8rem] text-muted-foreground select-none",
-          defaultClassNames.week_number
+          defaultClassNames.week_number,
         ),
         day: cn(
           "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
             : "[&:first-child[data-selected=true]_button]:rounded-l-md",
-          defaultClassNames.day
+          defaultClassNames.day,
         ),
         range_start: cn(
           "rounded-l-md bg-accent",
-          defaultClassNames.range_start
+          defaultClassNames.range_start,
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
           "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
-          defaultClassNames.today
+          defaultClassNames.today,
         ),
         outside: cn(
           "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
+          defaultClassNames.outside,
         ),
         disabled: cn(
           "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
+          defaultClassNames.disabled,
         ),
         hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
@@ -138,13 +138,13 @@ function Calendar({
               className={cn(className)}
               {...props}
             />
-          )
+          );
         },
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
               <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
+            );
           }
 
           if (orientation === "right") {
@@ -153,12 +153,12 @@ function Calendar({
                 className={cn("size-4", className)}
                 {...props}
               />
-            )
+            );
           }
 
           return (
             <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+          );
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props }) => {
@@ -168,13 +168,13 @@ function Calendar({
                 {children}
               </div>
             </td>
-          )
+          );
         },
         ...components,
       }}
       {...props}
     />
-  )
+  );
 }
 
 function CalendarDayButton({
@@ -183,12 +183,12 @@ function CalendarDayButton({
   modifiers,
   ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
 
   return (
     <Button
@@ -208,11 +208,11 @@ function CalendarDayButton({
       className={cn(
         "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[0.1875rem] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };

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

@@ -1,56 +1,129 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cn } from '../../lib/cn.ts'
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/cn.ts";
 
 /**
  * Card — a superfície da casa: SÓ a casca (borda + raio + bg). Divergência DECLARADA vs
  * shadcn: FLAT (sem `shadow-sm`) e SEM `flex/gap/py` forçados. O upstream embute
  * `py-6 gap-6` + slots `px-6`, o que briga com card-box
  * simples (o `gap-6` do Card + o `space-y` do consumidor = espaçamento dobrado) — por isso
- * a casa hand-rollava. Aqui o padding mora no SLOT (Header/Content/Footer) ou no `className`
+ * a casa hand-rollava. Aqui o padding mora no SLOT (Header/Body/Footer) ou no `className`
  * do consumidor (box simples) — mesmo modelo do Dialog.
  *
  *   Box simples:   <Card className="p-4">…</Card>
- *   Estruturado:   <Card><CardHeader>…</CardHeader><CardContent>…</CardContent><CardFooter>…</CardFooter></Card>
+ *   Estruturado:   <Card><CardHeader>…</CardHeader><CardBody>…</CardBody><CardFooter>…</CardFooter></Card>
  */
 export function Card({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<'div'> & {
+}: React.ComponentProps<"div"> & {
   /** Renderiza como o filho (Radix Slot) — pra card CLICÁVEL manter a semântica do filho
    *  (ex.: <button>) com a superfície do Card: `<Card asChild><button onClick>…</button></Card>`. */
-  asChild?: boolean
+  asChild?: boolean;
 }): React.ReactElement {
-  const Comp = asChild ? Slot : 'div'
+  const Comp = asChild ? Slot : "div";
   return (
-    <Comp data-slot="card" className={cn('rounded-xl border border-border bg-card text-card-foreground', className)} {...props} />
-  )
+    <Comp
+      data-slot="card"
+      className={cn(
+        "rounded-xl border border-border bg-card text-card-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
-export function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
+export function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
   return (
-    <div data-slot="card-header" className={cn('flex flex-col gap-1.5 px-5 pt-5 pb-3', className)} {...props} />
-  )
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 px-5 pt-5 pb-3", className)}
+      {...props}
+    />
+  );
 }
 
-export function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
-  return <div data-slot="card-title" className={cn('font-semibold leading-none', className)} {...props} />
+export function CardTitle({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-semibold leading-none", className)}
+      {...props}
+    />
+  );
 }
 
-export function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
-  return <div data-slot="card-description" className={cn('text-sm text-muted-foreground', className)} {...props} />
+export function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
 }
 
 /** Slot de ação no header (botão/menu) — o consumidor posiciona (ex.: header em flex-row). */
-export function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
-  return <div data-slot="card-action" className={cn('shrink-0', className)} {...props} />
+export function CardAction({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("shrink-0", className)}
+      {...props}
+    />
+  );
 }
 
-export function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
-  return <div data-slot="card-content" className={cn('px-5 py-3', className)} {...props} />
+export function CardBody({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  return (
+    <div
+      data-slot="card-body"
+      className={cn("px-5 py-3", className)}
+      {...props}
+    />
+  );
 }
 
-export function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
-  return <div data-slot="card-footer" className={cn('flex items-center px-5 pt-3 pb-5', className)} {...props} />
+/** @deprecated Use CardBody. Mantido durante a versão 12 para migração gradual. */
+export function CardContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-5 py-3", className)}
+      {...props}
+    />
+  );
+}
+
+export function CardFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-5 pt-3 pb-5", className)}
+      {...props}
+    />
+  );
 }

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

@@ -41,7 +41,7 @@ function DetailGroup({
       data-dividers={dividers}
       data-orientation={orientation}
       className={cn(
-        'group/detail-group grid min-w-0',
+        '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',
@@ -88,7 +88,7 @@ function DetailField({
       data-slot="detail-field"
       className={cn(
         'grid min-w-0 items-start',
-        'group-data-[orientation=vertical]/detail-group:grid-cols-1 group-data-[orientation=horizontal]/detail-group:grid-cols-[minmax(0,auto)_minmax(0,1fr)]',
+        'group-data-[orientation=vertical]/detail-group:grid-cols-1 group-data-[orientation=horizontal]/detail-group:grid-cols-[minmax(0,var(--detail-label-width))_minmax(0,1fr)]',
         'group-data-[orientation=vertical]/detail-group:gap-y-1 group-data-[orientation=horizontal]/detail-group:items-baseline group-data-[orientation=horizontal]/detail-group:gap-x-3',
         '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-card group-data-[variant=framed]/detail-group:text-card-foreground',