@softize/opus 8.9.1 → 9.0.0

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

@@ -54,7 +54,7 @@ export function DialogContent({
           // Superfície PURA: só a casca (borda/bg/raio/sombra) + coluna flex com teto de
           // altura. O padding mora nos SLOTS (Header/Body/Footer), não aqui — assim ninguém
           // precisa negar margem pra escapar de um p-6 embutido.
-          "fixed left-[50%] top-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-dialog bg-card ring-1 ring-edge shadow-dialog 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 sm:max-w-lg",
+          "fixed left-[50%] top-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-dialog border border-border bg-card 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 sm:max-w-lg",
           className,
         )}
         {...props}

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

@@ -58,7 +58,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-dialog transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          "fixed z-50 flex flex-col gap-4 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",
           side === "left" &&

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

@@ -2,17 +2,19 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from '../../lib/cn.ts'
+import type { ControlShape } from './control.ts'
 import { Button } from './button.tsx'
 import { Input } from './input.tsx'
 import { Textarea } from './textarea.tsx'
 
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+function InputGroup({ className, shape = 'default', ...props }: React.ComponentProps<"div"> & { shape?: ControlShape }) {
   return (
     <div
       data-slot="input-group"
+      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 dark:bg-input/30",
+        "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",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
         // Variants based on alignment.

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

@@ -45,7 +45,7 @@ function MenuContent({
         data-slot="menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-popover bg-popover p-1 text-popover-foreground ring-1 ring-edge shadow-popover will-change-[transform,opacity] 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",
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-popover border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] 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",
           className
         )}
         {...props}
@@ -233,7 +233,7 @@ function MenuSubContent({
     <MenuPrimitive.SubContent
       data-slot="menu-sub-content"
       className={cn(
-        "z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-popover bg-popover p-1 text-popover-foreground ring-1 ring-edge shadow-popover will-change-[transform,opacity] 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",
+        "z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-popover border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] 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",
         className
       )}
       {...props}

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

@@ -34,7 +34,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-popover bg-popover p-4 text-popover-foreground ring-1 ring-edge shadow-popover outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-popover border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
           className
         )}
         {...props}

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

@@ -25,6 +25,7 @@ import { Check, ChevronDownIcon, SearchIcon, X } from 'lucide-react'
 import { Command as CommandPrimitive } from 'cmdk'
 
 import { cn } from '../../lib/cn.ts'
+import type { ControlShape } from './control.ts'
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from './command.tsx'
 import { Popover, PopoverAnchor, PopoverContent } from './popover.tsx'
 
@@ -57,6 +58,8 @@ interface SelectBaseProps {
   icon?: React.ReactNode
   /** Altura: `default` (h-9, a do Input/Button) ou `sm` (h-8) pra toolbar densa. */
   size?: 'sm' | 'default'
+  /** Geometria do controle; `pill` preserva a variante visual escolhida. */
+  shape?: ControlShape
   'aria-label'?: string
 }
 
@@ -84,8 +87,8 @@ interface SelectCustomBase extends SelectBaseProps {
   loading?: boolean
   /** X no campo quando há seleção — limpa num clique. Bom em filtro. */
   clearable?: boolean
-  /** `ghost`: sem borda nem fundo, discreto — o seletor da barra do composer. */
-  variant?: 'default' | 'ghost'
+  /** `outline`: compacto com borda; `ghost`: compacto sem borda nem fundo. */
+  variant?: 'default' | 'outline' | 'ghost'
   /** Placeholder enquanto se digita a busca (cai pro `placeholder`). */
   searchPlaceholder?: string
   emptyText?: string
@@ -123,6 +126,7 @@ function NativeSelect({
   id,
   icon,
   size = 'default',
+  shape = 'default',
   value,
   onChange,
   ...rest
@@ -142,13 +146,14 @@ function NativeSelect({
       <select
         data-slot="select"
         data-size={size}
+        data-shape={shape}
         id={id}
         disabled={disabled}
         value={value}
         aria-label={rest['aria-label']}
         onChange={(e) => onChange(e.target.value)}
         className={cn(
-          "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50",
+          "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 data-[shape=pill]:rounded-full dark:bg-input/30 dark:hover:bg-input/50",
           'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
           'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
           icon ? 'pl-9' : '',
@@ -199,6 +204,7 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
     id,
     icon,
     size = 'default',
+    shape = 'default',
     searchable = false,
     onSearch,
     loading,
@@ -285,6 +291,8 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
   }
 
   const ghost = variant === 'ghost'
+  const outline = variant === 'outline'
+  const compact = ghost || outline
 
   /**
    * O GATILHO nunca é caixa de busca — em nenhum modo.
@@ -326,12 +334,13 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
         setOpen(v)
       }}
     >
-      <div ref={rootRef} data-slot="select" className={cn(ghost ? 'min-w-0' : 'min-w-40', className)}>
+      <div ref={rootRef} data-slot="select" data-shape={shape} className={cn(compact ? 'w-fit max-w-full min-w-0' : 'min-w-40', shape === 'pill' && 'rounded-full', className)}>
         <CommandPrimitive data-slot="select-command" shouldFilter={canSearch && onSearch === undefined} className="overflow-visible">
           <PopoverAnchor asChild>
             <div
               data-slot="select-control"
               data-size={size}
+              data-shape={shape}
               data-variant={variant}
               onClick={() => {
                 if (disabled !== true) {
@@ -340,10 +349,12 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                 }
               }}
               className={cn(
-                'flex items-center gap-1.5 rounded-md outline-none transition-[color,box-shadow]',
+                'flex items-center gap-1.5 rounded-md outline-none transition-[color,box-shadow] data-[shape=pill]:rounded-full',
                 ghost
-                  ? 'min-h-7 px-1.5 py-1 text-muted-foreground hover:bg-muted hover:text-foreground focus-within:ring-2 focus-within:ring-ring/50'
-                  : "min-h-9 flex-wrap border border-input bg-transparent px-3 py-1 focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=sm]:min-h-8 data-[size=sm]:py-0.5 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+                  ? 'min-h-9 px-3 py-1 text-muted-foreground hover:bg-muted hover:text-foreground focus-within:ring-2 focus-within:ring-ring/50 data-[size=sm]:min-h-8 data-[size=sm]:px-2'
+                  : "min-h-9 border border-input bg-transparent px-3 py-1 focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=sm]:min-h-8 data-[size=sm]:py-0.5 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+                variant === 'default' && 'flex-wrap',
+                outline && 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-input/50',
                 "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
                 canSearch ? '' : 'cursor-pointer',
                 disabled === true && 'cursor-not-allowed opacity-50',
@@ -383,7 +394,14 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                   o gatilho ficaria em branco (o input que carregava o placeholder virou
                   invisível). Campo mudo é pior que campo vazio: não diz nem o que é. */}
               {(!props.multiple || selectedValues.length === 0) && (
-                <span data-slot="select-trigger-label" className={cn('min-w-0 flex-1 truncate text-left text-sm', selectedOption === undefined && 'text-muted-foreground')}>
+                <span
+                  data-slot="select-trigger-label"
+                  className={cn(
+                    'min-w-0 truncate text-left text-sm',
+                    compact ? 'flex-initial' : 'flex-1',
+                    selectedOption === undefined && 'text-muted-foreground',
+                  )}
+                >
                   {props.multiple ? placeholder : (selectedOption?.triggerLabel ?? selectedOption?.label ?? placeholder)}
                 </span>
               )}
@@ -473,7 +491,7 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
             // título inteiro.
             className={cn(
               'pointer-events-auto overflow-hidden p-0',
-              ghost ? 'w-auto min-w-56 max-w-80' : 'w-(--radix-popover-trigger-width) min-w-40',
+              compact ? 'w-auto min-w-56 max-w-80' : 'w-(--radix-popover-trigger-width) min-w-40',
             )}
             /*
              * O foco ao abrir é SEMPRE nosso — o Radix nunca mexe.

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

@@ -34,9 +34,10 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  // Altura: horizontal segue o size (h-9 default / h-8 sm — combina `data-[size]` da PRÓPRIA
-  // list com o `group-data-[orientation]` do ancestral); vertical é h-fit em qualquer size.
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:data-[size=default]:h-9 group-data-[orientation=horizontal]/tabs:data-[size=sm]:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  // A altura horizontal entra como classe simples no componente (abaixo), para que um
+  // `className="h-full"` do consumidor consiga substituí-la via tailwind-merge. Seletores
+  // condicionais por data-size têm especificidade maior e tornavam a altura inextensível.
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none data-[variant=line]:p-0",
   {
     variants: {
       variant: {
@@ -63,7 +64,7 @@ function TabsList({
       data-slot="tabs-list"
       data-variant={variant}
       data-size={size}
-      className={cn(tabsListVariants({ variant }), className)}
+      className={cn(tabsListVariants({ variant }), size === "sm" ? "h-8" : "h-9", className)}
       {...props}
     />
   )
@@ -80,7 +81,7 @@ function TabsTrigger({
         "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-1px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
         className
       )}
       {...props}

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

@@ -3,16 +3,19 @@ import { type VariantProps } from "class-variance-authority"
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
 
 import { cn } from '../../lib/cn.ts'
+import type { ControlShape } from './control.ts'
 import { toggleVariants } from './toggle.tsx'
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants> & {
     spacing?: number
+    shape?: ControlShape
   }
 >({
   size: "default",
   variant: "default",
   spacing: 0,
+  shape: "default",
 })
 
 function ToggleGroup({
@@ -20,11 +23,13 @@ function ToggleGroup({
   variant,
   size,
   spacing = 0,
+  shape = "default",
   children,
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
   VariantProps<typeof toggleVariants> & {
     spacing?: number
+    shape?: ControlShape
   }) {
   return (
     <ToggleGroupPrimitive.Root
@@ -32,14 +37,15 @@ function ToggleGroup({
       data-variant={variant}
       data-size={size}
       data-spacing={spacing}
+      data-shape={shape}
       style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md",
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[shape=pill]:rounded-full",
         className
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+      <ToggleGroupContext.Provider value={{ variant, size, spacing, shape }}>
         {children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
@@ -51,6 +57,7 @@ function ToggleGroupItem({
   children,
   variant,
   size,
+  shape,
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
   VariantProps<typeof toggleVariants>) {
@@ -62,13 +69,17 @@ function ToggleGroupItem({
       data-variant={context.variant || variant}
       data-size={context.size || size}
       data-spacing={context.spacing}
+      data-item-shape={shape}
       className={cn(
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
+          shape: shape ?? context.shape,
         }),
         "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
         "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        "group-data-[shape=pill]/toggle-group:data-[spacing=0]:first:rounded-l-full group-data-[shape=pill]/toggle-group:data-[spacing=0]:last:rounded-r-full",
+        "data-[item-shape=pill]:data-[spacing=0]:rounded-full",
         className
       )}
       {...props}

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

@@ -18,10 +18,15 @@ const toggleVariants = cva(
         sm: "h-8 min-w-8 px-1.5",
         lg: "h-10 min-w-10 px-2.5",
       },
+      shape: {
+        default: '',
+        pill: 'rounded-full',
+      },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
+      shape: "default",
     },
   }
 )
@@ -30,13 +35,15 @@ function Toggle({
   className,
   variant,
   size,
+  shape,
   ...props
 }: React.ComponentProps<typeof TogglePrimitive.Root> &
   VariantProps<typeof toggleVariants>) {
   return (
     <TogglePrimitive.Root
       data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
+      data-shape={shape}
+      className={cn(toggleVariants({ variant, size, shape, className }))}
       {...props}
     />
   )

package/src/ui/docs/content/card.md

@@ -1,6 +1,6 @@
 ## Box simples
 
-O uso mais comum: a superfície de conteúdo em repouso (rounded-card + ring-edge + shadow-card — ver Tokens & Tema → Elevação por papel) com o padding pelo className. O Card não força flex/gap/padding — você compõe o miolo (sem brigar com space-y/flex seu).
+O uso mais comum: a superfície de conteúdo em repouso (`rounded-card` + `border` + `shadow-sm` — ver Tokens & Tema → Escala de elevação) com o padding pelo `className`. O Card não força flex/gap/padding — você compõe o miolo (sem brigar com `space-y`/`flex` seu).
 
 ```tsx preview col
 <Card className="p-4">
@@ -30,7 +30,7 @@ Pra painel com estrutura: cada slot é dono do próprio padding (como o Dialog).
 
 ## Com divisor
 
-border-b no header / border-t no footer dão o divisor quando a estrutura pede separação visível. A aresta externa é o anel (`ring-edge`), não uma borda — divergência declarada vs shadcn (border + shadow-sm); os divisores internos seguem sendo `border`.
+`border-b` no header / `border-t` no footer dão o divisor quando a estrutura pede separação visível. A aresta externa e os divisores internos usam o mesmo vocabulário de `border`.
 
 ```tsx preview col
 <Card>

package/src/ui/docs/content/composer.md

@@ -1,6 +1,6 @@
 ## Básico
 
-A caixa de escrever da casa: textarea numa pílula elevada (`rounded-card` + `ring-edge` + `shadow-card`), **Enter** envia / **Shift+Enter** quebra linha, enviar dentro. É o composer do [Chat](/components/chat) extraído — use SOZINHO quando há entrada de texto mas não um chat (ex.: criar uma sessão). Controlado: o dono do texto é você.
+A caixa de escrever da casa: textarea numa pílula elevada (`rounded-card` + `border` + `shadow-sm`), **Enter** envia / **Shift+Enter** quebra linha, enviar dentro. É o composer do [Chat](/components/chat) extraído — use SOZINHO quando há entrada de texto mas não um chat (ex.: criar uma sessão). Controlado: o dono do texto é você.
 
 ```tsx preview col
 const [text, setText] = React.useState('')

package/src/ui/docs/content/tokens.md

@@ -69,31 +69,30 @@ render(
 )
 ```
 
-## Elevação por papel
+## Escala de elevação
 
-> A sombra segue o mesmo desenho das cores: token por PAPEL, não por tamanho — o papel de
-> superfície carrega cor, elevação e forma (`bg-card` · `shadow-card` · `rounded-card`). Em superfície elevada, a aresta é o anel hairline `ring-1 ring-edge`
-> no lugar da borda (nunca os dois juntos); borda sólida fica onde é affordance de interação
-> (inputs, controles — que são flat). Os defaults `shadow-*` do Tailwind seguem intactos: um
-> `shadow-md` cru no código é sinal de review, não vocabulário da casa.
+> A sombra usa a escala de intensidade do Tailwind (`shadow-sm` → `shadow-2xl`), mas o
+> Opus controla sua composição para deixá-la mais clara e difusa. O componente escolhe
+> quanto precisa subir; o nome não o prende a um papel. A aresta usa `border border-border`;
+> o spread negativo evita que a sombra engrosse visualmente essa borda.
 
 ```tsx preview
-const ROLES = [
-  ['card', 'Conteúdo em repouso (Card, composer do Chat).'],
-  ['popover', 'Flutuante leve (menus, selects, popovers).'],
-  ['dialog', 'Flutuante modal (dialogs, sheets).'],
+const LEVELS = [
+  ['sm', 'Superfície em repouso.'],
+  ['md', 'Flutuante intermediário.'],
+  ['lg', 'Modal ou destaque forte.'],
 ]
 render(
   <div className="flex flex-wrap gap-8 py-4">
-    {ROLES.map(([role, desc]) => (
-      <div key={role} className="flex flex-col items-center gap-3">
+    {LEVELS.map(([level, desc]) => (
+      <div key={level} className="flex flex-col items-center gap-3">
         <div
-          className={'flex h-24 w-40 items-center justify-center bg-card text-xs ring-1 ring-edge rounded-' + role + ' shadow-' + role}
+          className={'flex h-24 w-40 items-center justify-center rounded-card border border-border bg-card text-xs shadow-' + level}
         >
           Texto
         </div>
         <div className="text-center">
-          <div className="font-mono text-xs">shadow-{role}</div>
+          <div className="font-mono text-xs">shadow-{level}</div>
           <div className="max-w-44 text-xs text-muted-foreground">{desc}</div>
         </div>
       </div>
@@ -112,7 +111,7 @@ render(
 
 > Escala mapeada no `@theme inline` preservando o sentido pré-v4 dos utilitários `rounded-*`
 > (neutraliza o rename do Tailwind v4). E a forma também tem papel: `rounded-card/popover/dialog`
-> são a forma das superfícies elevadas (par do `bg-*`/`shadow-*`), derivados de `--radius` — a
+> são a forma das superfícies elevadas (separada da intensidade de `shadow-*`), derivados de `--radius` — a
 > identidade por app escala tudo junto. Controles (botões, inputs) seguem na escala sm–xl.
 
 ```tsx preview
@@ -150,11 +149,12 @@ render(
    da casa; dialog e card "sobem" da página de verdade.
 3. Radius mapeado (sm/md/lg/xl) preservando o sentido pré-v4 dos utilitários `rounded-*`.
 
-(A antiga nº 4 — escala `shadow-*` sobrescrita — foi aposentada: a elevação da casa vive em
-namespace próprio, `shadow-card/popover/dialog` + `ring-edge`, sem tocar os defaults do Tailwind.)
+4. Escala `shadow-*` recomposta em duas camadas claras e difusas — preserva os degraus do
+   Tailwind e troca somente o peso visual. Os aliases antigos por papel foram removidos;
+   componentes e consumidores usam diretamente a escala.
 
 5. Bordas mais leves no light: `--border`/`--input` em 92.5% (upstream 89.8%) — par do canvas
-   quase-branco do body; a aresta de superfície elevada já é o `ring-edge`.
+   quase-branco do body; superfícies elevadas usam essa mesma borda real.
 
 ## Identidade por app
 

package/src/ui/meta.ts

@@ -27,7 +27,7 @@ export const componentMeta = {
     name: 'button',
     ancestry: 'shadcn',
     whenToUse:
-      'Ação clicável. `variant` pra intenção (default/secondary/outline/ghost/destructive/link), `size` pro tamanho (default/sm/lg · icon/icon-sm/icon-xs pros só-ícone, 36/32/24px — o icon-xs é a ação DENTRO de um campo, o trailing do Input/Select). `busy` pra ação em andamento (spinner + desabilita — é o "depois" do clique, não o "carregando" de conteúdo, que é Spinner/Skeleton num nível de página). `asChild` pra renderizar como outro elemento (ex.: âncora com cara de botão).',
+      'Ação clicável. `variant` define intenção (default/secondary/outline/ghost/destructive/link), `size` define altura (default/sm/lg · icon/icon-sm/icon-xs pros só-ícone, 36/32/24px) e `shape="pill"` troca somente a geometria, sem alterar cor ou hierarquia. `busy` mostra spinner e desabilita. `asChild` renderiza como outro elemento.',
   },
   'card': {
     name: 'card',
@@ -110,7 +110,7 @@ export const componentMeta = {
     name: 'select',
     ancestry: 'opus',
     whenToUse:
-      'O seletor ÚNICO da casa: toda escolha em lista. Data-driven (`options` = { value, label, hint?, content?, group? }), nunca JSX de item. Modos por prop, não por componente: `searchable` (busca; a régua é ACHABILIDADE — lista longa sem busca é rolar até cansar), `multiple` (chips + Selecionar tudo), `onSearch` (busca no servidor), `native` (o <select> do sistema — lista curta e sabida, picker do SO), `variant="ghost"` (a barra do composer, com `triggerLabel` encurtando o gatilho). Também: `icon` (leading), `trailing` (ação custom no fim do campo, ex.: um botão que age sobre o valor), `size` (default/sm), `clearable`. Absorveu Combobox, NativeSelect, ComposerSelect e o Select do Radix (3.0.0). Pra ação, Menu; pra 2–3 opções sempre visíveis, RadioGroup.',
+      'O seletor ÚNICO da casa: toda escolha em lista. Data-driven (`options` = { value, label, hint?, content?, group? }), nunca JSX de item. Modos por prop: `searchable`, `multiple`, `onSearch` e `native`. `variant="default"` é campo de formulário; `outline` abraça o conteúdo com borda; `ghost` abraça o conteúdo sem borda. `size` segue a régua inline (default 36px/sm 32px) e `shape="pill"` troca somente a geometria. Também aceita `icon`, `trailing`, `triggerLabel` e `clearable`.',
   },
   'separator': {
     name: 'separator',
@@ -137,7 +137,7 @@ export const componentMeta = {
     name: 'tabs',
     ancestry: 'shadcn',
     whenToUse:
-      'Abas pra alternar entre painéis de conteúdo (Radix). Compõe Tabs > (TabsList > TabsTrigger + TabsContent), pareando `value` do trigger com o do content. `variant` na TabsList: `default` (pill) ou `line` (barra sublinhada). `size` no Tabs (default h-9 / sm h-8 — o par do sm de Button/Select, pra fileira densa). `orientation` (horizontal/vertical).',
+      'Abas pra alternar entre painéis de conteúdo (Radix). Compõe Tabs > (TabsList > TabsTrigger + TabsContent), pareando `value` do trigger com o do content. `variant` na TabsList: `default` (pill) ou `line` (barra sublinhada, ancorada na borda da lista). `size` no Tabs (default h-9 / sm h-8 — o par do sm de Button/Select, pra fileira densa); a altura pode ser substituída em `TabsList`. `orientation` (horizontal/vertical).',
   },
   'textarea': {
     name: 'textarea',
@@ -197,7 +197,7 @@ export const componentMeta = {
     name: 'button-group',
     ancestry: 'shadcn',
     whenToUse:
-      'Junta botões (e afins) num bloco coeso — bordas internas colapsadas e cantos arredondados só nas pontas. `orientation` horizontal/vertical. ButtonGroupText pra um rótulo/prefixo colado ao grupo; ButtonGroupSeparator pra cortar visualmente entre ações. Pra um menu de opções, prefira Menu; pra campo com addon, InputGroup.',
+      'Junta botões (e Select) num bloco coeso — bordas internas colapsadas e cantos arredondados só nas pontas. `orientation` define o eixo e `shape="pill"` arredonda as extremidades externas sem reabrir a junção interna. ButtonGroupText adiciona rótulo/prefixo; ButtonGroupSeparator corta visualmente entre ações.',
   },
   'calendar': {
     name: 'calendar',
@@ -239,7 +239,7 @@ export const componentMeta = {
     name: 'input-group',
     ancestry: 'shadcn',
     whenToUse:
-      'Campo composto: cola ícones, texto e botões a um InputGroupInput/InputGroupTextarea numa única moldura (foco e erro propagam pro grupo todo). InputGroupAddon ancora os adornos — `align` inline-start/inline-end nas laterais, block-start/block-end empilha acima/abaixo (exige a moldura alta do InputGroupTextarea, é o padrão do composer). InputGroupText é o rótulo inerte (prefixo/sufixo); InputGroupButton é o botão embutido (ghost por padrão, `size` xs/sm/icon-xs/icon-sm). Só um ÍCONE leading não precisa disto — é a prop `icon` do Input (uma forma só pra adorno de campo, igual ao Select). InputGroup é pros casos que a prop não cobre: botão no fim, prefixo de texto, adorno em bloco, múltiplos. Pra agrupar botões soltos, ButtonGroup.',
+      'Campo composto: cola ícones, texto e botões a um InputGroupInput/InputGroupTextarea numa única moldura (foco e erro propagam pro grupo todo). `shape="pill"` aplica a geometria arredondada à moldura. InputGroupAddon ancora adornos; InputGroupText é rótulo inerte; InputGroupButton é o botão embutido. Pra agrupar botões soltos, use ButtonGroup.',
   },
   'input-otp': {
     name: 'input-otp',

package/src/ui/react.tsx

@@ -13,6 +13,7 @@ export { cn } from './lib/cn.ts'
 // Primitivos
 export { Button, buttonVariants } from './components/primitives/button.tsx'
 export type { ButtonProps } from './components/primitives/button.tsx'
+export type { ControlShape } from './components/primitives/control.ts'
 
 export { Input } from './components/primitives/input.tsx'
 

package/src/ui/theme.css

@@ -12,11 +12,10 @@
  *    da casa (upstream v4 também elevou; calibramos pelo site deles em 2026-06).
  * 3. Radius mapeado (sm/md/lg/xl em @theme inline) preservando o sentido pré-v4 dos
  *    utilitários `rounded-*` — neutraliza o rename do v4.
- * (A antiga nº 4 — escala shadow-* sobrescrita — foi APOSENTADA: a elevação da casa
- *  vive em namespace próprio, shadow-card/popover/dialog + ring-edge, sem tocar os
- *  defaults do Tailwind.)
+ * 4. Escala shadow-* recomposta diretamente em duas camadas claras, difusas e com spread
+ *    negativo — preserva inclusive modifiers como `shadow-lg/30` (ver docs/elevation-scale.md).
  * 5. Bordas mais leves no light: --border/--input em 92.5% (upstream 89.8%) — par do
- *    canvas quase-branco; a aresta de superfície elevada já é o ring-edge.
+ *    canvas quase-branco; superfícies elevadas usam a mesma borda real dos demais papéis.
  * Tudo o mais (escala neutra, radius base 0.625rem, semânticas) segue o upstream.
  */
 @import 'tailwindcss';
@@ -27,15 +26,6 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  /* Elevação POR PAPEL (par do bg-card/bg-popover): família Notion — camada curta +
-     longa, tinte 25/25/25 — e a ARESTA (--edge-value): o anel hairline que SUBSTITUI a
-     borda em superfície elevada (ring-1 ring-edge). Papel novo = token novo; os
-     defaults shadow-* do Tailwind ficam INTACTOS (sem pegadinha). */
-  --edge-value: rgba(42, 28, 0, 0.07);
-  --elevation-card: 0 1px 2px rgba(25, 25, 25, 0.027), 0 3px 6px rgba(25, 25, 25, 0.05);
-  --elevation-popover: 0 5px 8px rgba(25, 25, 25, 0.027), 0 20px 24px rgba(25, 25, 25, 0.05);
-  --elevation-dialog: 0 4px 8px rgba(25, 25, 25, 0.03), 0 16px 24px rgba(25, 25, 25, 0.06);
-
   /* Scrollbars e controles NATIVOS (date picker, autofill…) seguem o tema — sem
      isto o browser assume light e pinta scrollbar branca no dark. */
   color-scheme: light;
@@ -64,10 +54,6 @@
 }
 
 .dark {
-  --edge-value: rgba(255, 255, 255, 0.06);
-  --elevation-card: 0 1px 2px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.28);
-  --elevation-popover: 0 5px 8px rgba(0, 0, 0, 0.16), 0 20px 24px rgba(0, 0, 0, 0.3);
-  --elevation-dialog: 0 4px 8px rgba(0, 0, 0, 0.2), 0 16px 24px rgba(0, 0, 0, 0.35);
   color-scheme: dark;
   --background: hsl(0 0% 3.9%);
   --foreground: hsl(0 0% 98%);
@@ -151,20 +137,23 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 
-  /* Forma por papel (rounded-card/popover/dialog) — o papel de superfície carrega cor
-     (bg-*), elevação (shadow-*) E forma. Derivados de --radius: a identidade por app
-     (sobrescrever --radius) escala os papéis junto. Controles ficam na escala sm–xl. */
+  /* Forma por papel (rounded-card/popover/dialog), separada da intensidade de elevação.
+     Derivados de --radius: a identidade por app (sobrescrever --radius) escala os papéis
+     junto. Controles ficam na escala sm–xl. */
   --radius-card: calc(var(--radius) + 6px);
   --radius-popover: calc(var(--radius) - 2px);
   --radius-dialog: calc(var(--radius) + 6px);
 
-  /* Elevação por papel (utilitários shadow-card/popover/dialog + ring-edge/border-edge)
-     — namespace PRÓPRIO: os shadow-* default do Tailwind seguem intactos. Superfície
-     elevada usa `ring-1 ring-edge` NO LUGAR de border (não combine os dois). */
-  --shadow-card: var(--elevation-card);
-  --shadow-popover: var(--elevation-popover);
-  --shadow-dialog: var(--elevation-dialog);
-  --color-edge: var(--edge-value);
+  /* Escala Tailwind, com receita direta para o compilador preservar modifiers `/opacity`.
+     `light-dark()` mantém o peso adequado em cada tema sem uma variável intermediária. */
+  --shadow-2xs: 0 1px 2px -1px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.12));
+  --shadow-xs: 0 1px 2px -1px light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.12)), 0 2px 4px -2px light-dark(rgb(15 15 15 / 0.035), rgb(0 0 0 / 0.18));
+  --shadow-sm: 0 2px 4px -2px light-dark(rgb(15 15 15 / 0.025), rgb(0 0 0 / 0.16)), 0 4px 8px -4px light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.28));
+  --shadow: 0 2px 6px -2px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 6px 14px -6px light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.29));
+  --shadow-md: 0 4px 8px -4px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.16)), 0 10px 28px -8px light-dark(rgb(15 15 15 / 0.065), rgb(0 0 0 / 0.3));
+  --shadow-lg: 0 6px 16px -6px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.18)), 0 18px 48px -12px light-dark(rgb(15 15 15 / 0.07), rgb(0 0 0 / 0.3));
+  --shadow-xl: 0 8px 24px -10px light-dark(rgb(15 15 15 / 0.04), rgb(0 0 0 / 0.2)), 0 24px 64px -18px light-dark(rgb(15 15 15 / 0.08), rgb(0 0 0 / 0.34));
+  --shadow-2xl: 0 12px 32px -14px light-dark(rgb(15 15 15 / 0.05), rgb(0 0 0 / 0.22)), 0 32px 88px -24px light-dark(rgb(15 15 15 / 0.1), rgb(0 0 0 / 0.38));
 }
 
 /* Base canônica do consumidor — vem DAQUI, não do entry de cada app. Tailwind v4