@softize/opus 15.2.2 → 16.0.0

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

@@ -22,24 +22,13 @@ import { createPortal } from "react-dom";
 import { ArrowLeft } from "lucide-react";
 import { cn } from "../../lib/cn.ts";
 import { Button } from "../primitives/button.tsx";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../primitives/tooltip.tsx";
 import { SurfaceHeader, surfaceHeaderClasses } from "./surface-header.tsx";
 import { PageStatePresenceProvider } from "./page-state.tsx";
 
-export type PageHeaderVariant = "default" | "bar";
-
-interface PageContextValue {
-  headerVariant: PageHeaderVariant;
-  containerClassName?: string;
-}
+interface PageContextValue {}
 
 const PageContext = createContext<PageContextValue | null>(null);
-type PageHeadingRegion = PageHeaderVariant | "intro";
+type PageHeadingRegion = "header" | "intro";
 
 const PageHeaderContext = createContext<PageHeadingRegion | null>(null);
 const PageIntegralStateContext = createContext(false);
@@ -49,6 +38,11 @@ const pageBarClassName =
   "flex h-12 shrink-0 items-center border-b border-border bg-background text-foreground";
 const pageBarContentClassName = "w-full py-2";
 
+/** Uso interno de patterns que precisam adaptar a Page ao shell sem duplicar sua anatomia. */
+export function useInsidePageShell(): boolean {
+  return useContext(PageShellContext);
+}
+
 function PageShellNavigationSlot({
   className,
   ...props
@@ -102,7 +96,9 @@ export function PageShell({
   headerClassName,
   ...props
 }: PageShellProps): ReactElement {
-  const [actionsTarget, setActionsTarget] = useState<HTMLDivElement | null>(null);
+  const [actionsTarget, setActionsTarget] = useState<HTMLDivElement | null>(
+    null,
+  );
 
   return (
     <div
@@ -124,11 +120,7 @@ export function PageShell({
         }}
         leadingPlacement="inline"
         titleRequired={false}
-        contentClassName={cn(
-          pageBarContentClassName,
-          "px-3",
-          headerClassName,
-        )}
+        contentClassName={cn(pageBarContentClassName, "px-3", headerClassName)}
         className={pageBarClassName}
         data-variant="bar"
       >
@@ -211,6 +203,9 @@ export function Page({
   const bodies = nodes.filter(
     (node) => isValidElement(node) && node.type === PageBody,
   );
+  const footers = nodes.filter(
+    (node) => isValidElement(node) && node.type === PageFooter,
+  );
   const intros = nodes.filter(
     (node) => isValidElement(node) && node.type === PageIntro,
   );
@@ -240,58 +235,52 @@ export function Page({
       intros.length === 1 &&
       headers.length === 0 &&
       bodies.length === 1 &&
-      intros.length + bodies.length === nodes.length;
+      footers.length <= 1 &&
+      intros.length + bodies.length + footers.length === nodes.length;
     const validStandaloneComposition =
       !insideShell &&
       headers.length === 1 &&
       intros.length === 0 &&
       bodies.length === 1 &&
-      headers.length + bodies.length === nodes.length;
+      footers.length <= 1 &&
+      headers.length + bodies.length + footers.length === nodes.length;
     if (!validIntroComposition && !validStandaloneComposition) {
       throw new Error(
         insideShell
-          ? "Page explícito dentro de PageShell exige exatamente um PageIntro e um PageBody como filhos diretos."
-          : "Page explícito exige exatamente um PageHeader ou PageIntro e um PageBody como filhos diretos.",
+          ? "Page explícito dentro de PageShell exige um PageIntro, um PageBody e no máximo um PageFooter como filhos diretos."
+          : "Page explícito exige um PageHeader ou PageIntro, um PageBody e no máximo um PageFooter como filhos diretos.",
       );
     }
   }
-  const headerVariant: PageHeaderVariant = shorthand
-    ? "default"
-    : ((headers[0] as ReactElement<PageHeaderProps> | undefined)?.props
-        .variant ?? "default");
-  const pageContext: PageContextValue = {
-    headerVariant,
-    containerClassName: className,
-  };
-
-  const content = shorthand && insideShell ? (
-    <>
-      <PageIntro>
-        <PageTitle>{title}</PageTitle>
-        {description !== undefined && (
-          <PageDescription>{description}</PageDescription>
-        )}
-        {actions !== undefined && <PageActions>{actions}</PageActions>}
-      </PageIntro>
-      <PageBody>{children}</PageBody>
-    </>
-  ) : shorthand ? (
-    <>
-      <PageHeader>
-        <PageTitle>{title}</PageTitle>
-        {description !== undefined && (
-          <PageDescription>{description}</PageDescription>
-        )}
-        {actions !== undefined && <PageActions>{actions}</PageActions>}
-      </PageHeader>
-      <PageBody>{children}</PageBody>
-    </>
-  ) : (
-    children
-  );
+  const content =
+    shorthand && insideShell ? (
+      <>
+        <PageIntro>
+          <PageTitle>{title}</PageTitle>
+          {description !== undefined && (
+            <PageDescription>{description}</PageDescription>
+          )}
+          {actions !== undefined && <PageActions>{actions}</PageActions>}
+        </PageIntro>
+        <PageBody>{children}</PageBody>
+      </>
+    ) : shorthand ? (
+      <>
+        <PageHeader>
+          <PageTitle>{title}</PageTitle>
+          {description !== undefined && (
+            <PageDescription>{description}</PageDescription>
+          )}
+          {actions !== undefined && <PageActions>{actions}</PageActions>}
+        </PageHeader>
+        <PageBody>{children}</PageBody>
+      </>
+    ) : (
+      children
+    );
 
   return (
-    <PageContext.Provider value={pageContext}>
+    <PageContext.Provider value={{}}>
       <PageIntegralStateContext.Provider value={integralState}>
         <PageStatePresenceProvider register={registerIntegralState}>
           <main
@@ -299,28 +288,20 @@ export function Page({
             className={cn(
               "min-w-0 flex-1",
               insideShell && "min-h-full",
-              (headerVariant === "bar" || integralState) && "flex flex-col",
-              // A barra contém a rolagem (`min-h-0`); o estado integral ocupa a altura
-              // disponível (`min-h-full`). Emitir os dois juntos deixava o resultado por
-              // conta da ordem do CSS gerado — no estado integral, quem manda é ele.
-              integralState ? "min-h-full" : headerVariant === "bar" && "min-h-0",
+              integralState && "flex min-h-full flex-col",
             )}
             {...props}
           >
-            {headerVariant === "bar" ? (
-              content
-            ) : (
-              <div
-                className={cn(
-                  "mx-auto max-w-7xl space-y-6 px-8 py-8",
-                  integralState &&
-                    "flex min-h-full w-full flex-1 flex-col space-y-0",
-                  className,
-                )}
-              >
-                {content}
-              </div>
-            )}
+            <div
+              className={cn(
+                "mx-auto max-w-7xl space-y-6 px-8 py-8",
+                integralState &&
+                  "flex min-h-full w-full flex-1 flex-col space-y-0",
+                className,
+              )}
+            >
+              {content}
+            </div>
           </main>
         </PageStatePresenceProvider>
       </PageIntegralStateContext.Provider>
@@ -356,10 +337,12 @@ export function PageIntro({
         name="PageIntro"
         slot="page-intro"
         slots={{
+          leading: [PageBack, PageNavigation],
           title: PageTitle,
           description: PageDescription,
           actions: PageActions,
         }}
+        leadingPlacement="above"
         className={className}
         {...props}
       >
@@ -370,13 +353,9 @@ export function PageIntro({
 }
 
 /** A anatomia é a de `SurfaceHeader`, a mesma de `ContentHeader`; só os slots mudam de nome. */
-export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /** `default` fica no container; `bar` cria uma faixa compacta no topo da Page. */
-  variant?: PageHeaderVariant;
-}
+export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {}
 
 export function PageHeader({
-  variant = "default",
   className,
   children,
   ...props
@@ -386,7 +365,7 @@ export function PageHeader({
   requireParent(page !== null, "PageHeader", "Page");
   if (integralState) return <></>;
   return (
-    <PageHeaderContext.Provider value={variant}>
+    <PageHeaderContext.Provider value="header">
       <SurfaceHeader
         name="PageHeader"
         slot="page"
@@ -396,20 +375,8 @@ export function PageHeader({
           description: PageDescription,
           actions: PageActions,
         }}
-        leadingPlacement={variant === "bar" ? "inline" : "above"}
-        contentClassName={
-          variant === "bar"
-            ? cn(
-                pageBarContentClassName,
-                "mx-auto max-w-7xl px-8",
-                page?.containerClassName,
-              )
-            : undefined
-        }
-        className={cn(
-          variant === "bar" && pageBarClassName,
-          className,
-        )}
+        leadingPlacement="inline"
+        className={className}
         {...props}
       >
         {children}
@@ -428,11 +395,9 @@ export function PageTitle({
     <h1
       data-slot="page-title"
       className={cn(
-        variant === "bar"
-          ? "truncate text-sm font-semibold"
-          : variant === "intro"
-            ? "text-3xl font-semibold tracking-tight"
-            : surfaceHeaderClasses.page.title,
+        variant === "intro"
+          ? "text-3xl font-semibold tracking-tight"
+          : surfaceHeaderClasses.page.title,
         className,
       )}
       {...props}
@@ -445,20 +410,11 @@ export function PageDescription({
   ...props
 }: HTMLAttributes<HTMLParagraphElement>): ReactElement {
   const variant = useContext(PageHeaderContext);
-  requireParent(
-    variant !== null,
-    "PageDescription",
-    "PageHeader ou PageIntro",
-  );
+  requireParent(variant !== null, "PageDescription", "PageHeader ou PageIntro");
   return (
     <p
       data-slot="page-description"
-      className={cn(
-        variant === "bar"
-          ? "mt-0.5 truncate text-xs text-muted-foreground"
-          : surfaceHeaderClasses.page.description,
-        className,
-      )}
+      className={cn(surfaceHeaderClasses.page.description, className)}
       {...props}
     />
   );
@@ -476,7 +432,7 @@ export function PageActions({
     <div
       data-slot="page-actions"
       className={cn(
-        variant === "bar" || insideShell
+        insideShell || variant === "header"
           ? "flex shrink-0 items-center gap-2"
           : surfaceHeaderClasses.page.actions,
         className,
@@ -488,12 +444,14 @@ export function PageActions({
   return target === null ? actions : createPortal(actions, target);
 }
 
-export interface PageBackProps extends Omit<ComponentProps<"a">, "children" | "href"> {
-  /** Nome do destino pai. Na barra, também alimenta tooltip e nome acessível. */
+export interface PageBackProps extends Omit<
+  ComponentProps<"a">,
+  "children" | "href"
+> {
+  /** Nome visível do destino pai e base do nome acessível. */
   children: ReactNode;
-  /** Destino explícito. Obrigatório: sem `href` o elemento não é tabulável, não expõe
-   *  `role="link"` e o navegador descarta o nome acessível — na barra, onde não há texto
-   *  visível, o retorno simplesmente desapareceria para tecnologia assistiva. */
+  /** Destino explícito. Obrigatório: sem `href` o elemento não é tabulável nem expõe
+   *  `role="link"`. */
   href: string;
 }
 
@@ -505,7 +463,7 @@ export function PageNavigation({
   requireParent(
     useContext(PageHeaderContext) !== null,
     "PageNavigation",
-    "PageHeader",
+    "PageHeader ou PageIntro",
   );
   return (
     <div
@@ -523,34 +481,24 @@ export function PageBack({
   ...props
 }: PageBackProps): ReactElement {
   const variant = useContext(PageHeaderContext);
-  requireParent(variant !== null, "PageBack", "PageHeader");
+  requireParent(variant !== null, "PageBack", "PageHeader ou PageIntro");
   const destination =
     typeof children === "string" ? children : "a página anterior";
   const accessibleLabel = ariaLabel ?? `Voltar para ${destination}`;
-  const link = (
-    <Button asChild variant="ghost" size={variant === "bar" ? "icon-sm" : "sm"}>
+  return (
+    <Button asChild variant="ghost" size="icon-sm">
       <a
         data-slot="page-back"
         aria-label={accessibleLabel}
+        title={accessibleLabel}
         className={className}
         {...props}
       >
         <ArrowLeft aria-hidden="true" />
-        {variant === "default" && <span>{children}</span>}
+        <span className="sr-only">{children}</span>
       </a>
     </Button>
   );
-
-  return variant === "bar" ? (
-    <TooltipProvider delayDuration={200}>
-      <Tooltip>
-        <TooltipTrigger asChild>{link}</TooltipTrigger>
-        <TooltipContent>{accessibleLabel}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  ) : (
-    link
-  );
 }
 
 export function PageBody({
@@ -563,11 +511,23 @@ export function PageBody({
   return (
     <div
       data-slot="page-body"
+      className={cn(integralState && "flex min-h-0 flex-1 flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+export function PageFooter({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): ReactElement {
+  const page = useContext(PageContext);
+  requireParent(page !== null, "PageFooter", "Page");
+  return (
+    <div
+      data-slot="page-footer"
       className={cn(
-        page?.headerVariant === "bar" &&
-          "mx-auto w-full max-w-7xl flex-1 px-8 py-8",
-        page?.headerVariant === "bar" && page.containerClassName,
-        integralState && "flex min-h-0 flex-1 flex-col",
+        "mt-auto flex shrink-0 items-center justify-end border-t bg-muted/30 px-8 py-4",
         className,
       )}
       {...props}