47:T8573,
import { cn } from "cn"

import { Icon } from "@konfront/ui/icons"

export type Stage = {
  name: string
  /** 0–100. */
  progress: number
  state: "closed" | "current" | "future"
  /** Conditional stage: dashed border and "Si aplica". */
  conditional?: boolean
  /** Part of a repeatable group (sprint cycle); consecutive cycle stages share a bracket. */
  cycle?: boolean
}

function StageCell({ stage }: { stage: Stage }) {
  const { state } = stage
  return (
    <div
      aria-current={state === "current" ? "step" : undefined}
      className={cn(
        "flex min-w-40 flex-1 flex-col gap-2 rounded-lg border bg-card px-3 py-2.5",
        state === "current" ? "border-primary" : "border-border",
        stage.conditional && "border-dashed"
      )}
    >
      <div className="flex items-center gap-1.5">
        {state === "closed" && <Icon name="done" weight="fill" className="size-4 shrink-0 text-success" />}
        <span
          className={cn(
            "truncate text-sm font-medium",
            state === "current" && "text-primary-text",
            state === "future" && "text-muted-foreground"
          )}
        >
          {stage.name}
        </span>
        <span className="ml-auto text-xs whitespace-nowrap text-muted-foreground tabular-nums">{Math.round(stage.progress)} %</span>
      </div>
      <div
        role="progressbar"
        aria-label={`Avance de ${stage.name}`}
        aria-valuenow={Math.round(stage.progress)}
        aria-valuemin={0}
        aria-valuemax={100}
        className="h-1 overflow-hidden rounded-full bg-muted"
      >
        <div
          className={cn("h-full rounded-full transition-[width] duration-500", state === "closed" ? "bg-success" : state === "current" ? "bg-primary" : "bg-border")}
          style={{ width: `${stage.progress}%` }}
        />
      </div>
      {stage.conditional && <span className="text-xs text-muted-foreground">Si aplica</span>}
    </div>
  )
}

/** Horizontal stage stepper: one cell per stage with name, percent and a 4 px bar. */
export function StageStepper({ stages, className }: { stages: Stage[]; className?: string }) {
  // Group consecutive cycle stages so they share one bracket.
  const runs: { cycle: boolean; stages: Stage[] }[] = []
  for (const s of stages) {
    const last = runs.at(-1)
    if (last && last.cycle === !!s.cycle && s.cycle) last.stages.push(s)
    else runs.push({ cycle: !!s.cycle, stages: [s] })
  }
  return (
    <ol aria-label="Etapas" className={cn("flex items-end gap-2 overflow-x-auto pb-1", className)}>
      {runs.map((run, i) =>
        run.cycle ? (
          <li key={i} className="flex flex-col gap-1.5">
            <div className="flex items-center gap-1.5 border-x border-t border-border rounded-t-md px-2 pt-1 text-xs text-muted-foreground">
              <Icon name="cycle" className="size-3.5" />
              Ciclo de sprint
            </div>
            <ol className="flex gap-2">
              {run.stages.map((s) => (
                <li key={s.name} className="flex">
                  <StageCell stage={s} />
                </li>
              ))}
            </ol>
          </li>
        ) : (
          <li key={i} className="flex flex-1">
            <StageCell stage={run.stages[0]} />
          </li>
        )
      )}
    </ol>
  )
}
46:["$","div",null,{"className":"overflow-auto px-4 py-3.5 font-mono text-[13px] leading-6 [&_pre]:!bg-transparent [&_span]:text-(--shiki-light) dark:[&_span]:text-(--shiki-dark)","style":{"maxHeight":560},"dangerouslySetInnerHTML":{"__html":"$47"}}]
Reglas Konfront
