@softize/opus 23.0.0 → 24.0.0

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

@@ -1,528 +0,0 @@
-import {
-  Children,
-  createContext,
-  isValidElement,
-  useContext,
-  useId,
-  type ComponentProps,
-  type HTMLAttributes,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-import { cn } from "../../lib/cn.ts";
-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 type { SurfaceLayout } from "./surface-anatomy.ts";
-import { SurfaceMedia, type SurfaceMediaProps } from "./surface-media.tsx";
-import {
-  SurfaceHeader,
-  surfaceHeaderClasses,
-} from "./surface-header.tsx";
-
-export type ContentHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export type ContentElement = "section" | "fieldset";
-export type ContentFrameVariant = "default" | "legend";
-
-interface ContentContextValue {
-  element: ContentElement;
-  frameVariant: ContentFrameVariant;
-  framed: boolean;
-  layout: SurfaceLayout;
-  level: ContentHeaderLevel;
-  titleId: string;
-  variant: "page" | "section";
-}
-
-const ContentContext = createContext<ContentContextValue | null>(null);
-const ContentHeaderContext = createContext<ContentContextValue | null>(null);
-
-function requiredContext<T>(
-  value: T | null,
-  component: string,
-  parent: string,
-): T {
-  if (value === null)
-    throw new Error(`${component} deve estar dentro de ${parent}.`);
-  return value;
-}
-
-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;
-}
-
-interface ContentSectionBaseProps
-  extends
-    ContentSharedProps,
-    Omit<ComponentProps<"section">, "children" | "title"> {
-  /** Elemento semântico da região. */
-  as?: "section";
-  /** Tratamento visual da moldura: contínua (default) ou integrada ao header. */
-  frameVariant?: ContentFrameVariant;
-  /** Nível semântico do heading, independente de seu destaque visual. */
-  level?: ContentHeaderLevel;
-}
-
-interface ContentFieldsetBaseProps
-  extends
-    ContentSharedProps,
-    Omit<ComponentProps<"fieldset">, "children" | "title"> {
-  /** Usa a semântica nativa de grupo de campos; o título vira `legend`. */
-  as: "fieldset";
-  /** Tratamento visual da moldura: contínua (default) ou recortada pela legenda. */
-  frameVariant?: ContentFrameVariant;
-  level?: never;
-}
-
-interface ContentSectionShorthandProps extends ContentSectionBaseProps {
-  title: ReactNode;
-  /** Ícone ou imagem que identifica a região, antes do título. */
-  media?: ReactNode;
-  /** Total de itens ao lado do título da seção. A página não carrega contador (ADR 0009). */
-  count?: number;
-  description?: ReactNode;
-  actions?: ReactNode;
-  children: ReactNode;
-}
-
-interface ContentFieldsetShorthandProps extends ContentFieldsetBaseProps {
-  title: ReactNode;
-  /** Ícone ou imagem decorativa que acompanha o título dentro da legenda. */
-  media?: ReactNode;
-  count?: never;
-  description?: never;
-  actions?: never;
-  children: ReactNode;
-}
-
-interface ContentComposedProps {
-  title?: never;
-  media?: never;
-  count?: never;
-  description?: never;
-  actions?: never;
-  children: ReactNode;
-}
-
-export type ContentProps =
-  | ContentSectionShorthandProps
-  | ContentFieldsetShorthandProps
-  | ((ContentSectionBaseProps | ContentFieldsetBaseProps) &
-      ContentComposedProps);
-
-/** Região de conteúdo nomeada. A forma curta e a explícita produzem a mesma anatomia. */
-export function Content({
-  as = "section",
-  title,
-  media,
-  count,
-  description,
-  actions,
-  level = 2,
-  framed = false,
-  layout = "continuous",
-  frameVariant = "default",
-  children,
-  className,
-  ...props
-}: ContentProps): ReactElement {
-  const titleId = useId();
-  const fill = useFillRegion();
-  const variant = level === 1 && as === "section" ? "page" : "section";
-  const context: ContentContextValue = {
-    element: as,
-    frameVariant,
-    framed,
-    layout,
-    level: level as ContentHeaderLevel,
-    titleId,
-    variant,
-  };
-  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)
-  ) {
-    throw new Error(
-      "Content não permite misturar propriedades de shorthand com ContentHeader explícito.",
-    );
-  }
-  if (!shorthand) {
-    const headers = nodes.filter(
-      (node) => isValidElement(node) && node.type === ContentHeader,
-    );
-    const bodies = nodes.filter(
-      (node) => isValidElement(node) && node.type === ContentBody,
-    );
-    if (
-      headers.length !== 1 ||
-      bodies.length !== 1 ||
-      headers.length + bodies.length !== nodes.length
-    ) {
-      throw new Error(
-        "Content explícito exige exatamente um ContentHeader e um ContentBody como filhos diretos.",
-      );
-    }
-  }
-
-  const anatomy = shorthand ? (
-    <>
-      <ContentHeader>
-        {hasContentMedia(media) && <ContentMedia>{media}</ContentMedia>}
-        <ContentTitle>{title}</ContentTitle>
-        {count !== undefined && <ContentMeta>{count}</ContentMeta>}
-        {description !== undefined && (
-          <ContentDescription>{description}</ContentDescription>
-        )}
-        {actions !== undefined && <ContentActions>{actions}</ContentActions>}
-      </ContentHeader>
-      <ContentBody>{children}</ContentBody>
-    </>
-  ) : (
-    children
-  );
-  const ariaLabelledBy =
-    props["aria-label"] === undefined ? titleId : undefined;
-
-  return (
-    <ContentContext.Provider value={context}>
-      {as === "fieldset" ? (
-        <fieldset
-          data-slot="content"
-          data-as="fieldset"
-          data-framed={framed}
-          data-frame-variant={frameVariant}
-          data-layout={layout}
-          {...fill.attributes}
-          aria-labelledby={ariaLabelledBy}
-          className={cn(
-            !framed && layout === "continuous" && "space-y-3",
-            framed &&
-              layout === "continuous" &&
-              frameVariant === "default" &&
-              "rounded-xl border border-border p-4",
-            framed &&
-              layout === "continuous" &&
-              frameVariant === "legend" &&
-              "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,
-          )}
-          {...(props as ComponentProps<"fieldset">)}
-        >
-          {fill.provide(anatomy)}
-        </fieldset>
-      ) : (
-        <section
-          data-slot="content"
-          data-as="section"
-          data-framed={framed}
-          data-frame-variant={frameVariant}
-          data-layout={layout}
-          {...fill.attributes}
-          aria-labelledby={ariaLabelledBy}
-          className={cn(
-            layout === "continuous" &&
-              (variant === "page" ? "space-y-6" : "space-y-3"),
-            framed &&
-              layout === "continuous" &&
-              frameVariant === "default" &&
-              "rounded-xl border border-border p-4",
-            framed &&
-              layout === "continuous" &&
-              frameVariant === "legend" &&
-              "rounded-xl border border-border px-4 pb-4",
-            framed &&
-              layout === "sectioned" &&
-              "overflow-hidden rounded-xl border border-border",
-            fill.filling && fillRegionClassName,
-            className,
-          )}
-          {...(props as ComponentProps<"section">)}
-        >
-          {fill.provide(anatomy)}
-        </section>
-      )}
-    </ContentContext.Provider>
-  );
-}
-
-export type ContentHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, "title">;
-
-/**
- * Header estrutural de Content; não é uma região autônoma. A anatomia é a de
- * `SurfaceHeader`, a mesma de `PageHeader`: só os nomes dos slots e a hierarquia mudam.
- */
-export function ContentHeader({
-  className,
-  children,
-  ...props
-}: ContentHeaderProps): ReactElement {
-  const content = requiredContext(
-    useContext(ContentContext),
-    "ContentHeader",
-    "Content",
-  );
-  if (content.element === "fieldset") {
-    return (
-      <ContentHeaderContext.Provider value={content}>
-        <SurfaceHeader
-          as="legend"
-          name="ContentHeader"
-          slot="content"
-          slots={{ media: ContentMedia, title: ContentTitle }}
-          mediaPlacement="heading"
-          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}
-        >
-          {children}
-        </SurfaceHeader>
-      </ContentHeaderContext.Provider>
-    );
-  }
-  return (
-    <ContentHeaderContext.Provider value={content}>
-      <SurfaceHeader
-        name="ContentHeader"
-        slot="content"
-        slots={{
-          media: ContentMedia,
-          title: ContentTitle,
-          count: ContentMeta,
-          description: ContentDescription,
-          actions: ContentActions,
-        }}
-        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,
-        )}
-        {...props}
-      >
-        {children}
-      </SurfaceHeader>
-    </ContentHeaderContext.Provider>
-  );
-}
-
-/** `null`, `false` e `undefined` não desenham mídia: uma moldura vazia não identifica nada. */
-function hasContentMedia(media: ReactNode): boolean {
-  return media !== undefined && media !== null && media !== false;
-}
-
-/**
- * Um `IconTile` recebido como filho não vira uma segunda moldura: o slot assume o lugar dele e
- * herda o que ele declara (`size`, `context`, `variant`, demais props), somando as classes.
- */
-function adoptIconTile(props: SurfaceMediaProps): SurfaceMediaProps {
-  const { children, asChild, className } = props;
-  if (asChild) return props;
-  // `toArray`, não `only`: um array com um único item (de um `map`/`filter`) é válido aqui.
-  const nodes = Children.toArray(children);
-  if (nodes.length !== 1) return props;
-  const child = nodes[0];
-  if (!isValidElement<IconTileProps>(child) || child.type !== IconTile) {
-    return props;
-  }
-  // `null` em size/context/variant significa "use o padrão" no IconTile: fica o do slot.
-  const declared = Object.fromEntries(
-    Object.entries(child.props).filter(([, value]) => value != null),
-  ) as SurfaceMediaProps;
-  return {
-    ...props,
-    ...declared,
-    className: cn(className, declared.className),
-    children: declared.children,
-  };
-}
-
-/** Moldura de ícone ou imagem que identifica a região nomeada. */
-export function ContentMedia({
-  size = "xs",
-  ...rest
-}: SurfaceMediaProps): ReactElement {
-  const context = requiredContext(
-    useContext(ContentHeaderContext),
-    "ContentMedia",
-    "ContentHeader",
-  );
-  const props = adoptIconTile({ size, ...rest });
-  return (
-    <SurfaceMedia
-      slot="content-media"
-      {...props}
-      aria-hidden={context.element === "fieldset" ? true : props["aria-hidden"]}
-    />
-  );
-}
-
-export function ContentTitle({
-  className,
-  id,
-  ...props
-}: HTMLAttributes<HTMLElement>): ReactElement {
-  const context = requiredContext(
-    useContext(ContentHeaderContext),
-    "ContentTitle",
-    "ContentHeader",
-  );
-  const Heading =
-    context.element === "fieldset" ? "span" : headingTags[context.level];
-  usePageHeadingPresence(context.element !== "fieldset" && context.level === 1);
-  return (
-    <Heading
-      id={id ?? context.titleId}
-      data-slot="content-title"
-      className={cn(surfaceHeaderClasses[context.variant].title, className)}
-      {...props}
-    />
-  );
-}
-
-export function ContentDescription({
-  className,
-  ...props
-}: HTMLAttributes<HTMLParagraphElement>): ReactElement {
-  const context = requiredContext(
-    useContext(ContentHeaderContext),
-    "ContentDescription",
-    "ContentHeader",
-  );
-  return (
-    <p
-      data-slot="content-description"
-      className={cn(
-        surfaceHeaderClasses[context.variant].description,
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** O contador ao lado do título — o slot `count` do shorthand. */
-export function ContentMeta({
-  className,
-  ...props
-}: HTMLAttributes<HTMLSpanElement>): ReactElement {
-  const context = requiredContext(
-    useContext(ContentHeaderContext),
-    "ContentMeta",
-    "ContentHeader",
-  );
-  return (
-    <span
-      data-slot="content-meta"
-      className={cn(surfaceHeaderClasses[context.variant].count, className)}
-      {...props}
-    />
-  );
-}
-
-export function ContentActions({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>): ReactElement {
-  const context = requiredContext(
-    useContext(ContentHeaderContext),
-    "ContentActions",
-    "ContentHeader",
-  );
-  return (
-    <div
-      data-slot="content-actions"
-      className={cn(
-        surfaceHeaderClasses[context.variant].actions,
-        context.variant === "page" && "ml-auto w-auto",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export function ContentBody({
-  className,
-  children,
-  ...props
-}: HTMLAttributes<HTMLDivElement>): ReactElement {
-  const content = requiredContext(
-    useContext(ContentContext),
-    "ContentBody",
-    "Content",
-  );
-  const fill = useFillRegion();
-  return (
-    <div
-      data-slot="content-body"
-      {...fill.attributes}
-      className={cn(
-        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,
-      )}
-      {...props}
-    >
-      {fill.provide(children)}
-    </div>
-  );
-}

package/src/ui/components/patterns/surface-media.tsx

@@ -1,69 +0,0 @@
-/**
- * Mídia de superfície (interno): a moldura que abre a linha do header — ADR 0023.
- *
- * Reusa `IconTile`; nenhuma família cria outra escala de molduras. O slot público de
- * cada família (`CardMedia`, `DialogMedia`, …) delega para cá, escolhendo apenas o
- * `data-slot` e a escala default.
- */
-import type { ReactElement } from "react";
-
-import { Slot } from "@radix-ui/react-slot";
-
-import {
-  IconTile,
-  iconTileVariants,
-  type IconTileContext,
-  type IconTileSize,
-  type IconTileVariant,
-} from "../primitives/icon-tile.tsx";
-import { cn } from "../../lib/cn.ts";
-
-export interface SurfaceMediaProps
-  extends Omit<React.ComponentProps<"span">, "children"> {
-  /** Escala da moldura; a família define o default. */
-  size?: IconTileSize;
-  context?: IconTileContext;
-  variant?: IconTileVariant;
-  /**
-   * Renderiza como o filho: para a marca que já tem visual próprio — um orbe, um
-   * logotipo — ocupar o slot sem ganhar a moldura por cima.
-   */
-  asChild?: boolean;
-  children?: React.ReactNode;
-}
-
-export function SurfaceMedia({
-  slot,
-  size = "sm",
-  context,
-  variant,
-  asChild = false,
-  className,
-  ...props
-}: SurfaceMediaProps & { slot: string }): ReactElement {
-  if (asChild) {
-    return (
-      <Slot
-        data-slot={slot}
-        className={cn(
-          iconTileVariants({ size, context: null, variant: null }),
-          // Sem fundo nem borda: quem compõe traz o próprio visual.
-          "bg-transparent",
-          "shrink-0",
-          className,
-        )}
-        {...props}
-      />
-    );
-  }
-  return (
-    <IconTile
-      data-slot={slot}
-      size={size}
-      {...(context !== undefined ? { context } : {})}
-      {...(variant !== undefined ? { variant } : {})}
-      className={cn("shrink-0", className)}
-      {...props}
-    />
-  );
-}