@softize/opus 23.0.0 → 24.0.0

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

@@ -1,191 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cn } from "../../lib/cn.ts";
-import {
-  SurfaceLayoutProvider,
-  surfaceActionsClasses,
-  surfaceDescriptionClasses,
-  surfaceHeaderRowClasses,
-  surfaceRegionClasses,
-  surfaceTitleClasses,
-  useSurfaceLayout,
-  type SurfaceLayout,
-} from "../patterns/surface-anatomy.ts";
-import { SurfaceHeader } from "../patterns/surface-header.tsx";
-import {
-  SurfaceMedia,
-  type SurfaceMediaProps,
-} from "../patterns/surface-media.tsx";
-import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
-
-/**
- * Card — a superfície da casa: SÓ a casca (borda + raio + bg). Divergência DECLARADA vs
- * shadcn: FLAT (sem `shadow-sm`) e SEM `flex/gap/py` forçados. O padding mora no SLOT
- * (Header/Body/Footer) ou no `className` do consumidor (box simples).
- *
- *   Box simples:   <Card className="p-4">…</Card>
- *   Estruturado:   <Card><CardHeader>…</CardHeader><CardBody>…</CardBody></Card>
- *
- * `layout` é o pacote de anatomia da ADR 0023 e vale para a superfície inteira:
- *
- *   contínuo (default): sem divisores; o ritmo separa as regiões.
- *   seccionado:         regiões simétricas, com divisor entre as adjacentes.
- *
- * O divisor é derivado da presença das regiões — o consumidor não escreve `border-b`.
- */
-export function Card({
-  className,
-  asChild = false,
-  layout = "continuous",
-  ...props
-}: React.ComponentProps<"div"> & {
-  /** Renderiza como o filho (Radix Slot) — pra card CLICÁVEL manter a semântica do filho
-   *  (ex.: <button>) com a superfície do Card: `<Card asChild><button onClick>…</button></Card>`. */
-  asChild?: boolean;
-  /** Anatomia da superfície: `continuous` (default) ou `sectioned`. */
-  layout?: SurfaceLayout;
-}): React.ReactElement {
-  const Comp = asChild ? Slot : "div";
-  return (
-    <SurfaceLayoutProvider value={layout}>
-      <Comp
-        data-slot="card"
-        data-layout={layout}
-        className={cn(
-          "rounded-xl border border-border bg-card text-card-foreground [--surface-background:var(--card)]",
-          // Seccionado: o divisor encosta na borda, então o raio precisa recortar.
-          layout === "sectioned" && "overflow-hidden",
-          className,
-        )}
-        {...props}
-      />
-    </SurfaceLayoutProvider>
-  );
-}
-
-export function CardHeader({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">): React.ReactElement {
-  const layout = useSurfaceLayout("card");
-  return (
-    <SurfaceHeader
-      name="CardHeader"
-      slot="card"
-      slots={{
-        media: CardMedia,
-        title: CardTitle,
-        description: CardDescription,
-        actions: CardAction,
-      }}
-      leadingPlacement="inline"
-      titleRequired={false}
-      rowClassName={surfaceHeaderRowClasses("card")}
-      className={cn(surfaceRegionClasses("card", layout, "header"), className)}
-      {...props}
-    >
-      {children}
-    </SurfaceHeader>
-  );
-}
-
-/** Moldura de ícone ou imagem que abre a linha do header. */
-export function CardMedia(props: SurfaceMediaProps): React.ReactElement {
-  return <SurfaceMedia slot="card-media" {...props} />;
-}
-
-export function CardTitle({
-  className,
-  level = 3,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"h3"> & {
-  /** Hierarquia do documento (`h1`–`h6`). O tamanho vem do layout, nunca do nível. */
-  level?: HeadingLevel;
-  asChild?: boolean;
-}): React.ReactElement {
-  const layout = useSurfaceLayout("card");
-  const Comp = asChild ? Slot : headingTags[level];
-  return (
-    <Comp
-      data-slot="card-title"
-      className={cn(surfaceTitleClasses("card", layout), className)}
-      {...props}
-    />
-  );
-}
-
-export function CardDescription({
-  className,
-  ...props
-}: React.ComponentProps<"p">): React.ReactElement {
-  return (
-    <p
-      data-slot="card-description"
-      className={cn(surfaceDescriptionClasses("card"), className)}
-      {...props}
-    />
-  );
-}
-
-/** Ações do header — a família posiciona no extremo oposto ao título. */
-export function CardAction({
-  className,
-  ...props
-}: React.ComponentProps<"div">): React.ReactElement {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(surfaceActionsClasses, className)}
-      {...props}
-    />
-  );
-}
-
-export function CardBody({
-  className,
-  ...props
-}: React.ComponentProps<"div">): React.ReactElement {
-  const layout = useSurfaceLayout("card");
-  return (
-    <div
-      data-slot="card-body"
-      className={cn(surfaceRegionClasses("card", layout, "body"), className)}
-      {...props}
-    />
-  );
-}
-
-/** @deprecated Use CardBody. Alias mantido para migração; sai numa próxima versão major. */
-export function CardContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">): React.ReactElement {
-  const layout = useSurfaceLayout("card");
-  return (
-    <div
-      data-slot="card-content"
-      className={cn(surfaceRegionClasses("card", layout, "body"), className)}
-      {...props}
-    />
-  );
-}
-
-export function CardFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">): React.ReactElement {
-  const layout = useSurfaceLayout("card");
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn(
-        "flex items-center justify-end gap-2",
-        surfaceRegionClasses("card", layout, "footer"),
-        className,
-      )}
-      {...props}
-    />
-  );
-}

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

