@softize/opus 18.2.0 → 18.3.0

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

@@ -164,7 +164,10 @@ export function PageShell({
       <PageShellContext.Provider value>
         <PageNavigationTargetContext.Provider value={navigationTarget}>
           <PageActionsTarget target={actionsTarget}>
-            <div data-slot="page-shell-content" className="min-h-0 flex-1">
+            <div
+              data-slot="page-shell-content"
+              className="min-h-0 min-w-0 flex-1 overflow-auto [&>*]:min-w-[64rem]"
+            >
               {children}
             </div>
           </PageActionsTarget>
@@ -202,6 +205,8 @@ interface PageBaseProps extends Omit<
 > {
   /** Classes do container. Default: centralizado com `max-w-7xl` (80rem). */
   className?: string;
+  /** `fill` limita a página à altura do shell para que regiões internas assumam a rolagem. */
+  layout?: "flow" | "fill";
 }
 
 interface PageShorthandProps extends PageBaseProps {
@@ -252,8 +257,7 @@ function countPageBodyHeadings(node: ReactNode): {
           total.content +
           (child.type === Content && props.level === 1 ? 1 : 0) +
           nested.content,
-        state:
-          total.state + nested.state,
+        state: total.state + nested.state,
       };
     },
     { content: 0, state: 0 },
@@ -275,6 +279,7 @@ function hasOpaquePageBodyContent(node: ReactNode): boolean {
 export function Page({
   title,
   actions,
+  layout = "flow",
   className,
   children,
   ...props
@@ -372,7 +377,8 @@ export function Page({
         (total, intro) =>
           total + countDirectChildrenOfType(intro as ReactElement, PageTitle),
         0,
-      ) + bodyHeadingSources.content;
+      ) +
+      bodyHeadingSources.content;
     const headingSources =
       bodyHeadingSources.state > 0
         ? bodyHeadingSources.state + bodyHeadingSources.content
@@ -429,9 +435,12 @@ export function Page({
           <PageHeadingPresenceProvider register={registerHeading}>
             <main
               data-slot="page"
+              data-layout={layout}
               className={cn(
-                "min-w-0 flex-1",
+                "min-w-[64rem] flex-1",
                 insideShell && "min-h-full",
+                layout === "fill" &&
+                  "flex h-full min-h-0 flex-col overflow-hidden",
                 integralState && "flex min-h-full flex-col",
               )}
               {...props}
@@ -439,6 +448,8 @@ export function Page({
               <div
                 className={cn(
                   "mx-auto max-w-7xl space-y-6 px-8 py-8",
+                  layout === "fill" &&
+                    "flex h-full min-h-0 w-full flex-1 flex-col",
                   integralState &&
                     "flex min-h-full w-full flex-1 flex-col space-y-0",
                   className,

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

@@ -82,6 +82,7 @@ import { SurfaceAssistant } from "./surface-assistant.tsx";
 
 interface PresentationFrameProps {
   surface: PresentationSurface;
+  layout?: "flow" | "fill";
   title: ReactNode;
   navigation?: ReactNode;
   headerActions?: ReactNode;
@@ -121,6 +122,7 @@ function PresentationActions({
 /** A mesma Presentation em Page, Dialog ou Drawer; a superfície não redefine o recurso. */
 function PresentationFrame({
   surface,
+  layout = "flow",
   title,
   navigation,
   headerActions,
@@ -162,7 +164,11 @@ function PresentationFrame({
   const body = (
     <div
       data-slot="presentation-body"
-      className={cn(bodyClassName, bodyClassNameProp)}
+      className={cn(
+        bodyClassName,
+        layout === "fill" && "flex min-h-0 flex-1 flex-col",
+        bodyClassNameProp,
+      )}
     >
       {typeof children === "function" ? children(footerTarget) : children}
     </div>
@@ -198,7 +204,10 @@ function PresentationFrame({
         </Content>
       );
       return (
-        <Page className={cn("flex min-h-full flex-col", className)}>
+        <Page
+          layout={layout}
+          className={cn("flex min-h-full flex-col", className)}
+        >
           {navigation === undefined && assistantAction === undefined ? null : (
             <PageHeader>
               {navigation === undefined ? null : (
@@ -211,7 +220,9 @@ function PresentationFrame({
           )}
           <PageBody className="min-h-0 flex-1 overflow-hidden">
             {withAssistant(
-              <div className="h-full overflow-y-auto">{content}</div>,
+              <div className="h-full overflow-x-hidden overflow-y-auto">
+                {content}
+              </div>,
             )}
           </PageBody>
           {hasFooter ? <PageFooter>{renderFooterActions()}</PageFooter> : null}
@@ -220,7 +231,10 @@ function PresentationFrame({
     }
     if (insidePageShell) {
       return (
-        <Page className={cn("flex min-h-full flex-col", className)}>
+        <Page
+          layout={layout}
+          className={cn("flex min-h-full flex-col", className)}
+        >
           {navigation === undefined &&
           headerActions === undefined &&
           assistantAction === undefined ? null : (
@@ -241,7 +255,12 @@ function PresentationFrame({
           )}
           <PageBody className="min-h-0 flex-1 overflow-hidden">
             {withAssistant(
-              <div className="flex h-full min-h-0 flex-col overflow-y-auto">
+              <div
+                className={cn(
+                  "flex h-full min-h-0 flex-col overflow-x-hidden",
+                  layout === "fill" ? "overflow-y-hidden" : "overflow-y-auto",
+                )}
+              >
                 {contentOwnsHeading ? null : (
                   <PageIntro>
                     <PageTitle>{title}</PageTitle>
@@ -257,6 +276,7 @@ function PresentationFrame({
     }
     return (
       <Page
+        layout={layout}
         className={cn(
           "flex min-h-full max-w-none flex-col space-y-0 px-0 py-0",
           className,
@@ -279,7 +299,9 @@ function PresentationFrame({
         </PageHeader>
         <PageBody className="min-h-0 flex-1 overflow-hidden">
           {withAssistant(
-            <div className="h-full overflow-y-auto px-8 py-8">{body}</div>,
+            <div className="h-full overflow-x-hidden overflow-y-auto px-8 py-8">
+              {body}
+            </div>,
           )}
         </PageBody>
         {hasFooter ? <PageFooter>{renderFooterActions()}</PageFooter> : null}
@@ -405,6 +427,8 @@ export interface PresentationProps {
   onOpenChange?: (open: boolean) => void;
   className?: string;
   bodyClassName?: string;
+  /** `fill` limita a página ao shell e delega a rolagem ao conteúdo React. */
+  layout?: "flow" | "fill";
   /** Conteúdo React da boundary declarada por `body.component`. */
   children?: ReactNode;
   /** Painel runtime; a página fecha sobre os dados do recurso que ela carregou. */
@@ -478,6 +502,7 @@ export function Presentation({
   onOpenChange,
   className,
   bodyClassName: bodyClassNameProp,
+  layout = "flow",
   children,
   assistant,
 }: PresentationProps): ReactElement {
@@ -776,6 +801,7 @@ export function Presentation({
   return (
     <PresentationFrame
       surface={invocation.surface}
+      layout={layout}
       title={definition.title}
       navigation={navigation}
       headerActions={headerActions.length === 0 ? undefined : headerActions}

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

@@ -22,20 +22,41 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
 function FieldLegend({
   className,
   variant = "legend",
+  icon,
+  children,
   ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+}: React.ComponentProps<"legend"> & {
+  variant?: "legend" | "label" | "section"
+  icon?: React.ReactNode
+}) {
   return (
     <legend
       data-slot="field-legend"
       data-variant={variant}
       className={cn(
         "mb-3 font-medium",
+        icon !== undefined && "flex items-center gap-2",
         "data-[variant=legend]:text-base",
         "data-[variant=label]:text-sm",
+        "data-[variant=section]:w-full data-[variant=section]:border-b data-[variant=section]:border-border/70 data-[variant=section]:pb-2 data-[variant=section]:text-sm data-[variant=section]:font-semibold",
         className
       )}
       {...props}
-    />
+    >
+      {icon !== undefined ? (
+        <span
+          data-slot="field-legend-icon"
+          aria-hidden="true"
+          className={cn(
+            "inline-flex shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4",
+            variant === "section" && "size-7 rounded-md bg-muted",
+          )}
+        >
+          {icon}
+        </span>
+      ) : null}
+      {children}
+    </legend>
   )
 }
 

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

@@ -8,6 +8,15 @@ import { Skeleton } from './skeleton.tsx'
 export type MetricCardTone = 'default' | 'warning'
 export type MetricCardContext = Exclude<UiContext, 'primary'>
 
+export interface MetricCardSecondaryMetric {
+  /** Nome curto da medida complementar. */
+  label: React.ReactNode
+  /** Valor complementar já formatado pelo consumidor. */
+  value: React.ReactNode
+  /** Controle complementar próprio, como uma explicação em tooltip. */
+  labelAction?: React.ReactNode
+}
+
 const iconContextClasses: Record<MetricCardContext, string> = {
   neutral: 'bg-context-neutral-subtle text-context-neutral-emphasis',
   info: 'bg-context-info-subtle text-context-info-emphasis',
@@ -16,7 +25,7 @@ const iconContextClasses: Record<MetricCardContext, string> = {
   danger: 'bg-context-danger-subtle text-context-danger-emphasis',
 }
 
-interface MetricCardBaseProps extends Omit<React.ComponentProps<typeof Card>, 'children'> {
+interface MetricCardBaseProps extends Omit<React.ComponentProps<typeof Card>, 'children' | 'asChild'> {
   /** Controle complementar exibido ao lado do rótulo, como uma explicação em tooltip. */
   labelAction?: React.ReactNode
   /** Contexto que explica recorte, proporção ou significado do valor. */
@@ -29,6 +38,8 @@ interface MetricCardBaseProps extends Omit<React.ComponentProps<typeof Card>, 'c
   tone?: MetricCardTone
   /** Ação relacionada diretamente à medida. */
   action?: React.ReactNode
+  /** Medida complementar exibida como uma lâmina posterior sob o card principal. */
+  secondaryMetric?: MetricCardSecondaryMetric
 }
 
 export type MetricCardProps = MetricCardBaseProps &
@@ -63,6 +74,7 @@ export function MetricCard({
   context,
   tone,
   action,
+  secondaryMetric,
   loading = false,
   className,
   ...props
@@ -73,12 +85,16 @@ export function MetricCard({
   const hasIcon = icon !== undefined && icon !== null
   const resolvedContext = context ?? (tone === 'warning' ? 'warning' : 'neutral')
 
-  return (
+  const primaryCard = (
     <Card
       data-slot="metric-card"
-      aria-busy={loading || undefined}
-      className={cn('min-w-0 p-4', className)}
-      {...props}
+      aria-busy={secondaryMetric === undefined ? loading || undefined : undefined}
+      className={cn(
+        'min-w-0 p-4',
+        secondaryMetric !== undefined && 'relative z-10',
+        secondaryMetric === undefined && className,
+      )}
+      {...(secondaryMetric === undefined ? props : {})}
     >
       {loading ? (
         <div className="space-y-3">
@@ -130,4 +146,47 @@ export function MetricCard({
       )}
     </Card>
   )
+
+  if (secondaryMetric === undefined) return primaryCard
+
+  return (
+    <div
+      {...props}
+      data-slot="metric-card-stack"
+      aria-busy={loading || undefined}
+      className={cn('relative isolate min-w-0', className)}
+    >
+      {primaryCard}
+      <Card
+        data-slot="metric-card-secondary"
+        className="relative z-0 -mt-8 flex w-full min-w-0 items-center gap-1.5 bg-[color-mix(in_oklab,var(--card)_88%,black)] px-4 pt-9 pb-1"
+      >
+        {loading ? (
+          <Skeleton className="h-5 w-full" />
+        ) : (
+          <>
+            <div
+              data-slot="metric-card-secondary-value"
+              className="shrink-0 text-xs font-medium text-muted-foreground tabular-nums"
+            >
+              {secondaryMetric.value}
+            </div>
+            <div className="flex min-w-0 items-center gap-1.5">
+              <div
+                data-slot="metric-card-secondary-label"
+                className="min-w-0 truncate text-xs font-medium text-muted-foreground"
+              >
+                {secondaryMetric.label}
+              </div>
+              {secondaryMetric.labelAction !== undefined && (
+                <div data-slot="metric-card-secondary-label-action" className="shrink-0">
+                  {secondaryMetric.labelAction}
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </Card>
+    </div>
+  )
 }

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

@@ -27,6 +27,7 @@ import { Command as CommandPrimitive } from 'cmdk'
 import { cn } from '../../lib/cn.ts'
 import { focusRing, focusRingWithin, type ControlShape, type ControlSize } from './control.ts'
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from './command.tsx'
+import { InputGroupButton } from './input-group.tsx'
 import { Popover, PopoverAnchor, PopoverContent } from './popover.tsx'
 
 export interface SelectOption {
@@ -451,25 +452,6 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                 placeholder={props.multiple && selectedValues.length > 0 ? '' : placeholder}
                 className="sr-only"
               />
-              {clearable === true && selectedValues.length > 0 && disabled !== true && (
-                <button
-                  type="button"
-                  data-slot="select-clear"
-                  aria-label="Limpar seleção"
-                  onPointerDown={(e) => e.preventDefault()}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    if (props.multiple) props.onChange([])
-                    else {
-                      props.onChange('')
-                      setQuery('')
-                    }
-                  }}
-                  className="flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground"
-                >
-                  <X className="size-3.5" />
-                </button>
-              )}
               {/* Ação custom (ex.: botão que age sobre o valor) — o clique NÃO abre a lista:
                   o slot para a propagação pro controle. */}
               {trailing !== undefined && (
@@ -492,16 +474,38 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                   affordance que diz isso. Antes ele sumia no buscável, porque ali o sinal
                   era o cursor de texto — que não existe mais no campo. */}
               <ChevronDownIcon data-slot="select-icon" className={cn('size-4 shrink-0 opacity-50', ghost ? 'h-3.5 w-3.5 opacity-60' : '')} aria-hidden="true" />
+              {clearable === true && selectedValues.length > 0 && disabled !== true && (
+                <InputGroupButton
+                  type="button"
+                  size="icon-xs"
+                  data-slot="select-clear"
+                  aria-label="Limpar seleção"
+                  onPointerDown={(e) => e.preventDefault()}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (props.multiple) props.onChange([])
+                    else {
+                      props.onChange('')
+                      setQuery('')
+                    }
+                  }}
+                  className="-ml-1 -mr-1.5 text-muted-foreground hover:text-foreground"
+                >
+                  <X className="size-3.5" />
+                </InputGroupButton>
+              )}
             </div>
           </PopoverAnchor>
           <PopoverContent
             align="start"
-            // No campo de form a lista acompanha a largura do controle; no ghost, NÃO — o
-            // gatilho é do tamanho do rótulo (uma chave curta), e a lista precisa caber o
-            // título inteiro.
+            // No campo comum a lista parte da largura do controle, mas pode crescer para
+            // preservar rótulos maiores sem alargar o gatilho. No ghost, o gatilho já abraça
+            // o conteúdo e a lista mantém sua faixa compacta própria.
             className={cn(
               'pointer-events-auto overflow-hidden p-0',
-              compact ? '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-max min-w-(--radix-popover-trigger-width) max-w-lg',
             )}
             /*
              * O foco ao abrir é SEMPRE nosso — o Radix nunca mexe.

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

@@ -8,9 +8,11 @@ const TableVariantContext = React.createContext<TableVariant>('plain')
 export interface TableProps extends React.ComponentProps<"table"> {
   /** `framed` aplica a moldura canônica de datagrid no contêiner da tabela. */
   variant?: TableVariant
+  /** Classes do contêiner responsável pela rolagem e pela moldura da tabela. */
+  containerClassName?: string
 }
 
-function Table({ className, variant = 'plain', ...props }: TableProps) {
+function Table({ className, containerClassName, variant = 'plain', ...props }: TableProps) {
   return (
     <TableVariantContext.Provider value={variant}>
       <div
@@ -19,6 +21,7 @@ function Table({ className, variant = 'plain', ...props }: TableProps) {
         className={cn(
           "relative w-full overflow-x-auto",
           variant === 'framed' && 'rounded-lg border border-border',
+          containerClassName,
         )}
       >
         <table