@softize/opus 21.0.1 → 22.1.0

package/src/ui/components/patterns/content-header.tsx

@@ -14,10 +14,8 @@ import { IconTile, type IconTileProps } from "../primitives/icon-tile.tsx";
 import { fillRegionClassName, useFillRegion } from "./fill-region.ts";
 import { headingTags } from "./heading-level.ts";
 import { usePageHeadingPresence } from "./page-heading-context.tsx";
-import {
-  SurfaceMedia,
-  type SurfaceMediaProps,
-} from "./surface-media.tsx";
+import type { SurfaceLayout } from "./surface-anatomy.ts";
+import { SurfaceMedia, type SurfaceMediaProps } from "./surface-media.tsx";
 import {
   SurfaceHeader,
   surfaceHeaderClasses,
@@ -33,6 +31,7 @@ interface ContentContextValue {
   element: ContentElement;
   frameVariant: ContentFrameVariant;
   framed: boolean;
+  layout: SurfaceLayout;
   level: ContentHeaderLevel;
   titleId: string;
   variant: ContentHeaderVariant;
@@ -54,6 +53,8 @@ function requiredContext<T>(
 interface ContentSharedProps {
   /** Aplica a moldura estrutural da região sem transferi-la ao conteúdo interno. */
   framed?: boolean;
+  /** Anatomia interna: contínua (default) ou com header separado do corpo. */
+  layout?: SurfaceLayout;
   /** Hierarquia visual: `section` (default) ou `page`, a mesma de PageHeader. */
   variant?: ContentHeaderVariant;
 }
@@ -129,6 +130,7 @@ export function Content({
   level = 2,
   variant = "section",
   framed = false,
+  layout = "continuous",
   frameVariant = "default",
   children,
   className,
@@ -140,6 +142,7 @@ export function Content({
     element: as,
     frameVariant,
     framed,
+    layout,
     level: level as ContentHeaderLevel,
     titleId,
     variant,
@@ -147,6 +150,15 @@ export function Content({
   const shorthand = title !== undefined;
   const nodes = Children.toArray(children);
 
+  if (layout === "sectioned" && !framed) {
+    throw new Error('Content layout="sectioned" exige framed.');
+  }
+  if (layout === "sectioned" && frameVariant === "legend") {
+    throw new Error(
+      'Content não combina layout="sectioned" com frameVariant="legend".',
+    );
+  }
+
   if (
     shorthand &&
     nodes.some((node) => isValidElement(node) && node.type === ContentHeader)
@@ -200,16 +212,22 @@ export function Content({
           data-as="fieldset"
           data-framed={framed}
           data-frame-variant={frameVariant}
+          data-layout={layout}
           {...fill.attributes}
           aria-labelledby={ariaLabelledBy}
           className={cn(
-            !framed && "space-y-3",
+            !framed && layout === "continuous" && "space-y-3",
             framed &&
+              layout === "continuous" &&
               frameVariant === "default" &&
-              "rounded-lg border border-border p-4",
+              "rounded-xl border border-border p-4",
             framed &&
+              layout === "continuous" &&
               frameVariant === "legend" &&
-              "space-y-3 rounded-lg border border-border px-4 pb-4",
+              "space-y-3 rounded-xl border border-border px-4 pb-4",
+            framed &&
+              layout === "sectioned" &&
+              "overflow-hidden rounded-xl border border-border",
             fill.filling && fillRegionClassName,
             className,
           )}
@@ -223,16 +241,22 @@ export function Content({
           data-as="section"
           data-framed={framed}
           data-frame-variant={frameVariant}
+          data-layout={layout}
           {...fill.attributes}
           aria-labelledby={ariaLabelledBy}
           className={cn(
-            "space-y-3",
+            layout === "continuous" && "space-y-3",
             framed &&
+              layout === "continuous" &&
               frameVariant === "default" &&
-              "rounded-lg border border-border p-4",
+              "rounded-xl border border-border p-4",
             framed &&
+              layout === "continuous" &&
               frameVariant === "legend" &&
-              "rounded-lg border border-border px-4 pb-4",
+              "rounded-xl border border-border px-4 pb-4",
+            framed &&
+              layout === "sectioned" &&
+              "overflow-hidden rounded-xl border border-border",
             fill.filling && fillRegionClassName,
             className,
           )}
@@ -273,11 +297,16 @@ export function ContentHeader({
           invalidMessage="ContentHeader de fieldset aceita somente ContentMedia e ContentTitle; contador, descrição e ações ficam fora da legenda."
           className={cn(
             content.framed &&
+              content.layout === "continuous" &&
               content.frameVariant === "default" &&
               "float-left w-full",
             content.framed &&
+              content.layout === "continuous" &&
               content.frameVariant === "legend" &&
               "-ml-2 w-auto px-2",
+            content.framed &&
+              content.layout === "sectioned" &&
+              "float-left w-full border-b border-border p-3",
             className,
           )}
           {...props}
@@ -302,16 +331,22 @@ export function ContentHeader({
         mediaPlacement="heading"
         className={cn(
           content.framed &&
+            content.layout === "continuous" &&
             content.frameVariant === "legend" &&
             "flex items-center [&>[data-slot=content-actions]]:-mr-2 [&>[data-slot=content-actions]]:bg-[var(--surface-background,var(--background))] [&>[data-slot=content-actions]]:px-2 [&>[data-slot=content-heading]]:-ml-2 [&>[data-slot=content-heading]]:w-fit [&>[data-slot=content-heading]]:max-w-full [&>[data-slot=content-heading]]:bg-[var(--surface-background,var(--background))] [&>[data-slot=content-heading]]:px-2",
           content.framed &&
+            content.layout === "continuous" &&
             content.frameVariant === "legend" &&
             content.variant === "section" &&
             "-mt-4 min-h-8",
           content.framed &&
+            content.layout === "continuous" &&
             content.frameVariant === "legend" &&
             content.variant === "page" &&
             "-mt-5 min-h-10",
+          content.framed &&
+            content.layout === "sectioned" &&
+            "border-b border-border p-3",
           content.variant === "page" &&
             "flex-row items-center justify-start gap-3",
           className,
@@ -370,9 +405,7 @@ export function ContentMedia({
     <SurfaceMedia
       slot="content-media"
       {...props}
-      aria-hidden={
-        context.element === "fieldset" ? true : props["aria-hidden"]
-      }
+      aria-hidden={context.element === "fieldset" ? true : props["aria-hidden"]}
     />
   );
 }
@@ -481,8 +514,13 @@ export function ContentBody({
         content.element === "fieldset" && "space-y-3",
         content.element === "fieldset" &&
           content.framed &&
+          content.layout === "continuous" &&
           content.frameVariant === "default" &&
           "clear-left pt-3",
+        content.element === "fieldset" &&
+          content.framed &&
+          content.layout === "sectioned" &&
+          "clear-left",
         fill.filling && fillRegionClassName,
         className,
       )}

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

@@ -993,26 +993,35 @@ function PeriodControl({
             variant={embedded ? "ghost" : "outline"}
             data-slot="action-list-period"
             className={cn(
-              "max-w-full gap-1.5 overflow-hidden bg-muted/30 px-3 hover:bg-muted/30 hover:text-foreground dark:bg-input/30 dark:hover:bg-input/30",
-              clearable && "pr-10",
+              "relative max-w-full gap-1.5 overflow-hidden bg-muted/30 px-3 hover:bg-muted/30 hover:text-foreground dark:bg-input/30 dark:hover:bg-input/30",
+              // O X e o chevron ocupam posições explícitas na ponta do controle. O
+              // padding reserva os dois sem depender da largura do texto selecionado.
+              clearable && "pr-16",
               embedded &&
                 "gap-1 rounded-none border-0 bg-transparent pl-0 pr-0 font-normal shadow-none hover:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent dark:hover:bg-transparent",
             )}
           >
-            {embedded ? null : <CalendarIcon className="h-3.5 w-3.5" />}
-            <span className="min-w-0 truncate">{label}</span>
-            {embedded ? (
-              <span className="shrink-0 opacity-50">
-                <ChevronDown className="size-4" aria-hidden="true" />
+            {embedded ? null : (
+              <span className="shrink-0">
+                <CalendarIcon className="h-3.5 w-3.5" />
               </span>
-            ) : null}
+            )}
+            <span className="min-w-0 truncate">{label}</span>
+            <span
+              className={cn(
+                "shrink-0 opacity-50",
+                clearable && "pointer-events-none absolute right-8",
+              )}
+            >
+              <ChevronDown className="size-4" aria-hidden="true" />
+            </span>
           </Button>
         </PopoverTrigger>
         {clearable ? (
           <InputGroupButton
             size="icon-xs"
             aria-label="Limpar período"
-            className="absolute top-1/2 right-1.5 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            className="absolute top-1/2 right-2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
             onClick={() => {
               setOpen(false);
               setShowCalendar(false);
@@ -1422,7 +1431,7 @@ export function ActionFilterBar({
                   <div
                     data-slot="action-filter-period-group"
                     className={cn(
-                      "flex min-h-9 w-fit min-w-0 max-w-full items-center rounded-md border border-input bg-muted/30 text-foreground transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[0.1875rem] focus-within:ring-ring/50 dark:bg-input/30",
+                      "flex min-h-9 w-fit min-w-0 max-w-full items-center rounded-md border border-input bg-muted/30 text-foreground transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[0.1875rem] focus-within:ring-ring/50 has-[[data-state=open]]:border-ring has-[[data-state=open]]:ring-[0.1875rem] has-[[data-state=open]]:ring-ring/50 dark:bg-input/30",
                       !periodGroupClearable && "pr-3",
                     )}
                   >
@@ -1430,6 +1439,31 @@ export function ActionFilterBar({
                       className="ml-3 size-3.5 shrink-0 text-muted-foreground"
                       aria-hidden="true"
                     />
+                    <div className="pl-2">
+                      <PeriodControl
+                        periods={periods}
+                        period={activePeriod}
+                        from={state.from}
+                        to={state.to}
+                        clearable={false}
+                        embedded
+                        onChange={(next) =>
+                          onStateChange({
+                            ...state,
+                            ...next,
+                            period:
+                              next.period === defaultPeriod
+                                ? null
+                                : next.period,
+                          })
+                        }
+                      />
+                    </div>
+                    <Separator
+                      data-slot="action-filter-period-separator"
+                      orientation="vertical"
+                      className="mx-2 self-center bg-input data-[orientation=vertical]:h-4"
+                    />
                     <FilterField
                       name={name}
                       spec={spec}
@@ -1439,28 +1473,7 @@ export function ActionFilterBar({
                       options={optionsFor(name, spec, filterOptions)}
                       defaultValue={filterDefaults?.[name]}
                       embedded
-                      className="w-fit min-w-0 max-w-80 [&_[data-slot=select-control]]:gap-1 [&_[data-slot=select-control]]:rounded-none [&_[data-slot=select-control]]:bg-transparent [&_[data-slot=select-control]]:pl-2 [&_[data-slot=select-control]]:pr-0 [&_[data-slot=select-control]]:font-normal [&_[data-slot=select-control]]:text-foreground [&_[data-slot=select-control]]:shadow-none [&_[data-slot=select-control]:hover]:bg-transparent [&_[data-slot=select-control]:focus-within]:ring-0 [&_[data-slot=select-control]:focus-within]:ring-offset-0"
-                    />
-                    <Separator
-                      data-slot="action-filter-period-separator"
-                      orientation="vertical"
-                      className="ml-1.5 mr-2.5 h-4 shrink-0"
-                    />
-                    <PeriodControl
-                      periods={periods}
-                      period={activePeriod}
-                      from={state.from}
-                      to={state.to}
-                      clearable={false}
-                      embedded
-                      onChange={(next) =>
-                        onStateChange({
-                          ...state,
-                          ...next,
-                          period:
-                            next.period === defaultPeriod ? null : next.period,
-                        })
-                      }
+                      className="w-fit min-w-0 max-w-80 [&_[data-slot=select-control]]:gap-1 [&_[data-slot=select-control]]:rounded-none [&_[data-slot=select-control]]:bg-transparent [&_[data-slot=select-control]]:pl-0 [&_[data-slot=select-control]]:pr-0 [&_[data-slot=select-control]]:font-normal [&_[data-slot=select-control]]:text-foreground [&_[data-slot=select-control]]:shadow-none [&_[data-slot=select-control]:hover]:bg-transparent [&_[data-slot=select-control]:focus-within]:ring-0 [&_[data-slot=select-control]:focus-within]:ring-offset-0"
                     />
                     {periodGroupClearable ? (
                       <InputGroupButton
@@ -2381,7 +2394,12 @@ export function ActionList<TInput, TItem>({
               linhas: a dos resultados absorve a altura que sobra, a do rodapé se mede
               pelo conteúdo. Em `flow` a primeira linha também é `1fr`, mas o bloco não
               tem altura própria e ela vira a altura do conteúdo. */}
-          <div className={cn("grid min-h-0 grid-rows-[1fr_auto]", layout === "fill" && "flex-1")}>
+          <div
+            className={cn(
+              "grid min-h-0 grid-rows-[1fr_auto]",
+              layout === "fill" && "flex-1",
+            )}
+          >
             {/* A rolagem mora aqui, nos dois eixos: é este elemento que o `sticky` do
                 cabeçalho enxerga. Um contêiner de rolagem entre ele e a tabela roubaria
                 essa referência e o cabeçalho voltaria a subir junto com as linhas.