@softize/opus 18.0.1 → 18.1.1

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

@@ -8,11 +8,11 @@ export type DetailGroupOrientation = 'vertical' | 'horizontal'
 export type DetailGroupColumns = 1 | 2 | 3 | 4 | 'auto'
 
 export interface DetailGroupProps extends React.ComponentProps<'dl'> {
-  /** `framed` aplica a superfície e a moldura canônicas ao conjunto. */
+  /** `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
-  /** Número responsivo de colunas ou distribuição automática por largura mínima. */
+  /** Número fixo de colunas ou distribuição automática por largura mínima. */
   columns?: DetailGroupColumns
   /** Organiza a chave sobre o valor ou ao lado dele em cada campo. */
   orientation?: DetailGroupOrientation
@@ -20,39 +20,57 @@ export interface DetailGroupProps extends React.ComponentProps<'dl'> {
 
 const columnClasses: Record<DetailGroupColumns, string> = {
   1: 'grid-cols-1',
-  2: 'grid-cols-1 sm:grid-cols-2',
-  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+  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,
+})
+
 function DetailGroup({
   className,
+  children,
+  style,
   variant = 'plain',
   dividers = false,
   columns = 1,
   orientation = 'vertical',
   ...props
 }: DetailGroupProps): React.ReactElement {
+  const splitHorizontalField = variant === 'framed' && orientation === 'horizontal'
+
   return (
-    <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]',
-        columnClasses[columns],
-        variant === 'plain' && !dividers && 'gap-x-6 gap-y-4',
-        dividers && 'gap-px overflow-hidden',
-        (variant === 'framed' || dividers) &&
-          '[&>[data-slot=detail-field]]:p-3',
-        variant === 'framed' &&
-          'overflow-hidden rounded-lg border border-border bg-card text-card-foreground',
-        className,
-      )}
-      {...props}
-    />
+    <DetailGroupLayoutContext.Provider value={{ splitHorizontalField }}>
+      <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]',
+          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',
+          // 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]',
+          className,
+        )}
+        style={style}
+        {...props}
+      >
+        {children}
+      </dl>
+    </DetailGroupLayoutContext.Provider>
   )
 }
 