@@ -1,292 +0,0 @@
-## Caixa simples
-
-O uso mais comum é a superfície em repouso: raio, borda e fundo, sem sombra. O `Card` não impõe
-flex, gap nem padding, então o miolo continua seu — inclusive o `space-y` ou o grid que a tela já
-usa. Nesse formato o recuo vem do `className`.
-
-```tsx preview col
-<Card className="p-4">
-  <p className="text-sm text-muted-foreground">3 veículos aguardando retirada.</p>
-</Card>
-```
-
-Quando a hierarquia realmente pedir elevação, declare a intensidade, por exemplo
-`className="shadow-sm"`.
-
-## Cabeçalho, corpo e rodapé
-
-Quando o card tem estrutura, cada região vira um slot e traz o próprio recuo. `CardHeader`
-reconhece quatro slots — `CardMedia`, `CardTitle`, `CardDescription` e `CardAction` — e monta a
-linha sozinho: mídia, título e descrição de um lado, ações no extremo oposto. A ordem em que os
-slots são escritos não altera a posição.
-
-```tsx preview col
-<Card>
-  <CardHeader>
-    <CardTitle>Oficina Centro</CardTitle>
-    <CardDescription>4 boxes · 2 consultores de plantão.</CardDescription>
-  </CardHeader>
-  <CardBody>
-    <p className="text-sm text-muted-foreground">Próximo horário livre hoje, às 14h.</p>
-  </CardBody>
-  <CardFooter>
-    <Button size="sm" variant="outline">Ver agenda</Button>
-    <Button size="sm">Agendar revisão</Button>
-  </CardFooter>
-</Card>
-```
-
-O rodapé alinha as ações no fim da linha. Um nó que não seja um desses quatro slots dentro do
-`CardHeader` interrompe a renderização com um erro: a linha do cabeçalho pertence à família, e um
-`div` solto ali devolveria à tela a decisão de posicionamento. Conteúdo livre vai para `CardBody`.
-
-## Escolher entre contínuo e seccionado
-
-`layout` declara a anatomia da superfície inteira e fica no root. Não é uma borda ligada ou
-desligada: cada valor é um pacote de recuo, ritmo vertical, escala do título e divisores.
-
-| Aspecto | `continuous` (padrão) | `sectioned` |
-| --- | --- | --- |
-| Divisores | nenhum | entre as regiões vizinhas |
-| Ritmo vertical | o cabeçalho se aproxima do corpo; o espaço separa | regiões simétricas; o divisor separa |
-| Recuo lateral | mais folgado, para leitura | o mesmo das demais superfícies de operação |
-| Escala do título | um degrau acima | um degrau mais contida |
-
-Use `continuous` no card de leitura, que apresenta um assunto e termina. Use `sectioned` quando o
-card for uma superfície de operação — regiões com pesos diferentes, lista dentro do corpo, rodapé
-com ações — ou quando ele precisar conviver com um [`Dialog`](/ui/dialog), um
-[`Drawer`](/ui/drawer) ou um [`Pane`](/ui/pane) sem degrau visível entre eles.
-
-```tsx preview col
-render(
-  <div className="grid grid-cols-2 gap-4">
-    <Card>
-      <CardHeader>
-        <CardTitle>Contínuo</CardTitle>
-        <CardDescription>O espaço separa as regiões.</CardDescription>
-      </CardHeader>
-      <CardBody>
-        <p className="text-sm text-muted-foreground">Um assunto, lido de cima a baixo.</p>
-      </CardBody>
-      <CardFooter>
-        <Button size="sm" variant="outline">Abrir</Button>
-      </CardFooter>
-    </Card>
-    <Card layout="sectioned">
-      <CardHeader>
-        <CardTitle>Seccionado</CardTitle>
-        <CardDescription>O divisor separa as regiões.</CardDescription>
-      </CardHeader>
-      <CardBody>
-        <p className="text-sm text-muted-foreground">Regiões com pesos diferentes.</p>
-      </CardBody>
-      <CardFooter>
-        <Button size="sm" variant="outline">Abrir</Button>
-      </CardFooter>
-    </Card>
-  </div>,
-);
-```
-
-### Os divisores são derivados
-
-Em `sectioned`, cada região desenha a própria linha quando existe uma região vizinha do outro lado.
-Um cabeçalho sozinho não fecha nada, um rodapé que é a única região também não, e um cabeçalho
-seguido direto de um rodapé produz uma linha só, em vez de duas encostadas.
-
-Por isso, não escreva `border-b` no cabeçalho nem `border-t` no rodapé: a regra depende da presença
-das regiões irmãs, que o componente conhece e a tela não. Uma borda escrita à mão ignora quais
-regiões estão presentes: `border-b` num cabeçalho sozinho desenha uma linha encostada na borda do
-card, e `border-t` no corpo duplica a linha que o cabeçalho já desenha. Da mesma forma,
-`border-b-0` não apaga a linha derivada. Para um card sem divisores, use `layout="continuous"`.
-
-## Mídia e ações no cabeçalho
-
-`CardMedia` abre a linha com a moldura de ícone do Opus — o mesmo [`IconTile`](/ui/icon-tile), na
-escala `sm`, com `context` e `variant` para declarar o significado da cor. `CardAction` fica no
-extremo oposto ao título, sem precisar de classe de alinhamento.
-
-```tsx preview col
-<Card layout="sectioned">
-  <CardHeader>
-    <CardMedia context="primary">
-      <CarFront />
-    </CardMedia>
-    <CardTitle>Revisão dos 20.000 km</CardTitle>
-    <CardDescription>Agendada para 12 de maio, às 9h.</CardDescription>
-    <CardAction>
-      <Button size="sm" variant="outline">Reagendar</Button>
-    </CardAction>
-  </CardHeader>
-  <CardBody>
-    <p className="text-sm text-muted-foreground">Consultor responsável: Marina Alves.</p>
-  </CardBody>
-</Card>
-```
-
-## Hierarquia do título
-
-`CardTitle` é um heading. `level` escolhe a hierarquia do documento, de `1` a `6`, com `3` como
-padrão — um card costuma ser uma seção dentro de uma página que já tem o `h1`. O tamanho visual não
-vem daí: ele é decidido pela família e pelo `layout`, então corrigir o nível para acertar a
-estrutura do documento não muda a aparência.
-
-```tsx preview col
-<Card>
-  <CardHeader>
-    <CardTitle level={2}>Qualidade da base</CardTitle>
-    <CardDescription>O nível muda a semântica; a escala continua a do layout.</CardDescription>
-  </CardHeader>
-</Card>
-```
-
-Quando o título leva a outra tela, coloque o link dentro dele. O heading continua sendo o
-`CardTitle`, e o link fica no seu conteúdo:
-
-```tsx preview col
-<Card>
-  <CardHeader>
-    <CardTitle>
-      <a href="#" className="hover:underline">Revisão dos 20.000 km</a>
-    </CardTitle>
-    <CardDescription>Agendada para 12 de maio, às 9h.</CardDescription>
-  </CardHeader>
-</Card>
-```
-
-Use `asChild` só quando outro componente já renderiza o próprio heading e precisa receber a escala do
-título. Com `asChild`, o elemento é o filho: `level` deixa de valer, e um link passado ali substitui
-o heading em vez de ficar dentro dele.
-
-## A matriz de slots
-
-As regiões são independentes: o cabeçalho existe sem corpo, o corpo existe sem cabeçalho e o rodapé
-entra apenas quando há ações persistentes. Os divisores acompanham as regiões presentes, e o corpo
-reassume o respiro de cima ou de baixo quando é a primeira ou a última região. No layout contínuo, o
-cabeçalho só se aproxima da região seguinte quando ela existe: sozinho, ele fecha o card com o mesmo
-respiro que tem em cima.
-
-```tsx preview col
-render(
-  <div className="grid grid-cols-2 gap-4">
-    <Card>
-      <CardHeader>
-        <CardMedia>
-          <UserRound />
-        </CardMedia>
-        <CardTitle>Contínuo com mídia</CardTitle>
-      </CardHeader>
-      <CardBody>
-        <p className="text-sm text-muted-foreground">
-          Sem rodapé, o corpo reassume o respiro de baixo.
-        </p>
-      </CardBody>
-    </Card>
-    <Card>
-      <CardBody>
-        <p className="text-sm text-muted-foreground">
-          Só corpo: o card vira uma caixa com o recuo da família.
-        </p>
-      </CardBody>
-    </Card>
-    <Card layout="sectioned">
-      <CardHeader>
-        <CardTitle>Seccionado sem corpo</CardTitle>
-        <CardAction>
-          <Button size="sm" variant="ghost">Editar</Button>
-        </CardAction>
-      </CardHeader>
-      <CardFooter>
-        <Button size="sm">Salvar</Button>
-      </CardFooter>
-    </Card>
-    <Card layout="sectioned">
-      <CardHeader>
-        <CardMedia context="success">
-          <ShieldCheck />
-        </CardMedia>
-        <CardTitle>Seccionado completo</CardTitle>
-        <CardDescription>Cabeçalho, corpo e rodapé.</CardDescription>
-      </CardHeader>
-      <CardBody>
-        <p className="text-sm text-muted-foreground">Cada fronteira ganha uma linha.</p>
-      </CardBody>
-      <CardFooter>
-        <Button size="sm" variant="outline">Descartar</Button>
-        <Button size="sm">Publicar</Button>
-      </CardFooter>
-    </Card>
-  </div>,
-);
-```
-
-No layout contínuo, o respiro de baixo de um cabeçalho sem corpo nem rodapé segue o de cima. Essa
-regra só vale quando o cabeçalho é a última região e tem precedência sobre o `className`, então um
-`pb-*` no `CardHeader` não altera esse recuo. Para um recuo diferente, escolha o `layout`: no
-`sectioned`, as regiões usam o recuo simétrico e mais contido das superfícies de operação.
-
-## Propriedades de Card
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `layout` | `'continuous' \| 'sectioned'` | `'continuous'` | Anatomia da superfície inteira; os slots leem esse valor e não o recebem. |
-| `asChild` | `boolean` | `false` | Renderiza o filho com a superfície do Card, por exemplo um `<button>` clicável inteiro. |
-| `className` | `string` | | Compõe sobre a superfície. Sem slots, é aqui que entra o recuo da caixa. |
-
-As demais propriedades são as propriedades nativas de `div`.
-
-## Propriedades de CardHeader
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `children` | `ReactNode` | | Somente `CardMedia`, `CardTitle`, `CardDescription` e `CardAction`, no máximo um de cada. |
-| `className` | `string` | | Ajusta a faixa superior sobre o recuo do layout. |
-
-## Propriedades de CardMedia
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `size` | `'xs' \| 'sm' \| 'default' \| 'lg'` | `'sm'` | Tamanho da moldura e do glifo na escala compartilhada dos controles. |
-| `context` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Declara o significado da cor. |
-| `variant` | `'subtle' \| 'outline'` | `'subtle'` | Usa preenchimento tonal ou acrescenta borda. |
-| `className` | `string` | | Ajusta a moldura sem substituir a escala. |
-| `asChild` | `boolean` | `false` | Cede o elemento para uma marca com visual próprio — um orbe, um logotipo — que ocupa o slot sem ganhar a moldura por cima. |
-
-## Propriedades de CardTitle
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `3` | Hierarquia do documento. O tamanho vem do `layout`, nunca do nível. |
-| `asChild` | `boolean` | `false` | Usa o filho como elemento do título, com a escala do layout. Reserve para um componente que já renderiza um heading; com `asChild`, `level` não se aplica. |
-| `className` | `string` | | Ajusta o título. |
-
-## Propriedades de CardDescription
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `children` | `ReactNode` | | Frase de apoio sob o título, dentro do cabeçalho. |
-| `className` | `string` | | Ajusta a descrição. |
-
-## Propriedades de CardAction
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `children` | `ReactNode` | | Controles no extremo oposto ao título, como um botão ou um menu. |
-| `className` | `string` | | Ajusta o agrupamento das ações. |
-
-## Propriedades de CardBody
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `children` | `ReactNode` | | Conteúdo principal do card. |
-| `className` | `string` | | Ajusta a região sobre o recuo do layout. |
-
-`CardContent` continua exportado como alias depreciado de `CardBody` e sai em uma próxima versão
-maior. Código novo usa `CardBody`.
-
-## Propriedades de CardFooter
-
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `children` | `ReactNode` | | Ações persistentes, alinhadas no fim da linha. |
-| `className` | `string` | | Ajusta o rodapé, inclusive a distribuição das ações. |