Card Module

Card para exibir módulos de conteúdo em catálogo ou grid. Mostra um efeito de profundidade com cards empilhados atrás do card, um label com a contagem de itens, um título, um indicador de progresso e um botão de ação. Tem o estado default e o estado blocked, para conteúdo bloqueado com data de liberação.

Exemplos

Padrão: não iniciado

Estado inicial de um módulo sem progress definido (0%). A barra de progresso sempre aparece, e o efeito de cards empilhados fica atrás do card.

Padrão: em andamento

Passe um valor de progress entre 0 e 100 para exibir a barra de progresso e o texto de status.

Padrão: concluído

Com progress={100}, o status passa a exibir "Concluído". A barra de progresso sempre aparece.

Bloqueado (variant="blocked")

Módulos bloqueados, ainda não liberados. Exige availableDate. Exibe um fundo diferente, o status "Não iniciado", um separador e um chip de data com ícone de cadeado. O botão de ação vai dentro do CardModuleFooter, como children.

Sem empilhamento

Defina showStack={false} para esconder o efeito de cards empilhados (ex.: em listas densas ou quando o card já está dentro de um container empilhado).

API

Estrutura do CardModule

Componente	Descrição	Uso
CardModule	Container raiz com borda rounded-lg, contexto de variante e efeito de cards empilhados atrás do card (controlado por showStack)	Envolve todo o conteúdo do card e passa o estado de variante para os filhos
CardModuleHeader	Wrapper que agrupa label e título numa única div	Use para agrupar visualmente o CardModuleLabel e o CardModuleTitle, com espaçamento mais curto
CardModuleLabel	Linha de label com contagem opcional à direita	Identifica a categoria e a contagem do módulo (ex.: "Módulo 1" + "10 itens")
CardModuleTitle	Título principal em fonte semibold	Título principal do card
CardModuleProgress	Texto de status + barra de progresso juntos	Renderiza o texto de status e a barra juntos. Blocked: "Não iniciado" (sem barra). Default: "X% de progresso" + barra, ou "Concluído" (barra verde) quando o progresso é ≥ 100.
CardModuleFooter	Tag de disponibilidade ("Disponível em {availableDate}") com ícone de cadeado, separador e slot de ação	Só aparece quando a variante é "blocked". Aceita children para o botão de ação à direita da data.
CardModuleButton	Botão de ação pronto, com o ícone ArrowRightMd	Renderiza um Button size="sm" com o ícone ArrowRightMd. Aceita todas as props de Button para sobrescrever.
CardModuleAction	Slot de ação alinhado à direita, para a variante default	Envolve os children num container flex alinhado à direita. Use com o CardModuleButton.

CardModule

Propriedade	Tipo	Padrão	Descrição
variant	"default" | "blocked"	"default"	Controla o estado visual do card. "blocked" exige availableDate e renderiza um fundo diferente.
showStack	boolean	true	Liga ou desliga o efeito de cards empilhados atrás do card. Use false para renderizar o card sozinho.
availableDate	string	-	Obrigatório quando variant="blocked", e o TypeScript exige isso. Texto exibido no rodapé (ex.: "11/05").
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardModuleLabel

Propriedade	Tipo	Padrão	Descrição
count	number | string	-	Contagem opcional exibida à direita (ex.: "10 itens").
children	React.ReactNode	-	Texto do label (ex.: "Módulo 1").
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardModuleProgress

Propriedade	Tipo	Padrão	Descrição
progress	number	-	Valor do progresso (0 a 100). Valores fora do intervalo são ajustados automaticamente. Omita para o estado de 0%.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div. O texto de status e a barra seguem o contexto de variante.

CardModuleFooter

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Renderizado à direita do chip de data. Normalmente é o CardModuleButton.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div. Só renderiza quando variant="blocked" e availableDate está definido.

CardModuleButton

Propriedade	Tipo	Padrão	Descrição
...props	ButtonProps	-	Aceita todas as props de Button. O padrão é size="sm" com o ícone ArrowRightMd, e você pode sobrescrever se precisar. Como renderiza só o ícone, sempre passe um aria-label que descreva a ação.