@@ -62,7 +80,8 @@ export interface DetailFieldProps extends Omit<
 > {
   label: React.ReactNode
   /** `null`, `undefined`, string vazia ou só com espaços renderizam a ausência
-   *  (“Não informado” ou `empty`); `0` e `false` seguem como valores. */
+   *  como travessão; “Não informado” ou `empty` preservam o significado para
+   *  leitura assistiva. `0` e `false` seguem como valores. */
   value: React.ReactNode
   /** Ícone decorativo que identifica o campo antes do par chave/valor. */
   icon?: React.ReactNode
@@ -76,29 +95,45 @@ function DetailField({
   value,
   icon,
   empty,
+  style,
   ...props
 }: DetailFieldProps): React.ReactElement {
+  const { splitHorizontalField } = React.useContext(DetailGroupLayoutContext)
   const content = !isAbsentValue(value)
     ? value
     : empty === undefined || typeof empty === 'string'
-      ? <EmptyValue {...(empty !== undefined ? { label: empty } : {})} />
+      ? <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 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-[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-card group-data-[variant=framed]/detail-group:text-card-foreground',
+        'group-data-[variant=framed]/detail-group:bg-transparent group-data-[variant=framed]/detail-group:text-foreground',
         className,
       )}
+      style={
+        splitHorizontalField
+          ? {
+              gridTemplateColumns: 'minmax(0, var(--detail-label-width)) minmax(0, 1fr)',
+              ...style,
+            }
+          : style
+      }
       {...props}
     >
       <dt
         data-slot="detail-field-label"
-        className="flex items-center gap-2.5 text-xs leading-snug font-medium text-muted-foreground group-data-[orientation=horizontal]/detail-group:text-sm"
+        className={cn(
+          'flex items-center gap-2.5 text-xs leading-snug font-medium text-muted-foreground group-data-[orientation=horizontal]/detail-group:text-sm',
+          splitHorizontalField && 'bg-muted/30 p-3 dark:bg-input/30',
+        )}
       >
         {icon !== undefined && (
           <span
@@ -113,7 +148,10 @@ function DetailField({
       </dt>
       <dd
         data-slot="detail-field-value"
-        className="min-w-0 text-sm leading-snug font-normal"
+        className={cn(
+          'min-w-0 text-sm leading-snug font-normal',
+          splitHorizontalField && 'flex items-center p-3',
+        )}
       >
         {content}
       </dd>

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

@@ -1,9 +1,11 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
-import { XIcon } from "lucide-react";
 import { cn } from "../../lib/cn.ts";
-import { Button } from "./button.tsx";
+import {
+  CloseButton,
+  type CloseButtonSize,
+} from "./close-button.tsx";
 
 export type DialogMode = "default" | "alert";
 
@@ -19,11 +21,13 @@ const DialogContext = React.createContext<DialogContextValue>({
 interface DialogContentContextValue {
   showCloseButton: boolean;
   closeDisabled: boolean;
+  closeSize: CloseButtonSize;
 }
 
 const DialogContentContext = React.createContext<DialogContentContextValue>({
   showCloseButton: false,
   closeDisabled: false,
+  closeSize: "sm",
 });
 
 function useDialogContext(): DialogContextValue {
@@ -126,9 +130,9 @@ export function DialogClose({
   );
 }
 
-/** Véu compartilhado por Dialog e Drawer: mesmo escurecimento, desfoque e animação. */
+/** Véu compartilhado por Dialog e Drawer: mesmo escurecimento e animação. */
 export const overlayClasses =
-  "fixed inset-0 z-50 bg-black/30 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0";
+  "fixed inset-0 z-50 bg-black/30 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0";
 
 export function DialogOverlay({
   className,
@@ -151,18 +155,16 @@ export function DialogOverlay({
   );
 }
 
-function DialogCloseButton({ disabled = false }: { disabled?: boolean }) {
+function DialogCloseButton({
+  disabled = false,
+  size,
+}: {
+  disabled?: boolean;
+  size: CloseButtonSize;
+}) {
   return (
     <DialogPrimitive.Close data-slot="dialog-close" asChild>
-      <Button
-        type="button"
-        size="icon"
-        variant="ghost"
-        disabled={disabled}
-        aria-label="Fechar"
-      >
-        <XIcon aria-hidden />
-      </Button>
+      <CloseButton size={size} disabled={disabled} />
     </DialogPrimitive.Close>
   );
 }
@@ -172,6 +174,7 @@ export function DialogContent({
   children,
   showCloseButton,
   closeDisabled = false,
+  closeSize = "sm",
   "aria-describedby": ariaDescribedBy,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
@@ -179,11 +182,13 @@ export function DialogContent({
   showCloseButton?: boolean;
   /** Mantém a ação visível, mas impede fechar enquanto a superfície está bloqueada. */
   closeDisabled?: boolean;
+  /** Tamanho da ação circular de fechar no cabeçalho. */
+  closeSize?: CloseButtonSize;
 }) {
   const { mode } = useDialogContext();
   const showClose = showCloseButton ?? mode !== "alert";
   const contentClasses =
-    "fixed left-[50%] top-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-clip rounded-xl border border-border bg-background text-foreground shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95";
+    "fixed left-[50%] top-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-clip rounded-xl border border-transparent bg-background text-foreground shadow-xl duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 dark:border-border/70";
 
   if (mode === "alert") {
     return (
@@ -197,7 +202,11 @@ export function DialogContent({
           {...props}
         >
           <DialogContentContext.Provider
-            value={{ showCloseButton: false, closeDisabled: true }}
+            value={{
+              showCloseButton: false,
+              closeDisabled: true,
+              closeSize,
+            }}
           >
             {children}
           </DialogContentContext.Provider>
@@ -214,14 +223,14 @@ export function DialogContent({
         data-mode="default"
         className={cn(
           contentClasses,
-          "flex max-h-[85vh] flex-col sm:max-w-lg",
+          "flex max-h-[85vh] max-w-lg flex-col",
           className,
         )}
         aria-describedby={ariaDescribedBy}
         {...props}
       >
         <DialogContentContext.Provider
-          value={{ showCloseButton: showClose, closeDisabled }}
+          value={{ showCloseButton: showClose, closeDisabled, closeSize }}
         >
           {children}
         </DialogContentContext.Provider>
@@ -236,7 +245,7 @@ export function DialogHeader({
   ...props
 }: React.ComponentProps<"div">) {
   const { mode } = useDialogContext();
-  const { showCloseButton, closeDisabled } =
+  const { showCloseButton, closeDisabled, closeSize } =
     React.useContext(DialogContentContext);
   return (
     <div
@@ -251,7 +260,7 @@ export function DialogHeader({
     >
       {children}
       {mode !== "alert" && showCloseButton && (
-        <DialogCloseButton disabled={closeDisabled} />
+        <DialogCloseButton disabled={closeDisabled} size={closeSize} />
       )}
     </div>
   );
@@ -275,6 +284,7 @@ export function DialogMedia({
 
 export function DialogBody({
   className,
+  style,
   ...props
 }: React.ComponentProps<"div">) {
   const { mode } = useDialogContext();
@@ -285,6 +295,11 @@ export function DialogBody({
         mode === "alert" ? "min-w-0" : "min-h-0 flex-1 overflow-y-auto p-4",
         className,
       )}
+      style={
+        mode === "alert"
+          ? style
+          : ({ "--opus-inline-gutter": "1rem", ...style } as React.CSSProperties)
+      }
       {...props}
     />
   );
@@ -301,7 +316,7 @@ export function DialogFooter({
       className={cn(
         mode === "alert"
           ? "w-full"
-          : "flex shrink-0 flex-col-reverse gap-2 border-t p-4 sm:flex-row sm:justify-end",
+          : "flex shrink-0 flex-row justify-end gap-2 border-t bg-muted/20 p-4 dark:bg-input/20",
         className,
       )}
       {...props}

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

@@ -1,19 +1,23 @@
 import * as React from "react";
-import { XIcon } from "lucide-react";
 import { Dialog as DrawerPrimitive } from "radix-ui";
 
 import { cn } from "../../lib/cn.ts";
-import { Button } from "./button.tsx";
+import {
+  CloseButton,
+  type CloseButtonSize,
+} from "./close-button.tsx";
 import { overlayClasses } from "./dialog.tsx";
 
 interface DrawerContentContextValue {
   showCloseButton: boolean;
   closeDisabled: boolean;
+  closeSize: CloseButtonSize;
 }
 
 const DrawerContentContext = React.createContext<DrawerContentContextValue>({
   showCloseButton: false,
   closeDisabled: false,
+  closeSize: "sm",
 });
 
 function Drawer({
@@ -53,18 +57,16 @@ function DrawerOverlay({
   );
 }
 
-function DrawerCloseButton({ disabled = false }: { disabled?: boolean }) {
+function DrawerCloseButton({
+  disabled = false,
+  size,
+}: {
+  disabled?: boolean;
+  size: CloseButtonSize;
+}) {
   return (
     <DrawerPrimitive.Close data-slot="drawer-close" asChild>
-      <Button
-        type="button"
-        size="icon"
-        variant="ghost"
-        disabled={disabled}
-        aria-label="Fechar"
-      >
-        <XIcon aria-hidden />
-      </Button>
+      <CloseButton size={size} disabled={disabled} />
     </DrawerPrimitive.Close>
   );
 }
@@ -75,12 +77,14 @@ function DrawerContent({
   side = "right",
   showCloseButton = true,
   closeDisabled = false,
+  closeSize = "sm",
   "aria-describedby": ariaDescribedBy,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left";
   showCloseButton?: boolean;
   closeDisabled?: boolean;
+  closeSize?: CloseButtonSize;
 }) {
   return (
     <DrawerPortal>
@@ -90,9 +94,9 @@ function DrawerContent({
         className={cn(
           "fixed z-50 flex flex-col bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
           side === "right" &&
-            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+            "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
           side === "left" &&
-            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+            "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
           side === "top" &&
             "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
           side === "bottom" &&
@@ -103,7 +107,7 @@ function DrawerContent({
         {...props}
       >
         <DrawerContentContext.Provider
-          value={{ showCloseButton, closeDisabled }}
+          value={{ showCloseButton, closeDisabled, closeSize }}
         >
           {children}
         </DrawerContentContext.Provider>
@@ -117,7 +121,7 @@ function DrawerHeader({
   children,
   ...props
 }: React.ComponentProps<"div">) {
-  const { showCloseButton, closeDisabled } =
+  const { showCloseButton, closeDisabled, closeSize } =
     React.useContext(DrawerContentContext);
   return (
     <div
@@ -126,16 +130,19 @@ function DrawerHeader({
       {...props}
     >
       {children}
-      {showCloseButton && <DrawerCloseButton disabled={closeDisabled} />}
+      {showCloseButton && (
+        <DrawerCloseButton disabled={closeDisabled} size={closeSize} />
+      )}
     </div>
   );
 }
 
-function DrawerBody({ className, ...props }: React.ComponentProps<"div">) {
+function DrawerBody({ className, style, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-body"
       className={cn("min-h-0 flex-1 overflow-y-auto p-4", className)}
+      style={{ "--opus-inline-gutter": "1rem", ...style } as React.CSSProperties}
       {...props}
     />
   );
@@ -146,7 +153,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="drawer-footer"
       className={cn(
-        "mt-auto flex shrink-0 flex-col-reverse gap-2 border-t p-4 sm:flex-row sm:justify-end",
+        "mt-auto flex shrink-0 flex-row justify-end gap-2 border-t p-4",
         className,
       )}
       {...props}

package/src/ui/components/primitives/empty-value.tsx

@@ -19,9 +19,9 @@ export interface EmptyValueProps extends Omit<React.ComponentProps<'span'>, 'chi
 }
 
 /**
- * Representação padrão de valor ausente. Em texto corrido (DetailField) o rótulo aparece;
- * em célula compacta (`compact`, o default das colunas de ActionList) aparece o travessão
- * e o rótulo vai para o leitor de tela. Um domínio troca o rótulo por `label`
+ * Representação padrão de valor ausente. Sem `compact`, o rótulo aparece; com `compact`
+ * — o default das colunas de ActionList e de DetailField — aparece o travessão e o rótulo
+ * vai para o leitor de tela. Um domínio troca o rótulo por `label`
  * (“Nunca enviado”, “Sem vencimento”, “Não se aplica”) em vez de repetir a condicional.
  */
 export function EmptyValue({

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

@@ -7,7 +7,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="empty"
       className={cn(
-        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border border-dashed border-border p-6 text-center text-balance md:p-12",
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border border-dashed border-border p-12 text-center text-balance",
         className
       )}
       {...props}

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

@@ -44,7 +44,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-group"
       className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        "group/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
         className
       )}
       {...props}
@@ -52,22 +52,22 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
+const horizontalFieldClasses = [
+  "flex-row items-center gap-3",
+  "[&>[data-slot=field-label]]:flex-auto",
+  "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+];
+
 const fieldVariants = cva(
   "group/field flex w-full data-[invalid=true]:text-context-danger-emphasis",
   {
     variants: {
       orientation: {
         vertical: ["flex-col gap-1.5 [&>*]:w-full [&>.sr-only]:w-auto"],
-        horizontal: [
-          "flex-row items-center gap-3",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-        responsive: [
-          "flex-col gap-1.5 @md/field-group:flex-row @md/field-group:items-center @md/field-group:gap-3 [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
+        horizontal: horizontalFieldClasses,
+        // Compatibilidade da série 18: sem breakpoints, `responsive` resolve para o
+        // mesmo layout desktop da orientação horizontal.
+        responsive: horizontalFieldClasses,
       },
     },
     defaultVariants: {
@@ -113,7 +113,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 text-xs leading-snug font-medium text-muted-foreground group-data-[invalid=true]/field:text-context-danger-emphasis group-data-[disabled=true]/field:opacity-50",
+        "group/field-label peer/field-label flex w-fit gap-2 text-sm leading-snug font-medium text-muted-foreground group-data-[invalid=true]/field:text-context-danger-emphasis group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
         "has-[>[data-slot=field]]:has-data-[state=checked]:border-primary has-[>[data-slot=field]]:has-data-[state=checked]:bg-primary/5 dark:has-[>[data-slot=field]]:has-data-[state=checked]:bg-primary/10",
         className

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

@@ -142,7 +142,7 @@ export function IconPicker({
           aria-describedby={ariaDescribedBy}
           data-slot="icon-picker"
           className={cn(
-            'flex h-10 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+            'flex h-10 w-full items-center gap-2 rounded-md border border-input bg-muted/30 px-3 text-sm outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
             focusRing,
             className,
           )}

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

@@ -14,7 +14,7 @@ function InputGroup({ className, shape = 'default', ...props }: React.ComponentP
       data-shape={shape}
       role="group"
       className={cn(
-        "group/input-group relative flex w-full items-center rounded-md border border-input transition-[color,box-shadow] outline-none data-[shape=pill]:rounded-full dark:bg-input/30",
+        "group/input-group relative flex w-full items-center rounded-md border border-input bg-muted/30 transition-[color,box-shadow] outline-none data-[shape=pill]:rounded-full dark:bg-input/30",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
         // Variants based on alignment.

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

@@ -14,7 +14,7 @@ export interface InputProps extends React.ComponentProps<"input"> {
 
 // O <input> CRU (sem adorno): ELE é o campo — borda, foco, ref e className moram nele.
 const bareInput =
-  "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40"
+  "h-9 w-full min-w-0 rounded-md border border-input bg-muted/30 px-3 py-1 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40"
 
 function Input({ className, type, icon, trailing, ...props }: InputProps) {
   // Sem adorno: o <input> cru de sempre — retrocompatível (refs, forms, InputGroupInput).
@@ -31,7 +31,7 @@ function Input({ className, type, icon, trailing, ...props }: InputProps) {
     <div
       data-slot="input-wrapper"
       className={cn(
-        "flex h-9 w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-transparent px-3 text-base transition-[color,box-shadow] outline-none md:text-sm dark:bg-input/30",
+        "flex h-9 w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-muted/30 px-3 text-sm transition-[color,box-shadow] outline-none dark:bg-input/30",
         "has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-[0.1875rem] has-[input:focus-visible]:ring-ring/50",
         "has-[input[aria-invalid=true]]:border-context-danger has-[input[aria-invalid=true]]:ring-context-danger/20 dark:has-[input[aria-invalid=true]]:ring-context-danger/40",
         "has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50",

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

@@ -7,7 +7,7 @@ import type { ControlSize } from "./control.ts";
 import { Separator } from "./separator.tsx";
 
 const itemGroupVariants = cva(
-  "group/item-group @container/item-group flex flex-col",
+  "group/item-group flex flex-col",
   {
     variants: {
       variant: {
@@ -75,8 +75,8 @@ const itemVariants = cva(
       },
       // Nomes da escala de control.ts; a linha não tem altura fixa, `sm` aperta o respiro.
       size: {
-        default: "gap-4 p-4",
-        sm: "gap-2.5 px-4 py-3",
+        default: "gap-3 p-3",
+        sm: "gap-2.5 px-3 py-2",
       } satisfies Partial<Record<ControlSize, string>>,
     },
     defaultVariants: { variant: "default", size: "default" },
@@ -223,7 +223,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="item-title"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        "flex w-fit items-center gap-2 leading-snug font-medium",
         className,
       )}
       {...props}
@@ -241,7 +241,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="item-description"
       className={cn(
-        "line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        "line-clamp-2 leading-normal font-normal text-balance text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className,
       )}
       {...props}

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

@@ -104,11 +104,11 @@ function PaginationPrevious({
     <PaginationLink
       aria-label={label}
       size={size ?? (iconOnly ? 'icon' : 'default')}
-      className={cn(!iconOnly && 'gap-1 px-2.5 sm:pl-2.5', className)}
+      className={cn(!iconOnly && 'gap-1 px-2.5 pl-2.5', className)}
       {...props}
     >
       <ChevronLeftIcon className={iconClassName} />
-      {!iconOnly && <span className="hidden sm:block">{label}</span>}
+      {!iconOnly && <span>{label}</span>}
     </PaginationLink>
   )
 }
@@ -125,10 +125,10 @@ function PaginationNext({
     <PaginationLink
       aria-label={label}
       size={size ?? (iconOnly ? 'icon' : 'default')}
-      className={cn(!iconOnly && 'gap-1 px-2.5 sm:pr-2.5', className)}
+      className={cn(!iconOnly && 'gap-1 px-2.5 pr-2.5', className)}
       {...props}
     >
-      {!iconOnly && <span className="hidden sm:block">{label}</span>}
+      {!iconOnly && <span>{label}</span>}
       <ChevronRightIcon className={iconClassName} />
     </PaginationLink>
   )

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

@@ -25,7 +25,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:bg-input/30 dark:aria-invalid:ring-context-danger/40",
+        "peer aspect-square size-4 shrink-0 rounded-full border border-input text-primary transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:bg-input/30 dark:aria-invalid:ring-context-danger/40",
         className
       )}
       {...props}