Card Week

Componente de card flexível, pensado para exibir conteúdo semanal.

Exemplos

Básico

Card simples, sem tag e sem progresso circular.

Aprender
Introdução

Intensivo R+ 2025

Semana 1

Clínica médica

Estimado 1h

Com tag

Use a prop tag no CardWeekBreadcrumb para exibir uma tag. Você também pode usar a prop tagIcon para adicionar um ícone à tag.

Aprender
Introdução

Prioridade

Última revisão há 0 dias

Semana 1

Clínica médica0 vezes revisado

Estimado 2h

Com progresso circular

Use o CardWeekProgressCircle para exibir um indicador de progresso circular no cabeçalho.

Aprender
Introdução

Prioridade

Última revisão há 0 dias

Semana 1

75%

na última revisão

Clínica médica3 vezes revisado

Estimado 5h

Título longo com progresso circular

O título fica ao lado do progresso circular e é limitado a 2 linhas. Quando o texto é truncado, o hover mostra o título completo num tooltip.

Revisão

Prioridade

Última revisão há 105 dias

Alojamento conjunto e testes de triagem neonatal nos primeiros dias de vida

Primeira revisão

Pediatria

Estimado 5h

Use as props done, postponed ou skipped no CardWeek para indicar o status de conclusão do card. O título ganha o efeito de riscado, a descrição fica esmaecida e o indicador de status muda conforme o caso.

Aprender
Introdução

Prioridade

Última revisão há 0 dias

Semana 1 - Concluída

Clínica médica5 vezes revisado

Estimado 0h

Concluído

Aprender
Introdução

Prioridade

Última revisão há 3 dias

Semana 2 - Adiada

Clínica médica2 vezes revisado

Estimado 0h

Adiado

Aprender
Introdução

Prioridade

Última revisão há 7 dias

Semana 3 - Pulada

Clínica médica1 vezes revisado

Estimado 0h

Pulado

API

Estrutura do CardWeek

Componente	Descrição	Uso
CardWeek	Container raiz com borda e cantos arredondados	Envolve todo o conteúdo do card
CardWeekBreadcrumb	Container do breadcrumb com fundo esmaecido	Envolve os componentes de Breadcrumb (BreadcrumbItem, BreadcrumbSeparator etc.)
CardWeekContainer	Container de conteúdo com padding e gap	Envolve Header, Content, Tags e Footer com espaçamento consistente
CardWeekHeader	Seção de cabeçalho com layout flex em uma linha para título, descrição e progresso	Contém título, descrição e o progresso circular opcional (ao lado do título, alinhado ao topo)
CardWeekTitle	Elemento de título em semibold, limitado a 2 linhas, com tooltip mostrando o texto completo quando truncado (riscado quando done/postponed/skipped)	Título principal do card
CardWeekDescription	Texto de descrição (`gray-foreground`), esmaecido (`gray-foreground-muted`) quando done/postponed/skipped	Texto secundário acima do título
CardWeekTags	Container para as tags, com flex wrap	Envolve componentes Tag
CardWeekProgress	Barra de progresso linear	Mostra o progresso de conclusão no rodapé, entre o status e as ações
CardWeekProgressCircle	Indicador de progresso circular	Mostra a porcentagem de conclusão no cabeçalho
CardWeekContent	Container para os elementos de status, com layout flex	Envolve o CardWeekText e o CardWeekStatus
CardWeekText	Elemento de texto com ícone de tempo opcional	Exibe o texto, com ícone de tempo quando a prop isTime é true
CardWeekStatus	Badge de status que mostra o estado de conclusão	Exibe automaticamente "Concluído", "Adiado" ou "Pulado", conforme o estado do card
CardWeekFooter	Seção de rodapé com margin-top automática	Contém conteúdo, progresso e ações
CardWeekActions	Container de ações com os botões alinhados ao fim	Botões ou elementos interativos

CardWeek

Propriedade	Tipo	Padrão	Descrição
done	boolean	false	Marca o card como concluído. Aplica riscado no título e mostra o status "Concluído".
postponed	boolean	false	Marca o card como adiado. Aplica riscado no título e mostra o status "Adiado".
skipped	boolean	false	Marca o card como pulado. Aplica riscado no título e mostra o status "Pulado".
className	string	-	Classes CSS adicionais para o container do card.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardWeekBreadcrumb

Propriedade	Tipo	Padrão	Descrição
tag	string	-	Texto opcional da tag, exibido no fim do breadcrumb.
tagIcon	React.ReactElement	-	Ícone opcional exibido dentro da tag.
children	React.ReactNode	-	Itens da trilha (BreadcrumbItem e BreadcrumbSeparator). A trilha é uma lista simples, sem landmark de navegação; não use BreadcrumbPage, que é anunciado como link indisponível.
className	string	-	Classes CSS adicionais para o container do breadcrumb.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardWeekContainer

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Conteúdo do card (componentes Header, Content, Tags e Footer).
className	string	-	Classes CSS adicionais para o container.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardWeekHeader

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Conteúdo do cabeçalho (título, descrição, progresso).
className	string	-	Classes CSS adicionais. Use `border-b` para adicionar uma borda inferior com padding automático.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardWeekTitle

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Texto do título. Limitado a 2 linhas; quando truncado, o conteúdo completo aparece num tooltip no hover.
className	string	-	Classes CSS adicionais para o elemento de título. Use `line-clamp-none` para desativar o truncamento.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardWeekDescription

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Texto da descrição.
className	string	-	Classes CSS adicionais para o elemento de descrição.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardWeekTags

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Componentes Tag a exibir.
className	string	-	Classes CSS adicionais para o container de tags.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardWeekProgress

Barra de progresso linear exibida no rodapé, entre o status e as ações.

Propriedade	Tipo	Padrão	Descrição
value	number	0	Porcentagem do progresso (0 a 100). Vira 100 (com o indicador verde) quando o CardWeek pai está `done`.
className	string	-	Classes CSS adicionais para a `div` que envolve o conteúdo.
...props	ProgressProps	-	Aceita todas as props do componente Progress.

CardWeekProgressCircle

Indicador de progresso circular exibido no cabeçalho.

Propriedade	Tipo	Padrão	Descrição
value	number \| string	-	Obrigatório. Porcentagem do progresso (0 a 100). Uma string é renderizada como está, sem o sufixo `%`, e deixa o indicador vazio.
label	string	-	Texto opcional exibido abaixo da porcentagem.
size	number	104	Tamanho do círculo de progresso, em pixels.
strokeWidth	number	2	Espessura do traço do progresso.
indicatorClassName	string	-	Classes CSS adicionais para o indicador de progresso.
trackClassName	string	-	Classes CSS adicionais para o trilho do progresso.
valueClassName	string	-	Classes CSS adicionais para o texto do valor.
labelClassName	string	-	Classes CSS adicionais para o texto do label.
className	string	-	Classes CSS adicionais para a `div` que envolve o círculo (ela mantém o tamanho e alinha o círculo ao fim do cabeçalho), não para o círculo em si.
...props	ProgressCircleProps	-	Aceita todas as props do componente ProgressCircle.

CardWeekContent

Container para os elementos de texto e status no rodapé.

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Conteúdo a exibir (CardWeekText e CardWeekStatus).
className	string	-	Classes CSS adicionais para o container de conteúdo.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardWeekFooter

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Conteúdo do rodapé (status, ações).
className	string	-	Classes CSS adicionais para o rodapé.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardWeekText

Elemento de texto com ícone de tempo opcional.

Propriedade	Tipo	Padrão	Descrição
isTime	boolean	false	Quando true, exibe um ícone de tempo antes do conteúdo e aplica a cor secondary-foreground.
children	React.ReactNode	-	Texto a exibir.
className	string	-	Classes CSS adicionais para o container de texto.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardWeekStatus

Badge de status que exibe automaticamente o estado de conclusão com base nas props do CardWeek pai. Retorna null se nenhum status estiver definido.

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais para o badge de status.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

Comportamento do status:

Quando done é true no CardWeek: mostra "Concluído" com badge verde
Quando postponed é true no CardWeek: mostra "Adiado" com badge amarelo
Quando skipped é true no CardWeek: mostra "Pulado" com badge amarelo
Quando nenhum está definido: retorna null (não renderiza nada)

CardWeekActions

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Botões de ação ou elementos interativos.
className	string	-	Classes CSS adicionais para o container de ações.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.