Process Timeline Engine

Challenge Progress

1/1

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/process-timeline-engine.json

Usage

import {
  ProcessTimelineEngine,
  type ProcessTimelineItem
} from '@/components/matos-ui/process-timeline-engine'

const items: ProcessTimelineItem[] = [
  {
    id: 'intake',
    title: 'Intake aprovado',
    description: 'Briefing e escopo foram validados.',
    status: 'complete',
    timestamp: '09:10'
  },
  {
    id: 'mapping',
    title: 'Mapeamento em execucao',
    status: 'active',
    meta: 'Produto'
  }
]

;<ProcessTimelineEngine
  items={items}
  activeId="mapping"
  title="Process Timeline Engine"
  onItemSelect={(item) => console.log(item)}
/>

Reference

ProcessTimelineEngine Props

Prop	Type	Default	Description
`items`	`ProcessTimelineItem[]`	-	Lista de etapas do processo.
`activeId`	`string?`	-	Etapa visualmente selecionada.
`title`	`string?`	`"Process Timeline"`	Titulo do painel.
`subtitle`	`string?`	-	Texto auxiliar abaixo do titulo.
`onItemSelect`	`(item: ProcessTimelineItem) => void`	-	Torna as etapas clicaveis.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Largura maxima do componente.

ProcessTimelineItem

Field	Type	Description
`id`	`string`	Identificador unico da etapa.
`title`	`string`	Nome da etapa.
`description`	`string?`	Detalhe da etapa.
`status`	`"complete" \| "active" \| "pending" \| "blocked" \| "paused"`	Estado visual da etapa.
`timestamp`	`string?`	Horario ou prazo.
`meta`	`string?`	Time, area ou metadado curto.
`icon`	`ReactNode?`	Icone customizado da etapa.

Also exported: processTimelineEngineVariants, ProcessTimelineEngineProps, ProcessTimelineItem and ProcessTimelineStatus.